@titan-design/react-ui 0.5.0 → 0.6.0

package/dist/theme/index.d.mts

@@ -178,6 +178,30 @@ declare const primitiveColors: {
         readonly 800: "#991B1B";
         readonly 900: "#7F1D1D";
     };
+    readonly greenVivid: {
+        readonly 50: "#E9FBF0";
+        readonly 100: "#C8F7DA";
+        readonly 200: "#9FF0BF";
+        readonly 300: "#6BE79D";
+        readonly 400: "#47DE84";
+        readonly 500: "#2ED573";
+        readonly 600: "#22B85F";
+        readonly 700: "#1A9950";
+        readonly 800: "#157A40";
+        readonly 900: "#105C30";
+    };
+    readonly redVivid: {
+        readonly 50: "#FFECEE";
+        readonly 100: "#FFD6DB";
+        readonly 200: "#FFB3BC";
+        readonly 300: "#FF8593";
+        readonly 400: "#FF6070";
+        readonly 500: "#FF4757";
+        readonly 600: "#E63548";
+        readonly 700: "#C42539";
+        readonly 800: "#9E1C2C";
+        readonly 900: "#7A1520";
+    };
     readonly amber: {
         readonly 50: "#FFFBEB";
         readonly 100: "#FEF3C7";
@@ -254,6 +278,177 @@ declare const primitiveColors: {
     readonly black: "#000000";
     readonly transparent: "transparent";
 };
+/**
+ * Derived tonal ramps (TD-05.09 color foundations)
+ *
+ * Seven OKLCH-generated hue ramps, 11 perceptual lightness steps each (50 -> 950).
+ * Built with hue-torsion + a chroma arc, anchored through existing brand/semantic
+ * hexes. `pin` marks the step each ramp flows through its anchor.
+ * This is the single source of truth for chromatic hexes — the categorical palette
+ * below references these steps rather than duplicating values.
+ * See coordination/design-explorations/foundations.
+ */
+declare const primitiveRamps: {
+    readonly red: {
+        readonly 50: "#FFF4F4";
+        readonly 100: "#FFE3E5";
+        readonly 200: "#FFC2C5";
+        readonly 300: "#FF9A9D";
+        readonly 400: "#F77175";
+        readonly 500: "#E05254";
+        readonly 600: "#D14343";
+        readonly 700: "#A4221C";
+        readonly 800: "#7E1002";
+        readonly 900: "#5A0900";
+        readonly 950: "#3D0400";
+    };
+    readonly orange: {
+        readonly 50: "#FFF5ED";
+        readonly 100: "#FFE6D4";
+        readonly 200: "#FFC7A2";
+        readonly 300: "#FFA063";
+        readonly 400: "#FF7900";
+        readonly 500: "#DA5F00";
+        readonly 600: "#B94A00";
+        readonly 700: "#983804";
+        readonly 800: "#6F290F";
+        readonly 900: "#4E1C0C";
+        readonly 950: "#331107";
+    };
+    readonly amber: {
+        readonly 50: "#FFF7DD";
+        readonly 100: "#FFEAA9";
+        readonly 200: "#FFD352";
+        readonly 300: "#F9B415";
+        readonly 400: "#E08C00";
+        readonly 500: "#C27400";
+        readonly 600: "#A45E00";
+        readonly 700: "#814D14";
+        readonly 800: "#5B3A1A";
+        readonly 900: "#442503";
+        readonly 950: "#301500";
+    };
+    readonly green: {
+        readonly 50: "#E3FFEE";
+        readonly 100: "#B5FFD2";
+        readonly 200: "#58F69E";
+        readonly 300: "#2ED573";
+        readonly 400: "#21C05D";
+        readonly 500: "#22A444";
+        readonly 600: "#298732";
+        readonly 700: "#2B6B25";
+        readonly 800: "#264D1C";
+        readonly 900: "#1B3515";
+        readonly 950: "#11220D";
+    };
+    readonly cyan: {
+        readonly 50: "#E6FBFF";
+        readonly 100: "#C2F6FF";
+        readonly 200: "#62EAFF";
+        readonly 300: "#22D3EE";
+        readonly 400: "#01B5D1";
+        readonly 500: "#2697B7";
+        readonly 600: "#307B9B";
+        readonly 700: "#2A617F";
+        readonly 800: "#22465F";
+        readonly 900: "#0B3149";
+        readonly 950: "#001F36";
+    };
+    readonly blue: {
+        readonly 50: "#EFF8FF";
+        readonly 100: "#D9EFFF";
+        readonly 200: "#ACDBFF";
+        readonly 300: "#78C2FF";
+        readonly 400: "#3CA8FF";
+        readonly 500: "#2196F3";
+        readonly 600: "#1072CB";
+        readonly 700: "#135AA8";
+        readonly 800: "#14407E";
+        readonly 900: "#112C5A";
+        readonly 950: "#091B3C";
+    };
+    readonly magenta: {
+        readonly 50: "#FFF3F9";
+        readonly 100: "#FFE2F1";
+        readonly 200: "#FFBDE2";
+        readonly 300: "#FF8FD5";
+        readonly 400: "#ED69C3";
+        readonly 500: "#D548AF";
+        readonly 600: "#BA2996";
+        readonly 700: "#9C0D7A";
+        readonly 800: "#77005A";
+        readonly 900: "#56003F";
+        readonly 950: "#3B0029";
+    };
+};
+/**
+ * Categorical (qualitative) palette — an ordered, CVD-safe series expressed as
+ * references into {@link primitiveRamps} (one source of truth; the palette moves
+ * with the ramps).
+ *
+ * Design: a single canonical hue order (blue, magenta, red, orange, green, cyan,
+ * amber), with steps chosen vivid-midtone-first and fanned lighter/darker as the
+ * series grows to preserve separation. The sequence is nested-stable — a chart
+ * with N series uses the first N colors, and the series index is stable as N
+ * changes. Colorblind-safe worst-case deuteranopia/protanopia floor 8 holds
+ * through {@link CATEGORICAL_CVD_SAFE_MAX} colors; the 7th is an extended color
+ * that should be paired with a legend or other secondary encoding.
+ *
+ * Two variants: `default` (vivid, sits on neutral/light surfaces, legible under
+ * black text) and `dark` (deeper shades legible under white text on a fill). A
+ * separate "light" variant was dropped — the vivid `default` picks already clear
+ * black-text contrast, so it doubles as the light-context palette.
+ */
+declare const categoricalPalette: {
+    readonly default: readonly ["#2196F3", "#D548AF", "#E05254", "#FF7900", "#2ED573", "#22D3EE", "#A45E00"];
+    readonly dark: readonly ["#1072CB", "#BA2996", "#E05254", "#B94A00", "#264D1C", "#22465F", "#C27400"];
+};
+/** Largest series count that holds the CVD floor without a legend. */
+declare const CATEGORICAL_CVD_SAFE_MAX = 6;
+/**
+ * Categorical palette variant.
+ * - `default` : vivid; neutral/light surfaces, legible under black text
+ * - `dark`    : deeper shades, legible under white text on a filled swatch
+ */
+type CategoricalVariant = keyof typeof categoricalPalette;
+/**
+ * Get a color from the ordered categorical palette by series index.
+ * The palette is nested-stable, so the color for a given index does not change
+ * with the total series count; `index` simply wraps past the end.
+ *
+ * @param index - 0-based series index (wraps past the end)
+ * @param variant - `default` (black-text / light surfaces) or `dark` (white text)
+ * @returns The hex color string
+ */
+declare function getCategoricalColor(index: number, variant?: CategoricalVariant): string;
+/**
+ * Diverging status scale (BodyMap training-status: under → optimal → over) as
+ * references into {@link primitiveRamps}. A true diverging shape — `optimal` is
+ * the lightest center, the extremes go darker — so the signal reads in lightness
+ * (colorblind-robust; worst-case deut/protanopia min ΔE ~10.9) and the direction
+ * reads in the blue↔red axis (the CVD-safe hue pair).
+ *
+ * Tuned so every stop is dark enough for the fill yet light enough that BLACK
+ * text clears 4.5:1 on all five — no per-cell white/black flipping. The value
+ * valley is symmetric: the two mid-arms (maintenance / approaching) sit at equal
+ * lightness (both ~0.53 relative luminance), the ends darker.
+ */
+declare const divergingScale: readonly ["#2196F3", "#22D3EE", "#58F69E", "#F9B415", "#D14343"];
+/**
+ * Sequential "effort" scale (low → high intensity: green → yellow → orange → red)
+ * as references into {@link primitiveRamps}. A 6-stop ordinal palette; the
+ * velocity/RPE strip sub-samples it. Every adjacent pair clears the CVD floor
+ * (min deut/protan ΔE ≥ 4.5), and within that the hue walk is kept smooth —
+ * the amber-200 → amber-300 → orange-400 run steps the yellow→orange transition
+ * gradually rather than lurching. Order encodes magnitude, so it tolerates the
+ * green↔red CVD pair. Stops 0–3 take black text; the dark reds take white.
+ */
+declare const sequentialEffort: readonly ["#2ED573", "#FFD352", "#F9B415", "#FF7900", "#D14343", "#A4221C"];
+/**
+ * Best-contrast text color (black or white) for a solid fill — for labels sitting
+ * on categorical/diverging/effort swatches. Uses the WCAG relative-luminance ratio.
+ */
+declare function bestTextColor(hex: string): '#000000' | '#FFFFFF';
 /**
  * Discrete rainbow palette for data visualization
  * Based on Paul Tol's color schemes: https://personal.sron.nl/~pault/#fig:scheme_rainbow_discrete
@@ -400,35 +595,39 @@ declare const primitiveZIndex: {
  */
 declare const semanticColorsLight: {
     readonly 'brand-primary': "#FF7900";
-    readonly 'brand-primary-light': "#FF9630";
-    readonly 'brand-primary-dark': "#D0620C";
+    readonly 'brand-primary-light': "#FFA063";
+    readonly 'brand-primary-dark': "#DA5F00";
     readonly 'brand-primary-subtle': "rgba(255, 121, 0, 0.08)";
-    readonly 'brand-primary-hover': "#F56C00";
-    readonly 'brand-primary-active': "#E06D10";
-    readonly 'brand-secondary': "#406D87";
-    readonly 'brand-secondary-light': "#678498";
-    readonly 'brand-secondary-dark': "#32556D";
-    readonly 'brand-secondary-subtle': "rgba(64, 109, 135, 0.08)";
-    readonly 'brand-secondary-hover': "#39617A";
-    readonly 'brand-secondary-active': "#32556D";
+    readonly 'brand-primary-hover': "#DA5F00";
+    readonly 'brand-primary-active': "#B94A00";
+    readonly 'brand-secondary': "#307B9B";
+    readonly 'brand-secondary-light': "#2697B7";
+    readonly 'brand-secondary-dark': "#2A617F";
+    readonly 'brand-secondary-subtle': "rgba(48, 123, 155, 0.08)";
+    readonly 'brand-secondary-hover': "#2A617F";
+    readonly 'brand-secondary-active': "#22465F";
     readonly 'on-brand-primary': "#FFFFFF";
     readonly 'on-brand-secondary': "#FFFFFF";
-    readonly 'status-success': "#14B8A6";
-    readonly 'status-success-light': "#43C6B7";
-    readonly 'status-success-dark': "#0E8074";
-    readonly 'status-success-subtle': "#F0FDFA";
+    readonly 'status-success': "#2ED573";
+    readonly 'status-success-light': "#58F69E";
+    readonly 'status-success-dark': "#298732";
+    readonly 'status-success-subtle': "#E3FFEE";
     readonly 'status-error': "#D14343";
-    readonly 'status-error-light': "#DA6868";
-    readonly 'status-error-dark': "#922E2E";
-    readonly 'status-error-subtle': "#FEF2F2";
-    readonly 'status-warning': "#FFB020";
-    readonly 'status-warning-light': "#FFBF4C";
-    readonly 'status-warning-dark': "#B27B16";
-    readonly 'status-warning-subtle': "#FFFBEB";
+    readonly 'status-error-light': "#E05254";
+    readonly 'status-error-dark': "#A4221C";
+    readonly 'status-error-subtle': "#FFF4F4";
+    readonly 'status-error-vivid': "#FF4757";
+    readonly 'status-error-vivid-light': "#FF6070";
+    readonly 'status-error-vivid-dark': "#C42539";
+    readonly 'status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
+    readonly 'status-warning': "#F9B415";
+    readonly 'status-warning-light': "#FFD352";
+    readonly 'status-warning-dark': "#C27400";
+    readonly 'status-warning-subtle': "#FFF7DD";
     readonly 'status-info': "#2196F3";
-    readonly 'status-info-light': "#64B6F7";
-    readonly 'status-info-dark': "#0B79D0";
-    readonly 'status-info-subtle': "#F0F9FF";
+    readonly 'status-info-light': "#78C2FF";
+    readonly 'status-info-dark': "#1072CB";
+    readonly 'status-info-subtle': "#EFF8FF";
     readonly 'on-status-success': "#FFFFFF";
     readonly 'on-status-error': "#FFFFFF";
     readonly 'on-status-warning': "#FFFFFF";
@@ -473,6 +672,7 @@ declare const semanticColorsLight: {
     readonly 'border-default': "#E8E9EB";
     readonly 'border-subtle': "#F3F4F6";
     readonly 'border-strong': "#D1D5DB";
+    readonly 'border-prominent': "#9CA3AF";
     readonly 'border-focus': "#5048E5";
     readonly 'border-input': "#D1D5DB";
     readonly 'border-input-hover': "#9CA3AF";
@@ -490,34 +690,38 @@ declare const semanticColorsLight: {
 };
 declare const semanticColorsDark: {
     readonly 'brand-primary': "#FF7900";
-    readonly 'brand-primary-light': "#FF9630";
-    readonly 'brand-primary-dark': "#D0620C";
+    readonly 'brand-primary-light': "#FFA063";
+    readonly 'brand-primary-dark': "#DA5F00";
     readonly 'brand-primary-subtle': "rgba(255, 121, 0, 0.12)";
-    readonly 'brand-primary-hover': "#FF8500";
-    readonly 'brand-primary-active': "#FF9630";
-    readonly 'brand-secondary': "#406D87";
-    readonly 'brand-secondary-light': "#678498";
-    readonly 'brand-secondary-dark': "#32556D";
-    readonly 'brand-secondary-subtle': "rgba(64, 109, 135, 0.12)";
-    readonly 'brand-secondary-hover': "#557488";
-    readonly 'brand-secondary-active': "#678498";
+    readonly 'brand-primary-hover': "#FFA063";
+    readonly 'brand-primary-active': "#FFC7A2";
+    readonly 'brand-secondary': "#307B9B";
+    readonly 'brand-secondary-light': "#2697B7";
+    readonly 'brand-secondary-dark': "#2A617F";
+    readonly 'brand-secondary-subtle': "rgba(48, 123, 155, 0.12)";
+    readonly 'brand-secondary-hover': "#2697B7";
+    readonly 'brand-secondary-active': "#01B5D1";
     readonly 'on-brand-primary': "#FFFFFF";
     readonly 'on-brand-secondary': "#FFFFFF";
-    readonly 'status-success': "#14B8A6";
-    readonly 'status-success-light': "#43C6B7";
-    readonly 'status-success-dark': "#0E8074";
-    readonly 'status-success-subtle': "rgba(20, 184, 166, 0.12)";
+    readonly 'status-success': "#2ED573";
+    readonly 'status-success-light': "#58F69E";
+    readonly 'status-success-dark': "#298732";
+    readonly 'status-success-subtle': "rgba(46, 213, 115, 0.12)";
     readonly 'status-error': "#D14343";
-    readonly 'status-error-light': "#DA6868";
-    readonly 'status-error-dark': "#922E2E";
+    readonly 'status-error-light': "#E05254";
+    readonly 'status-error-dark': "#A4221C";
     readonly 'status-error-subtle': "rgba(209, 67, 67, 0.12)";
-    readonly 'status-warning': "#FFB020";
-    readonly 'status-warning-light': "#FFBF4C";
-    readonly 'status-warning-dark': "#B27B16";
-    readonly 'status-warning-subtle': "rgba(255, 176, 32, 0.12)";
+    readonly 'status-error-vivid': "#FF4757";
+    readonly 'status-error-vivid-light': "#FF6070";
+    readonly 'status-error-vivid-dark': "#C42539";
+    readonly 'status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
+    readonly 'status-warning': "#F9B415";
+    readonly 'status-warning-light': "#FFD352";
+    readonly 'status-warning-dark': "#C27400";
+    readonly 'status-warning-subtle': "rgba(249, 180, 21, 0.12)";
     readonly 'status-info': "#2196F3";
-    readonly 'status-info-light': "#64B6F7";
-    readonly 'status-info-dark': "#0B79D0";
+    readonly 'status-info-light': "#78C2FF";
+    readonly 'status-info-dark': "#1072CB";
     readonly 'status-info-subtle': "rgba(33, 150, 243, 0.12)";
     readonly 'on-status-success': "#FFFFFF";
     readonly 'on-status-error': "#FFFFFF";
@@ -563,6 +767,7 @@ declare const semanticColorsDark: {
     readonly 'border-default': "#1F1F1F";
     readonly 'border-subtle': "#1C1C1C";
     readonly 'border-strong': "#2C2C2C";
+    readonly 'border-prominent': "#3C3C3C";
     readonly 'border-focus': "#828DF8";
     readonly 'border-input': "#4B5563";
     readonly 'border-input-hover': "#6B7280";
@@ -680,35 +885,39 @@ declare const buttonSizes: {
 type ThemeMode = 'light' | 'dark';
 declare function getSemanticColors(mode: ThemeMode): {
     readonly 'brand-primary': "#FF7900";
-    readonly 'brand-primary-light': "#FF9630";
-    readonly 'brand-primary-dark': "#D0620C";
+    readonly 'brand-primary-light': "#FFA063";
+    readonly 'brand-primary-dark': "#DA5F00";
     readonly 'brand-primary-subtle': "rgba(255, 121, 0, 0.08)";
-    readonly 'brand-primary-hover': "#F56C00";
-    readonly 'brand-primary-active': "#E06D10";
-    readonly 'brand-secondary': "#406D87";
-    readonly 'brand-secondary-light': "#678498";
-    readonly 'brand-secondary-dark': "#32556D";
-    readonly 'brand-secondary-subtle': "rgba(64, 109, 135, 0.08)";
-    readonly 'brand-secondary-hover': "#39617A";
-    readonly 'brand-secondary-active': "#32556D";
+    readonly 'brand-primary-hover': "#DA5F00";
+    readonly 'brand-primary-active': "#B94A00";
+    readonly 'brand-secondary': "#307B9B";
+    readonly 'brand-secondary-light': "#2697B7";
+    readonly 'brand-secondary-dark': "#2A617F";
+    readonly 'brand-secondary-subtle': "rgba(48, 123, 155, 0.08)";
+    readonly 'brand-secondary-hover': "#2A617F";
+    readonly 'brand-secondary-active': "#22465F";
     readonly 'on-brand-primary': "#FFFFFF";
     readonly 'on-brand-secondary': "#FFFFFF";
-    readonly 'status-success': "#14B8A6";
-    readonly 'status-success-light': "#43C6B7";
-    readonly 'status-success-dark': "#0E8074";
-    readonly 'status-success-subtle': "#F0FDFA";
+    readonly 'status-success': "#2ED573";
+    readonly 'status-success-light': "#58F69E";
+    readonly 'status-success-dark': "#298732";
+    readonly 'status-success-subtle': "#E3FFEE";
     readonly 'status-error': "#D14343";
-    readonly 'status-error-light': "#DA6868";
-    readonly 'status-error-dark': "#922E2E";
-    readonly 'status-error-subtle': "#FEF2F2";
-    readonly 'status-warning': "#FFB020";
-    readonly 'status-warning-light': "#FFBF4C";
-    readonly 'status-warning-dark': "#B27B16";
-    readonly 'status-warning-subtle': "#FFFBEB";
+    readonly 'status-error-light': "#E05254";
+    readonly 'status-error-dark': "#A4221C";
+    readonly 'status-error-subtle': "#FFF4F4";
+    readonly 'status-error-vivid': "#FF4757";
+    readonly 'status-error-vivid-light': "#FF6070";
+    readonly 'status-error-vivid-dark': "#C42539";
+    readonly 'status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
+    readonly 'status-warning': "#F9B415";
+    readonly 'status-warning-light': "#FFD352";
+    readonly 'status-warning-dark': "#C27400";
+    readonly 'status-warning-subtle': "#FFF7DD";
     readonly 'status-info': "#2196F3";
-    readonly 'status-info-light': "#64B6F7";
-    readonly 'status-info-dark': "#0B79D0";
-    readonly 'status-info-subtle': "#F0F9FF";
+    readonly 'status-info-light': "#78C2FF";
+    readonly 'status-info-dark': "#1072CB";
+    readonly 'status-info-subtle': "#EFF8FF";
     readonly 'on-status-success': "#FFFFFF";
     readonly 'on-status-error': "#FFFFFF";
     readonly 'on-status-warning': "#FFFFFF";
@@ -753,6 +962,7 @@ declare function getSemanticColors(mode: ThemeMode): {
     readonly 'border-default': "#E8E9EB";
     readonly 'border-subtle': "#F3F4F6";
     readonly 'border-strong': "#D1D5DB";
+    readonly 'border-prominent': "#9CA3AF";
     readonly 'border-focus': "#5048E5";
     readonly 'border-input': "#D1D5DB";
     readonly 'border-input-hover': "#9CA3AF";
@@ -769,34 +979,38 @@ declare function getSemanticColors(mode: ThemeMode): {
     readonly 'avatar-text': "#FFFFFF";
 } | {
     readonly 'brand-primary': "#FF7900";
-    readonly 'brand-primary-light': "#FF9630";
-    readonly 'brand-primary-dark': "#D0620C";
+    readonly 'brand-primary-light': "#FFA063";
+    readonly 'brand-primary-dark': "#DA5F00";
     readonly 'brand-primary-subtle': "rgba(255, 121, 0, 0.12)";
-    readonly 'brand-primary-hover': "#FF8500";
-    readonly 'brand-primary-active': "#FF9630";
-    readonly 'brand-secondary': "#406D87";
-    readonly 'brand-secondary-light': "#678498";
-    readonly 'brand-secondary-dark': "#32556D";
-    readonly 'brand-secondary-subtle': "rgba(64, 109, 135, 0.12)";
-    readonly 'brand-secondary-hover': "#557488";
-    readonly 'brand-secondary-active': "#678498";
+    readonly 'brand-primary-hover': "#FFA063";
+    readonly 'brand-primary-active': "#FFC7A2";
+    readonly 'brand-secondary': "#307B9B";
+    readonly 'brand-secondary-light': "#2697B7";
+    readonly 'brand-secondary-dark': "#2A617F";
+    readonly 'brand-secondary-subtle': "rgba(48, 123, 155, 0.12)";
+    readonly 'brand-secondary-hover': "#2697B7";
+    readonly 'brand-secondary-active': "#01B5D1";
     readonly 'on-brand-primary': "#FFFFFF";
     readonly 'on-brand-secondary': "#FFFFFF";
-    readonly 'status-success': "#14B8A6";
-    readonly 'status-success-light': "#43C6B7";
-    readonly 'status-success-dark': "#0E8074";
-    readonly 'status-success-subtle': "rgba(20, 184, 166, 0.12)";
+    readonly 'status-success': "#2ED573";
+    readonly 'status-success-light': "#58F69E";
+    readonly 'status-success-dark': "#298732";
+    readonly 'status-success-subtle': "rgba(46, 213, 115, 0.12)";
     readonly 'status-error': "#D14343";
-    readonly 'status-error-light': "#DA6868";
-    readonly 'status-error-dark': "#922E2E";
+    readonly 'status-error-light': "#E05254";
+    readonly 'status-error-dark': "#A4221C";
     readonly 'status-error-subtle': "rgba(209, 67, 67, 0.12)";
-    readonly 'status-warning': "#FFB020";
-    readonly 'status-warning-light': "#FFBF4C";
-    readonly 'status-warning-dark': "#B27B16";
-    readonly 'status-warning-subtle': "rgba(255, 176, 32, 0.12)";
+    readonly 'status-error-vivid': "#FF4757";
+    readonly 'status-error-vivid-light': "#FF6070";
+    readonly 'status-error-vivid-dark': "#C42539";
+    readonly 'status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
+    readonly 'status-warning': "#F9B415";
+    readonly 'status-warning-light': "#FFD352";
+    readonly 'status-warning-dark': "#C27400";
+    readonly 'status-warning-subtle': "rgba(249, 180, 21, 0.12)";
     readonly 'status-info': "#2196F3";
-    readonly 'status-info-light': "#64B6F7";
-    readonly 'status-info-dark': "#0B79D0";
+    readonly 'status-info-light': "#78C2FF";
+    readonly 'status-info-dark': "#1072CB";
     readonly 'status-info-subtle': "rgba(33, 150, 243, 0.12)";
     readonly 'on-status-success': "#FFFFFF";
     readonly 'on-status-error': "#FFFFFF";
@@ -842,6 +1056,7 @@ declare function getSemanticColors(mode: ThemeMode): {
     readonly 'border-default': "#1F1F1F";
     readonly 'border-subtle': "#1C1C1C";
     readonly 'border-strong': "#2C2C2C";
+    readonly 'border-prominent': "#3C3C3C";
     readonly 'border-focus': "#828DF8";
     readonly 'border-input': "#4B5563";
     readonly 'border-input-hover': "#6B7280";
@@ -867,10 +1082,11 @@ declare function getSemanticColors(mode: ThemeMode): {
 
 declare const lightThemeCSSVars: {
     readonly '--color-brand-primary-rgb': "255, 121, 0";
-    readonly '--color-brand-secondary-rgb': "64, 109, 135";
-    readonly '--color-status-success-rgb': "20, 184, 166";
+    readonly '--color-brand-secondary-rgb': "48, 123, 155";
+    readonly '--color-status-success-rgb': "46, 213, 115";
     readonly '--color-status-error-rgb': "209, 67, 67";
-    readonly '--color-status-warning-rgb': "255, 176, 32";
+    readonly '--color-status-error-vivid-rgb': "255, 71, 87";
+    readonly '--color-status-warning-rgb': "249, 180, 21";
     readonly '--color-status-info-rgb': "33, 150, 243";
     readonly '--color-background-base-rgb': "16, 16, 16";
     readonly '--font-family-sans': "'Inter'";
@@ -884,23 +1100,27 @@ declare const lightThemeCSSVars: {
     readonly '--duration-normal': "250ms";
     readonly '--duration-slow': "400ms";
     readonly '--color-brand-primary': "#FF7900";
-    readonly '--color-brand-primary-light': "#FF9630";
-    readonly '--color-brand-primary-dark': "#D0620C";
+    readonly '--color-brand-primary-light': "#FFA063";
+    readonly '--color-brand-primary-dark': "#DA5F00";
     readonly '--color-brand-primary-subtle': "rgba(255, 121, 0, 0.08)";
-    readonly '--color-brand-secondary': "#406D87";
-    readonly '--color-brand-secondary-light': "#678498";
-    readonly '--color-brand-secondary-dark': "#32556D";
-    readonly '--color-brand-secondary-subtle': "rgba(64, 109, 135, 0.08)";
+    readonly '--color-brand-secondary': "#307B9B";
+    readonly '--color-brand-secondary-light': "#2697B7";
+    readonly '--color-brand-secondary-dark': "#2A617F";
+    readonly '--color-brand-secondary-subtle': "rgba(48, 123, 155, 0.08)";
     readonly '--color-on-brand-primary': "#FFFFFF";
     readonly '--color-on-brand-secondary': "#FFFFFF";
-    readonly '--color-status-success': "#14B8A6";
-    readonly '--color-status-success-subtle': "#F0FDFA";
+    readonly '--color-status-success': "#2ED573";
+    readonly '--color-status-success-subtle': "#E3FFEE";
     readonly '--color-status-error': "#D14343";
-    readonly '--color-status-error-subtle': "#FEF2F2";
-    readonly '--color-status-warning': "#FFB020";
-    readonly '--color-status-warning-subtle': "#FFFBEB";
+    readonly '--color-status-error-subtle': "#FFF4F4";
+    readonly '--color-status-warning': "#F9B415";
+    readonly '--color-status-warning-subtle': "#FFF7DD";
     readonly '--color-status-info': "#2196F3";
-    readonly '--color-status-info-subtle': "#F0F9FF";
+    readonly '--color-status-info-subtle': "#EFF8FF";
+    readonly '--color-status-error-vivid': "#FF4757";
+    readonly '--color-status-error-vivid-light': "#FF6070";
+    readonly '--color-status-error-vivid-dark': "#C42539";
+    readonly '--color-status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
     readonly '--color-text-primary': "#121828";
     readonly '--color-text-secondary': "#65748B";
     readonly '--color-text-tertiary': "#9CA3AF";
@@ -916,6 +1136,7 @@ declare const lightThemeCSSVars: {
     readonly '--color-border-default': "#E8E9EB";
     readonly '--color-border-subtle': "#F3F4F6";
     readonly '--color-border-strong': "#D1D5DB";
+    readonly '--color-border-prominent': "#9CA3AF";
     readonly '--color-border-focus': "#5048E5";
     readonly '--color-interactive-hover': "rgba(55, 65, 81, 0.04)";
     readonly '--color-interactive-focus': "rgba(55, 65, 81, 0.12)";
@@ -923,18 +1144,18 @@ declare const lightThemeCSSVars: {
     readonly '--color-interactive-selected': "rgba(55, 65, 81, 0.08)";
     readonly '--color-interactive-disabled': "rgba(55, 65, 81, 0.12)";
     readonly '--color-divider': "#E8E9EB";
-    readonly '--color-brand-primary-hover': "#F56C00";
-    readonly '--color-brand-primary-active': "#E06D10";
-    readonly '--color-brand-secondary-hover': "#39617A";
-    readonly '--color-brand-secondary-active': "#32556D";
-    readonly '--color-status-success-light': "#43C6B7";
-    readonly '--color-status-success-dark': "#0E8074";
-    readonly '--color-status-error-light': "#DA6868";
-    readonly '--color-status-error-dark': "#922E2E";
-    readonly '--color-status-warning-light': "#FFBF4C";
-    readonly '--color-status-warning-dark': "#B27B16";
-    readonly '--color-status-info-light': "#64B6F7";
-    readonly '--color-status-info-dark': "#0B79D0";
+    readonly '--color-brand-primary-hover': "#DA5F00";
+    readonly '--color-brand-primary-active': "#B94A00";
+    readonly '--color-brand-secondary-hover': "#2A617F";
+    readonly '--color-brand-secondary-active': "#22465F";
+    readonly '--color-status-success-light': "#58F69E";
+    readonly '--color-status-success-dark': "#298732";
+    readonly '--color-status-error-light': "#E05254";
+    readonly '--color-status-error-dark': "#A4221C";
+    readonly '--color-status-warning-light': "#FFD352";
+    readonly '--color-status-warning-dark': "#C27400";
+    readonly '--color-status-info-light': "#78C2FF";
+    readonly '--color-status-info-dark': "#1072CB";
     readonly '--color-on-status-success': "#FFFFFF";
     readonly '--color-on-status-error': "#FFFFFF";
     readonly '--color-on-status-warning': "#FFFFFF";
@@ -974,10 +1195,11 @@ declare const lightThemeCSSVars: {
 };
 declare const darkThemeCSSVars: {
     readonly '--color-brand-primary-rgb': "255, 121, 0";
-    readonly '--color-brand-secondary-rgb': "64, 109, 135";
-    readonly '--color-status-success-rgb': "20, 184, 166";
+    readonly '--color-brand-secondary-rgb': "48, 123, 155";
+    readonly '--color-status-success-rgb': "46, 213, 115";
     readonly '--color-status-error-rgb': "209, 67, 67";
-    readonly '--color-status-warning-rgb': "255, 176, 32";
+    readonly '--color-status-error-vivid-rgb': "255, 71, 87";
+    readonly '--color-status-warning-rgb': "249, 180, 21";
     readonly '--color-status-info-rgb': "33, 150, 243";
     readonly '--color-background-base-rgb': "16, 16, 16";
     readonly '--font-family-sans': "'Inter'";
@@ -991,23 +1213,27 @@ declare const darkThemeCSSVars: {
     readonly '--duration-normal': "250ms";
     readonly '--duration-slow': "400ms";
     readonly '--color-brand-primary': "#FF7900";
-    readonly '--color-brand-primary-light': "#FF9630";
-    readonly '--color-brand-primary-dark': "#D0620C";
+    readonly '--color-brand-primary-light': "#FFA063";
+    readonly '--color-brand-primary-dark': "#DA5F00";
     readonly '--color-brand-primary-subtle': "rgba(255, 121, 0, 0.12)";
-    readonly '--color-brand-secondary': "#406D87";
-    readonly '--color-brand-secondary-light': "#678498";
-    readonly '--color-brand-secondary-dark': "#32556D";
-    readonly '--color-brand-secondary-subtle': "rgba(64, 109, 135, 0.12)";
+    readonly '--color-brand-secondary': "#307B9B";
+    readonly '--color-brand-secondary-light': "#2697B7";
+    readonly '--color-brand-secondary-dark': "#2A617F";
+    readonly '--color-brand-secondary-subtle': "rgba(48, 123, 155, 0.12)";
     readonly '--color-on-brand-primary': "#FFFFFF";
     readonly '--color-on-brand-secondary': "#FFFFFF";
-    readonly '--color-status-success': "#14B8A6";
-    readonly '--color-status-success-subtle': "rgba(20, 184, 166, 0.12)";
+    readonly '--color-status-success': "#2ED573";
+    readonly '--color-status-success-subtle': "rgba(46, 213, 115, 0.12)";
     readonly '--color-status-error': "#D14343";
     readonly '--color-status-error-subtle': "rgba(209, 67, 67, 0.12)";
-    readonly '--color-status-warning': "#FFB020";
-    readonly '--color-status-warning-subtle': "rgba(255, 176, 32, 0.12)";
+    readonly '--color-status-warning': "#F9B415";
+    readonly '--color-status-warning-subtle': "rgba(249, 180, 21, 0.12)";
     readonly '--color-status-info': "#2196F3";
     readonly '--color-status-info-subtle': "rgba(33, 150, 243, 0.12)";
+    readonly '--color-status-error-vivid': "#FF4757";
+    readonly '--color-status-error-vivid-light': "#FF6070";
+    readonly '--color-status-error-vivid-dark': "#C42539";
+    readonly '--color-status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
     readonly '--color-text-primary': "#F3F4F6";
     readonly '--color-text-secondary': "#9CA3AF";
     readonly '--color-text-tertiary': "#6B7280";
@@ -1023,6 +1249,7 @@ declare const darkThemeCSSVars: {
     readonly '--color-border-default': "#1F1F1F";
     readonly '--color-border-subtle': "#1C1C1C";
     readonly '--color-border-strong': "#2C2C2C";
+    readonly '--color-border-prominent': "#3C3C3C";
     readonly '--color-border-focus': "#828DF8";
     readonly '--color-interactive-hover': "rgba(255, 255, 255, 0.04)";
     readonly '--color-interactive-focus': "rgba(255, 255, 255, 0.12)";
@@ -1030,18 +1257,18 @@ declare const darkThemeCSSVars: {
     readonly '--color-interactive-selected': "rgba(255, 255, 255, 0.08)";
     readonly '--color-interactive-disabled': "rgba(255, 255, 255, 0.12)";
     readonly '--color-divider': "#1F1F1F";
-    readonly '--color-brand-primary-hover': "#FF8500";
-    readonly '--color-brand-primary-active': "#FF9630";
-    readonly '--color-brand-secondary-hover': "#557488";
-    readonly '--color-brand-secondary-active': "#678498";
-    readonly '--color-status-success-light': "#43C6B7";
-    readonly '--color-status-success-dark': "#0E8074";
-    readonly '--color-status-error-light': "#DA6868";
-    readonly '--color-status-error-dark': "#922E2E";
-    readonly '--color-status-warning-light': "#FFBF4C";
-    readonly '--color-status-warning-dark': "#B27B16";
-    readonly '--color-status-info-light': "#64B6F7";
-    readonly '--color-status-info-dark': "#0B79D0";
+    readonly '--color-brand-primary-hover': "#FFA063";
+    readonly '--color-brand-primary-active': "#FFC7A2";
+    readonly '--color-brand-secondary-hover': "#2697B7";
+    readonly '--color-brand-secondary-active': "#01B5D1";
+    readonly '--color-status-success-light': "#58F69E";
+    readonly '--color-status-success-dark': "#298732";
+    readonly '--color-status-error-light': "#E05254";
+    readonly '--color-status-error-dark': "#A4221C";
+    readonly '--color-status-warning-light': "#FFD352";
+    readonly '--color-status-warning-dark': "#C27400";
+    readonly '--color-status-info-light': "#78C2FF";
+    readonly '--color-status-info-dark': "#1072CB";
     readonly '--color-on-status-success': "#FFFFFF";
     readonly '--color-on-status-error': "#FFFFFF";
     readonly '--color-on-status-warning': "#FFFFFF";
@@ -1081,10 +1308,11 @@ declare const darkThemeCSSVars: {
 };
 declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-brand-primary-rgb': "255, 121, 0";
-    readonly '--color-brand-secondary-rgb': "64, 109, 135";
-    readonly '--color-status-success-rgb': "20, 184, 166";
+    readonly '--color-brand-secondary-rgb': "48, 123, 155";
+    readonly '--color-status-success-rgb': "46, 213, 115";
     readonly '--color-status-error-rgb': "209, 67, 67";
-    readonly '--color-status-warning-rgb': "255, 176, 32";
+    readonly '--color-status-error-vivid-rgb': "255, 71, 87";
+    readonly '--color-status-warning-rgb': "249, 180, 21";
     readonly '--color-status-info-rgb': "33, 150, 243";
     readonly '--color-background-base-rgb': "16, 16, 16";
     readonly '--font-family-sans': "'Inter'";
@@ -1098,23 +1326,27 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--duration-normal': "250ms";
     readonly '--duration-slow': "400ms";
     readonly '--color-brand-primary': "#FF7900";
-    readonly '--color-brand-primary-light': "#FF9630";
-    readonly '--color-brand-primary-dark': "#D0620C";
+    readonly '--color-brand-primary-light': "#FFA063";
+    readonly '--color-brand-primary-dark': "#DA5F00";
     readonly '--color-brand-primary-subtle': "rgba(255, 121, 0, 0.08)";
-    readonly '--color-brand-secondary': "#406D87";
-    readonly '--color-brand-secondary-light': "#678498";
-    readonly '--color-brand-secondary-dark': "#32556D";
-    readonly '--color-brand-secondary-subtle': "rgba(64, 109, 135, 0.08)";
+    readonly '--color-brand-secondary': "#307B9B";
+    readonly '--color-brand-secondary-light': "#2697B7";
+    readonly '--color-brand-secondary-dark': "#2A617F";
+    readonly '--color-brand-secondary-subtle': "rgba(48, 123, 155, 0.08)";
     readonly '--color-on-brand-primary': "#FFFFFF";
     readonly '--color-on-brand-secondary': "#FFFFFF";
-    readonly '--color-status-success': "#14B8A6";
-    readonly '--color-status-success-subtle': "#F0FDFA";
+    readonly '--color-status-success': "#2ED573";
+    readonly '--color-status-success-subtle': "#E3FFEE";
     readonly '--color-status-error': "#D14343";
-    readonly '--color-status-error-subtle': "#FEF2F2";
-    readonly '--color-status-warning': "#FFB020";
-    readonly '--color-status-warning-subtle': "#FFFBEB";
+    readonly '--color-status-error-subtle': "#FFF4F4";
+    readonly '--color-status-warning': "#F9B415";
+    readonly '--color-status-warning-subtle': "#FFF7DD";
     readonly '--color-status-info': "#2196F3";
-    readonly '--color-status-info-subtle': "#F0F9FF";
+    readonly '--color-status-info-subtle': "#EFF8FF";
+    readonly '--color-status-error-vivid': "#FF4757";
+    readonly '--color-status-error-vivid-light': "#FF6070";
+    readonly '--color-status-error-vivid-dark': "#C42539";
+    readonly '--color-status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
     readonly '--color-text-primary': "#121828";
     readonly '--color-text-secondary': "#65748B";
     readonly '--color-text-tertiary': "#9CA3AF";
@@ -1130,6 +1362,7 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-border-default': "#E8E9EB";
     readonly '--color-border-subtle': "#F3F4F6";
     readonly '--color-border-strong': "#D1D5DB";
+    readonly '--color-border-prominent': "#9CA3AF";
     readonly '--color-border-focus': "#5048E5";
     readonly '--color-interactive-hover': "rgba(55, 65, 81, 0.04)";
     readonly '--color-interactive-focus': "rgba(55, 65, 81, 0.12)";
@@ -1137,18 +1370,18 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-interactive-selected': "rgba(55, 65, 81, 0.08)";
     readonly '--color-interactive-disabled': "rgba(55, 65, 81, 0.12)";
     readonly '--color-divider': "#E8E9EB";
-    readonly '--color-brand-primary-hover': "#F56C00";
-    readonly '--color-brand-primary-active': "#E06D10";
-    readonly '--color-brand-secondary-hover': "#39617A";
-    readonly '--color-brand-secondary-active': "#32556D";
-    readonly '--color-status-success-light': "#43C6B7";
-    readonly '--color-status-success-dark': "#0E8074";
-    readonly '--color-status-error-light': "#DA6868";
-    readonly '--color-status-error-dark': "#922E2E";
-    readonly '--color-status-warning-light': "#FFBF4C";
-    readonly '--color-status-warning-dark': "#B27B16";
-    readonly '--color-status-info-light': "#64B6F7";
-    readonly '--color-status-info-dark': "#0B79D0";
+    readonly '--color-brand-primary-hover': "#DA5F00";
+    readonly '--color-brand-primary-active': "#B94A00";
+    readonly '--color-brand-secondary-hover': "#2A617F";
+    readonly '--color-brand-secondary-active': "#22465F";
+    readonly '--color-status-success-light': "#58F69E";
+    readonly '--color-status-success-dark': "#298732";
+    readonly '--color-status-error-light': "#E05254";
+    readonly '--color-status-error-dark': "#A4221C";
+    readonly '--color-status-warning-light': "#FFD352";
+    readonly '--color-status-warning-dark': "#C27400";
+    readonly '--color-status-info-light': "#78C2FF";
+    readonly '--color-status-info-dark': "#1072CB";
     readonly '--color-on-status-success': "#FFFFFF";
     readonly '--color-on-status-error': "#FFFFFF";
     readonly '--color-on-status-warning': "#FFFFFF";
@@ -1187,10 +1420,11 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-avatar-text': "#FFFFFF";
 } | {
     readonly '--color-brand-primary-rgb': "255, 121, 0";
-    readonly '--color-brand-secondary-rgb': "64, 109, 135";
-    readonly '--color-status-success-rgb': "20, 184, 166";
+    readonly '--color-brand-secondary-rgb': "48, 123, 155";
+    readonly '--color-status-success-rgb': "46, 213, 115";
     readonly '--color-status-error-rgb': "209, 67, 67";
-    readonly '--color-status-warning-rgb': "255, 176, 32";
+    readonly '--color-status-error-vivid-rgb': "255, 71, 87";
+    readonly '--color-status-warning-rgb': "249, 180, 21";
     readonly '--color-status-info-rgb': "33, 150, 243";
     readonly '--color-background-base-rgb': "16, 16, 16";
     readonly '--font-family-sans': "'Inter'";
@@ -1204,23 +1438,27 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--duration-normal': "250ms";
     readonly '--duration-slow': "400ms";
     readonly '--color-brand-primary': "#FF7900";
-    readonly '--color-brand-primary-light': "#FF9630";
-    readonly '--color-brand-primary-dark': "#D0620C";
+    readonly '--color-brand-primary-light': "#FFA063";
+    readonly '--color-brand-primary-dark': "#DA5F00";
     readonly '--color-brand-primary-subtle': "rgba(255, 121, 0, 0.12)";
-    readonly '--color-brand-secondary': "#406D87";
-    readonly '--color-brand-secondary-light': "#678498";
-    readonly '--color-brand-secondary-dark': "#32556D";
-    readonly '--color-brand-secondary-subtle': "rgba(64, 109, 135, 0.12)";
+    readonly '--color-brand-secondary': "#307B9B";
+    readonly '--color-brand-secondary-light': "#2697B7";
+    readonly '--color-brand-secondary-dark': "#2A617F";
+    readonly '--color-brand-secondary-subtle': "rgba(48, 123, 155, 0.12)";
     readonly '--color-on-brand-primary': "#FFFFFF";
     readonly '--color-on-brand-secondary': "#FFFFFF";
-    readonly '--color-status-success': "#14B8A6";
-    readonly '--color-status-success-subtle': "rgba(20, 184, 166, 0.12)";
+    readonly '--color-status-success': "#2ED573";
+    readonly '--color-status-success-subtle': "rgba(46, 213, 115, 0.12)";
     readonly '--color-status-error': "#D14343";
     readonly '--color-status-error-subtle': "rgba(209, 67, 67, 0.12)";
-    readonly '--color-status-warning': "#FFB020";
-    readonly '--color-status-warning-subtle': "rgba(255, 176, 32, 0.12)";
+    readonly '--color-status-warning': "#F9B415";
+    readonly '--color-status-warning-subtle': "rgba(249, 180, 21, 0.12)";
     readonly '--color-status-info': "#2196F3";
     readonly '--color-status-info-subtle': "rgba(33, 150, 243, 0.12)";
+    readonly '--color-status-error-vivid': "#FF4757";
+    readonly '--color-status-error-vivid-light': "#FF6070";
+    readonly '--color-status-error-vivid-dark': "#C42539";
+    readonly '--color-status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
     readonly '--color-text-primary': "#F3F4F6";
     readonly '--color-text-secondary': "#9CA3AF";
     readonly '--color-text-tertiary': "#6B7280";
@@ -1236,6 +1474,7 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-border-default': "#1F1F1F";
     readonly '--color-border-subtle': "#1C1C1C";
     readonly '--color-border-strong': "#2C2C2C";
+    readonly '--color-border-prominent': "#3C3C3C";
     readonly '--color-border-focus': "#828DF8";
     readonly '--color-interactive-hover': "rgba(255, 255, 255, 0.04)";
     readonly '--color-interactive-focus': "rgba(255, 255, 255, 0.12)";
@@ -1243,18 +1482,18 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-interactive-selected': "rgba(255, 255, 255, 0.08)";
     readonly '--color-interactive-disabled': "rgba(255, 255, 255, 0.12)";
     readonly '--color-divider': "#1F1F1F";
-    readonly '--color-brand-primary-hover': "#FF8500";
-    readonly '--color-brand-primary-active': "#FF9630";
-    readonly '--color-brand-secondary-hover': "#557488";
-    readonly '--color-brand-secondary-active': "#678498";
-    readonly '--color-status-success-light': "#43C6B7";
-    readonly '--color-status-success-dark': "#0E8074";
-    readonly '--color-status-error-light': "#DA6868";
-    readonly '--color-status-error-dark': "#922E2E";
-    readonly '--color-status-warning-light': "#FFBF4C";
-    readonly '--color-status-warning-dark': "#B27B16";
-    readonly '--color-status-info-light': "#64B6F7";
-    readonly '--color-status-info-dark': "#0B79D0";
+    readonly '--color-brand-primary-hover': "#FFA063";
+    readonly '--color-brand-primary-active': "#FFC7A2";
+    readonly '--color-brand-secondary-hover': "#2697B7";
+    readonly '--color-brand-secondary-active': "#01B5D1";
+    readonly '--color-status-success-light': "#58F69E";
+    readonly '--color-status-success-dark': "#298732";
+    readonly '--color-status-error-light': "#E05254";
+    readonly '--color-status-error-dark': "#A4221C";
+    readonly '--color-status-warning-light': "#FFD352";
+    readonly '--color-status-warning-dark': "#C27400";
+    readonly '--color-status-info-light': "#78C2FF";
+    readonly '--color-status-info-dark': "#1072CB";
     readonly '--color-on-status-success': "#FFFFFF";
     readonly '--color-on-status-error': "#FFFFFF";
     readonly '--color-on-status-warning': "#FFFFFF";
@@ -1615,7 +1854,7 @@ declare function validateCssPropertyManifest(candidate: unknown): ManifestValida
 /** Type guard variant of validateCssPropertyManifest for use in narrowing contexts. */
 declare function isCssPropertyManifest(candidate: unknown): candidate is CssPropertyManifest;
 
-type ColorToken = keyof ReturnType<typeof getSemanticColors>;
+type ColorToken$1 = keyof ReturnType<typeof getSemanticColors>;
 /**
  * Resolve a semantic color token for an inline style where a nativewind
  * className can't apply — gradients (`backgroundImage`), per-edge borders
@@ -1627,7 +1866,30 @@ type ColorToken = keyof ReturnType<typeof getSemanticColors>;
  * resolved hex from `getSemanticColors` (mobile is dark-only). This is why
  * these spots stay theme-correct on web while also rendering on-device.
  */
-declare function resolveColor(token: ColorToken, mode?: ThemeMode): string;
+declare function resolveColor(token: ColorToken$1, mode?: ThemeMode): string;
+
+type ColorToken = keyof ReturnType<typeof getSemanticColors>;
+/** A `backgroundImage` style — web-only (RN ignores it); type it loosely for RN style arrays. */
+type GradientStyle = {
+    backgroundImage: string;
+};
+/**
+ * A linear-gradient `backgroundImage` built from two semantic color tokens.
+ *
+ * Themeable + native-safe via {@link resolveColor}: on web the stops are CSS
+ * variables (light/dark switching keeps working); on native it resolves to hex.
+ * `backgroundImage` is a **web-only** paint, so pair this with a solid
+ * `bg-*` className fallback for native (see the shell TopBar).
+ */
+declare function linearGradient(from: ColorToken, to: ColorToken, angle?: number, mode?: ThemeMode): GradientStyle;
+/**
+ * Named surface gradients — the shared substrate for gradient fills. Replaces
+ * per-component inline `linear-gradient` strings.
+ */
+declare const surfaceGradient: {
+    /** Chrome bands (top bar, headers): elevated → base, a subtle dark wash. */
+    chrome: (mode?: ThemeMode) => GradientStyle;
+};
 
 type ThemeProviderMode = 'dark' | 'light';
 interface ThemeProviderProps extends ViewProps {
@@ -1726,4 +1988,4 @@ declare const defaultPreset: ThemePreset;
  */
 declare const audiobookPreset: ThemePreset;
 
-export { type ComponentType, type CssPropertyEntry, type CssPropertyManifest, type ElevationConfig, type ElevationLevel, type GlowIntensity, type ManifestValidationResult, type ShadowIntensity, type ShadowSurface, type ThemeConfig, type ThemeMode, type ThemePreset, type ThemePresetColors, type ThemePresetFonts, type ThemePresetRadii, type ThemePresetShadows, ThemeProvider, type ThemeProviderMode, type ThemeProviderProps, type VariantAxes, type VariantOverride, 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, type CategoricalVariant, type ComponentType, type CssPropertyEntry, type CssPropertyManifest, type ElevationConfig, type ElevationLevel, type GlowIntensity, type GradientStyle, type ManifestValidationResult, type ShadowIntensity, type ShadowSurface, type ThemeConfig, type ThemeMode, type ThemePreset, type ThemePresetColors, type ThemePresetFonts, type ThemePresetRadii, type ThemePresetShadows, ThemeProvider, type ThemeProviderMode, type ThemeProviderProps, type VariantAxes, type VariantOverride, 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 };