npm - @titan-design/react-ui - Versions diffs - 0.12.1 → 0.14.0 - Mend

@titan-design/react-ui 0.12.1 → 0.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (531) hide show

package/dist/theme/tokens.d.mts CHANGED Viewed

@@ -47,38 +47,58 @@ declare const semanticColorsLight: {
     readonly 'brand-primary-light': "#FFA063";
     readonly 'brand-primary-dark': "#DA5F00";
     readonly 'brand-primary-subtle': "rgba(255, 121, 0, 0.08)";
+    readonly 'brand-primary-muted': "rgba(255, 121, 0, 0.30)";
+    readonly 'brand-primary-strong': "rgba(255, 121, 0, 0.50)";
     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-muted': "rgba(48, 123, 155, 0.30)";
+    readonly 'brand-secondary-strong': "rgba(48, 123, 155, 0.50)";
     readonly 'brand-secondary-hover': "#2A617F";
     readonly 'brand-secondary-active': "#22465F";
     readonly 'on-brand-primary': "#FFFFFF";
     readonly 'on-brand-secondary': "#FFFFFF";
+    readonly 'on-brand-primary-subtle': "#FF7900";
+    readonly 'on-brand-secondary-subtle': "#307B9B";
     readonly 'status-success': "#2ED573";
     readonly 'status-success-light': "#58F69E";
     readonly 'status-success-dark': "#298732";
     readonly 'status-success-subtle': "#E3FFEE";
+    readonly 'status-success-muted': "rgba(46, 213, 115, 0.30)";
+    readonly 'status-success-strong': "rgba(46, 213, 115, 0.50)";
     readonly 'status-live': "#2ED573";
     readonly 'status-live-muted': "#22A444";
     readonly 'status-error': "#D14343";
     readonly 'status-error-light': "#E05254";
     readonly 'status-error-dark': "#A4221C";
     readonly 'status-error-subtle': "#FFF4F4";
-    readonly 'status-error-vivid': "#D14343";
+    readonly 'status-error-muted': "rgba(209, 67, 67, 0.30)";
+    readonly 'status-error-strong': "rgba(209, 67, 67, 0.50)";
+    readonly 'status-error-vivid': "#FF4757";
     readonly 'status-error-vivid-light': "#E05254";
     readonly 'status-error-vivid-dark': "#A4221C";
     readonly 'status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
+    readonly 'status-error-vivid-muted': "rgba(255, 71, 87, 0.30)";
+    readonly 'status-error-vivid-strong': "rgba(255, 71, 87, 0.50)";
     readonly 'status-warning': "#F9B415";
     readonly 'status-warning-light': "#FFD352";
     readonly 'status-warning-dark': "#C27400";
     readonly 'status-warning-subtle': "#FFF7DD";
+    readonly 'status-warning-muted': "rgba(249, 180, 21, 0.30)";
+    readonly 'status-warning-strong': "rgba(249, 180, 21, 0.50)";
     readonly 'status-info': "#2196F3";
     readonly 'status-info-light': "#78C2FF";
     readonly 'status-info-dark': "#1072CB";
     readonly 'status-info-subtle': "#EFF8FF";
+    readonly 'status-info-muted': "rgba(33, 150, 243, 0.30)";
+    readonly 'status-info-strong': "rgba(33, 150, 243, 0.50)";
+    readonly 'on-status-success-subtle': "#2ED573";
+    readonly 'on-status-error-subtle': "#D14343";
+    readonly 'on-status-warning-subtle': "#F9B415";
+    readonly 'on-status-info-subtle': "#2196F3";
     readonly 'on-status-success': "#FFFFFF";
     readonly 'on-status-error': "#FFFFFF";
     readonly 'on-status-warning': "#FFFFFF";
@@ -145,42 +165,62 @@ declare const semanticColorsDark: {
     readonly 'brand-primary-light': "#FFA063";
     readonly 'brand-primary-dark': "#DA5F00";
     readonly 'brand-primary-subtle': "rgba(255, 121, 0, 0.12)";
+    readonly 'brand-primary-muted': "rgba(255, 121, 0, 0.30)";
+    readonly 'brand-primary-strong': "rgba(255, 121, 0, 0.50)";
     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-subtle': "rgba(34, 211, 238, 0.12)";
+    readonly 'brand-secondary-muted': "rgba(48, 123, 155, 0.30)";
+    readonly 'brand-secondary-strong': "rgba(48, 123, 155, 0.50)";
     readonly 'brand-secondary-hover': "#2697B7";
     readonly 'brand-secondary-active': "#01B5D1";
     readonly 'on-brand-primary': "#FFFFFF";
     readonly 'on-brand-secondary': "#FFFFFF";
+    readonly 'on-brand-primary-subtle': "#FF7900";
+    readonly 'on-brand-secondary-subtle': "#22D3EE";
     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-success-muted': "rgba(46, 213, 115, 0.30)";
+    readonly 'status-success-strong': "rgba(46, 213, 115, 0.50)";
     readonly 'status-live': "#2ED573";
     readonly 'status-live-muted': "#22A444";
     readonly 'status-error': "#D14343";
     readonly 'status-error-light': "#E05254";
     readonly 'status-error-dark': "#A4221C";
-    readonly 'status-error-subtle': "rgba(209, 67, 67, 0.12)";
-    readonly 'status-error-vivid': "#D14343";
+    readonly 'status-error-subtle': "rgba(247, 113, 117, 0.08)";
+    readonly 'status-error-muted': "rgba(209, 67, 67, 0.30)";
+    readonly 'status-error-strong': "rgba(209, 67, 67, 0.50)";
+    readonly 'status-error-vivid': "#FF4757";
     readonly 'status-error-vivid-light': "#E05254";
     readonly 'status-error-vivid-dark': "#A4221C";
     readonly 'status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
+    readonly 'status-error-vivid-muted': "rgba(255, 71, 87, 0.30)";
+    readonly 'status-error-vivid-strong': "rgba(255, 71, 87, 0.50)";
     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-warning-muted': "rgba(249, 180, 21, 0.30)";
+    readonly 'status-warning-strong': "rgba(249, 180, 21, 0.50)";
     readonly 'status-info': "#2196F3";
     readonly 'status-info-light': "#78C2FF";
     readonly 'status-info-dark': "#1072CB";
-    readonly 'status-info-subtle': "rgba(33, 150, 243, 0.12)";
+    readonly 'status-info-subtle': "rgba(120, 194, 255, 0.12)";
+    readonly 'status-info-muted': "rgba(33, 150, 243, 0.30)";
+    readonly 'status-info-strong': "rgba(33, 150, 243, 0.50)";
     readonly 'on-status-success': "#FFFFFF";
     readonly 'on-status-error': "#FFFFFF";
     readonly 'on-status-warning': "#FFFFFF";
     readonly 'on-status-info': "#FFFFFF";
+    readonly 'on-status-success-subtle': "#2ED573";
+    readonly 'on-status-error-subtle': "#F77175";
+    readonly 'on-status-warning-subtle': "#F9B415";
+    readonly 'on-status-info-subtle': "#78C2FF";
     readonly 'result-improve': "#4caf50";
     readonly 'result-improve-light': "rgba(76, 175, 80, 0.16)";
     readonly 'result-improve-dark': "#248a24";
@@ -343,38 +383,58 @@ declare function getSemanticColors(mode: ThemeMode): {
     readonly 'brand-primary-light': "#FFA063";
     readonly 'brand-primary-dark': "#DA5F00";
     readonly 'brand-primary-subtle': "rgba(255, 121, 0, 0.08)";
+    readonly 'brand-primary-muted': "rgba(255, 121, 0, 0.30)";
+    readonly 'brand-primary-strong': "rgba(255, 121, 0, 0.50)";
     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-muted': "rgba(48, 123, 155, 0.30)";
+    readonly 'brand-secondary-strong': "rgba(48, 123, 155, 0.50)";
     readonly 'brand-secondary-hover': "#2A617F";
     readonly 'brand-secondary-active': "#22465F";
     readonly 'on-brand-primary': "#FFFFFF";
     readonly 'on-brand-secondary': "#FFFFFF";
+    readonly 'on-brand-primary-subtle': "#FF7900";
+    readonly 'on-brand-secondary-subtle': "#307B9B";
     readonly 'status-success': "#2ED573";
     readonly 'status-success-light': "#58F69E";
     readonly 'status-success-dark': "#298732";
     readonly 'status-success-subtle': "#E3FFEE";
+    readonly 'status-success-muted': "rgba(46, 213, 115, 0.30)";
+    readonly 'status-success-strong': "rgba(46, 213, 115, 0.50)";
     readonly 'status-live': "#2ED573";
     readonly 'status-live-muted': "#22A444";
     readonly 'status-error': "#D14343";
     readonly 'status-error-light': "#E05254";
     readonly 'status-error-dark': "#A4221C";
     readonly 'status-error-subtle': "#FFF4F4";
-    readonly 'status-error-vivid': "#D14343";
+    readonly 'status-error-muted': "rgba(209, 67, 67, 0.30)";
+    readonly 'status-error-strong': "rgba(209, 67, 67, 0.50)";
+    readonly 'status-error-vivid': "#FF4757";
     readonly 'status-error-vivid-light': "#E05254";
     readonly 'status-error-vivid-dark': "#A4221C";
     readonly 'status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
+    readonly 'status-error-vivid-muted': "rgba(255, 71, 87, 0.30)";
+    readonly 'status-error-vivid-strong': "rgba(255, 71, 87, 0.50)";
     readonly 'status-warning': "#F9B415";
     readonly 'status-warning-light': "#FFD352";
     readonly 'status-warning-dark': "#C27400";
     readonly 'status-warning-subtle': "#FFF7DD";
+    readonly 'status-warning-muted': "rgba(249, 180, 21, 0.30)";
+    readonly 'status-warning-strong': "rgba(249, 180, 21, 0.50)";
     readonly 'status-info': "#2196F3";
     readonly 'status-info-light': "#78C2FF";
     readonly 'status-info-dark': "#1072CB";
     readonly 'status-info-subtle': "#EFF8FF";
+    readonly 'status-info-muted': "rgba(33, 150, 243, 0.30)";
+    readonly 'status-info-strong': "rgba(33, 150, 243, 0.50)";
+    readonly 'on-status-success-subtle': "#2ED573";
+    readonly 'on-status-error-subtle': "#D14343";
+    readonly 'on-status-warning-subtle': "#F9B415";
+    readonly 'on-status-info-subtle': "#2196F3";
     readonly 'on-status-success': "#FFFFFF";
     readonly 'on-status-error': "#FFFFFF";
     readonly 'on-status-warning': "#FFFFFF";
@@ -440,42 +500,62 @@ declare function getSemanticColors(mode: ThemeMode): {
     readonly 'brand-primary-light': "#FFA063";
     readonly 'brand-primary-dark': "#DA5F00";
     readonly 'brand-primary-subtle': "rgba(255, 121, 0, 0.12)";
+    readonly 'brand-primary-muted': "rgba(255, 121, 0, 0.30)";
+    readonly 'brand-primary-strong': "rgba(255, 121, 0, 0.50)";
     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-subtle': "rgba(34, 211, 238, 0.12)";
+    readonly 'brand-secondary-muted': "rgba(48, 123, 155, 0.30)";
+    readonly 'brand-secondary-strong': "rgba(48, 123, 155, 0.50)";
     readonly 'brand-secondary-hover': "#2697B7";
     readonly 'brand-secondary-active': "#01B5D1";
     readonly 'on-brand-primary': "#FFFFFF";
     readonly 'on-brand-secondary': "#FFFFFF";
+    readonly 'on-brand-primary-subtle': "#FF7900";
+    readonly 'on-brand-secondary-subtle': "#22D3EE";
     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-success-muted': "rgba(46, 213, 115, 0.30)";
+    readonly 'status-success-strong': "rgba(46, 213, 115, 0.50)";
     readonly 'status-live': "#2ED573";
     readonly 'status-live-muted': "#22A444";
     readonly 'status-error': "#D14343";
     readonly 'status-error-light': "#E05254";
     readonly 'status-error-dark': "#A4221C";
-    readonly 'status-error-subtle': "rgba(209, 67, 67, 0.12)";
-    readonly 'status-error-vivid': "#D14343";
+    readonly 'status-error-subtle': "rgba(247, 113, 117, 0.08)";
+    readonly 'status-error-muted': "rgba(209, 67, 67, 0.30)";
+    readonly 'status-error-strong': "rgba(209, 67, 67, 0.50)";
+    readonly 'status-error-vivid': "#FF4757";
     readonly 'status-error-vivid-light': "#E05254";
     readonly 'status-error-vivid-dark': "#A4221C";
     readonly 'status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
+    readonly 'status-error-vivid-muted': "rgba(255, 71, 87, 0.30)";
+    readonly 'status-error-vivid-strong': "rgba(255, 71, 87, 0.50)";
     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-warning-muted': "rgba(249, 180, 21, 0.30)";
+    readonly 'status-warning-strong': "rgba(249, 180, 21, 0.50)";
     readonly 'status-info': "#2196F3";
     readonly 'status-info-light': "#78C2FF";
     readonly 'status-info-dark': "#1072CB";
-    readonly 'status-info-subtle': "rgba(33, 150, 243, 0.12)";
+    readonly 'status-info-subtle': "rgba(120, 194, 255, 0.12)";
+    readonly 'status-info-muted': "rgba(33, 150, 243, 0.30)";
+    readonly 'status-info-strong': "rgba(33, 150, 243, 0.50)";
     readonly 'on-status-success': "#FFFFFF";
     readonly 'on-status-error': "#FFFFFF";
     readonly 'on-status-warning': "#FFFFFF";
     readonly 'on-status-info': "#FFFFFF";
+    readonly 'on-status-success-subtle': "#2ED573";
+    readonly 'on-status-error-subtle': "#F77175";
+    readonly 'on-status-warning-subtle': "#F9B415";
+    readonly 'on-status-info-subtle': "#78C2FF";
     readonly 'result-improve': "#4caf50";
     readonly 'result-improve-light': "rgba(76, 175, 80, 0.16)";
     readonly 'result-improve-dark': "#248a24";
@@ -553,6 +633,42 @@ declare const primitiveColors: {
     readonly black: "#000000";
     readonly transparent: "transparent";
 };
+/**
+ * The vivid alert red: the one chromatic anchor outside the OKLCH ramps.
+ *
+ * It survived the TD-07.14 fold of the old `redVivid` scale only as the
+ * `-rgb`, `-subtle` and glow encodings of `status-error-vivid`, while the token
+ * itself was pinned to `red[600]` and collapsed onto `status-error`. Owning it
+ * here means the semantic layer references a primitive instead of carrying a
+ * literal. The red ramp has no step this saturated, and adding one means
+ * regenerating the ramp, so it stays a pin.
+ */
+declare const alertRedVivid: "#FF4757";
+/**
+ * Result/outcome palette anchors (VW-83): Material-style green/red/grey chosen
+ * for the result-improve/-degrade/-inconclusive tokens. No `primitiveRamps` step
+ * matches any of these exactly (the ramps are OKLCH-generated with a different
+ * hue/chroma arc), so they are pinned by name here rather than left as raw hex
+ * in semantic.ts — same pattern as {@link alertRedVivid}.
+ */
+declare const resultPaletteColors: {
+    readonly improve: "#4caf50";
+    readonly improveDark: "#248a24";
+    readonly degrade: "#ef5350";
+    readonly degradeDark: "#b30000";
+    readonly inconclusive: "#9E9A97";
+};
+/**
+ * One-off semantic literals (VW-83) with no exact `greyRamp`/`primitiveRamps`
+ * match, pinned by name instead of left as raw hex in semantic.ts.
+ */
+declare const semanticPins: {
+    readonly textPrimaryLight: "#121828";
+    readonly textSecondaryLight: "#65748B";
+    readonly backgroundBaseLight: "#EBEBEB";
+    readonly dividerLight: "#E8E9EB";
+    readonly focusIndigoDark: "#828DF8";
+};
 /**
  * Unified warm-neutral grey ramp (TD-07.14)
  *
@@ -807,6 +923,7 @@ declare const primitiveTypography: {
         readonly mono: readonly ["SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", "monospace"];
     };
     readonly fontSizes: {
+        readonly '2xs': "0.625rem";
         readonly xs: "0.75rem";
         readonly sm: "0.875rem";
         readonly base: "1rem";
@@ -901,4 +1018,4 @@ declare const primitiveZIndex: {
     readonly tooltip: 1800;
 };
-export { CATEGORICAL_CVD_SAFE_MAX, type CategoricalVariant, SURFACE_PLANE_STEPS, type ThemeMode, bestTextColor, buttonSizes, categoricalPalette, discreteRainbow, divergingScale, getCategoricalColor, getDiscreteRainbowColor, getSemanticColors, greyRamp, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveRamps, primitiveSpacing, primitiveTypography, primitiveZIndex, semanticColorsDark, semanticColorsLight, semanticTypography, sequentialEffort };
+export { CATEGORICAL_CVD_SAFE_MAX, type CategoricalVariant, SURFACE_PLANE_STEPS, type ThemeMode, alertRedVivid, bestTextColor, buttonSizes, categoricalPalette, discreteRainbow, divergingScale, getCategoricalColor, getDiscreteRainbowColor, getSemanticColors, greyRamp, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveRamps, primitiveSpacing, primitiveTypography, primitiveZIndex, resultPaletteColors, semanticColorsDark, semanticColorsLight, semanticPins, semanticTypography, sequentialEffort };

package/dist/theme/tokens.d.ts CHANGED Viewed

@@ -47,38 +47,58 @@ declare const semanticColorsLight: {
     readonly 'brand-primary-light': "#FFA063";
     readonly 'brand-primary-dark': "#DA5F00";
     readonly 'brand-primary-subtle': "rgba(255, 121, 0, 0.08)";
+    readonly 'brand-primary-muted': "rgba(255, 121, 0, 0.30)";
+    readonly 'brand-primary-strong': "rgba(255, 121, 0, 0.50)";
     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-muted': "rgba(48, 123, 155, 0.30)";
+    readonly 'brand-secondary-strong': "rgba(48, 123, 155, 0.50)";
     readonly 'brand-secondary-hover': "#2A617F";
     readonly 'brand-secondary-active': "#22465F";
     readonly 'on-brand-primary': "#FFFFFF";
     readonly 'on-brand-secondary': "#FFFFFF";
+    readonly 'on-brand-primary-subtle': "#FF7900";
+    readonly 'on-brand-secondary-subtle': "#307B9B";
     readonly 'status-success': "#2ED573";
     readonly 'status-success-light': "#58F69E";
     readonly 'status-success-dark': "#298732";
     readonly 'status-success-subtle': "#E3FFEE";
+    readonly 'status-success-muted': "rgba(46, 213, 115, 0.30)";
+    readonly 'status-success-strong': "rgba(46, 213, 115, 0.50)";
     readonly 'status-live': "#2ED573";
     readonly 'status-live-muted': "#22A444";
     readonly 'status-error': "#D14343";
     readonly 'status-error-light': "#E05254";
     readonly 'status-error-dark': "#A4221C";
     readonly 'status-error-subtle': "#FFF4F4";
-    readonly 'status-error-vivid': "#D14343";
+    readonly 'status-error-muted': "rgba(209, 67, 67, 0.30)";
+    readonly 'status-error-strong': "rgba(209, 67, 67, 0.50)";
+    readonly 'status-error-vivid': "#FF4757";
     readonly 'status-error-vivid-light': "#E05254";
     readonly 'status-error-vivid-dark': "#A4221C";
     readonly 'status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
+    readonly 'status-error-vivid-muted': "rgba(255, 71, 87, 0.30)";
+    readonly 'status-error-vivid-strong': "rgba(255, 71, 87, 0.50)";
     readonly 'status-warning': "#F9B415";
     readonly 'status-warning-light': "#FFD352";
     readonly 'status-warning-dark': "#C27400";
     readonly 'status-warning-subtle': "#FFF7DD";
+    readonly 'status-warning-muted': "rgba(249, 180, 21, 0.30)";
+    readonly 'status-warning-strong': "rgba(249, 180, 21, 0.50)";
     readonly 'status-info': "#2196F3";
     readonly 'status-info-light': "#78C2FF";
     readonly 'status-info-dark': "#1072CB";
     readonly 'status-info-subtle': "#EFF8FF";
+    readonly 'status-info-muted': "rgba(33, 150, 243, 0.30)";
+    readonly 'status-info-strong': "rgba(33, 150, 243, 0.50)";
+    readonly 'on-status-success-subtle': "#2ED573";
+    readonly 'on-status-error-subtle': "#D14343";
+    readonly 'on-status-warning-subtle': "#F9B415";
+    readonly 'on-status-info-subtle': "#2196F3";
     readonly 'on-status-success': "#FFFFFF";
     readonly 'on-status-error': "#FFFFFF";
     readonly 'on-status-warning': "#FFFFFF";
@@ -145,42 +165,62 @@ declare const semanticColorsDark: {
     readonly 'brand-primary-light': "#FFA063";
     readonly 'brand-primary-dark': "#DA5F00";
     readonly 'brand-primary-subtle': "rgba(255, 121, 0, 0.12)";
+    readonly 'brand-primary-muted': "rgba(255, 121, 0, 0.30)";
+    readonly 'brand-primary-strong': "rgba(255, 121, 0, 0.50)";
     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-subtle': "rgba(34, 211, 238, 0.12)";
+    readonly 'brand-secondary-muted': "rgba(48, 123, 155, 0.30)";
+    readonly 'brand-secondary-strong': "rgba(48, 123, 155, 0.50)";
     readonly 'brand-secondary-hover': "#2697B7";
     readonly 'brand-secondary-active': "#01B5D1";
     readonly 'on-brand-primary': "#FFFFFF";
     readonly 'on-brand-secondary': "#FFFFFF";
+    readonly 'on-brand-primary-subtle': "#FF7900";
+    readonly 'on-brand-secondary-subtle': "#22D3EE";
     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-success-muted': "rgba(46, 213, 115, 0.30)";
+    readonly 'status-success-strong': "rgba(46, 213, 115, 0.50)";
     readonly 'status-live': "#2ED573";
     readonly 'status-live-muted': "#22A444";
     readonly 'status-error': "#D14343";
     readonly 'status-error-light': "#E05254";
     readonly 'status-error-dark': "#A4221C";
-    readonly 'status-error-subtle': "rgba(209, 67, 67, 0.12)";
-    readonly 'status-error-vivid': "#D14343";
+    readonly 'status-error-subtle': "rgba(247, 113, 117, 0.08)";
+    readonly 'status-error-muted': "rgba(209, 67, 67, 0.30)";
+    readonly 'status-error-strong': "rgba(209, 67, 67, 0.50)";
+    readonly 'status-error-vivid': "#FF4757";
     readonly 'status-error-vivid-light': "#E05254";
     readonly 'status-error-vivid-dark': "#A4221C";
     readonly 'status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
+    readonly 'status-error-vivid-muted': "rgba(255, 71, 87, 0.30)";
+    readonly 'status-error-vivid-strong': "rgba(255, 71, 87, 0.50)";
     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-warning-muted': "rgba(249, 180, 21, 0.30)";
+    readonly 'status-warning-strong': "rgba(249, 180, 21, 0.50)";
     readonly 'status-info': "#2196F3";
     readonly 'status-info-light': "#78C2FF";
     readonly 'status-info-dark': "#1072CB";
-    readonly 'status-info-subtle': "rgba(33, 150, 243, 0.12)";
+    readonly 'status-info-subtle': "rgba(120, 194, 255, 0.12)";
+    readonly 'status-info-muted': "rgba(33, 150, 243, 0.30)";
+    readonly 'status-info-strong': "rgba(33, 150, 243, 0.50)";
     readonly 'on-status-success': "#FFFFFF";
     readonly 'on-status-error': "#FFFFFF";
     readonly 'on-status-warning': "#FFFFFF";
     readonly 'on-status-info': "#FFFFFF";
+    readonly 'on-status-success-subtle': "#2ED573";
+    readonly 'on-status-error-subtle': "#F77175";
+    readonly 'on-status-warning-subtle': "#F9B415";
+    readonly 'on-status-info-subtle': "#78C2FF";
     readonly 'result-improve': "#4caf50";
     readonly 'result-improve-light': "rgba(76, 175, 80, 0.16)";
     readonly 'result-improve-dark': "#248a24";
@@ -343,38 +383,58 @@ declare function getSemanticColors(mode: ThemeMode): {
     readonly 'brand-primary-light': "#FFA063";
     readonly 'brand-primary-dark': "#DA5F00";
     readonly 'brand-primary-subtle': "rgba(255, 121, 0, 0.08)";
+    readonly 'brand-primary-muted': "rgba(255, 121, 0, 0.30)";
+    readonly 'brand-primary-strong': "rgba(255, 121, 0, 0.50)";
     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-muted': "rgba(48, 123, 155, 0.30)";
+    readonly 'brand-secondary-strong': "rgba(48, 123, 155, 0.50)";
     readonly 'brand-secondary-hover': "#2A617F";
     readonly 'brand-secondary-active': "#22465F";
     readonly 'on-brand-primary': "#FFFFFF";
     readonly 'on-brand-secondary': "#FFFFFF";
+    readonly 'on-brand-primary-subtle': "#FF7900";
+    readonly 'on-brand-secondary-subtle': "#307B9B";
     readonly 'status-success': "#2ED573";
     readonly 'status-success-light': "#58F69E";
     readonly 'status-success-dark': "#298732";
     readonly 'status-success-subtle': "#E3FFEE";
+    readonly 'status-success-muted': "rgba(46, 213, 115, 0.30)";
+    readonly 'status-success-strong': "rgba(46, 213, 115, 0.50)";
     readonly 'status-live': "#2ED573";
     readonly 'status-live-muted': "#22A444";
     readonly 'status-error': "#D14343";
     readonly 'status-error-light': "#E05254";
     readonly 'status-error-dark': "#A4221C";
     readonly 'status-error-subtle': "#FFF4F4";
-    readonly 'status-error-vivid': "#D14343";
+    readonly 'status-error-muted': "rgba(209, 67, 67, 0.30)";
+    readonly 'status-error-strong': "rgba(209, 67, 67, 0.50)";
+    readonly 'status-error-vivid': "#FF4757";
     readonly 'status-error-vivid-light': "#E05254";
     readonly 'status-error-vivid-dark': "#A4221C";
     readonly 'status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
+    readonly 'status-error-vivid-muted': "rgba(255, 71, 87, 0.30)";
+    readonly 'status-error-vivid-strong': "rgba(255, 71, 87, 0.50)";
     readonly 'status-warning': "#F9B415";
     readonly 'status-warning-light': "#FFD352";
     readonly 'status-warning-dark': "#C27400";
     readonly 'status-warning-subtle': "#FFF7DD";
+    readonly 'status-warning-muted': "rgba(249, 180, 21, 0.30)";
+    readonly 'status-warning-strong': "rgba(249, 180, 21, 0.50)";
     readonly 'status-info': "#2196F3";
     readonly 'status-info-light': "#78C2FF";
     readonly 'status-info-dark': "#1072CB";
     readonly 'status-info-subtle': "#EFF8FF";
+    readonly 'status-info-muted': "rgba(33, 150, 243, 0.30)";
+    readonly 'status-info-strong': "rgba(33, 150, 243, 0.50)";
+    readonly 'on-status-success-subtle': "#2ED573";
+    readonly 'on-status-error-subtle': "#D14343";
+    readonly 'on-status-warning-subtle': "#F9B415";
+    readonly 'on-status-info-subtle': "#2196F3";
     readonly 'on-status-success': "#FFFFFF";
     readonly 'on-status-error': "#FFFFFF";
     readonly 'on-status-warning': "#FFFFFF";
@@ -440,42 +500,62 @@ declare function getSemanticColors(mode: ThemeMode): {
     readonly 'brand-primary-light': "#FFA063";
     readonly 'brand-primary-dark': "#DA5F00";
     readonly 'brand-primary-subtle': "rgba(255, 121, 0, 0.12)";
+    readonly 'brand-primary-muted': "rgba(255, 121, 0, 0.30)";
+    readonly 'brand-primary-strong': "rgba(255, 121, 0, 0.50)";
     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-subtle': "rgba(34, 211, 238, 0.12)";
+    readonly 'brand-secondary-muted': "rgba(48, 123, 155, 0.30)";
+    readonly 'brand-secondary-strong': "rgba(48, 123, 155, 0.50)";
     readonly 'brand-secondary-hover': "#2697B7";
     readonly 'brand-secondary-active': "#01B5D1";
     readonly 'on-brand-primary': "#FFFFFF";
     readonly 'on-brand-secondary': "#FFFFFF";
+    readonly 'on-brand-primary-subtle': "#FF7900";
+    readonly 'on-brand-secondary-subtle': "#22D3EE";
     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-success-muted': "rgba(46, 213, 115, 0.30)";
+    readonly 'status-success-strong': "rgba(46, 213, 115, 0.50)";
     readonly 'status-live': "#2ED573";
     readonly 'status-live-muted': "#22A444";
     readonly 'status-error': "#D14343";
     readonly 'status-error-light': "#E05254";
     readonly 'status-error-dark': "#A4221C";
-    readonly 'status-error-subtle': "rgba(209, 67, 67, 0.12)";
-    readonly 'status-error-vivid': "#D14343";
+    readonly 'status-error-subtle': "rgba(247, 113, 117, 0.08)";
+    readonly 'status-error-muted': "rgba(209, 67, 67, 0.30)";
+    readonly 'status-error-strong': "rgba(209, 67, 67, 0.50)";
+    readonly 'status-error-vivid': "#FF4757";
     readonly 'status-error-vivid-light': "#E05254";
     readonly 'status-error-vivid-dark': "#A4221C";
     readonly 'status-error-vivid-subtle': "rgba(255, 71, 87, 0.12)";
+    readonly 'status-error-vivid-muted': "rgba(255, 71, 87, 0.30)";
+    readonly 'status-error-vivid-strong': "rgba(255, 71, 87, 0.50)";
     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-warning-muted': "rgba(249, 180, 21, 0.30)";
+    readonly 'status-warning-strong': "rgba(249, 180, 21, 0.50)";
     readonly 'status-info': "#2196F3";
     readonly 'status-info-light': "#78C2FF";
     readonly 'status-info-dark': "#1072CB";
-    readonly 'status-info-subtle': "rgba(33, 150, 243, 0.12)";
+    readonly 'status-info-subtle': "rgba(120, 194, 255, 0.12)";
+    readonly 'status-info-muted': "rgba(33, 150, 243, 0.30)";
+    readonly 'status-info-strong': "rgba(33, 150, 243, 0.50)";
     readonly 'on-status-success': "#FFFFFF";
     readonly 'on-status-error': "#FFFFFF";
     readonly 'on-status-warning': "#FFFFFF";
     readonly 'on-status-info': "#FFFFFF";
+    readonly 'on-status-success-subtle': "#2ED573";
+    readonly 'on-status-error-subtle': "#F77175";
+    readonly 'on-status-warning-subtle': "#F9B415";
+    readonly 'on-status-info-subtle': "#78C2FF";
     readonly 'result-improve': "#4caf50";
     readonly 'result-improve-light': "rgba(76, 175, 80, 0.16)";
     readonly 'result-improve-dark': "#248a24";
@@ -553,6 +633,42 @@ declare const primitiveColors: {
     readonly black: "#000000";
     readonly transparent: "transparent";
 };
+/**
+ * The vivid alert red: the one chromatic anchor outside the OKLCH ramps.
+ *
+ * It survived the TD-07.14 fold of the old `redVivid` scale only as the
+ * `-rgb`, `-subtle` and glow encodings of `status-error-vivid`, while the token
+ * itself was pinned to `red[600]` and collapsed onto `status-error`. Owning it
+ * here means the semantic layer references a primitive instead of carrying a
+ * literal. The red ramp has no step this saturated, and adding one means
+ * regenerating the ramp, so it stays a pin.
+ */
+declare const alertRedVivid: "#FF4757";
+/**
+ * Result/outcome palette anchors (VW-83): Material-style green/red/grey chosen
+ * for the result-improve/-degrade/-inconclusive tokens. No `primitiveRamps` step
+ * matches any of these exactly (the ramps are OKLCH-generated with a different
+ * hue/chroma arc), so they are pinned by name here rather than left as raw hex
+ * in semantic.ts — same pattern as {@link alertRedVivid}.
+ */
+declare const resultPaletteColors: {
+    readonly improve: "#4caf50";
+    readonly improveDark: "#248a24";
+    readonly degrade: "#ef5350";
+    readonly degradeDark: "#b30000";
+    readonly inconclusive: "#9E9A97";
+};
+/**
+ * One-off semantic literals (VW-83) with no exact `greyRamp`/`primitiveRamps`
+ * match, pinned by name instead of left as raw hex in semantic.ts.
+ */
+declare const semanticPins: {
+    readonly textPrimaryLight: "#121828";
+    readonly textSecondaryLight: "#65748B";
+    readonly backgroundBaseLight: "#EBEBEB";
+    readonly dividerLight: "#E8E9EB";
+    readonly focusIndigoDark: "#828DF8";
+};
 /**
  * Unified warm-neutral grey ramp (TD-07.14)
  *
@@ -807,6 +923,7 @@ declare const primitiveTypography: {
         readonly mono: readonly ["SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", "monospace"];
     };
     readonly fontSizes: {
+        readonly '2xs': "0.625rem";
         readonly xs: "0.75rem";
         readonly sm: "0.875rem";
         readonly base: "1rem";
@@ -901,4 +1018,4 @@ declare const primitiveZIndex: {
     readonly tooltip: 1800;
 };
-export { CATEGORICAL_CVD_SAFE_MAX, type CategoricalVariant, SURFACE_PLANE_STEPS, type ThemeMode, bestTextColor, buttonSizes, categoricalPalette, discreteRainbow, divergingScale, getCategoricalColor, getDiscreteRainbowColor, getSemanticColors, greyRamp, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveRamps, primitiveSpacing, primitiveTypography, primitiveZIndex, semanticColorsDark, semanticColorsLight, semanticTypography, sequentialEffort };
+export { CATEGORICAL_CVD_SAFE_MAX, type CategoricalVariant, SURFACE_PLANE_STEPS, type ThemeMode, alertRedVivid, bestTextColor, buttonSizes, categoricalPalette, discreteRainbow, divergingScale, getCategoricalColor, getDiscreteRainbowColor, getSemanticColors, greyRamp, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveRamps, primitiveSpacing, primitiveTypography, primitiveZIndex, resultPaletteColors, semanticColorsDark, semanticColorsLight, semanticPins, semanticTypography, sequentialEffort };