@titan-design/react-ui 0.12.1 → 0.14.0

package/src/utils/colors.alpha-adoption.test.ts

@@ -0,0 +1,408 @@
+import { readFileSync } from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, it, expect } from 'vitest'
+import { alpha } from './colors'
+import { getSemanticColors } from '../theme/tokens/semantic'
+import { primitiveColors } from '../theme/tokens/primitives'
+
+/**
+ * VW-78: every `rgba(...)` literal swapped for `alpha(<resolved token>, opacity)`
+ * across the functional-colour baseline files must resolve to the exact same
+ * colour it replaced, AND the raw literal must actually be gone from the
+ * touched source file — two separate checks, because they catch different
+ * regressions:
+ *
+ * - "resolves to the same colour" (below) re-derives the swap independently
+ *   from the token and `alpha()`, so it catches a bad token value or a bug in
+ *   `alpha()` itself.
+ * - "no longer contains the swapped literal" reads the ACTUAL component file
+ *   and catches someone reverting a call site back to a raw literal, or
+ *   copy-pasting the wrong token into it — neither of which the first check
+ *   can see, since it never looks at the file the swap lives in.
+ */
+
+function parseRgba(value: string): [number, number, number, number] {
+  const m = value.match(/rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)(?:[,\s]+([\d.]+))?\s*\)/)
+  if (!m) throw new Error(`Not an rgb()/rgba() value: ${value}`)
+  return [Number(m[1]), Number(m[2]), Number(m[3]), m[4] === undefined ? 1 : Number(m[4])]
+}
+
+/**
+ * `alphaTolerance` accommodates `.toFixed(3)`-rounded originals (MesoCard's
+ * dynamic heatmap opacity): the rounding itself can differ from the exact
+ * value by up to 0.0005, which is not a colour difference.
+ */
+function expectSameColor(actual: string, original: string, alphaTolerance = 1e-6) {
+  const [ar, ag, ab, aa] = parseRgba(actual)
+  const [or_, og, ob, oa] = parseRgba(original)
+  expect([ar, ag, ab]).toEqual([or_, og, ob])
+  expect(Math.abs(aa - oa)).toBeLessThanOrEqual(alphaTolerance)
+}
+
+const dark = getSemanticColors('dark')
+const BRAND_PRIMARY = dark['brand-primary']
+
+describe('alpha() adoption (VW-78) — swapped literal parity', () => {
+  const staticCases: Array<{ label: string; original: string; swapped: string }> = [
+    // Gauge.tsx
+    {
+      label: 'Gauge TRACK',
+      original: 'rgba(255,255,255,0.08)',
+      swapped: alpha(primitiveColors.white, 0.08),
+    },
+    // Scatter.tsx
+    {
+      label: 'Scatter GRID_LINE',
+      original: 'rgba(255,255,255,0.07)',
+      swapped: alpha(primitiveColors.white, 0.07),
+    },
+    {
+      label: 'Scatter AXIS_LINE',
+      original: 'rgba(255,255,255,0.18)',
+      swapped: alpha(primitiveColors.white, 0.18),
+    },
+    {
+      label: 'Scatter DIAGONAL_LINE',
+      original: 'rgba(255,255,255,0.28)',
+      swapped: alpha(primitiveColors.white, 0.28),
+    },
+    // BaseBadge.tsx
+    {
+      label: 'BaseBadge pr.bg',
+      original: 'rgba(255, 121, 0, 0.12)',
+      swapped: alpha(dark['brand-primary'], 0.12),
+    },
+    {
+      label: 'BaseBadge pr.border',
+      original: 'rgba(255, 121, 0, 0.3)',
+      swapped: alpha(dark['brand-primary'], 0.3),
+    },
+    // BodyMap.tsx
+    {
+      label: 'BodyMap OUTLINE_FILL',
+      original: 'rgba(255,255,255,0.08)',
+      swapped: alpha(primitiveColors.white, 0.08),
+    },
+    {
+      label: 'BodyMap OUTLINE_BORDER',
+      original: 'rgba(255,255,255,0.12)',
+      swapped: alpha(primitiveColors.white, 0.12),
+    },
+    {
+      label: 'BodyMap toggle active bg',
+      original: 'rgba(255,121,0,0.16)',
+      swapped: alpha(BRAND_PRIMARY, 0.16),
+    },
+    // BodyMapDetailPanel.tsx
+    {
+      label: 'BodyMapDetailPanel bg',
+      original: 'rgba(255,121,0,0.12)',
+      swapped: alpha(BRAND_PRIMARY, 0.12),
+    },
+    {
+      label: 'BodyMapDetailPanel border',
+      original: 'rgba(255,121,0,0.3)',
+      swapped: alpha(BRAND_PRIMARY, 0.3),
+    },
+    // CapacityBandChart.tsx
+    {
+      label: 'CapacityBandChart BAND_FILL',
+      original: 'rgba(46,213,115,0.1)',
+      swapped: alpha(dark['status-success'], 0.1),
+    },
+    {
+      label: 'CapacityBandChart BAND_EDGE',
+      original: 'rgba(46,213,115,0.45)',
+      swapped: alpha(dark['status-success'], 0.45),
+    },
+    {
+      label: 'CapacityBandChart PROJECTION_FILL',
+      original: 'rgba(46,213,115,0.05)',
+      swapped: alpha(dark['status-success'], 0.05),
+    },
+    // DeviationBar.tsx (grey stop at 50% has no token match and stays raw — not listed here)
+    {
+      label: 'DeviationBar gradient success stop',
+      original: 'rgba(46,213,115,0.25)',
+      swapped: alpha(dark['status-success'], 0.25),
+    },
+    {
+      label: 'DeviationBar gradient warning stop',
+      original: 'rgba(249,180,21,0.25)',
+      swapped: alpha(dark['status-warning'], 0.25),
+    },
+    // ExerciseDetailPage.tsx
+    {
+      label: 'ExerciseDetailPage e1rm bg',
+      original: 'rgba(255,121,0,0.10)',
+      swapped: alpha(BRAND_PRIMARY, 0.1),
+    },
+    {
+      label: 'ExerciseDetailPage e1rm border',
+      original: 'rgba(255,121,0,0.25)',
+      swapped: alpha(BRAND_PRIMARY, 0.25),
+    },
+    // IntensityBar.tsx
+    {
+      label: 'IntensityBar TARGET_LINE_COLOR',
+      original: 'rgba(33, 150, 243, 0.5)',
+      swapped: alpha(dark['status-info'], 0.5),
+    },
+    // MesoStatusCard.tsx
+    {
+      label: 'MesoStatusCard gradient success',
+      original: 'rgba(46,213,115,0.25)',
+      swapped: alpha(dark['status-success'], 0.25),
+    },
+    {
+      label: 'MesoStatusCard gradient warning',
+      original: 'rgba(249,180,21,0.25)',
+      swapped: alpha(dark['status-warning'], 0.25),
+    },
+    {
+      label: 'MesoStatusCard gradient error',
+      original: 'rgba(209,67,67,0.25)',
+      swapped: alpha(dark['status-error'], 0.25),
+    },
+    {
+      label: 'MesoStatusCard success.bg',
+      original: 'rgba(46,213,115,0.15)',
+      swapped: alpha(dark['status-success'], 0.15),
+    },
+    {
+      label: 'MesoStatusCard success.border',
+      original: 'rgba(46,213,115,0.3)',
+      swapped: alpha(dark['status-success'], 0.3),
+    },
+    {
+      label: 'MesoStatusCard warning.bg',
+      original: 'rgba(249,180,21,0.15)',
+      swapped: alpha(dark['status-warning'], 0.15),
+    },
+    {
+      label: 'MesoStatusCard warning.border',
+      original: 'rgba(249,180,21,0.3)',
+      swapped: alpha(dark['status-warning'], 0.3),
+    },
+    {
+      label: 'MesoStatusCard error.bg',
+      original: 'rgba(209,67,67,0.15)',
+      swapped: alpha(dark['status-error'], 0.15),
+    },
+    {
+      label: 'MesoStatusCard error.border',
+      original: 'rgba(209,67,67,0.25)',
+      swapped: alpha(dark['status-error'], 0.25),
+    },
+    {
+      label: 'MesoStatusCard gauge center line',
+      original: 'rgba(255,255,255,0.3)',
+      swapped: alpha(primitiveColors.white, 0.3),
+    },
+    {
+      label: 'MesoStatusCard coaching bg',
+      original: 'rgba(249,180,21,0.06)',
+      swapped: alpha(dark['status-warning'], 0.06),
+    },
+    {
+      label: 'MesoStatusCard coaching border',
+      original: 'rgba(249,180,21,0.15)',
+      swapped: alpha(dark['status-warning'], 0.15),
+    },
+    {
+      label: 'MesoStatusCard next-target bg',
+      original: 'rgba(46,213,115,0.06)',
+      swapped: alpha(dark['status-success'], 0.06),
+    },
+    {
+      label: 'MesoStatusCard next-target border',
+      original: 'rgba(46,213,115,0.2)',
+      swapped: alpha(dark['status-success'], 0.2),
+    },
+    // ReadinessCheck.tsx
+    {
+      label: 'ReadinessCheck BRAND_PRIMARY_SUBTLE',
+      original: 'rgba(255,121,0,0.12)',
+      swapped: alpha(BRAND_PRIMARY, 0.12),
+    },
+    // RestTimer.tsx
+    {
+      label: 'RestTimer add-time bg',
+      original: 'rgba(255,255,255,0.06)',
+      swapped: alpha(primitiveColors.white, 0.06),
+    },
+    {
+      label: 'RestTimer skip bg',
+      original: 'rgba(255,121,0,0.12)',
+      swapped: alpha(BRAND_PRIMARY, 0.12),
+    },
+    // StrengthTrendChart.tsx
+    {
+      label: 'StrengthTrendChart GRID_LINE',
+      original: 'rgba(255,255,255,0.06)',
+      swapped: alpha(primitiveColors.white, 0.06),
+    },
+    {
+      label: 'StrengthTrendChart SUCCESS_PILL_BG',
+      original: 'rgba(46,213,115,0.10)',
+      swapped: alpha(dark['status-success'], 0.1),
+    },
+    {
+      label: 'StrengthTrendChart SUCCESS_PILL_BORDER',
+      original: 'rgba(46,213,115,0.20)',
+      swapped: alpha(dark['status-success'], 0.2),
+    },
+    {
+      label: 'StrengthTrendChart ERROR_PILL_BG',
+      original: 'rgba(209,67,67,0.10)',
+      swapped: alpha(dark['status-error'], 0.1),
+    },
+    {
+      label: 'StrengthTrendChart ERROR_PILL_BORDER',
+      original: 'rgba(209,67,67,0.20)',
+      swapped: alpha(dark['status-error'], 0.2),
+    },
+    {
+      label: 'StrengthTrendChart tooltip borderLeftColor',
+      original: 'rgba(255,255,255,0.10)',
+      swapped: alpha(primitiveColors.white, 0.1),
+    },
+    // ToolbarButton.tsx
+    {
+      label: 'ToolbarButton disabledBg',
+      original: 'rgba(255, 255, 255, 0.12)',
+      swapped: alpha(primitiveColors.white, 0.12),
+    },
+  ]
+
+  it.each(staticCases)(
+    '$label resolves to the same colour it replaced',
+    ({ original, swapped }) => {
+      expectSameColor(swapped, original)
+    }
+  )
+
+  it('covers all 43 static swaps (the 44th, MesoCard, is dynamic and tested below)', () => {
+    expect(staticCases).toHaveLength(43)
+  })
+
+  describe('MesoCard heatmapColor (dynamic opacity)', () => {
+    // Mirrors the original `rgba(255,121,0,${opacity.toFixed(3)})` formula this
+    // replaced, at representative percentages.
+    function originalHeatmapColor(percentage: number): string {
+      const clamped = Math.max(0, Math.min(100, percentage))
+      const opacity = 0.12 + (clamped / 100) * 0.78
+      return `rgba(255,121,0,${opacity.toFixed(3)})`
+    }
+    function swappedHeatmapColor(percentage: number): string {
+      const clamped = Math.max(0, Math.min(100, percentage))
+      const opacity = 0.12 + (clamped / 100) * 0.78
+      return alpha(BRAND_PRIMARY, opacity)
+    }
+
+    it.each([0, 1, 25, 50, 63, 80, 99, 100])('matches at %i%%', (pct) => {
+      expectSameColor(swappedHeatmapColor(pct), originalHeatmapColor(pct), 0.0006)
+    })
+  })
+})
+
+const SRC_ROOT = path.dirname(fileURLToPath(import.meta.url))
+
+function readSource(relativeToSrc: string): string {
+  return readFileSync(path.join(SRC_ROOT, '..', relativeToSrc), 'utf8')
+}
+
+describe('touched source files no longer contain the swapped raw literals', () => {
+  const fileCases: Array<{ file: string; removedLiterals: string[] }> = [
+    { file: 'components/custom/Gauge/Gauge.tsx', removedLiterals: ['rgba(255,255,255,0.08)'] },
+    {
+      file: 'components/custom/Scatter/Scatter.tsx',
+      removedLiterals: [
+        'rgba(255,255,255,0.07)',
+        'rgba(255,255,255,0.18)',
+        'rgba(255,255,255,0.28)',
+      ],
+    },
+    {
+      file: 'components/custom/Workout/BaseBadge.tsx',
+      removedLiterals: ['rgba(255, 121, 0, 0.12)', 'rgba(255, 121, 0, 0.3)'],
+    },
+    {
+      file: 'components/custom/Workout/BodyMap.tsx',
+      removedLiterals: ['rgba(255,255,255,0.08)', 'rgba(255,255,255,0.12)', 'rgba(255,121,0,0.16)'],
+    },
+    {
+      file: 'components/custom/Workout/BodyMapDetailPanel.tsx',
+      removedLiterals: ['rgba(255,121,0,0.12)', 'rgba(255,121,0,0.3)'],
+    },
+    {
+      file: 'components/custom/Workout/CapacityBandChart.tsx',
+      removedLiterals: ['rgba(46,213,115,0.1)', 'rgba(46,213,115,0.45)', 'rgba(46,213,115,0.05)'],
+    },
+    {
+      file: 'components/custom/Workout/DeviationBar.tsx',
+      removedLiterals: ['rgba(46,213,115,0.25)', 'rgba(249,180,21,0.25)'],
+    },
+    {
+      file: 'components/custom/Workout/ExerciseDetailPage.tsx',
+      removedLiterals: ['rgba(255,121,0,0.10)', 'rgba(255,121,0,0.25)'],
+    },
+    {
+      file: 'components/custom/Workout/IntensityBar.tsx',
+      removedLiterals: ['rgba(33, 150, 243, 0.5)'],
+    },
+    {
+      file: 'components/custom/Workout/MesoCard.tsx',
+      removedLiterals: ['rgba(255,121,0,${opacity.toFixed(3)})'],
+    },
+    {
+      file: 'components/custom/Workout/MesoStatusCard.tsx',
+      removedLiterals: [
+        'rgba(46,213,115,0.25)',
+        'rgba(249,180,21,0.25)',
+        'rgba(209,67,67,0.25)',
+        'rgba(46,213,115,0.15)',
+        'rgba(46,213,115,0.3)',
+        'rgba(249,180,21,0.15)',
+        'rgba(249,180,21,0.3)',
+        'rgba(209,67,67,0.15)',
+        'rgba(255,255,255,0.3)',
+        'rgba(249,180,21,0.06)',
+        'rgba(46,213,115,0.06)',
+        'rgba(46,213,115,0.2)',
+      ],
+    },
+    {
+      file: 'components/custom/Workout/ReadinessCheck.tsx',
+      removedLiterals: ['rgba(255,121,0,0.12)'],
+    },
+    {
+      file: 'components/custom/Workout/RestTimer.tsx',
+      removedLiterals: ['rgba(255,255,255,0.06)', 'rgba(255,121,0,0.12)'],
+    },
+    {
+      file: 'components/custom/Workout/StrengthTrendChart.tsx',
+      removedLiterals: [
+        'rgba(255,255,255,0.06)',
+        'rgba(46,213,115,0.10)',
+        'rgba(46,213,115,0.20)',
+        'rgba(209,67,67,0.10)',
+        'rgba(209,67,67,0.20)',
+        'rgba(255,255,255,0.10)',
+      ],
+    },
+    {
+      file: 'components/ui/toolbar-button/ToolbarButton.tsx',
+      removedLiterals: ['rgba(255, 255, 255, 0.12)'],
+    },
+  ]
+
+  it.each(fileCases)('$file no longer has its swapped literal(s)', ({ file, removedLiterals }) => {
+    const text = readSource(file)
+    expect(text).toContain('alpha(')
+    for (const literal of removedLiterals) {
+      expect(text).not.toContain(literal)
+    }
+  })
+})

