@titan-design/react-ui 0.2.7 → 0.3.0

package/dist/theme/index.mjs

@@ -1,4 +1,4 @@
-export { applyThemePreset, audiobookPreset, componentElevationRanges, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darken, defaultPreset, elevationSystem, getBaseSurfaceColor, getElevationConfig, getElevationShadow, getElevationSurface, getGlowShadow, getHoverColors, getValidatedElevation, hexToRgb, hsvToRgb, isCssPropertyManifest, isDark, lighten, neumorphicShadows, rgbToHex, rgbToHsv, shadowColors, validateCssPropertyManifest } from '../chunk-3VLOBS6O.mjs';
-export { buttonSizes, darkThemeCSSVars, discreteRainbow, getDiscreteRainbowColor, getSemanticColors, getThemeCSSVars, gluestackConfig, lightThemeCSSVars, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, semanticColorsDark, semanticColorsLight, semanticTypography } from '../chunk-5SSKGS6E.mjs';
+export { applyThemePreset, audiobookPreset, componentElevationRanges, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darken, defaultPreset, elevationSystem, getBaseSurfaceColor, getElevationConfig, getElevationShadow, getElevationSurface, getGlowShadow, getHoverColors, getValidatedElevation, hexToRgb, hsvToRgb, isCssPropertyManifest, isDark, lighten, neumorphicShadows, rgbToHex, rgbToHsv, shadowColors, validateCssPropertyManifest } from '../chunk-P7TSQUN6.mjs';
+export { buttonSizes, darkThemeCSSVars, discreteRainbow, getDiscreteRainbowColor, getSemanticColors, getThemeCSSVars, gluestackConfig, lightThemeCSSVars, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, semanticColorsDark, semanticColorsLight, semanticTypography } from '../chunk-7XPB4NAO.mjs';
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map

package/dist/theme/tokens-css.d.mts

@@ -2,9 +2,11 @@
  * Token CSS Generator
  *
  * Emits a static `:root {}` CSS block from the canonical theme token maps
- * (`darkThemeCSSVars` / `lightThemeCSSVars`). HTML prototypes import the
- * generated stylesheet so they always resolve to the exact same values as
- * the design system. Pure codegen: deterministic and diffable against source.
+ * (`darkThemeCSSVars` / `lightThemeCSSVars`). Those maps mirror every `:root`
+ * custom property in `theme/global.css` — completeness and value parity are
+ * enforced by `config.completeness.test.ts`, so HTML prototypes that import the
+ * generated stylesheet resolve to the exact same values as the design system.
+ * Pure codegen: deterministic and diffable against source.
  *
  * Dark mode is the default (`:root`); light mode is activated with `.light`,
  * matching the convention in `theme/global.css`.

package/dist/theme/tokens-css.d.ts

@@ -2,9 +2,11 @@
  * Token CSS Generator
  *
  * Emits a static `:root {}` CSS block from the canonical theme token maps
- * (`darkThemeCSSVars` / `lightThemeCSSVars`). HTML prototypes import the
- * generated stylesheet so they always resolve to the exact same values as
- * the design system. Pure codegen: deterministic and diffable against source.
+ * (`darkThemeCSSVars` / `lightThemeCSSVars`). Those maps mirror every `:root`
+ * custom property in `theme/global.css` — completeness and value parity are
+ * enforced by `config.completeness.test.ts`, so HTML prototypes that import the
+ * generated stylesheet resolve to the exact same values as the design system.
+ * Pure codegen: deterministic and diffable against source.
  *
  * Dark mode is the default (`:root`); light mode is activated with `.light`,
  * matching the convention in `theme/global.css`.

package/dist/theme/tokens-css.js

