@titan-design/react-ui 0.12.1 → 0.14.0

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

@@ -53,6 +53,8 @@ export interface TempoDisplayProps extends ViewProps {
 }
 
 const INTER = 'Inter, sans-serif'
+// VW-82: Tailwind gray-500, not titan's text-tertiary (#888684) despite the name.
+// Left raw — re-pointing it at the ramp is a visual change awaiting sign-off.
 const TEXT_TERTIARY = '#6B7280'
 const STATUS_ERROR = t['status-error'] // slow — over the target time
 const STATUS_SUCCESS = t['status-success'] // on target (within the band of 0.0)

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

@@ -183,7 +183,15 @@ const muscles: TrainingStatusMuscle[] = [
 const meta: Meta<typeof TrainingStatusPage> = {
   title: 'Pages/Training Status',
   component: TrainingStatusPage,
-  parameters: { layout: 'fullscreen' },
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Composes **BodyMap** · **BodyMapDetailPanel** · **MesoStatusCard** · **MuscleGroup**.',
+      },
+    },
+  },
   tags: ['autodocs'],
   args: { title: 'Training Status', meso, muscles },
 }

package/src/components/custom/Workout/VelocityStrip.compact.stories.tsx

@@ -23,8 +23,11 @@ import {
  * vertical space as a single — 2x is only forced for the value-height expanded.
  */
 const meta: Meta<typeof VelocityStrip> = {
-  title: 'Workout/DataViz/VelocityStrip/Compact',
+  title: 'Custom/Workout/DataViz/VelocityStrip/Compact',
   component: VelocityStrip,
+  parameters: {
+    docs: { description: { component: 'Composes **SetBarChart** · **ChartSideRail**.' } },
+  },
   tags: ['autodocs'],
 }
 export default meta

package/src/components/custom/Workout/VelocityStrip.dual.stories.tsx

@@ -17,9 +17,9 @@ import {
  * Dual is **not a fourth view**, so its scenario coverage lives in the
  * per-view groups, where every scenario renders single ABOVE dual on one
  * dataset:
- * [Compact](?path=/docs/workout-dataviz-velocitystrip-compact--docs) ·
- * [Expanded](?path=/docs/workout-dataviz-velocitystrip-expanded--docs) ·
- * [Hero](?path=/docs/workout-dataviz-velocitystrip-hero--docs).
+ * [Compact](?path=/docs/custom-workout-dataviz-velocitystrip-compact--docs) ·
+ * [Expanded](?path=/docs/custom-workout-dataviz-velocitystrip-expanded--docs) ·
+ * [Hero](?path=/docs/custom-workout-dataviz-velocitystrip-hero--docs).
  *
  * This group exists for the two things a pairing cannot carry: the exported
  * **API** (`DualVelocityStripProps`, in the args table below) and the layout
@@ -37,8 +37,11 @@ import {
  * not a hardcoded side. Single-slot sets keep using `VelocityStrip`.
  */
 const meta: Meta<typeof DualVelocityStrip> = {
-  title: 'Workout/DataViz/VelocityStrip/Dual',
+  title: 'Custom/Workout/DataViz/VelocityStrip/Dual',
   component: DualVelocityStrip,
+  parameters: {
+    docs: { description: { component: 'Composes **SetBarChart** · **ChartSideRail**.' } },
+  },
   tags: ['autodocs'],
   decorators: [wallDecorator],
   argTypes: {
@@ -54,9 +57,10 @@ const meta: Meta<typeof DualVelocityStrip> = {
     },
     variant: {
       control: 'inline-radio',
-      options: ['hero', 'compact', 'rail'],
+      options: ['hero', 'compact', 'dual-expanded'],
       description:
-        'hero (wall: labels + reference lines), compact (flat resting fold), or rail (lean, neither)',
+        'hero (wall: labels + reference lines), compact (flat resting fold), or dual-expanded ' +
+        '(lean, neither — `"rail"` is a deprecated alias for the same renderer)',
     },
     scale: {
       control: 'inline-radio',

package/src/components/custom/Workout/VelocityStrip.expanded.stories.tsx

@@ -32,8 +32,11 @@ import {
  * meaning.
  */
 const meta: Meta<typeof VelocityStrip> = {
-  title: 'Workout/DataViz/VelocityStrip/Expanded',
+  title: 'Custom/Workout/DataViz/VelocityStrip/Expanded',
   component: VelocityStrip,
+  parameters: {
+    docs: { description: { component: 'Composes **SetBarChart** · **ChartSideRail**.' } },
+  },
   tags: ['autodocs'],
 }
 export default meta
@@ -196,7 +199,7 @@ export const Responsive: Story = {
           <DualVelocityStrip
             left={{ velocities: REP_SET, label: 'Left' }}
             right={{ velocities: REP_SET_LAGGING, label: 'Right' }}
-            variant="rail"
+            variant="dual-expanded"
             height={h}
             scale="fixed"
           />

package/src/components/custom/Workout/VelocityStrip.hero.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View } from 'react-native'
 import { VelocityStrip, DualVelocityStrip } from './VelocityStrip'
+import { FIXED_MAX_VALUE, PEAK_HEADROOM } from '../charts/SetBarChart'
 import {
   Sheet,
   Note,
@@ -31,8 +32,11 @@ import {
  * sets and do not reflow as each rep lands.
  */
 const meta: Meta<typeof VelocityStrip> = {
-  title: 'Workout/DataViz/VelocityStrip/Hero',
+  title: 'Custom/Workout/DataViz/VelocityStrip/Hero',
   component: VelocityStrip,
+  parameters: {
+    docs: { description: { component: 'Composes **SetBarChart** · **ChartSideRail**.' } },
+  },
   tags: ['autodocs'],
 }
 export default meta
@@ -213,6 +217,45 @@ export const RepTypes: Story = {
   ),
 }
 
+/**
+ * VW-97: `scale="fixed"` used the bare `FIXED_MAX_VALUE` ceiling with no headroom multiplier, so a
+ * rep AT the ceiling filled the plot to its very top with no room for its own label — unlike an
+ * equally-tall `peak` bar, which always kept `PEAK_HEADROOM`'s margin. `scaleDenominator` now
+ * applies the same headroom to both scales.
+ *
+ * "Before" reproduces the old denominator through the public `scaleMax` prop (`scaleMax *
+ * PEAK_HEADROOM` cancels back down to the bare ceiling) rather than a hand-rolled duplicate, so
+ * this story exercises the real component on both sides.
+ */
+export const FixedScaleHeadroom: Story = {
+  name: 'Fixed Scale Headroom (VW-97)',
+  decorators: [wallDecorator],
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 24 }}>
+      <View style={{ gap: 8, flex: 1 }}>
+        <ViewLabel text="before · ceiling bar touches the plot top" />
+        <VelocityStrip
+          velocities={[FIXED_MAX_VALUE, FIXED_MAX_VALUE * 0.6]}
+          variant="hero"
+          label="Set"
+          height={140}
+          scaleMax={FIXED_MAX_VALUE / PEAK_HEADROOM}
+        />
+      </View>
+      <View style={{ gap: 8, flex: 1 }}>
+        <ViewLabel text="after · fixed reserves the same headroom peak does" />
+        <VelocityStrip
+          velocities={[FIXED_MAX_VALUE, FIXED_MAX_VALUE * 0.6]}
+          variant="hero"
+          label="Set"
+          height={140}
+          scale="fixed"
+        />
+      </View>
+    </View>
+  ),
+}
+
 export const EdgeCases: Story = {
   name: 'Edge Cases',
   decorators: [wallDecorator],

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

@@ -16,14 +16,15 @@ import {
   REP_SET_LAGGING,
   type StripView,
 } from './velocity-story-kit'
+import { Surface } from '../../ui/surface'
 
 /**
  * Per-rep velocity strip.
  *
  * Three views, each with its own story group:
- * - **[Compact](?path=/docs/workout-dataviz-velocitystrip-compact--docs)** — the flat resting strip
- * - **[Expanded](?path=/docs/workout-dataviz-velocitystrip-expanded--docs)** — the value-height chart
- * - **[Hero](?path=/docs/workout-dataviz-velocitystrip-hero--docs)** — the across-the-room wall treatment
+ * - **[Compact](?path=/docs/custom-workout-dataviz-velocitystrip-compact--docs)** — the flat resting strip
+ * - **[Expanded](?path=/docs/custom-workout-dataviz-velocitystrip-expanded--docs)** — the value-height chart
+ * - **[Hero](?path=/docs/custom-workout-dataviz-velocitystrip-hero--docs)** — the across-the-room wall treatment
  *
  * Dual is NOT a fourth view. It is the same strip when the exercise used two
  * Voltras, so every group pairs single above dual on one dataset.
@@ -39,8 +40,13 @@ import {
  * live in the three group files above.
  */
 const meta: Meta<typeof VelocityStrip> = {
-  title: 'Workout/DataViz/VelocityStrip',
+  title: 'Custom/Workout/DataViz/VelocityStrip',
   component: VelocityStrip,
+  parameters: {
+    docs: {
+      description: { component: 'Composes **SetBarChart** · **ChartSideRail** · **SessionRail**.' },
+    },
+  },
   tags: ['autodocs'],
   argTypes: {
     variant: {
@@ -98,9 +104,9 @@ export const Playground: Story = {
   },
   decorators: [
     (Story) => (
-      <View style={{ width: 300, padding: 16, backgroundColor: SURFACE_BG }}>
+      <Surface level="base" style={{ width: 300, padding: 16 }}>
         <Story />
-      </View>
+      </Surface>
     ),
   ],
 }

package/src/components/custom/Workout/VelocityStrip.test.tsx

@@ -9,6 +9,7 @@ import {
   calculateMeanVelocity,
   getVelocityLossColor,
 } from './VelocityStrip'
+import { FIXED_MAX_VALUE } from '../charts/SetBarChart'
 
 const sampleVelocities = [1.1, 0.95, 0.82, 0.68, 0.45]
 
@@ -583,28 +584,69 @@ describe('VelocityStrip expanded bare strip (spotlight: numbers + info off)', ()
   })
 
   it('scales bar height to velocity against the fixed ceiling at the given height', () => {
+    const barPx = (id: string) => parseFloat(getComputedStyle(screen.getByTestId(id)).height)
     render(
       <VelocityStrip
         {...bareProps}
         scale="fixed"
         height={24}
-        set={{ type: 'straight', velocities: [1.15, 0.575], planned: 2 }}
+        set={{ type: 'straight', velocities: [0.6, 0.3], planned: 2 }}
       />
     )
-    expect(screen.getByTestId('velocity-bar-0')).toHaveStyle({ height: '24px' })
-    expect(screen.getByTestId('velocity-bar-1')).toHaveStyle({ height: '12px' })
+    // Proportional to velocity against the fixed ceiling, not the performed max — a 2:1 velocity
+    // ratio reads as a 2:1 bar-height ratio.
+    expect(barPx('velocity-bar-0')).toBeCloseTo(2 * barPx('velocity-bar-1'), 5)
   })
 
   it('honors height for the scaling', () => {
-    render(
+    const barPx = (id: string) => parseFloat(getComputedStyle(screen.getByTestId(id)).height)
+    const { unmount } = render(
       <VelocityStrip
         {...bareProps}
         scale="fixed"
         height={40}
-        set={{ type: 'straight', velocities: [1.15], planned: 1 }}
+        set={{ type: 'straight', velocities: [0.6], planned: 1 }}
+      />
+    )
+    const at40 = barPx('velocity-bar-0')
+    unmount()
+    render(
+      <VelocityStrip
+        {...bareProps}
+        scale="fixed"
+        height={80}
+        set={{ type: 'straight', velocities: [0.6], planned: 1 }}
+      />
+    )
+    expect(barPx('velocity-bar-0')).toBeCloseTo(2 * at40, 5)
+  })
+
+  it('reserves the same headroom above the fixed ceiling that `peak` reserves above its own max (VW-97)', () => {
+    // A rep AT the fixed ceiling must NOT fill the plot — it needs the identical margin an
+    // equally-tall `peak` bar always keeps for its own value label.
+    const { unmount } = render(
+      <VelocityStrip
+        {...bareProps}
+        scale="fixed"
+        height={100}
+        set={{ type: 'straight', velocities: [FIXED_MAX_VALUE], planned: 1 }}
+      />
+    )
+    const fixedAtCeilingPx = parseFloat(
+      getComputedStyle(screen.getByTestId('velocity-bar-0')).height
+    )
+    unmount()
+    render(
+      <VelocityStrip
+        {...bareProps}
+        scale="peak"
+        height={100}
+        set={{ type: 'straight', velocities: [1], planned: 1 }}
       />
     )
-    expect(screen.getByTestId('velocity-bar-0')).toHaveStyle({ height: '40px' })
+    const peakAtMaxPx = parseFloat(getComputedStyle(screen.getByTestId('velocity-bar-0')).height)
+    expect(fixedAtCeilingPx).toBeLessThan(100)
+    expect(fixedAtCeilingPx).toBeCloseTo(peakAtMaxPx, 5)
   })
 
   it('draws planned-but-undone reps as short grey todo stubs (set-type aware)', () => {

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

@@ -702,9 +702,14 @@ export interface DualVelocityStripProps extends ViewProps {
    * `hero` — the across-the-room wall scale: tall wings, per-rep m/s value labels, and a dashed
    * running-best reference line per side. `compact` — the flat resting form: dual-hero but flat +
    * no labels (both wings are the `compact` VelocityStrip variant), same aligned structure + shared
-   * gutter + axis. `rail` — the compact rail-expanded lean renderer, no labels / reference lines.
+   * gutter + axis. `dual-expanded` — the compact rail-expanded lean renderer, no labels / reference
+   * lines (VW-97: `rail` was a verified misnomer — this variant is the value-height strip a session
+   * rail row expands into, not the rail itself).
+   *
+   * `rail` is a **deprecated alias** for `dual-expanded` (same renderer, same output) — kept for one
+   * release so existing call sites keep working; see the Workout README.
    */
-  variant?: 'hero' | 'compact' | 'rail'
+  variant?: 'hero' | 'compact' | 'dual-expanded' | 'rail'
   /**
    * Bar-height scaling, shared across BOTH wings so the L/R asymmetry reads as bar
    * length against one scale. `peak` (default) = the pair's max +headroom; `fixed` =
@@ -926,12 +931,12 @@ function DualVelocityHero({
 }
 
 /**
- * The `rail` diverging chart — a lean, compact dedicated renderer. Composing the hero here would
- * drag in its value labels, reference lines, paper, and label headroom, none of which belong at
- * rail scale; instead it draws mirrored per-side bars at the compact rail metrics. Same shared
- * height scale + per-side loss coloring + mirrored radius + shared axis as the hero, but no labels
- * / reference lines / paper. (Set-type slot windows are a hero-composition concern; rail only ever
- * takes plain velocities.)
+ * The `dual-expanded` diverging chart (formerly `rail`) — a lean, compact dedicated renderer.
+ * Composing the hero here would drag in its value labels, reference lines, paper, and label
+ * headroom, none of which belong at this scale; instead it draws mirrored per-side bars at the
+ * compact metrics. Same shared height scale + per-side loss coloring + mirrored radius + shared
+ * axis as the hero, but no labels / reference lines / paper. (Set-type slot windows are a
+ * hero-composition concern; this renderer only ever takes plain velocities.)
  */
 function DualVelocityRail({
   leftDone,
@@ -1090,11 +1095,14 @@ export function DualVelocityStrip({
   className,
   ...props
 }: DualVelocityStripProps) {
+  // `rail` is the deprecated alias for `dual-expanded` — normalize once so every branch below
+  // reads one canonical value instead of re-checking both spellings.
+  const resolvedVariant = variant === 'rail' ? 'dual-expanded' : variant
   const resolvedHeight =
     height ??
-    (variant === 'hero'
+    (resolvedVariant === 'hero'
       ? DUAL_HERO_HEIGHT
-      : variant === 'compact'
+      : resolvedVariant === 'compact'
         ? DUAL_COMPACT_HEIGHT
         : DUAL_RAIL_HEIGHT)
   // The done arrays drive the shared max + per-side best + the summary counts; the raw streams
@@ -1123,10 +1131,11 @@ export function DualVelocityStrip({
     viewProps: props,
   }
 
-  // `liveRepIndex` reaches the rail too: its wings are composed strips, so the newest rep grows
-  // from the midline on BOTH sides. Compact is flat, so a grow animation has nothing to animate.
-  if (variant === 'rail') return <DualVelocityRail {...shared} liveRepIndex={liveRepIndex} />
-  if (variant === 'compact') return <DualVelocityCompactStrip {...shared} />
+  // `liveRepIndex` reaches dual-expanded too: its wings are composed strips, so the newest rep
+  // grows from the midline on BOTH sides. Compact is flat, so a grow animation has nothing to animate.
+  if (resolvedVariant === 'dual-expanded')
+    return <DualVelocityRail {...shared} liveRepIndex={liveRepIndex} />
+  if (resolvedVariant === 'compact') return <DualVelocityCompactStrip {...shared} />
   return <DualVelocityHero {...shared} liveRepIndex={liveRepIndex} />
 }
 
@@ -1252,6 +1261,9 @@ export function VelocityStrip({
         label={label}
         showValueLabels
         formatValue={formatVelocity}
+        // Only the diverging dual's composed wings opt in (TD-07.10) — the standalone single
+        // hero is unchanged, per columnSlots being the dual-only signal (see the comment above).
+        flipEdgeLabel={columnSlots != null}
         renderReference={(g) => velocityReferenceOverlay(g, lossBandsOn)}
         hideBaseline
         testID="velocity-strip-hero"

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

@@ -1,12 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View } from 'react-native'
 import { VolumeLandmarkBar } from './VolumeLandmarkBar'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
-
-const t = getSemanticColors('dark')
+import { Surface } from '../../ui/surface'
 
 const meta: Meta<typeof VolumeLandmarkBar> = {
-  title: 'Workout/DataViz/VolumeLandmarkBar',
+  title: 'Custom/Workout/DataViz/VolumeLandmarkBar',
   component: VolumeLandmarkBar,
   tags: ['autodocs'],
   parameters: {
@@ -15,7 +13,8 @@ const meta: Meta<typeof VolumeLandmarkBar> = {
         component:
           'Horizontal weekly-volume bar with MEV / MAV / MRV landmark ticks, a HEAT-scale ' +
           'fill positioned against the MAV target, and a % readout. Reuses the canonical ' +
-          'BodyMap volume heat scale (under → maintenance → productive → approaching → over).',
+          'BodyMap volume heat scale (under → maintenance → productive → approaching → over).' +
+          ' Composes **ZoneTrack** · **DataRow**.',
       },
     },
   },
@@ -31,9 +30,9 @@ const meta: Meta<typeof VolumeLandmarkBar> = {
   },
   decorators: [
     (Story) => (
-      <View style={{ padding: 24, paddingBottom: 40, backgroundColor: t['background-base'] }}>
+      <Surface level="background" style={{ padding: 24, paddingBottom: 40 }}>
         <Story />
-      </View>
+      </Surface>
     ),
   ],
 }

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

@@ -1,9 +1,10 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
-import { View, Text, type ViewProps } from 'react-native'
+import { View, type ViewProps } from 'react-native'
 import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
 import { greyRamp } from '../../../theme/tokens/primitives'
 import { ZoneTrack } from './ZoneTrack'
 import { DataRow } from '../../ui/data-row/DataRow'
+import { Typography } from '../Typography'
 import type { VolumeLandmarks } from './muscleTaxonomy'
 
 // Reuse the canonical BodyMap volume HEAT scale (the `divergingScale` under →
@@ -12,9 +13,11 @@ import type { VolumeLandmarks } from './muscleTaxonomy'
 const HEAT = WORKOUT_TOKENS.heatmap
 
 // The muted, un-reached track colour — the same grey step ZoneTrack defaults
-// to, so the bar sits on the shared gauge-track surface.
+// to, so the bar sits on the shared gauge-track surface. Kept as a ramp step
+// rather than `resolveColor('border-prominent')`: ZoneTrack takes literal hex
+// only, never a `var()` ref. FINDING for E3: the gauge-track grey has no
+// semantic token, and ZoneTrack (B5) cannot consume one until it can.
 const NEUTRAL_TRACK = greyRamp[800]
-const MONO = 'monospace'
 
 export type VolumeZone = 'under' | 'maintenance' | 'productive' | 'approaching' | 'over'
 
@@ -113,12 +116,18 @@ export function VolumeLandmarkBar({
       <DataRow
         label={muscle}
         value={
-          <Text
+          // `mono` at `sm` matches DataRow's own 14px label, so the header lockup
+          // stays at one type height. The face moves from bare `monospace` to the
+          // `font-mono` token stack.
+          <Typography
+            variant="mono"
+            color="inherit"
+            className="text-sm font-bold"
+            style={{ color: fillColor }}
             testID="volume-landmark-pct"
-            style={{ fontSize: 14, fontWeight: '700', fontFamily: MONO, color: fillColor }}
           >
             {pct}%
-          </Text>
+          </Typography>
         }
         className="py-0"
         testID="volume-landmark-header"

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

@@ -3,8 +3,11 @@ import { View } from 'react-native'
 import { WeekRow } from './WeekRow'
 
 const meta: Meta<typeof WeekRow> = {
-  title: 'Workout/WeekRow',
+  title: 'Custom/Workout/WeekRow',
   component: WeekRow,
+  parameters: {
+    docs: { description: { component: 'Composes **WorkoutPill** · **IntensityBar**.' } },
+  },
   tags: ['autodocs'],
   argTypes: {
     weekNumber: { control: 'number', description: 'Week index (1-based)' },

package/src/components/custom/Workout/WeekRow.test.tsx

@@ -3,6 +3,9 @@ import { render, screen, fireEvent } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { WeekRow } from './WeekRow'
 import type { WeekRowWorkout } from './WeekRow'
+import { resolveColor } from '../../../theme/resolve-color'
+import { WORKOUT_PILL_DELOAD } from '../../../theme/extracted-colors-dataviz'
+import { alpha } from '../../../utils/colors'
 
 const workouts: WeekRowWorkout[] = [
   { name: 'Upper', status: 'completed' },
@@ -57,11 +60,11 @@ describe('WeekRow', () => {
       expect(screen.queryByTestId('week-row-current-dot')).not.toBeInTheDocument()
     })
 
-    it('applies the current-week tint and left border', () => {
+    it('applies the current-week tint and left border from the brand tokens', () => {
       render(<WeekRow {...baseProps} isCurrent />)
       const style = screen.getByTestId('week-row').getAttribute('style') ?? ''
-      expect(style).toContain('background-color')
-      expect(style).toContain('border-left')
+      expect(style).toContain(`background-color: ${resolveColor('brand-primary-subtle')}`)
+      expect(style).toContain(`border-left-color: ${resolveColor('brand-primary')}`)
     })
   })
 
@@ -71,22 +74,24 @@ describe('WeekRow', () => {
       expect(screen.getAllByLabelText(/workout, deload/)).toHaveLength(3)
     })
 
-    it('applies a purple tint to the row', () => {
+    it('washes the row with the same deload pin WorkoutPill uses', () => {
       render(<WeekRow {...baseProps} isDeload />)
       const style = screen.getByTestId('week-row').getAttribute('style') ?? ''
-      expect(style).toContain('background-color')
+      expect(style).toContain(`background-color: ${alpha(WORKOUT_PILL_DELOAD, 0.06)}`)
+    })
+
+    it('lets a current deload week keep the brand rail over the deload wash', () => {
+      render(<WeekRow {...baseProps} isDeload isCurrent />)
+      const style = screen.getByTestId('week-row').getAttribute('style') ?? ''
+      expect(style).toContain(`background-color: ${resolveColor('brand-primary-subtle')}`)
+      expect(style).toContain(`border-left-color: ${resolveColor('brand-primary')}`)
     })
   })
 
   describe('interaction', () => {
     it('invokes onPress for a pressable workout', () => {
       const onPress = vi.fn()
-      render(
-        <WeekRow
-          {...baseProps}
-          workouts={[{ name: 'Upper', status: 'current', onPress }]}
-        />,
-      )
+      render(<WeekRow {...baseProps} workouts={[{ name: 'Upper', status: 'current', onPress }]} />)
       fireEvent.click(screen.getByTestId('workout-pill-pressable'))
       expect(onPress).toHaveBeenCalledOnce()
     })
@@ -95,9 +100,7 @@ describe('WeekRow', () => {
   describe('accessibility', () => {
     it('has a descriptive accessibility label', () => {
       render(<WeekRow {...baseProps} />)
-      expect(
-        screen.getByLabelText('Week 1 of 4, 3 workouts'),
-      ).toBeInTheDocument()
+      expect(screen.getByLabelText('Week 1 of 4, 3 workouts')).toBeInTheDocument()
     })
 
     it('has no accessibility violations', async () => {
@@ -108,7 +111,7 @@ describe('WeekRow', () => {
 
     it('has no accessibility violations as a current deload week', async () => {
       const { container } = render(
-        <WeekRow {...baseProps} isCurrent isDeload intensityThreshold={0.8} />,
+        <WeekRow {...baseProps} isCurrent isDeload intensityThreshold={0.8} />
       )
       const results = await axe(container)
       expect(results).toHaveNoViolations()

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

@@ -1,10 +1,17 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
-import { View, Text, type ViewProps } from 'react-native'
+import { View, type ViewProps } from 'react-native'
 import { WorkoutPill, type WorkoutPillStatus } from './WorkoutPill'
 import { IntensityBar } from './IntensityBar'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { Typography } from '../Typography'
+import { resolveColor } from '../../../theme/resolve-color'
+import { WORKOUT_PILL_DELOAD } from '../../../theme/extracted-colors-dataviz'
+import { alpha } from '../../../utils/colors'
 
-const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
+// Deload magenta has no semantic token — it is a ramp pin shared with WorkoutPill
+// (`extracted-colors-dataviz`). The row wash must track the pill exactly, so it
+// is derived from the same pin rather than mixed independently. FINDING for E3:
+// the deload role needs a `-subtle` token like every other status.
+const DELOAD_ROW_WASH = alpha(WORKOUT_PILL_DELOAD, 0.06)
 
 export interface WeekRowWorkout {
   name: string
@@ -58,6 +65,7 @@ export function WeekRow({
   className,
   ...props
 }: WeekRowProps) {
+  const brandPrimary = resolveColor('brand-primary')
   const rowStyle: Record<string, unknown> = {
     flexDirection: 'row' as const,
     alignItems: 'center' as const,
@@ -67,13 +75,14 @@ export function WeekRow({
   }
 
   if (isDeload) {
-    rowStyle.backgroundColor = 'rgba(186,41,150,0.06)'
+    rowStyle.backgroundColor = DELOAD_ROW_WASH
   }
 
+  // Current wins over deload: the active week keeps the brand rail and wash.
   if (isCurrent) {
-    rowStyle.backgroundColor = 'rgba(255,121,0,0.04)'
+    rowStyle.backgroundColor = resolveColor('brand-primary-subtle')
     rowStyle.borderLeftWidth = 2
-    rowStyle.borderLeftColor = BRAND_PRIMARY
+    rowStyle.borderLeftColor = brandPrimary
   }
 
   return (
@@ -94,24 +103,22 @@ export function WeekRow({
               width: 6,
               height: 6,
               borderRadius: 3,
-              backgroundColor: BRAND_PRIMARY,
+              backgroundColor: brandPrimary,
             }}
             accessibilityElementsHidden
             testID="week-row-current-dot"
           />
         )}
-        <Text
-          className={isCurrent ? undefined : 'text-text-primary'}
-          style={{
-            fontSize: 13,
-            fontWeight: '700',
-            fontFamily: 'Inter, sans-serif',
-            color: isCurrent ? BRAND_PRIMARY : undefined,
-          }}
+        {/* `boldLabel` is 12px/700 Inter — the row-label form. The week number was
+            13px, which is off the type scale (TOKENS.md §4). */}
+        <Typography
+          variant="boldLabel"
+          color={isCurrent ? 'inherit' : 'primary'}
+          className={isCurrent ? 'text-brand-primary' : undefined}
           accessibilityElementsHidden
         >
           {`W${weekNumber}`}
-        </Text>
+        </Typography>
       </View>
 
       <View

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

@@ -3,8 +3,9 @@ import { View } from 'react-native'
 import { WeightBadge } from './WeightBadge'
 
 const meta: Meta<typeof WeightBadge> = {
-  title: 'Components/Atoms/WeightBadge',
+  title: 'Custom/Workout/WeightBadge',
   component: WeightBadge,
+  parameters: { docs: { description: { component: 'Composes **Icons** · **BaseBadge**.' } } },
   tags: ['autodocs'],
   argTypes: {
     value: { control: 'number', description: 'Weight value' },