@titan-design/react-ui 0.5.0 → 0.7.0

package/dist/theme/index.mjs

@@ -4,7 +4,7 @@ import { jsx as jsx$1 } from 'react/jsx-runtime';
 
 // src/theme/tokens/primitives.ts
 var primitiveColors = {
-  // Blue scale (primary brand)
+  // Blue scale
   blue: {
     50: "#EFF6FF",
     100: "#DBEAFE",
@@ -13,91 +13,35 @@ var primitiveColors = {
     400: "#60A5FA",
     500: "#3B82F6",
     600: "#5048E5",
-    // Primary main
     700: "#3832A0",
-    // Primary dark
     800: "#1E40AF",
     900: "#1E3A8A"
   },
-  // Green scale (secondary brand)
-  green: {
-    50: "#ECFDF5",
-    100: "#D1FAE5",
-    200: "#A7F3D0",
-    300: "#6EE7B7",
-    400: "#3FC79A",
-    // Secondary light
-    500: "#10B981",
-    // Secondary main
-    600: "#059669",
-    700: "#0B815A",
-    // Secondary dark
-    800: "#065F46",
-    900: "#064E3B"
-  },
-  // Teal scale (success)
-  teal: {
-    50: "#F0FDFA",
-    100: "#CCFBF1",
-    200: "#99F6E4",
-    300: "#5EEAD4",
-    400: "#43C6B7",
-    // Success light
-    500: "#14B8A6",
-    // Success main
-    600: "#0D9488",
-    700: "#0E8074",
-    // Success dark
-    800: "#115E59",
-    900: "#134E4A"
-  },
-  // Red scale (error)
+  // Red scale
   red: {
     50: "#FEF2F2",
     100: "#FEE2E2",
     200: "#FECACA",
     300: "#FCA5A5",
     400: "#DA6868",
-    // Error light
     500: "#EF4444",
     600: "#D14343",
-    // Error main
     700: "#922E2E",
-    // Error dark
     800: "#991B1B",
     900: "#7F1D1D"
   },
-  // Amber scale (warning)
-  amber: {
-    50: "#FFFBEB",
-    100: "#FEF3C7",
-    200: "#FDE68A",
-    300: "#FCD34D",
-    400: "#FFBF4C",
-    // Warning light
-    500: "#FFB020",
-    // Warning main
-    600: "#B27B16",
-    // Warning dark
-    700: "#B45309",
-    800: "#92400E",
-    900: "#78350F"
-  },
-  // Sky/Blue scale (info)
-  sky: {
-    50: "#F0F9FF",
-    100: "#E0F2FE",
-    200: "#BAE6FD",
-    300: "#7DD3FC",
-    400: "#64B6F7",
-    // Info light
-    500: "#2196F3",
-    // Info main
-    600: "#0284C7",
-    700: "#0B79D0",
-    // Info dark
-    800: "#075985",
-    900: "#0C4A6E"
+  // Vivid red scale
+  redVivid: {
+    50: "#FFECEE",
+    100: "#FFD6DB",
+    200: "#FFB3BC",
+    300: "#FF8593",
+    400: "#FF6070",
+    500: "#FF4757",
+    600: "#E63548",
+    700: "#C42539",
+    800: "#9E1C2C",
+    900: "#7A1520"
   },
   // Neutral/Gray scale
   neutral: {
@@ -113,18 +57,6 @@ var primitiveColors = {
     900: "#111827",
     950: "#030712"
   },
-  // Orange scale (accent/brand color)
-  accent: {
-    100: "#FFA860",
-    200: "#FF9630",
-    300: "#FF8500",
-    400: "#FF7900",
-    500: "#F56C00",
-    600: "#E06D10",
-    700: "#D0620C",
-    800: "#B75500",
-    900: "#A34900"
-  },
   // Charcoal scale (dark backgrounds)
   charcoal: {
     0: "#6E6E6E",
@@ -139,23 +71,167 @@ var primitiveColors = {
     800: "#131313",
     900: "#101010"
   },
-  // Steel scale (cool accent)
-  steel: {
-    100: "#8AA4B8",
-    200: "#7894A8",
-    300: "#678498",
-    400: "#557488",
-    500: "#406D87",
-    600: "#39617A",
-    700: "#32556D",
-    800: "#243D53",
-    900: "#1D3146"
-  },
   // Pure colors
   white: "#FFFFFF",
   black: "#000000",
   transparent: "transparent"
 };
+var primitiveRamps = {
+  red: {
+    50: "#FFF4F4",
+    100: "#FFE3E5",
+    200: "#FFC2C5",
+    300: "#FF9A9D",
+    400: "#F77175",
+    500: "#E05254",
+    600: "#D14343",
+    // pin
+    700: "#A4221C",
+    800: "#7E1002",
+    900: "#5A0900",
+    950: "#3D0400"
+  },
+  orange: {
+    50: "#FFF5ED",
+    100: "#FFE6D4",
+    200: "#FFC7A2",
+    300: "#FFA063",
+    400: "#FF7900",
+    // pin
+    500: "#DA5F00",
+    600: "#B94A00",
+    700: "#983804",
+    800: "#6F290F",
+    900: "#4E1C0C",
+    950: "#331107"
+  },
+  amber: {
+    50: "#FFF7DD",
+    100: "#FFEAA9",
+    200: "#FFD352",
+    300: "#F9B415",
+    // pin
+    400: "#E08C00",
+    500: "#C27400",
+    600: "#A45E00",
+    700: "#814D14",
+    800: "#5B3A1A",
+    900: "#442503",
+    950: "#301500"
+  },
+  green: {
+    50: "#E3FFEE",
+    100: "#B5FFD2",
+    200: "#58F69E",
+    300: "#2ED573",
+    // pin
+    400: "#21C05D",
+    500: "#22A444",
+    600: "#298732",
+    700: "#2B6B25",
+    800: "#264D1C",
+    900: "#1B3515",
+    950: "#11220D"
+  },
+  cyan: {
+    50: "#E6FBFF",
+    100: "#C2F6FF",
+    200: "#62EAFF",
+    300: "#22D3EE",
+    // pin
+    400: "#01B5D1",
+    500: "#2697B7",
+    600: "#307B9B",
+    700: "#2A617F",
+    800: "#22465F",
+    900: "#0B3149",
+    950: "#001F36"
+  },
+  blue: {
+    50: "#EFF8FF",
+    100: "#D9EFFF",
+    200: "#ACDBFF",
+    300: "#78C2FF",
+    400: "#3CA8FF",
+    500: "#2196F3",
+    // pin
+    600: "#1072CB",
+    700: "#135AA8",
+    800: "#14407E",
+    900: "#112C5A",
+    950: "#091B3C"
+  },
+  magenta: {
+    50: "#FFF3F9",
+    100: "#FFE2F1",
+    200: "#FFBDE2",
+    300: "#FF8FD5",
+    400: "#ED69C3",
+    500: "#D548AF",
+    600: "#BA2996",
+    700: "#9C0D7A",
+    // pin
+    800: "#77005A",
+    900: "#56003F",
+    950: "#3B0029"
+  }
+};
+var categoricalPalette = {
+  default: [
+    primitiveRamps.blue[500],
+    primitiveRamps.magenta[500],
+    primitiveRamps.red[500],
+    primitiveRamps.orange[400],
+    primitiveRamps.green[300],
+    primitiveRamps.cyan[300],
+    primitiveRamps.amber[600]
+    // extended (7th) — pair with a legend
+  ],
+  dark: [
+    primitiveRamps.blue[600],
+    primitiveRamps.magenta[600],
+    primitiveRamps.red[500],
+    primitiveRamps.orange[600],
+    primitiveRamps.green[800],
+    primitiveRamps.cyan[800],
+    primitiveRamps.amber[500]
+    // extended (7th) — pair with a legend
+  ]
+};
+var CATEGORICAL_CVD_SAFE_MAX = 6;
+function getCategoricalColor(index, variant = "default") {
+  const palette = categoricalPalette[variant];
+  index = Math.max(0, Math.floor(index));
+  return palette[index % palette.length];
+}
+var divergingScale = [
+  primitiveRamps.blue[500],
+  // under
+  primitiveRamps.cyan[300],
+  // maintenance
+  primitiveRamps.green[200],
+  // optimal (light center)
+  primitiveRamps.amber[300],
+  // approaching
+  primitiveRamps.red[600]
+  // over
+];
+var sequentialEffort = [
+  primitiveRamps.green[300],
+  primitiveRamps.amber[200],
+  primitiveRamps.amber[300],
+  primitiveRamps.orange[400],
+  primitiveRamps.red[600],
+  primitiveRamps.red[700]
+];
+function bestTextColor(hex) {
+  const [r, g, b] = [0, 2, 4].map((i) => {
+    const c = parseInt(hex.replace("#", "").slice(i, i + 2), 16) / 255;
+    return c >= 0.04045 ? ((c + 0.055) / 1.055) ** 2.4 : c / 12.92;
+  });
+  const l = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  return (l + 0.05) / 0.05 >= 1.05 / (l + 0.05) ? "#000000" : "#FFFFFF";
+}
 var discreteRainbow = [
   "#E8ECFB",
   "#D9CCE3",
@@ -365,56 +441,46 @@ var primitiveZIndex = {
 // 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": primitiveRamps.orange[400],
+  "brand-primary-light": primitiveRamps.orange[300],
+  "brand-primary-dark": primitiveRamps.orange[500],
   "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],
+  "brand-primary-hover": primitiveRamps.orange[500],
+  "brand-primary-active": primitiveRamps.orange[600],
+  "brand-secondary": primitiveRamps.cyan[600],
+  "brand-secondary-light": primitiveRamps.cyan[500],
+  "brand-secondary-dark": primitiveRamps.cyan[700],
+  "brand-secondary-subtle": "rgba(48, 123, 155, 0.08)",
+  "brand-secondary-hover": primitiveRamps.cyan[700],
+  "brand-secondary-active": primitiveRamps.cyan[800],
   // 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],
+  "status-success": primitiveRamps.green[300],
+  "status-success-light": primitiveRamps.green[200],
+  "status-success-dark": primitiveRamps.green[600],
+  "status-success-subtle": primitiveRamps.green[50],
+  // Live-session accent — its OWN role, decoupled from success so the two can diverge
+  "status-live": primitiveRamps.green[300],
+  "status-live-muted": primitiveRamps.green[500],
+  "status-error": primitiveRamps.red[600],
+  "status-error-light": primitiveRamps.red[500],
+  "status-error-dark": primitiveRamps.red[700],
+  "status-error-subtle": primitiveRamps.red[50],
+  "status-error-vivid": primitiveColors.redVivid[500],
+  // vivid alert red
+  "status-error-vivid-light": primitiveColors.redVivid[400],
+  "status-error-vivid-dark": primitiveColors.redVivid[700],
+  "status-error-vivid-subtle": "rgba(255, 71, 87, 0.12)",
+  "status-warning": primitiveRamps.amber[300],
+  "status-warning-light": primitiveRamps.amber[200],
+  "status-warning-dark": primitiveRamps.amber[500],
+  "status-warning-subtle": primitiveRamps.amber[50],
+  "status-info": primitiveRamps.blue[500],
+  "status-info-light": primitiveRamps.blue[300],
+  "status-info-dark": primitiveRamps.blue[600],
+  "status-info-subtle": primitiveRamps.blue[50],
   // Text on status backgrounds (on-status-*)
   "on-status-success": primitiveColors.white,
   "on-status-error": primitiveColors.white,
@@ -441,25 +507,25 @@ var semanticColorsLight = {
   // Data visualization colors (data-*)
   // First 10 colors from discrete rainbow optimized for charts
   "data-1": discreteRainbow[9],
-  // #1965B0 - Blue
+  // Blue
   "data-2": discreteRainbow[14],
-  // #4EB265 - Green
+  // Green
   "data-3": discreteRainbow[17],
-  // #F7F056 - Yellow
+  // Yellow
   "data-4": discreteRainbow[25],
-  // #DC050C - Red
+  // Red
   "data-5": discreteRainbow[8],
-  // #882E72 - Purple
+  // Purple
   "data-6": discreteRainbow[20],
-  // #F4A736 - Orange
+  // Orange
   "data-7": discreteRainbow[13],
-  // #7BAFDE - Light Blue
+  // Light Blue
   "data-8": discreteRainbow[15],
-  // #90C987 - Light Green
+  // Light Green
   "data-9": discreteRainbow[3],
-  // #CAACCB - Lavender
+  // Lavender
   "data-10": discreteRainbow[22],
-  // #EE8026 - Dark Orange
+  // Dark Orange
   // Text colors (text-*)
   "text-primary": "#121828",
   "text-secondary": "#65748B",
@@ -471,9 +537,9 @@ var semanticColorsLight = {
   // Surface colors (surface-*) - for elevated containers
   "surface-base": primitiveColors.white,
   "surface-elevated": primitiveColors.neutral[50],
-  // #FAFAFA - slightly off-white for elevated cards
+  // slightly off-white for elevated cards
   "surface-raised": primitiveColors.neutral[100],
-  // #F3F4F6 - light gray for raised cards
+  // light gray for raised cards
   "surface-overlay": primitiveColors.white,
   "surface-input": primitiveColors.neutral[50],
   // Input field background (filled variant)
@@ -485,6 +551,8 @@ var semanticColorsLight = {
   "border-default": "#E8E9EB",
   "border-subtle": primitiveColors.neutral[100],
   "border-strong": primitiveColors.neutral[300],
+  "border-prominent": primitiveColors.neutral[400],
+  // high-visibility divider
   "border-focus": primitiveColors.blue[600],
   "border-input": primitiveColors.neutral[300],
   // Input field border
@@ -509,37 +577,44 @@ var semanticColorsLight = {
 };
 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": primitiveRamps.orange[400],
+  "brand-primary-light": primitiveRamps.orange[300],
+  "brand-primary-dark": primitiveRamps.orange[500],
   "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],
+  "brand-primary-hover": primitiveRamps.orange[300],
+  "brand-primary-active": primitiveRamps.orange[200],
+  "brand-secondary": primitiveRamps.cyan[600],
+  "brand-secondary-light": primitiveRamps.cyan[500],
+  "brand-secondary-dark": primitiveRamps.cyan[700],
+  "brand-secondary-subtle": "rgba(48, 123, 155, 0.12)",
+  "brand-secondary-hover": primitiveRamps.cyan[500],
+  "brand-secondary-active": primitiveRamps.cyan[400],
   // 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-success": primitiveRamps.green[300],
+  "status-success-light": primitiveRamps.green[200],
+  "status-success-dark": primitiveRamps.green[600],
+  "status-success-subtle": "rgba(46, 213, 115, 0.12)",
+  // Live-session accent — its OWN role, decoupled from success so the two can diverge
+  "status-live": primitiveRamps.green[300],
+  "status-live-muted": primitiveRamps.green[500],
+  "status-error": primitiveRamps.red[600],
+  "status-error-light": primitiveRamps.red[500],
+  "status-error-dark": primitiveRamps.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-error-vivid": primitiveColors.redVivid[500],
+  "status-error-vivid-light": primitiveColors.redVivid[400],
+  "status-error-vivid-dark": primitiveColors.redVivid[700],
+  "status-error-vivid-subtle": "rgba(255, 71, 87, 0.12)",
+  "status-warning": primitiveRamps.amber[300],
+  "status-warning-light": primitiveRamps.amber[200],
+  "status-warning-dark": primitiveRamps.amber[500],
+  "status-warning-subtle": "rgba(249, 180, 21, 0.12)",
+  "status-info": primitiveRamps.blue[500],
+  "status-info-light": primitiveRamps.blue[300],
+  "status-info-dark": primitiveRamps.blue[600],
   "status-info-subtle": "rgba(33, 150, 243, 0.12)",
   // Text on status backgrounds
   "on-status-success": primitiveColors.white,
@@ -581,29 +656,31 @@ var semanticColorsDark = {
   "text-link-hover": primitiveColors.blue[400],
   // Surface colors - dark backgrounds
   "surface-base": primitiveColors.charcoal[700],
-  // #161616 - main surface
+  // main surface
   "surface-elevated": primitiveColors.charcoal[600],
-  // #191919 - elevated surface
+  // elevated surface
   "surface-raised": primitiveColors.charcoal[500],
-  // #1C1C1C - raised surface
+  // raised surface
   "surface-overlay": primitiveColors.charcoal[600],
-  // #191919 - overlay surface
+  // overlay surface
   "surface-input": primitiveColors.charcoal[600],
-  // #191919 - input surface
+  // input surface
   // Background colors
   "background-base": primitiveColors.charcoal[900],
-  // #101010 - darkest charcoal
+  // darkest charcoal
   "background-default": primitiveColors.charcoal[700],
-  // #161616 - main background
+  // main background
   "background-subtle": primitiveColors.charcoal[500],
-  // #1C1C1C - subtle background
+  // subtle background
   // Border colors
   "border-default": primitiveColors.charcoal[400],
-  // #1F1F1F - default border
+  // default border
   "border-subtle": primitiveColors.charcoal[500],
-  // #1C1C1C - subtle border
+  // subtle border
   "border-strong": primitiveColors.charcoal[300],
-  // #2C2C2C - strong border
+  // strong border
+  "border-prominent": primitiveColors.charcoal[200],
+  // high-visibility divider
   "border-focus": "#828DF8",
   "border-input": primitiveColors.neutral[600],
   "border-input-hover": primitiveColors.neutral[500],
@@ -618,7 +695,7 @@ var semanticColorsDark = {
   "interactive-disabled-text": "rgba(255, 255, 255, 0.26)",
   // Divider
   "divider": primitiveColors.charcoal[400],
-  // #1F1F1F - divider color
+  // divider color
   // Avatar default
   "avatar-background": primitiveColors.neutral[600],
   "avatar-text": primitiveColors.white
@@ -732,10 +809,11 @@ function getSemanticColors(mode) {
 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-brand-secondary-rgb": "48, 123, 155",
+  "--color-status-success-rgb": "46, 213, 115",
   "--color-status-error-rgb": "209, 67, 67",
-  "--color-status-warning-rgb": "255, 176, 32",
+  "--color-status-error-vivid-rgb": "255, 71, 87",
+  "--color-status-warning-rgb": "249, 180, 21",
   "--color-status-info-rgb": "33, 150, 243",
   "--color-background-base-rgb": "16, 16, 16",
   // Font families
@@ -764,12 +842,18 @@ var lightThemeCSSVars = {
   "--color-on-brand-secondary": semanticColorsLight["on-brand-secondary"],
   "--color-status-success": semanticColorsLight["status-success"],
   "--color-status-success-subtle": semanticColorsLight["status-success-subtle"],
+  "--color-status-live": semanticColorsLight["status-live"],
+  "--color-status-live-muted": semanticColorsLight["status-live-muted"],
   "--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-status-error-vivid": semanticColorsLight["status-error-vivid"],
+  "--color-status-error-vivid-light": semanticColorsLight["status-error-vivid-light"],
+  "--color-status-error-vivid-dark": semanticColorsLight["status-error-vivid-dark"],
+  "--color-status-error-vivid-subtle": semanticColorsLight["status-error-vivid-subtle"],
   "--color-text-primary": semanticColorsLight["text-primary"],
   "--color-text-secondary": semanticColorsLight["text-secondary"],
   "--color-text-tertiary": semanticColorsLight["text-tertiary"],
@@ -785,6 +869,7 @@ var lightThemeCSSVars = {
   "--color-border-default": semanticColorsLight["border-default"],
   "--color-border-subtle": semanticColorsLight["border-subtle"],
   "--color-border-strong": semanticColorsLight["border-strong"],
+  "--color-border-prominent": semanticColorsLight["border-prominent"],
   "--color-border-focus": semanticColorsLight["border-focus"],
   "--color-interactive-hover": semanticColorsLight["interactive-hover"],
   "--color-interactive-focus": semanticColorsLight["interactive-focus"],
@@ -855,12 +940,18 @@ var darkThemeCSSVars = {
   "--color-on-brand-secondary": semanticColorsDark["on-brand-secondary"],
   "--color-status-success": semanticColorsDark["status-success"],
   "--color-status-success-subtle": semanticColorsDark["status-success-subtle"],
+  "--color-status-live": semanticColorsDark["status-live"],
+  "--color-status-live-muted": semanticColorsDark["status-live-muted"],
   "--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-status-error-vivid": semanticColorsDark["status-error-vivid"],
+  "--color-status-error-vivid-light": semanticColorsDark["status-error-vivid-light"],
+  "--color-status-error-vivid-dark": semanticColorsDark["status-error-vivid-dark"],
+  "--color-status-error-vivid-subtle": semanticColorsDark["status-error-vivid-subtle"],
   "--color-text-primary": semanticColorsDark["text-primary"],
   "--color-text-secondary": semanticColorsDark["text-secondary"],
   "--color-text-tertiary": semanticColorsDark["text-tertiary"],
@@ -876,6 +967,7 @@ var darkThemeCSSVars = {
   "--color-border-default": semanticColorsDark["border-default"],
   "--color-border-subtle": semanticColorsDark["border-subtle"],
   "--color-border-strong": semanticColorsDark["border-strong"],
+  "--color-border-prominent": semanticColorsDark["border-prominent"],
   "--color-border-focus": semanticColorsDark["border-focus"],
   "--color-interactive-hover": semanticColorsDark["interactive-hover"],
   "--color-interactive-focus": semanticColorsDark["interactive-focus"],
@@ -1684,6 +1776,17 @@ function resolveColor(token, mode = "dark") {
   return Platform.OS === "web" ? `var(--color-${token})` : getSemanticColors(mode)[token];
 }
 
+// src/theme/gradients.ts
+function linearGradient(from, to, angle = 180, mode = "dark") {
+  return {
+    backgroundImage: `linear-gradient(${angle}deg, ${resolveColor(from, mode)}, ${resolveColor(to, mode)})`
+  };
+}
+var surfaceGradient = {
+  /** Chrome bands (top bar, headers): elevated → base, a subtle dark wash. */
+  chrome: (mode = "dark") => linearGradient("surface-elevated", "background-base", 180, mode)
+};
+
 // src/theme/presets/apply.ts
 function colorKeyToVar(key) {
   return `--color-${key}`;
@@ -1877,6 +1980,6 @@ function ThemeProvider({
   return /* @__PURE__ */ jsx(View, { style: [MODE_VARS[mode], { flex: 1 }, style], ...props, children });
 }
 
-export { ThemeProvider, applyThemePreset, audiobookPreset, buttonSizes, componentElevationRanges, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, defaultPreset, discreteRainbow, elevationSystem, getBaseSurfaceColor, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getGlowShadow, getHoverColors, getSemanticColors, getThemeCSSVars, getValidatedElevation, gluestackConfig, hexToRgb, hsvToRgb, isCssPropertyManifest, isDark, lightThemeCSSVars, lighten, neumorphicShadows, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, resolveColor, rgbToHex, rgbToHsv, semanticColorsDark, semanticColorsLight, semanticTypography, shadowColors, validateCssPropertyManifest };
+export { CATEGORICAL_CVD_SAFE_MAX, ThemeProvider, applyThemePreset, audiobookPreset, bestTextColor, buttonSizes, categoricalPalette, componentElevationRanges, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, defaultPreset, discreteRainbow, divergingScale, elevationSystem, getBaseSurfaceColor, getCategoricalColor, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getGlowShadow, getHoverColors, getSemanticColors, getThemeCSSVars, getValidatedElevation, gluestackConfig, hexToRgb, hsvToRgb, isCssPropertyManifest, isDark, lightThemeCSSVars, lighten, linearGradient, neumorphicShadows, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveRamps, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, resolveColor, rgbToHex, rgbToHsv, semanticColorsDark, semanticColorsLight, semanticTypography, sequentialEffort, shadowColors, surfaceGradient, validateCssPropertyManifest };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map