@titan-design/react-ui 0.12.1 → 0.13.0

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' },

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

@@ -3,6 +3,7 @@ import { render, screen, fireEvent } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { WeightBadge } from './WeightBadge'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { resolveColor } from '../../../theme/resolve-color'
 
 // Read from the token, not pinned: these used to be hand-copied hexes and
 // silently desynced when borders became alpha hairlines (TD-07.16).
@@ -47,18 +48,14 @@ describe('WeightBadge', () => {
   describe('reps (rep-max context)', () => {
     it('shows the estimated 1RM label when reps is omitted', () => {
       render(<WeightBadge value={315} unit="lbs" />)
-      expect(
-        screen.getByLabelText('Estimated one rep max: 315 lbs'),
-      ).toBeInTheDocument()
+      expect(screen.getByLabelText('Estimated one rep max: 315 lbs')).toBeInTheDocument()
       expect(screen.queryByTestId('weight-badge-repmax')).not.toBeInTheDocument()
     })
 
     it('shows the rep-max qualifier and label when reps is provided', () => {
       render(<WeightBadge value={275} unit="lbs" reps={5} />)
       expect(screen.getByTestId('weight-badge-repmax')).toHaveTextContent('5RM')
-      expect(
-        screen.getByLabelText('5 rep max: 275 lbs'),
-      ).toBeInTheDocument()
+      expect(screen.getByLabelText('5 rep max: 275 lbs')).toBeInTheDocument()
     })
   })
 
@@ -127,27 +124,63 @@ describe('WeightBadge', () => {
     })
   })
 
+  // Regression (E3 B3): the value, rep-max and delta colours were read through
+  // `getSemanticColors('dark')` / `greyRamp` ON THE RENDER PATH, which pins the badge
+  // to dark-mode hex and leaves it unreadable once `.light` is on <html>. Each of these
+  // asserts the `var()` reference `resolveColor` returns on web; every one of them
+  // fails against the old literal.
+  describe('theme-correct colours', () => {
+    it('draws a PR value from the brand-primary token, not a dark-mode hex', () => {
+      render(<WeightBadge value={315} isPr />)
+      expect(screen.getByText(/315 lbs/)).toHaveStyle({ color: resolveColor('brand-primary') })
+    })
+
+    // A load value is not a heading. Typography's h-variants render role="heading",
+    // which both misreports the badge and breaks the parity layer's text selector.
+    it('renders the value as text, not a heading', () => {
+      render(<WeightBadge value={225} />)
+      expect(screen.queryByRole('heading')).not.toBeInTheDocument()
+      expect(screen.getByText('225 lbs').getAttribute('dir')).toBe('auto')
+    })
+
+    it('draws a non-PR value from the text-secondary token', () => {
+      render(<WeightBadge value={225} />)
+      expect(screen.getByText('225 lbs')).toHaveStyle({ color: resolveColor('text-secondary') })
+    })
+
+    it('tints the rep-max qualifier with the same token as the value', () => {
+      render(<WeightBadge value={275} reps={5} isPr />)
+      expect(screen.getByTestId('weight-badge-repmax')).toHaveStyle({
+        color: resolveColor('brand-primary'),
+      })
+    })
+
+    it.each([
+      [3, 'result-improve'],
+      [-2, 'result-degrade'],
+    ] as const)('draws a %s%% delta from the %s token', (delta, token) => {
+      render(<WeightBadge value={225} delta={delta} />)
+      expect(screen.getByTestId('weight-badge-delta')).toHaveStyle({
+        color: resolveColor(token),
+      })
+    })
+  })
+
   describe('accessibility', () => {
     it('has no accessibility violations', async () => {
-      const { container } = render(
-        <WeightBadge value={225} isPr onPress={() => {}} />,
-      )
+      const { container } = render(<WeightBadge value={225} isPr onPress={() => {}} />)
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })
 
     it('has no accessibility violations with delta', async () => {
-      const { container } = render(
-        <WeightBadge value={225} delta={3} onPress={() => {}} />,
-      )
+      const { container } = render(<WeightBadge value={225} delta={3} onPress={() => {}} />)
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })
 
     it('has no accessibility violations as static badge', async () => {
-      const { container } = render(
-        <WeightBadge value={315} unit="kg" isPr delta={-2} />,
-      )
+      const { container } = render(<WeightBadge value={315} unit="kg" isPr delta={-2} />)
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })
@@ -155,15 +188,13 @@ describe('WeightBadge', () => {
     it('includes delta in the e1RM accessibility label', () => {
       render(<WeightBadge value={225} delta={5} />)
       expect(
-        screen.getByLabelText('Estimated one rep max: 225 lbs, +5% change'),
+        screen.getByLabelText('Estimated one rep max: 225 lbs, +5% change')
       ).toBeInTheDocument()
     })
 
     it('includes delta in the rep-max accessibility label', () => {
       render(<WeightBadge value={275} reps={5} delta={-3} />)
-      expect(
-        screen.getByLabelText('5 rep max: 275 lbs, -3% change'),
-      ).toBeInTheDocument()
+      expect(screen.getByLabelText('5 rep max: 275 lbs, -3% change')).toBeInTheDocument()
     })
   })
 })

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

