@titan-design/react-ui 0.13.0 → 0.14.0

package/src/components/custom/Workout/exerciseRowState.ts

@@ -0,0 +1,29 @@
+import { getSemanticColors, type ThemeMode } from '../../../theme/tokens/semantic'
+
+/** The interaction washes an exercise row can wear, beyond its resting look. */
+export type ExerciseRowState = 'hovered' | 'selected' | 'pressed'
+
+const ROW_STATE_TOKEN = {
+  hovered: 'interactive-hover',
+  selected: 'interactive-selected',
+  pressed: 'interactive-active',
+} as const satisfies Record<ExerciseRowState, keyof ReturnType<typeof getSemanticColors>>
+
+/**
+ * Literal-hex wash for one interaction state, in the same shape as
+ * `onSurfaceColors`. Uses `getSemanticColors` rather than `resolveColor` so the
+ * value survives where there are no CSS custom properties (the raw-RN wall SPA,
+ * native) and stays assertable in tests.
+ */
+export function exerciseRowStateColor(state: ExerciseRowState, mode: ThemeMode = 'dark'): string {
+  return getSemanticColors(mode)[ROW_STATE_TOKEN[state]]
+}
+
+/**
+ * The tone for an exercise being performed right now. Static by construction —
+ * a live row sits on a wall display, where titan's "the grain never animates"
+ * rule applies just as much to a heading.
+ */
+export function exerciseLiveColor(mode: ThemeMode = 'dark'): string {
+  return getSemanticColors(mode)['status-live']
+}

package/src/components/custom/Workout/index.ts

@@ -68,8 +68,18 @@ export {
   type ExerciseIndicatorProps,
   type ExerciseIndicatorKind,
 } from './ExerciseIndicator'
-export { ExerciseHeading, type ExerciseHeadingProps } from './ExerciseHeading'
-export { ExerciseCardHeading, type ExerciseCardHeadingProps } from './ExerciseCardHeading'
+export {
+  ExerciseHeading,
+  exerciseHeadingLabel,
+  type ExerciseHeadingProps,
+  type ExerciseHeadingLayout,
+} from './ExerciseHeading'
+export {
+  ExerciseCardHeading,
+  type ExerciseCardHeadingProps,
+  type ExerciseRowDensity,
+} from './ExerciseCardHeading'
+export { exerciseLiveColor, exerciseRowStateColor, type ExerciseRowState } from './exerciseRowState'
 export { ExerciseCard, type ExerciseCardProps } from './ExerciseCard'
 export { SetTableHeader, type SetTableHeaderProps } from './SetTableHeader'
 export {

package/src/components/custom/Workout/metricText.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View } from 'react-native'
 import { MetricCell } from './metricText'
 import { Surface } from '../../ui/surface'
+import { greyRamp } from '../../../theme/tokens/primitives'
 
 /**
  * `MetricCell` — the shared "segmented metric" typography primitive (Inter · 600 ·
@@ -41,23 +42,23 @@ export default meta
 type Story = StoryObj<typeof MetricCell>
 
 export const ValueCell: Story = {
-  args: { children: '145', color: '#F3F4F6', fontSize: 11 },
+  args: { children: '145', color: greyRamp[50], fontSize: 11 },
 }
 
 export const Separator: Story = {
-  args: { children: '×', color: '#6B7280', fontSize: 11 },
+  args: { children: '×', color: greyRamp[600], fontSize: 11 },
   parameters: { docs: { description: { story: 'A muted separator cell (× / @ / -).' } } },
 }
 
 export const InContext: Story = {
   render: () => (
     <View style={{ flexDirection: 'row', alignItems: 'baseline' }}>
-      <MetricCell color="#F3F4F6">5</MetricCell>
-      <MetricCell color="#6B7280">&nbsp;×&nbsp;</MetricCell>
-      <MetricCell color="#F3F4F6">8</MetricCell>
-      <MetricCell color="#6B7280">&nbsp;@&nbsp;</MetricCell>
-      <MetricCell color="#F3F4F6">145</MetricCell>
-      <MetricCell color="#6B7280">&nbsp;lb</MetricCell>
+      <MetricCell color={greyRamp[50]}>5</MetricCell>
+      <MetricCell color={greyRamp[600]}>&nbsp;×&nbsp;</MetricCell>
+      <MetricCell color={greyRamp[50]}>8</MetricCell>
+      <MetricCell color={greyRamp[600]}>&nbsp;@&nbsp;</MetricCell>
+      <MetricCell color={greyRamp[50]}>145</MetricCell>
+      <MetricCell color={greyRamp[600]}>&nbsp;lb</MetricCell>
     </View>
   ),
   parameters: {

package/src/components/custom/Workout/metricText.tsx

@@ -15,20 +15,22 @@ export interface MetricCellProps {
   /** Cell text color — value cells take a primary color, separators a muted one. */
   color: string
   fontSize?: number
