fix(theming): getColor shade default depends on transparency (#1979)

Author: jzempel

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(<StyledTag $hue="azure" />);
-      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);
     });

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);
     });

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<string | number, string>,
   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);
     }
   }
 

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]
       );
     });