@@ -1,5 +1,5 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
-import { Text } from 'react-native'
+import { Typography } from '../Typography'
 import { DumbbellIcon } from './icons'
 import {
   BaseBadge,
@@ -7,13 +7,11 @@ import {
   type BaseBadgeSize,
   type BaseBadgeProps,
 } from './BaseBadge'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
-import { greyRamp } from '../../../theme/tokens/primitives'
+import { resolveColor } from '../../../theme/resolve-color'
 
 export type WeightBadgeSize = BaseBadgeSize
 
-export interface WeightBadgeProps
-  extends Omit<BaseBadgeProps, 'variant' | 'icon' | 'children'> {
+export interface WeightBadgeProps extends Omit<BaseBadgeProps, 'variant' | 'icon' | 'children'> {
   value: number
   unit?: 'lbs' | 'kg'
   /**
@@ -31,6 +29,9 @@ export interface WeightBadgeProps
   className?: string
 }
 
+/**
+ * @deprecated Use `<Pill tone="neutral">` — removed after AW-127 consumer migration.
+ */
 export function WeightBadge({
   value,
   unit = 'lbs',
@@ -44,15 +45,14 @@ export function WeightBadge({
   ...props
 }: WeightBadgeProps) {
   const config = baseBadgeSizeConfig[size]
-  const textColor = isPr ? getSemanticColors('dark')['brand-primary'] : greyRamp[400]
+  const textColor = isPr ? resolveColor('brand-primary') : resolveColor('text-secondary')
   // Dumbbell reads clearly as a weight/strength metric and is unit-agnostic
   // across estimated-1RM and N-rep-max contexts (vs. TrendingUp which implies
   // change/trend rather than a load value).
   const iconColor = textColor
 
   const repMaxClause = reps != null ? `${reps} rep max` : 'Estimated one rep max'
-  const deltaLabel =
-    delta != null ? `, ${delta >= 0 ? '+' : ''}${delta}% change` : ''
+  const deltaLabel = delta != null ? `, ${delta >= 0 ? '+' : ''}${delta}% change` : ''
   const fullLabel = `${repMaxClause}: ${value} ${unit}${deltaLabel}`
 
   return (
@@ -70,22 +70,24 @@ export function WeightBadge({
       testID="weight-badge"
       {...props}
     >
-      <Text
-        style={{
-          fontFamily: '"Space Grotesk", sans-serif',
-          fontWeight: '600',
-          fontSize: config.fontSize,
-          color: textColor,
-        }}
+      {/* `body2` + `font-heading`, NOT `h6`: a load value is not a heading, and the
+          heading variants make Typography render `role="heading"`. The size prop still
+          drives the step, so the fontSize stays computed (BaseBadge's 9/10/12 config). */}
+      <Typography
+        variant="body2"
+        color="inherit"
+        className="font-heading font-semibold leading-[normal]"
+        style={{ fontSize: config.fontSize, color: textColor }}
       >
         {isPr ? '✳ ' : ''}
         {value} {unit}
-      </Text>
+      </Typography>
       {reps != null && (
-        <Text
+        <Typography
+          variant="body2"
+          color="inherit"
+          className="font-heading font-semibold leading-[normal]"
           style={{
-            fontFamily: '"Space Grotesk", sans-serif',
-            fontWeight: '600',
             fontSize: config.fontSize,
             marginLeft: 2,
             color: textColor,
@@ -94,24 +96,23 @@ export function WeightBadge({
           testID="weight-badge-repmax"
         >
           {reps}RM
-        </Text>
+        </Typography>
       )}
       {delta != null && (
-        <Text
+        <Typography
+          variant="body2"
+          color="inherit"
+          className="font-heading leading-[normal]"
           style={{
-            fontFamily: '"Space Grotesk", sans-serif',
             fontSize: config.fontSize,
             marginLeft: 4,
-            color:
-              delta >= 0
-                ? getSemanticColors('dark')['result-improve']
-                : getSemanticColors('dark')['result-degrade'],
+            color: resolveColor(delta >= 0 ? 'result-improve' : 'result-degrade'),
           }}
           testID="weight-badge-delta"
         >
           {delta >= 0 ? '+' : ''}
           {delta}%
-        </Text>
+        </Typography>
       )}
     </BaseBadge>
   )

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

@@ -4,8 +4,13 @@ import { WorkoutCard } from './WorkoutCard'
 import type { ExerciseCardProps } from './ExerciseCard'
 
 const meta: Meta<typeof WorkoutCard> = {
-  title: 'Workout/WorkoutCard',
+  title: 'Custom/Workout/WorkoutCard',
   component: WorkoutCard,
+  parameters: {
+    docs: {
+      description: { component: 'Composes **Card** · **ExerciseCard** · **MuscleGroupChip**.' },
+    },
+  },
   tags: ['autodocs'],
   argTypes: {
     status: {

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

@@ -3,6 +3,7 @@ import { render, screen, fireEvent } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { WorkoutCard, type WorkoutCardProps } from './WorkoutCard'
 import type { ExerciseCardProps } from './ExerciseCard'
+import { resolveColor } from '../../../theme/resolve-color'
 
 const baseProps: WorkoutCardProps = {
   name: 'Upper A',
@@ -110,6 +111,23 @@ describe('WorkoutCard', () => {
         opacity: 0.6,
       })
     })
+
+    it.each([
+      ['completed', 'status-success'],
+      ['today', 'brand-primary'],
+      ['upcoming', 'hairline-default'],
+    ] as const)('draws the %s accent stripe from the %s token', (status, token) => {
+      render(<WorkoutCard {...baseProps} status={status} />)
+      const style = screen.getByTestId('workout-card').getAttribute('style') ?? ''
+      expect(style).toContain(`border-left-color: ${resolveColor(token)}`)
+    })
+
+    it("washes today's card with the brand subtle token", () => {
+      render(<WorkoutCard {...baseProps} status="today" />)
+      expect(screen.getByTestId('workout-card')).toHaveStyle({
+        backgroundColor: resolveColor('brand-primary-subtle'),
+      })
+    })
   })
 
   describe('accessibility', () => {

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

@@ -1,25 +1,15 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
-import { View, Text, ScrollView, Pressable, type ViewProps } from 'react-native'
+import { View, ScrollView, Pressable, type ViewProps } from 'react-native'
 import { Card } from '../../ui/card'
 import { ExerciseCard, type ExerciseCardProps } from './ExerciseCard'
-import {
-  MuscleGroupChip,
-  type VolumeStatus,
-} from './MuscleGroupChip'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
-
-const HAIRLINE_DEFAULT = getSemanticColors('dark')['hairline-default']
-
-const t = getSemanticColors('dark')
+import { MuscleGroupChip, type VolumeStatus } from './MuscleGroupChip'
+import { Typography } from '../Typography'
+import { resolveColor } from '../../../theme/resolve-color'
 
 export type WorkoutStatus = 'completed' | 'today' | 'upcoming'
 
 /** Spec volume-status vocabulary; mapped to MuscleGroupChip's VolumeStatus internally. */
-export type WorkoutMuscleVolumeStatus =
-  | 'under'
-  | 'maintenance'
-  | 'productive'
-  | 'over'
+export type WorkoutMuscleVolumeStatus = 'under' | 'maintenance' | 'productive' | 'over'
 
 export interface WorkoutMuscleGroup {
   /** Muscle group identifier (free-form to match plan data). */
@@ -47,17 +37,14 @@ export interface WorkoutCardProps extends ViewProps {
   className?: string
 }
 
-const COLORS = {
-  statusSuccess: t['status-success'],
-  brandPrimary: t['brand-primary'],
-  borderDefault: HAIRLINE_DEFAULT,
-  brandPrimarySubtle: 'rgba(255,121,0,0.06)',
-}
-
-const statusBorderColors: Record<WorkoutStatus, string> = {
-  completed: COLORS.statusSuccess,
-  today: COLORS.brandPrimary,
-  upcoming: COLORS.borderDefault,
+/** Accent-stripe token per status, resolved per theme at render. */
+const statusAccentToken: Record<
+  WorkoutStatus,
+  'status-success' | 'brand-primary' | 'hairline-default'
+> = {
+  completed: 'status-success',
+  today: 'brand-primary',
+  upcoming: 'hairline-default',
 }
 
 /** Maps the spec's volume-status vocabulary onto MuscleGroupChip's enum. */
@@ -72,7 +59,7 @@ function formatStats(
   totalSets: number,
   totalVolume: number | undefined,
   unit: 'lbs' | 'kg',
-  duration: string | undefined,
+  duration: string | undefined
 ): string {
   const parts = [`${totalSets} sets`]
   if (totalVolume != null) parts.push(`${totalVolume} ${unit}`)
@@ -123,41 +110,36 @@ export function WorkoutCard({
   const summary = (
     <View style={{ padding: 14 }} testID="workout-card-body">
       <View className="flex-row items-center" testID="workout-card-header">
-        <Text
-          className="text-text-primary"
-          style={{
-            fontSize: 15,
-            fontFamily: '"Space Grotesk", sans-serif',
-            fontWeight: '700',
-          }}
+        {/* The card name was 15px/700 Space Grotesk — off the type scale between
+            `sm` and `base`. `h6` carries the heading face; `base` is the step up. */}
+        <Typography
+          variant="h6"
+          color="primary"
+          className="text-base font-bold leading-[normal]"
           testID="workout-card-name"
         >
           {name}
-        </Text>
+        </Typography>
         <View className="flex-1" />
-        <Text
-          className="text-text-tertiary"
-          style={{
-            fontSize: 11,
-            fontFamily: 'Inter, sans-serif',
-          }}
+        {/* 11px is off the scale too; `2xs` (10px) is the step below. */}
+        <Typography
+          variant="caption"
+          color="tertiary"
+          className="text-2xs leading-[normal]"
           testID="workout-card-date"
         >
           {date}
-        </Text>
+        </Typography>
       </View>
 
-      <Text
-        className="text-text-secondary"
-        style={{
-          marginTop: 4,
-          fontSize: 12,
-          fontFamily: 'Inter, sans-serif',
-        }}
+      <Typography
+        variant="caption"
+        color="secondary"
+        className="mt-1 leading-[normal]"
         testID="workout-card-stats"
       >
         {formatStats(totalSets, totalVolume, unit, duration)}
-      </Text>
+      </Typography>
 
       {muscleGroups.length > 0 && (
         <ScrollView
@@ -171,11 +153,7 @@ export function WorkoutCard({
             <MuscleGroupChip
               key={muscle.group}
               name={muscle.label}
-              volumeStatus={
-                muscle.volumeStatus
-                  ? volumeStatusMap[muscle.volumeStatus]
-                  : undefined
-              }
+              volumeStatus={muscle.volumeStatus ? volumeStatusMap[muscle.volumeStatus] : undefined}
             />
           ))}
         </ScrollView>
@@ -187,8 +165,8 @@ export function WorkoutCard({
     <Card
       variant="accent"
       elevation={1}
-      accentColor={statusBorderColors[status]}
-      bgColor={isToday ? COLORS.brandPrimarySubtle : undefined}
+      accentColor={resolveColor(statusAccentToken[status])}
+      bgColor={isToday ? resolveColor('brand-primary-subtle') : undefined}
       className={className}
       style={isUpcoming ? { opacity: 0.6 } : undefined}
       testID="workout-card"