chore: update brand color tokens for dark theme consistency

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

@@ -7,17 +7,17 @@
 
 :root {
   /* Grey */
-  --brand-colors-grey-grey100: #dadce5;
-  --brand-colors-grey-grey200: #b7bbc8;
-  --brand-colors-grey-grey300: #9ca1af;
-  --brand-colors-grey-grey400: #858b9a;
-  --brand-colors-grey-grey500: #686e7d;
-  --brand-colors-grey-grey600: #4b505c;
-  --brand-colors-grey-grey700: #2a2c32;
-  --brand-colors-grey-grey800: #232426;
-  --brand-colors-grey-grey900: #121314;
+  --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: #252628;
+  --brand-colors-grey-grey800: #1c1d1f;
+  --brand-colors-grey-grey900: #131416;
   --brand-colors-grey-grey1000: #000000;
-  --brand-colors-grey-grey050: #f3f5f9;
+  --brand-colors-grey-grey050: #f3f3f4;
   --brand-colors-grey-grey000: #ffffff;
   --brand-colors-grey-grey025: #f7f9fc;
   /* Blue */

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

@@ -3,60 +3,63 @@
  */
 [data-theme='dark'],
 .dark {
-  /* For default neutral surface (#121314) */
+  /* 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);
-  /* For sunken neutral surface below background/default (#000000) */
-  --color-background-alternative: var(--brand-colors-grey-grey1000);
-  /* For section bg usually over background/default (#202123) */
   --color-background-section: var(--brand-colors-grey-grey800);
-  /* For subsection bg usually over background/section (#2A2C32) */
   --color-background-subsection: var(--brand-colors-grey-grey700);
-  /* For muted neutral surface (#E0E5FF14) */
-  --color-background-muted: #e0e5ff14;
-  /* Hover state surface for background/default (#1a1b1c) */
-  --color-background-default-hover: #1a1b1c;
-  /* Pressed state surface for background/default (#222424) */
-  --color-background-default-pressed: #222424;
+  --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;
+
+  /* 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);
+
   /* Hover state surface for background/alternative (#0d0d0e) */
   --color-background-alternative-hover: #0d0d0e;
-  /* Pressed state surface for background/alternative (#161617) */
   --color-background-alternative-pressed: #161617;
-  /* Hover state surface for background/muted (#E0E5FF26) */
-  --color-background-muted-hover: #e0e5ff26;
-  /* Pressed state surface for background/muted (#E0E5FF33) */
-  --color-background-muted-pressed: #e0e5ff33;
-  /* General purpose hover state tint (#dadce50a) */
-  --color-background-hover: #dadce50a;
-  /* General purpose pressed state tint (#dadce514) */
-  --color-background-pressed: #dadce514;
-  /* Default color for text (#ffffff) */
+
+  /* These have opacities of pure white for general usage. 
+  We set 8% for hover and 14% 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;
+
+  /* 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);
-  /* Softer color for text (#858b9a) */
   --color-text-alternative: var(--brand-colors-grey-grey300);
-  /* Muted color for text (Not accessible) (#686e7d) */
   --color-text-muted: var(--brand-colors-grey-grey600);
-  /* Default color for icons (#ffffff) */
+
   --color-icon-default: var(--brand-colors-grey-grey000);
-  /* Hover state surface for icon.default (#f0f0f0) */
   --color-icon-default-hover: #f0f0f0;
-  /* Pressed state surface for icon.default (#d0d0d0) */
   --color-icon-default-pressed: #d0d0d0;
-  /* Softer color for icons (#858b9a) */
+
   --color-icon-alternative: var(--brand-colors-grey-grey300);
-  /* Muted color for icons (Not accessible) (#686e7d) */
   --color-icon-muted: var(--brand-colors-grey-grey600);
-  /* For elements placed on top of icon.default fill (#121314) */
   --color-icon-inverse: var(--brand-colors-grey-grey900);
-  /* Default color for borders (#9ca1af) */
-  --color-border-default: var(--brand-colors-grey-grey400);
-  /* Muted color for borders (#858b9a33) */
-  --color-border-muted: #858b9a33;
-  /* Default color for overlays (scrim) (#00000099) */
-  --color-overlay-default: #00000099;
-  /* Dimmer color for overlays (scrim) (black-80%) */
-  --color-overlay-alternative: #000000cc;
-  /* For elements placed on top of overlay/alternative (#ffffff) */
+
+  /* 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;
+
+  /* Derived from the same hue as bg-default, 264.5, for visual
+  consistency. Ensures we don't have too much "red".
+  Opacities are 72% and 84% for default and alternative. */
+  --color-overlay-default: #030304b8;
+  --color-overlay-alternative: #030304d6;
   --color-overlay-inverse: var(--brand-colors-grey-grey000);
+
   /* For primary semantic elements: interactive, active, selected (#8b99ff) */
   --color-primary-default: var(--brand-colors-blue-blue300);
   /* Stronger color for primary semantic elements (#adb6fe) */

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

@@ -4,60 +4,64 @@
 :root,
 [data-theme='light'],
 .light {
-  /* For default neutral surface (#ffffff) */
+  /* 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-grey000);
-  /* For sunken neutral surface below background/default (#f3f5f9) */
-  --color-background-alternative: var(--brand-colors-grey-grey050);
-  /* For section bg usually over background/default (#f3f5f9) */
   --color-background-section: var(--brand-colors-grey-grey050);
-  /* For subsection bg usually over background/section (#ffffff) */
   --color-background-subsection: var(--brand-colors-grey-grey000);
-  /* For muted neutral surface (#3c4d9d0f) */
-  --color-background-muted: #3c4d9d0f;
-  /* Hover state surface for background/default (#f6f6f7) */
-  --color-background-default-hover: #f6f6f7;
-  /* Pressed state surface for background/default (#ebecef) */
-  --color-background-default-pressed: #ebecef;
-  /* Hover state surface for background/alternative (#ebedf1) */
+  --color-background-alternative: var(--brand-colors-grey-grey050);
+
+  /* Applied to interactive elements, such as buttons. 
+  For light mode, we use 8% increments of opacity to offer
+  sufficient affordance for usability. */
+  --color-background-muted: #b4b4b528;
+  --color-background-muted-hover: #b4b4b53d;
+  --color-background-muted-pressed: #b4b4b552;
+
+  /* Ensures visual consistency with section and subsection. */
+  --color-background-default-hover: var(--brand-colors-grey-grey050);
+  --color-background-default-pressed: var(--brand-colors-grey-grey100);
+
+  /* These colors should be deprecated eventuallly for simplicty */
   --color-background-alternative-hover: #ebedf1;
-  /* Pressed state surface for background/alternative (#e1e4ea) */
   --color-background-alternative-pressed: #e1e4ea;
-  /* Hover state surface for background/muted (#3c4d9d1a) */
-  --color-background-muted-hover: #3c4d9d1a;
-  /* Pressed state surface for background/muted (#3c4d9d26) */
-  --color-background-muted-pressed: #3c4d9d26;
-  /* General purpose hover state tint (#858b9a14) */
-  --color-background-hover: #858b9a14;
-  /* General purpose pressed state tint (#858b9a29) */
-  --color-background-pressed: #858b9a29;
-  /* Default color for text (#121314) */
+
+  /* These have opacities of pure white for general usage. 
+  Visually, they align with section and subsection.*/
+  --color-background-hover: #b4b4b528;
+  --color-background-pressed: #b4b4b53d;
+
+  /* These are our content colors. 
+  Contrast ratio of alternative: 5.7 on default, 5.1 on section. 
+  Contrast ratio of muted: 1.9 on default, 1.7 on section.*/
   --color-text-default: var(--brand-colors-grey-grey900);
-  /* Softer color for text (#686e7d) */
   --color-text-alternative: var(--brand-colors-grey-grey500);
-  /* Muted color for text (Not accessible) (#9ca1af) */
   --color-text-muted: var(--brand-colors-grey-grey200);
-  /* Default color for icons (#121314) */
+
   --color-icon-default: var(--brand-colors-grey-grey900);
-  /* Hover state surface for icon.default (#2a2b2c) */
   --color-icon-default-hover: #2a2b2c;
-  /* Pressed state surface for icon.default (#414243) */
   --color-icon-default-pressed: #414243;
-  /* Softer color for icons (#686e7d) */
+
   --color-icon-alternative: var(--brand-colors-grey-grey500);
-  /* Muted color for icons (Not accessible) (#9ca1af) */
   --color-icon-muted: var(--brand-colors-grey-grey200);
-  /* For elements placed on top of icon.default fill (#ffffff) */
-  --color-icon-inverse: var(--brand-colors-grey-grey000);
-  /* Default color for borders (#b7bbc8) */
-  --color-border-default: var(--brand-colors-grey-grey200);
-  /* Muted color for borders (b7bbc8-40%) */
-  --color-border-muted: #b7bbc866;
-  /* Default color for overlays (scrim) (#3f434a66) */
-  --color-overlay-default: #3f434a66;
-  /* Dimmer color for overlays (scrim) (black-80%) */
-  --color-overlay-alternative: #000000cc;
-  /* For elements placed on top of overlay/alternative (#ffffff) */
+  --color-icon-inverse: var(--brand-colors-grey-grey900);
+
+  /* Border default has a 3:3 ratio when applied on bg-default
+  and 3.0 on section. We use opacity for border-muted so it
+  maintains sufficient contrast on bg-default and bg-section.*/
+  --color-border-default: var(--brand-colors-grey-grey400);
+  --color-border-muted: #b4b4b566;
+
+  /* Derived from the background hue, 264.5, for consistency.
+  Opacity for default is 36%, alternative is 56%. Default is meant
+  to be the inverse of dark mode so the layering feels consistent
+  across themes. Alternative is relatively darker in light mode for
+  better contrast.*/
+  --color-overlay-default: #0a0d135c;
+  --color-overlay-alternative: #0a0d138f;
   --color-overlay-inverse: var(--brand-colors-grey-grey000);
+
   /* For primary semantic elements: interactive, active, selected (#4459ff) */
   --color-primary-default: var(--brand-colors-blue-blue500);
   /* Stronger color for primary semantic elements (#2c3dc5) */

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

@@ -13,7 +13,7 @@
       "description": ""
     },
     "300": {
-      "value": "#9ca1af",
+      "value": "#9b9b9b",
       "type": "color",
       "parent": "Brand Colors/v2- brand evo (preview)",
       "description": ""
@@ -31,25 +31,25 @@
       "description": ""
     },
     "600": {
-      "value": "#4b505c",
+      "value": "#48484e",
       "type": "color",
       "parent": "Brand Colors/v2- brand evo (preview)",
       "description": ""
     },
     "700": {
-      "value": "#2a2c32",
+      "value": "#252628",
       "type": "color",
       "parent": "Brand Colors/v2- brand evo (preview)",
       "description": ""
     },
     "800": {
-      "value": "#232426",
+      "value": "#1c1d1f",
       "type": "color",
       "parent": "Brand Colors/v2- brand evo (preview)",
       "description": ""
     },
     "900": {
-      "value": "#121314",
+      "value": "#131416",
       "type": "color",
       "parent": "Brand Colors/v2- brand evo (preview)",
       "description": ""

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

@@ -6,19 +6,19 @@ export const brandColor: BrandColor = {
   // Grey
   grey200: '#b7bbc8',
   // Grey
-  grey300: '#9ca1af',
+  grey300: '#9b9b9b',
   // Grey
   grey400: '#858b9a',
   // Grey
   grey500: '#686e7d',
   // Grey
-  grey600: '#4b505c',
+  grey600: '#48484e',
   // Grey
-  grey700: '#2a2c32',
+  grey700: '#252628',
   // Grey
-  grey800: '#232426',
+  grey800: '#1c1d1f',
   // Grey
-  grey900: '#121314',
+  grey900: '#131416',
   // Grey
   grey1000: '#000000',
   // Grey