@@ -4,26 +4,41 @@
 var primitiveColors = {
   // Blue scale (primary brand)
   blue: {
-    600: "#5048E5"},
+    400: "#60A5FA",
+    600: "#5048E5",
+    // Primary main
+    700: "#3832A0"},
   // Teal scale (success)
   teal: {
     50: "#F0FDFA",
+    400: "#43C6B7",
     // Success light
-    500: "#14B8A6"},
+    500: "#14B8A6",
+    700: "#0E8074"},
   // Red scale (error)
   red: {
     50: "#FEF2F2",
-    600: "#D14343"},
+    400: "#DA6868",
+    // Error light
+    500: "#EF4444",
+    600: "#D14343",
+    // Error main
+    700: "#922E2E"},
   // Amber scale (warning)
   amber: {
     50: "#FFFBEB",
+    400: "#FFBF4C",
     // Warning light
-    500: "#FFB020"},
+    500: "#FFB020",
+    // Warning main
+    600: "#B27B16"},
   // Sky/Blue scale (info)
   sky: {
     50: "#F0F9FF",
+    400: "#64B6F7",
     // Info light
-    500: "#2196F3"},
+    500: "#2196F3",
+    700: "#0B79D0"},
   // Neutral/Gray scale
   neutral: {
     50: "#FAFAFA",
@@ -31,11 +46,15 @@ var primitiveColors = {
     300: "#D1D5DB",
     400: "#9CA3AF",
     500: "#6B7280",
+    600: "#4B5563",
     900: "#111827"},
   // Orange scale (accent/brand color)
   accent: {
     200: "#FF9630",
+    300: "#FF8500",
     400: "#FF7900",
+    500: "#F56C00",
+    600: "#E06D10",
     700: "#D0620C"},
   // Charcoal scale (dark backgrounds)
   charcoal: {
@@ -49,10 +68,43 @@ var primitiveColors = {
   // Steel scale (cool accent)
   steel: {
     300: "#678498",
+    400: "#557488",
     500: "#406D87",
+    600: "#39617A",
     700: "#32556D"},
   // Pure colors
   white: "#FFFFFF"};
+var discreteRainbow = [
+  "#E8ECFB",
+  "#D9CCE3",
+  "#D1BBD7",
+  "#CAACCB",
+  "#BA8DB4",
+  "#AE76A3",
+  "#AA6F9E",
+  "#994F88",
+  "#882E72",
+  "#1965B0",
+  "#437DBF",
+  "#5289C7",
+  "#6195CF",
+  "#7BAFDE",
+  "#4EB265",
+  "#90C987",
+  "#CAE0AB",
+  "#F7F056",
+  "#F7CB45",
+  "#F6C141",
+  "#F4A736",
+  "#F1932D",
+  "#EE8026",
+  "#E8601C",
+  "#E65518",
+  "#DC050C",
+  "#A5170E",
+  "#72190E",
+  "#42150A"
+];
 
 // src/theme/tokens/semantic.ts
 var semanticColorsLight = {
@@ -64,6 +116,8 @@ var semanticColorsLight = {
   "brand-primary-dark": primitiveColors.accent[700],
   // #D0620C
   "brand-primary-subtle": "rgba(255, 121, 0, 0.08)",
+  "brand-primary-hover": primitiveColors.accent[500],
+  "brand-primary-active": primitiveColors.accent[600],
   "brand-secondary": primitiveColors.steel[500],
   // #406D87
   "brand-secondary-light": primitiveColors.steel[300],
@@ -71,22 +125,84 @@ var semanticColorsLight = {
   "brand-secondary-dark": primitiveColors.steel[700],
   // #32556D
   "brand-secondary-subtle": "rgba(64, 109, 135, 0.08)",
+  "brand-secondary-hover": primitiveColors.steel[600],
+  "brand-secondary-active": primitiveColors.steel[700],
   // Text on brand backgrounds (on-*)
   "on-brand-primary": primitiveColors.white,
   "on-brand-secondary": primitiveColors.white,
   // Status colors (status-*)
   "status-success": primitiveColors.teal[500],
+  // #14B8A6
+  "status-success-light": primitiveColors.teal[400],
+  // #43C6B7
+  "status-success-dark": primitiveColors.teal[700],
   // #0E8074
   "status-success-subtle": primitiveColors.teal[50],
   "status-error": primitiveColors.red[600],
+  // #D14343
+  "status-error-light": primitiveColors.red[400],
+  // #DA6868
+  "status-error-dark": primitiveColors.red[700],
   // #922E2E
   "status-error-subtle": primitiveColors.red[50],
   "status-warning": primitiveColors.amber[500],
+  // #FFB020
+  "status-warning-light": primitiveColors.amber[400],
+  // #FFBF4C
+  "status-warning-dark": primitiveColors.amber[600],
   // #B27B16
   "status-warning-subtle": primitiveColors.amber[50],
   "status-info": primitiveColors.sky[500],
+  // #2196F3
+  "status-info-light": primitiveColors.sky[400],
+  // #64B6F7
+  "status-info-dark": primitiveColors.sky[700],
   // #0B79D0
   "status-info-subtle": primitiveColors.sky[50],
+  // Text on status backgrounds (on-status-*)
+  "on-status-success": primitiveColors.white,
+  "on-status-error": primitiveColors.white,
+  "on-status-warning": primitiveColors.white,
+  "on-status-info": primitiveColors.white,
+  // Result/outcome indicators (result-*)
+  "result-improve": "#4caf50",
+  // Green - positive outcome
+  "result-improve-light": "rgba(76, 175, 80, 0.12)",
+  "result-improve-dark": "#248a24",
+  "result-degrade": "#ef5350",
+  // Red - negative outcome
+  "result-degrade-light": "rgba(239, 83, 80, 0.12)",
+  "result-degrade-dark": "#b30000",
+  "result-inconclusive": "#9E9A97",
+  // Gray - no clear result
+  "result-inconclusive-light": "rgba(158, 154, 151, 0.12)",
+  "result-neutral": primitiveColors.neutral[500],
+  // Neutral baseline
+  // Text on result backgrounds (on-result-*)
+  "on-result-improve": primitiveColors.white,
+  "on-result-degrade": primitiveColors.white,
+  "on-result-inconclusive": primitiveColors.white,
+  // Data visualization colors (data-*)
+  // First 10 colors from discrete rainbow optimized for charts
+  "data-1": discreteRainbow[9],
+  // #1965B0 - Blue
+  "data-2": discreteRainbow[14],
+  // #4EB265 - Green
+  "data-3": discreteRainbow[17],
+  // #F7F056 - Yellow
+  "data-4": discreteRainbow[25],
+  // #DC050C - Red
+  "data-5": discreteRainbow[8],
+  // #882E72 - Purple
+  "data-6": discreteRainbow[20],
+  // #F4A736 - Orange
+  "data-7": discreteRainbow[13],
+  // #7BAFDE - Light Blue
+  "data-8": discreteRainbow[15],
+  // #90C987 - Light Green
+  "data-9": discreteRainbow[3],
+  // #CAACCB - Lavender
+  "data-10": discreteRainbow[22],
   // #EE8026 - Dark Orange
   // Text colors (text-*)
   "text-primary": "#121828",
@@ -95,11 +211,15 @@ var semanticColorsLight = {
   "text-disabled": "rgba(55, 65, 81, 0.48)",
   "text-inverse": primitiveColors.white,
   "text-link": primitiveColors.blue[600],
+  "text-link-hover": primitiveColors.blue[700],
   // Surface colors (surface-*) - for elevated containers
   "surface-base": primitiveColors.white,
   "surface-elevated": primitiveColors.neutral[50],
   // #FAFAFA - slightly off-white for elevated cards
   "surface-raised": primitiveColors.neutral[100],
+  // #F3F4F6 - light gray for raised cards
+  "surface-overlay": primitiveColors.white,
+  "surface-input": primitiveColors.neutral[50],
   // Input field background (filled variant)
   // Background colors (background-*)
   "background-base": "#EBEBEB",
@@ -110,6 +230,13 @@ var semanticColorsLight = {
   "border-subtle": primitiveColors.neutral[100],
   "border-strong": primitiveColors.neutral[300],
   "border-focus": primitiveColors.blue[600],
+  "border-input": primitiveColors.neutral[300],
+  // Input field border
+  "border-input-hover": primitiveColors.neutral[400],
+  // Input field border on hover
+  "border-input-focus": primitiveColors.blue[600],
+  // Input field border on focus
+  "border-input-error": primitiveColors.red[600],
   // Input field border on error
   // Interactive states (interactive-*)
   "interactive-hover": "rgba(55, 65, 81, 0.04)",
@@ -117,30 +244,77 @@ var semanticColorsLight = {
   "interactive-active": "rgba(55, 65, 81, 0.16)",
   "interactive-selected": "rgba(55, 65, 81, 0.08)",
   "interactive-disabled": "rgba(55, 65, 81, 0.12)",
+  "interactive-disabled-text": "rgba(55, 65, 81, 0.26)",
   // Divider
-  "divider": "#E8E9EB"};
+  "divider": "#E8E9EB",
+  // Avatar default
+  "avatar-background": primitiveColors.neutral[500],
+  "avatar-text": primitiveColors.white
+};
 var semanticColorsDark = {
   // Brand colors stay the same in dark mode
   "brand-primary": primitiveColors.accent[400],
   "brand-primary-light": primitiveColors.accent[200],
   "brand-primary-dark": primitiveColors.accent[700],
   "brand-primary-subtle": "rgba(255, 121, 0, 0.12)",
+  "brand-primary-hover": primitiveColors.accent[300],
+  "brand-primary-active": primitiveColors.accent[200],
   "brand-secondary": primitiveColors.steel[500],
   "brand-secondary-light": primitiveColors.steel[300],
   "brand-secondary-dark": primitiveColors.steel[700],
   "brand-secondary-subtle": "rgba(64, 109, 135, 0.12)",
+  "brand-secondary-hover": primitiveColors.steel[400],
+  "brand-secondary-active": primitiveColors.steel[300],
   // Text on brand backgrounds
   "on-brand-primary": primitiveColors.white,
   "on-brand-secondary": primitiveColors.white,
   // Status colors
   "status-success": primitiveColors.teal[500],
+  "status-success-light": primitiveColors.teal[400],
+  "status-success-dark": primitiveColors.teal[700],
   "status-success-subtle": "rgba(20, 184, 166, 0.12)",
   "status-error": primitiveColors.red[600],
+  "status-error-light": primitiveColors.red[400],
+  "status-error-dark": primitiveColors.red[700],
   "status-error-subtle": "rgba(209, 67, 67, 0.12)",
   "status-warning": primitiveColors.amber[500],
+  "status-warning-light": primitiveColors.amber[400],
+  "status-warning-dark": primitiveColors.amber[600],
   "status-warning-subtle": "rgba(255, 176, 32, 0.12)",
   "status-info": primitiveColors.sky[500],
+  "status-info-light": primitiveColors.sky[400],
+  "status-info-dark": primitiveColors.sky[700],
   "status-info-subtle": "rgba(33, 150, 243, 0.12)",
+  // Text on status backgrounds
+  "on-status-success": primitiveColors.white,
+  "on-status-error": primitiveColors.white,
+  "on-status-warning": primitiveColors.white,
+  "on-status-info": primitiveColors.white,
+  // Result/outcome indicators (result-*)
+  "result-improve": "#4caf50",
+  "result-improve-light": "rgba(76, 175, 80, 0.16)",
+  "result-improve-dark": "#248a24",
+  "result-degrade": "#ef5350",
+  "result-degrade-light": "rgba(239, 83, 80, 0.16)",
+  "result-degrade-dark": "#b30000",
+  "result-inconclusive": "#9E9A97",
+  "result-inconclusive-light": "rgba(158, 154, 151, 0.16)",
+  "result-neutral": primitiveColors.neutral[400],
+  // Text on result backgrounds
+  "on-result-improve": primitiveColors.white,
+  "on-result-degrade": primitiveColors.white,
+  "on-result-inconclusive": primitiveColors.white,
+  // Data visualization colors (same in dark mode for consistency)
+  "data-1": discreteRainbow[9],
+  "data-2": discreteRainbow[14],
+  "data-3": discreteRainbow[17],
+  "data-4": discreteRainbow[25],
+  "data-5": discreteRainbow[8],
+  "data-6": discreteRainbow[20],
+  "data-7": discreteRainbow[13],
+  "data-8": discreteRainbow[15],
+  "data-9": discreteRainbow[3],
+  "data-10": discreteRainbow[22],
   // Text colors - inverted for dark mode
   "text-primary": primitiveColors.neutral[100],
   "text-secondary": primitiveColors.neutral[400],
@@ -148,12 +322,17 @@ var semanticColorsDark = {
   "text-disabled": "rgba(255, 255, 255, 0.38)",
   "text-inverse": primitiveColors.neutral[900],
   "text-link": "#828DF8",
+  "text-link-hover": primitiveColors.blue[400],
   // Surface colors - dark backgrounds
   "surface-base": primitiveColors.charcoal[700],
   // #161616 - main surface
   "surface-elevated": primitiveColors.charcoal[600],
   // #191919 - elevated surface
   "surface-raised": primitiveColors.charcoal[500],
+  // #1C1C1C - raised surface
+  "surface-overlay": primitiveColors.charcoal[600],
+  // #191919 - overlay surface
+  "surface-input": primitiveColors.charcoal[600],
   // #191919 - input surface
   // Background colors
   "background-base": primitiveColors.charcoal[900],
@@ -170,16 +349,48 @@ var semanticColorsDark = {
   "border-strong": primitiveColors.charcoal[300],
   // #2C2C2C - strong border
   "border-focus": "#828DF8",
+  "border-input": primitiveColors.neutral[600],
+  "border-input-hover": primitiveColors.neutral[500],
+  "border-input-focus": "#828DF8",
+  "border-input-error": primitiveColors.red[500],
   // Interactive states
   "interactive-hover": "rgba(255, 255, 255, 0.04)",
   "interactive-focus": "rgba(255, 255, 255, 0.12)",
   "interactive-active": "rgba(255, 255, 255, 0.16)",
   "interactive-selected": "rgba(255, 255, 255, 0.08)",
   "interactive-disabled": "rgba(255, 255, 255, 0.12)",
+  "interactive-disabled-text": "rgba(255, 255, 255, 0.26)",
   // Divider
-  "divider": primitiveColors.charcoal[400]};
+  "divider": primitiveColors.charcoal[400],
+  // #1F1F1F - divider color
+  // Avatar default
+  "avatar-background": primitiveColors.neutral[600],
+  "avatar-text": primitiveColors.white
+};
 
 // src/theme/config.ts
+var themeIndependentCSSVars = {
+  // RGB decomposed values for glow shadows
+  "--color-brand-primary-rgb": "255, 121, 0",
+  "--color-brand-secondary-rgb": "64, 109, 135",
+  "--color-status-success-rgb": "20, 184, 166",
+  "--color-status-error-rgb": "209, 67, 67",
+  "--color-status-warning-rgb": "255, 176, 32",
+  "--color-status-info-rgb": "33, 150, 243",
+  "--color-background-base-rgb": "16, 16, 16",
+  // Font families
+  "--font-family-sans": "'Inter'",
+  "--font-family-body": "'Nunito Sans'",
+  "--font-family-heading": "'Space Grotesk'",
+  "--font-family-mono": "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace",
+  // Animation tokens
+  "--ease-out": "cubic-bezier(0.22, 1, 0.36, 1)",
+  "--ease-in-out": "cubic-bezier(0.65, 0, 0.35, 1)",
+  "--ease-spring": "cubic-bezier(0.34, 1.56, 0.64, 1)",
+  "--duration-fast": "150ms",
+  "--duration-normal": "250ms",
+  "--duration-slow": "400ms"
+};
 var lightThemeCSSVars = {
   "--color-brand-primary": semanticColorsLight["brand-primary"],
   "--color-brand-primary-light": semanticColorsLight["brand-primary-light"],
@@ -220,7 +431,56 @@ var lightThemeCSSVars = {
   "--color-interactive-active": semanticColorsLight["interactive-active"],
   "--color-interactive-selected": semanticColorsLight["interactive-selected"],
   "--color-interactive-disabled": semanticColorsLight["interactive-disabled"],
-  "--color-divider": semanticColorsLight["divider"]
+  "--color-divider": semanticColorsLight["divider"],
+  "--color-brand-primary-hover": semanticColorsLight["brand-primary-hover"],
+  "--color-brand-primary-active": semanticColorsLight["brand-primary-active"],
+  "--color-brand-secondary-hover": semanticColorsLight["brand-secondary-hover"],
+  "--color-brand-secondary-active": semanticColorsLight["brand-secondary-active"],
+  "--color-status-success-light": semanticColorsLight["status-success-light"],
+  "--color-status-success-dark": semanticColorsLight["status-success-dark"],
+  "--color-status-error-light": semanticColorsLight["status-error-light"],
+  "--color-status-error-dark": semanticColorsLight["status-error-dark"],
+  "--color-status-warning-light": semanticColorsLight["status-warning-light"],
+  "--color-status-warning-dark": semanticColorsLight["status-warning-dark"],
+  "--color-status-info-light": semanticColorsLight["status-info-light"],
+  "--color-status-info-dark": semanticColorsLight["status-info-dark"],
+  "--color-on-status-success": semanticColorsLight["on-status-success"],
+  "--color-on-status-error": semanticColorsLight["on-status-error"],
+  "--color-on-status-warning": semanticColorsLight["on-status-warning"],
+  "--color-on-status-info": semanticColorsLight["on-status-info"],
+  "--color-result-improve": semanticColorsLight["result-improve"],
+  "--color-result-improve-light": semanticColorsLight["result-improve-light"],
+  "--color-result-improve-dark": semanticColorsLight["result-improve-dark"],
+  "--color-result-degrade": semanticColorsLight["result-degrade"],
+  "--color-result-degrade-light": semanticColorsLight["result-degrade-light"],
+  "--color-result-degrade-dark": semanticColorsLight["result-degrade-dark"],
+  "--color-result-inconclusive": semanticColorsLight["result-inconclusive"],
+  "--color-result-inconclusive-light": semanticColorsLight["result-inconclusive-light"],
+  "--color-result-neutral": semanticColorsLight["result-neutral"],
+  "--color-on-result-improve": semanticColorsLight["on-result-improve"],
+  "--color-on-result-degrade": semanticColorsLight["on-result-degrade"],
+  "--color-on-result-inconclusive": semanticColorsLight["on-result-inconclusive"],
+  "--color-data-1": semanticColorsLight["data-1"],
+  "--color-data-2": semanticColorsLight["data-2"],
+  "--color-data-3": semanticColorsLight["data-3"],
+  "--color-data-4": semanticColorsLight["data-4"],
+  "--color-data-5": semanticColorsLight["data-5"],
+  "--color-data-6": semanticColorsLight["data-6"],
+  "--color-data-7": semanticColorsLight["data-7"],
+  "--color-data-8": semanticColorsLight["data-8"],
+  "--color-data-9": semanticColorsLight["data-9"],
+  "--color-data-10": semanticColorsLight["data-10"],
+  "--color-text-link-hover": semanticColorsLight["text-link-hover"],
+  "--color-surface-overlay": semanticColorsLight["surface-overlay"],
+  "--color-surface-input": semanticColorsLight["surface-input"],
+  "--color-border-input": semanticColorsLight["border-input"],
+  "--color-border-input-hover": semanticColorsLight["border-input-hover"],
+  "--color-border-input-focus": semanticColorsLight["border-input-focus"],
+  "--color-border-input-error": semanticColorsLight["border-input-error"],
+  "--color-interactive-disabled-text": semanticColorsLight["interactive-disabled-text"],
+  "--color-avatar-background": semanticColorsLight["avatar-background"],
+  "--color-avatar-text": semanticColorsLight["avatar-text"],
+  ...themeIndependentCSSVars
 };
 var darkThemeCSSVars = {
   "--color-brand-primary": semanticColorsDark["brand-primary"],
@@ -262,7 +522,56 @@ var darkThemeCSSVars = {
   "--color-interactive-active": semanticColorsDark["interactive-active"],
   "--color-interactive-selected": semanticColorsDark["interactive-selected"],
   "--color-interactive-disabled": semanticColorsDark["interactive-disabled"],
-  "--color-divider": semanticColorsDark["divider"]
+  "--color-divider": semanticColorsDark["divider"],
+  "--color-brand-primary-hover": semanticColorsDark["brand-primary-hover"],
+  "--color-brand-primary-active": semanticColorsDark["brand-primary-active"],
+  "--color-brand-secondary-hover": semanticColorsDark["brand-secondary-hover"],
+  "--color-brand-secondary-active": semanticColorsDark["brand-secondary-active"],
+  "--color-status-success-light": semanticColorsDark["status-success-light"],
+  "--color-status-success-dark": semanticColorsDark["status-success-dark"],
+  "--color-status-error-light": semanticColorsDark["status-error-light"],
+  "--color-status-error-dark": semanticColorsDark["status-error-dark"],
+  "--color-status-warning-light": semanticColorsDark["status-warning-light"],
+  "--color-status-warning-dark": semanticColorsDark["status-warning-dark"],
+  "--color-status-info-light": semanticColorsDark["status-info-light"],
+  "--color-status-info-dark": semanticColorsDark["status-info-dark"],
+  "--color-on-status-success": semanticColorsDark["on-status-success"],
+  "--color-on-status-error": semanticColorsDark["on-status-error"],
+  "--color-on-status-warning": semanticColorsDark["on-status-warning"],
+  "--color-on-status-info": semanticColorsDark["on-status-info"],
+  "--color-result-improve": semanticColorsDark["result-improve"],
+  "--color-result-improve-light": semanticColorsDark["result-improve-light"],
+  "--color-result-improve-dark": semanticColorsDark["result-improve-dark"],
+  "--color-result-degrade": semanticColorsDark["result-degrade"],
+  "--color-result-degrade-light": semanticColorsDark["result-degrade-light"],
+  "--color-result-degrade-dark": semanticColorsDark["result-degrade-dark"],
+  "--color-result-inconclusive": semanticColorsDark["result-inconclusive"],
+  "--color-result-inconclusive-light": semanticColorsDark["result-inconclusive-light"],
+  "--color-result-neutral": semanticColorsDark["result-neutral"],
+  "--color-on-result-improve": semanticColorsDark["on-result-improve"],
+  "--color-on-result-degrade": semanticColorsDark["on-result-degrade"],
+  "--color-on-result-inconclusive": semanticColorsDark["on-result-inconclusive"],
+  "--color-data-1": semanticColorsDark["data-1"],
+  "--color-data-2": semanticColorsDark["data-2"],
+  "--color-data-3": semanticColorsDark["data-3"],
+  "--color-data-4": semanticColorsDark["data-4"],
+  "--color-data-5": semanticColorsDark["data-5"],
+  "--color-data-6": semanticColorsDark["data-6"],
+  "--color-data-7": semanticColorsDark["data-7"],
+  "--color-data-8": semanticColorsDark["data-8"],
+  "--color-data-9": semanticColorsDark["data-9"],
+  "--color-data-10": semanticColorsDark["data-10"],
+  "--color-text-link-hover": semanticColorsDark["text-link-hover"],
+  "--color-surface-overlay": semanticColorsDark["surface-overlay"],
+  "--color-surface-input": semanticColorsDark["surface-input"],
+  "--color-border-input": semanticColorsDark["border-input"],
+  "--color-border-input-hover": semanticColorsDark["border-input-hover"],
+  "--color-border-input-focus": semanticColorsDark["border-input-focus"],
+  "--color-border-input-error": semanticColorsDark["border-input-error"],
+  "--color-interactive-disabled-text": semanticColorsDark["interactive-disabled-text"],
+  "--color-avatar-background": semanticColorsDark["avatar-background"],
+  "--color-avatar-text": semanticColorsDark["avatar-text"],
+  ...themeIndependentCSSVars
 };
 
 // src/theme/tokens-css.ts