@titan-design/react-ui 0.12.1 → 0.14.0

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

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View, Text } from 'react-native'
 import { SetStrip, type SetStripSet } from './SetStrip'
+import { Surface } from '../../ui/surface'
+import { greyRamp } from '../../../theme/tokens/primitives'
 
 /**
  * `SetStrip` — the per-set segmented performance strip. One continuous bar per
@@ -9,7 +11,7 @@ import { SetStrip, type SetStripSet } from './SetStrip'
  * amber-300 · green-300).
  */
 const meta: Meta<typeof SetStrip> = {
-  title: 'Workout/SetStrip',
+  title: 'Custom/Workout/SetStrip',
   component: SetStrip,
   tags: ['autodocs'],
   parameters: {
@@ -18,8 +20,8 @@ const meta: Meta<typeof SetStrip> = {
         component:
           '**Molecule.** The per-set segmented performance strip — one bar per set, rep ' +
           'intensities as butted ramp-pin segments (no rep gaps), active set pulses. Composes ' +
-          '[SetBar](?path=/docs/workout-setbar--docs) × N. ' +
-          'Used-by ↑ [ExerciseCardHeading](?path=/docs/workout-exercisecardheading--docs).',
+          '[SetBar](?path=/docs/custom-workout-setbar--docs) × N. ' +
+          'Used-by ↑ [ExerciseCardHeading](?path=/docs/custom-workout-exercisecardheading--docs).',
       },
     },
   },
@@ -28,9 +30,9 @@ const meta: Meta<typeof SetStrip> = {
   },
   decorators: [
     (Story) => (
-      <View style={{ width: 210, padding: 16, backgroundColor: '#131313' }}>
+      <Surface level="base" style={{ width: 210, padding: 16 }}>
         <Story />
-      </View>
+      </Surface>
     ),
   ],
 }
@@ -78,13 +80,67 @@ export const ShortStrip: Story = {
   },
 }
 
