design-tokens(dark): update grey tokens and dark theme muted/hover/pressed + border-muted; react-native: use bg-section for BottomSheet surface

Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>

Author: cursoragent

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-section rounded-t-3xl overflow-hidden border border-muted',
           twClassName,
         ),
         {

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

@@ -9,13 +9,13 @@
   /* Grey */
   --brand-colors-grey-grey100: #ededed;
   --brand-colors-grey-grey200: #babbbe;
-  --brand-colors-grey-grey300: #a3a4a7;
-  --brand-colors-grey-grey400: #949596;
-  --brand-colors-grey-grey500: #66676a;
-  --brand-colors-grey-grey600: #47484a;
-  --brand-colors-grey-grey700: #333333;
-  --brand-colors-grey-grey800: #262626;
-  --brand-colors-grey-grey900: #1a1a1a;
+  --brand-colors-grey-grey300: #9aa5b0;
+  --brand-colors-grey-grey400: #8897a5;
+  --brand-colors-grey-grey500: #5a646e;
+  --brand-colors-grey-grey600: #41484e;
+  --brand-colors-grey-grey700: #262b30;
+  --brand-colors-grey-grey800: #1e2226;
+  --brand-colors-grey-grey900: #16191c;
   --brand-colors-grey-grey1000: #000000;
   --brand-colors-grey-grey050: #f3f3f4;
   --brand-colors-grey-grey000: #ffffff;

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

@@ -14,9 +14,9 @@
   /* Applied to interactive elements, such as buttons.
   For dark mode, we apply pure white with 10%, 15%, and 20% opacities
   so these tokens inherit the background hue. */
-  --color-background-muted: #ffffff1a;
-  --color-background-muted-hover: #ffffff26;
-  --color-background-muted-pressed: #ffffff33;
+  --color-background-muted: #c8e4ff1c;
+  --color-background-muted-hover: #c8e4ff26;
+  --color-background-muted-pressed: #c8e4ff30;
 
   /* Ensures visual consistency with section and subsection. */
   --color-background-default-hover: var(--brand-colors-grey-grey900);
@@ -29,8 +29,8 @@
   /* These have opacities of pure white for general usage.
   We set 10% for hover and 15% for pressed so these tokens pick up
   background hues and are consistent with +1 and +2 elevations.*/
-  --color-background-hover: #ffffff1a;
-  --color-background-pressed: #ffffff26;
+  --color-background-hover: #c8e4ff1c;
+  --color-background-pressed: #c8e4ff26;
 
   /* These are our content colors. 
   Contrast ratio of alternative: 7.4 on default, 8.5 on section. 
@@ -51,7 +51,7 @@
   We use 10% opacity 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: #ffffff1a;
+  --color-border-muted: #c8e4ff26;
 
   /* 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/figma/brandColors.json

@@ -13,43 +13,43 @@
       "description": ""
     },
     "300": {
-      "value": "#a3a4a7",
+      "value": "#9aa5b0",
       "type": "color",
       "parent": "Brand Colors/v2- brand evo (preview)",
       "description": ""
     },
     "400": {
-      "value": "#949596",
+      "value": "#8897a5",
       "type": "color",
       "parent": "Brand Colors/v2- brand evo (preview)",
       "description": ""
     },
     "500": {
-      "value": "#66676a",
+      "value": "#5a646e",
       "type": "color",
       "parent": "Brand Colors/v2- brand evo (preview)",
       "description": ""
     },
     "600": {
-      "value": "#47484a",
+      "value": "#41484e",
       "type": "color",
       "parent": "Brand Colors/v2- brand evo (preview)",
       "description": ""
     },
     "700": {
-      "value": "#333333",
+      "value": "#262b30",
       "type": "color",
       "parent": "Brand Colors/v2- brand evo (preview)",
       "description": ""
     },
     "800": {
-      "value": "#262626",
+      "value": "#1e2226",
       "type": "color",
       "parent": "Brand Colors/v2- brand evo (preview)",
       "description": ""
     },
     "900": {
-      "value": "#1a1a1a",
+      "value": "#16191c",
       "type": "color",
       "parent": "Brand Colors/v2- brand evo (preview)",
       "description": ""

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

@@ -25,7 +25,7 @@
       "description": "For subsection bg usually over background/section."
     },
     "muted": {
-      "value": "#ffffff1a",
+      "value": "#c8e4ff1c",
       "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": "#ffffff26",
+      "value": "#c8e4ff26",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "Hover state surface for background/muted."
     },
     "muted-pressed": {
-      "value": "#ffffff33",
+      "value": "#c8e4ff30",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "Pressed state surface for background/muted."
     },
     "hover": {
-      "value": "#ffffff1a",
+      "value": "#c8e4ff1c",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "General purpose hover state tint."
     },
     "pressed": {
-      "value": "#ffffff26",
+      "value": "#c8e4ff26",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "General purpose pressed state tint."
@@ -145,7 +145,7 @@
       "description": "Default color for borders."
     },
     "muted": {
-      "value": "#ffffff1a",
+      "value": "#c8e4ff26",
       "type": "color",
       "parent": "Theme Colors/Dark mode",
       "description": "Muted color for borders."

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

@@ -6,19 +6,19 @@ export const brandColor: BrandColor = {
   // Grey
   grey200: '#babbbe',
   // Grey
-  grey300: '#a3a4a7',
+  grey300: '#9aa5b0',
   // Grey
-  grey400: '#949596',
+  grey400: '#8897a5',
   // Grey
-  grey500: '#66676a',
+  grey500: '#5a646e',
   // Grey
-  grey600: '#47484a',
+  grey600: '#41484e',
   // Grey
-  grey700: '#333333',
+  grey700: '#262b30',
   // Grey
-  grey800: '#262626',
+  grey800: '#1e2226',
   // Grey
-  grey900: '#1a1a1a',
+  grey900: '#16191c',
   // Grey
   grey1000: '#000000',
   // Grey

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

@@ -11,8 +11,8 @@ export const colors: ThemeColors = {
     section: brandColor.grey900,
     /** For subsection bg usually over background/section (grey800 / #262626) */
     subsection: brandColor.grey800,
-    /** For muted neutral surface (#ffffff1a) */
-    muted: '#ffffff1a',
+    /** For muted neutral surface (#c8e4ff1c) */
+    muted: '#c8e4ff1c',
     /** Hover state surface for background/default (grey900 / #1a1a1a) */
     defaultHover: brandColor.grey900,
     /** Pressed state surface for background/default (grey800 / #262626) */
@@ -21,14 +21,14 @@ export const colors: ThemeColors = {
     alternativeHover: '#0d0d0e',
     /** Pressed state surface for background/alternative (#161617) */
     alternativePressed: '#161617',
-    /** Hover state surface for background/muted (#ffffff26) */
-    mutedHover: '#ffffff26',
-    /** Pressed state surface for background/muted (#ffffff33) */
-    mutedPressed: '#ffffff33',
-    /** General purpose hover state tint (#ffffff1a) */
-    hover: '#ffffff1a',
-    /** General purpose pressed state tint (#ffffff26) */
-    pressed: '#ffffff26',
+    /** Hover state surface for background/muted (#c8e4ff26) */
+    mutedHover: '#c8e4ff26',
+    /** Pressed state surface for background/muted (#c8e4ff30) */
+    mutedPressed: '#c8e4ff30',
+    /** General purpose hover state tint (#c8e4ff1c) */
+    hover: '#c8e4ff1c',
+    /** General purpose pressed state tint (#c8e4ff26) */
+    pressed: '#c8e4ff26',
   },
   text: {
     /** Default color for text (#FFFFFF) */
@@ -55,8 +55,8 @@ export const colors: ThemeColors = {
   border: {
     /** Default color for borders */
     default: brandColor.grey500,
-    /** Muted color for borders (#ffffff1a) */
-    muted: '#ffffff1a',
+    /** Muted color for borders (#c8e4ff26) */
+    muted: '#c8e4ff26',
   },
   overlay: {
     /** Default color for overlays (scrim) (#030304b8) */