@titan-design/react-ui 0.12.0 → 0.13.0

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

@@ -0,0 +1,182 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { DualVelocityStrip } from './VelocityStrip'
+import { greyRamp, primitiveColors } from '../../../theme/tokens/primitives'
+
+const PAGE_BG = greyRamp[975]
+const PANEL_BG = greyRamp[950]
+const LIST_BG = greyRamp[925]
+
+/** Bilateral cable chest press, LEFT dominant / RIGHT lagging, 6 of 8 reps done. */
+const LEFT = [0.54, 0.52, 0.5, 0.48, 0.46, 0.44]
+const RIGHT = [0.49, 0.47, 0.45, 0.42, 0.4, 0.38]
+
+const meta: Meta<typeof DualVelocityStrip> = {
+  title: 'Custom/Workout/DataViz/DualVelocityStrip',
+  component: DualVelocityStrip,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'The dual-voltra (bilateral) DIVERGING per-rep velocity chart. LEFT reps grow UP, ' +
+          'RIGHT reps grow DOWN from one shared centre axis — one mirrored pair per rep index — ' +
+          'so a left-dominant / right-lagging set reads pre-attentively as an asymmetric ' +
+          'silhouette. Reuses VelocityStrip’s slot vocabulary (rep / todo / variable / ' +
+          'continue), its velocity-zone colors, hero geometry, and the live-rep pop. Color is ' +
+          'ALWAYS the velocity zone; SIDE is encoded by position only, never hue. `variant="hero"` ' +
+          'is the wall scale (value labels + per-side running-best reference lines); `variant="rail"` ' +
+          'is the compact rail-expanded scale. Single-voltra sets keep using VelocityStrip.',
+      },
+    },
+  },
+  argTypes: {
+    variant: { control: 'inline-radio', options: ['hero', 'rail'] },
+    targetReps: { control: 'number' },
+    liveRepIndex: { control: 'number' },
+    height: { control: { type: 'number', min: 48, max: 320, step: 4 } },
+    scale: { control: 'inline-radio', options: ['peak', 'fixed'] },
+  },
+}
+export default meta
+type Story = StoryObj<typeof DualVelocityStrip>
+
+function Panel({ children, width }: { children: React.ReactNode; width?: number }) {
+  return (
+    <View style={{ width, backgroundColor: PANEL_BG, borderRadius: 12, padding: 20, gap: 12 }}>
+      {children}
+    </View>
+  )
+}
+
+function Page({ children }: { children: React.ReactNode }) {
+  return (
+    <View style={{ padding: 28, backgroundColor: PAGE_BG, minHeight: '100%', gap: 24 }}>
+      {children}
+    </View>
+  )
+}
+
+/** HERO — the across-the-room bilateral live chart, L up / R down from the centre axis. */
+export const Hero: Story = {
+  args: { variant: 'hero', targetReps: 8, liveRepIndex: 5, height: 280, scale: 'peak' },
+  render: (args) => (
+    <Page>
+      <Panel width={760}>
+        <Text
+          style={{
+            color: primitiveColors.white,
+            fontFamily: '"Space Grotesk", sans-serif',
+            fontSize: 15,
+            fontWeight: '700',
+          }}
+        >
+          Hero — dual diverging velocity
+        </Text>
+        <DualVelocityStrip {...args} left={{ velocities: LEFT }} right={{ velocities: RIGHT }} />
+      </Panel>
+    </Page>
+  ),
+}
+
+/** RAIL — the same diverging language at the compact rail-expanded scale (no labels/refs). */
+export const RailExpanded: Story = {
+  args: { variant: 'rail', targetReps: 8, height: 84 },
+  render: (args) => (
+    <Page>
+      <Panel width={320}>
+        <Text
+          style={{
+            color: primitiveColors.white,
+            fontFamily: '"Space Grotesk", sans-serif',
+            fontSize: 13,
+            fontWeight: '700',
+          }}
+        >
+          Rail expanded — same language, smaller
+        </Text>
+        <View style={{ backgroundColor: LIST_BG, borderRadius: 8, padding: 12 }}>
+          <DualVelocityStrip {...args} left={{ velocities: LEFT }} right={{ velocities: RIGHT }} />
+        </View>
+      </Panel>
+    </Page>
+  ),
+}
+
+/**
+ * A completed, narrow-panel set ending on its OWN peak on both sides (TD-07.10 repro): the last
+ * rep's value label has no sibling column to its right, and its bar sits at the running-best
+ * reference-line height — the two crowd together at the plot's right edge. Narrow enough
+ * (~420px panel, 8 reps/side) that the last column's bar width is under the label's estimated
+ * width, so the flip rule fires: the last label anchors right (grows left) instead of centering
+ * and bleeding past the edge.
+ */
+const ASCENDING_LEFT = [
+  0.55, 0.58, 0.6, 0.63, 0.66, 0.68, 0.71, 0.74, 0.77, 0.79, 0.82, 0.85, 0.87, 0.9,
+]
+const ASCENDING_RIGHT = [
+  0.53, 0.56, 0.58, 0.61, 0.64, 0.66, 0.69, 0.72, 0.75, 0.77, 0.8, 0.83, 0.85, 0.88,
+]
+
+export const CrowdedRightEdgeLabel: Story = {
+  args: { variant: 'hero', height: 300, scale: 'peak' },
+  render: (args) => (
+    <Page>
+      <Panel width={420}>
+        <Text
+          style={{
+            color: primitiveColors.white,
+            fontFamily: '"Space Grotesk", sans-serif',
+            fontSize: 15,
+            fontWeight: '700',
+          }}
+        >
+          Peak on the last rep, narrow panel — the flip rule (TD-07.10)
+        </Text>
+        <DualVelocityStrip
+          {...args}
+          left={{ velocities: ASCENDING_LEFT }}
+          right={{ velocities: ASCENDING_RIGHT }}
+        />
+      </Panel>
+    </Page>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Before the fix, the last rep's centered label bled past the plot's right edge and sat " +
+          "on top of the running-best reference line. The flip rule right-anchors that column's " +
+          'label instead, so it clears both.',
+      },
+    },
+  },
+}
+
+/** A range set on both sides — shows the cyan variable-window slots mirrored past the floor. */
+export const RangeSet: Story = {
+  args: { variant: 'hero', height: 260, scale: 'peak' },
+  render: (args) => (
+    <Page>
+      <Panel width={760}>
+        <Text
+          style={{
+            color: primitiveColors.white,
+            fontFamily: '"Space Grotesk", sans-serif',
+            fontSize: 15,
+            fontWeight: '700',
+          }}
+        >
+          Range set — variable window mirrored both sides
+        </Text>
+        <DualVelocityStrip
+          {...args}
+          left={{ set: { type: 'range', velocities: LEFT.slice(0, 5), floor: 6, max: 10 } }}
+          right={{ set: { type: 'range', velocities: RIGHT.slice(0, 5), floor: 6, max: 10 } }}
+        />
+      </Panel>
+    </Page>
+  ),
+}

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

