@titan-design/react-ui 0.12.1 → 0.14.0

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,10 +1,12 @@
 // 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'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
 const { green, yellow, orange, red } = WORKOUT_TOKENS.scale
+const t = getSemanticColors('dark')
 
 const FATIGUE_ZONES: ZoneTrackZone[] = [
   { upTo: 10, color: green },
@@ -22,7 +24,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 +34,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>
     ),
   ],
 }
@@ -85,7 +88,7 @@ export const BandWithMarker: Story = {
     ],
     min: 6,
     max: 10,
-    band: { from: 7.2, to: 8.4, color: 'rgba(255,255,255,0.22)' },
+    band: { from: 7.2, to: 8.4, color: t['hairline-strong'] },
     marker: { type: 'needle', value: 8.1 },
     ticks: [
       { value: 6, label: '6' },

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/exerciseRowState.ts

@@ -0,0 +1,29 @@
+import { getSemanticColors, type ThemeMode } from '../../../theme/tokens/semantic'
+
+/** The interaction washes an exercise row can wear, beyond its resting look. */
+export type ExerciseRowState = 'hovered' | 'selected' | 'pressed'
+
+const ROW_STATE_TOKEN = {
+  hovered: 'interactive-hover',
+  selected: 'interactive-selected',
+  pressed: 'interactive-active',
+} as const satisfies Record<ExerciseRowState, keyof ReturnType<typeof getSemanticColors>>
+
+/**
+ * Literal-hex wash for one interaction state, in the same shape as
+ * `onSurfaceColors`. Uses `getSemanticColors` rather than `resolveColor` so the
+ * value survives where there are no CSS custom properties (the raw-RN wall SPA,
+ * native) and stays assertable in tests.
+ */
+export function exerciseRowStateColor(state: ExerciseRowState, mode: ThemeMode = 'dark'): string {
+  return getSemanticColors(mode)[ROW_STATE_TOKEN[state]]
+}
+
+/**
+ * The tone for an exercise being performed right now. Static by construction —
+ * a live row sits on a wall display, where titan's "the grain never animates"
+ * rule applies just as much to a heading.
+ */
+export function exerciseLiveColor(mode: ThemeMode = 'dark'): string {
+  return getSemanticColors(mode)['status-live']
+}

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 {
@@ -63,8 +68,18 @@ export {
   type ExerciseIndicatorProps,
   type ExerciseIndicatorKind,
 } from './ExerciseIndicator'
-export { ExerciseHeading, type ExerciseHeadingProps } from './ExerciseHeading'
-export { ExerciseCardHeading, type ExerciseCardHeadingProps } from './ExerciseCardHeading'
+export {
+  ExerciseHeading,
+  exerciseHeadingLabel,
+  type ExerciseHeadingProps,
+  type ExerciseHeadingLayout,
+} from './ExerciseHeading'
+export {
+  ExerciseCardHeading,
+  type ExerciseCardHeadingProps,
+  type ExerciseRowDensity,
+} from './ExerciseCardHeading'
+export { exerciseLiveColor, exerciseRowStateColor, type ExerciseRowState } from './exerciseRowState'
 export { ExerciseCard, type ExerciseCardProps } from './ExerciseCard'
 export { SetTableHeader, type SetTableHeaderProps } from './SetTableHeader'
 export {

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

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View } from 'react-native'
 import { MetricCell } from './metricText'
+import { Surface } from '../../ui/surface'
+import { greyRamp } from '../../../theme/tokens/primitives'
 
 /**
  * `MetricCell` — the shared "segmented metric" typography primitive (Inter · 600 ·
@@ -8,7 +10,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 +20,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 +31,9 @@ const meta: Meta<typeof MetricCell> = {
   },
   decorators: [
     (Story) => (
-      <View style={{ padding: 20, backgroundColor: '#131313' }}>
+      <Surface level="base" style={{ padding: 20 }}>
         <Story />
-      </View>
+      </Surface>
     ),
   ],
 }
@@ -40,23 +42,23 @@ export default meta
 type Story = StoryObj<typeof MetricCell>
 
 export const ValueCell: Story = {
-  args: { children: '145', color: '#F3F4F6', fontSize: 11 },
+  args: { children: '145', color: greyRamp[50], fontSize: 11 },
 }
 
 export const Separator: Story = {
-  args: { children: '×', color: '#6B7280', fontSize: 11 },
+  args: { children: '×', color: greyRamp[600], fontSize: 11 },
   parameters: { docs: { description: { story: 'A muted separator cell (× / @ / -).' } } },
 }
 
 export const InContext: Story = {
   render: () => (
     <View style={{ flexDirection: 'row', alignItems: 'baseline' }}>
-      <MetricCell color="#F3F4F6">5</MetricCell>
-      <MetricCell color="#6B7280">&nbsp;×&nbsp;</MetricCell>
-      <MetricCell color="#F3F4F6">8</MetricCell>
-      <MetricCell color="#6B7280">&nbsp;@&nbsp;</MetricCell>
-      <MetricCell color="#F3F4F6">145</MetricCell>
-      <MetricCell color="#6B7280">&nbsp;lb</MetricCell>
+      <MetricCell color={greyRamp[50]}>5</MetricCell>
+      <MetricCell color={greyRamp[600]}>&nbsp;×&nbsp;</MetricCell>
+      <MetricCell color={greyRamp[50]}>8</MetricCell>
+      <MetricCell color={greyRamp[600]}>&nbsp;@&nbsp;</MetricCell>
+      <MetricCell color={greyRamp[50]}>145</MetricCell>
+      <MetricCell color={greyRamp[600]}>&nbsp;lb</MetricCell>
     </View>
   ),
   parameters: {

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

@@ -15,16 +15,22 @@ export interface MetricCellProps {
   /** Cell text color — value cells take a primary color, separators a muted one. */
   color: string
   fontSize?: number
+  /** Cell font weight. Default 600 (the bold "digital readout" look). */
+  weight?: 400 | 600
 }
 
-export function MetricCell({ children, color, fontSize = 11 }: MetricCellProps) {
+/**
+ * @deprecated Use `<Metric size="…" align="…">` (roadmap decision 11) — removed
+ * after AW-127 consumer migration.
+ */
+export function MetricCell({ children, color, fontSize = 11, weight = 600 }: MetricCellProps) {
   return (
     <Text
       style={{
         fontFamily: METRIC_FONT,
         fontSize,
         color,
-        fontWeight: '600',
+        fontWeight: String(weight) as '400' | '600',
         letterSpacing: 1,
       }}
     >