@titan-design/react-ui 0.12.1 → 0.14.0

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

@@ -9,23 +9,33 @@ describe('MuscleGroupChip', () => {
     expect(screen.getByText('Chest')).toBeInTheDocument()
   })
 
-  it('renders the colored dot', () => {
+  it('renders the coloured dot under the chip’s own testID', () => {
     render(<MuscleGroupChip name="Quads" volumeStatus="ontrack" />)
     expect(screen.getByTestId('muscle-group-chip-dot')).toBeInTheDocument()
   })
 
+  it('keeps one capsule shape across every status, changing only the dot', () => {
+    // The dot carries status; the capsule stays neutral, so a row of chips reads
+    // as one family. jsdom cannot compute a nativewind class background, so the
+    // fill itself is asserted by the HTML-vs-React parity layer; what is
+    // checkable here is that the status never reaches the capsule element.
+    const { rerender } = render(<MuscleGroupChip name="Quads" volumeStatus="untrained" />)
+    const shape = screen.getByTestId('muscle-group-chip').getAttribute('class')
+    for (const status of ['behind', 'ontrack', 'target', 'over'] as const) {
+      rerender(<MuscleGroupChip name="Quads" volumeStatus={status} />)
+      expect(screen.getByTestId('muscle-group-chip').getAttribute('class'), status).toBe(shape)
+      expect(screen.getByTestId('muscle-group-chip-dot')).toBeInTheDocument()
+    }
+  })
+
   it('sets accessibility label with name and status', () => {
     render(<MuscleGroupChip name="Back" volumeStatus="behind" />)
-    expect(
-      screen.getByLabelText('Back, volume status: behind'),
-    ).toBeInTheDocument()
+    expect(screen.getByLabelText('Back, volume status: behind')).toBeInTheDocument()
   })
 
   it('sets accessibility label with no status when omitted', () => {
     render(<MuscleGroupChip name="Biceps" />)
-    expect(
-      screen.getByLabelText('Biceps, volume status: no status'),
-    ).toBeInTheDocument()
+    expect(screen.getByLabelText('Biceps, volume status: no status')).toBeInTheDocument()
   })
 
   it('wraps in Pressable when onPress is provided', () => {
@@ -38,22 +48,12 @@ describe('MuscleGroupChip', () => {
 
   it('does not render Pressable when onPress is omitted', () => {
     render(<MuscleGroupChip name="Chest" />)
-    expect(
-      screen.queryByTestId('muscle-group-chip-pressable'),
-    ).not.toBeInTheDocument()
+    expect(screen.queryByTestId('muscle-group-chip-pressable')).not.toBeInTheDocument()
   })
 
   it('renders all volume status variants without error', () => {
-    const statuses = [
-      'untrained',
-      'behind',
-      'ontrack',
-      'target',
-      'over',
-    ] as const
-    const { rerender } = render(
-      <MuscleGroupChip name="Test" volumeStatus="untrained" />,
-    )
+    const statuses = ['untrained', 'behind', 'ontrack', 'target', 'over'] as const
+    const { rerender } = render(<MuscleGroupChip name="Test" volumeStatus="untrained" />)
     for (const status of statuses) {
       rerender(<MuscleGroupChip name="Test" volumeStatus={status} />)
       expect(screen.getByText('Test')).toBeInTheDocument()
@@ -63,28 +63,20 @@ describe('MuscleGroupChip', () => {
   describe('accessibility', () => {
     it('has no accessibility violations', async () => {
       const { container } = render(
-        <MuscleGroupChip
-          name="Chest"
-          volumeStatus="ontrack"
-          onPress={() => {}}
-        />,
+        <MuscleGroupChip name="Chest" volumeStatus="ontrack" onPress={() => {}} />
       )
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })
 
     it('has no accessibility violations as static chip', async () => {
-      const { container } = render(
-        <MuscleGroupChip name="Quads" volumeStatus="behind" />,
-      )
+      const { container } = render(<MuscleGroupChip name="Quads" volumeStatus="behind" />)
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })
 
     it('pressable has correct accessibility label', () => {
-      render(
-        <MuscleGroupChip name="Back" volumeStatus="target" onPress={() => {}} />,
-      )
+      render(<MuscleGroupChip name="Back" volumeStatus="target" onPress={() => {}} />)
       expect(screen.getByLabelText('Back, volume status: target')).toBeInTheDocument()
     })
   })

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

@@ -1,9 +1,6 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
-import { View, Text, Pressable, type ViewProps } from 'react-native'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
-import { greyRamp } from '../../../theme/tokens/primitives'
-
-const t = getSemanticColors('dark')
+import { type ViewProps } from 'react-native'
+import { Pill, type PillTone } from '../../ui/pill'
 
 // Aliases for spec compatibility: under=behind, maintenance=ontrack, productive=target
 export type VolumeStatus = 'untrained' | 'behind' | 'ontrack' | 'target' | 'over'
@@ -15,14 +12,18 @@ export interface MuscleGroupChipProps extends ViewProps {
   className?: string
 }
 
-const dotColorMap: Record<VolumeStatus, string> = {
-  untrained: greyRamp[900],
-  behind: t['brand-secondary'],
-  ontrack: t['status-success'],
-  target: t['brand-primary'],
-  over: t['status-error'],
+const dotTone: Record<VolumeStatus, PillTone> = {
+  untrained: 'neutral',
+  behind: 'brand-secondary',
+  ontrack: 'success',
+  target: 'brand',
+  over: 'error',
 }
 
+/**
+ * MuscleGroupChip — a `Pill` preset that labels a muscle group with a
+ * volume-status dot. The dot tone is the pill's tone; the capsule stays neutral.
+ */
 export function MuscleGroupChip({
   name,
   volumeStatus,
@@ -30,65 +31,25 @@ export function MuscleGroupChip({
   className,
   ...props
 }: MuscleGroupChipProps) {
-  const dotColor = volumeStatus
-    ? dotColorMap[volumeStatus]
-    : greyRamp[900]
-
   const statusLabel = volumeStatus ?? 'no status'
 
-  const content = (
-    <View
-      className={['bg-surface-raised border-hairline', className].filter(Boolean).join(' ')}
-      style={{
-        flexDirection: 'row',
-        alignItems: 'center',
-        borderRadius: 9999,
-        paddingHorizontal: 9,
-        paddingVertical: 3,
-        borderWidth: 1,
-      }}
-      accessibilityLabel={onPress ? undefined : `${name}, volume status: ${statusLabel}`}
-      testID="muscle-group-chip"
+  return (
+    <Pill
+      tone="neutral"
+      dotTone={volumeStatus ? dotTone[volumeStatus] : 'neutral'}
+      variant="subtle"
+      size="md"
+      leading="dot"
+      onPress={onPress}
+      // Borderless, like every other tone: the tinted fill carries the capsule.
+      // `md` keeps the chip at its shipped ~24px height with 12px text.
+      className={['gap-1.5', className].filter(Boolean).join(' ')}
+      textClassName="font-sans font-medium text-text-secondary"
+      accessibilityLabel={`${name}, volume status: ${statusLabel}`}
+      testID={onPress ? 'muscle-group-chip-pressable' : 'muscle-group-chip'}
       {...props}
     >
-      <View
-        style={{
-          width: 6,
-          height: 6,
-          borderRadius: 9999,
-          marginRight: 5,
-          flexShrink: 0,
-          backgroundColor: dotColor,
-        }}
-        accessibilityElementsHidden
-        testID="muscle-group-chip-dot"
-      />
-      <Text
-        className="text-text-secondary"
-        style={{
-          fontFamily: 'Inter, sans-serif',
-          fontWeight: '500',
-          fontSize: 11,
-        }}
-        accessibilityElementsHidden
-      >
-        {name}
-      </Text>
-    </View>
+      {name}
+    </Pill>
   )
-
-  if (onPress) {
-    return (
-      <Pressable
-        onPress={onPress}
-        accessibilityRole="button"
-        accessibilityLabel={`${name}, volume status: ${statusLabel}`}
-        testID="muscle-group-chip-pressable"
-      >
-        {content}
-      </Pressable>
-    )
-  }
-
-  return content
 }

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

@@ -1,9 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View } from 'react-native'
 import { PlaceholderStrip } from './PlaceholderStrip'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+const t = getSemanticColors('dark')
 
 const meta: Meta<typeof PlaceholderStrip> = {
-  title: 'Workout/PlaceholderStrip',
+  title: 'Custom/Workout/PlaceholderStrip',
   component: PlaceholderStrip,
   tags: ['autodocs'],
   argTypes: {
@@ -74,9 +77,11 @@ export const SegmentedThree: Story = {
 export const MultipleStrips: Story = {
   render: () => (
     <View style={{ flexDirection: 'row', gap: 4, width: 300 }}>
-      <View style={{ flex: 1, height: 3, backgroundColor: '#2ed573', borderRadius: 1 }} />
-      <View style={{ flex: 1, height: 3, backgroundColor: '#ffd43b', borderRadius: 1 }} />
-      <View style={{ flex: 1, height: 3, backgroundColor: '#ffa502', borderRadius: 1 }} />
+      <View style={{ flex: 1, height: 3, backgroundColor: t['status-success'], borderRadius: 1 }} />
+      <View
+        style={{ flex: 1, height: 3, backgroundColor: t['status-warning-light'], borderRadius: 1 }}
+      />
+      <View style={{ flex: 1, height: 3, backgroundColor: t['status-warning'], borderRadius: 1 }} />
       <PlaceholderStrip />
       <PlaceholderStrip />
     </View>

package/src/components/custom/Workout/PlaceholderStrip.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 { PlaceholderStrip } from './PlaceholderStrip'
+import { resolveColor } from '../../../theme/resolve-color'
 
 describe('PlaceholderStrip', () => {
   it('renders a strip element', () => {
@@ -11,9 +12,7 @@ describe('PlaceholderStrip', () => {
 
   it('sets accessibility label', () => {
     render(<PlaceholderStrip />)
-    expect(
-      screen.getByLabelText('Planned set, not yet completed'),
-    ).toBeInTheDocument()
+    expect(screen.getByLabelText('Planned set, not yet completed')).toBeInTheDocument()
   })
 
   it('applies fixed width when provided', () => {
@@ -28,7 +27,7 @@ describe('PlaceholderStrip', () => {
         <PlaceholderStrip />
         <PlaceholderStrip />
         <PlaceholderStrip />
-      </>,
+      </>
     )
     const strips = screen.getAllByTestId('placeholder-strip')
     expect(strips).toHaveLength(3)
@@ -39,6 +38,18 @@ describe('PlaceholderStrip', () => {
     expect(screen.queryAllByTestId('placeholder-segment')).toHaveLength(0)
   })
 
+  it('fills both modes from the border-prominent token, not a pinned hex', () => {
+    const rail = resolveColor('border-prominent')
+    const { unmount } = render(<PlaceholderStrip />)
+    expect(screen.getByTestId('placeholder-strip')).toHaveStyle({ backgroundColor: rail })
+    unmount()
+
+    render(<PlaceholderStrip mode="segmented" segments={2} />)
+    for (const segment of screen.getAllByTestId('placeholder-segment')) {
+      expect(segment).toHaveStyle({ backgroundColor: rail })
+    }
+  })
+
   describe('segmented mode', () => {
     it('renders segments when mode is segmented', () => {
       render(<PlaceholderStrip mode="segmented" segments={5} />)
@@ -59,9 +70,7 @@ describe('PlaceholderStrip', () => {
 
     it('sets accessibility label in segmented mode', () => {
       render(<PlaceholderStrip mode="segmented" segments={3} />)
-      expect(
-        screen.getByLabelText('Planned set, not yet completed'),
-      ).toBeInTheDocument()
+      expect(screen.getByLabelText('Planned set, not yet completed')).toBeInTheDocument()
     })
   })
 
@@ -73,9 +82,7 @@ describe('PlaceholderStrip', () => {
     })
 
     it('has no accessibility violations in segmented mode', async () => {
-      const { container } = render(
-        <PlaceholderStrip mode="segmented" segments={4} />,
-      )
+      const { container } = render(<PlaceholderStrip mode="segmented" segments={4} />)
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })

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

@@ -1,7 +1,12 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { View, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
-import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
+import { resolveColor } from '../../../theme/resolve-color'
+
+// The planned-set rail is a visible hairline rule, not a plane, so it takes the
+// one border token meant to be seen outright. It used to be a `#3A3A3A` pin in
+// `workout-tokens`, which sat between two ramp steps and never flipped to light.
+const RAIL_TOKEN = 'border-prominent' as const
 
 export interface PlaceholderStripProps extends ViewProps {
   width?: number | string
@@ -23,7 +28,7 @@ function SingleStrip({
       style={[
         {
           height: 3,
-          backgroundColor: WORKOUT_TOKENS.placeholder.fill,
+          backgroundColor: resolveColor(RAIL_TOKEN),
           borderRadius: 2,
           opacity: 0.5,
         },
@@ -61,7 +66,7 @@ function SegmentedStrip({
           style={{
             flex: 1,
             height: 3,
-            backgroundColor: WORKOUT_TOKENS.placeholder.fill,
+            backgroundColor: resolveColor(RAIL_TOKEN),
             borderRadius: 1,
             minWidth: 4,
           }}
@@ -73,11 +78,7 @@ function SegmentedStrip({
   )
 }
 
-export function PlaceholderStrip({
-  mode = 'single',
-  segments,
-  ...props
-}: PlaceholderStripProps) {
+export function PlaceholderStrip({ mode = 'single', segments, ...props }: PlaceholderStripProps) {
   if (mode === 'segmented') {
     return <SegmentedStrip segments={segments} {...props} />
   }

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

@@ -3,8 +3,9 @@ import { View } from 'react-native'
 import { PrBadge } from './PrBadge'
 
 const meta: Meta<typeof PrBadge> = {
-  title: 'Components/Atoms/PrBadge',
+  title: 'Custom/Workout/PrBadge',
   component: PrBadge,
+  parameters: { docs: { description: { component: 'Composes **Icons** · **BaseBadge**.' } } },
   tags: ['autodocs'],
   argTypes: {
     type: {

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

@@ -26,9 +26,7 @@ describe('PrBadge', () => {
 
   it('sets accessibility label with resolved label', () => {
     render(<PrBadge animate={false} />)
-    expect(
-      screen.getByLabelText('Personal record: PR e1RM'),
-    ).toBeInTheDocument()
+    expect(screen.getByLabelText('Personal record: PR e1RM')).toBeInTheDocument()
   })
 
   describe('type prop', () => {
@@ -66,9 +64,7 @@ describe('PrBadge', () => {
 
     it('sets accessibility label with custom label', () => {
       render(<PrBadge label="PR 5RM" animate={false} />)
-      expect(
-        screen.getByLabelText('Personal record: PR 5RM'),
-      ).toBeInTheDocument()
+      expect(screen.getByLabelText('Personal record: PR 5RM')).toBeInTheDocument()
     })
   })
 
@@ -89,9 +85,7 @@ describe('PrBadge', () => {
 
     it('has correct accessibility label in compact mode', () => {
       render(<PrBadge compact animate={false} />)
-      expect(
-        screen.getByLabelText('Personal record: PR e1RM'),
-      ).toBeInTheDocument()
+      expect(screen.getByLabelText('Personal record: PR e1RM')).toBeInTheDocument()
     })
   })
 

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

@@ -2,6 +2,10 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { useState } from 'react'
 import { View, Text, Pressable } from 'react-native'
 import { PrHistoryModal, type PrRecord } from './PrHistoryModal'
+import { primitiveColors } from '../../../theme/tokens/primitives'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+const t = getSemanticColors('dark')
 
 const records: PrRecord[] = [
   { type: 'e1rm', value: 245, unit: 'lbs', date: 'Mar 14', isRecent: true },
@@ -12,8 +16,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: {
@@ -90,13 +97,19 @@ function InteractivePrHistoryModal() {
         accessibilityRole="button"
         style={{
           alignSelf: 'flex-start',
-          backgroundColor: '#FF7900',
+          backgroundColor: t['brand-primary'],
           paddingVertical: 10,
           paddingHorizontal: 20,
           borderRadius: 8,
         }}
       >
-        <Text style={{ color: '#FFFFFF', fontWeight: '700', fontFamily: 'Inter, sans-serif' }}>
+        <Text
+          style={{
+            color: primitiveColors.white,
+            fontWeight: '700',
+            fontFamily: 'Inter, sans-serif',
+          }}
+        >
           Open PR history
         </Text>
       </Pressable>

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