@@ -17,8 +17,9 @@ const liveEntranceCalls = vi.hoisted(
 )
 
 vi.mock('../charts/live-rep-growth', async () => {
-  const actual =
-    await vi.importActual<typeof import('../charts/live-rep-growth')>('../charts/live-rep-growth')
+  const actual = await vi.importActual<typeof import('../charts/live-rep-growth')>(
+    '../charts/live-rep-growth'
+  )
   return {
     ...actual,
     useLiveRepGrowth: (

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

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { View } from 'react-native'
 import { ExerciseCard } from './ExerciseCard'
 import type { SetRowProps } from './SetRow'
+import { Surface } from '../../ui/surface'
 
 const meta: Meta<typeof ExerciseCard> = {
-  title: 'Workout/ExerciseCard',
+  title: 'Custom/Workout/ExerciseCard',
   component: ExerciseCard,
   tags: ['autodocs'],
   parameters: {
@@ -14,10 +14,11 @@ const meta: Meta<typeof ExerciseCard> = {
           '**Organism** (data-contract card). Three representations: `upcoming` (a dimmed, ' +
           'not-yet-reached row), collapsed (name + summary + per-set velocity strips), and expanded ' +
           '— the unified card whose persistent header is the real ' +
-          '[ExerciseCardHeading](?path=/docs/workout-exercisecardheading--docs) over a SET · REPS · ' +
-          'LBS · RPE body of [SetRow](?path=/docs/workout-setrow--docs)s (compact spotlight on the ' +
+          '[ExerciseCardHeading](?path=/docs/custom-workout-exercisecardheading--docs) over a SET · REPS · ' +
+          'LBS · RPE body of [SetRow](?path=/docs/custom-workout-setrow--docs)s (compact spotlight on the ' +
           'live set). Expand is controlled (`expanded` + `onExpandedChange`) or uncontrolled ' +
-          '(`defaultExpanded`); `upcoming` overrides expand.',
+          '(`defaultExpanded`); `upcoming` overrides expand.' +
+          ' Composes **VelocityStrip** · **PlaceholderStrip** · **PrBadge** · **SetRow** · **SetTableHeader** · **ExerciseCardHeading**.',
       },
     },
   },
@@ -33,9 +34,9 @@ const meta: Meta<typeof ExerciseCard> = {
   },
   decorators: [
     (Story) => (
-      <View style={{ maxWidth: 400, padding: 16, backgroundColor: '#121212' }}>
+      <Surface level="base" style={{ maxWidth: 400, padding: 16 }}>
         <Story />
-      </View>
+      </Surface>
     ),
   ],
 }

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

@@ -3,7 +3,7 @@ import { render, screen, fireEvent, within } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { ExerciseCard } from './ExerciseCard'
 import type { SetRowProps } from './SetRow'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { resolveColor } from '../../../theme/resolve-color'
 
 const baseCollapsedProps = {
   name: 'Bench Press',
@@ -87,8 +87,10 @@ describe('ExerciseCard', () => {
       sets: unifiedSets,
     }
 
-    // Read from the tokens, not pinned (see SetRow.test.tsx).
-    const { 'text-primary': T_ACTIVE, 'text-secondary': T_MUTED } = getSemanticColors('dark')
+    // Read from the tokens, not pinned, and through resolveColor as SetRow now
+    // renders them (see SetRow.test.tsx).
+    const T_ACTIVE = resolveColor('text-primary')
+    const T_MUTED = resolveColor('text-secondary')
 
     it('renders exercise name via the real ExerciseCardHeading header', () => {
       render(<ExerciseCard {...expandedProps} />)
@@ -102,6 +104,14 @@ describe('ExerciseCard', () => {
       expect(screen.getByTestId('exercise-card-body')).toBeInTheDocument()
     })
 
+    // No baseline covers the expanded card, so the seam's token is asserted here.
+    it('draws the header/body seam from the hairline-subtle token', () => {
+      render(<ExerciseCard {...expandedProps} />)
+      expect(screen.getByTestId('exercise-card-body')).toHaveStyle({
+        borderTopColor: resolveColor('hairline-subtle'),
+      })
+    })
+
     it('renders the header per-set strip derived from the set rows', () => {
       render(<ExerciseCard {...expandedProps} />)
       expect(screen.getByTestId('exercise-card-strip')).toBeInTheDocument()

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

@@ -1,6 +1,6 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { useState } from 'react'
-import { View, Text, Pressable } from 'react-native'
+import { View, Pressable } from 'react-native'
 import { VelocityStrip, type VelocityZoneBandProp } from './VelocityStrip'
 import { PlaceholderStrip } from './PlaceholderStrip'
 import { PrBadge } from './PrBadge'
@@ -9,8 +9,9 @@ import { type SetStripSet } from './SetStrip'
 import { SetTableHeader } from './SetTableHeader'
 import { ExerciseCardHeading } from './ExerciseCardHeading'
 import { type ExerciseIndicatorKind } from './ExerciseIndicator'
+import { Typography } from '../Typography'
 import { roundWeight } from '../../../utils/workout-format'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { resolveColor } from '../../../theme/resolve-color'
 
 export interface ExerciseCardProps {
   name: string
@@ -155,30 +156,28 @@ function CollapsedCard({
         }}
       >
         <View className="flex-row items-center" testID="exercise-card-header">
-          <Text
-            className="text-text-primary"
-            style={{
-              fontSize: 14,
-              fontFamily: '"Space Grotesk", sans-serif',
-              fontWeight: '700',
-            }}
+          {/* 14px/700 Space Grotesk is `h6` at the `sm` step; the face and the heading
+              role come from the variant, the weight and size from the scale. */}
+          <Typography
+            variant="h6"
+            color="primary"
+            className="text-sm font-bold leading-[normal]"
             testID="exercise-card-name"
           >
             {name}
-          </Text>
+          </Typography>
           <View className="flex-1" />
           {summary && (
-            <Text
-              className="text-text-secondary"
-              style={{
-                fontSize: 12,
-                fontFamily: 'Inter, sans-serif',
-                marginRight: 8,
-              }}
+            /* The demo's "body" face is Inter, which is the library's `font-sans`
+               (the mapping B1 established for PrBadge), not Typography's `font-body`. */
+            <Typography
+              variant="caption"
+              color="secondary"
+              className="font-sans mr-2 leading-[normal]"
               testID="exercise-card-summary"
             >
               {formatSummary(summary)}
-            </Text>
+            </Typography>
           )}
           {isPR && (
             <View style={{ marginLeft: 4 }}>
@@ -218,10 +217,6 @@ function CollapsedCard({
 // is the real ExerciseCardHeading, and the revealed body drops PREV and renders
 // one real SetRow per set (muted done/todo, brightened live spotlight).
 
-const DARK = getSemanticColors('dark')
-/** The header↔body seam. */
-const BODY_DIVIDER = DARK['hairline-subtle']
-
 /** Project the set rows onto the heading strip's per-set state (done / active / todo). */
 function deriveHeaderSetStates(sets: SetRowProps[]): SetStripSet[] {
   return sets.map((set): SetStripSet => {
@@ -284,8 +279,13 @@ function ExpandedCard({
         testID="exercise-card-heading"
       />
 
+      {/* The header↔body seam. */}
       <View
-        style={{ borderTopWidth: 1, borderTopColor: BODY_DIVIDER, paddingBottom: 6 }}
+        style={{
+          borderTopWidth: 1,
+          borderTopColor: resolveColor('hairline-subtle'),
+          paddingBottom: 6,
+        }}
         testID="exercise-card-body"
       >
         <SetTableHeader unit={unit} showPrevious={false} testID="exercise-card-column-headers" />
@@ -327,47 +327,38 @@ function UpcomingCard({
       >
         <View className="flex-row items-center">
           {/* Name never truncates (no numberOfLines); prescription + previousBest ellipsize first. */}
-          <Text
-            className="text-text-primary"
-            style={{
-              flexShrink: 0,
-              fontSize: 14,
-              fontFamily: '"Space Grotesk", sans-serif',
-              fontWeight: '700',
-            }}
+          <Typography
+            variant="h6"
+            color="primary"
+            className="shrink-0 text-sm font-bold leading-[normal]"
             testID="exercise-card-name"
           >
             {name}
-          </Text>
+          </Typography>
           {prescription && (
-            <Text
-              className="text-text-secondary"
-              numberOfLines={1}
-              style={{
-                flexShrink: 1,
-                fontSize: 12,
-                fontFamily: 'Inter, sans-serif',
-                marginLeft: 8,
-              }}
+            <Typography
+              variant="caption"
+              color="secondary"
+              maxLines={1}
+              className="font-sans shrink ml-2 leading-[normal]"
               testID="exercise-card-prescription"
             >
               {prescription}
-            </Text>
+            </Typography>
           )}
           <View className="flex-1" style={{ minWidth: 8 }} />
           {previousBest && (
-            <Text
-              className="text-text-tertiary"
-              numberOfLines={1}
-              style={{
-                flexShrink: 1,
-                fontSize: 11,
-                fontFamily: 'Inter, sans-serif',
-              }}
+            /* 11px is off the type scale; `2xs` (10px) is the step below, as B2's
+               WorkoutCard date took for the same size. */
+            <Typography
+              variant="caption"
+              color="tertiary"
+              maxLines={1}
+              className="font-sans shrink text-2xs leading-[normal]"
               testID="exercise-card-previous-best"
             >
               {previousBest}
-            </Text>
+            </Typography>
           )}
         </View>
       </View>

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

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { View } from 'react-native'
 import { ExerciseCardHeading } from './ExerciseCardHeading'
 import type { SetStripSet } from './SetStrip'
+import { Surface } from '../../ui/surface'
 
 /**
  * `ExerciseCardHeading` — the complete, standalone session-rail heading: an
@@ -10,7 +10,7 @@ import type { SetStripSet } from './SetStrip'
  * An empty `setStates` renders no strip.
  */
 const meta: Meta<typeof ExerciseCardHeading> = {
-  title: 'Workout/ExerciseCardHeading',
+  title: 'Custom/Workout/ExerciseCardHeading',
   component: ExerciseCardHeading,
   tags: ['autodocs'],
   parameters: {
@@ -18,10 +18,10 @@ const meta: Meta<typeof ExerciseCardHeading> = {
       description: {
         component:
           '**Molecule.** The complete standalone session-rail heading. Composes ' +
-          '[ExerciseHeading](?path=/docs/workout-exerciseheading--docs) + ' +
-          '[SetStrip](?path=/docs/workout-setstrip--docs). ' +
+          '[ExerciseHeading](?path=/docs/custom-workout-exerciseheading--docs) + ' +
+          '[SetStrip](?path=/docs/custom-workout-setstrip--docs). ' +
           'Used-by ↑ [SessionRail](?path=/docs/shell-sessionrail--docs); ' +
-          '[ExerciseCard](?path=/docs/workout-exercisecard--docs) `state="rail"` delegates here.',
+          '[ExerciseCard](?path=/docs/custom-workout-exercisecard--docs) `state="rail"` delegates here.',
       },
     },
   },
@@ -37,9 +37,9 @@ const meta: Meta<typeof ExerciseCardHeading> = {
   },
   decorators: [
     (Story) => (
-      <View style={{ width: 246, backgroundColor: '#131313' }}>
+      <Surface level="base" style={{ width: 246 }}>
         <Story />
-      </View>
+      </Surface>
     ),
   ],
 }

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

@@ -192,7 +192,15 @@ const vbt: ExerciseVbt = {
 const meta: Meta<typeof ExerciseDetailPage> = {
   title: 'Pages/Exercise Detail',
   component: ExerciseDetailPage,
-  parameters: { layout: 'fullscreen' },
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Composes **MesoStatusCard** · **StrengthTrendChart** · **CapacityBandChart** · **ExerciseCard** · **VelocityStrip**.',
+      },
+    },
+  },
   tags: ['autodocs'],
   args: {
     exercise: {

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { View } from 'react-native'
 import { ExerciseHeading } from './ExerciseHeading'
+import { Surface } from '../../ui/surface'
 
 /**
  * `ExerciseHeading` — the exercise-heading info block (no strip): the name +
@@ -9,7 +9,7 @@ import { ExerciseHeading } from './ExerciseHeading'
  * target; TempoDisplay is a sibling (it is itself a Pressable).
  */
 const meta: Meta<typeof ExerciseHeading> = {
-  title: 'Workout/ExerciseHeading',
+  title: 'Custom/Workout/ExerciseHeading',
   component: ExerciseHeading,
   tags: ['autodocs'],
   parameters: {
@@ -17,10 +17,10 @@ const meta: Meta<typeof ExerciseHeading> = {
       description: {
         component:
           '**Molecule.** The exercise-heading info block (no strip). Composes ' +
-          '[ExerciseIndicator](?path=/docs/workout-exerciseindicator--docs) + ' +
-          '[SetsRepsLoad](?path=/docs/workout-setsrepsload--docs) + ' +
-          '[TempoDisplay](?path=/docs/workout-tempodisplay--docs). ' +
-          'Used-by ↑ [ExerciseCardHeading](?path=/docs/workout-exercisecardheading--docs).',
+          '[ExerciseIndicator](?path=/docs/custom-workout-exerciseindicator--docs) + ' +
+          '[SetsRepsLoad](?path=/docs/custom-workout-setsrepsload--docs) + ' +
+          '[TempoDisplay](?path=/docs/custom-workout-tempodisplay--docs). ' +
+          'Used-by ↑ [ExerciseCardHeading](?path=/docs/custom-workout-exercisecardheading--docs).',
       },
     },
   },
@@ -35,9 +35,9 @@ const meta: Meta<typeof ExerciseHeading> = {
   },
   decorators: [
     (Story) => (
-      <View style={{ width: 246, padding: 16, backgroundColor: '#131313' }}>
+      <Surface level="base" style={{ width: 246, padding: 16 }}>
         <Story />
-      </View>
+      </Surface>
     ),
   ],
 }

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

@@ -1,5 +1,6 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
-import { View, Text, Pressable } from 'react-native'
+import { View, Pressable } from 'react-native'
+import { Typography } from '../Typography'
 import { roundWeight } from '../../../utils/workout-format'
 import { SetsRepsLoad } from './SetsRepsLoad'
 import { TempoDisplay } from './TempoDisplay'
@@ -62,13 +63,15 @@ export function ExerciseHeading({
         style={{ gap: 8 }}
         testID="exercise-card-header"
       >
-        <Text
-          className="text-text-primary"
-          style={{ fontSize: 14, fontFamily: '"Space Grotesk", sans-serif', fontWeight: '700' }}
+        {/* The row is a button label, not a heading, so `boldLabel` carries the weight and
+            no header role has to be undone. Size and the Space Grotesk face are pinned. */}
+        <Typography
+          variant="boldLabel"
+          className="font-heading text-sm leading-[normal]"
           testID="exercise-card-name"
         >
           {name}
-        </Text>
+        </Typography>
         <View className="flex-1" />
         {indicator && <ExerciseIndicator kind={indicator} />}
       </Pressable>

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

@@ -6,6 +6,7 @@ import {
   INDICATOR_PRECEDENCE,
   type ExerciseIndicatorKind,
 } from './ExerciseIndicator'
+import { Surface } from '../../ui/surface'
 
 /**
  * `ExerciseIndicator` — a small circular OUTLINED chip in an exercise heading's
@@ -15,7 +16,7 @@ import {
  * picks the highest-precedence active signal.
  */
 const meta: Meta<typeof ExerciseIndicator> = {
-  title: 'Workout/ExerciseIndicator',
+  title: 'Custom/Workout/ExerciseIndicator',
   component: ExerciseIndicator,
   tags: ['autodocs'],
   parameters: {
@@ -26,7 +27,8 @@ const meta: Meta<typeof ExerciseIndicator> = {
           'precedence-ranked kinds (imbalance › overshoot › velocity-loss › missed-reps › pr › ' +
           'info) over four status-token tier colors; glyph = signal, color = severity tier. ' +
           '`resolveIndicator()` selects the single chip to show. Used-by ↑ ' +
-          '[ExerciseHeading](?path=/docs/workout-exerciseheading--docs).',
+          '[ExerciseHeading](?path=/docs/custom-workout-exerciseheading--docs).' +
+          ' Composes **Icons**.',
       },
     },
   },
@@ -36,9 +38,9 @@ const meta: Meta<typeof ExerciseIndicator> = {
   },
   decorators: [
     (Story) => (
-      <View style={{ padding: 24, backgroundColor: '#131313' }}>
+      <Surface level="base" style={{ padding: 24 }}>
         <Story />
-      </View>
+      </Surface>
     ),
   ],
 }

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

@@ -7,18 +7,30 @@ import {
   INDICATOR_PRECEDENCE,
   type ExerciseIndicatorKind,
 } from './ExerciseIndicator'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
-// tier color = titan status token, applied as the glyph's SVG stroke (literal hex):
-// danger=status-error, warning=status-warning, success=status-success, info=status-info.
-const kinds: { kind: ExerciseIndicatorKind; label: string; tier: string }[] = [
-  { kind: 'imbalance', label: 'Left/right imbalance', tier: '#D14343' },
-  { kind: 'overshoot', label: 'Load overshoot', tier: '#D14343' },
-  { kind: 'velocity-loss', label: 'Velocity loss', tier: '#F9B415' },
-  { kind: 'missed-reps', label: 'Missed reps', tier: '#F9B415' },
-  { kind: 'pr', label: 'Personal record', tier: '#2ED573' },
-  { kind: 'info', label: 'More info', tier: '#2196F3' },
+type StatusToken = 'status-error' | 'status-warning' | 'status-success' | 'status-info'
+
+// tier color = titan status token, applied as the glyph's SVG stroke. The component
+// resolves it through `resolveColor`, so on web the stroke is the CSS var and the
+// theme drives the value; the dark hex is asserted separately below.
+const kinds: { kind: ExerciseIndicatorKind; label: string; tier: StatusToken }[] = [
+  { kind: 'imbalance', label: 'Left/right imbalance', tier: 'status-error' },
+  { kind: 'overshoot', label: 'Load overshoot', tier: 'status-error' },
+  { kind: 'velocity-loss', label: 'Velocity loss', tier: 'status-warning' },
+  { kind: 'missed-reps', label: 'Missed reps', tier: 'status-warning' },
+  { kind: 'pr', label: 'Personal record', tier: 'status-success' },
+  { kind: 'info', label: 'More info', tier: 'status-info' },
 ]
 
+// The dark-mode values the tier tokens must keep resolving to (the pre-port literals).
+const DARK_TIER: Record<StatusToken, string> = {
+  'status-error': '#D14343',
+  'status-warning': '#F9B415',
+  'status-success': '#2ED573',
+  'status-info': '#2196F3',
+}
+
 describe('ExerciseIndicator', () => {
   it.each(kinds)('renders the $kind chip glyph and accessible label', ({ kind, label }) => {
     const { container } = render(<ExerciseIndicator kind={kind} />)
@@ -27,9 +39,13 @@ describe('ExerciseIndicator', () => {
     expect(screen.getByLabelText(label)).toBeInTheDocument()
   })
 
-  it.each(kinds)('tints the $kind glyph with its tier color', ({ kind, tier }) => {
+  it.each(kinds)('tints the $kind glyph with its tier token', ({ kind, tier }) => {
     const { container } = render(<ExerciseIndicator kind={kind} />)
-    expect(container.querySelector('svg')!.getAttribute('stroke')).toBe(tier)
+    expect(container.querySelector('svg')!.getAttribute('stroke')).toBe(`var(--color-${tier})`)
+  })
+
+  it.each(kinds)('keeps the $kind tier on its dark-mode value', ({ tier }) => {
+    expect(getSemanticColors('dark')[tier]).toBe(DARK_TIER[tier])
   })
 
   it('renders a decorative (aria-hidden) glyph so the chip owns the label', () => {