+// ---- prescribed rep range (VMCP-03.04) — optional on `todo`/`active` only
+
+export const RepRange: Story = {
+  args: {
+    height: 8,
+    sets: [
+      { status: 'done', velocities: decay(8, 0.9) },
+      { status: 'active', velocities: decay(3, 0.75), planned: 8, repsLow: 8, repsHigh: 12 },
+      { status: 'todo', planned: 8, repsLow: 8, repsHigh: 12 },
+    ],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "The plan's prescribed rep RANGE (VMCP-03.04): `8–12` on the active and todo sets. " +
+          "Independent of the `range` set-type's value range (isokinetic bands).",
+      },
+    },
+  },
+}
+
+export const RepRangeSingleNumber: Story = {
+  args: {
+    height: 8,
+    sets: [
+      { status: 'active', velocities: decay(3, 0.75), planned: 8, repsLow: 8, repsHigh: 8 },
+      { status: 'todo', planned: 8, repsLow: 8 },
+    ],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Equal bounds (or only one given) collapse to a single number: `8`, not `8–8`.',
+      },
+    },
+  },
+}
+
+export const RepRangeAbsent: Story = {
+  args: {
+    height: 8,
+    sets: [
+      { status: 'active', velocities: decay(3, 0.75), planned: 8 },
+      { status: 'todo', planned: 8 },
+    ],
+  },
+  parameters: {
+    docs: {
+      description: { story: 'No prescription on the set — no label renders (the default today).' },
+    },
+  },
+}
+
 // ---- set-type variant sheet: every variant at the real rail width, for eyeballing
 function SheetRow({ label, meta, sets }: { label: string; meta: string; sets: SetStripSet[] }) {
   return (
     <View style={{ gap: 6 }}>
       <View style={{ flexDirection: 'row', alignItems: 'baseline', gap: 8 }}>
-        <Text style={{ color: '#F3F4F6', fontSize: 13, fontWeight: '800' }}>{label}</Text>
-        <Text style={{ color: '#6B7280', fontSize: 10, fontFamily: 'monospace' }}>{meta}</Text>
+        <Text style={{ color: greyRamp[50], fontSize: 13, fontWeight: '800' }}>{label}</Text>
+        <Text style={{ color: greyRamp[600], fontSize: 10, fontFamily: 'monospace' }}>{meta}</Text>
       </View>
       <SetStrip sets={sets} />
     </View>

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

@@ -94,6 +94,31 @@ describe('SetStrip', () => {
     expect(screen.getAllByTestId('set-strip-set')).toHaveLength(2)
   })
 
+  describe('prescribed rep range (VMCP-03.04)', () => {
+    it('todo: renders the range when both bounds are given', () => {
+      render(<SetStrip sets={[{ status: 'todo', planned: 10, repsLow: 8, repsHigh: 12 }]} />)
+      expect(screen.getByTestId('set-strip-reps-label')).toHaveTextContent('8–12')
+    })
+
+    it('active: renders a single number when the bounds are equal or only one is given', () => {
+      const { rerender } = render(
+        <SetStrip
+          sets={[{ status: 'active', velocities: [0.9], planned: 8, repsLow: 8, repsHigh: 8 }]}
+        />
+      )
+      expect(screen.getByTestId('set-strip-reps-label')).toHaveTextContent('8')
+      rerender(
+        <SetStrip sets={[{ status: 'active', velocities: [0.9], planned: 8, repsLow: 8 }]} />
+      )
+      expect(screen.getByTestId('set-strip-reps-label')).toHaveTextContent('8')
+    })
+
+    it('renders no label when neither bound is given', () => {
+      render(<SetStrip sets={[{ status: 'todo', planned: 10 }]} />)
+      expect(screen.queryByTestId('set-strip-reps-label')).not.toBeInTheDocument()
+    })
+  })
+
   describe('accessibility', () => {
     it('has no accessibility violations', async () => {
       const sets: SetStripSet[] = [

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

@@ -1,6 +1,7 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
-import { View, type ViewProps } from 'react-native'
+import { View, Text, type ViewProps } from 'react-native'
 import { SetBar, type SetStripSet } from './SetBar'
+import { formatRepsRange } from '../../../utils/workout-format'
 
 // Re-exported so the per-set colour vocabulary stays importable from either the
 // molecule (SetStrip) or the atom (SetBar) it now lives in.
@@ -40,6 +41,12 @@ function describeSets(sets: SetStripSet[]): string {
   return `Set progress: ${done} done, ${active} in progress, ${upcoming} upcoming`
 }
 
+/** The prescribed rep-range label for a `todo`/`active` set, or `null` when unset. */
+function repsRangeLabel(set: SetStripSet): string | null {
+  if (set.status !== 'todo' && set.status !== 'active') return null
+  return formatRepsRange(set.repsLow, set.repsHigh)
+}
+
 export interface SetStripProps extends ViewProps {
   /** Per-set performance data, in set order. */
   sets: SetStripSet[]
@@ -63,9 +70,22 @@ export function SetStrip({ sets, height = 8, className, ...props }: SetStripProp
       testID="set-strip"
       {...props}
     >
-      {sets.map((set, i) => (
-        <SetBar key={i} set={set} height={height} />
-      ))}
+      {sets.map((set, i) => {
+        const label = repsRangeLabel(set)
+        if (label == null) return <SetBar key={i} set={set} height={height} />
+        return (
+          <View key={i} style={{ flex: 1, minWidth: 0, position: 'relative' }}>
+            <Text
+              className="text-text-secondary text-2xs font-semibold text-center"
+              style={{ position: 'absolute', bottom: height + 3, left: 0, right: 0 }}
+              testID="set-strip-reps-label"
+            >
+              {label}
+            </Text>
+            <SetBar set={set} height={height} />
+          </View>
+        )
+      })}
     </View>
   )
 }

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { View } from 'react-native'
 import { SetTableHeader } from './SetTableHeader'
+import { Surface } from '../../ui/surface'
 
 /**
  * 🚧 WIP / placeholder — `SetTableHeader` (exported as `SetTableHeader`; the generic
@@ -10,7 +10,7 @@ import { SetTableHeader } from './SetTableHeader'
  * unification (TD-03.56).
  */
 const meta: Meta<typeof SetTableHeader> = {
-  title: 'Workout/SetTableHeader',
+  title: 'Custom/Workout/SetTableHeader',
   component: SetTableHeader,
   tags: ['autodocs'],
   parameters: {
@@ -18,8 +18,8 @@ const meta: Meta<typeof SetTableHeader> = {
       description: {
         component:
           '**Atom.** The expanded-set-table column header row; per-column widths mirror ' +
-          '[SetRow](?path=/docs/workout-setrow--docs) so headers align over the rows. ' +
-          'Used-by ↑ [ExerciseCard](?path=/docs/workout-exercisecard--docs) (expanded), which ' +
+          '[SetRow](?path=/docs/custom-workout-setrow--docs) so headers align over the rows. ' +
+          'Used-by ↑ [ExerciseCard](?path=/docs/custom-workout-exercisecard--docs) (expanded), which ' +
           'renders it with `showPrevious={false}`. ' +
           'Column set / widths provisional pending TD-03.56 responsive unification.',
       },
@@ -31,9 +31,9 @@ const meta: Meta<typeof SetTableHeader> = {
   },
   decorators: [
     (Story) => (
-      <View style={{ width: 320, backgroundColor: '#131313' }}>
+      <Surface level="base" style={{ width: 320 }}>
         <Story />
-      </View>
+      </Surface>
     ),
   ],
 }

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

@@ -1,5 +1,6 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
-import { View, Text } from 'react-native'
+import { View } from 'react-native'
+import { Typography } from '../Typography'
 
 // One header column: its label and its fixed width (PREV is the lone flex column,
 // `undefined`). Order + widths mirror SetRow's cells so headers align over rows.
@@ -19,6 +20,11 @@ export interface SetTableHeaderProps {
 // distribute across the full strip width via `justifyContent: space-between`.
 const PREV_COLUMN: Column = { label: 'PREV', width: undefined }
 
+// `microLabel` is the 10px step of the scale (TOKENS.md §4), in the same Inter face as
+// the table's value cells. Only the row's line box is pinned: the raw <Text> this
+// replaced carried no lineHeight, and the variant's `leading-normal` would grow the row.
+const COLUMN_LABEL = 'leading-[normal]'
+
 /** Columns in order, with the weight column reflecting `unit`; PREV dropped when hidden. */
 function buildColumns(unit: 'lbs' | 'kg', showPrevious: boolean): Column[] {
   return [
@@ -68,18 +74,9 @@ export function SetTableHeader({
             }}
             {...(isFlex ? { className: 'flex-1' } : {})}
           >
-            <Text
-              className="text-text-tertiary"
-              style={{
-                fontSize: 10,
-                fontWeight: '600',
-                fontFamily: 'Inter, sans-serif',
-                textTransform: 'uppercase',
-                letterSpacing: 0.8,
-              }}
-            >
+            <Typography variant="microLabel" color="tertiary" className={COLUMN_LABEL}>
               {label}
-            </Text>
+            </Typography>
           </View>
         )
       })}

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { View } from 'react-native'
 import { SetsRepsLoad } from './SetsRepsLoad'
+import { Surface } from '../../ui/surface'
 
 /**
  * `SetsRepsLoad` — the `sets × reps @ load` prescription line in the TempoDisplay
@@ -8,7 +8,7 @@ import { SetsRepsLoad } from './SetsRepsLoad'
  * separators).
  */
 const meta: Meta<typeof SetsRepsLoad> = {
-  title: 'Workout/SetsRepsLoad',
+  title: 'Custom/Workout/SetsRepsLoad',
   component: SetsRepsLoad,
   tags: ['autodocs'],
   parameters: {
@@ -16,17 +16,17 @@ const meta: Meta<typeof SetsRepsLoad> = {
       description: {
         component:
           '**Atom.** The `sets × reps @ load` prescription line in the TempoDisplay visual ' +
-          'language. Composes [MetricCell](?path=/docs/workout-metriccell--docs) ' +
-          '(shared with [TempoDisplay](?path=/docs/workout-tempodisplay--docs)). ' +
-          'Used-by ↑ [ExerciseHeading](?path=/docs/workout-exerciseheading--docs).',
+          'language. Composes [MetricCell](?path=/docs/custom-workout-metriccell--docs) ' +
+          '(shared with [TempoDisplay](?path=/docs/custom-workout-tempodisplay--docs)). ' +
+          'Used-by ↑ [ExerciseHeading](?path=/docs/custom-workout-exerciseheading--docs).',
       },
     },
   },
   decorators: [
     (Story) => (
-      <View style={{ padding: 16, backgroundColor: '#131313' }}>
+      <Surface level="base" style={{ padding: 16 }}>
         <Story />
-      </View>
+      </Surface>
     ),
   ],
 }

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

@@ -1,10 +1,8 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { View, type ViewProps } from 'react-native'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { useOnSurfaceColor } from '../../ui/surface/SurfaceContext'
 import { MetricCell } from './metricText'
 
-const t = getSemanticColors('dark')
-
 const TIMES = '×' // × multiplication sign, padded by muted separators
 const AT = '@'
 
@@ -17,12 +15,18 @@ export interface SetsRepsLoadProps extends ViewProps {
   unit?: string
   /** Cell font size (px). Default 11 — the compact rail/card scale. Raise for a wall read-out. */
   fontSize?: number
+  /**
+   * Flatten the whole run to one dimmer, regular-weight tone (the collapsed/upcoming
+   * card row) instead of the bright bold value / muted separator split (the rail).
+   * Also drops the `×` separator's padding spaces — "3×6", not "3 × 6".
+   */
+  muted?: boolean
   className?: string
 }
 
 /**
  * The `sets × reps @ load` prescription line, in the TempoDisplay visual language
- * (Inter · 600 · letter-spacing 1 · value cells with muted `×` / `@` separators).
+ * (Inter · letter-spacing 1 · value cells with muted `×` / `@` separators).
  * Shares the {@link MetricCell} primitive with TempoDisplay so the two stay in step.
  */
 export function SetsRepsLoad({
@@ -31,11 +35,17 @@ export function SetsRepsLoad({
   load,
   unit = 'lb',
   fontSize,
+  muted = false,
   className,
   ...props
 }: SetsRepsLoadProps) {
-  const value = t['text-primary']
-  const sep = t['text-tertiary']
+  const primary = useOnSurfaceColor('primary')
+  const tertiary = useOnSurfaceColor('tertiary')
+  const secondary = useOnSurfaceColor('secondary')
+  const value = muted ? secondary : primary
+  const sep = muted ? secondary : tertiary
+  const weight = muted ? 400 : 600
+  const times = muted ? TIMES : ` ${TIMES} `
 
   return (
     <View
@@ -45,18 +55,20 @@ export function SetsRepsLoad({
       testID="sets-reps-load"
       {...props}
     >
-      <MetricCell color={value} fontSize={fontSize}>
+      <MetricCell color={value} fontSize={fontSize} weight={weight}>
         {sets}
       </MetricCell>
-      <MetricCell color={sep} fontSize={fontSize}>{` ${TIMES} `}</MetricCell>
-      <MetricCell color={value} fontSize={fontSize}>
+      <MetricCell color={sep} fontSize={fontSize} weight={weight}>
+        {times}
+      </MetricCell>
+      <MetricCell color={value} fontSize={fontSize} weight={weight}>
         {reps}
       </MetricCell>
-      <MetricCell color={sep} fontSize={fontSize}>{` ${AT} `}</MetricCell>
-      <MetricCell color={value} fontSize={fontSize}>
+      <MetricCell color={sep} fontSize={fontSize} weight={weight}>{` ${AT} `}</MetricCell>
+      <MetricCell color={value} fontSize={fontSize} weight={weight}>
         {load}
       </MetricCell>
-      <MetricCell color={sep} fontSize={fontSize}>{` ${unit}`}</MetricCell>
+      <MetricCell color={sep} fontSize={fontSize} weight={weight}>{` ${unit}`}</MetricCell>
     </View>
   )
 }

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

@@ -1,9 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View } from 'react-native'
 import { Sparkline } from './Sparkline'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+const t = getSemanticColors('dark')
 
 const meta: Meta<typeof Sparkline> = {
-  title: 'Workout/DataViz/Sparkline',
+  title: 'Custom/Workout/DataViz/Sparkline',
   component: Sparkline,
   tags: ['autodocs'],
   argTypes: {
@@ -56,7 +59,7 @@ export const Descending: Story = {
   args: {
     data: descending,
     showDots: true,
-    color: '#ff4757',
+    color: t['status-error-vivid'],
   },
 }
 
@@ -64,7 +67,7 @@ export const UCurve: Story = {
   args: {
     data: uCurve,
     showDots: true,
-    color: '#2ed573',
+    color: t['status-success'],
   },
 }
 
@@ -72,7 +75,7 @@ export const Flat: Story = {
   args: {
     data: flat,
     showDots: true,
-    color: '#ffd43b',
+    color: t['status-warning-light'],
   },
 }
 
@@ -81,8 +84,8 @@ export const WithReferenceLines: Story = {
     data: ascending,
     showDots: true,
     referenceLines: [
-      { value: 30, color: '#ff4757', dashed: true },
-      { value: 45, color: '#2ed573', dashed: false },
+      { value: 30, color: t['status-error-vivid'], dashed: true },
+      { value: 45, color: t['status-success'], dashed: false },
     ],
   },
 }
@@ -99,7 +102,7 @@ export const DotsAndHighlightLast: Story = {
     data: volatile,
     showDots: true,
     highlightLast: true,
-    color: '#ffa502',
+    color: t['status-warning'],
   },
 }
 
@@ -116,10 +119,10 @@ export const AllShapes: Story = {
   render: () => (
     <View style={{ gap: 16, padding: 16 }}>
       <Sparkline data={ascending} showDots highlightLast />
-      <Sparkline data={descending} showDots color="#ff4757" />
-      <Sparkline data={uCurve} showDots color="#2ed573" />
-      <Sparkline data={flat} showDots color="#ffd43b" />
-      <Sparkline data={volatile} showDots color="#ffa502" highlightLast />
+      <Sparkline data={descending} showDots color={t['status-error-vivid']} />
+      <Sparkline data={uCurve} showDots color={t['status-success']} />
+      <Sparkline data={flat} showDots color={t['status-warning-light']} />
+      <Sparkline data={volatile} showDots color={t['status-warning']} highlightLast />
     </View>
   ),
 }

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

@@ -2,6 +2,7 @@ import { describe, it, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { Sparkline } from './Sparkline'
+import { resolveColor } from '../../../theme/resolve-color'
 
 const sampleData = [10, 25, 15, 30, 20]
 
@@ -19,9 +20,7 @@ describe('Sparkline', () => {
   it('renders line segments between points', () => {
     render(<Sparkline data={sampleData} />)
     for (let i = 1; i < sampleData.length; i++) {
-      expect(
-        screen.getByTestId(`sparkline-segment-${i}`),
-      ).toBeInTheDocument()
+      expect(screen.getByTestId(`sparkline-segment-${i}`)).toBeInTheDocument()
     }
   })
 
@@ -40,9 +39,7 @@ describe('Sparkline', () => {
   it('highlights last dot when highlightLast is true', () => {
     render(<Sparkline data={sampleData} highlightLast />)
     const lastIndex = sampleData.length - 1
-    expect(
-      screen.getByTestId(`sparkline-dot-${lastIndex}`),
-    ).toBeInTheDocument()
+    expect(screen.getByTestId(`sparkline-dot-${lastIndex}`)).toBeInTheDocument()
     // Other dots should not be present (showDots is false)
     expect(screen.queryByTestId('sparkline-dot-0')).not.toBeInTheDocument()
   })
@@ -62,7 +59,7 @@ describe('Sparkline', () => {
           { value: 20, color: '#ff0000' },
           { value: 25, color: '#00ff00', dashed: true },
         ]}
-      />,
+      />
     )
     expect(screen.getByTestId('sparkline-reference-0')).toBeInTheDocument()
     expect(screen.getByTestId('sparkline-reference-1')).toBeInTheDocument()
@@ -70,9 +67,36 @@ describe('Sparkline', () => {
 
   it('does not render reference lines when not provided', () => {
     render(<Sparkline data={sampleData} />)
-    expect(
-      screen.queryByTestId('sparkline-reference-0'),
-    ).not.toBeInTheDocument()
+    expect(screen.queryByTestId('sparkline-reference-0')).not.toBeInTheDocument()
+  })
+
+  it('defaults the trace to the brand-primary token', () => {
+    render(<Sparkline data={sampleData} highlightLast />)
+    expect(screen.getByTestId('sparkline-segment-1')).toHaveStyle({
+      backgroundColor: resolveColor('brand-primary'),
+    })
+    expect(screen.getByTestId('sparkline-dot-4')).toHaveStyle({
+      backgroundColor: resolveColor('brand-primary'),
+    })
+  })
+
+  it('lets a caller override the trace colour', () => {
+    render(<Sparkline data={sampleData} color="#00ff00" />)
+    expect(screen.getByTestId('sparkline-segment-1')).toHaveStyle({
+      backgroundColor: '#00ff00',
+    })
+  })
+
+  it('renders a reference-line label in the caller colour', () => {
+    render(
+      <Sparkline
+        data={sampleData}
+        referenceLines={[{ value: 20, color: '#ff0000', label: 'MAV' }]}
+      />
+    )
+    const label = screen.getByTestId('sparkline-reference-label-0')
+    expect(label).toHaveTextContent('MAV')
+    expect(label).toHaveStyle({ color: '#ff0000' })
   })
 
   it('uses default dimensions', () => {
@@ -89,23 +113,17 @@ describe('Sparkline', () => {
 
   it('sets accessibility label', () => {
     render(<Sparkline data={sampleData} />)
-    expect(
-      screen.getByLabelText('Sparkline chart with 5 data points'),
-    ).toBeInTheDocument()
+    expect(screen.getByLabelText('Sparkline chart with 5 data points')).toBeInTheDocument()
   })
 
   it('sets empty accessibility label for no data', () => {
     render(<Sparkline data={[]} />)
-    expect(
-      screen.getByLabelText('Sparkline chart, no data'),
-    ).toBeInTheDocument()
+    expect(screen.getByLabelText('Sparkline chart, no data')).toBeInTheDocument()
   })
 
   describe('accessibility', () => {
     it('has no accessibility violations', async () => {
-      const { container } = render(
-        <Sparkline data={sampleData} showDots highlightLast />,
-      )
+      const { container } = render(<Sparkline data={sampleData} showDots highlightLast />)
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })

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

@@ -1,10 +1,8 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
-import React from 'react'
-import { View, Text, type ViewProps } from 'react-native'
+import { View, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
-
-const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
+import { Typography } from '../Typography'
+import { resolveColor } from '../../../theme/resolve-color'
 
 export interface SparklineProps extends ViewProps {
   data: number[]
@@ -22,10 +20,7 @@ export interface SparklineProps extends ViewProps {
   className?: string
 }
 
-function normalizeData(
-  data: number[],
-  height: number,
-): number[] {
+function normalizeData(data: number[], height: number): number[] {
   if (data.length === 0) return []
   const min = Math.min(...data)
   const max = Math.max(...data)
@@ -33,11 +28,7 @@ function normalizeData(
   return data.map((v) => height - ((v - min) / range) * height)
 }
 
-function normalizeValue(
-  value: number,
-  data: number[],
-  height: number,
-): number {
+function normalizeValue(value: number, data: number[], height: number): number {
   const min = Math.min(...data)
   const max = Math.max(...data)
   const range = max - min || 1
@@ -67,7 +58,7 @@ export function Sparkline({
     )
   }
 
-  const resolvedColor = color ?? BRAND_PRIMARY
+  const resolvedColor = color ?? resolveColor('brand-primary')
   const normalized = normalizeData(data, height)
   const stepX = data.length > 1 ? width / (data.length - 1) : 0
 
@@ -112,19 +103,24 @@ export function Sparkline({
             testID={`sparkline-reference-${i}`}
           >
             {line.label && (
-              <Text
+              // `3xs` (9px) is the scale floor; the label was 7px, which is off it
+              // entirely (TOKENS.md §4). The line box stays unpinned, as the raw
+              // <Text> this replaced was, so the absolute offset still lands.
+              <Typography
+                variant="caption"
+                color="inherit"
+                className="text-3xs leading-[normal]"
                 style={{
                   position: 'absolute',
                   right: 0,
                   top: -10,
-                  fontSize: 7,
                   color: line.color,
                   opacity: 1,
                 }}
                 testID={`sparkline-reference-label-${i}`}
               >
                 {line.label}
-              </Text>
+              </Typography>
             )}
           </View>
         )

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

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { StatusDot } from './StatusDot'
 
 const meta: Meta<typeof StatusDot> = {
-  title: 'Components/Atoms/StatusDot',
+  title: 'Custom/Workout/StatusDot',
   component: StatusDot,
   tags: ['autodocs'],
   argTypes: {