fix: improve dark mode neutral background contrast (#2039)

Author: jzempel

packages/loaders/src/elements/Progress.spec.tsx

@@ -80,7 +80,7 @@ describe('Progress', () => {
   describe('without a color set', () => {
     it.each<['light' | 'dark', string, string]>([
       ['light', rgba(PALETTE.grey[700], DEFAULT_THEME.opacity[200]), PALETTE.green[700]],
-      ['dark', rgba(PALETTE.grey[500], DEFAULT_THEME.opacity[200]), PALETTE.green[600]]
+      ['dark', rgba(PALETTE.white, DEFAULT_THEME.opacity[200]), PALETTE.green[600]]
     ])('applies the default colors in "%s mode', (mode, bgColor, fgColor) => {
       const { container } = getRenderFn(mode)(<Progress value={42} />);
 

packages/loaders/src/elements/Skeleton.spec.tsx

@@ -16,7 +16,7 @@ describe('Skeleton', () => {
 
   it.each<Args>([
     ['light', rgba(PALETTE.grey[700], DEFAULT_THEME.opacity[200])],
-    ['dark', rgba(PALETTE.grey[500], DEFAULT_THEME.opacity[200])]
+    ['dark', rgba(PALETTE.white, DEFAULT_THEME.opacity[200])]
   ])('renders a Skeleton in "%s" mode', (mode, color) => {
     const { container } = getRenderFn(mode)(<Skeleton />);
 

packages/loaders/src/styled/StyledProgress.ts

@@ -35,10 +35,9 @@ const colorStyles = ({
 }: IStyledProgressBackgroundProps & ThemeProps<DefaultTheme>) => {
   const backgroundColor = getColor({
     theme,
-    hue: 'neutralHue',
     transparency: theme.opacity[200],
-    light: { shade: 700 },
-    dark: { shade: 500 }
+    light: { hue: 'neutralHue', shade: 700 },
+    dark: { hue: 'white' }
   });
   let options;
 

packages/loaders/src/styled/StyledSkeleton.ts

@@ -59,10 +59,9 @@ const getBackgroundColor = ({
   } else {
     backgroundColor = getColor({
       theme,
-      hue: 'neutralHue',
       transparency: theme.opacity[200],
-      light: { shade: 700 },
-      dark: { shade: 500 }
+      light: { hue: 'neutralHue', shade: 700 },
+      dark: { hue: 'white' }
     });
   }
   return backgroundColor;

packages/theming/src/elements/theme/__snapshots__/index.spec.ts.snap

@@ -38,7 +38,7 @@ exports[`DEFAULT_THEME matches snapshot 1`] = `
           "danger": "dangerHue.1000",
           "dangerEmphasis": "dangerHue.600",
           "default": "neutralHue.1100",
-          "disabled": "rgba(neutralHue.500, 100)",
+          "disabled": "rgba(white, 100)",
           "emphasis": "neutralHue.600",
           "primaryEmphasis": "primaryHue.600",
           "raised": "neutralHue.1000",

packages/theming/src/elements/theme/index.ts

@@ -60,7 +60,7 @@ const colors = {
         successEmphasis: 'successHue.600',
         warningEmphasis: 'warningHue.600',
         dangerEmphasis: 'dangerHue.600',
-        disabled: 'rgba(neutralHue.500, 100)'
+        disabled: 'rgba(white, 100)'
       },
       border: {
         default: 'neutralHue.800',

packages/theming/src/utils/getColor.spec.ts

@@ -66,7 +66,7 @@ describe('getColor', () => {
           variable: 'background.disabled'
         });
         const transparency = 0.08;
-        const expected = rgba(PALETTE.grey[mode === 'dark' ? 500 : 700], transparency);
+        const expected = rgba(mode === 'dark' ? PALETTE.white : PALETTE.grey[700], transparency);
 
         expect(color).toBe(expected);
       });