design-tokens: Update dark theme background.default to pure black (#000000)

packages/design-system-react-native/src/components/HeaderRoot/HeaderRoot.stories.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import React from 'react';
 
 import { Box, BoxAlignItems, BoxFlexDirection } from '../Box';

packages/design-tokens/src/css/brand-colors.css

@@ -13,10 +13,10 @@
   --brand-colors-grey-grey400: #949596;
   --brand-colors-grey-grey500: #66676a;
   --brand-colors-grey-grey600: #47484a;
-  --brand-colors-grey-grey700: #252628;
-  --brand-colors-grey-grey800: #1c1d1f;
-  --brand-colors-grey-grey900: #131416;
-  --brand-colors-grey-grey1000: #0c0d0f;
+  --brand-colors-grey-grey700: #292929;
+  --brand-colors-grey-grey800: #1f1f1f;
+  --brand-colors-grey-grey900: #141414;
+  --brand-colors-grey-grey1000: #000000;
   --brand-colors-grey-grey050: #f3f3f4;
   --brand-colors-grey-grey000: #ffffff;
   --brand-colors-grey-grey025: #f7f9fc;

packages/design-tokens/src/css/dark-theme-colors.css

@@ -6,21 +6,21 @@
   /* Background default should be the darkest shade, 0 elevation.
   Section is +1 elevation, subsection is +2 elevation.
   Alternative should be deprecated. */
-  --color-background-default: var(--brand-colors-grey-grey900);
-  --color-background-section: var(--brand-colors-grey-grey800);
-  --color-background-subsection: var(--brand-colors-grey-grey700);
+  --color-background-default: var(--brand-colors-grey-grey1000);
+  --color-background-section: var(--brand-colors-grey-grey900);
+  --color-background-subsection: var(--brand-colors-grey-grey800);
   --color-background-alternative: var(--brand-colors-grey-grey1000);
 
   /* Applied to interactive elements, such as buttons.
   For dark mode, we apply pure white with 4% opacity so these
   tokens inherit the background hue of 264.5. */
-  --color-background-muted: #ffffff0a;
-  --color-background-muted-hover: #ffffff14;
-  --color-background-muted-pressed: #ffffff1f;
+  --color-background-muted: #ffffff14;
+  --color-background-muted-hover: #ffffff1f;
+  --color-background-muted-pressed: #ffffff29;
 
   /* Ensures visual consistency with section and subsection. */
-  --color-background-default-hover: var(--brand-colors-grey-grey800);
-  --color-background-default-pressed: var(--brand-colors-grey-grey700);
+  --color-background-default-hover: var(--brand-colors-grey-grey900);
+  --color-background-default-pressed: var(--brand-colors-grey-grey800);
 
   /* Hover state surface for background/alternative (#0d0d0e) */
   --color-background-alternative-hover: #0d0d0e;
@@ -29,7 +29,7 @@
   /* These have opacities of pure white for general usage. 
   We set 8% for hover and 12% for pressed so these tokens pick up
   background hues and are consistent with +1 and +2 elevations.*/
-  --color-background-hover: #ffffff0a;
+  --color-background-hover: #ffffff14;
   --color-background-pressed: #ffffff1f;
 
   /* These are our content colors. 
@@ -51,7 +51,7 @@
   We use 8% opacify of pure white for border-muted so it maintains
   sufficient contrast on bg-default and bg-section.*/
   --color-border-default: var(--brand-colors-grey-grey500);
-  --color-border-muted: #ffffff14;
+  --color-border-muted: #ffffff1f;
 
   /* Derived from the same hue as bg-default, 264.5, for visual
   consistency. Ensures we don't have too much "red".

packages/design-tokens/src/css/darkTheme.test.ts

@@ -22,6 +22,8 @@ describe('Dark Theme Colors CSS', () => {
             const shade: string | undefined = parts[1];
             if (color && shade) {
               cssValue = `var(--brand-colors-${color}-${color}${shade})`;
+            } else if (color && !shade) {
+              cssValue = `var(--brand-colors-${color})`;
             } else {
               throw new Error(`Invalid color or shade: ${value as string}`);
             }

packages/design-tokens/src/css/lightTheme.test.ts

@@ -22,6 +22,8 @@ describe('Light Theme Colors CSS', () => {
             const shade: string | undefined = parts[1];
             if (color && shade) {
               cssValue = `var(--brand-colors-${color}-${color}${shade})`;
+            } else if (color && !shade) {
+              cssValue = `var(--brand-colors-${color})`;
             } else {
               throw new Error(`Invalid color or shade: ${value as string}`);
             }

packages/design-tokens/src/figma/brandColors.json

@@ -37,25 +37,25 @@
       "description": ""
     },
     "700": {
-      "value": "#252628",
+      "value": "#292929",
       "type": "color",
       "parent": "Brand Colors/v2- brand evo (preview)",
       "description": ""
     },
     "800": {
-      "value": "#1c1d1f",
+      "value": "#1f1f1f",
       "type": "color",
       "parent": "Brand Colors/v2- brand evo (preview)",
       "description": ""
     },
     "900": {
-      "value": "#131416",
+      "value": "#141414",
       "type": "color",
       "parent": "Brand Colors/v2- brand evo (preview)",
       "description": ""
     },
     "1000": {
-      "value": "#0c0d0f",
+      "value": "#000000",
       "type": "color",
       "parent": "Brand Colors/v2- brand evo (preview)",
       "description": ""

packages/design-tokens/src/figma/darkTheme.json

@@ -1,7 +1,7 @@
 {
   "background": {
     "default": {
-      "value": "{grey.900}",
+      "value": "{grey.1000}",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "For default neutral surface."
@@ -13,31 +13,31 @@
       "description": "For sunken neutral surface below background/default."
     },
     "section": {
-      "value": "{grey.800}",
+      "value": "{grey.900}",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "For section bg usually over background/default."
     },
     "subsection": {
-      "value": "{grey.700}",
+      "value": "{grey.800}",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "For subsection bg usually over background/section."
     },
     "muted": {
-      "value": "#ffffff0a",
+      "value": "#ffffff14",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "For muted neutral surface."
     },
     "default-hover": {
-      "value": "{grey.800}",
+      "value": "{grey.900}",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "Hover state surface for background/default."
     },
     "default-pressed": {
-      "value": "{grey.700}",
+      "value": "{grey.800}",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "Pressed state surface for background/default."
@@ -55,19 +55,19 @@
       "description": "Pressed state surface for background/alternative."
     },
     "muted-hover": {
-      "value": "#ffffff14",
+      "value": "#ffffff1f",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "Hover state surface for background/muted."
     },
     "muted-pressed": {
-      "value": "#ffffff1f",
+      "value": "#ffffff29",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "Pressed state surface for background/muted."
     },
     "hover": {
-      "value": "#ffffff0a",
+      "value": "#ffffff14",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "General purpose hover state tint."
@@ -145,7 +145,7 @@
       "description": "Default color for borders."
     },
     "muted": {
-      "value": "#ffffff14",
+      "value": "#ffffff1f",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "Muted color for borders."

packages/design-tokens/src/js/brandColor/brandColor.ts

@@ -14,13 +14,13 @@ export const brandColor: BrandColor = {
   // Grey
   grey600: '#47484a',
   // Grey
-  grey700: '#252628',
+  grey700: '#292929',
   // Grey
-  grey800: '#1c1d1f',
+  grey800: '#1f1f1f',
   // Grey
-  grey900: '#131416',
+  grey900: '#141414',
   // Grey
-  grey1000: '#0c0d0f',
+  grey1000: '#000000',
   // Grey
   grey050: '#f3f3f4',
   // Grey

packages/design-tokens/src/js/themes/darkTheme/colors.ts

@@ -3,30 +3,30 @@ import type { ThemeColors } from '../types';
 
 export const colors: ThemeColors = {
   background: {
-    /** For default neutral surface (#222325) */
-    default: brandColor.grey900,
-    /** For sunken neutral surface below background/default. (#121314) */
+    /** For default neutral surface (grey1000 / #000000) */
+    default: brandColor.grey1000,
+    /** For sunken neutral surface below background/default. (grey1000 / #000000) */
     alternative: brandColor.grey1000,
-    /** For section bg usually over background/default (#31333A) */
-    section: brandColor.grey800,
-    /** For subsection bg usually over background/section (#222325) */
-    subsection: brandColor.grey700,
-    /** For muted neutral surface (#ffffff0a) */
-    muted: '#ffffff0a',
-    /** Hover state surface for background/default */
-    defaultHover: '#1c1d1f',
-    /** Pressed state surface for background/default */
-    defaultPressed: '#252628',
+    /** For section bg usually over background/default (grey900 / #141414) */
+    section: brandColor.grey900,
+    /** For subsection bg usually over background/section (grey800 / #1f1f1f) */
+    subsection: brandColor.grey800,
+    /** For muted neutral surface (#ffffff14) */
+    muted: '#ffffff14',
+    /** Hover state surface for background/default (grey900 / #141414) */
+    defaultHover: brandColor.grey900,
+    /** Pressed state surface for background/default (grey800 / #1f1f1f) */
+    defaultPressed: brandColor.grey800,
     /** Hover state surface for background/alternative (#0d0d0e) */
     alternativeHover: '#0d0d0e',
     /** Pressed state surface for background/alternative (#161617) */
     alternativePressed: '#161617',
-    /** Hover state surface for background/muted (#ffffff14) */
-    mutedHover: '#ffffff14',
-    /** Pressed state surface for background/muted (#ffffff1f) */
-    mutedPressed: '#ffffff1f',
-    /** General purpose hover state tint (#ffffff0a) */
-    hover: '#ffffff0a',
+    /** Hover state surface for background/muted (#ffffff1f) */
+    mutedHover: '#ffffff1f',
+    /** Pressed state surface for background/muted (#ffffff29) */
+    mutedPressed: '#ffffff29',
+    /** General purpose hover state tint (#ffffff14) */
+    hover: '#ffffff14',
     /** General purpose pressed state tint (#ffffff1f) */
     pressed: '#ffffff1f',
   },
@@ -55,8 +55,8 @@ export const colors: ThemeColors = {
   border: {
     /** Default color for borders */
     default: brandColor.grey500,
-    /** Muted color for borders (#ffffff14) */
-    muted: '#ffffff14',
+    /** Muted color for borders (#ffffff1f) */
+    muted: '#ffffff1f',
   },
   overlay: {
     /** Default color for overlays (scrim) (#030304b8) */