@titan-design/react-ui 0.5.0 → 0.6.0

package/src/components/custom/DateTime/DateTime.tsx

@@ -1,8 +1,9 @@
-import React from 'react'
+import { useEffect, useState } from 'react'
 import { Text, type TextProps } from 'react-native'
 import { cn } from '../../../utils/cn'
+import { Typography, type TypographyVariant } from '../Typography'
 
-export type DateTimeFormat = 
+export type DateTimeFormat =
   | 'date' // 2024-01-15
   | 'time' // 14:30
   | 'datetime' // 2024-01-15 14:30
@@ -13,14 +14,24 @@ export type DateTimeFormat =
   | 'full' // Monday, January 15, 2024
 
 export interface DateTimeProps extends TextProps {
-  /** Date value (timestamp in ms, Date object, or ISO string) */
-  value: number | Date | string | null | undefined
+  /** Date value (timestamp in ms, Date object, or ISO string). Optional when `live`. */
+  value?: number | Date | string | null | undefined
   /** Display format */
   format?: DateTimeFormat
   /** Custom format string (overrides format) */
   customFormat?: string
   /** Whether to show in UTC */
   isUTC?: boolean
+  /** Force 12h (true) or 24h (false) for time/datetime formats; locale default when omitted. */
+  hour12?: boolean
+  /** Include seconds in time/datetime formats. */
+  seconds?: boolean
+  /** Render through Typography with this variant (e.g. 'mono'); plain inheriting Text when omitted. */
+  variant?: TypographyVariant
+  /** Track the current time and re-render on an interval (ignores `value`). For clocks / relative time. */
+  live?: boolean
+  /** Refresh interval in ms when `live` (default 1000). */
+  refreshMs?: number
   /** Fallback text when value is null/undefined */
   fallback?: string
   /** Text color */
@@ -42,10 +53,12 @@ const colorStyles = {
 function formatDate(
   value: number | Date | string,
   format: DateTimeFormat,
-  isUTC: boolean
+  isUTC: boolean,
+  hour12?: boolean,
+  seconds?: boolean
 ): string {
   const date = value instanceof Date ? value : new Date(value)
-  
+
   if (isNaN(date.getTime())) {
     return 'Invalid Date'
   }
@@ -57,7 +70,7 @@ function formatDate(
 
   // Use Intl.DateTimeFormat for locale-aware formatting
   const options: Intl.DateTimeFormatOptions = {}
-  
+
   switch (format) {
     case 'date':
       options.year = 'numeric'
@@ -101,6 +114,14 @@ function formatDate(
     options.timeZone = 'UTC'
   }
 
+  if (hour12 !== undefined && (options.hour !== undefined || options.minute !== undefined)) {
+    options.hour12 = hour12
+  }
+
+  if (seconds && options.hour !== undefined) {
+    options.second = '2-digit'
+  }
+
   return new Intl.DateTimeFormat(undefined, options).format(date)
 }
 
@@ -121,7 +142,7 @@ function getRelativeTime(date: Date): string {
   // Use Intl.RelativeTimeFormat if available
   if (typeof Intl !== 'undefined' && Intl.RelativeTimeFormat) {
     const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' })
-    
+
     if (Math.abs(diffSecs) < 60) {
       return rtf.format(diffSecs, 'second')
     }
@@ -197,24 +218,43 @@ export function DateTime({
   format = 'datetime',
   customFormat,
   isUTC = false,
+  hour12,
+  seconds,
+  variant,
+  live = false,
+  refreshMs = 1000,
   fallback = '-',
   color = 'inherit',
   className,
   ...props
 }: DateTimeProps) {
-  if (value === null || value === undefined) {
+  // When live, track "now" and re-render on an interval (the value prop is ignored).
+  const [now, setNow] = useState(() => Date.now())
+  useEffect(() => {
+    if (!live) return
+    const id = setInterval(() => setNow(Date.now()), refreshMs)
+    return () => clearInterval(id)
+  }, [live, refreshMs])
+
+  const effectiveValue = live ? now : value
+  const text =
+    effectiveValue === null || effectiveValue === undefined
+      ? fallback
+      : formatDate(effectiveValue, format, isUTC, hour12, seconds)
+
+  // Route through Typography (shared text substrate) when a variant is given;
+  // otherwise render a plain inheriting Text (backward-compatible default).
+  if (variant) {
     return (
-      <Text className={cn(colorStyles[color], className)} {...props}>
-        {fallback}
-      </Text>
+      <Typography variant={variant} color={color} className={className} {...props}>
+        {text}
+      </Typography>
     )
   }
 
-  const formattedDate = formatDate(value, format, isUTC)
-
   return (
     <Text className={cn(colorStyles[color], className)} {...props}>
-      {formattedDate}
+      {text}
     </Text>
   )
 }

package/src/components/custom/Gauge/Gauge.test.tsx

@@ -20,9 +20,9 @@ describe('Gauge', () => {
     const { rerender } = render(<Gauge value={30} />)
     expect(screen.getByTestId('gauge-value')).toHaveStyle({ color: '#D14343' })
     rerender(<Gauge value={70} />)
-    expect(screen.getByTestId('gauge-value')).toHaveStyle({ color: '#FFB020' })
+    expect(screen.getByTestId('gauge-value')).toHaveStyle({ color: '#F9B415' })
     rerender(<Gauge value={90} />)
-    expect(screen.getByTestId('gauge-value')).toHaveStyle({ color: '#14B8A6' })
+    expect(screen.getByTestId('gauge-value')).toHaveStyle({ color: '#2ED573' })
   })
 
   it('honors a single-color override over thresholds', () => {

package/src/components/custom/Gauge/Gauge.tsx

@@ -1,5 +1,8 @@
 import { View, Text, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+const sem = getSemanticColors('dark')
 
 export interface GaugeThreshold {
   /** Band start, in the gauge's value units. */
@@ -30,9 +33,9 @@ export interface GaugeProps extends Omit<ViewProps, 'children'> {
   className?: string
 }
 
-const STATUS_SUCCESS = '#14B8A6'
-const STATUS_WARNING = '#FFB020'
-const STATUS_ERROR = '#D14343'
+const STATUS_SUCCESS = sem['status-success']
+const STATUS_WARNING = sem['status-warning']
+const STATUS_ERROR = sem['status-error']
 const TRACK = 'rgba(255,255,255,0.08)'
 
 /** Titan status-token bands for a 0–100 score. */

package/src/components/custom/Scatter/Scatter.tsx

@@ -1,5 +1,6 @@
 import { View, Text, Pressable, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
+import { DATAVIZ_CATEGORICAL_PALETTE } from '../../../theme/extracted-colors-dataviz'
 
 export interface ScatterDatum {
   /** Stable identity — returned by onPress and used as the React key. */
@@ -45,11 +46,8 @@ export interface ScatterProps extends Omit<ViewProps, 'children'> {
   className?: string
 }
 
-/** Titan categorical fallback palette (data-1..data-8). */
-const PALETTE = [
-  '#5B9BD5', '#14B8A6', '#F4A736', '#F83030',
-  '#823CA0', '#D4A520', '#406D87', '#43C6B7',
-]
+/** Titan categorical fallback palette (see extracted-colors-dataviz). */
+const PALETTE = DATAVIZ_CATEGORICAL_PALETTE
 
 const GRID_LINE = 'rgba(255,255,255,0.07)'
 const AXIS_LINE = 'rgba(255,255,255,0.18)'

package/src/components/custom/Treemap/Treemap.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { View, Text, Pressable, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
+import { DATAVIZ_CATEGORICAL_PALETTE } from '../../../theme/extracted-colors-dataviz'
 
 export interface TreemapDatum {
   /** Stable identity — returned by onPress and used as the React key. */
@@ -35,11 +36,8 @@ export interface TreemapProps extends Omit<ViewProps, 'children'> {
   className?: string
 }
 
-/** Titan categorical fallback palette (data-1..data-8). */
-const PALETTE = [
-  '#5B9BD5', '#14B8A6', '#F4A736', '#F83030',
-  '#823CA0', '#D4A520', '#406D87', '#43C6B7',
-]
+/** Titan categorical fallback palette (see extracted-colors-dataviz). */
+const PALETTE = DATAVIZ_CATEGORICAL_PALETTE
 
 interface Rect {
   x: number

package/src/components/custom/Typography/Typography.stories.tsx

@@ -1,13 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View } from 'react-native'
-import {
-  Typography,
-  Heading,
-  Paragraph,
-  Caption,
-  Label,
-  Overline,
-} from './Typography'
+import { Typography, Heading, Paragraph, Caption, Label, Overline } from './Typography'
 
 const meta: Meta<typeof Typography> = {
   title: 'Custom/Typography',
@@ -17,16 +10,36 @@ const meta: Meta<typeof Typography> = {
     variant: {
       control: 'select',
       options: [
-        'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
-        'body1', 'body2', 'subtitle1', 'subtitle2',
-        'caption', 'overline', 'button',
+        'h1',
+        'h2',
+        'h3',
+        'h4',
+        'h5',
+        'h6',
+        'body1',
+        'body2',
+        'subtitle1',
+        'subtitle2',
+        'caption',
+        'overline',
+        'button',
+        'mono',
+        'monoLabel',
       ],
     },
     color: {
       control: 'select',
       options: [
-        'primary', 'secondary', 'tertiary', 'disabled',
-        'inverse', 'success', 'error', 'warning', 'info', 'inherit',
+        'primary',
+        'secondary',
+        'tertiary',
+        'disabled',
+        'inverse',
+        'success',
+        'error',
+        'warning',
+        'info',
+        'inherit',
       ],
     },
     align: {
@@ -65,19 +78,15 @@ export const AllBody: Story = {
   render: () => (
     <View style={{ gap: 16, maxWidth: 400 }}>
       <Typography variant="body1">
-        Body 1 - This is the default body text style. It&apos;s used for main content
-        and paragraphs throughout the application.
+        Body 1 - This is the default body text style. It&apos;s used for main content and paragraphs
+        throughout the application.
       </Typography>
       <Typography variant="body2">
-        Body 2 - This is a smaller body text style. It&apos;s useful for secondary
-        content or when you need more compact text.
-      </Typography>
-      <Typography variant="subtitle1">
-        Subtitle 1 - Semi-bold text for emphasis
-      </Typography>
-      <Typography variant="subtitle2">
-        Subtitle 2 - Smaller semi-bold text
+        Body 2 - This is a smaller body text style. It&apos;s useful for secondary content or when
+        you need more compact text.
       </Typography>
+      <Typography variant="subtitle1">Subtitle 1 - Semi-bold text for emphasis</Typography>
+      <Typography variant="subtitle2">Subtitle 2 - Smaller semi-bold text</Typography>
     </View>
   ),
 }
@@ -92,6 +101,16 @@ export const AllUtility: Story = {
   ),
 }
 
+/** Monospace technical readouts (clocks, ids, metrics) and their all-caps label form. */
+export const Mono: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <Typography variant="mono">mono — 16:12 · Voltra-A3F2 · 0.42 m/s</Typography>
+      <Typography variant="monoLabel">monoLabel — live status label</Typography>
+    </View>
+  ),
+}
+
 export const AllColors: Story = {
   render: () => (
     <View style={{ gap: 8 }}>
@@ -121,12 +140,11 @@ export const ParagraphComponent: Story = {
   render: () => (
     <View style={{ gap: 16, maxWidth: 400 }}>
       <Paragraph>
-        This is a regular paragraph using the default body1 variant.
-        It&apos;s great for main content.
+        This is a regular paragraph using the default body1 variant. It&apos;s great for main
+        content.
       </Paragraph>
       <Paragraph small>
-        This is a small paragraph using the body2 variant.
-        It&apos;s useful for secondary content.
+        This is a small paragraph using the body2 variant. It&apos;s useful for secondary content.
       </Paragraph>
     </View>
   ),

package/src/components/custom/Typography/Typography.test.tsx

@@ -77,6 +77,18 @@ describe('Typography', () => {
     })
   })
 
+  describe('mono variants', () => {
+    it('renders the mono variant', () => {
+      render(<Typography variant="mono">16:12</Typography>)
+      expect(screen.getByText('16:12')).toBeInTheDocument()
+    })
+
+    it('renders the monoLabel variant', () => {
+      render(<Typography variant="monoLabel">live</Typography>)
+      expect(screen.getByText('live')).toBeInTheDocument()
+    })
+  })
+
   describe('accessibility', () => {
     it('headings have no accessibility violations', async () => {
       const { container } = render(
@@ -91,9 +103,7 @@ describe('Typography', () => {
     })
 
     it('body text has no accessibility violations', async () => {
-      const { container } = render(
-        <Typography variant="body1">Body text content</Typography>
-      )
+      const { container } = render(<Typography variant="body1">Body text content</Typography>)
 
       const results = await axe(container)
       expect(results).toHaveNoViolations()

package/src/components/custom/Typography/Typography.tsx

@@ -16,6 +16,8 @@ export type TypographyVariant =
   | 'caption'
   | 'overline'
   | 'button'
+  | 'mono'
+  | 'monoLabel'
 
 export type TypographyColor =
   | 'primary'
@@ -70,6 +72,9 @@ const variantStyles: Record<TypographyVariant, string> = {
   caption: 'font-body text-xs font-normal leading-loose',
   overline: 'font-body text-xs font-semibold uppercase tracking-widest leading-relaxed',
   button: 'font-sans text-sm font-semibold leading-relaxed',
+  // Monospace technical readouts (clocks, ids, metrics) and their all-caps label form.
+  mono: 'font-mono text-xs font-normal leading-normal',
+  monoLabel: 'font-mono text-xs font-bold uppercase tracking-wide leading-normal',
 }
 
 const colorStyles: Record<TypographyColor, string> = {

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

@@ -7,8 +7,9 @@ import { RestTimer } from './RestTimer'
 import { SupersetWrapper } from './SupersetWrapper'
 import { type SetRowProps } from './SetRow'
 import { resolveColor } from '../../../theme/resolve-color'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
-const BRAND_PRIMARY = '#FF7900'
+const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
 
 /** Where an exercise sits in the during-workout flow. */
 export type ActiveExerciseStatus = 'completed' | 'active' | 'upcoming'

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

@@ -4,6 +4,7 @@ import { View, Text, Pressable, Animated, Easing, type ViewProps } from 'react-n
 import BodyHighlighter, { type ExtendedBodyPart, type Slug } from 'react-native-body-highlighter'
 import { cn } from '../../../utils/cn'
 import { resolveColor } from '../../../theme/resolve-color'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 import {
   MuscleGroup,
   SimpleMuscleGroup,
@@ -25,6 +26,8 @@ import {
 const Body = ((BodyHighlighter as unknown as { default?: typeof BodyHighlighter }).default ??
   BodyHighlighter) as typeof BodyHighlighter
 
+const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
+
 const OUTLINE_FILL = 'rgba(255,255,255,0.08)'
 const OUTLINE_BORDER = 'rgba(255,255,255,0.12)'
 const BODY_SCALE = 0.8 // 200x400 intrinsic -> ~160x320 px
@@ -275,7 +278,7 @@ function ViewToggle({ view, onViewChange }: ViewToggleProps) {
               borderRadius: 9999,
               backgroundColor: active ? 'rgba(255,121,0,0.16)' : 'transparent',
               borderWidth: 1,
-              borderColor: active ? '#FF7900' : resolveColor('border-strong'),
+              borderColor: active ? BRAND_PRIMARY : resolveColor('border-strong'),
             }}
             testID={`body-map-toggle-${side}`}
           >
@@ -284,7 +287,7 @@ function ViewToggle({ view, onViewChange }: ViewToggleProps) {
                 fontSize: 12,
                 fontFamily: 'Inter, sans-serif',
                 fontWeight: active ? '700' : '500',
-                color: active ? '#FF7900' : resolveColor('text-secondary'),
+                color: active ? BRAND_PRIMARY : resolveColor('text-secondary'),
                 textTransform: 'capitalize',
               }}
             >
@@ -321,7 +324,7 @@ function MuscleButton({ entry, highlighted, onMusclePress }: MuscleButtonProps)
         paddingVertical: 3,
         borderRadius: 9999,
         borderWidth: 1,
-        borderColor: highlighted ? '#FF7900' : resolveColor('border-default'),
+        borderColor: highlighted ? BRAND_PRIMARY : resolveColor('border-default'),
       }}
       testID={`body-map-muscle-${entry.key}`}
     >

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

@@ -18,11 +18,14 @@ import {
   type VolumeLandmarks,
   type VolumeStatus,
 } from './muscleTaxonomy'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
-const BRAND_PRIMARY = '#FF7900'
+const t = getSemanticColors('dark')
 
-/** Volume track gradient: status-info (blue) -> result-improve (teal) -> status-error (red). */
-const VOLUME_GRADIENT = 'linear-gradient(90deg, #2196F3 0%, #14B8A6 50%, #D14343 100%)'
+const BRAND_PRIMARY = t['brand-primary']
+
+/** Volume track gradient: status-info -> status-success -> status-error. */
+const VOLUME_GRADIENT = `linear-gradient(90deg, ${t['status-info']} 0%, ${t['status-success']} 50%, ${t['status-error']} 100%)`
 
 /** Sheet slides up from this offset (px) and the backdrop fades to this opacity. */
 const SLIDE_OFFSET = 400

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

@@ -93,8 +93,8 @@ describe('CapacityBandChart', () => {
     it('colors dots by status relative to the band', () => {
       render(<CapacityBandChart {...baseProps} />)
       const dots = screen.getAllByTestId('capacity-band-chart-dot')
-      expect(dots[0]).toHaveStyle({ backgroundColor: '#14B8A6' }) // within
-      expect(dots[1]).toHaveStyle({ backgroundColor: '#FFB020' }) // above
+      expect(dots[0]).toHaveStyle({ backgroundColor: '#2ED573' }) // within
+      expect(dots[1]).toHaveStyle({ backgroundColor: '#F9B415' }) // above
       expect(dots[2]).toHaveStyle({ backgroundColor: '#2196F3' }) // below
     })
 

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

@@ -1,16 +1,19 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { useEffect, useState, useMemo } from 'react'
 import { View, Text, Pressable, Animated, Easing, type ViewProps } from 'react-native'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
-const STATUS_SUCCESS = '#14B8A6'
-const STATUS_WARNING = '#FFB020'
-const STATUS_INFO = '#2196F3'
+const t = getSemanticColors('dark')
+
+const STATUS_SUCCESS = t['status-success']
+const STATUS_WARNING = t['status-warning']
+const STATUS_INFO = t['status-info']
 /** Dot outline: near-white ring so load dots read on the band fill and any
  *  surface (matches the MesoStatusCard gauge-marker convention). */
 const DOT_BORDER = '#F3F4F6'
-const BAND_FILL = 'rgba(20,184,166,0.1)'
-const BAND_EDGE = 'rgba(20,184,166,0.45)'
-const PROJECTION_FILL = 'rgba(20,184,166,0.05)'
+const BAND_FILL = 'rgba(46,213,115,0.1)'
+const BAND_EDGE = 'rgba(46,213,115,0.45)'
+const PROJECTION_FILL = 'rgba(46,213,115,0.05)'
 
 const PADDING_LEFT = 28
 const PADDING_RIGHT = 10

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

@@ -72,7 +72,7 @@ describe('DeviationBar', () => {
     const track = bar.firstElementChild as HTMLElement
     expect(track).toHaveStyle({
       backgroundImage:
-        'linear-gradient(90deg, rgba(20,184,166,0.25) 0%, rgba(107,114,128,0.15) 50%, rgba(255,176,32,0.25) 100%)',
+        'linear-gradient(90deg, rgba(46,213,115,0.25) 0%, rgba(107,114,128,0.15) 50%, rgba(249,180,21,0.25) 100%)',
     })
   })
 

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

@@ -1,5 +1,8 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { View, type ViewProps, type ViewStyle } from 'react-native'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+const t = getSemanticColors('dark')
 
 export interface DeviationBarProps extends ViewProps {
   deviation: number
@@ -9,10 +12,10 @@ export interface DeviationBarProps extends ViewProps {
 
 function getDotColor(deviation: number): string {
   const abs = Math.abs(deviation)
-  if (deviation < -0.3) return '#14B8A6'
+  if (deviation < -0.3) return t['status-success']
   if (abs <= 0.3) return '#6B7280'
-  if (abs <= 0.7) return '#FFB020'
-  return '#D14343'
+  if (abs <= 0.7) return t['status-warning']
+  return t['status-error']
 }
 
 function getDeviationDescription(deviation: number): string {
@@ -55,7 +58,7 @@ export function DeviationBar({
           borderRadius: 3,
           // react-native-web renders backgroundImage at runtime; not in RN ViewStyle types
           backgroundImage:
-            'linear-gradient(90deg, rgba(20,184,166,0.25) 0%, rgba(107,114,128,0.15) 50%, rgba(255,176,32,0.25) 100%)',
+            'linear-gradient(90deg, rgba(46,213,115,0.25) 0%, rgba(107,114,128,0.15) 50%, rgba(249,180,21,0.25) 100%)',
         } as ViewStyle}
       />
       <View

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

@@ -22,9 +22,10 @@ import {
   type VelocityZoneBandProp,
 } from './VelocityStrip'
 import { resolveColor } from '../../../theme/resolve-color'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 import { cn } from '../../../utils/cn'
 
-const BRAND_PRIMARY = '#FF7900'
+const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
 
 /** Inner plot width: page width 390 − 16 page padding − 12 card padding on each side. */
 const CHART_WIDTH = 326

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

@@ -2,6 +2,7 @@
 import React from 'react'
 import { View, Text, Pressable, TextInput } from 'react-native'
 import { resolveColor } from '../../../theme/resolve-color'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
 export interface InputBarProps {
   exerciseName: string
@@ -17,7 +18,7 @@ export interface InputBarProps {
   visible: boolean
 }
 
-const BRAND_PRIMARY = '#FF7900'
+const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
 const INPUT_CLASSNAME = 'bg-surface-raised border-border-strong text-text-primary'
 
 const inputStyle = {

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

@@ -44,19 +44,19 @@ describe('IntensityBar', () => {
   })
 
   describe('zone colors graded by true percentage', () => {
-    it('renders teal below the target ramp (< 75%)', () => {
+    it('renders green below the target ramp (< 75%)', () => {
       render(<IntensityBar level={0.2} />)
-      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#14B8A6' })
+      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#2ED573' })
     })
 
-    it('stays teal just under the amber boundary', () => {
+    it('stays green just under the amber boundary', () => {
       render(<IntensityBar level={0.74} />)
-      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#14B8A6' })
+      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#2ED573' })
     })
 
     it('renders amber approaching the target (75-99%)', () => {
       render(<IntensityBar level={0.75} />)
-      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#FFB020' })
+      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#F9B415' })
     })
 
     it('renders the brand target color exactly at 100%', () => {
@@ -71,12 +71,12 @@ describe('IntensityBar', () => {
 
     it('renders over-2 deep red at 120%', () => {
       render(<IntensityBar level={1.2} />)
-      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#A62626' })
+      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#A4221C' })
     })
 
     it('renders over-3 darkest red at 130%', () => {
       render(<IntensityBar level={1.3} />)
-      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#7A1C1C' })
+      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#7E1002' })
     })
   })
 
@@ -88,7 +88,7 @@ describe('IntensityBar', () => {
 
     it('colors the bulge to match the over-target zone', () => {
       render(<IntensityBar level={1.2} />)
-      expect(screen.getByTestId('intensity-bulge')).toHaveStyle({ backgroundColor: '#A62626' })
+      expect(screen.getByTestId('intensity-bulge')).toHaveStyle({ backgroundColor: '#A4221C' })
     })
 
     it('does not render a bulge at or below target', () => {

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

@@ -8,6 +8,10 @@ import {
   type ViewStyle,
   type DimensionValue,
 } from 'react-native'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
+
+const t = getSemanticColors('dark')
 
 export type IntensityBarOrientation = 'vertical' | 'horizontal'
 
@@ -34,12 +38,12 @@ const AT_TARGET_GLOW = '0 0 5px 1px rgba(33, 150, 243, 0.35), 0 0 10px 3px rgba(
 
 // Zone colors graded by TRUE percentage (level * 100).
 const ZONE = {
-  building: '#14B8A6', // teal   — below target ramp-up
-  approaching: '#FFB020', // amber  — nearing target
-  target: '#FF7900', // brand  — exactly at target
-  over1: '#D14343', // red    — mild over-target
-  over2: '#A62626', // deep red — moderate over-target
-  over3: '#7A1C1C', // darkest red — severe over-target
+  building: t['status-success'], // below target ramp-up
+  approaching: t['status-warning'], // nearing target
+  target: t['brand-primary'], // exactly at target
+  over1: t['status-error'], // mild over-target
+  over2: WORKOUT_TOKENS.intensity.over2, // moderate over-target
+  over3: WORKOUT_TOKENS.intensity.over3, // severe over-target
 } as const
 
 type OverTier = 0 | 1 | 2 | 3