@titan-design/react-ui 0.12.1 → 0.14.0

package/dist/theme/index.mjs

@@ -9,6 +9,27 @@ var primitiveColors = {
   black: "#000000",
   transparent: "transparent"
 };
+var alertRedVivid = "#FF4757";
+var resultPaletteColors = {
+  improve: "#4caf50",
+  improveDark: "#248a24",
+  degrade: "#ef5350",
+  degradeDark: "#b30000",
+  inconclusive: "#9E9A97"
+};
+var semanticPins = {
+  // Cool navy-black; darker and more blue-shifted than any warm greyRamp step.
+  textPrimaryLight: "#121828",
+  // Cool blue-grey; outside greyRamp's warm (R>=G>=B) scale.
+  textSecondaryLight: "#65748B",
+  // Pure neutral grey (R=G=B); no warm greyRamp step lands on it exactly.
+  backgroundBaseLight: "#EBEBEB",
+  // Near-neutral grey, kept one step off backgroundBaseLight by design.
+  dividerLight: "#E8E9EB",
+  // Periwinkle/indigo; more purple than any primitiveRamps.blue step. Shared by
+  // dark-mode text-link, border-focus and border-input-focus.
+  focusIndigoDark: "#828DF8"
+};
 var greyRamp = {
   50: "#F9F6F3",
   //  L*97.0  W6
@@ -270,12 +291,30 @@ function getDiscreteRainbowColor(index, size) {
 }
 var primitiveTypography = {
   fontFamilies: {
-    sans: ["Inter", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Helvetica", "Arial", "sans-serif"],
+    sans: [
+      "Inter",
+      "-apple-system",
+      "BlinkMacSystemFont",
+      "Segoe UI",
+      "Helvetica",
+      "Arial",
+      "sans-serif"
+    ],
     body: ["Nunito Sans", "sans-serif"],
     heading: ["Space Grotesk", "sans-serif"],
-    mono: ["SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", "monospace"]
+    mono: [
+      "SF Mono",
+      "Monaco",
+      "Inconsolata",
+      "Fira Mono",
+      "Droid Sans Mono",
+      "Source Code Pro",
+      "monospace"
+    ]
   },
   fontSizes: {
+    "2xs": "0.625rem",
+    // 10px
     xs: "0.75rem",
     // 12px
     sm: "0.875rem",
@@ -408,22 +447,34 @@ var semanticColorsLight = {
   "brand-primary-light": primitiveRamps.orange[300],
   "brand-primary-dark": primitiveRamps.orange[500],
   "brand-primary-subtle": "rgba(255, 121, 0, 0.08)",
+  "brand-primary-muted": "rgba(255, 121, 0, 0.30)",
+  "brand-primary-strong": "rgba(255, 121, 0, 0.50)",
   "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-muted": "rgba(48, 123, 155, 0.30)",
+  "brand-secondary-strong": "rgba(48, 123, 155, 0.50)",
   "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,
+  // Text ON a `-subtle` fill. Light mode keeps today's pairing (the base token) so
+  // nothing moves here: light has the same disease mirrored — a light rung on a
+  // near-white ramp[50] fill — but correcting it belongs with the light-mode pass
+  // in AW-121, not this one.
+  "on-brand-primary-subtle": primitiveRamps.orange[400],
+  "on-brand-secondary-subtle": primitiveRamps.cyan[600],
   // Status colors (status-*)
   "status-success": primitiveRamps.green[300],
   "status-success-light": primitiveRamps.green[200],
   "status-success-dark": primitiveRamps.green[600],
   "status-success-subtle": primitiveRamps.green[50],
+  "status-success-muted": "rgba(46, 213, 115, 0.30)",
+  "status-success-strong": "rgba(46, 213, 115, 0.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],
@@ -431,34 +482,47 @@ var semanticColorsLight = {
   "status-error-light": primitiveRamps.red[500],
   "status-error-dark": primitiveRamps.red[700],
   "status-error-subtle": primitiveRamps.red[50],
-  "status-error-vivid": primitiveRamps.red[600],
-  // vivid alert red
+  "status-error-muted": "rgba(209, 67, 67, 0.30)",
+  "status-error-strong": "rgba(209, 67, 67, 0.50)",
+  "status-error-vivid": alertRedVivid,
+  // NOT red[600], that is status-error
   "status-error-vivid-light": primitiveRamps.red[500],
   "status-error-vivid-dark": primitiveRamps.red[700],
   "status-error-vivid-subtle": "rgba(255, 71, 87, 0.12)",
+  "status-error-vivid-muted": "rgba(255, 71, 87, 0.30)",
+  "status-error-vivid-strong": "rgba(255, 71, 87, 0.50)",
   "status-warning": primitiveRamps.amber[300],
   "status-warning-light": primitiveRamps.amber[200],
   "status-warning-dark": primitiveRamps.amber[500],
   "status-warning-subtle": primitiveRamps.amber[50],
+  "status-warning-muted": "rgba(249, 180, 21, 0.30)",
+  "status-warning-strong": "rgba(249, 180, 21, 0.50)",
   "status-info": primitiveRamps.blue[500],
   "status-info-light": primitiveRamps.blue[300],
   "status-info-dark": primitiveRamps.blue[600],
   "status-info-subtle": primitiveRamps.blue[50],
+  "status-info-muted": "rgba(33, 150, 243, 0.30)",
+  "status-info-strong": "rgba(33, 150, 243, 0.50)",
+  // Text ON a `-subtle` fill — see the on-brand-*-subtle note above.
+  "on-status-success-subtle": primitiveRamps.green[300],
+  "on-status-error-subtle": primitiveRamps.red[600],
+  "on-status-warning-subtle": primitiveRamps.amber[300],
+  "on-status-info-subtle": primitiveRamps.blue[500],
   // 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",
+  "result-improve": resultPaletteColors.improve,
   // Green - positive outcome
   "result-improve-light": "rgba(76, 175, 80, 0.12)",
-  "result-improve-dark": "#248a24",
-  "result-degrade": "#ef5350",
+  "result-improve-dark": resultPaletteColors.improveDark,
+  "result-degrade": resultPaletteColors.degrade,
   // Red - negative outcome
   "result-degrade-light": "rgba(239, 83, 80, 0.12)",
-  "result-degrade-dark": "#b30000",
-  "result-inconclusive": "#9E9A97",
+  "result-degrade-dark": resultPaletteColors.degradeDark,
+  "result-inconclusive": resultPaletteColors.inconclusive,
   // Gray - no clear result
   "result-inconclusive-light": "rgba(158, 154, 151, 0.12)",
   "result-neutral": greyRamp[600],
@@ -490,8 +554,8 @@ var semanticColorsLight = {
   "data-10": discreteRainbow[22],
   // Dark Orange
   // Text colors (text-*)
-  "text-primary": "#121828",
-  "text-secondary": "#65748B",
+  "text-primary": semanticPins.textPrimaryLight,
+  "text-secondary": semanticPins.textSecondaryLight,
   "text-tertiary": greyRamp[400],
   "text-disabled": "rgba(55, 65, 81, 0.48)",
   "text-inverse": primitiveColors.white,
@@ -507,7 +571,7 @@ var semanticColorsLight = {
   "surface-input": greyRamp[50],
   // Input field background (filled variant)
   // Background colors (background-*)
-  "background-base": "#EBEBEB",
+  "background-base": semanticPins.backgroundBaseLight,
   "background-default": primitiveColors.white,
   "background-subtle": greyRamp[50],
   // Frame/bezel chrome — top bar + side nav shell, one step below
@@ -538,7 +602,7 @@ var semanticColorsLight = {
   "interactive-disabled": "rgba(55, 65, 81, 0.12)",
   "interactive-disabled-text": "rgba(55, 65, 81, 0.26)",
   // Divider
-  "divider": "#E8E9EB",
+  divider: semanticPins.dividerLight,
   // Avatar default
   "avatar-background": greyRamp[600],
   "avatar-text": primitiveColors.white
@@ -549,54 +613,87 @@ var semanticColorsDark = {
   "brand-primary-light": primitiveRamps.orange[300],
   "brand-primary-dark": primitiveRamps.orange[500],
   "brand-primary-subtle": "rgba(255, 121, 0, 0.12)",
+  "brand-primary-muted": "rgba(255, 121, 0, 0.30)",
+  "brand-primary-strong": "rgba(255, 121, 0, 0.50)",
   "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-subtle": "rgba(34, 211, 238, 0.12)",
+  "brand-secondary-muted": "rgba(48, 123, 155, 0.30)",
+  "brand-secondary-strong": "rgba(48, 123, 155, 0.50)",
   "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,
+  // Text ON a `-subtle` fill. Its own role: `brand-primary` and friends are tuned to
+  // carry a white label as a solid fill, which makes the two deepest of them
+  // (cyan[600], red[600]) too dark to read as text on a dark plane. Levelling the
+  // family at rung 300 puts every tone within OKLCH L 0.769-0.813 instead of
+  // 0.550-0.813. Brand is deliberately left at its own orange[400] (operator, AW-133)
+  // so the Voltras tone never drifts; it is the one tone under AA on a raised card.
+  "on-brand-primary-subtle": primitiveRamps.orange[400],
+  "on-brand-secondary-subtle": primitiveRamps.cyan[300],
   // Status colors
   "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)",
+  "status-success-muted": "rgba(46, 213, 115, 0.30)",
+  "status-success-strong": "rgba(46, 213, 115, 0.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": "rgba(209, 67, 67, 0.12)",
-  "status-error-vivid": primitiveRamps.red[600],
+  // Alpha 0.08, not the family's 0.12: error's label is red[400], a rung darker than
+  // its siblings so it reads RED rather than pink (rung 300 has only 0.121 chroma).
+  // Thinning the fill buys back the contrast that extra darkness costs. See AW-133.
+  "status-error-subtle": "rgba(247, 113, 117, 0.08)",
+  "status-error-muted": "rgba(209, 67, 67, 0.30)",
+  "status-error-strong": "rgba(209, 67, 67, 0.50)",
+  "status-error-vivid": alertRedVivid,
   "status-error-vivid-light": primitiveRamps.red[500],
   "status-error-vivid-dark": primitiveRamps.red[700],
   "status-error-vivid-subtle": "rgba(255, 71, 87, 0.12)",
+  "status-error-vivid-muted": "rgba(255, 71, 87, 0.30)",
+  "status-error-vivid-strong": "rgba(255, 71, 87, 0.50)",
   "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-warning-muted": "rgba(249, 180, 21, 0.30)",
+  "status-warning-strong": "rgba(249, 180, 21, 0.50)",
   "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)",
+  "status-info-subtle": "rgba(120, 194, 255, 0.12)",
+  "status-info-muted": "rgba(33, 150, 243, 0.30)",
+  "status-info-strong": "rgba(33, 150, 243, 0.50)",
   // Text on status backgrounds
   "on-status-success": primitiveColors.white,
   "on-status-error": primitiveColors.white,
   "on-status-warning": primitiveColors.white,
   "on-status-info": primitiveColors.white,
+  // Text ON a `-subtle` fill — see the on-brand-*-subtle note above. Error is the
+  // second deliberate exception to the rung-300 rule (operator, AW-133): red[300]
+  // levelled perfectly but read PINK, because a red that light can only hold 0.121
+  // chroma. red[400] carries 0.165 and reads red; its fill is thinned to compensate.
+  "on-status-success-subtle": primitiveRamps.green[300],
+  "on-status-error-subtle": primitiveRamps.red[400],
+  "on-status-warning-subtle": primitiveRamps.amber[300],
+  "on-status-info-subtle": primitiveRamps.blue[300],
   // Result/outcome indicators (result-*)
-  "result-improve": "#4caf50",
+  "result-improve": resultPaletteColors.improve,
   "result-improve-light": "rgba(76, 175, 80, 0.16)",
-  "result-improve-dark": "#248a24",
-  "result-degrade": "#ef5350",
+  "result-improve-dark": resultPaletteColors.improveDark,
+  "result-degrade": resultPaletteColors.degrade,
   "result-degrade-light": "rgba(239, 83, 80, 0.16)",
-  "result-degrade-dark": "#b30000",
-  "result-inconclusive": "#9E9A97",
+  "result-degrade-dark": resultPaletteColors.degradeDark,
+  "result-inconclusive": resultPaletteColors.inconclusive,
   "result-inconclusive-light": "rgba(158, 154, 151, 0.16)",
   "result-neutral": greyRamp[400],
   // Text on result backgrounds
@@ -627,7 +724,7 @@ var semanticColorsDark = {
   "text-tertiary": greyRamp[500],
   "text-disabled": "rgba(255, 255, 255, 0.38)",
   "text-inverse": greyRamp[950],
-  "text-link": "#828DF8",
+  "text-link": semanticPins.focusIndigoDark,
   "text-link-hover": primitiveRamps.blue[400],
   // Surface colors - dark backgrounds — warm-tapered DERIVED ramp (TD-surface-tokens,
   // S-1, re-spaced S-3). Shipped verbatim from `deriveSurfaceRamp()` — see
@@ -677,10 +774,10 @@ var semanticColorsDark = {
   // plane, so it keeps its job without collision.
   "border-prominent": greyRamp[800],
   // high-visibility divider
-  "border-focus": "#828DF8",
+  "border-focus": semanticPins.focusIndigoDark,
   "border-input": greyRamp[700],
   "border-input-hover": greyRamp[600],
-  "border-input-focus": "#828DF8",
+  "border-input-focus": semanticPins.focusIndigoDark,
   "border-input-error": primitiveRamps.red[500],
   // Alpha hairline separators — the primary separation cue (§4/S-2). Self-
   // normalizing: composites toward white by ~the same amount on ANY plane, so
@@ -723,7 +820,7 @@ var semanticColorsDark = {
   "interactive-disabled": "rgba(255, 255, 255, 0.12)",
   "interactive-disabled-text": "rgba(255, 255, 255, 0.26)",
   // Divider
-  "divider": "rgba(255, 255, 255, 0.09)",
+  divider: "rgba(255, 255, 255, 0.09)",
   // Avatar default
   "avatar-background": greyRamp[700],
   "avatar-text": primitiveColors.white
@@ -862,26 +959,42 @@ var lightThemeCSSVars = {
   "--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-primary-muted": semanticColorsLight["brand-primary-muted"],
+  "--color-brand-primary-strong": semanticColorsLight["brand-primary-strong"],
   "--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-brand-secondary-muted": semanticColorsLight["brand-secondary-muted"],
+  "--color-brand-secondary-strong": semanticColorsLight["brand-secondary-strong"],
   "--color-on-brand-primary": semanticColorsLight["on-brand-primary"],
   "--color-on-brand-secondary": semanticColorsLight["on-brand-secondary"],
+  "--color-on-brand-primary-subtle": semanticColorsLight["on-brand-primary-subtle"],
+  "--color-on-brand-secondary-subtle": semanticColorsLight["on-brand-secondary-subtle"],
   "--color-status-success": semanticColorsLight["status-success"],
   "--color-status-success-subtle": semanticColorsLight["status-success-subtle"],
+  "--color-status-success-muted": semanticColorsLight["status-success-muted"],
+  "--color-status-success-strong": semanticColorsLight["status-success-strong"],
   "--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-error-muted": semanticColorsLight["status-error-muted"],
+  "--color-status-error-strong": semanticColorsLight["status-error-strong"],
   "--color-status-warning": semanticColorsLight["status-warning"],
   "--color-status-warning-subtle": semanticColorsLight["status-warning-subtle"],
+  "--color-status-warning-muted": semanticColorsLight["status-warning-muted"],
+  "--color-status-warning-strong": semanticColorsLight["status-warning-strong"],
   "--color-status-info": semanticColorsLight["status-info"],
   "--color-status-info-subtle": semanticColorsLight["status-info-subtle"],
+  "--color-status-info-muted": semanticColorsLight["status-info-muted"],
+  "--color-status-info-strong": semanticColorsLight["status-info-strong"],
   "--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-status-error-vivid-muted": semanticColorsLight["status-error-vivid-muted"],
+  "--color-status-error-vivid-strong": semanticColorsLight["status-error-vivid-strong"],
   "--color-text-primary": semanticColorsLight["text-primary"],
   "--color-text-secondary": semanticColorsLight["text-secondary"],
   "--color-text-tertiary": semanticColorsLight["text-tertiary"],
@@ -919,6 +1032,10 @@ var lightThemeCSSVars = {
   "--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-on-status-success-subtle": semanticColorsLight["on-status-success-subtle"],
+  "--color-on-status-error-subtle": semanticColorsLight["on-status-error-subtle"],
+  "--color-on-status-warning-subtle": semanticColorsLight["on-status-warning-subtle"],
+  "--color-on-status-info-subtle": semanticColorsLight["on-status-info-subtle"],
   "--color-result-improve": semanticColorsLight["result-improve"],
   "--color-result-improve-light": semanticColorsLight["result-improve-light"],
   "--color-result-improve-dark": semanticColorsLight["result-improve-dark"],
@@ -961,26 +1078,42 @@ var darkThemeCSSVars = {
   "--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-primary-muted": semanticColorsDark["brand-primary-muted"],
+  "--color-brand-primary-strong": semanticColorsDark["brand-primary-strong"],
   "--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-brand-secondary-muted": semanticColorsDark["brand-secondary-muted"],
+  "--color-brand-secondary-strong": semanticColorsDark["brand-secondary-strong"],
   "--color-on-brand-primary": semanticColorsDark["on-brand-primary"],
   "--color-on-brand-secondary": semanticColorsDark["on-brand-secondary"],
+  "--color-on-brand-primary-subtle": semanticColorsDark["on-brand-primary-subtle"],
+  "--color-on-brand-secondary-subtle": semanticColorsDark["on-brand-secondary-subtle"],
   "--color-status-success": semanticColorsDark["status-success"],
   "--color-status-success-subtle": semanticColorsDark["status-success-subtle"],
+  "--color-status-success-muted": semanticColorsDark["status-success-muted"],
+  "--color-status-success-strong": semanticColorsDark["status-success-strong"],
   "--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-error-muted": semanticColorsDark["status-error-muted"],
+  "--color-status-error-strong": semanticColorsDark["status-error-strong"],
   "--color-status-warning": semanticColorsDark["status-warning"],
   "--color-status-warning-subtle": semanticColorsDark["status-warning-subtle"],
+  "--color-status-warning-muted": semanticColorsDark["status-warning-muted"],
+  "--color-status-warning-strong": semanticColorsDark["status-warning-strong"],
   "--color-status-info": semanticColorsDark["status-info"],
   "--color-status-info-subtle": semanticColorsDark["status-info-subtle"],
+  "--color-status-info-muted": semanticColorsDark["status-info-muted"],
+  "--color-status-info-strong": semanticColorsDark["status-info-strong"],
   "--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-status-error-vivid-muted": semanticColorsDark["status-error-vivid-muted"],
+  "--color-status-error-vivid-strong": semanticColorsDark["status-error-vivid-strong"],
   "--color-text-primary": semanticColorsDark["text-primary"],
   "--color-text-secondary": semanticColorsDark["text-secondary"],
   "--color-text-tertiary": semanticColorsDark["text-tertiary"],
@@ -1018,6 +1151,10 @@ var darkThemeCSSVars = {
   "--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-on-status-success-subtle": semanticColorsDark["on-status-success-subtle"],
+  "--color-on-status-error-subtle": semanticColorsDark["on-status-error-subtle"],
+  "--color-on-status-warning-subtle": semanticColorsDark["on-status-warning-subtle"],
+  "--color-on-status-info-subtle": semanticColorsDark["on-status-info-subtle"],
   "--color-result-improve": semanticColorsDark["result-improve"],
   "--color-result-improve-light": semanticColorsDark["result-improve-light"],
   "--color-result-improve-dark": semanticColorsDark["result-improve-dark"],
@@ -1172,6 +1309,19 @@ function barPaper(color, flip = false) {
     boxShadow: flip ? "0 -6px 16px rgba(0,0,0,0.45)" : "inset 0 1.5px 0 rgba(255,255,255,0.22), 0 6px 16px rgba(0,0,0,0.45)"
   };
 }
+function postIt(tone = c["surface-raised"], deg = -1.5) {
+  return {
+    backgroundColor: tone,
+    backgroundImage: grainForTone(tone),
+    boxShadow: "inset 0 1px 0 rgba(255,255,255,0.12), 0 6px 14px rgba(0,0,0,0.45)",
+    transform: [{ rotate: `${deg}deg` }]
+  };
+}
+var debossLabel = {
+  textShadowColor: "rgba(255,255,255,0.11)",
+  textShadowOffset: { width: 0, height: 1 },
+  textShadowRadius: 0
+};
 
 // src/theme/color-utils.ts
 function hexToRgb(hex) {
@@ -1291,306 +1441,124 @@ function isDark(hex) {
   const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
   return hsv.v < 0.6;
 }
-var elevationSystem = {
-  // Deep inset (recessed input fields, deeply pressed buttons)
-  [-2]: {
-    name: "deep-inset",
-    colorAdjustment: 0,
-    shadowIntensity: "strong",
-    shadowStyle: "pressed",
-    description: "Deeply recessed elements (e.g., input fields, deeply pressed buttons)"
-  },
-  // Shallow inset (pressed buttons, sunken panels)
-  [-1]: {
-    name: "inset",
-    colorAdjustment: 0,
-    shadowIntensity: "medium",
-    shadowStyle: "pressed",
-    description: "Shallow inset elements (e.g., pressed buttons, sunken panels within cards)"
-  },
-  // Base level (page background, default surface)
-  [0]: {
-    name: "base",
-    colorAdjustment: 0,
-    shadowIntensity: "subtle",
-    shadowStyle: "raised",
-    description: "Base surface level (page background, default containers)"
-  },
-  // Level 1: Subtle elevation (outline cards, subtle containers)
-  [1]: {
-    name: "subtle",
-    // The whole ladder was re-spaced in TD-07.16. It used to run
-    // 0.01/0.02/0.04/0.06/0.08, where the first step was ~2 RGB values — under
-    // the perceptual floor, so level 1 existed in the type system and nowhere on
-    // screen. With drop-shadow now gated off below FLOATING_ELEVATION_MIN, TONE
-    // is the only thing separating 0-3, so every step has to actually land.
-    // Even 0.025 spacing, verified in elevation.test.ts as ΔL* > 1 per step.
-    colorAdjustment: 0.025,
-    shadowIntensity: "subtle",
-    shadowStyle: "raised",
-    description: "Subtle elevation (outline cards, subtle containers)"
-  },
-  // Level 2: Standard elevation (default cards, buttons)
-  [2]: {
-    name: "standard",
-    colorAdjustment: 0.05,
-    shadowIntensity: "medium",
-    shadowStyle: "raised",
-    description: "Standard elevation (default cards, raised buttons)"
-  },
-  // Level 3: Prominent elevation (important cards, modals)
-  [3]: {
-    name: "prominent",
-    colorAdjustment: 0.075,
-    shadowIntensity: "strong",
-    shadowStyle: "raised",
-    description: "Prominent elevation (important cards, modals, dropdowns)"
-  },
-  // Level 4: High elevation (overlays, popovers)
-  [4]: {
-    name: "high",
-    colorAdjustment: 0.1,
-    shadowIntensity: "strong",
-    shadowStyle: "raised",
-    description: "High elevation (overlays, popovers, tooltips)"
-  },
-  // Level 5: Floating (toasts, floating action buttons)
-  [5]: {
-    name: "floating",
-    colorAdjustment: 0.13,
-    shadowIntensity: "strong",
-    shadowStyle: "raised",
-    description: "Floating elevation (toasts, floating action buttons, highest z-index)"
-  }
+var FLOATING_LIFT_MIN = 4;
+var LIFT_RIM_ALPHA = { dark: 0.12, light: 0.9 };
+var AMBIENT = {
+  1: [
+    { y: 1, blur: 2, alpha: 0.35 },
+    { y: 2, blur: 6, alpha: 0.3 }
+  ],
+  2: [
+    { y: 1, blur: 2, alpha: 0.35 },
+    { y: 4, blur: 12, alpha: 0.32 }
+  ],
+  3: [
+    { y: 2, blur: 4, alpha: 0.35 },
+    { y: 8, blur: 22, alpha: 0.35 }
+  ],
+  4: [
+    { y: 1, blur: 2, alpha: 0.35 },
+    { y: 10, blur: 24, alpha: 0.3 },
+    { y: 24, blur: 48, alpha: 0.2 }
+  ],
+  5: [
+    { y: 2, blur: 4, alpha: 0.4 },
+    { y: 16, blur: 32, alpha: 0.35 },
+    { y: 32, blur: 64, alpha: 0.25 }
+  ]
 };
-function calculateRimLightColor(baseColor, level) {
-  const rgb = hexToRgb(baseColor);
-  if (!rgb) {
-    return "rgba(255, 255, 255, 0.5)";
-  }
-  const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
-  const isLight = hsv.v > 0.6;
-  const isSaturated = hsv.s > 0.3;
-  const absLevel = Math.abs(level);
-  const opacityBoost = Math.max(0, (absLevel - 1) * 0.05);
-  if (isSaturated) {
-    const rimLightValue = 0.95;
-    const rimLightRgb = hsvToRgb(hsv.h, hsv.s * 0.3, rimLightValue);
-    const baseOpacity = isLight ? 0.9 : 0.5;
-    const finalOpacity = Math.min(1, baseOpacity + opacityBoost);
-    return `rgba(${rimLightRgb.r}, ${rimLightRgb.g}, ${rimLightRgb.b}, ${finalOpacity.toFixed(2)})`;
-  } else {
-    const baseOpacity = isLight ? 0.9 : 0.12;
-    const finalOpacity = Math.min(1, baseOpacity + opacityBoost);
-    return `rgba(255, 255, 255, ${finalOpacity.toFixed(2)})`;
-  }
-}
-function calculateDarkShadowColors(surfaceColor) {
-  const rgb = hexToRgb(surfaceColor);
-  if (!rgb) {
-    return {
-      dark: "rgba(0, 0, 0, 0.3)",
-      darker: "rgba(0, 0, 0, 0.4)"
-    };
-  }
-  const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
-  const isLight = hsv.v > 0.6;
-  const isSaturated = hsv.s > 0.3;
-  if (isSaturated) {
-    const darkShadowValue = 0.15;
-    const darkShadowRgb = hsvToRgb(hsv.h, hsv.s, darkShadowValue);
-    if (isLight) {
-      return {
-        dark: `rgba(${darkShadowRgb.r}, ${darkShadowRgb.g}, ${darkShadowRgb.b}, 0.3)`,
-        darker: `rgba(${darkShadowRgb.r}, ${darkShadowRgb.g}, ${darkShadowRgb.b}, 0.4)`
-      };
-    } else {
-      return {
-        dark: `rgba(${darkShadowRgb.r}, ${darkShadowRgb.g}, ${darkShadowRgb.b}, 0.5)`,
-        darker: `rgba(${darkShadowRgb.r}, ${darkShadowRgb.g}, ${darkShadowRgb.b}, 0.6)`
-      };
-    }
-  } else {
-    if (isLight) {
-      return {
-        dark: "rgba(0, 0, 0, 0.2)",
-        darker: "rgba(0, 0, 0, 0.3)"
-      };
-    } else {
-      return {
-        dark: "rgba(0, 0, 0, 0.5)",
-        darker: "rgba(0, 0, 0, 0.6)"
-      };
-    }
-  }
-}
-function getRimLightConfig() {
-  return {
-    offset: 1,
-    // Fixed 1px for crisp rim
-    blur: 1
-    // Tight blur for crisp edge
-  };
+var AMBIENT_ALPHA_SCALE = { dark: 1, light: 0.4 };
+function ambientLayers(step, mode) {
+  const scale = AMBIENT_ALPHA_SCALE[mode];
+  return AMBIENT[step].map(
+    ({ y, blur, alpha }) => `0 ${y}px ${blur}px rgba(0,0,0,${(alpha * scale).toFixed(2)})`
+  );
 }
-function getElevationConfig(level) {
-  return elevationSystem[level];
+function liftShadow(step, mode = "dark", opts = {}) {
+  const rim = opts.rim ?? LIFT_RIM_ALPHA[mode];
+  const layers = ambientLayers(step, mode);
+  if (rim > 0) layers.unshift(`inset 0 1px 0 rgba(255,255,255,${rim.toFixed(2)})`);
+  return layers.join(", ");
 }
-var elevationSurfaceCache = /* @__PURE__ */ new Map();
-var MAX_CACHE_SIZE = 100;
-function getCacheKey(baseColor, level, theme) {
-  return `${baseColor}-${level}-${theme}`;
+function liftStyle(step, mode = "dark", opts = {}) {
+  const deepest = AMBIENT[step][AMBIENT[step].length - 1];
+  return Platform.select({
+    web: { boxShadow: liftShadow(step, mode, opts) },
+    default: {
+      shadowColor: "#000",
+      shadowOffset: { width: 0, height: Math.round(deepest.y / 2) },
+      shadowOpacity: deepest.alpha * AMBIENT_ALPHA_SCALE[mode],
+      shadowRadius: deepest.blur / 2,
+      elevation: step
+    }
+  });
 }
-function calculateElevationSurface(baseColor, level, theme) {
-  const config = elevationSystem[level];
-  if (config.colorAdjustment === 0) {
-    return baseColor;
-  }
-  if (level < 0) {
-    return baseColor;
-  }
-  return lighten(baseColor, config.colorAdjustment);
+
+// src/theme/surface-planes.ts
+var SURFACE_LEVEL_TOKEN = {
+  frame: "background-frame",
+  background: "background-base",
+  base: "surface-base",
+  elevated: "surface-elevated",
+  raised: "surface-raised",
+  overlay: "surface-overlay"
+};
+var PLANE_ORDER = [
+  "frame",
+  "background",
+  "base",
+  "elevated",
+  "raised",
+  "overlay"
+];
+function surfaceBackground(level, mode) {
+  return getSemanticColors(mode)[SURFACE_LEVEL_TOKEN[level]];
 }
-function getElevationSurface(baseColor, level, theme) {
-  const cacheKey = getCacheKey(baseColor, level, theme);
-  if (elevationSurfaceCache.has(cacheKey)) {
-    return elevationSurfaceCache.get(cacheKey);
-  }
-  const result = calculateElevationSurface(baseColor, level);
-  if (elevationSurfaceCache.size >= MAX_CACHE_SIZE) {
-    const firstKey = elevationSurfaceCache.keys().next().value;
-    elevationSurfaceCache.delete(firstKey);
-  }
-  elevationSurfaceCache.set(cacheKey, result);
-  return result;
+function stepPlane(from, delta) {
+  const index = PLANE_ORDER.indexOf(from);
+  const clamped = Math.min(PLANE_ORDER.length - 1, Math.max(0, index + delta));
+  return PLANE_ORDER[clamped];
 }
-var elevationShadowCache = /* @__PURE__ */ new Map();
-var MAX_SHADOW_CACHE_SIZE = 50;
-function getShadowCacheKey(baseColor, level, theme, isHovered) {
-  return `${baseColor}-${level}-${theme}-${isHovered}`;
+function pressedLevel(parent) {
+  return stepPlane(parent, -1);
 }
-function calculateElevationShadow(baseColor, level, theme, isHovered = false) {
-  const config = elevationSystem[level];
-  if (level === 0) {
-    return {};
-  }
-  const elevatedSurfaceColor = calculateElevationSurface(baseColor, level);
-  const rimLightColor = calculateRimLightColor(baseColor, level);
-  const darkShadowColors = calculateDarkShadowColors(elevatedSurfaceColor);
-  const intensityConfig = {
-    subtle: { offset: 1, blur: 2 },
-    medium: { offset: 2, blur: 4 },
-    strong: { offset: 2, blur: 5 }
-  };
-  const { offset, blur } = intensityConfig[config.shadowIntensity];
-  const rimConfig = getRimLightConfig();
-  if (config.shadowStyle === "pressed") {
-    if (isHovered) {
-      const hoverOffset = Math.max(1, Math.round(offset / 2));
-      const hoverBlur = Math.max(1, Math.round(blur / 2));
-      return Platform.select({
-        web: {
-          boxShadow: `inset ${hoverOffset}px ${hoverOffset}px ${hoverBlur}px ${darkShadowColors.darker}, inset -${rimConfig.offset}px -${rimConfig.offset}px ${rimConfig.blur}px ${rimLightColor}`
-        },
-        default: {
-          shadowOpacity: 0,
-          elevation: 0
-        }
-      });
-    }
-    return Platform.select({
-      web: {
-        boxShadow: `inset ${offset}px ${offset}px ${blur}px ${darkShadowColors.darker}, inset -${rimConfig.offset}px -${rimConfig.offset}px ${rimConfig.blur}px ${rimLightColor}`
-      },
-      default: {
-        shadowOpacity: 0,
-        elevation: 0
-      }
-    });
-  } else {
-    if (isHovered) {
-      const hoverOffset = Math.max(1, Math.round(offset / 2));
-      const hoverBlur = Math.max(1, Math.round(blur / 2));
-      return Platform.select({
-        web: {
-          boxShadow: `${hoverOffset}px ${hoverOffset}px ${hoverBlur}px ${darkShadowColors.dark}, -${rimConfig.offset}px -${rimConfig.offset}px ${rimConfig.blur}px ${rimLightColor}`
-        },
-        default: {
-          shadowColor: "#000",
-          shadowOffset: { width: hoverOffset, height: hoverOffset },
-          shadowOpacity: 0.2,
-          shadowRadius: hoverBlur / 2,
-          elevation: hoverOffset
-        }
-      });
-    }
-    return Platform.select({
-      web: {
-        boxShadow: `${offset}px ${offset}px ${blur}px ${darkShadowColors.dark}, -${rimConfig.offset}px -${rimConfig.offset}px ${rimConfig.blur}px ${rimLightColor}`
-      },
-      default: {
-        shadowColor: "#000",
-        shadowOffset: { width: offset, height: offset },
-        shadowOpacity: 0.3,
-        shadowRadius: blur / 2,
-        elevation: offset
-      }
-    });
-  }
-}
-var FLOATING_ELEVATION_MIN = 4;
-function getElevationShadow(baseColor, level, theme, isHovered = false) {
-  const cacheKey = getShadowCacheKey(baseColor, level, theme, isHovered);
-  if (elevationShadowCache.has(cacheKey)) {
-    return elevationShadowCache.get(cacheKey);
-  }
-  const result = level > 0 && level < FLOATING_ELEVATION_MIN ? {} : calculateElevationShadow(baseColor, level, theme, isHovered);
-  if (elevationShadowCache.size >= MAX_SHADOW_CACHE_SIZE) {
-    const firstKey = elevationShadowCache.keys().next().value;
-    elevationShadowCache.delete(firstKey);
-  }
-  elevationShadowCache.set(cacheKey, result);
-  return result;
+function raisedLevel(parent, steps) {
+  return stepPlane(parent, Math.max(0, steps));
 }
+
+// src/theme/elevation.ts
+var ELEVATION_PLANE = {
+  [-2]: "frame",
+  [-1]: "background",
+  [0]: "base",
+  [1]: "elevated",
+  [2]: "raised",
+  [3]: "overlay",
+  [4]: "overlay",
+  [5]: "overlay"
+};
+var FLOATING_ELEVATION_MIN = FLOATING_LIFT_MIN;
 var PRESSED_ELEVATION_LEVEL = -1;
-function getPressedRecessShadow(fillColor, theme) {
-  return getElevationShadow(fillColor, PRESSED_ELEVATION_LEVEL, theme);
+function elevationPlane(level) {
+  return ELEVATION_PLANE[level];
 }
-function getBaseSurfaceColor(theme) {
-  return theme === "light" ? semanticColorsLight["surface-raised"] : semanticColorsDark["surface-elevated"];
+function getElevationSurface(level, mode = "dark") {
+  return surfaceBackground(ELEVATION_PLANE[level], mode);
 }
-var componentElevationRanges = {
-  button: {
-    allowed: [2],
-    default: 2,
-    hover: 3
-  },
-  card: {
-    allowed: [1, 2, 3],
-    default: 2,
-    hover: 3
-  },
-  input: {
-    allowed: [-2, -1, 0],
-    default: -1
-  },
-  overlay: {
-    allowed: [4, 5],
-    default: 4
-  }
-};
-function getValidatedElevation(component, requested) {
-  const range = componentElevationRanges[component];
-  if (range.allowed.includes(requested)) {
-    return requested;
-  }
-  const sorted = [...range.allowed].sort((a, b) => a - b);
-  if (requested < sorted[0]) return sorted[0];
-  if (requested > sorted[sorted.length - 1]) return sorted[sorted.length - 1];
-  return sorted.reduce(
-    (prev, curr) => Math.abs(curr - requested) < Math.abs(prev - requested) ? curr : prev
-  );
+function getPressedRecessShadow(fillColor, _mode = "dark") {
+  const { boxShadow } = insetWell(fillColor);
+  return Platform.select({
+    web: { boxShadow },
+    default: {}
+  });
+}
+function getElevationShadow(level, mode = "dark", opts = {}) {
+  if (level < 0) return getPressedRecessShadow(getElevationSurface(level, mode), mode);
+  if (level === 0) return {};
+  return liftStyle(level, mode, opts);
 }
 var glowConfig = {
+  tight: { blur: 4, spread: 0, opacity: 0.4 },
   subtle: { blur: 12, spread: 0, opacity: 0.25 },
   medium: { blur: 20, spread: 2, opacity: 0.4 },
   strong: { blur: 30, spread: 4, opacity: 0.55 }
@@ -1837,7 +1805,7 @@ var audiobookPreset = {
       "interactive-focus": "rgba(255, 255, 255, 0.12)",
       "interactive-active": "rgba(255, 255, 255, 0.16)",
       "interactive-selected": "rgba(255, 255, 255, 0.08)",
-      "divider": "rgba(255, 255, 255, 0.06)",
+      divider: "rgba(255, 255, 255, 0.06)",
       // Glow RGB values for shadow utilities
       "brand-primary-rgb": "212, 120, 42",
       "brand-secondary-rgb": "58, 155, 138",
@@ -1885,6 +1853,6 @@ function ThemeProvider({
   return /* @__PURE__ */ jsx(SurfaceContext.Provider, { value: { mode: resolved, level: "base" }, children: /* @__PURE__ */ jsx(View, { style: [MODE_VARS[resolved], { flex: 1 }, style], ...props, children }) });
 }
 
-export { CATEGORICAL_CVD_SAFE_MAX, FLOATING_ELEVATION_MIN, PRESSED_ELEVATION_LEVEL, SURFACE_PLANE_STEPS, ThemeProvider, applyThemePreset, audiobookPreset, barPaper, bestTextColor, buttonSizes, categoricalPalette, componentElevationRanges, darkThemeCSSVars, darken, defaultPreset, discreteRainbow, divergingScale, elevationSystem, getBaseSurfaceColor, getCategoricalColor, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getGlowShadow, getHoverColors, getPressedRecessShadow, getSemanticColors, getThemeCSSVars, getValidatedElevation, gluestackConfig, grainForTone, grainOpacityForTone, greyRamp, hexToRgb, hsvToRgb, insetWell, isCssPropertyManifest, isDark, lightThemeCSSVars, lighten, linearGradient, paperSheet, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveRamps, primitiveSpacing, primitiveTypography, primitiveZIndex, resolveColor, rgbToHex, rgbToHsv, semanticColorsDark, semanticColorsLight, semanticTypography, sequentialEffort, surfaceGradient, validateCssPropertyManifest };
+export { CATEGORICAL_CVD_SAFE_MAX, ELEVATION_PLANE, FLOATING_ELEVATION_MIN, FLOATING_LIFT_MIN, LIFT_RIM_ALPHA, PLANE_ORDER, PRESSED_ELEVATION_LEVEL, SURFACE_LEVEL_TOKEN, SURFACE_PLANE_STEPS, ThemeProvider, alertRedVivid, applyThemePreset, audiobookPreset, barPaper, bestTextColor, buttonSizes, categoricalPalette, darkThemeCSSVars, darken, debossLabel, defaultPreset, discreteRainbow, divergingScale, elevationPlane, getCategoricalColor, getDiscreteRainbowColor, getElevationShadow, getElevationSurface, getGlowShadow, getHoverColors, getPressedRecessShadow, getSemanticColors, getThemeCSSVars, gluestackConfig, grainForTone, grainOpacityForTone, greyRamp, hexToRgb, hsvToRgb, insetWell, isCssPropertyManifest, isDark, liftShadow, liftStyle, lightThemeCSSVars, lighten, linearGradient, paperSheet, postIt, pressedLevel, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveRamps, primitiveSpacing, primitiveTypography, primitiveZIndex, raisedLevel, resolveColor, resultPaletteColors, rgbToHex, rgbToHsv, semanticColorsDark, semanticColorsLight, semanticPins, semanticTypography, sequentialEffort, surfaceBackground, surfaceGradient, validateCssPropertyManifest };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map