@titan-design/react-ui 0.12.0 → 0.13.0

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View } from 'react-native'
-import { primitiveRamps } from '../../../theme/tokens/primitives'
+import { resolveColor } from '../../../theme/resolve-color'
 import { SessionHeader, type SessionHeaderPlanEntry } from './SessionHeader'
 
 /**
@@ -21,10 +21,10 @@ const meta: Meta<typeof SessionHeader> = {
         component:
           '**Molecule** (shell S3). The session-rail heading — title, stat tiles, chunked ' +
           'pace bar, sets label + ⏱ readout, on the raised grey plane. Composes ' +
-          '[MetricTiles](?path=/docs/workout-metrictiles--docs) / ' +
-          '[ScheduleTiles](?path=/docs/workout-scheduletiles--docs) + ' +
-          '[SegmentedProgressBar](?path=/docs/workout-segmentedprogressbar--docs) + ' +
-          '[TimerReadout](?path=/docs/components-atoms-timerreadout--docs). ' +
+          '[MetricTiles](?path=/docs/custom-workout-metrictiles--docs) / ' +
+          '[ScheduleTiles](?path=/docs/custom-workout-scheduletiles--docs) + ' +
+          '[SegmentedProgressBar](?path=/docs/custom-workout-segmentedprogressbar--docs) + ' +
+          '[TimerReadout](?path=/docs/custom-timerreadout--docs). ' +
           'Used-by ↑ [SessionRail](?path=/docs/shell-sessionrail--docs).',
       },
     },
@@ -41,7 +41,7 @@ const meta: Meta<typeof SessionHeader> = {
 export default meta
 type Story = StoryObj<typeof SessionHeader>
 
-const AMBER = primitiveRamps.amber[300]
+const AMBER = resolveColor('status-warning')
 
 const PLAN: SessionHeaderPlanEntry[] = [
   { name: 'Seated Row', sets: 3 },

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

@@ -1,5 +1,5 @@
 // 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 { Surface, onSurfaceColors, useSurfaceMode } from '../../ui/surface'
 import { Typography } from '../Typography'
 import { TimerReadout } from '../TimerReadout'
@@ -97,20 +97,18 @@ export function SessionHeader({
       testID="session-rail-header"
       {...props}
     >
-      <Text
+      {/* `h6` carries the heading face and role; the rail title is 16px/700 on a
+          tight 18px line box, which is one step below `h6`'s own 18px/600. */}
+      <Typography
+        variant="h6"
+        color="inherit"
+        className="text-base font-bold leading-[18px]"
         accessibilityRole="header"
-        style={{
-          fontSize: 16,
-          lineHeight: 18,
-          fontWeight: '700',
-          fontFamily: '"Space Grotesk", sans-serif',
-          color: onSurface.primary,
-          marginBottom: 10,
-        }}
+        style={{ color: onSurface.primary, marginBottom: 10 }}
         testID="session-rail-title"
       >
         {title}
-      </Text>
+      </Typography>
 
       {upcoming ? <ScheduleTiles when={next} /> : <MetricTiles metrics={metrics} />}
 
