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

packages/design-system-react-native/src/components/BottomSheetDialog/BottomSheetDialog.tsx

@@ -232,7 +232,7 @@ export const BottomSheetDialog = forwardRef<
     const sheetStyle = useMemo(
       () => [
         tw.style(
-          'bg-default rounded-t-3xl overflow-hidden border border-muted',
+          'bg-alternative rounded-t-3xl overflow-hidden border border-muted',
           twClassName,
         ),
         {

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

@@ -12,11 +12,11 @@
   --brand-colors-grey-grey300: #a3a4a7;
   --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-grey600: #2b2b30;
+  --brand-colors-grey-grey700: #222226;
+  --brand-colors-grey-grey800: #18181b;
+  --brand-colors-grey-grey900: #0d0d0f;
+  --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,17 +6,17 @@
   /* 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-default: var(--brand-colors-grey-grey1000);
   --color-background-section: var(--brand-colors-grey-grey800);
   --color-background-subsection: var(--brand-colors-grey-grey700);
-  --color-background-alternative: var(--brand-colors-grey-grey1000);
+  --color-background-alternative: var(--brand-colors-grey-grey900);
 
   /* 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: #e2e2ff1b;
+  --color-background-muted-hover: #e2e2ff26;
+  --color-background-muted-pressed: #e2e2ff30;
 
   /* Ensures visual consistency with section and subsection. */
   --color-background-default-hover: var(--brand-colors-grey-grey800);
@@ -29,29 +29,29 @@
   /* 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-pressed: #ffffff1f;
+  --color-background-hover: #e2e2ff1b;
+  --color-background-pressed: #e2e2ff30;
 
   /* These are our content colors. 
   Contrast ratio of alternative: 7.4 on default, 8.5 on section. 
   Contrast ratio of muted: 2.0 on default, 1.8 on section.*/
   --color-text-default: var(--brand-colors-grey-grey000);
   --color-text-alternative: var(--brand-colors-grey-grey300);
-  --color-text-muted: var(--brand-colors-grey-grey600);
+  --color-text-muted: var(--brand-colors-grey-grey500);
 
   --color-icon-default: var(--brand-colors-grey-grey000);
   --color-icon-default-hover: #f0f0f0;
   --color-icon-default-pressed: #d0d0d0;
 
   --color-icon-alternative: var(--brand-colors-grey-grey300);
-  --color-icon-muted: var(--brand-colors-grey-grey600);
+  --color-icon-muted: var(--brand-colors-grey-grey500);
   --color-icon-inverse: var(--brand-colors-grey-grey900);
 
   /* Contrast of border-default: 3:3 on bg-default, 3.0 on section.
   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: #e2e2ff26;
 
   /* 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

@@ -31,31 +31,31 @@
       "description": ""
     },
     "600": {
-      "value": "#47484a",
+      "value": "#2b2b30",
       "type": "color",
       "parent": "Brand Colors/v2- brand evo (preview)",
       "description": ""
     },
     "700": {
-      "value": "#252628",
+      "value": "#222226",
       "type": "color",
       "parent": "Brand Colors/v2- brand evo (preview)",
       "description": ""
     },
     "800": {
-      "value": "#1c1d1f",
+      "value": "#18181b",
       "type": "color",
       "parent": "Brand Colors/v2- brand evo (preview)",
       "description": ""
     },
     "900": {
-      "value": "#131416",
+      "value": "#0d0d0f",
       "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,13 +1,13 @@
 {
   "background": {
     "default": {
-      "value": "{grey.900}",
+      "value": "{grey.1000}",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "For default neutral surface."
     },
     "alternative": {
-      "value": "{grey.1000}",
+      "value": "{grey.900}",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "For sunken neutral surface below background/default."
@@ -25,7 +25,7 @@
       "description": "For subsection bg usually over background/section."
     },
     "muted": {
-      "value": "#ffffff0a",
+      "value": "#e2e2ff1b",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "For muted neutral surface."
@@ -55,25 +55,25 @@
       "description": "Pressed state surface for background/alternative."
     },
     "muted-hover": {
-      "value": "#ffffff14",
+      "value": "#e2e2ff26",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "Hover state surface for background/muted."
     },
     "muted-pressed": {
-      "value": "#ffffff1f",
+      "value": "#e2e2ff30",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "Pressed state surface for background/muted."
     },
     "hover": {
-      "value": "#ffffff0a",
+      "value": "#e2e2ff1b",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "General purpose hover state tint."
     },
     "pressed": {
-      "value": "#ffffff1f",
+      "value": "#e2e2ff30",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "General purpose pressed state tint."
@@ -93,7 +93,7 @@
       "description": "Softer color for text."
     },
     "muted": {
-      "value": "{grey.600}",
+      "value": "{grey.500}",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "Muted color for text (Not accessible)."
@@ -125,7 +125,7 @@
       "description": "Softer color for icons, following text/alternative."
     },
     "muted": {
-      "value": "{grey.600}",
+      "value": "{grey.500}",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "Muted color for icons (Not accessible), following text/muted."
@@ -145,7 +145,7 @@
       "description": "Default color for borders."
     },
     "muted": {
-      "value": "#ffffff14",
+      "value": "#e2e2ff26",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "Muted color for borders."

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

@@ -1409,9 +1409,9 @@
           "description": "(#FFFFFF05) For component hover states with no background color"
         },
         "pressed": {
-          "value": "#FFFFFF14",
+          "value": "#e2e2ff26",
           "type": "color",
-          "description": "(#FFFFFF14) For component pressed states with no background color"
+          "description": "(#e2e2ff26) For component pressed states with no background color"
         }
       },
       "text": {

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

@@ -12,15 +12,15 @@ export const brandColor: BrandColor = {
   // Grey
   grey500: '#66676a',
   // Grey
-  grey600: '#47484a',
+  grey600: '#2b2b30',
   // Grey
-  grey700: '#252628',
+  grey700: '#222226',
   // Grey
-  grey800: '#1c1d1f',
+  grey800: '#18181b',
   // Grey
-  grey900: '#131416',
+  grey900: '#0d0d0f',
   // Grey
-  grey1000: '#0c0d0f',
+  grey1000: '#000000',
   // Grey
   grey050: '#f3f3f4',
   // Grey

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

@@ -9,15 +9,15 @@ export type BrandColor = {
   grey400: string;
   /** grey/grey500: #686e7d */
   grey500: string;
-  /** grey/grey600: #4b505c */
+  /** grey/grey600: #2b2b30 */
   grey600: string;
-  /** grey/grey700: #31333a */
+  /** grey/grey700: #222226 */
   grey700: string;
-  /** grey/grey800: #232426 */
+  /** grey/grey800: #18181b */
   grey800: string;
-  /** grey/grey900: #121314 */
+  /** grey/grey900: #0d0d0f */
   grey900: string;
-  /** grey/grey1000: #0c0d0f */
+  /** grey/grey1000: #000000 */
   grey1000: string;
   /** grey/grey050: #f3f5f9 */
   grey050: string;

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

@@ -3,40 +3,40 @@ 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) */
-    alternative: brandColor.grey1000,
-    /** For section bg usually over background/default (#31333A) */
+    /** For default neutral surface (#000000) */
+    default: brandColor.grey1000,
+    /** For sunken neutral surface below background/default. (#0d0d0f) */
+    alternative: brandColor.grey900,
+    /** For section bg usually over background/default (#18181b) */
     section: brandColor.grey800,
-    /** For subsection bg usually over background/section (#222325) */
+    /** For subsection bg usually over background/section (#222226) */
     subsection: brandColor.grey700,
-    /** For muted neutral surface (#ffffff0a) */
-    muted: '#ffffff0a',
+    /** For muted neutral surface (#e2e2ff1b) */
+    muted: '#e2e2ff1b',
     /** Hover state surface for background/default */
-    defaultHover: '#1c1d1f',
+    defaultHover: '#18181b',
     /** Pressed state surface for background/default */
-    defaultPressed: '#252628',
+    defaultPressed: '#222226',
     /** 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',
-    /** General purpose pressed state tint (#ffffff1f) */
-    pressed: '#ffffff1f',
+    /** Hover state surface for background/muted (#e2e2ff26) */
+    mutedHover: '#e2e2ff26',
+    /** Pressed state surface for background/muted (#e2e2ff30) */
+    mutedPressed: '#e2e2ff30',
+    /** General purpose hover state tint (#e2e2ff1b) */
+    hover: '#e2e2ff1b',
+    /** General purpose pressed state tint (#e2e2ff30) */
+    pressed: '#e2e2ff30',
   },
   text: {
     /** Default color for text (#FFFFFF) */
     default: brandColor.grey000,
     /** Softer color for text (#858B9A) */
     alternative: brandColor.grey300,
-    /** Muted color for text (Not accessible) (#686E7D) */
-    muted: brandColor.grey600,
+    /** Muted color for text (Not accessible) (#66676a) */
+    muted: brandColor.grey500,
   },
   icon: {
     /** Default color for icons (#FFFFFF) */
@@ -47,16 +47,16 @@ export const colors: ThemeColors = {
     defaultPressed: '#d0d0d0',
     /** Softer color for icons (#858B9A) */
     alternative: brandColor.grey300,
-    /** Muted color for icons (Not accessible) (#686E7D) */
-    muted: brandColor.grey600,
+    /** Muted color for icons (Not accessible) (#66676a) */
+    muted: brandColor.grey500,
     /** For elements placed on top of icon.default fill (#121314) */
     inverse: brandColor.grey900,
   },
   border: {
     /** Default color for borders */
     default: brandColor.grey500,
-    /** Muted color for borders (#ffffff14) */
-    muted: '#ffffff14',
+    /** Muted color for borders (#e2e2ff26) */
+    muted: '#e2e2ff26',
   },
   overlay: {
     /** Default color for overlays (scrim) (#030304b8) */