@titan-design/react-ui 0.13.0 → 0.14.0

package/dist/theme/index.d.mts

@@ -1,5 +1,5 @@
 import { ThemeMode, getSemanticColors } from './tokens.mjs';
-export { CATEGORICAL_CVD_SAFE_MAX, CategoricalVariant, SURFACE_PLANE_STEPS, alertRedVivid, bestTextColor, buttonSizes, categoricalPalette, discreteRainbow, divergingScale, getCategoricalColor, getDiscreteRainbowColor, greyRamp, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveRamps, primitiveSpacing, primitiveTypography, primitiveZIndex, semanticColorsDark, semanticColorsLight, semanticTypography, sequentialEffort } from './tokens.mjs';
+export { CATEGORICAL_CVD_SAFE_MAX, CategoricalVariant, SURFACE_PLANE_STEPS, alertRedVivid, bestTextColor, buttonSizes, categoricalPalette, discreteRainbow, divergingScale, getCategoricalColor, getDiscreteRainbowColor, greyRamp, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveRamps, primitiveSpacing, primitiveTypography, primitiveZIndex, resultPaletteColors, semanticColorsDark, semanticColorsLight, semanticPins, semanticTypography, sequentialEffort } from './tokens.mjs';
 import { ViewStyle, TextStyle, ViewProps } from 'react-native';
 
 /**
@@ -175,6 +175,8 @@ declare const lightThemeCSSVars: {
     readonly '--color-brand-secondary-strong': "rgba(48, 123, 155, 0.50)";
     readonly '--color-on-brand-primary': "#FFFFFF";
     readonly '--color-on-brand-secondary': "#FFFFFF";
+    readonly '--color-on-brand-primary-subtle': "#FF7900";
+    readonly '--color-on-brand-secondary-subtle': "#307B9B";
     readonly '--color-status-success': "#2ED573";
     readonly '--color-status-success-subtle': "#E3FFEE";
     readonly '--color-status-success-muted': "rgba(46, 213, 115, 0.30)";
@@ -236,6 +238,10 @@ declare const lightThemeCSSVars: {
     readonly '--color-on-status-error': "#FFFFFF";
     readonly '--color-on-status-warning': "#FFFFFF";
     readonly '--color-on-status-info': "#FFFFFF";
+    readonly '--color-on-status-success-subtle': "#2ED573";
+    readonly '--color-on-status-error-subtle': "#D14343";
+    readonly '--color-on-status-warning-subtle': "#F9B415";
+    readonly '--color-on-status-info-subtle': "#2196F3";
     readonly '--color-result-improve': "#4caf50";
     readonly '--color-result-improve-light': "rgba(76, 175, 80, 0.12)";
     readonly '--color-result-improve-dark': "#248a24";
@@ -300,11 +306,13 @@ declare const darkThemeCSSVars: {
     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-brand-secondary-subtle': "rgba(34, 211, 238, 0.12)";
     readonly '--color-brand-secondary-muted': "rgba(48, 123, 155, 0.30)";
     readonly '--color-brand-secondary-strong': "rgba(48, 123, 155, 0.50)";
     readonly '--color-on-brand-primary': "#FFFFFF";
     readonly '--color-on-brand-secondary': "#FFFFFF";
+    readonly '--color-on-brand-primary-subtle': "#FF7900";
+    readonly '--color-on-brand-secondary-subtle': "#22D3EE";
     readonly '--color-status-success': "#2ED573";
     readonly '--color-status-success-subtle': "rgba(46, 213, 115, 0.12)";
     readonly '--color-status-success-muted': "rgba(46, 213, 115, 0.30)";
@@ -312,7 +320,7 @@ declare const darkThemeCSSVars: {
     readonly '--color-status-live': "#2ED573";
     readonly '--color-status-live-muted': "#22A444";
     readonly '--color-status-error': "#D14343";
-    readonly '--color-status-error-subtle': "rgba(209, 67, 67, 0.12)";
+    readonly '--color-status-error-subtle': "rgba(247, 113, 117, 0.08)";
     readonly '--color-status-error-muted': "rgba(209, 67, 67, 0.30)";
     readonly '--color-status-error-strong': "rgba(209, 67, 67, 0.50)";
     readonly '--color-status-warning': "#F9B415";
@@ -320,7 +328,7 @@ declare const darkThemeCSSVars: {
     readonly '--color-status-warning-muted': "rgba(249, 180, 21, 0.30)";
     readonly '--color-status-warning-strong': "rgba(249, 180, 21, 0.50)";
     readonly '--color-status-info': "#2196F3";
-    readonly '--color-status-info-subtle': "rgba(33, 150, 243, 0.12)";
+    readonly '--color-status-info-subtle': "rgba(120, 194, 255, 0.12)";
     readonly '--color-status-info-muted': "rgba(33, 150, 243, 0.30)";
     readonly '--color-status-info-strong': "rgba(33, 150, 243, 0.50)";
     readonly '--color-status-error-vivid': "#FF4757";
@@ -366,6 +374,10 @@ declare const darkThemeCSSVars: {
     readonly '--color-on-status-error': "#FFFFFF";
     readonly '--color-on-status-warning': "#FFFFFF";
     readonly '--color-on-status-info': "#FFFFFF";
+    readonly '--color-on-status-success-subtle': "#2ED573";
+    readonly '--color-on-status-error-subtle': "#F77175";
+    readonly '--color-on-status-warning-subtle': "#F9B415";
+    readonly '--color-on-status-info-subtle': "#78C2FF";
     readonly '--color-result-improve': "#4caf50";
     readonly '--color-result-improve-light': "rgba(76, 175, 80, 0.16)";
     readonly '--color-result-improve-dark': "#248a24";
@@ -435,6 +447,8 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-brand-secondary-strong': "rgba(48, 123, 155, 0.50)";
     readonly '--color-on-brand-primary': "#FFFFFF";
     readonly '--color-on-brand-secondary': "#FFFFFF";
+    readonly '--color-on-brand-primary-subtle': "#FF7900";
+    readonly '--color-on-brand-secondary-subtle': "#307B9B";
     readonly '--color-status-success': "#2ED573";
     readonly '--color-status-success-subtle': "#E3FFEE";
     readonly '--color-status-success-muted': "rgba(46, 213, 115, 0.30)";
@@ -496,6 +510,10 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-on-status-error': "#FFFFFF";
     readonly '--color-on-status-warning': "#FFFFFF";
     readonly '--color-on-status-info': "#FFFFFF";
+    readonly '--color-on-status-success-subtle': "#2ED573";
+    readonly '--color-on-status-error-subtle': "#D14343";
+    readonly '--color-on-status-warning-subtle': "#F9B415";
+    readonly '--color-on-status-info-subtle': "#2196F3";
     readonly '--color-result-improve': "#4caf50";
     readonly '--color-result-improve-light': "rgba(76, 175, 80, 0.12)";
     readonly '--color-result-improve-dark': "#248a24";
@@ -559,11 +577,13 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     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-brand-secondary-subtle': "rgba(34, 211, 238, 0.12)";
     readonly '--color-brand-secondary-muted': "rgba(48, 123, 155, 0.30)";
     readonly '--color-brand-secondary-strong': "rgba(48, 123, 155, 0.50)";
     readonly '--color-on-brand-primary': "#FFFFFF";
     readonly '--color-on-brand-secondary': "#FFFFFF";
+    readonly '--color-on-brand-primary-subtle': "#FF7900";
+    readonly '--color-on-brand-secondary-subtle': "#22D3EE";
     readonly '--color-status-success': "#2ED573";
     readonly '--color-status-success-subtle': "rgba(46, 213, 115, 0.12)";
     readonly '--color-status-success-muted': "rgba(46, 213, 115, 0.30)";
@@ -571,7 +591,7 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-status-live': "#2ED573";
     readonly '--color-status-live-muted': "#22A444";
     readonly '--color-status-error': "#D14343";
-    readonly '--color-status-error-subtle': "rgba(209, 67, 67, 0.12)";
+    readonly '--color-status-error-subtle': "rgba(247, 113, 117, 0.08)";
     readonly '--color-status-error-muted': "rgba(209, 67, 67, 0.30)";
     readonly '--color-status-error-strong': "rgba(209, 67, 67, 0.50)";
     readonly '--color-status-warning': "#F9B415";
@@ -579,7 +599,7 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-status-warning-muted': "rgba(249, 180, 21, 0.30)";
     readonly '--color-status-warning-strong': "rgba(249, 180, 21, 0.50)";
     readonly '--color-status-info': "#2196F3";
-    readonly '--color-status-info-subtle': "rgba(33, 150, 243, 0.12)";
+    readonly '--color-status-info-subtle': "rgba(120, 194, 255, 0.12)";
     readonly '--color-status-info-muted': "rgba(33, 150, 243, 0.30)";
     readonly '--color-status-info-strong': "rgba(33, 150, 243, 0.50)";
     readonly '--color-status-error-vivid': "#FF4757";
@@ -625,6 +645,10 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-on-status-error': "#FFFFFF";
     readonly '--color-on-status-warning': "#FFFFFF";
     readonly '--color-on-status-info': "#FFFFFF";
+    readonly '--color-on-status-success-subtle': "#2ED573";
+    readonly '--color-on-status-error-subtle': "#F77175";
+    readonly '--color-on-status-warning-subtle': "#F9B415";
+    readonly '--color-on-status-info-subtle': "#78C2FF";
     readonly '--color-result-improve': "#4caf50";
     readonly '--color-result-improve-light': "rgba(76, 175, 80, 0.16)";
     readonly '--color-result-improve-dark': "#248a24";

package/dist/theme/index.d.ts

@@ -1,5 +1,5 @@
 import { ThemeMode, getSemanticColors } from './tokens.js';
-export { CATEGORICAL_CVD_SAFE_MAX, CategoricalVariant, SURFACE_PLANE_STEPS, alertRedVivid, bestTextColor, buttonSizes, categoricalPalette, discreteRainbow, divergingScale, getCategoricalColor, getDiscreteRainbowColor, greyRamp, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveRamps, primitiveSpacing, primitiveTypography, primitiveZIndex, semanticColorsDark, semanticColorsLight, semanticTypography, sequentialEffort } from './tokens.js';
+export { CATEGORICAL_CVD_SAFE_MAX, CategoricalVariant, SURFACE_PLANE_STEPS, alertRedVivid, bestTextColor, buttonSizes, categoricalPalette, discreteRainbow, divergingScale, getCategoricalColor, getDiscreteRainbowColor, greyRamp, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveRamps, primitiveSpacing, primitiveTypography, primitiveZIndex, resultPaletteColors, semanticColorsDark, semanticColorsLight, semanticPins, semanticTypography, sequentialEffort } from './tokens.js';
 import { ViewStyle, TextStyle, ViewProps } from 'react-native';
 
 /**
@@ -175,6 +175,8 @@ declare const lightThemeCSSVars: {
     readonly '--color-brand-secondary-strong': "rgba(48, 123, 155, 0.50)";
     readonly '--color-on-brand-primary': "#FFFFFF";
     readonly '--color-on-brand-secondary': "#FFFFFF";
+    readonly '--color-on-brand-primary-subtle': "#FF7900";
+    readonly '--color-on-brand-secondary-subtle': "#307B9B";
     readonly '--color-status-success': "#2ED573";
     readonly '--color-status-success-subtle': "#E3FFEE";
     readonly '--color-status-success-muted': "rgba(46, 213, 115, 0.30)";
@@ -236,6 +238,10 @@ declare const lightThemeCSSVars: {
     readonly '--color-on-status-error': "#FFFFFF";
     readonly '--color-on-status-warning': "#FFFFFF";
     readonly '--color-on-status-info': "#FFFFFF";
+    readonly '--color-on-status-success-subtle': "#2ED573";
+    readonly '--color-on-status-error-subtle': "#D14343";
+    readonly '--color-on-status-warning-subtle': "#F9B415";
+    readonly '--color-on-status-info-subtle': "#2196F3";
     readonly '--color-result-improve': "#4caf50";
     readonly '--color-result-improve-light': "rgba(76, 175, 80, 0.12)";
     readonly '--color-result-improve-dark': "#248a24";
@@ -300,11 +306,13 @@ declare const darkThemeCSSVars: {
     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-brand-secondary-subtle': "rgba(34, 211, 238, 0.12)";
     readonly '--color-brand-secondary-muted': "rgba(48, 123, 155, 0.30)";
     readonly '--color-brand-secondary-strong': "rgba(48, 123, 155, 0.50)";
     readonly '--color-on-brand-primary': "#FFFFFF";
     readonly '--color-on-brand-secondary': "#FFFFFF";
+    readonly '--color-on-brand-primary-subtle': "#FF7900";
+    readonly '--color-on-brand-secondary-subtle': "#22D3EE";
     readonly '--color-status-success': "#2ED573";
     readonly '--color-status-success-subtle': "rgba(46, 213, 115, 0.12)";
     readonly '--color-status-success-muted': "rgba(46, 213, 115, 0.30)";
@@ -312,7 +320,7 @@ declare const darkThemeCSSVars: {
     readonly '--color-status-live': "#2ED573";
     readonly '--color-status-live-muted': "#22A444";
     readonly '--color-status-error': "#D14343";
-    readonly '--color-status-error-subtle': "rgba(209, 67, 67, 0.12)";
+    readonly '--color-status-error-subtle': "rgba(247, 113, 117, 0.08)";
     readonly '--color-status-error-muted': "rgba(209, 67, 67, 0.30)";
     readonly '--color-status-error-strong': "rgba(209, 67, 67, 0.50)";
     readonly '--color-status-warning': "#F9B415";
@@ -320,7 +328,7 @@ declare const darkThemeCSSVars: {
     readonly '--color-status-warning-muted': "rgba(249, 180, 21, 0.30)";
     readonly '--color-status-warning-strong': "rgba(249, 180, 21, 0.50)";
     readonly '--color-status-info': "#2196F3";
-    readonly '--color-status-info-subtle': "rgba(33, 150, 243, 0.12)";
+    readonly '--color-status-info-subtle': "rgba(120, 194, 255, 0.12)";
     readonly '--color-status-info-muted': "rgba(33, 150, 243, 0.30)";
     readonly '--color-status-info-strong': "rgba(33, 150, 243, 0.50)";
     readonly '--color-status-error-vivid': "#FF4757";
@@ -366,6 +374,10 @@ declare const darkThemeCSSVars: {
     readonly '--color-on-status-error': "#FFFFFF";
     readonly '--color-on-status-warning': "#FFFFFF";
     readonly '--color-on-status-info': "#FFFFFF";
+    readonly '--color-on-status-success-subtle': "#2ED573";
+    readonly '--color-on-status-error-subtle': "#F77175";
+    readonly '--color-on-status-warning-subtle': "#F9B415";
+    readonly '--color-on-status-info-subtle': "#78C2FF";
     readonly '--color-result-improve': "#4caf50";
     readonly '--color-result-improve-light': "rgba(76, 175, 80, 0.16)";
     readonly '--color-result-improve-dark': "#248a24";
@@ -435,6 +447,8 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-brand-secondary-strong': "rgba(48, 123, 155, 0.50)";
     readonly '--color-on-brand-primary': "#FFFFFF";
     readonly '--color-on-brand-secondary': "#FFFFFF";
+    readonly '--color-on-brand-primary-subtle': "#FF7900";
+    readonly '--color-on-brand-secondary-subtle': "#307B9B";
     readonly '--color-status-success': "#2ED573";
     readonly '--color-status-success-subtle': "#E3FFEE";
     readonly '--color-status-success-muted': "rgba(46, 213, 115, 0.30)";
@@ -496,6 +510,10 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-on-status-error': "#FFFFFF";
     readonly '--color-on-status-warning': "#FFFFFF";
     readonly '--color-on-status-info': "#FFFFFF";
+    readonly '--color-on-status-success-subtle': "#2ED573";
+    readonly '--color-on-status-error-subtle': "#D14343";
+    readonly '--color-on-status-warning-subtle': "#F9B415";
+    readonly '--color-on-status-info-subtle': "#2196F3";
     readonly '--color-result-improve': "#4caf50";
     readonly '--color-result-improve-light': "rgba(76, 175, 80, 0.12)";
     readonly '--color-result-improve-dark': "#248a24";
@@ -559,11 +577,13 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     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-brand-secondary-subtle': "rgba(34, 211, 238, 0.12)";
     readonly '--color-brand-secondary-muted': "rgba(48, 123, 155, 0.30)";
     readonly '--color-brand-secondary-strong': "rgba(48, 123, 155, 0.50)";
     readonly '--color-on-brand-primary': "#FFFFFF";
     readonly '--color-on-brand-secondary': "#FFFFFF";
+    readonly '--color-on-brand-primary-subtle': "#FF7900";
+    readonly '--color-on-brand-secondary-subtle': "#22D3EE";
     readonly '--color-status-success': "#2ED573";
     readonly '--color-status-success-subtle': "rgba(46, 213, 115, 0.12)";
     readonly '--color-status-success-muted': "rgba(46, 213, 115, 0.30)";
@@ -571,7 +591,7 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-status-live': "#2ED573";
     readonly '--color-status-live-muted': "#22A444";
     readonly '--color-status-error': "#D14343";
-    readonly '--color-status-error-subtle': "rgba(209, 67, 67, 0.12)";
+    readonly '--color-status-error-subtle': "rgba(247, 113, 117, 0.08)";
     readonly '--color-status-error-muted': "rgba(209, 67, 67, 0.30)";
     readonly '--color-status-error-strong': "rgba(209, 67, 67, 0.50)";
     readonly '--color-status-warning': "#F9B415";
@@ -579,7 +599,7 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-status-warning-muted': "rgba(249, 180, 21, 0.30)";
     readonly '--color-status-warning-strong': "rgba(249, 180, 21, 0.50)";
     readonly '--color-status-info': "#2196F3";
-    readonly '--color-status-info-subtle': "rgba(33, 150, 243, 0.12)";
+    readonly '--color-status-info-subtle': "rgba(120, 194, 255, 0.12)";
     readonly '--color-status-info-muted': "rgba(33, 150, 243, 0.30)";
     readonly '--color-status-info-strong': "rgba(33, 150, 243, 0.50)";
     readonly '--color-status-error-vivid': "#FF4757";
@@ -625,6 +645,10 @@ declare function getThemeCSSVars(mode: ThemeMode): {
     readonly '--color-on-status-error': "#FFFFFF";
     readonly '--color-on-status-warning': "#FFFFFF";
     readonly '--color-on-status-info': "#FFFFFF";
+    readonly '--color-on-status-success-subtle': "#2ED573";
+    readonly '--color-on-status-error-subtle': "#F77175";
+    readonly '--color-on-status-warning-subtle': "#F9B415";
+    readonly '--color-on-status-info-subtle': "#78C2FF";
     readonly '--color-result-improve': "#4caf50";
     readonly '--color-result-improve-light': "rgba(76, 175, 80, 0.16)";
     readonly '--color-result-improve-dark': "#248a24";

package/dist/theme/index.js

@@ -12,6 +12,26 @@ var primitiveColors = {
   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
@@ -444,6 +464,12 @@ var semanticColorsLight = {
   // 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],
@@ -479,21 +505,26 @@ var semanticColorsLight = {
   "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],
@@ -525,8 +556,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,
@@ -542,7 +573,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
@@ -573,7 +604,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
@@ -591,7 +622,7 @@ var semanticColorsDark = {
   "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],
@@ -599,6 +630,14 @@ var semanticColorsDark = {
   // 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],
@@ -612,7 +651,10 @@ var semanticColorsDark = {
   "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)",
+  // 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,
@@ -630,7 +672,7 @@ var semanticColorsDark = {
   "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
@@ -638,14 +680,22 @@ var semanticColorsDark = {
   "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
@@ -676,7 +726,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
@@ -726,10 +776,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
@@ -921,6 +971,8 @@ var lightThemeCSSVars = {
   "--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"],
@@ -982,6 +1034,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"],
@@ -1034,6 +1090,8 @@ var darkThemeCSSVars = {
   "--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"],
@@ -1095,6 +1153,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"],
@@ -1852,10 +1914,12 @@ exports.primitiveTypography = primitiveTypography;
 exports.primitiveZIndex = primitiveZIndex;
 exports.raisedLevel = raisedLevel;
 exports.resolveColor = resolveColor;
+exports.resultPaletteColors = resultPaletteColors;
 exports.rgbToHex = rgbToHex;
 exports.rgbToHsv = rgbToHsv;
 exports.semanticColorsDark = semanticColorsDark;
 exports.semanticColorsLight = semanticColorsLight;
+exports.semanticPins = semanticPins;
 exports.semanticTypography = semanticTypography;
 exports.sequentialEffort = sequentialEffort;
 exports.surfaceBackground = surfaceBackground;