design-tokens(tailwind): add explicit [data-theme='light'], .light variables to allow nested light override of .dark context in Storybook and consumers

cursoragent · cursoragent · commit bcd1e5752396 · 2026-03-16T23:02:07.000Z
diff --git a/packages/design-tokens/src/tailwind/theme.css b/packages/design-tokens/src/tailwind/theme.css
@@ -344,6 +344,173 @@
   --color-shadow-error: #ff758433;
 }
 
+/**
+ * Light Theme Colors
+ * Explicitly re-apply light values so `.light` (or [data-theme='light'])
+ * can override a surrounding `.dark` context.
+ */
+[data-theme='light'],
+.light {
+  /* 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);
+  --color-background-section: var(--brand-colors-grey-grey050);
+  --color-background-subsection: var(--brand-colors-grey-grey000);
+  --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 eventually for simplicity */
+  --color-background-alternative-hover: #ebedf1;
+  --color-background-alternative-pressed: #e1e4ea;
+
+  /* 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);
+  --color-text-alternative: var(--brand-colors-grey-grey500);
+  --color-text-muted: var(--brand-colors-grey-grey200);
+
+  --color-icon-default: var(--brand-colors-grey-grey900);
+  --color-icon-default-hover: #2a2b2c;
+  --color-icon-default-pressed: #414243;
+
+  --color-icon-alternative: var(--brand-colors-grey-grey500);
+  --color-icon-muted: var(--brand-colors-grey-grey200);
+  --color-icon-inverse: var(--brand-colors-grey-grey000);
+
+  /* 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 57%. 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: #0a0d1392;
+  --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;
+}
+
 /* Color Shortcut Utilities - Enable shorter class names */
 /* Text shortcuts: text-default instead of text-text-default */
 @utility text-default {
