@titan-design/react-ui 0.12.1 → 0.14.0

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

@@ -1,74 +1,164 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
-import { View, Text, Pressable } from 'react-native'
+import type { ReactNode } from 'react'
+import { View, Pressable } from 'react-native'
+import { Typography } from '../Typography'
+import { cn } from '../../../utils/cn'
 import { roundWeight } from '../../../utils/workout-format'
+import { useSurfaceMode } from '../../ui/surface/SurfaceContext'
 import { SetsRepsLoad } from './SetsRepsLoad'
 import { TempoDisplay } from './TempoDisplay'
 import { ExerciseIndicator, type ExerciseIndicatorKind } from './ExerciseIndicator'
+import { exerciseLiveColor } from './exerciseRowState'
 
-export interface ExerciseHeadingProps {
+/** Dim depth for a not-yet-reached exercise, when the block dims itself. */
+const DIMMED_OPACITY = 0.55
+
+/** `stacked` puts the prescription on its own line under the name; `inline` keeps one row. */
+export type ExerciseHeadingLayout = 'stacked' | 'inline'
+
+interface ExerciseHeadingBaseProps {
   name: string
-  /** Prescription line values (sets × reps @ load). */
-  sets: number
-  reps: number | string
-  /** Load value; a string (e.g. "—") passes through verbatim for an unset/discovery load. */
-  load: number | string
   unit?: 'lbs' | 'kg'
-  /** Tempo tuple [eccentric, pauseBottom, concentric, pauseTop]; hidden when absent. */
+  /** Tempo tuple [eccentric, pauseBottom, concentric, pauseTop]. `stacked` layout only. */
   tempo?: [number, number, number, number]
   /** Small PR / issue / info chip in the title row. */
   indicator?: ExerciseIndicatorKind
   /** Dim the block as a not-yet-reached exercise (standalone use). */
   dimmed?: boolean
+  /** Row shape. Default `stacked`. */
+  layout?: ExerciseHeadingLayout
+  /**
+   * Render the structured `sets × reps @ load` prescription in one dimmer, regular
+   * tone instead of the rail's bright/bold value cells. `stacked` (rail) never sets
+   * this; `inline` (compact, upcoming) always does.
+   */
+  mutedPrescription?: boolean
+  /** Trailing right-edge caption (a previous best). `inline` layout only. */
+  previousBest?: string
+  /** This exercise is being performed right now — the name takes the live tone, never animated. */
+  isLive?: boolean
+  /**
+   * Who owns the press. `self` (default) makes the name row the button. `ancestor`
+   * renders it as a plain row, for a wrapper that presses as a whole — legal only in
+   * `inline` layout, since `stacked`'s TempoDisplay sibling is itself a Pressable.
+   */
+  pressTarget?: 'self' | 'ancestor'
   /** Press target for the name row (expand / select). */
   onPress?: () => void
-}
-
-function headingLabel(
-  name: string,
-  sets: number,
-  reps: number | string,
-  load: number | string,
-  unit: string
-) {
-  const loadLabel = typeof load === 'number' ? roundWeight(load) : load
-  return `${name}, ${sets}×${reps} @ ${loadLabel} ${unit}`
+  onPressIn?: () => void
+  onPressOut?: () => void
+  /** Web-only; on a touch surface these never fire and the row has no hover state. */
+  onHoverIn?: () => void
+  onHoverOut?: () => void
 }
 
 /**
- * The exercise-heading info block (no strip): the name + {@link ExerciseIndicator}
- * title row over a tight {@link SetsRepsLoad} prescription line beside the real
- * {@link TempoDisplay} (`showLabel={false}`). The name row is the sole press
- * target — TempoDisplay is a sibling, never a descendant, since it is itself a
- * Pressable (nesting would be an a11y nested-interactive violation).
+ * The prescription is EITHER the structured `sets × reps @ load` triple, OR a
+ * free-text line for an exercise whose numbers aren't loaded yet, OR absent.
+ * Mixing the two is a type error rather than a silently half-rendered line.
  */
-export function ExerciseHeading({
+type ExerciseHeadingPrescription =
+  | { sets: number; reps: number | string; load: number | string; prescription?: never }
+  | { prescription: string; sets?: never; reps?: never; load?: never }
+  | { sets?: never; reps?: never; load?: never; prescription?: never }
+
+export type ExerciseHeadingProps = ExerciseHeadingBaseProps & ExerciseHeadingPrescription
+
+function prescriptionText(p: ExerciseHeadingProps, unit: string): string | undefined {
+  if (p.prescription !== undefined) return p.prescription
+  if (p.sets === undefined) return undefined
+  const loadLabel = typeof p.load === 'number' ? roundWeight(p.load) : p.load
+  return `${p.sets}×${p.reps} @ ${loadLabel} ${unit}`
+}
+
+/** The row's accessible name. Exported so a wrapper that owns the press can reuse it. */
+export function exerciseHeadingLabel(p: ExerciseHeadingProps, unit: string = p.unit ?? 'lbs') {
+  const prescription = prescriptionText(p, unit)
+  return prescription ? `${p.name}, ${prescription}` : p.name
+}
+
+function pressProps(p: ExerciseHeadingProps, unit: string) {
+  return {
+    onPress: p.onPress,
+    onPressIn: p.onPressIn,
+    onPressOut: p.onPressOut,
+    onHoverIn: p.onHoverIn,
+    onHoverOut: p.onHoverOut,
+    accessibilityRole: 'button' as const,
+    accessibilityLabel: exerciseHeadingLabel(p, unit),
+  }
+}
+
+interface NameStyle {
+  color: string
+}
+
+function HeadingName({
   name,
-  sets,
-  reps,
-  load,
-  unit = 'lbs',
-  tempo,
-  indicator,
-  dimmed,
-  onPress,
-}: ExerciseHeadingProps) {
+  nameStyle,
+  className,
+}: {
+  name: string
+  nameStyle?: NameStyle
+  className?: string
+}) {
+  return (
+    // 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"
+      color={nameStyle ? 'inherit' : 'primary'}
+      style={nameStyle}
+      className={cn('font-heading text-sm leading-[normal]', className)}
+      testID="exercise-card-name"
+    >
+      {name}
+    </Typography>
+  )
+}
+
+function prescriptionNode(p: ExerciseHeadingProps, unit: string): ReactNode {
+  if (p.prescription !== undefined) {
+    return (
+      <Typography
+        variant="caption"
+        color="secondary"
+        maxLines={1}
+        className="font-sans shrink leading-[normal]"
+        testID="exercise-card-prescription"
+      >
+        {p.prescription}
+      </Typography>
+    )
+  }
+  if (p.sets === undefined) return null
   return (
-    <View style={{ opacity: dimmed ? 0.55 : 1 }} testID="exercise-heading">
+    <SetsRepsLoad
+      sets={p.sets}
+      reps={p.reps}
+      load={p.load}
+      unit={unit}
+      muted={p.mutedPrescription}
+    />
+  )
+}
+
+interface LayoutProps {
+  heading: ExerciseHeadingProps
+  nameStyle?: NameStyle
+}
+
+function StackedHeading({ heading, nameStyle }: LayoutProps) {
+  const { unit = 'lbs', tempo, indicator } = heading
+  return (
+    <>
       <Pressable
-        onPress={onPress}
-        accessibilityRole="button"
-        accessibilityLabel={headingLabel(name, sets, reps, load, unit)}
+        {...pressProps(heading, unit)}
         className="flex-row items-center"
         style={{ gap: 8 }}
         testID="exercise-card-header"
       >
-        <Text
-          className="text-text-primary"
-          style={{ fontSize: 14, fontFamily: '"Space Grotesk", sans-serif', fontWeight: '700' }}
-          testID="exercise-card-name"
-        >
-          {name}
-        </Text>
+        <HeadingName name={heading.name} nameStyle={nameStyle} />
         <View className="flex-1" />
         {indicator && <ExerciseIndicator kind={indicator} />}
       </Pressable>
@@ -78,10 +168,68 @@ export function ExerciseHeading({
         style={{ gap: 8, marginTop: 1 }}
         testID="exercise-card-summary"
       >
-        <SetsRepsLoad sets={sets} reps={reps} load={load} unit={unit} />
+        {prescriptionNode(heading, unit)}
         <View className="flex-1" />
         {tempo && <TempoDisplay tempo={tempo} size="sm" showLabel={false} showInfo={false} />}
       </View>
+    </>
+  )
+}
+
+function InlineHeading({ heading, nameStyle }: LayoutProps) {
+  const { unit = 'lbs', indicator, previousBest } = heading
+  const Row = heading.pressTarget === 'ancestor' ? View : Pressable
+  return (
+    <Row
+      {...(heading.pressTarget === 'ancestor' ? {} : pressProps(heading, unit))}
+      className="flex-row items-center"
+      style={{ gap: 8 }}
+      testID="exercise-card-header"
+    >
+      {/* Name never truncates (no numberOfLines); prescription + previousBest ellipsize first. */}
+      <HeadingName name={heading.name} nameStyle={nameStyle} className="shrink-0" />
+      <View className="shrink flex-row items-center" testID="exercise-card-summary">
+        {prescriptionNode(heading, unit)}
+      </View>
+      <View className="flex-1" style={{ minWidth: 8 }} />
+      {indicator && <ExerciseIndicator kind={indicator} />}
+      {previousBest && (
+        <Typography
+          variant="caption"
+          color="tertiary"
+          maxLines={1}
+          className="font-sans shrink text-2xs leading-[normal]"
+          testID="exercise-card-previous-best"
+        >
+          {previousBest}
+        </Typography>
+      )}
+    </Row>
+  )
+}
+
+/**
+ * The exercise-heading info block (no strip): the name + {@link ExerciseIndicator}
+ * title row, its prescription line, and — `inline` only — a trailing previous-best
+ * caption. The name row is the sole press target: TempoDisplay and the previous-best
+ * caption are siblings of it, never descendants, since TempoDisplay is itself a
+ * Pressable (nesting would be an a11y nested-interactive violation).
+ *
+ * `layout` is the one axis that separates the session-rail row (`stacked`) from the
+ * collapsed and upcoming card rows (`inline`) — same parts, same vocabulary, one row
+ * instead of two. `inline` drops the tempo: it has no room for a second metric lockup.
+ */
+export function ExerciseHeading(props: ExerciseHeadingProps) {
+  const mode = useSurfaceMode()
+  const nameStyle = props.isLive ? { color: exerciseLiveColor(mode) } : undefined
+
+  return (
+    <View style={{ opacity: props.dimmed ? DIMMED_OPACITY : 1 }} testID="exercise-heading">
+      {props.layout === 'inline' ? (
+        <InlineHeading heading={props} nameStyle={nameStyle} />
+      ) : (
+        <StackedHeading heading={props} nameStyle={nameStyle} />
+      )}
     </View>
   )
 }

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

@@ -6,6 +6,8 @@ import {
   INDICATOR_PRECEDENCE,
   type ExerciseIndicatorKind,
 } from './ExerciseIndicator'
+import { Surface } from '../../ui/surface'
+import { greyRamp } from '../../../theme/tokens/primitives'
 
 /**
  * `ExerciseIndicator` — a small circular OUTLINED chip in an exercise heading's
@@ -15,7 +17,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 +28,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 +39,9 @@ const meta: Meta<typeof ExerciseIndicator> = {
   },
   decorators: [
     (Story) => (
-      <View style={{ padding: 24, backgroundColor: '#131313' }}>
+      <Surface level="base" style={{ padding: 24 }}>
         <Story />
-      </View>
+      </Surface>
     ),
   ],
 }
@@ -68,9 +71,9 @@ export const AllKinds: Story = {
     <View style={{ gap: 12 }}>
       {INDICATOR_PRECEDENCE.map((kind, i) => (
         <View key={kind} style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
-          <Text style={{ color: '#8A8A8A', fontSize: 11, width: 14 }}>{i + 1}</Text>
+          <Text style={{ color: greyRamp[500], fontSize: 11, width: 14 }}>{i + 1}</Text>
           <ExerciseIndicator kind={kind} />
-          <Text style={{ color: '#CFCFCF', fontSize: 12 }}>{KIND_LABELS[kind]}</Text>
+          <Text style={{ color: greyRamp[200], fontSize: 12 }}>{KIND_LABELS[kind]}</Text>
         </View>
       ))}
     </View>
@@ -95,12 +98,12 @@ export const ResolvePrecedence: Story = {
           const winner = resolveIndicator(candidates)
           return (
             <View key={i} style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
-              <Text style={{ color: '#8A8A8A', fontSize: 12, width: 200 }}>
+              <Text style={{ color: greyRamp[500], fontSize: 12, width: 200 }}>
                 {candidates.join(', ')}
               </Text>
-              <Text style={{ color: '#8A8A8A', fontSize: 12 }}>→</Text>
+              <Text style={{ color: greyRamp[500], fontSize: 12 }}>→</Text>
               {winner ? <ExerciseIndicator kind={winner} /> : null}
-              <Text style={{ color: '#CFCFCF', fontSize: 12 }}>{winner}</Text>
+              <Text style={{ color: greyRamp[200], fontSize: 12 }}>{winner}</Text>
             </View>
           )
         })}

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', () => {

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

@@ -1,7 +1,7 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import type { ComponentType } from 'react'
 import { View, Pressable, type ViewProps } from 'react-native'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { resolveColor } from '../../../theme/resolve-color'
 import {
   ScaleIcon,
   AlertTriangleIcon,
@@ -12,10 +12,6 @@ import {
   type IconProps,
 } from '../../icons'
 
-// Literal-hex status pins (getSemanticColors, not resolveColor) — `resolveColor()` yields a
-// `var(...)` under the RNW vitest alias, which breaks `toHaveStyle` in tests.
-const t = getSemanticColors('dark')
-
 /**
  * The LOCKED 6-kind indicator taxonomy (TD-03.51). One precedence-ranked slot is
  * ever shown per exercise, resolved by {@link resolveIndicator}. Glyph = the
@@ -31,21 +27,23 @@ export type ExerciseIndicatorKind =
   | 'pr'
   | 'info'
 
+type StatusToken = 'status-error' | 'status-warning' | 'status-success' | 'status-info'
+
 interface IndicatorConfig {
   Icon: ComponentType<IconProps>
-  /** Tier color — a titan status semantic token (literal hex on `t`). */
-  color: string
+  /** Tier token — resolved per theme by {@link resolveColor} at render. */
+  token: StatusToken
   /** Accessible description (also the intended tooltip subject). */
   label: string
 }
 
 const INDICATOR_CONFIG: Record<ExerciseIndicatorKind, IndicatorConfig> = {
-  imbalance: { Icon: ScaleIcon, color: t['status-error'], label: 'Left/right imbalance' },
-  overshoot: { Icon: AlertTriangleIcon, color: t['status-error'], label: 'Load overshoot' },
-  'velocity-loss': { Icon: TrendingDownIcon, color: t['status-warning'], label: 'Velocity loss' },
-  'missed-reps': { Icon: CircleSlashIcon, color: t['status-warning'], label: 'Missed reps' },
-  pr: { Icon: AwardIcon, color: t['status-success'], label: 'Personal record' },
-  info: { Icon: InfoIcon, color: t['status-info'], label: 'More info' },
+  imbalance: { Icon: ScaleIcon, token: 'status-error', label: 'Left/right imbalance' },
+  overshoot: { Icon: AlertTriangleIcon, token: 'status-error', label: 'Load overshoot' },
+  'velocity-loss': { Icon: TrendingDownIcon, token: 'status-warning', label: 'Velocity loss' },
+  'missed-reps': { Icon: CircleSlashIcon, token: 'status-warning', label: 'Missed reps' },
+  pr: { Icon: AwardIcon, token: 'status-success', label: 'Personal record' },
+  info: { Icon: InfoIcon, token: 'status-info', label: 'More info' },
 }
 
 /**
@@ -68,7 +66,7 @@ export const INDICATOR_PRECEDENCE: readonly ExerciseIndicatorKind[] = [
  * duplicates in `candidates` don't matter — {@link INDICATOR_PRECEDENCE} decides.
  */
 export function resolveIndicator(
-  candidates: ExerciseIndicatorKind[],
+  candidates: ExerciseIndicatorKind[]
 ): ExerciseIndicatorKind | undefined {
   return INDICATOR_PRECEDENCE.find((kind) => candidates.includes(kind))
 }
@@ -86,7 +84,8 @@ export interface ExerciseIndicatorProps extends Omit<ViewProps, 'children'> {
  * by the consumer.
  */
 export function ExerciseIndicator({ kind, onPress, className, ...props }: ExerciseIndicatorProps) {
-  const { Icon, color, label } = INDICATOR_CONFIG[kind]
+  const { Icon, token, label } = INDICATOR_CONFIG[kind]
+  const color = resolveColor(token)
 
   const chip = (
     <View

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

@@ -1,10 +1,10 @@
 // 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 { FatigueMeter } from './FatigueMeter'
+import { Surface } from '../../ui/surface'
 
 const meta: Meta<typeof FatigueMeter> = {
-  title: 'Workout/DataViz/FatigueMeter',
+  title: 'Custom/Workout/DataViz/FatigueMeter',
   component: FatigueMeter,
   tags: ['autodocs'],
   argTypes: {
@@ -16,16 +16,16 @@ const meta: Meta<typeof FatigueMeter> = {
         component:
           '**Component.** The winning fatigue-visual lineage: a sliding needle over a fixed ' +
           'green→gold→orange→red velocity-loss gradient with VL10/VL20/VL30/stop markers. ' +
-          'Composes the [ZoneTrack](?path=/docs/workout-dataviz-zonetrack--docs) primitive. ' +
+          'Composes the [ZoneTrack](?path=/docs/custom-workout-dataviz-zonetrack--docs) primitive. ' +
           'Prop-driven: `value` plus overridable `thresholds` / `max` / `zoneColors` / `labels`.',
       },
     },
   },
   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/InputBar.stories.tsx

@@ -1,10 +1,9 @@
-import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { View } from 'react-native'
 import { InputBar } from './InputBar'
+import { Surface } from '../../ui/surface'
 
 const meta: Meta<typeof InputBar> = {
-  title: 'Workout/InputBar',
+  title: 'Custom/Workout/InputBar',
   component: InputBar,
   tags: ['autodocs'],
   argTypes: {
@@ -24,9 +23,9 @@ const meta: Meta<typeof InputBar> = {
   },
   decorators: [
     (Story) => (
-      <View style={{ width: 400, backgroundColor: '#111111' }}>
+      <Surface level="base" style={{ width: 400 }}>
         <Story />
-      </View>
+      </Surface>
     ),
   ],
 }

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

@@ -18,7 +18,9 @@ export interface InputBarProps {
   visible: boolean
 }
 
-const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
+const t = getSemanticColors('dark')
+const BRAND_PRIMARY = t['brand-primary']
+const ON_BRAND_PRIMARY = t['on-brand-primary']
 const INPUT_CLASSNAME = 'bg-surface-raised border-hairline-strong text-text-primary'
 
 const inputStyle = {
@@ -151,7 +153,7 @@ export function InputBar({
             fontSize: 13,
             fontWeight: '700',
             fontFamily: 'Inter, sans-serif',
-            color: '#FFFFFF',
+            color: ON_BRAND_PRIMARY,
           }}
         >
           Record

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

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { IntensityBar } from './IntensityBar'
 
 const meta: Meta<typeof IntensityBar> = {
-  title: 'Workout/DataViz/IntensityBar',
+  title: 'Custom/Workout/DataViz/IntensityBar',
   component: IntensityBar,
   tags: ['autodocs'],
   argTypes: {

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

@@ -2,8 +2,12 @@ import { describe, it, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { IntensityBar } from './IntensityBar'
+import { getGlowShadow } from '../../../theme/elevation'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
-const AT_TARGET_GLOW = '0 0 5px 1px rgba(33, 150, 243, 0.35), 0 0 10px 3px rgba(33, 150, 243, 0.15)'
+const AT_TARGET_GLOW = (
+  getGlowShadow(getSemanticColors('dark')['status-info'], 'subtle') as { boxShadow: string }
+).boxShadow
 
 describe('IntensityBar', () => {
   it('renders the bar', () => {

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

@@ -9,7 +9,9 @@ import {
   type DimensionValue,
 } from 'react-native'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { getGlowShadow } from '../../../theme/elevation'
 import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
+import { alpha } from '../../../utils/colors'
 
 const t = getSemanticColors('dark')
 
@@ -31,10 +33,13 @@ export interface IntensityBarProps extends ViewProps {
   className?: string
 }
 
+// VW-82: neither value is on a ramp (nearest surface-raised #31302F / greyRamp[600]
+// #72716F). Left raw pending the proposed roles — snapping them is a visual change.
 const TRACK_BG = '#333333'
 const LABEL_COLOR = '#6B7280'
-const TARGET_LINE_COLOR = 'rgba(33, 150, 243, 0.5)'
-const AT_TARGET_GLOW = '0 0 5px 1px rgba(33, 150, 243, 0.35), 0 0 10px 3px rgba(33, 150, 243, 0.15)'
+const TARGET_LINE_COLOR = alpha(t['status-info'], 0.5)
+/** At-target is EMPHASIS, not depth: an info-toned glow through the shared builder. */
+const AT_TARGET_GLOW = getGlowShadow(t['status-info'], 'subtle')
 
 // Zone colors graded by TRUE percentage (level * 100).
 const ZONE = {
@@ -178,7 +183,7 @@ export function IntensityBar({
             borderRadius: 3,
             backgroundColor: zone.color,
             zIndex: 2,
-            ...(atTarget ? { boxShadow: AT_TARGET_GLOW } : null),
+            ...(atTarget ? AT_TARGET_GLOW : null),
           }}
           testID="intensity-fill"
         />

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

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View, Text } from 'react-native'
 import { LiveAuraFrame } from './LiveAuraFrame'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { Surface } from '../../ui/surface'
 
 const t = getSemanticColors('dark')
 
@@ -74,7 +75,7 @@ function LiveHero({ caption }: { caption: string }) {
 const PANEL = { width: 360, height: 620, borderRadius: 24, overflow: 'hidden' as const }
 
 const meta: Meta<typeof LiveAuraFrame> = {
-  title: 'Workout/LiveAuraFrame',
+  title: 'Custom/Workout/LiveAuraFrame',
   component: LiveAuraFrame,
   tags: ['autodocs'],
   parameters: {
@@ -100,17 +101,17 @@ const meta: Meta<typeof LiveAuraFrame> = {
   },
   decorators: [
     (Story) => (
-      <View
+      <Surface
+        level="base"
         style={{
           minHeight: 700,
-          backgroundColor: '#070707',
           alignItems: 'center',
           justifyContent: 'center',
           padding: 32,
         }}
       >
         <Story />
-      </View>
+      </Surface>
     ),
   ],
   render: (args) => (