@@ -132,7 +130,9 @@ export function SessionHeader({
         >
           <Typography
             variant="mono"
-            style={{ fontSize: 10, color: setsLabelColor }}
+            color="inherit"
+            className="text-2xs"
+            style={{ color: setsLabelColor }}
             testID="session-rail-sets"
           >
             {setsLabel}

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

@@ -1,17 +1,16 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { View, Text } from 'react-native'
+import { View } from 'react-native'
 import { primitiveRamps } from '../../../theme/tokens/primitives'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
 import { SessionRail, type SessionRailExercise } from './SessionRail'
-
-const t = getSemanticColors('dark')
+import { Surface } from '../../ui/surface'
+import { Typography } from '../Typography'
 
 /**
  * `SessionRail` (shell organism) — the live-workout exercise list: a flat raised
  * `SessionHeader` glance (title, stat tiles, chunked pace bar) over a sunk, inset list
  * of ExerciseCard rail headings. The header plan (chunk widths ∝ sets) is derived from
- * `exercises`. Surfaces bind to the grey ramp; the list depth is a subtle neumorphic
- * inset. Driven entirely by props.
+ * `exercises`. Surfaces bind to the grey ramp; the list is a well cut into the rail
+ * with the shared `insetWell` material. Driven entirely by props.
  */
 const meta: Meta<typeof SessionRail> = {
   title: 'Shell/SessionRail',
@@ -23,12 +22,14 @@ const meta: Meta<typeof SessionRail> = {
   },
   decorators: [
     (Story) => (
-      <View className="min-h-screen flex-row" style={{ backgroundColor: t['background-base'] }}>
+      <Surface level="background" className="min-h-screen flex-row">
         <Story />
         <View className="flex-1 items-center justify-center">
-          <Text style={{ color: '#6B7280', fontSize: 12 }}>main viewport</Text>
+          <Typography variant="caption" color="tertiary">
+            main viewport
+          </Typography>
         </View>
-      </View>
+      </Surface>
     ),
   ],
   parameters: {
@@ -37,10 +38,10 @@ const meta: Meta<typeof SessionRail> = {
       description: {
         component:
           '**Organism** (shell S3). The live-workout exercise list: raised header glance over ' +
-          'a sunk inset list, subtle neumorphic depth (grey ramp + `neumorphicShadows`). ' +
+          'a sunk inset list (grey ramp + the `insetWell` material). ' +
           'Composes ' +
           '[SessionHeader](?path=/docs/shell-sessionrail-sessionheader--docs) + ' +
-          '[ExerciseCardHeading](?path=/docs/workout-exercisecardheading--docs) × N. ' +
+          '[ExerciseCardHeading](?path=/docs/custom-workout-exercisecardheading--docs) × N. ' +
           'Sits beside [SideNav](?path=/docs/shell-sidenav--docs) in the dashboard shell.',
       },
     },

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

@@ -13,11 +13,11 @@ import type { SetStripSet } from './SetStrip'
 import type { ExerciseIndicatorKind } from './ExerciseIndicator'
 
 // Warm-tapered ramp surfaces (the locked S3 shell shades): the nav + the heading plane read as
-// ONE dark plane (background shell, #1C1916, owned by SessionHeader's `<Surface level="background">`).
-// The exercise list is a LIGHTER inset panel — `<Surface level="elevated">` (#2A2827) —
-// recessed via its inner shadow yet paler than the header, so the transparent
-// exercise headings on it never blend into the header plane. Surface owns both backgrounds,
-// so the rail no longer hand-sets them.
+// ONE dark plane, the shell `background`, owned by SessionHeader's `<Surface level="background">`.
+// The exercise list is a well cut into the rail — `<Surface level="base">` with the shared
+// `insetWell` material — recessed by its inner shadow yet paler than the header, so the
+// transparent exercise headings on it never blend into the header plane. Surface owns both
+// backgrounds, so the rail no longer hand-sets them.
 const SEMANTIC = getSemanticColors('dark')
 /** Row divider — one step up from the well it sits in so the line reads. */
 const DIVIDER = greyRamp[875]
@@ -128,10 +128,8 @@ export function SessionRail({
       />
 
       {/* The list is a WELL cut into the rail: one plane down from the rail's
-          `elevated`, recessed by the shared inset material rather than by a
-          neumorphic pressed shadow (which had no room to read at this
-          lightness). `level` follows the well's tone so on-surface text
-          resolves against what is actually painted. */}
+          `elevated`, recessed by the shared inset material. `level` follows the
+          well's tone so on-surface text resolves against what is painted. */}
       <Surface
         level="base"
         style={[{ flex: 1 }, insetWell(SEMANTIC['surface-base'])]}

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { View } from 'react-native'
 import { SetBar, type SetStripSet } from './SetBar'
+import { Surface } from '../../ui/surface'
 
 /**
  * `SetBar` — ONE set's multi-coloured bar: the butted per-rep colour segments for a
@@ -9,7 +9,7 @@ import { SetBar, type SetStripSet } from './SetBar'
  * (red-600 · orange-400 · amber-300 · green-300). {@link SetStrip} lays several side by side.
  */
 const meta: Meta<typeof SetBar> = {
-  title: 'Workout/SetBar',
+  title: 'Custom/Workout/SetBar',
   component: SetBar,
   tags: ['autodocs'],
   parameters: {
@@ -18,7 +18,8 @@ const meta: Meta<typeof SetBar> = {
         component:
           '**Atom.** ONE set’s multi-coloured bar — the per-rep colour segments for a ' +
           'single set (done / active-with-pulse / todo). Colours are the real titan ramp pins. ' +
-          'Used-by ↑ [SetStrip](?path=/docs/workout-setstrip--docs).',
+          'Used-by ↑ [SetStrip](?path=/docs/custom-workout-setstrip--docs).' +
+          ' Composes **SegmentedBar**.',
       },
     },
   },
@@ -27,9 +28,9 @@ const meta: Meta<typeof SetBar> = {
   },
   decorators: [
     (Story) => (
-      <View style={{ width: 180, flexDirection: 'row', padding: 16, backgroundColor: '#131313' }}>
+      <Surface level="base" style={{ width: 180, flexDirection: 'row', padding: 16 }}>
         <Story />
-      </View>
+      </Surface>
     ),
   ],
 }
@@ -78,7 +79,10 @@ export const Range: Story = {
 export const Drop: Story = {
   args: {
     height: 8,
-    set: { status: 'drop', subloads: [decay(10, 0.85), decay(8, 0.7), decay(6, 0.6)] } as SetStripSet,
+    set: {
+      status: 'drop',
+      subloads: [decay(10, 0.85), decay(8, 0.7), decay(6, 0.6)],
+    } as SetStripSet,
   },
   parameters: {
     docs: {

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

@@ -2,6 +2,8 @@ import { describe, it, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { SetBar, velocityZoneColor, SET_STRIP_ZONES, SET_STRIP_VARIABLE_COLOR } from './SetBar'
+import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
+import { resolveColor } from '../../../theme/resolve-color'
 
 /** The slot wrapper (carrier of the leading-gap margin) is a fill segment's parent. */
 const slotOf = (fill: HTMLElement) => fill.parentElement as HTMLElement
@@ -36,10 +38,30 @@ describe('SetBar', () => {
     expect(screen.queryByTestId('set-strip-pulse')).not.toBeInTheDocument()
   })
 
+  // SetBar has no visual baseline. The placeholder fill was `greyRamp[900]` — the
+  // `surface-elevated` plane used as a mark — so its role is asserted here.
+  it('fills unperformed reps from the border role, not a surface plane', () => {
+    render(<SetBar set={{ status: 'todo', planned: 10 }} />)
+    expect(screen.getByTestId('set-strip-empty')).toHaveStyle({
+      backgroundColor: resolveColor('border-prominent'),
+    })
+  })
+
+  it('sources the four zone pins from the canonical effort scale', () => {
+    expect(SET_STRIP_ZONES).toEqual({
+      slow: WORKOUT_TOKENS.scale.red,
+      moderate: WORKOUT_TOKENS.scale.orange,
+      fast: WORKOUT_TOKENS.scale.yellow,
+      fastest: WORKOUT_TOKENS.scale.green,
+    })
+  })
+
   describe('range (variable rep-range)', () => {
     it('renders range-max segments; committed-todo grey, variable-todo cyan', () => {
       // floor 15, max 20, 12 done → 12 velocity fills · 3 grey (committed) · 5 cyan (variable)
-      render(<SetBar set={{ status: 'range', floor: 15, max: 20, doneVels: Array(12).fill(0.9) }} />)
+      render(
+        <SetBar set={{ status: 'range', floor: 15, max: 20, doneVels: Array(12).fill(0.9) }} />
+      )
       expect(screen.getAllByTestId('set-strip-fill')).toHaveLength(12)
       expect(screen.getAllByTestId('set-strip-empty')).toHaveLength(3)
       expect(screen.getAllByTestId('set-strip-variable')).toHaveLength(5)
@@ -47,7 +69,9 @@ describe('SetBar', () => {
 
     it('counts a done rep past the floor as a real velocity rep (not variable)', () => {
       // 17 done into the variable zone → 17 velocity fills, 3 cyan, 0 grey
-      render(<SetBar set={{ status: 'range', floor: 15, max: 20, doneVels: Array(17).fill(0.8) }} />)
+      render(
+        <SetBar set={{ status: 'range', floor: 15, max: 20, doneVels: Array(17).fill(0.8) }} />
+      )
       expect(screen.getAllByTestId('set-strip-fill')).toHaveLength(17)
       expect(screen.getAllByTestId('set-strip-variable')).toHaveLength(3)
       expect(screen.queryByTestId('set-strip-empty')).not.toBeInTheDocument()
@@ -64,7 +88,17 @@ describe('SetBar', () => {
 
   describe('drop set', () => {
     it('renders one fill per rep across sub-loads, split by 2px notches', () => {
-      render(<SetBar set={{ status: 'drop', subloads: [[0.85, 0.8, 0.7], [0.7, 0.6]] }} />)
+      render(
+        <SetBar
+          set={{
+            status: 'drop',
+            subloads: [
+              [0.85, 0.8, 0.7],
+              [0.7, 0.6],
+            ],
+          }}
+        />
+      )
       const fills = screen.getAllByTestId('set-strip-fill')
       expect(fills).toHaveLength(5)
       expect(slotOf(fills[0])).not.toHaveStyle({ marginLeft: '2px' }) // first sub-load butts the edge
@@ -74,7 +108,18 @@ describe('SetBar', () => {
 
   describe('myo-rep / rest-pause (done)', () => {
     it('renders activation + clusters, split by 3px cluster gaps', () => {
-      render(<SetBar set={{ status: 'myo', activation: [0.75, 0.7, 0.65], clusters: [[0.6, 0.55], [0.5, 0.45]] }} />)
+      render(
+        <SetBar
+          set={{
+            status: 'myo',
+            activation: [0.75, 0.7, 0.65],
+            clusters: [
+              [0.6, 0.55],
+              [0.5, 0.45],
+            ],
+          }}
+        />
+      )
       const fills = screen.getAllByTestId('set-strip-fill')
       expect(fills).toHaveLength(7)
       expect(slotOf(fills[3])).toHaveStyle({ marginLeft: '3px' }) // first cluster

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

@@ -1,25 +1,38 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
-import { primitiveRamps, greyRamp } from '../../../theme/tokens/primitives'
+import { primitiveRamps } from '../../../theme/tokens/primitives'
+import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
+import { resolveColor } from '../../../theme/resolve-color'
 import { SegmentedBar, type SegmentedBarSegment } from './SegmentedBar'
 
 /**
- * The four canonical rep-intensity zone pins (real titan ramp pins). A rep's mean
- * velocity ratio maps to one of these; butted together they form a set's bar.
+ * The four canonical rep-intensity zone pins. A rep's mean velocity ratio maps to
+ * one of these; butted together they form a set's bar.
+ *
+ * Sourced from {@link WORKOUT_TOKENS}.`scale`, which its own docs already call the
+ * single source for the velocity zone bars — this used to re-read the same four
+ * ramp steps independently, so the two could drift apart silently. Byte-identical.
  */
 export const SET_STRIP_ZONES = {
-  slow: primitiveRamps.red[600],
-  moderate: primitiveRamps.orange[400],
-  fast: primitiveRamps.amber[300],
-  fastest: primitiveRamps.green[300],
+  slow: WORKOUT_TOKENS.scale.red,
+  moderate: WORKOUT_TOKENS.scale.orange,
+  fast: WORKOUT_TOKENS.scale.yellow,
+  fastest: WORKOUT_TOKENS.scale.green,
 } as const
 
-/** Grey fill for planned-but-unperformed reps / upcoming sets (grey placeholder). */
-const TODO_COLOR = greyRamp[900]
+// Fill for planned-but-unperformed reps / upcoming sets. Was `greyRamp[900]` — the
+// `surface-elevated` plane borrowed as a MARK colour, the same anti-pattern the
+// specimen's `--dot-inactive` note calls out. It takes the border role instead, which
+// is where B2 landed PlaceholderStrip: the two placeholder languages now match.
+const TODO_COLOR = resolveColor('border-prominent')
 
 /**
  * The learned "variable / unknown / opportunity" semantic (cyan-900, a real ramp
  * pin): an unperformed rep in a range's variable zone, and the fading trail of a
  * myo set whose cluster count isn't yet known.
+ *
+ * FINDING for E3: no semantic role expresses this. `brand-secondary` is cyan-600
+ * and `brand-secondary-dark` cyan-700; neither reaches cyan-900, and pinning this
+ * to either would restyle the mark rather than migrate it.
  */
 export const SET_STRIP_VARIABLE_COLOR = primitiveRamps.cyan[900]
 
@@ -39,6 +52,10 @@ const MYO_UPCOMING_FADE = 0.6
 /**
  * Active-set pulse range per zone: each segment eases between its pin's adjacent
  * lighter/darker ramp steps, keeping the intensity reading while signalling "live".
+ *
+ * Literal ramp steps, not tokens: `Animated.interpolate` parses its own endpoints
+ * and cannot read a `var()` ref — the same exception SegmentedBar's `pulseColor`
+ * documents (B2).
  */
 const PULSE_RANGE: Record<string, [string, string]> = {
   [SET_STRIP_ZONES.slow]: [primitiveRamps.red[500], primitiveRamps.red[700]],
@@ -58,7 +75,10 @@ export function velocityZoneColor(v: number): string {
 /**
  * One set's data. Flat variants: `done` = every rep performed; `active` = reps-so-far
  * performed against a planned count (remainder greyed, performed reps pulse); `todo` =
- * a planned but unstarted set (solid grey bar). Set-type variants:
+ * a planned but unstarted set (solid grey bar). `active`/`todo` optionally carry the
+ * plan's prescribed rep RANGE (`repsLow`/`repsHigh`, VMCP-03.04) — a value range
+ * (isokinetic bands), not a rep count, so it's independent of `range`'s `floor`/`max`.
+ * Set-type variants:
  * - `range` — variable rep-range (e.g. 15–20): `max` segments; committed zone
  *   `0..floor` (done = velocity, todo = grey), variable zone `floor..max` (done =
  *   velocity, todo = the variable/opportunity cyan). `doneVels` may run past `floor`.
@@ -69,8 +89,14 @@ export function velocityZoneColor(v: number): string {
  */
 export type SetStripSet =
   | { status: 'done'; velocities: number[] }
-  | { status: 'active'; velocities: number[]; planned: number }
-  | { status: 'todo'; planned: number }
+  | {
+      status: 'active'
+      velocities: number[]
+      planned: number
+      repsLow?: number
+      repsHigh?: number
+    }
+  | { status: 'todo'; planned: number; repsLow?: number; repsHigh?: number }
   | { status: 'range'; floor: number; max: number; doneVels: number[] }
   | { status: 'drop'; subloads: number[][] }
   | { status: 'myo'; activation: number[]; clusters: number[][] }

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

@@ -4,7 +4,7 @@ import { SetRow } from './SetRow'
 import { SetTableHeader } from './SetTableHeader'
 
 const meta: Meta<typeof SetRow> = {
-  title: 'Workout/SetRow',
+  title: 'Custom/Workout/SetRow',
   component: SetRow,
   tags: ['autodocs'],
   parameters: {
@@ -16,7 +16,8 @@ const meta: Meta<typeof SetRow> = {
           '(logged), `live` (performing now — brightened, compact velocity-height spotlight), `todo` ' +
           '(planned — muted grey stub). Done + upcoming share one muted treatment; only `live` is ' +
           'brightened. No PREV column. Composed by ' +
-          '[ExerciseCard](?path=/docs/workout-exercisecard--docs) (expanded).',
+          '[ExerciseCard](?path=/docs/custom-workout-exercisecard--docs) (expanded).' +
+          ' Composes **VelocityStrip**.',
       },
     },
   },

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

@@ -3,13 +3,16 @@ import { render, screen } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { View } from 'react-native'
 import { SetRow, type SetRowProps } from './SetRow'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { resolveColor } from '../../../theme/resolve-color'
 
 // Text treatments, read from the tokens rather than pinned as hexes. These
 // used to be hand-copied literals and silently desynced when the greys moved
 // to the warm ramp (TD-07.14). The assertion still bites — it checks the
 // component reaches for the right ROLE — it just no longer restates the value.
-const { 'text-primary': T_ACTIVE, 'text-secondary': T_MUTED } = getSemanticColors('dark')
+// Now through `resolveColor`, which is what the row renders after the B3 port:
+// the same role, but the theme-switching `var()` ref rather than a dark hex.
+const T_ACTIVE = resolveColor('text-primary')
+const T_MUTED = resolveColor('text-secondary')
 
 const doneRow: SetRowProps = {
   state: 'done',
@@ -116,6 +119,17 @@ describe('SetRow', () => {
       expect(screen.getByTestId('set-row-type-badge')).toHaveTextContent('W')
     })
 
+    // SetRow has no visual baseline, so the chip's tokens are asserted here. It
+    // used to borrow `WORKOUT_TOKENS.scale.orange` — the EFFORT scale — for a
+    // label that reads set type, over a hand-mixed 0.12 wash off a different hue.
+    it('draws the type badge from the brand role, not the effort scale', () => {
+      render(<SetRow {...doneRow} setType="DROP" />)
+      expect(screen.getByTestId('set-row-type-badge')).toHaveStyle({
+        color: resolveColor('brand-primary'),
+        backgroundColor: resolveColor('brand-primary-subtle'),
+      })
+    })
+
     it('does not render the type badge when setType is absent', () => {
       render(<SetRow {...doneRow} />)
       expect(screen.queryByTestId('set-row-type-badge')).not.toBeInTheDocument()

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

@@ -1,10 +1,10 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { type ReactNode } from 'react'
-import { View, Text } from 'react-native'
+import { View } from 'react-native'
 import { VelocityStrip, type VelocityZoneBandProp } from './VelocityStrip'
+import { Typography } from '../Typography'
 import { roundWeight, roundRpe } from '../../../utils/workout-format'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
-import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
+import { resolveColor } from '../../../theme/resolve-color'
 
 export type SetRowUnit = 'lbs' | 'kg'
 
@@ -61,20 +61,23 @@ export type SetRowProps =
       planned?: number
     })
 
-const DARK = getSemanticColors('dark')
-/** Live set — brightest (neutral 100). Done + upcoming share the muted neutral 400. */
-const TEXT_ACTIVE = DARK['text-primary']
-const TEXT_MUTED = DARK['text-secondary']
+/** Live set — brightest. Done + upcoming share the muted role. */
+const TEXT_ACTIVE = 'text-primary'
+const TEXT_MUTED = 'text-secondary'
 
 /** Column widths mirror SetTableHeader(showPrevious=false) so cells align under it. */
 const COL = { set: 36, reps: 44, load: 56, rpe: 36 } as const
-const cellText = { fontFamily: 'Inter, sans-serif', fontSize: 13, fontWeight: '600' as const }
-const typeBadge = {
-  fontSize: 10,
-  fontWeight: '700' as const,
-  fontFamily: 'Inter, sans-serif',
-  color: WORKOUT_TOKENS.scale.orange,
-  backgroundColor: 'rgba(255,165,2,0.12)',
+
+// 13px is off the type scale (TOKENS.md §4); `boldLabel` is the 12px font-sans step
+// and `font-semibold` holds the original 600 — Inter is `font-sans` here, per B1.
+const CELL_CLASS = 'font-semibold leading-[normal]'
+
+// The set-type chip was `WORKOUT_TOKENS.scale.orange` on a hand-mixed
+// rgba(255,165,2,0.12). That pin is `sequentialEffort[3]` — the EFFORT scale, borrowed
+// for a label that reads set type, not intensity. It resolves to orange-400, which is
+// `brand-primary`, so the chip takes the brand role and the `-subtle` rung its 0.12 wash
+// was already reaching for. The wash's own base (255,165,2) is off the orange ramp.
+const typeBadgeStyle = {
   paddingVertical: 1,
   paddingHorizontal: 5,
   borderRadius: 3,
@@ -163,7 +166,8 @@ function RowStrip({ set }: { set: SetRowProps }) {
  */
 export function SetRow(set: SetRowProps) {
   const live = set.state === 'live'
-  const valueColor = live ? TEXT_ACTIVE : TEXT_MUTED
+  const valueColor = resolveColor(live ? TEXT_ACTIVE : TEXT_MUTED)
+  const mutedColor = resolveColor(TEXT_MUTED)
   const rpe = set.state === 'todo' ? null : set.rpe
 
   return (
@@ -175,25 +179,59 @@ export function SetRow(set: SetRowProps) {
       <View className="flex-row items-center" style={{ justifyContent: 'space-between' }}>
         <Cell width={COL.set} testID="set-row-set-number">
           {set.setType ? (
-            <Text style={typeBadge} testID="set-row-type-badge">
+            <Typography
+              variant="boldLabel"
+              color="inherit"
+              className="text-2xs leading-[normal]"
+              style={{
+                ...typeBadgeStyle,
+                color: resolveColor('brand-primary'),
+                backgroundColor: resolveColor('brand-primary-subtle'),
+              }}
+              testID="set-row-type-badge"
+            >
               {set.setType}
-            </Text>
+            </Typography>
           ) : (
-            <Text style={{ ...cellText, color: valueColor, fontWeight: live ? '700' : '600' }}>
+            <Typography
+              variant="boldLabel"
+              color="inherit"
+              className={live ? 'font-bold leading-[normal]' : CELL_CLASS}
+              style={{ color: valueColor }}
+            >
               {set.setNumber}
-            </Text>
+            </Typography>
           )}
         </Cell>
         <Cell width={COL.reps} testID="set-row-reps">
-          <Text style={{ ...cellText, color: valueColor }}>{displayReps(set)}</Text>
+          <Typography
+            variant="boldLabel"
+            color="inherit"
+            className={CELL_CLASS}
+            style={{ color: valueColor }}
+          >
+            {displayReps(set)}
+          </Typography>
         </Cell>
         <Cell width={COL.load} testID="set-row-weight">
-          <Text style={{ ...cellText, color: valueColor }}>{roundWeight(displayWeight(set))}</Text>
+          <Typography
+            variant="boldLabel"
+            color="inherit"
+            className={CELL_CLASS}
+            style={{ color: valueColor }}
+          >
+            {roundWeight(displayWeight(set))}
+          </Typography>
         </Cell>
         <Cell width={COL.rpe} testID="set-row-rpe">
-          <Text style={{ ...cellText, color: TEXT_MUTED }}>
+          <Typography
+            variant="boldLabel"
+            color="inherit"
+            className={CELL_CLASS}
+            style={{ color: mutedColor }}
+          >
             {rpe != null ? roundRpe(rpe) : '—'}
-          </Text>
+          </Typography>
         </Cell>
       </View>
       <View style={{ marginTop: live ? 6 : 4 }} testID="set-row-strip">