@titan-design/react-ui 0.3.0 → 0.5.0

package/dist/theme/tokens-css.mjs

@@ -1,4 +1,576 @@
-import { darkThemeCSSVars, lightThemeCSSVars } from '../chunk-7XPB4NAO.mjs';
+// src/theme/tokens/primitives.ts
+var primitiveColors = {
+  // Blue scale (primary brand)
+  blue: {
+    400: "#60A5FA",
+    600: "#5048E5",
+    // Primary main
+    700: "#3832A0"},
+  // Teal scale (success)
+  teal: {
+    50: "#F0FDFA",
+    400: "#43C6B7",
+    // Success light
+    500: "#14B8A6",
+    700: "#0E8074"},
+  // Red scale (error)
+  red: {
+    50: "#FEF2F2",
+    400: "#DA6868",
+    // Error light
+    500: "#EF4444",
+    600: "#D14343",
+    // Error main
+    700: "#922E2E"},
+  // Amber scale (warning)
+  amber: {
+    50: "#FFFBEB",
+    400: "#FFBF4C",
+    // Warning light
+    500: "#FFB020",
+    // Warning main
+    600: "#B27B16"},
+  // Sky/Blue scale (info)
+  sky: {
+    50: "#F0F9FF",
+    400: "#64B6F7",
+    // Info light
+    500: "#2196F3",
+    700: "#0B79D0"},
+  // Neutral/Gray scale
+  neutral: {
+    50: "#FAFAFA",
+    100: "#F3F4F6",
+    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: {
+    300: "#2C2C2C",
+    400: "#1F1F1F",
+    500: "#1C1C1C",
+    600: "#191919",
+    700: "#161616",
+    900: "#101010"
+  },
+  // 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 = {
+  // Brand colors (brand-*)
+  "brand-primary": primitiveColors.accent[400],
+  // #FF7900
+  "brand-primary-light": primitiveColors.accent[200],
+  // #FF9630
+  "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],
+  // #678498
+  "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",
+  "text-secondary": "#65748B",
+  "text-tertiary": primitiveColors.neutral[400],
+  "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",
+  "background-default": primitiveColors.white,
+  "background-subtle": primitiveColors.neutral[50],
+  // Border colors (border-*)
+  "border-default": "#E8E9EB",
+  "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)",
+  "interactive-focus": "rgba(55, 65, 81, 0.12)",
+  "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",
+  // 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],
+  "text-tertiary": primitiveColors.neutral[500],
+  "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],
+  // #101010 - darkest charcoal
+  "background-default": primitiveColors.charcoal[700],
+  // #161616 - main background
+  "background-subtle": primitiveColors.charcoal[500],
+  // #1C1C1C - subtle background
+  // Border colors
+  "border-default": primitiveColors.charcoal[400],
+  // #1F1F1F - default border
+  "border-subtle": primitiveColors.charcoal[500],
+  // #1C1C1C - subtle border
+  "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],
+  // #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"],
+  "--color-brand-primary-dark": semanticColorsLight["brand-primary-dark"],
+  "--color-brand-primary-subtle": semanticColorsLight["brand-primary-subtle"],
+  "--color-brand-secondary": semanticColorsLight["brand-secondary"],
+  "--color-brand-secondary-light": semanticColorsLight["brand-secondary-light"],
+  "--color-brand-secondary-dark": semanticColorsLight["brand-secondary-dark"],
+  "--color-brand-secondary-subtle": semanticColorsLight["brand-secondary-subtle"],
+  "--color-on-brand-primary": semanticColorsLight["on-brand-primary"],
+  "--color-on-brand-secondary": semanticColorsLight["on-brand-secondary"],
+  "--color-status-success": semanticColorsLight["status-success"],
+  "--color-status-success-subtle": semanticColorsLight["status-success-subtle"],
+  "--color-status-error": semanticColorsLight["status-error"],
+  "--color-status-error-subtle": semanticColorsLight["status-error-subtle"],
+  "--color-status-warning": semanticColorsLight["status-warning"],
+  "--color-status-warning-subtle": semanticColorsLight["status-warning-subtle"],
+  "--color-status-info": semanticColorsLight["status-info"],
+  "--color-status-info-subtle": semanticColorsLight["status-info-subtle"],
+  "--color-text-primary": semanticColorsLight["text-primary"],
+  "--color-text-secondary": semanticColorsLight["text-secondary"],
+  "--color-text-tertiary": semanticColorsLight["text-tertiary"],
+  "--color-text-disabled": semanticColorsLight["text-disabled"],
+  "--color-text-inverse": semanticColorsLight["text-inverse"],
+  "--color-text-link": semanticColorsLight["text-link"],
+  "--color-surface-base": semanticColorsLight["surface-base"],
+  "--color-surface-elevated": semanticColorsLight["surface-elevated"],
+  "--color-surface-raised": semanticColorsLight["surface-raised"],
+  "--color-background-base": semanticColorsLight["background-base"],
+  "--color-background-default": semanticColorsLight["background-default"],
+  "--color-background-subtle": semanticColorsLight["background-subtle"],
+  "--color-border-default": semanticColorsLight["border-default"],
+  "--color-border-subtle": semanticColorsLight["border-subtle"],
+  "--color-border-strong": semanticColorsLight["border-strong"],
+  "--color-border-focus": semanticColorsLight["border-focus"],
+  "--color-interactive-hover": semanticColorsLight["interactive-hover"],
+  "--color-interactive-focus": semanticColorsLight["interactive-focus"],
+  "--color-interactive-active": semanticColorsLight["interactive-active"],
+  "--color-interactive-selected": semanticColorsLight["interactive-selected"],
+  "--color-interactive-disabled": semanticColorsLight["interactive-disabled"],
+  "--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"],
+  "--color-brand-primary-light": semanticColorsDark["brand-primary-light"],
+  "--color-brand-primary-dark": semanticColorsDark["brand-primary-dark"],
+  "--color-brand-primary-subtle": semanticColorsDark["brand-primary-subtle"],
+  "--color-brand-secondary": semanticColorsDark["brand-secondary"],
+  "--color-brand-secondary-light": semanticColorsDark["brand-secondary-light"],
+  "--color-brand-secondary-dark": semanticColorsDark["brand-secondary-dark"],
+  "--color-brand-secondary-subtle": semanticColorsDark["brand-secondary-subtle"],
+  "--color-on-brand-primary": semanticColorsDark["on-brand-primary"],
+  "--color-on-brand-secondary": semanticColorsDark["on-brand-secondary"],
+  "--color-status-success": semanticColorsDark["status-success"],
+  "--color-status-success-subtle": semanticColorsDark["status-success-subtle"],
+  "--color-status-error": semanticColorsDark["status-error"],
+  "--color-status-error-subtle": semanticColorsDark["status-error-subtle"],
+  "--color-status-warning": semanticColorsDark["status-warning"],
+  "--color-status-warning-subtle": semanticColorsDark["status-warning-subtle"],
+  "--color-status-info": semanticColorsDark["status-info"],
+  "--color-status-info-subtle": semanticColorsDark["status-info-subtle"],
+  "--color-text-primary": semanticColorsDark["text-primary"],
+  "--color-text-secondary": semanticColorsDark["text-secondary"],
+  "--color-text-tertiary": semanticColorsDark["text-tertiary"],
+  "--color-text-disabled": semanticColorsDark["text-disabled"],
+  "--color-text-inverse": semanticColorsDark["text-inverse"],
+  "--color-text-link": semanticColorsDark["text-link"],
+  "--color-surface-base": semanticColorsDark["surface-base"],
+  "--color-surface-elevated": semanticColorsDark["surface-elevated"],
+  "--color-surface-raised": semanticColorsDark["surface-raised"],
+  "--color-background-base": semanticColorsDark["background-base"],
+  "--color-background-default": semanticColorsDark["background-default"],
+  "--color-background-subtle": semanticColorsDark["background-subtle"],
+  "--color-border-default": semanticColorsDark["border-default"],
+  "--color-border-subtle": semanticColorsDark["border-subtle"],
+  "--color-border-strong": semanticColorsDark["border-strong"],
+  "--color-border-focus": semanticColorsDark["border-focus"],
+  "--color-interactive-hover": semanticColorsDark["interactive-hover"],
+  "--color-interactive-focus": semanticColorsDark["interactive-focus"],
+  "--color-interactive-active": semanticColorsDark["interactive-active"],
+  "--color-interactive-selected": semanticColorsDark["interactive-selected"],
+  "--color-interactive-disabled": semanticColorsDark["interactive-disabled"],
+  "--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
 var GENERATED_HEADER = "/* Generated from theme token maps. Do not edit by hand. */";