+  /** Cell font weight. Default 600 (the bold "digital readout" look). */
+  weight?: 400 | 600
 }
 
 /**
  * @deprecated Use `<Metric size="…" align="…">` (roadmap decision 11) — removed
  * after AW-127 consumer migration.
  */
-export function MetricCell({ children, color, fontSize = 11 }: MetricCellProps) {
+export function MetricCell({ children, color, fontSize = 11, weight = 600 }: MetricCellProps) {
   return (
     <Text
       style={{
         fontFamily: METRIC_FONT,
         fontSize,
         color,
-        fontWeight: '600',
+        fontWeight: String(weight) as '400' | '600',
         letterSpacing: 1,
       }}
     >

package/src/components/custom/Workout/setHeadingKit.tsx

@@ -5,7 +5,7 @@
  */
 import type { ReactNode } from 'react'
 import { TempoDisplay } from './TempoDisplay'
-import { greyRamp } from '../../../theme/tokens/primitives'
+import { greyRamp, primitiveRamps } from '../../../theme/tokens/primitives'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
 
 // ---- geometry
@@ -29,19 +29,19 @@ export const INSET_SHADOW =
   'inset 0 9px 12px -6px rgba(0,0,0,0.85), inset 7px 0 10px -6px rgba(0,0,0,0.7), inset 0 -1px 0 rgba(255,255,255,0.02)'
 
 // ---- zone colors = real titan ramp pins (primitiveRamps)
-export const RED = '#D14343' // red 600
-export const ORANGE = '#FF7900' // orange 400
-export const AMBER = '#F9B415' // amber 300
-export const GREEN = '#2ED573' // green 300
+export const RED = primitiveRamps.red[600]
+export const ORANGE = primitiveRamps.orange[400]
+export const AMBER = primitiveRamps.amber[300]
+export const GREEN = primitiveRamps.green[300]
 export const velColor = (v: number): string =>
   v < 0.5 ? RED : v < 0.75 ? ORANGE : v < 1.0 ? AMBER : GREEN
 
 // active-set pulse: each segment eases along its own ramp (adjacent lighter/darker steps) through the pin.
 export const PULSE_CSS = `
-@keyframes s3pRed{0%,100%{background:#E05254}50%{background:#A4221C}}
-@keyframes s3pOrange{0%,100%{background:#FFA063}50%{background:#DA5F00}}
-@keyframes s3pAmber{0%,100%{background:#FFD352}50%{background:#E08C00}}
-@keyframes s3pGreen{0%,100%{background:#58F69E}50%{background:#21C05D}}`
+@keyframes s3pRed{0%,100%{background:${primitiveRamps.red[500]}}50%{background:${primitiveRamps.red[700]}}}
+@keyframes s3pOrange{0%,100%{background:${primitiveRamps.orange[300]}}50%{background:${primitiveRamps.orange[500]}}}
+@keyframes s3pAmber{0%,100%{background:${primitiveRamps.amber[200]}}50%{background:${primitiveRamps.amber[400]}}}
+@keyframes s3pGreen{0%,100%{background:${primitiveRamps.green[200]}}50%{background:${primitiveRamps.green[400]}}}`
 export const pulseAnim = (c: string): string | undefined => {
   const name =
     c === RED
@@ -58,6 +58,7 @@ export const pulseAnim = (c: string): string | undefined => {
 
 // ---- sets/reps/load in the TempoDisplay visual language (Inter · 600 · letter-spacing 1 · gray separators)
 const INTER = 'Inter, sans-serif'
+// VW-82: Tailwind gray-500; no ramp step matches. Left raw, proposed in the PR.
 const SRL_SEP = '#6B7280'
 function SRLCell({ children, color = T_PRIMARY }: { children: ReactNode; color?: string }) {
   return (
@@ -136,7 +137,7 @@ export function SetStrip({ sets, h }: { sets: SetState[]; h: number }) {
 }
 
 export function Indicator({ kind }: { kind: 'pr' | 'issue' | 'info' }) {
-  const map = { pr: ['★', ORANGE], issue: ['!', RED], info: ['i', '#2196F3'] } as const
+  const map = { pr: ['★', ORANGE], issue: ['!', RED], info: ['i', T['status-info']] } as const
   const [glyph, color] = map[kind]
   return (
     <span
@@ -336,6 +337,7 @@ export function Page({
     <div
       style={{
         minHeight: '100vh',
+        // VW-82: no token at this value (nearest background-frame #100D0A).
         background: '#0A0A0A',
         color: T_PRIMARY,
         padding: 28,

package/src/components/custom/Workout/velocity-story-kit.tsx

@@ -116,8 +116,8 @@ export const VIEW_HEIGHT: Record<StripView, { single: number; dual: number }> =
 
 export type StripView = 'compact' | 'expanded' | 'hero'
 
-/** The dual renderer for a view. `expanded`'s dual is the lean `rail` (a verified misnomer). */
-export const dualVariantFor = (view: StripView) => (view === 'expanded' ? 'rail' : view)
+/** The dual renderer for a view. `expanded`'s dual is the lean `dual-expanded` renderer. */
+export const dualVariantFor = (view: StripView) => (view === 'expanded' ? 'dual-expanded' : view)
 
 /**
  * One scenario, rendered single above dual on the same dataset.

package/src/components/custom/charts/README.md

@@ -16,6 +16,7 @@ come from [`src/arch/arch-graph.json`](../../../arch/arch-graph.json).
 | `SparkBars`       | atom | `resolveColor`, `cn`                            | FileActivityDetail, FileActivityRow (ActiveWork)       | yes          |
 | `SetBarChart`     | atom | `barPaper`, `SurfaceContext`, `live-rep-growth` | RomProgressionChart (Fatigue), VelocityStrip (Workout) | no — by path |
 | `live-rep-growth` | hook | `Animated`, `Easing`                            | SetBarChart, VelocityStrip                             | no — by path |
+| `flatBarGeometry` | module | —                                              | SegmentedBar (Workout), SetBarChart                    | no — by path |
 
 `SetBarChart` and `live-rep-growth` are deliberately absent from `index.ts`: they
 are workout-internal and imported by path, so the public barrel stays one mark
@@ -39,6 +40,10 @@ as a series, and `maxBars` because a sparkline is a recent-history glance.
 so every value-height family animates the live rep identically. It carries the
 12% `PEAK_OVERSHOOT` for a new-peak bar and honours `prefers-reduced-motion`.
 
+**`flatBarGeometry`** is the single source for the default height/gap/radius
+`SegmentedBar` (set-level) and `SetBarChart` (rep-level) each declare, documented
+as intentionally different sizes rather than left to drift apart unnoticed (VW-86).
+
 ## Reuse audit
 
 | Leaf                  | Should compose        | Status                                                                                                                                   |

package/src/components/custom/charts/SetBarChart.test.tsx

@@ -7,12 +7,28 @@ import {
   valueLabelFontSize,
   estimateValueLabelWidth,
   shouldFlipEdgeLabel,
+  scaleDenominator,
+  FIXED_MAX_VALUE,
+  PEAK_HEADROOM,
   type SetSlot,
 } from './SetBarChart'
 
 const reps = (values: number[]): SetSlot[] => values.map((v) => ({ kind: 'rep', value: v }))
 const silver = () => '#C7CBD1'
 
+describe('scaleDenominator', () => {
+  it('gives `fixed` the same headroom band above its ceiling as `peak` gets above its max', () => {
+    // Pinned: without this headroom, a rep AT the fixed ceiling fills the plot with zero margin
+    // above it, unlike an equally-tall `peak` bar (which always keeps PEAK_HEADROOM's margin).
+    expect(scaleDenominator('fixed', 0)).toBeCloseTo(FIXED_MAX_VALUE * PEAK_HEADROOM)
+    expect(scaleDenominator('peak', 1)).toBeCloseTo(1 * PEAK_HEADROOM)
+  })
+
+  it('ignores the performed max for `fixed` — the ceiling stays constant across sets', () => {
+    expect(scaleDenominator('fixed', 0.5)).toBe(scaleDenominator('fixed', 100))
+  })
+})
+
 describe('valueLabelFontSize', () => {
   it('reads the full 12px at the standard single-hero (220) and dual-wing (110) scales', () => {
     expect(valueLabelFontSize(220)).toBe(12)

package/src/components/custom/charts/SetBarChart.tsx

@@ -23,6 +23,7 @@ import { primitiveRamps } from '../../../theme/tokens/primitives'
 import { barPaper } from '../../../theme/materials'
 import { useOnSurfaceColor, useSurface, surfaceBackground } from '../../ui/surface/SurfaceContext'
 import { useLiveRepGrowth } from './live-rep-growth'
+import { REP_LEVEL_FLAT_BAR } from './flatBarGeometry'
 
 /** Linear-blend two #RRGGBB hexes (`t`=0 → a, 1 → b) — the surface-relative solid to-do tone. */
 function mixHex(a: string, b: string, t: number): string {
@@ -188,13 +189,21 @@ export interface SetBarChartProps {
 }
 
 /** The `scale="fixed"` velocity ceiling (m/s) — a bar height reads the same absolute value across sets. */
-const FIXED_MAX_VALUE = 1.15
-/** Headroom above the peak bar: just enough to seat its value label without a big empty band on top. */
+export const FIXED_MAX_VALUE = 1.15
+/**
+ * Headroom above the scaling ceiling: just enough to seat the peak bar's value label without a big
+ * empty band on top. Applied to BOTH scales — `peak` already multiplies the performed max by this,
+ * but `fixed` used the bare ceiling with none: a rep AT or PAST `FIXED_MAX_VALUE` (a fast lift on a
+ * live wall, not just a theoretical edge) filled the plot to its very top with no room left for that
+ * bar's own label, while an equally-tall `peak` bar always kept this margin. Multiplying `fixed`'s
+ * denominator by the same constant gives both scales the identical breathing room above their tallest
+ * bar, so a lift at the ceiling reads the same on either scale.
+ */
 export const PEAK_HEADROOM = 1.03
 
 /** The height-scaling denominator for `scale` at the given performed max (guarded ≥ 0 by callers). */
 export function scaleDenominator(scale: 'peak' | 'fixed', maxValue: number): number {
-  return scale === 'fixed' ? FIXED_MAX_VALUE : maxValue * PEAK_HEADROOM
+  return (scale === 'fixed' ? FIXED_MAX_VALUE : maxValue) * PEAK_HEADROOM
 }
 
 /**
@@ -235,7 +244,7 @@ const LABEL_GAP = 3
 /** Inter-bar gap as a fraction of bar width — the locked dense default (near expanded density). */
 export const GAP_RATIO = 0.08
 /** Floor on the proportional inter-bar gap (px) — narrow plots tighten to ~expanded density. */
-const MIN_BAR_GAP = 2
+const MIN_BAR_GAP = REP_LEVEL_FLAT_BAR.gapFloor
 /**
  * The EXTRA margin at a chunk boundary (drop sub-load / myo cluster / cluster intra-rest), as a
  * fraction of bar width — proportional so it scales with the dense spacing and reads as a clear
@@ -250,7 +259,7 @@ export const BAR_MAX_WIDTH = 120
 /** Below this per-bar width the value labels collide, so all but the peak + live rep are dropped. */
 const LABEL_MIN_BAR_WIDTH = 30
 /** Default top-corner radius on bars (px). */
-const DEFAULT_BAR_RADIUS = 5
+const DEFAULT_BAR_RADIUS = REP_LEVEL_FLAT_BAR.radius
 /** Minimum drawn height of a performed bar (px) — a near-zero rep still reads as a rep. */
 const MIN_BAR_HEIGHT = 4
 /** In `flat` (compact) mode every rep bar is this fraction of the plot height — a uniform short bar. */

package/src/components/custom/charts/flatBarGeometry.test.ts

@@ -0,0 +1,41 @@
+import { readFileSync } from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+import { SET_LEVEL_FLAT_BAR, REP_LEVEL_FLAT_BAR } from './flatBarGeometry'
+
+const DIR = path.dirname(fileURLToPath(import.meta.url))
+const segmentedBarSource = readFileSync(path.join(DIR, '../Workout/SegmentedBar.tsx'), 'utf8')
+const setBarChartSource = readFileSync(path.join(DIR, 'SetBarChart.tsx'), 'utf8')
+
+describe('flat-bar geometry (VW-86)', () => {
+  it('documents intentionally different set-level and rep-level sizes', () => {
+    expect(SET_LEVEL_FLAT_BAR).toEqual({ height: 8, gap: 5, radius: 2 })
+    expect(REP_LEVEL_FLAT_BAR).toEqual({ height: null, gapFloor: 2, radius: 5 })
+  })
+
+  it('SegmentedBar imports its geometry from the shared module rather than its own literals', () => {
+    expect(segmentedBarSource).toMatch(
+      /import\s*\{\s*SET_LEVEL_FLAT_BAR\s*\}\s*from\s*'\.\.\/charts\/flatBarGeometry'/
+    )
+    // The old hardcoded defaults must be gone from the component's own prop destructuring.
+    expect(segmentedBarSource).not.toMatch(/height\s*=\s*8\b/)
+    expect(segmentedBarSource).not.toMatch(/radius\s*=\s*2\b/)
+    expect(segmentedBarSource).toMatch(/height\s*=\s*SET_LEVEL_FLAT_BAR\.height/)
+    expect(segmentedBarSource).toMatch(/radius\s*=\s*SET_LEVEL_FLAT_BAR\.radius/)
+  })
+
+  it('SetBarChart imports its geometry from the shared module rather than its own literals', () => {
+    expect(setBarChartSource).toMatch(
+      /import\s*\{\s*REP_LEVEL_FLAT_BAR\s*\}\s*from\s*'\.\/flatBarGeometry'/
+    )
+    expect(setBarChartSource).not.toMatch(/const MIN_BAR_GAP = 2\b/)
+    expect(setBarChartSource).not.toMatch(/const DEFAULT_BAR_RADIUS = 5\b/)
+    expect(setBarChartSource).toMatch(/const MIN_BAR_GAP = REP_LEVEL_FLAT_BAR\.gapFloor/)
+    expect(setBarChartSource).toMatch(/const DEFAULT_BAR_RADIUS = REP_LEVEL_FLAT_BAR\.radius/)
+  })
+
+  it('SegmentedBar keeps SEGMENTED_BAR_GAP derived from the shared set-level gap', () => {
+    expect(segmentedBarSource).toMatch(/const SEGMENTED_BAR_GAP = SET_LEVEL_FLAT_BAR\.gap/)
+  })
+})

package/src/components/custom/charts/flatBarGeometry.ts

@@ -0,0 +1,32 @@
+/**
+ * The flat-bar geometry `SegmentedBar` (set-level: one row per SET, e.g. SetStrip/SessionRail)
+ * and `SetBarChart` (rep-level: one bar per REP within a set) each declare as their own component
+ * defaults. VW-86 named the fact that these lived in two files with no shared source as the drift
+ * risk: a future edit to one could silently diverge from the other without anyone noticing they
+ * were ever meant to be compared.
+ *
+ * They are NOT unified into one set of numbers — a strip of SETS across a session and a chart of
+ * REPS within one set are genuinely different sizes by design. This module exists so that
+ * difference is a documented, single-sourced choice instead of two numbers that happen to match
+ * or drift by accident.
+ */
+
+/** `SegmentedBar`'s own default geometry (set-level: one row per SET). */
+export const SET_LEVEL_FLAT_BAR = {
+  /** Track height (px). */
+  height: 8,
+  /** Gap between segment slots (px) — also SetStrip's between-set gap, see `SEGMENTED_BAR_GAP`. */
+  gap: 5,
+  /** Corner radius (px). */
+  radius: 2,
+} as const
+
+/** `SetBarChart`'s own default geometry (rep-level: one bar per REP within a set). */
+export const REP_LEVEL_FLAT_BAR = {
+  /** No fixed height default — SetBarChart's `height` is a required prop set by the caller. */
+  height: null,
+  /** Inter-bar gap is proportional (`gapRatio · barWidth`), floored at this many px. */
+  gapFloor: 2,
+  /** Corner radius (px) default. */
+  radius: 5,
+} as const

package/src/components/custom/stepper/Stepper.tsx

@@ -161,6 +161,13 @@ export function StepIndicator({
     error: 'bg-status-error border-status-error',
   }
 
+  const glyphStyles: Record<StepStatus, string> = {
+    completed: 'text-on-brand-primary',
+    active: 'text-on-brand-primary',
+    upcoming: 'text-text-secondary',
+    error: 'text-on-status-error',
+  }
+
   return (
     <View
       className={cn(
@@ -170,12 +177,7 @@ export function StepIndicator({
       )}
     >
       {icon || (
-        <Text
-          className={cn(
-            'text-sm font-semibold',
-            status === 'upcoming' ? 'text-text-secondary' : 'text-white'
-          )}
-        >
+        <Text className={cn('text-sm font-semibold', glyphStyles[status])}>
           {status === 'completed' ? '✓' : index + 1}
         </Text>
       )}

package/src/components/ui/alert/Alert.stories.tsx

@@ -1,6 +1,7 @@
 import type { Decorator, Meta, StoryObj } from '@storybook/react-vite'
 import { View, Text } from 'react-native'
 import { Alert, AlertTitle, AlertDescription } from './Alert'
+import { greyRamp } from '../../../theme/tokens/primitives'
 
 const meta: Meta<typeof Alert> = {
   title: 'Components/Molecules/Alert',
@@ -178,7 +179,7 @@ export const DescriptionOnly: Story = {
 
 /** Wall-background frame for the compact cue stories. */
 const wall: Decorator = (Story) => (
-  <View style={{ width: 460, padding: 28, backgroundColor: '#0E0E0E' }}>
+  <View style={{ width: 460, padding: 28, backgroundColor: 'var(--color-background-frame)' }}>
     <Story />
   </View>
 )
@@ -219,13 +220,22 @@ export const CompactLiveCue: Story = {
 /** Default vs compact, side by side, for the density comparison. */
 export const DefaultVsCompact: Story = {
   render: () => (
-    <View style={{ gap: 16, width: 460, padding: 28, backgroundColor: '#0E0E0E' }}>
-      <Text style={{ color: '#5A5A5A', fontSize: 10, fontWeight: '700' }}>DEFAULT</Text>
+    <View
+      style={{
+        gap: 16,
+        width: 460,
+        padding: 28,
+        backgroundColor: 'var(--color-background-frame)',
+      }}
+    >
+      <Text style={{ color: greyRamp[700], fontSize: 10, fontWeight: '700' }}>DEFAULT</Text>
       <Alert status="warning" variant="subtle">
         <AlertTitle>Approaching threshold</AlertTitle>
         <AlertDescription>18% velocity loss — one or two reps left in the band.</AlertDescription>
       </Alert>
-      <Text style={{ color: '#5A5A5A', fontSize: 10, fontWeight: '700' }}>COMPACT (cue pill)</Text>
+      <Text style={{ color: greyRamp[700], fontSize: 10, fontWeight: '700' }}>
+        COMPACT (cue pill)
+      </Text>
       <Alert
         status="warning"
         variant="subtle"

package/src/components/ui/alert/Alert.tsx

@@ -44,42 +44,54 @@ const statusColors: Record<
     subtle: string
     outline: string
     solid: string
+    /** Text/glyph colour on the `solid` fill — the status's on-colour. */
+    onSolid: string
     border: string
     icon: string
     text: string
+    /** Label ON the `subtle` fill — see AW-133; the base token is too deep to read there. */
+    subtleText: string
   }
 > = {
   success: {
     subtle: 'bg-status-success-subtle',
     outline: 'border-2 border-status-success bg-transparent',
     solid: 'bg-status-success',
+    onSolid: 'text-on-status-success',
     border: 'border-status-success',
     icon: 'text-status-success',
     text: 'text-status-success',
+    subtleText: 'text-on-status-success-subtle',
   },
   info: {
     subtle: 'bg-status-info-subtle',
     outline: 'border-2 border-status-info bg-transparent',
     solid: 'bg-status-info',
+    onSolid: 'text-on-status-info',
     border: 'border-status-info',
     icon: 'text-status-info',
     text: 'text-status-info',
+    subtleText: 'text-on-status-info-subtle',
   },
   warning: {
     subtle: 'bg-status-warning-subtle',
     outline: 'border-2 border-status-warning bg-transparent',
     solid: 'bg-status-warning',
+    onSolid: 'text-on-status-warning',
     border: 'border-status-warning',
     icon: 'text-status-warning',
     text: 'text-status-warning',
+    subtleText: 'text-on-status-warning-subtle',
   },
   error: {
     subtle: 'bg-status-error-subtle',
     outline: 'border-2 border-status-error bg-transparent',
     solid: 'bg-status-error',
+    onSolid: 'text-on-status-error',
     border: 'border-status-error',
     icon: 'text-status-error',
     text: 'text-status-error',
+    subtleText: 'text-on-status-error-subtle',
   },
 }
 
@@ -142,7 +154,7 @@ export function Alert({
               className={cn(
                 'font-bold',
                 isCompact ? 'text-base' : 'text-lg',
-                isSolid ? 'text-white' : colors.icon
+                isSolid ? colors.onSolid : variant === 'subtle' ? colors.subtleText : colors.icon
               )}
             >
               {defaultIcons[status]}
@@ -154,7 +166,10 @@ export function Alert({
       <View className="flex-1">
         {message != null && (
           <Text
-            className={cn('text-sm font-semibold', isSolid ? 'text-white' : colors.text)}
+            className={cn(
+              'text-sm font-semibold',
+              isSolid ? colors.onSolid : variant === 'subtle' ? colors.subtleText : colors.text
+            )}
             testID="alert-message"
           >
             {message}
@@ -168,9 +183,15 @@ export function Alert({
           onPress={onClose}
           accessibilityRole="button"
           accessibilityLabel="Close alert"
+          /* VW-82: press-state scrims stay raw (see Modal.tsx). */
           className="ml-2 p-1 rounded web:hover:bg-black/10 active:bg-black/20"
         >
-          <Text className={cn('text-lg', isSolid ? 'text-white/70' : 'text-text-secondary')}>
+          <Text
+            className={cn(
+              'text-lg',
+              isSolid ? cn(colors.onSolid, 'opacity-70') : 'text-text-secondary'
+            )}
+          >
             ×
           </Text>
         </Pressable>

package/src/components/ui/button/Button.tsx

@@ -10,12 +10,12 @@ export type ButtonColor = 'primary' | 'secondary' | 'success' | 'error' | 'warni
 /** Inline color map for RNW where Tailwind text classes get dropped */
 const textColorMap: Record<ButtonVariant, Record<ButtonColor, string>> = {
   solid: {
-    primary: '#FFFFFF',
-    secondary: '#FFFFFF',
-    success: '#FFFFFF',
-    error: '#FFFFFF',
-    warning: '#FFFFFF',
-    info: '#FFFFFF',
+    primary: semanticColorsDark['on-brand-primary'],
+    secondary: semanticColorsDark['on-brand-secondary'],
+    success: semanticColorsDark['on-status-success'],
+    error: semanticColorsDark['on-status-error'],
+    warning: semanticColorsDark['on-status-warning'],
+    info: semanticColorsDark['on-status-info'],
   },
   outline: {
     primary: semanticColorsDark['brand-primary'],
@@ -128,12 +128,12 @@ const variantStyles: Record<ButtonVariant, Record<ButtonColor, string>> = {
 
 const textStyles: Record<ButtonVariant, Record<ButtonColor, string>> = {
   solid: {
-    primary: 'text-white',
-    secondary: 'text-white',
-    success: 'text-white',
-    error: 'text-white',
-    warning: 'text-white',
-    info: 'text-white',
+    primary: 'text-on-brand-primary',
+    secondary: 'text-on-brand-secondary',
+    success: 'text-on-status-success',
+    error: 'text-on-status-error',
+    warning: 'text-on-status-warning',
+    info: 'text-on-status-info',
   },
   outline: {
     primary: 'text-brand-primary',

package/src/components/ui/checkbox/Checkbox.tsx

@@ -93,12 +93,12 @@ export const Checkbox = forwardRef<View, CheckboxProps>(function Checkbox(
         )}
       >
         {isChecked && !isIndeterminate && (
-          <View className={cn('bg-white rounded-sm', styles.icon)}>
+          <View className={cn('bg-on-brand-primary rounded-sm', styles.icon)}>
             {/* Checkmark icon - using a simple view as placeholder */}
             <Text className="text-brand-primary font-bold text-center leading-none">✓</Text>
           </View>
         )}
-        {isIndeterminate && <View className={cn('bg-white h-0.5 w-2/3 rounded')} />}
+        {isIndeterminate && <View className={cn('bg-on-brand-primary h-0.5 w-2/3 rounded')} />}
       </View>
 
       {(label || helperText) && (

package/src/components/ui/data-row/DataRow.stories.tsx

@@ -42,13 +42,17 @@ export const WithCustomValue: Story = {
       value={
         <View
           style={{
-            backgroundColor: '#22c55e',
+            backgroundColor: 'var(--color-status-success)',
             borderRadius: 9999,
             paddingHorizontal: 8,
             paddingVertical: 2,
           }}
         >
-          <Text style={{ color: '#fff', fontSize: 12, fontWeight: '600' }}>Active</Text>
+          <Text
+            style={{ color: 'var(--color-on-status-success)', fontSize: 12, fontWeight: '600' }}
+          >
+            Active
+          </Text>
         </View>
       }
     />

package/src/components/ui/drawer/Drawer.tsx

@@ -103,7 +103,10 @@ export function Drawer({
     <Modal visible={isOpen} transparent animationType="fade" onRequestClose={onClose}>
       <View className="flex-1">
         {/* Backdrop */}
-        <Pressable onPress={handleOverlayPress} className="absolute inset-0 bg-black/50" />
+        <Pressable
+          onPress={handleOverlayPress}
+          className="absolute inset-0 bg-black/50" /* VW-82: scrim, see Modal.tsx */
+        />
 
         {/* Drawer Panel — floating: overlay plane + lift, no ring. */}
         <Surface

package/src/components/ui/icon-box/IconBox.tsx

@@ -13,13 +13,15 @@ export interface IconBoxProps extends ViewProps {
   className?: string
 }
 
+// `-subtle` is the wash ladder's lightest rung. It replaces a `/10` opacity
+// modifier, which emitted no rule at all against a var()-backed token (VW-308).
 const colorClasses: Record<IconBoxColor, { bg: string; icon: string }> = {
-  primary: { bg: 'bg-brand-primary/10', icon: 'text-brand-primary' },
-  secondary: { bg: 'bg-brand-secondary/10', icon: 'text-brand-secondary' },
-  success: { bg: 'bg-status-success/10', icon: 'text-status-success' },
-  error: { bg: 'bg-status-error/10', icon: 'text-status-error' },
-  warning: { bg: 'bg-status-warning/10', icon: 'text-status-warning' },
-  info: { bg: 'bg-status-info/10', icon: 'text-status-info' },
+  primary: { bg: 'bg-brand-primary-subtle', icon: 'text-brand-primary' },
+  secondary: { bg: 'bg-brand-secondary-subtle', icon: 'text-brand-secondary' },
+  success: { bg: 'bg-status-success-subtle', icon: 'text-status-success' },
+  error: { bg: 'bg-status-error-subtle', icon: 'text-status-error' },
+  warning: { bg: 'bg-status-warning-subtle', icon: 'text-status-warning' },
+  info: { bg: 'bg-status-info-subtle', icon: 'text-status-info' },
   neutral: { bg: 'bg-surface-elevated', icon: 'text-text-secondary' },
 }