@titan-design/react-ui 0.12.1 → 0.13.0

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

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { WorkoutPill } from './WorkoutPill'
 
 const meta: Meta<typeof WorkoutPill> = {
-  title: 'Workout/WorkoutPill',
+  title: 'Custom/Workout/WorkoutPill',
   component: WorkoutPill,
   tags: ['autodocs'],
   argTypes: {
@@ -14,7 +14,10 @@ const meta: Meta<typeof WorkoutPill> = {
       description: 'Pill status',
     },
     pulse: { control: 'boolean', description: 'Pulsing animation (independent of status)' },
-    highlighted: { control: 'boolean', description: 'Highlighted with thicker border and slight scale' },
+    highlighted: {
+      control: 'boolean',
+      description: 'Highlighted with thicker border and slight scale',
+    },
   },
 }
 

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

@@ -2,6 +2,7 @@ import { describe, it, expect, vi } from 'vitest'
 import { render, screen, fireEvent } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { WorkoutPill } from './WorkoutPill'
+import { resolveColor } from '../../../theme/resolve-color'
 
 describe('WorkoutPill', () => {
   it('renders the workout name', () => {
@@ -80,6 +81,41 @@ describe('WorkoutPill', () => {
     }
   })
 
+  // The rim is a whole rung above the wash. Asserting both rules out the
+  // flattening that collapses a two-step pill onto one `-subtle`.
+  describe('wash ladder', () => {
+    it.each([
+      ['completed', 'status-success'],
+      ['current', 'brand-primary'],
+      ['missed', 'status-error'],
+    ] as const)('washes the %s pill with %s -subtle inside a -muted rim', (status, role) => {
+      render(<WorkoutPill name="Upper A" status={status} />)
+      const pill = screen.getByLabelText(`Upper A workout, ${status}`)
+      expect(pill).toHaveStyle({ backgroundColor: resolveColor(`${role}-subtle`) })
+      expect(pill.style.borderTopColor).toBe(resolveColor(`${role}-muted`))
+    })
+
+    it('gives the washless next pill the -strong rim, a rung above current', () => {
+      render(<WorkoutPill name="Upper A" status="next" />)
+      const pill = screen.getByLabelText('Upper A workout, next')
+      // jsdom normalises the `transparent` keyword to its rgba() form.
+      expect(pill.style.backgroundColor).toBe('rgba(0, 0, 0, 0)')
+      expect(pill.style.borderTopColor).toBe(resolveColor('brand-primary-strong'))
+    })
+
+    it.each([
+      ['completed', 'status-success'],
+      ['current', 'brand-primary'],
+      ['upcoming', 'text-tertiary'],
+      ['missed', 'status-error-dark'],
+    ] as const)('labels the %s pill from the %s token', (status, token) => {
+      render(<WorkoutPill name="Upper A" status={status} />)
+      expect(screen.getByTestId('workout-pill-name')).toHaveStyle({
+        color: resolveColor(token),
+      })
+    })
+  })
+
   describe('pulse', () => {
     it('pulses by default on current status', () => {
       render(<WorkoutPill name="Upper A" status="current" />)
@@ -128,16 +164,14 @@ describe('WorkoutPill', () => {
     })
 
     it('has no accessibility violations as static pill', async () => {
-      const { container } = render(
-        <WorkoutPill name="Lower B" status="upcoming" />,
-      )
+      const { container } = render(<WorkoutPill name="Lower B" status="upcoming" />)
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })
 
     it('has no accessibility violations for missed status', async () => {
       const { container } = render(
-        <WorkoutPill name="Rest Day" status="missed" onPress={() => {}} />,
+        <WorkoutPill name="Rest Day" status="missed" onPress={() => {}} />
       )
       const results = await axe(container)
       expect(results).toHaveNoViolations()
@@ -145,9 +179,7 @@ describe('WorkoutPill', () => {
 
     it('pressable has correct accessibility label', () => {
       render(<WorkoutPill name="Upper A" status="completed" onPress={() => {}} />)
-      expect(
-        screen.getByLabelText('Upper A workout, completed'),
-      ).toBeInTheDocument()
+      expect(screen.getByLabelText('Upper A workout, completed')).toBeInTheDocument()
     })
   })
 })

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

@@ -1,13 +1,17 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { useEffect, useState } from 'react'
-import { View, Text, Pressable, Animated, Easing, type ViewProps } from 'react-native'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { View, Pressable, Animated, Easing, type ViewProps } from 'react-native'
+import { Typography } from '../Typography'
+import { resolveColor } from '../../../theme/resolve-color'
 import { WORKOUT_PILL_DELOAD } from '../../../theme/extracted-colors-dataviz'
-import { greyRamp } from '../../../theme/tokens/primitives'
+import { alpha } from '../../../utils/colors'
 
-const HAIRLINE_DEFAULT = getSemanticColors('dark')['hairline-default']
-
-const t = getSemanticColors('dark')
+// The deload role has no semantic tokens at all, so its wash and rim are derived from
+// the same ramp pin WeekRow reads, at the LADDER'S rungs (0.12 subtle, 0.30 muted)
+// rather than the frozen demo's hand-mixed 0.15. FINDING for E3: deload needs the
+// wash ladder like every other role — its values already sit on one.
+const DELOAD_WASH = alpha(WORKOUT_PILL_DELOAD, 0.12)
+const DELOAD_RIM = alpha(WORKOUT_PILL_DELOAD, 0.3)
 
 /**
  * Spec statuses: completed | current | upcoming | deload.
@@ -25,31 +29,57 @@ export interface WorkoutPillProps extends ViewProps {
   className?: string
 }
 
-const statusBgColors: Record<WorkoutPillStatus, string> = {
-  completed: 'rgba(46,213,115,0.15)',
-  current: 'rgba(255,121,0,0.15)',
-  next: 'transparent',
-  upcoming: t['surface-raised'],
-  missed: 'rgba(209,67,67,0.1)',
-  deload: 'rgba(186,41,150,0.15)',
-}
-
-const statusBorderStyles: Record<WorkoutPillStatus, Record<string, unknown>> = {
-  completed: { borderWidth: 1, borderColor: 'rgba(46,213,115,0.3)' },
-  current: { borderWidth: 1, borderColor: 'rgba(255,121,0,0.3)' },
-  next: { borderWidth: 1, borderColor: 'rgba(255,121,0,0.4)' },
-  upcoming: { borderWidth: 1, borderColor: HAIRLINE_DEFAULT },
-  missed: { borderWidth: 1, borderColor: 'rgba(209,67,67,0.25)' },
-  deload: { borderWidth: 1, borderColor: 'rgba(186,41,150,0.3)' },
+/** A pill's three colours: the wash, the rim a rung above it, and the label. */
+interface PillPaint {
+  background: string
+  border: string
+  text: string
 }
 
-const textColors: Record<WorkoutPillStatus, string> = {
-  completed: t['status-success'],
-  current: t['brand-primary'],
-  next: t['brand-primary'],
-  upcoming: greyRamp[500],
-  missed: 'rgba(209,67,67,0.7)',
-  deload: WORKOUT_PILL_DELOAD,
+/**
+ * Every status on the wash ladder: `-subtle` (0.12) inside a `-muted` (0.30) rim.
+ *
+ * Two do not fit a rung exactly. `next` is deliberately the strongest rim — it is
+ * the only status with no wash — so it takes `-strong` (0.50) rather than collapsing
+ * onto `current`'s 0.30 and losing the distinction; it was 0.4. `missed`'s label was
+ * a 0.7 alpha, which no rung expresses; `status-error-dark` composites to within a
+ * hair of it on the dark planes and needs no alpha at all.
+ */
+function paintFor(status: WorkoutPillStatus): PillPaint {
+  switch (status) {
+    case 'completed':
+      return {
+        background: resolveColor('status-success-subtle'),
+        border: resolveColor('status-success-muted'),
+        text: resolveColor('status-success'),
+      }
+    case 'current':
+      return {
+        background: resolveColor('brand-primary-subtle'),
+        border: resolveColor('brand-primary-muted'),
+        text: resolveColor('brand-primary'),
+      }
+    case 'next':
+      return {
+        background: 'transparent',
+        border: resolveColor('brand-primary-strong'),
+        text: resolveColor('brand-primary'),
+      }
+    case 'upcoming':
+      return {
+        background: resolveColor('surface-raised'),
+        border: resolveColor('hairline-default'),
+        text: resolveColor('text-tertiary'),
+      }
+    case 'missed':
+      return {
+        background: resolveColor('status-error-subtle'),
+        border: resolveColor('status-error-muted'),
+        text: resolveColor('status-error-dark'),
+      }
+    case 'deload':
+      return { background: DELOAD_WASH, border: DELOAD_RIM, text: WORKOUT_PILL_DELOAD }
+  }
 }
 
 function usePulse(enabled: boolean) {
@@ -85,6 +115,9 @@ function usePulse(enabled: boolean) {
   return opacity
 }
 
+/**
+ * @deprecated Use `<Pill tone="…" leading="dot">` — removed after AW-127 consumer migration.
+ */
 export function WorkoutPill({
   name,
   status,
@@ -98,6 +131,11 @@ export function WorkoutPill({
   const pulseOpacity = usePulse(shouldPulse)
   const isCompleted = status === 'completed'
   const isMissed = status === 'missed'
+  const paint = paintFor(status)
+
+  // 11px sat between scale steps. `caption` rounds it UP to the 12px `xs` step, the
+  // same call B2 made when MuscleGroupChip became a Pill preset at size md.
+  const labelClass = 'font-semibold leading-[normal]'
 
   const pill = (
     <Animated.View
@@ -113,56 +151,49 @@ export function WorkoutPill({
             paddingHorizontal: 10,
             paddingVertical: 4,
             borderRadius: 6,
-            backgroundColor: statusBgColors[status],
+            backgroundColor: paint.background,
+            borderWidth: 1,
+            borderColor: paint.border,
           },
-          statusBorderStyles[status] as Record<string, unknown>,
           highlighted ? { borderWidth: 2, transform: [{ scale: 1.02 }] } : undefined,
         ]}
         accessibilityLabel={onPress ? undefined : `${name} workout, ${status}`}
         {...props}
       >
         {isCompleted && (
-          <Text
-            style={{
-              fontWeight: '600',
-              fontFamily: '"Nunito Sans", sans-serif',
-              fontSize: 11,
-              color: textColors[status],
-              marginRight: 4,
-            }}
+          <Typography
+            variant="caption"
+            color="inherit"
+            className={labelClass}
+            style={{ color: paint.text, marginRight: 4 }}
             accessibilityElementsHidden
             testID="workout-pill-check"
           >
             {'\u2713'}
-          </Text>
+          </Typography>
         )}
         {isMissed && (
-          <Text
-            style={{
-              fontWeight: '600',
-              fontFamily: '"Nunito Sans", sans-serif',
-              fontSize: 11,
-              color: textColors[status],
-              marginRight: 4,
-            }}
+          <Typography
+            variant="caption"
+            color="inherit"
+            className={labelClass}
+            style={{ color: paint.text, marginRight: 4 }}
             accessibilityElementsHidden
             testID="workout-pill-dash"
           >
             {'\u2014'}
-          </Text>
+          </Typography>
         )}
-        <Text
-          style={{
-            fontWeight: '600',
-            fontFamily: '"Nunito Sans", sans-serif',
-            fontSize: 11,
-            color: textColors[status],
-          }}
+        <Typography
+          variant="caption"
+          color="inherit"
+          className={labelClass}
+          style={{ color: paint.text }}
           accessibilityElementsHidden={onPress != null}
           testID="workout-pill-name"
         >
           {name}
-        </Text>
+        </Typography>
       </View>
     </Animated.View>
   )

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

@@ -1,8 +1,8 @@
 // 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 { ZoneTrack, type ZoneTrackZone } from './ZoneTrack'
 import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
+import { Surface } from '../../ui/surface'
 
 const { green, yellow, orange, red } = WORKOUT_TOKENS.scale
 
@@ -22,7 +22,7 @@ const FATIGUE_TICKS = [
 ]
 
 const meta: Meta<typeof ZoneTrack> = {
-  title: 'Workout/DataViz/ZoneTrack',
+  title: 'Custom/Workout/DataViz/ZoneTrack',
   component: ZoneTrack,
   tags: ['autodocs'],
   parameters: {
@@ -32,17 +32,18 @@ const meta: Meta<typeof ZoneTrack> = {
           '**Primitive.** The shared linear-gauge base: a pill track with an N-band zone ' +
           'gradient, optional tick marks + labels, and a single value marker — a `needle` line ' +
           'or a left-anchored `fill` (clip-reveal gradient, or solid trend colour). Used-by ↓ ' +
-          '[FatigueMeter](?path=/docs/workout-dataviz-fatiguemeter--docs); the target base for ' +
+          '[FatigueMeter](?path=/docs/custom-workout-dataviz-fatiguemeter--docs); the target base for ' +
           'TrainingLoadGauge (ACWR) + RpeCalibration (band + marker). Zone colours are literal ' +
-          'ramp-token hex.',
+          'ramp-token hex.' +
+          ' Composes **Tooltip**.',
       },
     },
   },
   decorators: [
     (Story) => (
-      <View style={{ width: 360, padding: 20, backgroundColor: '#131313' }}>
+      <Surface level="base" style={{ width: 360, padding: 20 }}>
         <Story />
-      </View>
+      </Surface>
     ),
   ],
 }

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

@@ -1,18 +1,19 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { useState } from 'react'
-import { View, Text, type ViewProps, type DimensionValue, type LayoutChangeEvent } from 'react-native'
+import {
+  View,
+  Text,
+  type ViewProps,
+  type DimensionValue,
+  type LayoutChangeEvent,
+} from 'react-native'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
 import { primitiveColors, greyRamp } from '../../../theme/tokens/primitives'
-import { alpha } from '../../../utils/colors'
+import { getGlowShadow } from '../../../theme/elevation'
 import { Tooltip } from '../../ui/tooltip/Tooltip'
 
 const t = getSemanticColors('dark')
 
-/** Soft two-stop glow in `color`, for a marker's optional `glow`. */
-function glowShadow(color: string): string {
-  return `0 0 5px 1px ${alpha(color, 0.3)}, 0 0 10px 3px ${alpha(color, 0.12)}`
-}
-
 /** Muted, un-reached track colour — a grey step, matches the IntensityBar track family. */
 const DEFAULT_TRACK_COLOR = greyRamp[800]
 /** Default needle / fill-marker colour. */
@@ -230,9 +231,9 @@ export function ZoneTrack({
             overflow: 'hidden',
             flexDirection: 'row',
             // The pill's own box-shadow renders outside its overflow:hidden, so
-            // `glow` haloes the whole track in the marker colour.
+            // `glow` haloes the whole track in the marker colour. Emphasis, not depth.
             ...(marker?.glow
-              ? { boxShadow: glowShadow(marker.color ?? DEFAULT_MARKER_COLOR) }
+              ? getGlowShadow(marker.color ?? DEFAULT_MARKER_COLOR, 'subtle')
               : null),
           }}
         >

package/src/components/custom/Workout/index.ts

@@ -6,6 +6,11 @@ export {
 } from './BaseBadge'
 export { WeightBadge, type WeightBadgeProps, type WeightBadgeSize } from './WeightBadge'
 export { PrBadge, type PrBadgeProps, type PRType } from './PrBadge'
+/**
+ * @deprecated Use `Indicator` (roadmap decision 10) — removed after AW-127
+ * consumer migration. Marked on the barrel, not the module: `StatusDot.tsx` is
+ * being edited under E1 this hour.
+ */
 export { StatusDot, type StatusDotVariant, type StatusDotProps } from './StatusDot'
 export { PlaceholderStrip, type PlaceholderStripProps } from './PlaceholderStrip'
 export {

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View } from 'react-native'
 import { MetricCell } from './metricText'
+import { Surface } from '../../ui/surface'
 
 /**
  * `MetricCell` — the shared "segmented metric" typography primitive (Inter · 600 ·
@@ -8,7 +9,7 @@ import { MetricCell } from './metricText'
  * single source of the value/separator look shared by SetsRepsLoad and TempoDisplay.
  */
 const meta: Meta<typeof MetricCell> = {
-  title: 'Workout/MetricCell',
+  title: 'Custom/Workout/MetricCell',
   component: MetricCell,
   tags: ['autodocs'],
   parameters: {
@@ -18,8 +19,8 @@ const meta: Meta<typeof MetricCell> = {
           '**Primitive.** The shared Inter·600·letter-spacing-1 value/separator cell. ' +
           'Extracted so the two prescription readouts read as one visual language instead of ' +
           'drifting copies. Used-by ↑ ' +
-          '[SetsRepsLoad](?path=/docs/workout-setsrepsload--docs) + ' +
-          '[TempoDisplay](?path=/docs/workout-tempodisplay--docs).',
+          '[SetsRepsLoad](?path=/docs/custom-workout-setsrepsload--docs) + ' +
+          '[TempoDisplay](?path=/docs/custom-workout-tempodisplay--docs).',
       },
     },
   },
@@ -29,9 +30,9 @@ const meta: Meta<typeof MetricCell> = {
   },
   decorators: [
     (Story) => (
-      <View style={{ padding: 20, backgroundColor: '#131313' }}>
+      <Surface level="base" style={{ padding: 20 }}>
         <Story />
-      </View>
+      </Surface>
     ),
   ],
 }

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

@@ -17,6 +17,10 @@ export interface MetricCellProps {
   fontSize?: number
 }
 
+/**
+ * @deprecated Use `<Metric size="…" align="…">` (roadmap decision 11) — removed
+ * after AW-127 consumer migration.
+ */
 export function MetricCell({ children, color, fontSize = 11 }: MetricCellProps) {
   return (
     <Text