From bca205b228b8543470e526c98acba9469017e3cb Mon Sep 17 00:00:00 2001 From: Jonathan Zempel Date: Thu, 21 Nov 2024 15:34:37 -0500 Subject: [PATCH] fix(theming): `getColor` shade default depends on transparency (#1979) --- packages/tags/src/styled/StyledTag.spec.tsx | 2 +- packages/theming/src/utils/getColor.spec.ts | 35 ++++++++++++++++--- packages/theming/src/utils/getColor.ts | 18 +++++++--- .../src/elements/span/Span.spec.tsx | 2 +- 4 files changed, 46 insertions(+), 11 deletions(-) diff --git a/packages/tags/src/styled/StyledTag.spec.tsx b/packages/tags/src/styled/StyledTag.spec.tsx index abfe1cbf05..26e1e17ffb 100644 --- a/packages/tags/src/styled/StyledTag.spec.tsx +++ b/packages/tags/src/styled/StyledTag.spec.tsx @@ -154,7 +154,7 @@ describe('StyledTag', () => { it.each([['light'], ['dark']])('renders using a custom hue for %s mode', mode => { const renderFn = mode === 'light' ? render : renderDark; const { container } = renderFn(); - const backgroundColor = mode === 'dark' ? PALETTE.azure[500] : PALETTE.azure[700]; + const backgroundColor = mode === 'dark' ? PALETTE.azure[600] : PALETTE.azure[700]; expect(container.firstChild).toHaveStyleRule('background-color', backgroundColor); }); diff --git a/packages/theming/src/utils/getColor.spec.ts b/packages/theming/src/utils/getColor.spec.ts index fcd84079e0..ec8e3798d5 100644 --- a/packages/theming/src/utils/getColor.spec.ts +++ b/packages/theming/src/utils/getColor.spec.ts @@ -95,7 +95,7 @@ describe('getColor', () => { describe('by hue', () => { it.each([['light'], ['dark']])('gets the %s mode color specified by string', mode => { const color = getColor({ theme: mode === 'dark' ? DARK_THEME : DEFAULT_THEME, hue: 'red' }); - const expected = mode === 'dark' ? PALETTE.red[500] : PALETTE.red[700]; + const expected = mode === 'dark' ? PALETTE.red[600] : PALETTE.red[700]; expect(color).toBe(expected); }); @@ -108,7 +108,7 @@ describe('getColor', () => { it('applies mode hue as expected', () => { const color = getColor({ theme: DARK_THEME, hue: 'red', dark: { hue: 'green' } }); - const expected = PALETTE.green[500]; + const expected = PALETTE.green[600]; expect(color).toBe(expected); }); @@ -136,11 +136,38 @@ describe('getColor', () => { ['chromeHue', 'dark'] ])('gets the default %s for %s mode', (hue, mode) => { const color = getColor({ theme: mode === 'dark' ? DARK_THEME : DEFAULT_THEME, hue }); - const shade = mode === 'dark' ? 500 : 700; + const shade = mode === 'dark' ? 600 : 700; const expected = (PALETTE as any)[(DEFAULT_THEME as any).colors[hue]][shade]; expect(color).toBe(expected); }); + + it.each([ + ['primaryHue', 'light'], + ['primaryHue', 'dark'], + ['successHue', 'light'], + ['successHue', 'dark'], + ['dangerHue', 'light'], + ['dangerHue', 'dark'], + ['warningHue', 'light'], + ['warningHue', 'dark'], + ['neutralHue', 'light'], + ['neutralHue', 'dark'], + ['chromeHue', 'light'], + ['chromeHue', 'dark'] + ])('gets the default %s with transparency for %s mode', (hue, mode) => { + const transparency = 0.5; + const color = getColor({ + theme: mode === 'dark' ? DARK_THEME : DEFAULT_THEME, + hue, + transparency + }); + const shade = mode === 'dark' ? 500 : 700; + const rgbColor = (PALETTE as any)[(DEFAULT_THEME as any).colors[hue]][shade]; + const expected = rgba(rgbColor, transparency); + + expect(color).toBe(expected); + }); }); it('uses `DEFAULT_THEME` fallback for malformed palette', () => { @@ -232,7 +259,7 @@ describe('getColor', () => { offset: 100, dark: { offset: -100 } }); - const expected = PALETTE.blue[400]; + const expected = PALETTE.blue[500]; expect(color).toBe(expected); }); diff --git a/packages/theming/src/utils/getColor.ts b/packages/theming/src/utils/getColor.ts index 8f1d0501fd..baa106614c 100644 --- a/packages/theming/src/utils/getColor.ts +++ b/packages/theming/src/utils/getColor.ts @@ -24,11 +24,18 @@ const adjust = (color: string, expected: number, actual: number) => { }; /* convert the optional shade + offset to a shade for the given scheme */ -const toShade = (shade?: number | string, offset?: number, scheme?: 'dark' | 'light') => { +const toShade = ( + shade?: number | string, + offset?: number, + transparency?: number, + scheme?: 'dark' | 'light' +) => { let _shade; if (shade === undefined) { - _shade = scheme === 'dark' ? 500 : 700; + const darkShade = transparency === undefined ? 600 : 500; + + _shade = scheme === 'dark' ? darkShade : 700; } else { _shade = parseInt(shade.toString(), 10); @@ -45,9 +52,10 @@ const toHex = ( hue: Record, shade?: number | string, offset?: number, + transparency?: number, scheme?: 'dark' | 'light' ) => { - const _shade = toShade(shade, offset, scheme); + const _shade = toShade(shade, offset, transparency, scheme); let retVal = hue[_shade]; if (!retVal) { @@ -186,14 +194,14 @@ const toColor = ( } if (typeof _hue === 'object') { - retVal = toHex(_hue, shade, offset, scheme); + retVal = toHex(_hue, shade, offset, transparency, scheme); } else if (isValidColor(_hue)) { if (shade === undefined) { retVal = _hue; } else { _hue = generateColorScale(_hue); - retVal = toHex(_hue, shade, offset, scheme); + retVal = toHex(_hue, shade, offset, transparency, scheme); } } diff --git a/packages/typography/src/elements/span/Span.spec.tsx b/packages/typography/src/elements/span/Span.spec.tsx index 2e4a2dfb6c..e7a4f70e7a 100644 --- a/packages/typography/src/elements/span/Span.spec.tsx +++ b/packages/typography/src/elements/span/Span.spec.tsx @@ -77,7 +77,7 @@ describe('Span', () => { expect(container.firstChild).toHaveStyleRule( 'color', - (PALETTE as any)[hue][mode === 'light' ? 700 : 500] + (PALETTE as any)[hue][mode === 'light' ? 700 : 600] ); });