@titan-design/react-ui 0.12.1 → 0.14.0

package/src/theme/tokens/semantic.ts

@@ -17,7 +17,15 @@
  * - interactive-* : Hover/focus/active/disabled states
  */
 
-import { primitiveColors as p, primitiveRamps as ramp, greyRamp, discreteRainbow } from './primitives'
+import {
+  primitiveColors as p,
+  primitiveRamps as ramp,
+  greyRamp,
+  discreteRainbow,
+  alertRedVivid,
+  resultPaletteColors,
+  semanticPins,
+} from './primitives'
 
 /**
  * GREY MAPPING (TD-07.14) — how the old cool scales resolved onto `greyRamp`.
@@ -53,6 +61,8 @@ export const semanticColorsLight = {
   'brand-primary-light': ramp.orange[300],
   'brand-primary-dark': ramp.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': ramp.orange[500],
   'brand-primary-active': ramp.orange[600],
 
@@ -60,6 +70,8 @@ export const semanticColorsLight = {
   'brand-secondary-light': ramp.cyan[500],
   'brand-secondary-dark': ramp.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': ramp.cyan[700],
   'brand-secondary-active': ramp.cyan[800],
 
@@ -67,11 +79,20 @@ export const semanticColorsLight = {
   'on-brand-primary': p.white,
   'on-brand-secondary': p.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': ramp.orange[400],
+  'on-brand-secondary-subtle': ramp.cyan[600],
+
   // Status colors (status-*)
   'status-success': ramp.green[300],
   'status-success-light': ramp.green[200],
   'status-success-dark': ramp.green[600],
   'status-success-subtle': ramp.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': ramp.green[300],
@@ -81,21 +102,35 @@ export const semanticColorsLight = {
   'status-error-light': ramp.red[500],
   'status-error-dark': ramp.red[700],
   'status-error-subtle': ramp.red[50],
+  'status-error-muted': 'rgba(209, 67, 67, 0.30)',
+  'status-error-strong': 'rgba(209, 67, 67, 0.50)',
 
-  'status-error-vivid': ramp.red[600],     // vivid alert red
+  'status-error-vivid': alertRedVivid, // NOT red[600], that is status-error
   'status-error-vivid-light': ramp.red[500],
   'status-error-vivid-dark': ramp.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': ramp.amber[300],
   'status-warning-light': ramp.amber[200],
   'status-warning-dark': ramp.amber[500],
   'status-warning-subtle': ramp.amber[50],
+  'status-warning-muted': 'rgba(249, 180, 21, 0.30)',
+  'status-warning-strong': 'rgba(249, 180, 21, 0.50)',
 
   'status-info': ramp.blue[500],
   'status-info-light': ramp.blue[300],
   'status-info-dark': ramp.blue[600],
   'status-info-subtle': ramp.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': ramp.green[300],
+  'on-status-error-subtle': ramp.red[600],
+  'on-status-warning-subtle': ramp.amber[300],
+  'on-status-info-subtle': ramp.blue[500],
 
   // Text on status backgrounds (on-status-*)
   'on-status-success': p.white,
@@ -104,15 +139,15 @@ export const semanticColorsLight = {
   'on-status-info': p.white,
 
   // Result/outcome indicators (result-*)
-  'result-improve': '#4caf50',                // Green - positive outcome
+  'result-improve': resultPaletteColors.improve, // Green - positive outcome
   'result-improve-light': 'rgba(76, 175, 80, 0.12)',
-  'result-improve-dark': '#248a24',
-  'result-degrade': '#ef5350',                // Red - negative outcome
+  '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',           // Gray - no clear result
+  '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],           // Neutral baseline
+  'result-neutral': greyRamp[600], // Neutral baseline
 
   // Text on result backgrounds (on-result-*)
   'on-result-improve': p.white,
@@ -121,20 +156,20 @@ export const semanticColorsLight = {
 
   // Data visualization colors (data-*)
   // First 10 colors from discrete rainbow optimized for charts
-  'data-1': discreteRainbow[9],               // Blue
-  'data-2': discreteRainbow[14],              // Green
-  'data-3': discreteRainbow[17],              // Yellow
-  'data-4': discreteRainbow[25],              // Red
-  'data-5': discreteRainbow[8],               // Purple
-  'data-6': discreteRainbow[20],              // Orange
-  'data-7': discreteRainbow[13],              // Light Blue
-  'data-8': discreteRainbow[15],              // Light Green
-  'data-9': discreteRainbow[3],               // Lavender
-  'data-10': discreteRainbow[22],             // Dark Orange
+  'data-1': discreteRainbow[9], // Blue
+  'data-2': discreteRainbow[14], // Green
+  'data-3': discreteRainbow[17], // Yellow
+  'data-4': discreteRainbow[25], // Red
+  'data-5': discreteRainbow[8], // Purple
+  'data-6': discreteRainbow[20], // Orange
+  'data-7': discreteRainbow[13], // Light Blue
+  'data-8': discreteRainbow[15], // Light Green
+  'data-9': discreteRainbow[3], // Lavender
+  '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': p.white,
@@ -143,13 +178,13 @@ export const semanticColorsLight = {
 
   // Surface colors (surface-*) - for elevated containers
   'surface-base': p.white,
-  'surface-elevated': greyRamp[50],          // slightly off-white for elevated cards
-  'surface-raised': greyRamp[100],           // light gray for raised cards
+  'surface-elevated': greyRamp[50], // slightly off-white for elevated cards
+  'surface-raised': greyRamp[100], // light gray for raised cards
   'surface-overlay': p.white,
-  'surface-input': greyRamp[50],             // Input field background (filled variant)
+  'surface-input': greyRamp[50], // Input field background (filled variant)
 
   // Background colors (background-*)
-  'background-base': '#EBEBEB',
+  'background-base': semanticPins.backgroundBaseLight,
   'background-default': p.white,
   'background-subtle': greyRamp[50],
   // Frame/bezel chrome — top bar + side nav shell, one step below
@@ -157,12 +192,12 @@ export const semanticColorsLight = {
   'background-frame': greyRamp[400],
 
   // Border colors (border-*)
-  'border-prominent': greyRamp[400],        // high-visibility divider
+  'border-prominent': greyRamp[400], // high-visibility divider
   'border-focus': ramp.blue[600],
-  'border-input': greyRamp[200],             // Input field border
-  'border-input-hover': greyRamp[400],       // Input field border on hover
-  'border-input-focus': ramp.blue[600],          // Input field border on focus
-  'border-input-error': ramp.red[600],           // Input field border on error
+  'border-input': greyRamp[200], // Input field border
+  'border-input-hover': greyRamp[400], // Input field border on hover
+  'border-input-focus': ramp.blue[600], // Input field border on focus
+  'border-input-error': ramp.red[600], // Input field border on error
 
   // Alpha hairline separators (surface-independent — composite toward black on
   // light surfaces, mirroring the dark-mode white-alpha family). See §4/S-2.
@@ -179,7 +214,7 @@ export const semanticColorsLight = {
   'interactive-disabled-text': 'rgba(55, 65, 81, 0.26)',
 
   // Divider
-  'divider': '#E8E9EB',
+  divider: semanticPins.dividerLight,
 
   // Avatar default
   'avatar-background': greyRamp[600],
@@ -193,13 +228,17 @@ export const semanticColorsDark = {
   'brand-primary-light': ramp.orange[300],
   'brand-primary-dark': ramp.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': ramp.orange[300],
   'brand-primary-active': ramp.orange[200],
 
   'brand-secondary': ramp.cyan[600],
   'brand-secondary-light': ramp.cyan[500],
   'brand-secondary-dark': ramp.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': ramp.cyan[500],
   'brand-secondary-active': ramp.cyan[400],
 
@@ -207,11 +246,22 @@ export const semanticColorsDark = {
   'on-brand-primary': p.white,
   'on-brand-secondary': p.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': ramp.orange[400],
+  'on-brand-secondary-subtle': ramp.cyan[300],
+
   // Status colors
   'status-success': ramp.green[300],
   'status-success-light': ramp.green[200],
   'status-success-dark': ramp.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': ramp.green[300],
@@ -220,22 +270,33 @@ export const semanticColorsDark = {
   'status-error': ramp.red[600],
   'status-error-light': ramp.red[500],
   'status-error-dark': ramp.red[700],
-  'status-error-subtle': 'rgba(209, 67, 67, 0.12)',
-
-  'status-error-vivid': ramp.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': ramp.red[500],
   'status-error-vivid-dark': ramp.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': ramp.amber[300],
   'status-warning-light': ramp.amber[200],
   'status-warning-dark': ramp.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': ramp.blue[500],
   'status-info-light': ramp.blue[300],
   'status-info-dark': ramp.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': p.white,
@@ -243,14 +304,23 @@ export const semanticColorsDark = {
   'on-status-warning': p.white,
   'on-status-info': p.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': ramp.green[300],
+  'on-status-error-subtle': ramp.red[400],
+  'on-status-warning-subtle': ramp.amber[300],
+  'on-status-info-subtle': ramp.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],
 
@@ -284,7 +354,7 @@ export const 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': ramp.blue[400],
 
   // Surface colors - dark backgrounds — warm-tapered DERIVED ramp (TD-surface-tokens,
@@ -295,20 +365,20 @@ export const semanticColorsDark = {
   // `background-base` backs `Surface level="background"` (SurfaceContext.SURFACE_LEVEL_TOKEN),
   // so it takes the ramp's shell role. The deepest plane is `background-frame`,
   // which is also the `SurfaceLevel` floor a pressed surface clamps at.
-  'surface-base': greyRamp[925],           // main surface        (#252321, L*13.9)
-  'surface-elevated': greyRamp[900],       // elevated surface     (#2C2A28, L*17.2 — nav/rail)
-  'surface-raised': greyRamp[875],         // raised surface       (#31302F, L*19.9 — cards)
-  'surface-overlay': greyRamp[850],        // overlay surface      (#373635, L*22.7 — hero/popover)
-  'surface-input': greyRamp[900],          // input surface        (#2C2A28 — one plane above base)
+  'surface-base': greyRamp[925], // main surface        (#252321, L*13.9)
+  'surface-elevated': greyRamp[900], // elevated surface     (#2C2A28, L*17.2 — nav/rail)
+  'surface-raised': greyRamp[875], // raised surface       (#31302F, L*19.9 — cards)
+  'surface-overlay': greyRamp[850], // overlay surface      (#373635, L*22.7 — hero/popover)
+  'surface-input': greyRamp[900], // input surface        (#2C2A28 — one plane above base)
 
   // Background colors — same ramp, the frame/shell end of it.
-  'background-base': greyRamp[950],        // shell                (#1C1916, L*9   — Surface level="background")
-  'background-default': greyRamp[925],     // main background      (#252321, L*13.9 — matches surface-base)
-  'background-subtle': greyRamp[900],      // subtle background    (#2C2A28, L*17.2 — matches surface-elevated)
+  'background-base': greyRamp[950], // shell                (#1C1916, L*9   — Surface level="background")
+  'background-default': greyRamp[925], // main background      (#252321, L*13.9 — matches surface-base)
+  'background-subtle': greyRamp[900], // subtle background    (#2C2A28, L*17.2 — matches surface-elevated)
   // Frame/bezel chrome — the top bar + side nav shell, one step BELOW
   // `background-base`. It used to be described as sitting OUTSIDE the ramp; it
   // is simply the ramp's last step now, and the floor `<Surface pressed>` clamps at.
-  'background-frame': greyRamp[975],       // frame / bezel        (#100D0A, L*3.8)
+  'background-frame': greyRamp[975], // frame / bezel        (#100D0A, L*3.8)
 
   // Border colors — solid dark borders are RETIRED (TD-07.14). Not a preference — a structural
   // consequence of one ramp. Every step from 850 to 975 is now a surface plane,
@@ -326,11 +396,11 @@ export const semanticColorsDark = {
   // `border-prominent` stays SOLID: it is the one border meant to be seen
   // outright (4 call sites, high-visibility dividers), and grey-800 is not a
   // plane, so it keeps its job without collision.
-  'border-prominent': greyRamp[800],     // high-visibility divider
-  'border-focus': '#828DF8',
+  'border-prominent': greyRamp[800], // high-visibility divider
+  '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': ramp.red[500],
 
   // Alpha hairline separators — the primary separation cue (§4/S-2). Self-
@@ -376,7 +446,7 @@ export const semanticColorsDark = {
   '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],

package/src/theme/wash-ladder.test.ts

@@ -0,0 +1,58 @@
+import { describe, expect, it } from 'vitest'
+import { semanticColorsDark, semanticColorsLight } from './tokens/semantic'
+
+/**
+ * Status and brand roles publish three wash rungs. They exist so a component can
+ * express a weight ramp without hand-mixing alpha: MesoProgressBar's segment
+ * track collapsed to one weight in three hues when only `-subtle` was available.
+ *
+ * A rung that drifts out of order silently flattens every consumer, and the
+ * consumer's own test cannot catch it — under the RNW vitest alias the rendered
+ * value is a `var(...)` reference, not an rgba triplet.
+ */
+const WASH_ROLES = [
+  'brand-primary',
+  'brand-secondary',
+  'status-success',
+  'status-error',
+  'status-error-vivid',
+  'status-warning',
+  'status-info',
+] as const
+
+const RUNGS = ['subtle', 'muted', 'strong'] as const
+
+function alphaOf(value: string): number {
+  const parts = value.match(/rgba?\(([^)]+)\)/)?.[1].split(',')
+  if (!parts) return 1 // a solid ramp pin is fully opaque
+  return parts.length === 4 ? Number(parts[3].trim()) : 1
+}
+
+describe('wash ladder', () => {
+  for (const [mode, palette] of [
+    ['dark', semanticColorsDark],
+    ['light', semanticColorsLight],
+  ] as const) {
+    describe(mode, () => {
+      for (const role of WASH_ROLES) {
+        it(`${role} publishes all three rungs`, () => {
+          for (const rung of RUNGS) {
+            expect(palette, `${role}-${rung} is missing`).toHaveProperty(`${role}-${rung}`)
+          }
+        })
+      }
+    })
+  }
+
+  // Light mode's `-subtle` is still a solid ramp tint rather than a wash, so its
+  // ladder is not comparable yet. AW-121 owns bringing light onto this model.
+  for (const role of WASH_ROLES) {
+    it(`${role} rungs ascend in weight (dark)`, () => {
+      const [subtle, muted, strong] = RUNGS.map((r) =>
+        alphaOf(semanticColorsDark[`${role}-${r}` as keyof typeof semanticColorsDark] as string)
+      )
+      expect(muted, `${role}-muted must outweigh -subtle`).toBeGreaterThan(subtle)
+      expect(strong, `${role}-strong must outweigh -muted`).toBeGreaterThan(muted)
+    })
+  }
+})

