@titan-design/react-ui 0.12.0 → 0.13.0

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

@@ -1,11 +1,10 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { useEffect, useState } from 'react'
-import { View, Text, Animated, Easing, type ViewProps } from 'react-native'
+import { View, Animated, Easing, type ViewProps } from 'react-native'
 import { StarIcon } from './icons'
 import { BaseBadge } from './BaseBadge'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
-
-const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
+import { Typography } from '../Typography'
+import { resolveColor } from '../../../theme/resolve-color'
 
 export type PRType = 'e1rm' | 'weight' | 'reps' | 'volume' | 'velocity'
 
@@ -38,6 +37,7 @@ export function PrBadge({
   ...props
 }: PrBadgeProps) {
   const resolvedLabel = labelProp ?? typeLabels[type]
+  const brandPrimary = resolveColor('brand-primary')
   const [scale] = useState(() => new Animated.Value(animate ? 0.8 : 1))
   const [opacity] = useState(() => new Animated.Value(animate ? 0 : 1))
 
@@ -69,7 +69,7 @@ export function PrBadge({
       testID="pr-badge-star"
       {...props}
     >
-      <StarIcon size={14} color={BRAND_PRIMARY} fill={BRAND_PRIMARY} strokeWidth={2} />
+      <StarIcon size={14} color={brandPrimary} fill={brandPrimary} strokeWidth={2} />
     </View>
   ) : (
     <BaseBadge
@@ -78,25 +78,21 @@ export function PrBadge({
       accessibilityLabel={`Personal record: ${resolvedLabel}`}
       {...props}
     >
-      <Text
-        style={{
-          fontSize: 12,
-          color: BRAND_PRIMARY,
-          fontWeight: '700',
-          fontFamily: 'Inter, sans-serif',
-        }}
+      {/* `boldLabel` is the badge label exactly: 12px/700 Inter. The line box is pinned
+          because the raw <Text> it replaced carried no lineHeight. */}
+      <Typography
+        variant="boldLabel"
+        color="inherit"
+        className="leading-[normal] text-brand-primary"
       >
         {'\u2605'} {resolvedLabel}
-      </Text>
+      </Typography>
     </BaseBadge>
   )
 
   if (animate) {
     return (
-      <Animated.View
-        style={{ transform: [{ scale }], opacity }}
-        testID="pr-badge-animated"
-      >
+      <Animated.View style={{ transform: [{ scale }], opacity }} testID="pr-badge-animated">
         {badge}
       </Animated.View>
     )

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

@@ -12,8 +12,11 @@ const records: PrRecord[] = [
 ]
 
 const meta: Meta<typeof PrHistoryModal> = {
-  title: 'Workout/PrHistoryModal',
+  title: 'Custom/Workout/PrHistoryModal',
   component: PrHistoryModal,
+  parameters: {
+    docs: { description: { component: 'Composes **Icons** · **Drawer** · **DrawerBody**.' } },
+  },
   tags: ['autodocs'],
   argTypes: {
     exerciseId: {

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

@@ -23,7 +23,7 @@ describe('PrHistoryModal', () => {
       render(<PrHistoryModal {...baseProps} />)
       expect(screen.getByTestId('pr-history-modal')).toBeInTheDocument()
       expect(screen.getByTestId('pr-history-modal-title')).toHaveTextContent(
-        'Bench Press PR history',
+        'Bench Press PR history'
       )
     })
 
@@ -40,23 +40,14 @@ describe('PrHistoryModal', () => {
           visible
           records={records}
           onClose={vi.fn()}
-        />,
+        />
       )
       expect(screen.getByTestId('pr-history-modal')).toBeInTheDocument()
     })
 
     it('falls back to exerciseId when no name is given', () => {
-      render(
-        <PrHistoryModal
-          exerciseId="deadlift"
-          isOpen
-          records={records}
-          onClose={vi.fn()}
-        />,
-      )
-      expect(screen.getByTestId('pr-history-modal-title')).toHaveTextContent(
-        'deadlift PR history',
-      )
+      render(<PrHistoryModal exerciseId="deadlift" isOpen records={records} onClose={vi.fn()} />)
+      expect(screen.getByTestId('pr-history-modal-title')).toHaveTextContent('deadlift PR history')
     })
 
     it('renders a drag handle', () => {
@@ -68,22 +59,14 @@ describe('PrHistoryModal', () => {
   describe('records', () => {
     it('renders a row per record with type, value, and date', () => {
       render(<PrHistoryModal {...baseProps} />)
-      expect(screen.getByTestId('pr-history-modal-record-0-type')).toHaveTextContent(
-        'e1RM',
-      )
-      expect(screen.getByTestId('pr-history-modal-record-0-value')).toHaveTextContent(
-        '245 lbs',
-      )
-      expect(screen.getByTestId('pr-history-modal-record-0-date')).toHaveTextContent(
-        'Mar 14',
-      )
+      expect(screen.getByTestId('pr-history-modal-record-0-type')).toHaveTextContent('e1RM')
+      expect(screen.getByTestId('pr-history-modal-record-0-value')).toHaveTextContent('245 lbs')
+      expect(screen.getByTestId('pr-history-modal-record-0-date')).toHaveTextContent('Mar 14')
     })
 
     it('renders pre-formatted string values verbatim', () => {
       render(<PrHistoryModal {...baseProps} />)
-      expect(screen.getByTestId('pr-history-modal-record-1-value')).toHaveTextContent(
-        '8 @ 185 lbs',
-      )
+      expect(screen.getByTestId('pr-history-modal-record-1-value')).toHaveTextContent('8 @ 185 lbs')
     })
 
     it('renders one row per supplied record', () => {
@@ -91,27 +74,21 @@ describe('PrHistoryModal', () => {
       expect(screen.getByTestId('pr-history-modal-record-0')).toBeInTheDocument()
       expect(screen.getByTestId('pr-history-modal-record-1')).toBeInTheDocument()
       expect(screen.getByTestId('pr-history-modal-record-2')).toBeInTheDocument()
-      expect(
-        screen.queryByTestId('pr-history-modal-record-3'),
-      ).not.toBeInTheDocument()
+      expect(screen.queryByTestId('pr-history-modal-record-3')).not.toBeInTheDocument()
     })
 
     it('marks recent records in their accessible label', () => {
       render(<PrHistoryModal {...baseProps} />)
       expect(
-        screen.getByLabelText('e1RM personal record: 245 lbs, Mar 14, recent'),
-      ).toBeInTheDocument()
-      expect(
-        screen.getByLabelText('Reps personal record: 8 @ 185 lbs, Feb 28'),
+        screen.getByLabelText('e1RM personal record: 245 lbs, Mar 14, recent')
       ).toBeInTheDocument()
+      expect(screen.getByLabelText('Reps personal record: 8 @ 185 lbs, Feb 28')).toBeInTheDocument()
     })
 
     it('shows an empty state when there are no records', () => {
       render(<PrHistoryModal {...baseProps} records={[]} />)
       expect(screen.getByTestId('pr-history-modal-empty')).toBeInTheDocument()
-      expect(
-        screen.queryByTestId('pr-history-modal-record-0'),
-      ).not.toBeInTheDocument()
+      expect(screen.queryByTestId('pr-history-modal-record-0')).not.toBeInTheDocument()
     })
   })
 
@@ -153,7 +130,7 @@ describe('PrHistoryModal', () => {
             { type: 'weight', value: 365, unit: 'lbs', date: 'Last week' },
             { type: 'volume', value: '18,200 lbs', date: 'Mar 1' },
           ]}
-        />,
+        />
       )
       expect(await axe(container)).toHaveNoViolations()
     })

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

@@ -4,10 +4,14 @@ import { StarIcon } from './icons'
 import { Drawer, DrawerBody } from '../../ui/drawer'
 import { resolveColor } from '../../../theme/resolve-color'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { getGlowShadow } from '../../../theme/elevation'
+import { alpha } from '../../../utils/colors'
 
-const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
-const RECENT_BORDER = 'rgba(249,180,21,0.3)'
-const RECENT_GLOW = '0 0 12px rgba(249,180,21,0.06)'
+const SEMANTIC = getSemanticColors('dark')
+const BRAND_PRIMARY = SEMANTIC['brand-primary']
+const RECENT_BORDER = alpha(SEMANTIC['status-warning'], 0.3)
+/** A recent PR is EMPHASIS, not depth: a warning-toned glow, shared builder. */
+const RECENT_GLOW = getGlowShadow(SEMANTIC['status-warning'], 'subtle')
 // Native-safe fallback for the conditional row border (recent uses a computed
 // rgba, so className can't express both branches).
 const BORDER_DEFAULT = resolveColor('hairline-default')
@@ -81,7 +85,7 @@ function PrRecordRow({ record, index }: { record: PrRecord; index: number }) {
         borderRadius: 8,
         borderWidth: 1,
         borderColor: record.isRecent ? RECENT_BORDER : BORDER_DEFAULT,
-        ...(record.isRecent ? { boxShadow: RECENT_GLOW } : {}),
+        ...(record.isRecent ? RECENT_GLOW : {}),
       }}
       testID={`pr-history-modal-record-${index}`}
     >

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

@@ -230,7 +230,12 @@ const mesos: PlanMeso[] = [accumulationDone, accumulation, intensification, peak
 const meta: Meta<typeof ProgramPlanningPage> = {
   title: 'Pages/Program Planning',
   component: ProgramPlanningPage,
-  parameters: { layout: 'fullscreen' },
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: { component: 'Composes **MesoProgressBar** · **MesoCard** · **WorkoutCard**.' },
+    },
+  },
   tags: ['autodocs'],
   args: { title: 'Program Plan', mesos },
 }

package/src/components/custom/Workout/README.md

@@ -102,10 +102,14 @@ type props without pulling the dependency.
   (`SET_STRIP_VARIABLE_COLOR`) is the shared "variable / unknown / opportunity" pin.
   `SegmentedBar` carries these via additive `leadingGap` (per-segment left margin) and
   static `opacity` props — the flat sets stay byte-identical.
+  `active`/`todo` sets optionally carry the plan's prescribed rep RANGE (`repsLow`/
+  `repsHigh`, VMCP-03.04), rendered as a small label above the bar (`8–12`, or `8` when
+  equal/only one is given) via the shared `formatRepsRange` helper — independent of
+  `range`'s `floor`/`max` value range.
   `SetStrip`/`SetBar` colors are the real titan ramp pins (`primitiveRamps` red-600 /
-  orange-400 / amber-300 / green-300); the rail surfaces bind to the charcoal ramp +
-  a subtle neumorphic inset (`neumorphicShadows.charcoal.pressed.subtle`). The heading
-  design is locked in `coordination/.../S3-sessionrail/DECISIONS-ExerciseRow.md`; the
+  orange-400 / amber-300 / green-300); the rail surfaces bind to the grey ramp and the
+  list is a well cut with the shared `insetWell` material. The heading
+  design is locked in `sources/design/shell/S3-sessionrail/DECISIONS-ExerciseRow.md`; the
   exploration specimens live under `Custom/Workout/Explorations/*` (do not repoint yet).
   In Storybook the family nests by composition under **`Shell/SessionRail/…`**
   (organism → `ExerciseCardHeading` → `ExerciseHeading` → its atoms/molecules →
@@ -179,13 +183,13 @@ Modalities`** (each card carries a `Collapse` accordion; promoted from the
   vertical (rotated) orientation so it never overlaps the bars. Two scales: `hero` (tall
   wings, per-rep m/s velocity labels, a dashed running-best reference line per side) and
   `rail` (compact — no velocity labels / reference lines, slot names in a narrow gutter).
-  **Rep-index alignment is the invariant:** column *i* is rep *i* on
-  both sides, so the set-type slot *kinds* carry through (rep / todo / variable / continue,
+  **Rep-index alignment is the invariant:** column _i_ is rep _i_ on
+  both sides, so the set-type slot _kinds_ carry through (rep / todo / variable / continue,
   coloured as in the single strip) but the wide-notch chunk **gaps** (drop / myo / cluster
   boundaries) are intentionally NOT rendered — per-side horizontal gaps would break the
   mirrored L↔R column alignment. Single-voltra sets keep using `VelocityStrip`
   `variant="hero"`. Documented by the `Playground` / `Hero*` / `Rail` stories on the wall
-  background (`Workout/DataViz/DualVelocityStrip`).
+  background (`Custom/Workout/DataViz/DualVelocityStrip`).
 
   **Reuse audit — `DashedReferenceLine` (in-file today, top-level follow-up).** The dashed
   running-best line was hand-rolled three times inside `VelocityStrip.tsx` (the single
@@ -199,6 +203,7 @@ Modalities`** (each card carries a `Collapse` accordion; promoted from the
   a follow-up so the hero PR stays focused (the cross-file migration touches `Sparkline`'s
   test surface and the Lab specimens, which are out of this branch's scope). Proposed API:
   `<ReferenceLine anchor offset color dashed opacity? label? testID />`.
+
 - **RestTimer `ring` variant** — the across-the-room **wall** rest treatment (the
   north-star rest page). Built as a **three-tier decomposition** (not a one-off):
   `CircularProgress` (atom, gained a **`children`** center slot + a **`fill`**
@@ -215,7 +220,7 @@ Modalities`** (each card carries a `Collapse` accordion; promoted from the
   hides the shared `RestActions` (+30s/Skip, extracted, used by both variants);
   `size` (default 180) sets the diameter; the eyebrow/section title is organism
   chrome. Web/RNW-only (like `CircularProgress`) — the wall variant; mobile keeps
-  `bar`. `Ring*` (RestTimer) + `Custom/CircularTimer` stories on the wall background.
+  `bar`. `Ring*` (RestTimer) + `Components/Molecules/CircularTimer` stories on the wall background.
 - **`size="wall"` density (FatigueMeter · ZoneTrack)** — the across-the-room
   dashboard scale, added as the idiomatic titan `size` union (a JS number-map per
   component; **`default` values are byte-identical** to before, so existing consumers are

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

@@ -16,8 +16,9 @@ const staticFactors: ReadinessFactor[] = FACTOR_SEED.map((f) => ({
 }))
 
 const meta: Meta<typeof ReadinessCheck> = {
-  title: 'Workout/ReadinessCheck',
+  title: 'Custom/Workout/ReadinessCheck',
   component: ReadinessCheck,
+  parameters: { docs: { description: { component: 'Composes **Card** · **Badge**.' } } },
   tags: ['autodocs'],
   argTypes: {
     score: {
@@ -89,7 +90,7 @@ export const WithWarmUpCaution: Story = {
 
 function InteractiveReadinessCheck() {
   const [values, setValues] = useState<Record<string, number>>(
-    Object.fromEntries(FACTOR_SEED.map((f) => [f.id, f.value])),
+    Object.fromEntries(FACTOR_SEED.map((f) => [f.id, f.value]))
   )
 
   const factors: ReadinessFactor[] = FACTOR_SEED.map((f) => ({

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

@@ -22,9 +22,7 @@ describe('ReadinessCheck', () => {
   describe('rendering', () => {
     it('renders the title and one row per factor', () => {
       render(<ReadinessCheck {...baseProps} factors={makeFactors()} />)
-      expect(screen.getByTestId('readiness-check-title')).toHaveTextContent(
-        'How are you feeling?',
-      )
+      expect(screen.getByTestId('readiness-check-title')).toHaveTextContent('How are you feeling?')
       expect(screen.getByTestId('readiness-check-factor-sleep')).toBeInTheDocument()
       expect(screen.getByTestId('readiness-check-factor-stress')).toBeInTheDocument()
     })
@@ -78,7 +76,7 @@ describe('ReadinessCheck', () => {
           {...baseProps}
           factors={makeFactors()}
           warmUpValidation={{ velocityDeficit: 5, recommendation: 'OK', status: 'good' }}
-        />,
+        />
       )
       expect(screen.queryByTestId('readiness-check-warmup')).not.toBeInTheDocument()
     })
@@ -94,13 +92,13 @@ describe('ReadinessCheck', () => {
             recommendation: 'Reduce load today.',
             status: 'caution',
           }}
-        />,
+        />
       )
       expect(screen.getByTestId('readiness-check-warmup-deficit')).toHaveTextContent(
-        '18% below 14-day average',
+        '18% below 14-day average'
       )
       expect(screen.getByTestId('readiness-check-warmup-recommendation')).toHaveTextContent(
-        'Reduce load today.',
+        'Reduce load today.'
       )
       expect(screen.getByTestId('readiness-check-warmup-badge')).toHaveTextContent('Caution')
     })
@@ -112,10 +110,10 @@ describe('ReadinessCheck', () => {
           factors={makeFactors()}
           warmUpCompleted
           warmUpValidation={{ velocityDeficit: 0, recommendation: 'Proceed.', status: 'good' }}
-        />,
+        />
       )
       expect(screen.getByTestId('readiness-check-warmup-deficit')).toHaveTextContent(
-        'Velocity on 14-day average',
+        'Velocity on 14-day average'
       )
     })
 
@@ -126,10 +124,10 @@ describe('ReadinessCheck', () => {
           factors={makeFactors()}
           warmUpCompleted
           warmUpValidation={{ velocityDeficit: -6, recommendation: 'Proceed.', status: 'good' }}
-        />,
+        />
       )
       expect(screen.getByTestId('readiness-check-warmup-deficit')).toHaveTextContent(
-        'Velocity 6% above 14-day average',
+        'Velocity 6% above 14-day average'
       )
     })
   })
@@ -149,15 +147,11 @@ describe('ReadinessCheck', () => {
 
     it('exposes the readiness score on the gauge', () => {
       render(<ReadinessCheck {...baseProps} factors={makeFactors()} score={78} />)
-      expect(
-        screen.getByLabelText('Readiness score: 78 out of 100'),
-      ).toBeInTheDocument()
+      expect(screen.getByLabelText('Readiness score: 78 out of 100')).toBeInTheDocument()
     })
 
     it('has no accessibility violations', async () => {
-      const { container } = render(
-        <ReadinessCheck {...baseProps} factors={makeFactors()} />,
-      )
+      const { container } = render(<ReadinessCheck {...baseProps} factors={makeFactors()} />)
       expect(await axe(container)).toHaveNoViolations()
     })
 
@@ -173,7 +167,7 @@ describe('ReadinessCheck', () => {
             status: 'moderate',
           }}
           onConfirm={vi.fn()}
-        />,
+        />
       )
       expect(await axe(container)).toHaveNoViolations()
     })

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

@@ -71,7 +71,11 @@ const WARMUP_BADGE: Record<WarmUpStatus, { color: BadgeColor; label: string }> =
 }
 
 function emojiSet(factor: ReadinessFactor): readonly string[] {
-  return EMOJI_SETS[factor.id.toLowerCase()] ?? EMOJI_SETS[factor.label.toLowerCase()] ?? DEFAULT_EMOJI_SET
+  return (
+    EMOJI_SETS[factor.id.toLowerCase()] ??
+    EMOJI_SETS[factor.label.toLowerCase()] ??
+    DEFAULT_EMOJI_SET
+  )
 }
 
 /** Warm-up velocity phrasing. Deficit is % below the 14-day average, so a
@@ -158,7 +162,12 @@ function ScoreGauge({ score }: { score: number }) {
       }}
     >
       <Text
-        style={{ fontSize: 20, fontWeight: '700', fontFamily: '"Space Grotesk", sans-serif', color }}
+        style={{
+          fontSize: 20,
+          fontWeight: '700',
+          fontFamily: '"Space Grotesk", sans-serif',
+          color,
+        }}
         testID="readiness-check-score-value"
       >
         {score}
@@ -260,7 +269,14 @@ export function ReadinessCheck({
             opacity: pressed ? 0.8 : 1,
           })}
         >
-          <Text style={{ fontSize: 13, fontWeight: '700', fontFamily: 'Inter, sans-serif', color: '#FFFFFF' }}>
+          <Text
+            style={{
+              fontSize: 13,
+              fontWeight: '700',
+              fontFamily: 'Inter, sans-serif',
+              color: '#FFFFFF',
+            }}
+          >
             Start Workout
           </Text>
         </Pressable>

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

@@ -3,7 +3,7 @@ import { View, Text } from 'react-native'
 import { RestTimer } from './RestTimer'
 
 const meta: Meta<typeof RestTimer> = {
-  title: 'Workout/RestTimer',
+  title: 'Custom/Workout/RestTimer',
   component: RestTimer,
   tags: ['autodocs'],
   parameters: {
@@ -16,7 +16,8 @@ const meta: Meta<typeof RestTimer> = {
           'across-the-room wall treatment: a draining countdown ring (composes `CircularProgress`) ' +
           'with the mm:ss countdown in its center, flipping to a full `success` ring reading "GO" ' +
           'when rest is up. `displayOnly` hides the +30s/Skip controls in either variant; `size` ' +
-          'sets the ring diameter.',
+          'sets the ring diameter.' +
+          ' Composes **CircularTimer**.',
       },
     },
   },

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

@@ -9,14 +9,15 @@ const DAY = 24 * HOUR
 const NOW = Date.now()
 
 const meta: Meta<typeof ScheduleTiles> = {
-  title: 'Workout/ScheduleTiles',
+  title: 'Custom/Workout/ScheduleTiles',
   component: ScheduleTiles,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '**Molecule.** An HStack of [Tile](?path=/docs/components-atoms-tile--docs); Until reuses [DateTime](?path=/docs/custom-datetime--docs) relative. Used-by ↑ SessionHeader.',
+          '**Molecule.** An HStack of [Tile](?path=/docs/components-atoms-tile--docs); Until reuses [DateTime](?path=/docs/custom-datetime--docs) relative. Used-by ↑ SessionHeader.' +
+          ' Composes **HStack** · **Tile**.',
       },
     },
   },

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

@@ -1,11 +1,10 @@
 import { describe, it, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import { ScheduleTiles, compactUntil } from './ScheduleTiles'
-import { primitiveRamps } from '../../../theme/tokens/primitives'
+import { resolveColor } from '../../../theme/resolve-color'
 
 const HOUR = 60 * 60 * 1000
 const DAY = 24 * HOUR
-const ORANGE = primitiveRamps.orange[400]
 
 // A fixed reference; the compact Until label is deterministic from (when - now).
 const NOW = Date.now()
@@ -25,10 +24,10 @@ describe('ScheduleTiles', () => {
     expect(value.style.color).toBe('')
   })
 
-  it('accents the Until value orange when less than a day away', () => {
+  it('accents the Until value with the brand token when less than a day away', () => {
     const when = NOW + 5 * HOUR
     render(<ScheduleTiles now={NOW} when={when} />)
     const value = screen.getByText(compactUntil(when - NOW))
-    expect(value).toHaveStyle({ color: ORANGE })
+    expect(value).toHaveStyle({ color: resolveColor('brand-primary') })
   })
 })

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

@@ -1,15 +1,12 @@
 import { useState } from 'react'
 import { type ViewProps } from 'react-native'
-import { primitiveRamps } from '../../../theme/tokens/primitives'
+import { resolveColor } from '../../../theme/resolve-color'
 import { HStack } from '../../ui/stack'
 import { Tile } from '../../ui/tile/Tile'
 import { formatDateTime } from '../DateTime/DateTime'
 
 const DAY_MS = 24 * 60 * 60 * 1000
 
-/** Accent applied to the Until value when the session is < 1 day away. */
-const SOON_ACCENT = primitiveRamps.orange[400]
-
 /** Compact time-until label: `30m` / `5h` / `2d` / `3w`. Deterministic from the delta. */
 export function compactUntil(ms: number): string {
   if (ms <= 0) return 'now'
@@ -37,8 +34,8 @@ export interface ScheduleTilesProps extends ViewProps {
  * ScheduleTiles — Date / Time / Until row for an upcoming session.
  *
  * An HStack of three {@link Tile}s derived from a single scheduled moment. The
- * Until value reuses {@link formatDateTime} relative formatting and turns
- * accent-orange only when the session is less than a day away.
+ * Until value reuses {@link formatDateTime} relative formatting and takes the
+ * `brand-primary` accent only when the session is less than a day away.
  *
  * @example
  * <ScheduleTiles when={Date.now() + 5 * 60 * 60 * 1000} />
@@ -63,7 +60,7 @@ export function ScheduleTiles({ when, now, gap = 1, ...props }: ScheduleTilesPro
       <Tile
         label="Until"
         value={compactUntil(whenMs - reference)}
-        valueColor={soon ? SOON_ACCENT : undefined}
+        valueColor={soon ? resolveColor('brand-primary') : undefined}
       />
     </HStack>
   )

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { View } from 'react-native'
 import { SegmentedBar } from './SegmentedBar'
+import { Surface } from '../../ui/surface'
 
 /**
  * `SegmentedBar` — a horizontal track split into weighted, individually-fillable
@@ -9,7 +9,7 @@ import { SegmentedBar } from './SegmentedBar'
  * vertical line at a fraction of the width. Colours are passed-in literal hex.
  */
 const meta: Meta<typeof SegmentedBar> = {
-  title: 'Workout/SegmentedBar',
+  title: 'Custom/Workout/SegmentedBar',
   component: SegmentedBar,
   tags: ['autodocs'],
   parameters: {
@@ -19,7 +19,7 @@ const meta: Meta<typeof SegmentedBar> = {
           '**Atom.** A horizontal track split into weighted, individually-fillable ' +
           'segments (weight · fill · colour · pulse) with an optional marker line — the ' +
           'presentational primitive the per-set strips build on. ' +
-          'Used-by ↑ [SetStrip](?path=/docs/workout-setstrip--docs).',
+          'Used-by ↑ [SetStrip](?path=/docs/custom-workout-setstrip--docs).',
       },
     },
   },
@@ -30,9 +30,9 @@ const meta: Meta<typeof SegmentedBar> = {
   },
   decorators: [
     (Story) => (
-      <View style={{ width: 240, padding: 16, backgroundColor: '#131313' }}>
+      <Surface level="base" style={{ width: 240, padding: 16 }}>
         <Story />
-      </View>
+      </Surface>
     ),
   ],
 }

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

@@ -16,13 +16,16 @@ export interface SegmentedBarSegment {
   weight?: number
   /** Fraction 0..1 of the slot the coloured fill covers, left-aligned. Default 1 (full). */
   fill?: number
-  /** Fill colour — a literal hex (RNW-safe), never a `var()` token ref. */
+  /** Fill colour. Pass `resolveColor(token)` — a plain fill takes a `var()` ref fine. */
   color: string
   /** When true the fill animates on the shared active-pulse loop. */
   pulse?: boolean
   /**
    * When pulsing, interpolate the fill's `backgroundColor` from→to over the loop
    * (full opacity). Omit to fall back to the default opacity breathe.
+   *
+   * Literal hex only: `Animated.interpolate` parses these two endpoints itself
+   * and cannot read a `var()` ref, so `resolveColor(token)` does not work here.
    */
   pulseColor?: [from: string, to: string]
   /**
@@ -90,7 +93,8 @@ function usePulse(active: boolean): Animated.Value {
  * presentational atom the per-set strips are built from. Each segment is a flex
  * slot (flex = `weight`) holding a left-aligned fill (`fill` fraction, `color`);
  * `pulse` segments breathe on a shared active-pulse loop, and `marker` drops a
- * vertical line at a fraction of the total width. Colours are passed-in literal hex.
+ * vertical line at a fraction of the total width. Every colour is injected by the
+ * composer, so this atom holds no palette of its own.
  */
 export function SegmentedBar({
   segments,

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

@@ -1,27 +1,27 @@
 // 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 } from 'react-native'
 import { SegmentedProgressBar } from './SegmentedProgressBar'
+import { Surface } from '../../ui/surface'
 
 const PLAN = [{ weight: 3 }, { weight: 3 }, { weight: 2 }, { weight: 2 }, { weight: 2 }]
 
 const meta: Meta<typeof SegmentedProgressBar> = {
-  title: 'Workout/SegmentedProgressBar',
+  title: 'Custom/Workout/SegmentedProgressBar',
   component: SegmentedProgressBar,
   tags: ['autodocs'],
   parameters: {
     docs: {
       description: {
         component:
-          '**Atom.** Composes [SegmentedBar](?path=/docs/workout-segmentedbar--docs) + paceTone. Used-by ↑ SessionHeader.',
+          '**Atom.** Composes [SegmentedBar](?path=/docs/custom-workout-segmentedbar--docs) + paceTone. Used-by ↑ SessionHeader.',
       },
     },
   },
   decorators: [
     (Story) => (
-      <View style={{ width: 246, padding: 16, backgroundColor: '#242424' }}>
+      <Surface level="base" style={{ width: 246, padding: 16 }}>
         <Story />
-      </View>
+      </Surface>
     ),
   ],
 }