From 6964db3918db95d5f934a24633f9335e4f81d1d8 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Thu, 21 Aug 2025 19:18:36 +0000 Subject: [PATCH 1/2] Add system preference color theme support for light and dark modes Co-authored-by: george.marshall --- .../src/css/dark-theme-colors.css | 160 +++++++++ .../src/css/light-theme-colors.css | 323 +++++++++++++++++- 2 files changed, 482 insertions(+), 1 deletion(-) diff --git a/packages/design-tokens/src/css/dark-theme-colors.css b/packages/design-tokens/src/css/dark-theme-colors.css index 39c2eee1..8a692df2 100644 --- a/packages/design-tokens/src/css/dark-theme-colors.css +++ b/packages/design-tokens/src/css/dark-theme-colors.css @@ -158,3 +158,163 @@ /* For critical/danger drop shadow color (#ff758433) */ --color-shadow-error: #ff758433; } + +/* Dark theme based on system preference */ +@media (prefers-color-scheme: dark) { + :root:not([data-theme]) { + /* For default neutral surface (#121314) */ + --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; + /* 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) */ + --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) */ + --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) */ + --color-primary-alternative: var(--brand-colors-blue-blue200); + /* Muted color for primary semantic elements (#8b99ff26) */ + --color-primary-muted: #8b99ff26; + /* For elements placed on top of primary/default (#121314) */ + --color-primary-inverse: var(--brand-colors-grey-grey900); + /* Hover state surface for primary/default (#9eaaff) */ + --color-primary-default-hover: #9eaaff; + /* Pressed state surface for primary/default (#c7ceff) */ + --color-primary-default-pressed: #c7ceff; + /* Hover state surface for primary/muted (#8b99ff33) */ + --color-primary-muted-hover: #8b99ff33; + /* Pressed state surface for primary/muted (#8b99ff40) */ + --color-primary-muted-pressed: #8b99ff40; + /* For danger semantic elements: error, critical, destructive (#ff7584) */ + --color-error-default: var(--brand-colors-red-red300); + /* Stronger color for error semantic (#ffa1aa) */ + --color-error-alternative: var(--brand-colors-red-red200); + /* Muted color for error semantic (#ff758426) */ + --color-error-muted: #ff758426; + /* For elements placed on top of error/default (#121314) */ + --color-error-inverse: var(--brand-colors-grey-grey900); + /* Hover state surface for error/default (#ff8a96) */ + --color-error-default-hover: #ff8a96; + /* Pressed state surface for error/default (#ffb2bb) */ + --color-error-default-pressed: #ffb2bb; + /* Hover state surface for error/muted (#ff758433) */ + --color-error-muted-hover: #ff758433; + /* Pressed state surface for error/muted (#ff758440) */ + --color-error-muted-pressed: #ff758440; + /* For warning semantic elements: caution, attention, precaution (#f0b034) */ + --color-warning-default: var(--brand-colors-yellow-yellow200); + /* Muted color option for warning semantic (#f0b03426) */ + --color-warning-muted: #f0b03426; + /* For elements placed on top of warning/default (#121314) */ + --color-warning-inverse: var(--brand-colors-grey-grey900); + /* Hover state surface for warning/default (#f3be59) */ + --color-warning-default-hover: #f3be59; + /* Pressed state surface for warning/default (#f6cd7f) */ + --color-warning-default-pressed: #f6cd7f; + /* Hover state surface for warning/muted (#f0b03433) */ + --color-warning-muted-hover: #f0b03433; + /* Pressed state surface for warning/muted (#f0b03440) */ + --color-warning-muted-pressed: #f0b03440; + /* For positive semantic elements: success, confirm, complete, safe (#baf24a) */ + --color-success-default: var(--brand-colors-lime-lime100); + /* Muted color for positive semantic (#baf24a26) */ + --color-success-muted: #baf24a26; + /* For elements placed on top of success/default (#121314) */ + --color-success-inverse: var(--brand-colors-grey-grey900); + /* Hover state surface for success/default (#c9f570) */ + --color-success-default-hover: #c9f570; + /* Pressed state surface for success/default (#d7f796) */ + --color-success-default-pressed: #d7f796; + /* Hover state surface for success/muted (#baf24a33) */ + --color-success-muted-hover: #baf24a33; + /* Pressed state surface for success/muted (#baf24a40) */ + --color-success-muted-pressed: #baf24a40; + /* For informational read-only elements: info, reminder, hint (#8b99ff) */ + --color-info-default: var(--brand-colors-blue-blue300); + /* Muted color for informational semantic (#8b99ff26) */ + --color-info-muted: #8b99ff26; + /* For elements placed on top of info/default (#121314) */ + --color-info-inverse: var(--brand-colors-grey-grey900); + /* Expressive color in light orange (#ffa680) */ + --color-accent01-light: var(--brand-colors-orange-orange200); + /* Expressive color in orange (#ff5c16) */ + --color-accent01-normal: var(--brand-colors-orange-orange400); + /* Expressive color in dark orange (#661800) */ + --color-accent01-dark: var(--brand-colors-orange-orange700); + /* Expressive color in light purple (#eac2ff) */ + --color-accent02-light: var(--brand-colors-purple-purple100); + /* Expressive color in purple (#d075ff) */ + --color-accent02-normal: var(--brand-colors-purple-purple300); + /* Expressive color in dark purple (#3d065f) */ + --color-accent02-dark: var(--brand-colors-purple-purple800); + /* Expressive color in light lime (#e5ffc3) */ + --color-accent03-light: var(--brand-colors-lime-lime050); + /* Expressive color in lime (#baf24a) */ + --color-accent03-normal: var(--brand-colors-lime-lime100); + /* Expressive color in dark lime (#013330) */ + --color-accent03-dark: var(--brand-colors-lime-lime700); + /* Expressive color in light indigo (#cce7ff) */ + --color-accent04-light: var(--brand-colors-indigo-indigo100); + /* Expressive color in indigo (#89b0ff) */ + --color-accent04-normal: var(--brand-colors-indigo-indigo200); + /* Expressive color in dark indigo (#190066) */ + --color-accent04-dark: var(--brand-colors-indigo-indigo800); + /* For Flask primary accent color (#d27dff) */ + --color-flask-default: var(--brand-colors-purple-purple300); + /* For elements placed on top of flask/default (#121314) */ + --color-flask-inverse: var(--brand-colors-grey-grey900); + /* For neutral drop shadow color (black-40%) */ + --color-shadow-default: #00000066; + /* For primary drop shadow color (#8b99ff33) */ + --color-shadow-primary: #8b99ff33; + /* For critical/danger drop shadow color (#ff758433) */ + --color-shadow-error: #ff758433; + } +} diff --git a/packages/design-tokens/src/css/light-theme-colors.css b/packages/design-tokens/src/css/light-theme-colors.css index 514a9684..9cfd00ee 100644 --- a/packages/design-tokens/src/css/light-theme-colors.css +++ b/packages/design-tokens/src/css/light-theme-colors.css @@ -1,7 +1,8 @@ /* * Light Theme Colors */ -:root, + +/* Light theme for explicit theme selection */ [data-theme='light'], .light { /* For default neutral surface (#ffffff) */ @@ -159,3 +160,323 @@ /* For critical/danger drop shadow color (red50-20% | red300-20%) */ --color-shadow-error: #ca354266; } + +/* Light theme based on system preference */ +@media (prefers-color-scheme: light) { + :root:not([data-theme]) { + /* For default neutral surface (#ffffff) */ + --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-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) */ + --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-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) */ + --color-primary-alternative: var(--brand-colors-blue-blue600); + /* Muted color for primary semantic elements (#4459ff1a) */ + --color-primary-muted: #4459ff1a; + /* For elements placed on top of primary/default (#ffffff) */ + --color-primary-inverse: var(--brand-colors-grey-grey000); + /* Hover state surface for primary/default (#384df5) */ + --color-primary-default-hover: #384df5; + /* Pressed state surface for primary/default (#2b3eda) */ + --color-primary-default-pressed: #2b3eda; + /* Hover state surface for primary/muted (#4459ff26) */ + --color-primary-muted-hover: #4459ff26; + /* Pressed state surface for primary/muted (#4459ff33) */ + --color-primary-muted-pressed: #4459ff33; + /* For danger semantic elements: error, critical, destructive (#ca3542) */ + --color-error-default: var(--brand-colors-red-red500); + /* Stronger color for error semantic (#952731) */ + --color-error-alternative: var(--brand-colors-red-red600); + /* Muted color for error semantic (#ca35421a) */ + --color-error-muted: #ca35421a; + /* For elements placed on top of error/default (#ffffff) */ + --color-error-inverse: var(--brand-colors-grey-grey000); + /* Hover state surface for error/default (#ba313d) */ + --color-error-default-hover: #ba313d; + /* Pressed state surface for error/default (#9a2832) */ + --color-error-default-pressed: #9a2832; + /* Hover state surface for error/muted (#ca354226) */ + --color-error-muted-hover: #ca354226; + /* Pressed state surface for error/muted (#ca354233) */ + --color-error-muted-pressed: #ca354233; + /* For warning semantic elements: caution, attention, precaution (#9a6300) */ + --color-warning-default: var(--brand-colors-yellow-yellow500); + /* Muted color option for warning semantic (#9a63001a) */ + --color-warning-muted: #9a63001a; + /* For elements placed on top of warning/default (#ffffff) */ + --color-warning-inverse: var(--brand-colors-grey-grey000); + /* Hover state surface for warning/default (#855500) */ + --color-warning-default-hover: #855500; + /* Pressed state surface for warning/default (#5c3b00) */ + --color-warning-default-pressed: #5c3b00; + /* Hover state surface for warning/muted (#9a630026) */ + --color-warning-muted-hover: #9a630026; + /* Pressed state surface for warning/muted (#9a630033) */ + --color-warning-muted-pressed: #9a630033; + /* For positive semantic elements: success, confirm, complete, safe (#457A39) */ + --color-success-default: var(--brand-colors-lime-lime500); + /* Muted color for positive semantic (#457a391a) */ + --color-success-muted: #457a391a; + /* For elements placed on top of success/default (#ffffff) */ + --color-success-inverse: var(--brand-colors-grey-grey000); + /* Hover state surface for success/default (#3d6c32) */ + --color-success-default-hover: #3d6c32; + /* Pressed state surface for success/default (#2d5025) */ + --color-success-default-pressed: #2d5025; + /* Hover state surface for success/muted (#457a3926) */ + --color-success-muted-hover: #457a3926; + /* Pressed state surface for success/muted (#457a3933) */ + --color-success-muted-pressed: #457a3933; + /* For informational read-only elements: info, reminder, hint (#4459ff) */ + --color-info-default: var(--brand-colors-blue-blue500); + /* Muted color for informational semantic (#4459ff1a) */ + --color-info-muted: #4459ff1a; + /* For elements placed on top of info/default (#ffffff) */ + --color-info-inverse: var(--brand-colors-grey-grey000); + /* Expressive color in light orange (#ffa680) */ + --color-accent01-light: var(--brand-colors-orange-orange200); + /* Expressive color in orange (#ff5c16) */ + --color-accent01-normal: var(--brand-colors-orange-orange400); + /* Expressive color in dark orange (#661800) */ + --color-accent01-dark: var(--brand-colors-orange-orange700); + /* Expressive color in light purple (#eac2ff) */ + --color-accent02-light: var(--brand-colors-purple-purple100); + /* Expressive color in purple (#d075ff) */ + --color-accent02-normal: var(--brand-colors-purple-purple300); + /* Expressive color in dark purple (#3d065f) */ + --color-accent02-dark: var(--brand-colors-purple-purple800); + /* Expressive color in light lime (#e5ffc3) */ + --color-accent03-light: var(--brand-colors-lime-lime050); + /* Expressive color in lime (#baf24a) */ + --color-accent03-normal: var(--brand-colors-lime-lime100); + /* Expressive color in dark lime (#013330) */ + --color-accent03-dark: var(--brand-colors-lime-lime700); + /* Expressive color in light indigo (#) */ + --color-accent04-light: var(--brand-colors-indigo-indigo100); + /* Expressive color in indigo (#) */ + --color-accent04-normal: var(--brand-colors-indigo-indigo200); + /* Expressive color in dark indigo (#) */ + --color-accent04-dark: var(--brand-colors-indigo-indigo800); + /* For Flask primary accent color (#8f44e4) */ + --color-flask-default: var(--brand-colors-purple-purple500); + /* For elements placed on top of flask/default (#ffffff) */ + --color-flask-inverse: var(--brand-colors-grey-grey000); + /* For neutral drop shadow color (black-10% | black-40%) */ + --color-shadow-default: #0000001a; + /* For primary drop shadow color (blue500-20% | blue300-20%) */ + --color-shadow-primary: #4459ff33; + /* For critical/danger drop shadow color (red50-20% | red300-20%) */ + --color-shadow-error: #ca354266; + } +} + +/* Fallback light theme when no system preference is available */ +@media (prefers-color-scheme: no-preference) { + :root:not([data-theme]) { + /* For default neutral surface (#ffffff) */ + --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-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) */ + --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-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) */ + --color-primary-alternative: var(--brand-colors-blue-blue600); + /* Muted color for primary semantic elements (#4459ff1a) */ + --color-primary-muted: #4459ff1a; + /* For elements placed on top of primary/default (#ffffff) */ + --color-primary-inverse: var(--brand-colors-grey-grey000); + /* Hover state surface for primary/default (#384df5) */ + --color-primary-default-hover: #384df5; + /* Pressed state surface for primary/default (#2b3eda) */ + --color-primary-default-pressed: #2b3eda; + /* Hover state surface for primary/muted (#4459ff26) */ + --color-primary-muted-hover: #4459ff26; + /* Pressed state surface for primary/muted (#4459ff33) */ + --color-primary-muted-pressed: #4459ff33; + /* For danger semantic elements: error, critical, destructive (#ca3542) */ + --color-error-default: var(--brand-colors-red-red500); + /* Stronger color for error semantic (#952731) */ + --color-error-alternative: var(--brand-colors-red-red600); + /* Muted color for error semantic (#ca35421a) */ + --color-error-muted: #ca35421a; + /* For elements placed on top of error/default (#ffffff) */ + --color-error-inverse: var(--brand-colors-grey-grey000); + /* Hover state surface for error/default (#ba313d) */ + --color-error-default-hover: #ba313d; + /* Pressed state surface for error/default (#9a2832) */ + --color-error-default-pressed: #9a2832; + /* Hover state surface for error/muted (#ca354226) */ + --color-error-muted-hover: #ca354226; + /* Pressed state surface for error/muted (#ca354233) */ + --color-error-muted-pressed: #ca354233; + /* For warning semantic elements: caution, attention, precaution (#9a6300) */ + --color-warning-default: var(--brand-colors-yellow-yellow500); + /* Muted color option for warning semantic (#9a63001a) */ + --color-warning-muted: #9a63001a; + /* For elements placed on top of warning/default (#ffffff) */ + --color-warning-inverse: var(--brand-colors-grey-grey000); + /* Hover state surface for warning/default (#855500) */ + --color-warning-default-hover: #855500; + /* Pressed state surface for warning/default (#5c3b00) */ + --color-warning-default-pressed: #5c3b00; + /* Hover state surface for warning/muted (#9a630026) */ + --color-warning-muted-hover: #9a630026; + /* Pressed state surface for warning/muted (#9a630033) */ + --color-warning-muted-pressed: #9a630033; + /* For positive semantic elements: success, confirm, complete, safe (#457A39) */ + --color-success-default: var(--brand-colors-lime-lime500); + /* Muted color for positive semantic (#457a391a) */ + --color-success-muted: #457a391a; + /* For elements placed on top of success/default (#ffffff) */ + --color-success-inverse: var(--brand-colors-grey-grey000); + /* Hover state surface for success/default (#3d6c32) */ + --color-success-default-hover: #3d6c32; + /* Pressed state surface for success/default (#2d5025) */ + --color-success-default-pressed: #2d5025; + /* Hover state surface for success/muted (#457a3926) */ + --color-success-muted-hover: #457a3926; + /* Pressed state surface for success/muted (#457a3933) */ + --color-success-muted-pressed: #457a3933; + /* For informational read-only elements: info, reminder, hint (#4459ff) */ + --color-info-default: var(--brand-colors-blue-blue500); + /* Muted color for informational semantic (#4459ff1a) */ + --color-info-muted: #4459ff1a; + /* For elements placed on top of info/default (#ffffff) */ + --color-info-inverse: var(--brand-colors-grey-grey000); + /* Expressive color in light orange (#ffa680) */ + --color-accent01-light: var(--brand-colors-orange-orange200); + /* Expressive color in orange (#ff5c16) */ + --color-accent01-normal: var(--brand-colors-orange-orange400); + /* Expressive color in dark orange (#661800) */ + --color-accent01-dark: var(--brand-colors-orange-orange700); + /* Expressive color in light purple (#eac2ff) */ + --color-accent02-light: var(--brand-colors-purple-purple100); + /* Expressive color in purple (#d075ff) */ + --color-accent02-normal: var(--brand-colors-purple-purple300); + /* Expressive color in dark purple (#3d065f) */ + --color-accent02-dark: var(--brand-colors-purple-purple800); + /* Expressive color in light lime (#e5ffc3) */ + --color-accent03-light: var(--brand-colors-lime-lime050); + /* Expressive color in lime (#baf24a) */ + --color-accent03-normal: var(--brand-colors-lime-lime100); + /* Expressive color in dark lime (#013330) */ + --color-accent03-dark: var(--brand-colors-lime-lime700); + /* Expressive color in light indigo (#) */ + --color-accent04-light: var(--brand-colors-indigo-indigo100); + /* Expressive color in indigo (#) */ + --color-accent04-normal: var(--brand-colors-indigo-indigo200); + /* Expressive color in dark indigo (#) */ + --color-accent04-dark: var(--brand-colors-indigo-indigo800); + /* For Flask primary accent color (#8f44e4) */ + --color-flask-default: var(--brand-colors-purple-purple500); + /* For elements placed on top of flask/default (#ffffff) */ + --color-flask-inverse: var(--brand-colors-grey-grey000); + /* For neutral drop shadow color (black-10% | black-40%) */ + --color-shadow-default: #0000001a; + /* For primary drop shadow color (blue500-20% | blue300-20%) */ + --color-shadow-primary: #4459ff33; + /* For critical/danger drop shadow color (red50-20% | red300-20%) */ + --color-shadow-error: #ca354266; + } +} From 1775c68ffa9e5053bbcd68826d8f5b973fac43c0 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Thu, 21 Aug 2025 19:25:36 +0000 Subject: [PATCH 2/2] Fix system theme detection with additional class selectors Co-authored-by: george.marshall --- packages/design-tokens/src/css/dark-theme-colors.css | 2 +- packages/design-tokens/src/css/light-theme-colors.css | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/design-tokens/src/css/dark-theme-colors.css b/packages/design-tokens/src/css/dark-theme-colors.css index 8a692df2..7e17fa6e 100644 --- a/packages/design-tokens/src/css/dark-theme-colors.css +++ b/packages/design-tokens/src/css/dark-theme-colors.css @@ -161,7 +161,7 @@ /* Dark theme based on system preference */ @media (prefers-color-scheme: dark) { - :root:not([data-theme]) { + :root:not([data-theme]):not(.dark):not(.light) { /* For default neutral surface (#121314) */ --color-background-default: var(--brand-colors-grey-grey900); /* For sunken neutral surface below background/default (#000000) */ diff --git a/packages/design-tokens/src/css/light-theme-colors.css b/packages/design-tokens/src/css/light-theme-colors.css index 9cfd00ee..f4c2409d 100644 --- a/packages/design-tokens/src/css/light-theme-colors.css +++ b/packages/design-tokens/src/css/light-theme-colors.css @@ -163,7 +163,7 @@ /* Light theme based on system preference */ @media (prefers-color-scheme: light) { - :root:not([data-theme]) { + :root:not([data-theme]):not(.dark):not(.light) { /* For default neutral surface (#ffffff) */ --color-background-default: var(--brand-colors-grey-grey000); /* For sunken neutral surface below background/default (#f3f5f9) */ @@ -323,7 +323,7 @@ /* Fallback light theme when no system preference is available */ @media (prefers-color-scheme: no-preference) { - :root:not([data-theme]) { + :root:not([data-theme]):not(.dark):not(.light) { /* For default neutral surface (#ffffff) */ --color-background-default: var(--brand-colors-grey-grey000); /* For sunken neutral surface below background/default (#f3f5f9) */