package/src/theme/workout-tokens.ts

@@ -48,13 +48,7 @@ export const WORKOUT_TOKENS = {
     over2: ramp.red[700],
     over3: ramp.red[800],
     targetLine: 'rgba(33, 150, 243, 0.5)',
-    atTargetGlow:
-      '0 0 5px 1px rgba(33, 150, 243, 0.35), 0 0 10px 3px rgba(33, 150, 243, 0.15)',
-  },
-
-  // Placeholder strip
-  placeholder: {
-    fill: '#3A3A3A',
+    atTargetGlow: '0 0 5px 1px rgba(33, 150, 243, 0.35), 0 0 10px 3px rgba(33, 150, 243, 0.15)',
   },
 
   // Deviation bar

package/src/types/jest-axe.d.ts

@@ -5,12 +5,8 @@ declare module 'jest-axe' {
   ): Promise<{ violations: unknown[] }>
 
   export const toHaveNoViolations: {
-    toHaveNoViolations(
-      results: { violations: unknown[] }
-    ): { pass: boolean; message(): string }
+    toHaveNoViolations(results: { violations: unknown[] }): { pass: boolean; message(): string }
   }
 
-  export function configureAxe(
-    options?: Record<string, unknown>
-  ): typeof axe
+  export function configureAxe(options?: Record<string, unknown>): typeof axe
 }

package/src/types/raw-md.d.ts

@@ -0,0 +1,5 @@
+/** Vite's `?raw` suffix — imports a file's contents as a string. */
+declare module '*.md?raw' {
+  const content: string
+  export default content
+}