package/src/utils/colors.ts

@@ -1,8 +1,9 @@
 /**
- * Color utility functions for the design system
+ * Color utility functions for the design system.
  *
- * lighten/darken are re-exported from shadows.ts which uses HSV-based
- * color math for more perceptually consistent results across hues.
+ * `lighten`/`darken` are re-exported from `theme/color-utils`, which does the
+ * HSV math. They are hover/state adjustments, not a depth ladder — planes come
+ * from the grey ramp.
  */
 
 export { lighten, darken } from '../theme/color-utils'
@@ -137,4 +138,3 @@ export function getLuminance(color: string): 'light' | 'dark' {
 export function getContrastText(backgroundColor: string): string {
   return getLuminance(backgroundColor) === 'light' ? '#000000' : '#FFFFFF'
 }
-

package/src/utils/form.ts

@@ -160,9 +160,7 @@ export const validationRules = {
 /**
  * Compose multiple validation functions
  */
-export function composeValidators(
-  ...validators: Array<(value: any) => string | undefined>
-) {
+export function composeValidators(...validators: Array<(value: any) => string | undefined>) {
   return (value: any): string | undefined => {
     for (const validator of validators) {
       const error = validator(value)

package/src/utils/index.ts

@@ -1,4 +1,5 @@
 export { cn } from './cn'
+export { formatCompact, formatSignedCompact } from './number-format'
 export {
   getStatusColor,
   getResultColor,
@@ -20,13 +21,7 @@ export {
   validationRules,
   composeValidators,
 } from './form'
-export type {
-  FieldState,
-  FieldWrapperProps,
-  FormValues,
-  FormErrors,
-  FormTouched,
-} from './form'
+export type { FieldState, FieldWrapperProps, FormValues, FormErrors, FormTouched } from './form'
 export {
   roundRpe,
   rpeColor,

package/src/utils/number-format.ts

@@ -0,0 +1,17 @@
+/**
+ * Compact integer formatting for dense readouts (stat tiles, sparkline
+ * captions) where a full-precision number would blow the column width.
+ */
+
+/** 1234 → "1.2k", 1048576 → "1.0M", 42 → "42". Sign is preserved. */
+export function formatCompact(n: number): string {
+  const abs = Math.abs(n)
+  if (abs >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M'
+  if (abs >= 1_000) return (n / 1_000).toFixed(1) + 'k'
+  return String(n)
+}
+
+/** Like {@link formatCompact} but always signed: 514689 → "+514.7k", -20 → "-20". */
+export function formatSignedCompact(n: number): string {
+  return (n >= 0 ? '+' : '') + formatCompact(n)
+}

package/src/utils/workout-format.ts

@@ -52,6 +52,20 @@ export function formatSignedPct(ratio: number): string {
   return `${pct > 0 ? '+' : ''}${pct}%`
 }
 
+/**
+ * Rep-range label, e.g. `"8–10"`. `"8"` when the bounds are equal or only one is
+ * given; `null` when neither is set. Shared by {@link formatPrescription} and the
+ * set strip's per-set prescribed-range label so the two never drift apart.
+ */
+export function formatRepsRange(repsLow?: number, repsHigh?: number): string | null {
+  if (repsLow != null && repsHigh != null) {
+    return repsLow === repsHigh ? `${repsLow}` : `${repsLow}–${repsHigh}`
+  }
+  if (repsLow != null) return `${repsLow}`
+  if (repsHigh != null) return `${repsHigh}`
+  return null
+}
+
 /** Structured prescription for the active exercise (from the plan). */
 export interface PrescriptionInput {
   repsLow?: number
@@ -67,12 +81,7 @@ export interface PrescriptionInput {
  */
 export function formatPrescription(p: PrescriptionInput | null | undefined): string | null {
   if (p == null) return null
-  let reps: string | null = null
-  if (p.repsLow != null && p.repsHigh != null) {
-    reps = p.repsLow === p.repsHigh ? `${p.repsLow}` : `${p.repsLow}–${p.repsHigh}`
-  } else if (p.repsLow != null) {
-    reps = `${p.repsLow}`
-  }
+  const reps = formatRepsRange(p.repsLow, p.repsHigh)
   const weight = p.weightLbs != null ? `${p.weightLbs} lb` : null
   const head = [reps, weight].filter((s): s is string => s != null).join(' @ ')
   const rpe = p.rpe != null ? `RPE ${p.rpe}` : null

package/src/web-jsx/jsx-runtime.ts

@@ -10,11 +10,7 @@
  * native Metro). It is only inlined into the dist by tsup via
  * an esbuild onResolve plugin.
  */
-import {
-  jsx as reactJsx,
-  jsxs as reactJsxs,
-  Fragment,
-} from 'react/jsx-runtime'
+import { jsx as reactJsx, jsxs as reactJsxs, Fragment } from 'react/jsx-runtime'
 import type { StyleProp } from 'react-native'
 
 type JsxFn = typeof reactJsx

package/tailwind.config.js

@@ -6,13 +6,23 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        // Brand colors
+        // Every leaf here is a `var(--color-*)` reference, which is what makes
+        // light/dark switching work — and also why an opacity modifier
+        // (`bg-brand-primary/10`) emits NO rule at all under Tailwind v3 and
+        // renders as nothing. Reach for a wash rung instead; see VW-308 and
+        // `titan/no-var-color-opacity`.
+        //
+        // The wash ladder (`-subtle`/`-muted`/`-strong`) is the translucency
+        // vocabulary. All three rungs are published as classes so a component
+        // never has to hand-mix alpha.
         brand: {
           primary: {
             DEFAULT: 'var(--color-brand-primary)',
             light: 'var(--color-brand-primary-light)',
             dark: 'var(--color-brand-primary-dark)',
             subtle: 'var(--color-brand-primary-subtle)',
+            muted: 'var(--color-brand-primary-muted)',
+            strong: 'var(--color-brand-primary-strong)',
             hover: 'var(--color-brand-primary-hover)',
             active: 'var(--color-brand-primary-active)',
           },
@@ -21,14 +31,23 @@ module.exports = {
             light: 'var(--color-brand-secondary-light)',
             dark: 'var(--color-brand-secondary-dark)',
             subtle: 'var(--color-brand-secondary-subtle)',
+            muted: 'var(--color-brand-secondary-muted)',
+            strong: 'var(--color-brand-secondary-strong)',
             hover: 'var(--color-brand-secondary-hover)',
             active: 'var(--color-brand-secondary-active)',
           },
         },
-        // Text on brand backgrounds
+        // Text on brand backgrounds. `-subtle` is text ON the `-subtle` fill, a
+        // separate role from the white label a solid fill carries.
         'on-brand': {
-          primary: 'var(--color-on-brand-primary)',
-          secondary: 'var(--color-on-brand-secondary)',
+          primary: {
+            DEFAULT: 'var(--color-on-brand-primary)',
+            subtle: 'var(--color-on-brand-primary-subtle)',
+          },
+          secondary: {
+            DEFAULT: 'var(--color-on-brand-secondary)',
+            subtle: 'var(--color-on-brand-secondary-subtle)',
+          },
         },
         // Status colors
         status: {
@@ -37,6 +56,8 @@ module.exports = {
             light: 'var(--color-status-success-light)',
             dark: 'var(--color-status-success-dark)',
             subtle: 'var(--color-status-success-subtle)',
+            muted: 'var(--color-status-success-muted)',
+            strong: 'var(--color-status-success-strong)',
           },
           // Live-session accent — own role, decoupled from success
           live: {
@@ -48,32 +69,52 @@ module.exports = {
             light: 'var(--color-status-error-light)',
             dark: 'var(--color-status-error-dark)',
             subtle: 'var(--color-status-error-subtle)',
+            muted: 'var(--color-status-error-muted)',
+            strong: 'var(--color-status-error-strong)',
           },
           'error-vivid': {
             DEFAULT: 'var(--color-status-error-vivid)',
             light: 'var(--color-status-error-vivid-light)',
             dark: 'var(--color-status-error-vivid-dark)',
             subtle: 'var(--color-status-error-vivid-subtle)',
+            muted: 'var(--color-status-error-vivid-muted)',
+            strong: 'var(--color-status-error-vivid-strong)',
           },
           warning: {
             DEFAULT: 'var(--color-status-warning)',
             light: 'var(--color-status-warning-light)',
             dark: 'var(--color-status-warning-dark)',
             subtle: 'var(--color-status-warning-subtle)',
+            muted: 'var(--color-status-warning-muted)',
+            strong: 'var(--color-status-warning-strong)',
           },
           info: {
             DEFAULT: 'var(--color-status-info)',
             light: 'var(--color-status-info-light)',
             dark: 'var(--color-status-info-dark)',
             subtle: 'var(--color-status-info-subtle)',
+            muted: 'var(--color-status-info-muted)',
+            strong: 'var(--color-status-info-strong)',
           },
         },
-        // Text on status backgrounds
+        // Text on status backgrounds. `-subtle` is text ON the `-subtle` fill.
         'on-status': {
-          success: 'var(--color-on-status-success)',
-          error: 'var(--color-on-status-error)',
-          warning: 'var(--color-on-status-warning)',
-          info: 'var(--color-on-status-info)',
+          success: {
+            DEFAULT: 'var(--color-on-status-success)',
+            subtle: 'var(--color-on-status-success-subtle)',
+          },
+          error: {
+            DEFAULT: 'var(--color-on-status-error)',
+            subtle: 'var(--color-on-status-error-subtle)',
+          },
+          warning: {
+            DEFAULT: 'var(--color-on-status-warning)',
+            subtle: 'var(--color-on-status-warning-subtle)',
+          },
+          info: {
+            DEFAULT: 'var(--color-on-status-info)',
+            subtle: 'var(--color-on-status-info-subtle)',
+          },
         },
         // Result/outcome colors
         result: {
@@ -183,6 +224,11 @@ module.exports = {
         mono: ['var(--font-family-mono)', 'monospace'],
       },
       fontSize: {
+        // Micro steps. `2xs` carries a paired line-height like the rest of the
+        // scale (Typography's microLabel needs it); `3xs` is bare because a pill
+        // capsule takes its height from padding, not from the label's leading.
+        '3xs': '0.5625rem',
+        '2xs': ['0.625rem', { lineHeight: '0.875rem' }],
         xs: ['0.75rem', { lineHeight: '1rem' }],
         sm: ['0.875rem', { lineHeight: '1.25rem' }],
         base: ['1rem', { lineHeight: '1.5rem' }],