@titan-design/react-ui 0.3.0 → 0.5.0

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

@@ -3,6 +3,8 @@ import { render, screen } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { IntensityBar } from './IntensityBar'
 
+const AT_TARGET_GLOW = '0 0 5px 1px rgba(33, 150, 243, 0.35), 0 0 10px 3px rgba(33, 150, 243, 0.15)'
+
 describe('IntensityBar', () => {
   it('renders the bar', () => {
     render(<IntensityBar level={0.5} />)
@@ -14,98 +16,148 @@ describe('IntensityBar', () => {
     expect(screen.getByTestId('intensity-fill')).toBeInTheDocument()
   })
 
-  it('renders threshold line when threshold is provided', () => {
-    render(<IntensityBar level={0.5} threshold={0.85} />)
-    expect(screen.getByTestId('intensity-threshold')).toBeInTheDocument()
-  })
-
-  it('does not render threshold line when threshold is omitted', () => {
+  it('has correct accessibility role', () => {
     render(<IntensityBar level={0.5} />)
-    expect(screen.queryByTestId('intensity-threshold')).not.toBeInTheDocument()
+    expect(screen.getByRole('progressbar')).toBeInTheDocument()
   })
 
-  it('shows MRV label when showThresholdLabel is true and threshold set', () => {
-    render(<IntensityBar level={0.6} threshold={0.85} showThresholdLabel />)
-    expect(screen.getByText('MRV')).toBeInTheDocument()
-  })
+  describe('numeric percentage label', () => {
+    it('renders the level as a percentage under the bar', () => {
+      render(<IntensityBar level={0.2} />)
+      expect(screen.getByTestId('intensity-label')).toHaveTextContent('20%')
+    })
 
-  it('hides MRV label when showThresholdLabel is false', () => {
-    render(<IntensityBar level={0.6} threshold={0.85} />)
-    expect(screen.queryByTestId('intensity-threshold-label')).not.toBeInTheDocument()
-  })
+    it('renders over-target percentages above 100', () => {
+      render(<IntensityBar level={1.3} />)
+      expect(screen.getByTestId('intensity-label')).toHaveTextContent('130%')
+    })
 
-  it('hides MRV label when threshold is omitted even if showThresholdLabel is true', () => {
-    render(<IntensityBar level={0.6} showThresholdLabel />)
-    expect(screen.queryByTestId('intensity-threshold-label')).not.toBeInTheDocument()
-  })
+    it('mirrors the label in the accessibility value', () => {
+      render(<IntensityBar level={1.1} />)
+      expect(screen.getByLabelText('Intensity level: 110%')).toBeInTheDocument()
+    })
 
-  it('has correct accessibility role', () => {
-    render(<IntensityBar level={0.5} />)
-    expect(screen.getByRole('progressbar')).toBeInTheDocument()
+    it('floors a negative level to 0%', () => {
+      render(<IntensityBar level={-0.5} />)
+      expect(screen.getByTestId('intensity-label')).toHaveTextContent('0%')
+    })
   })
 
-  it('maps level 0-1 to percentage in accessibility label', () => {
-    render(<IntensityBar level={0.75} />)
-    expect(screen.getByLabelText('Intensity level: 75%')).toBeInTheDocument()
-  })
+  describe('zone colors graded by true percentage', () => {
+    it('renders teal below the target ramp (< 75%)', () => {
+      render(<IntensityBar level={0.2} />)
+      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#14B8A6' })
+    })
 
-  it('clamps level above 1 to 100%', () => {
-    render(<IntensityBar level={1.5} />)
-    expect(screen.getByLabelText('Intensity level: 100%')).toBeInTheDocument()
-  })
+    it('stays teal just under the amber boundary', () => {
+      render(<IntensityBar level={0.74} />)
+      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#14B8A6' })
+    })
 
-  it('clamps level below 0 to 0%', () => {
-    render(<IntensityBar level={-0.5} />)
-    expect(screen.getByLabelText('Intensity level: 0%')).toBeInTheDocument()
+    it('renders amber approaching the target (75-99%)', () => {
+      render(<IntensityBar level={0.75} />)
+      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#FFB020' })
+    })
+
+    it('renders the brand target color exactly at 100%', () => {
+      render(<IntensityBar level={1} />)
+      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#FF7900' })
+    })
+
+    it('renders over-1 red just past target (110%)', () => {
+      render(<IntensityBar level={1.1} />)
+      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#D14343' })
+    })
+
+    it('renders over-2 deep red at 120%', () => {
+      render(<IntensityBar level={1.2} />)
+      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#A62626' })
+    })
+
+    it('renders over-3 darkest red at 130%', () => {
+      render(<IntensityBar level={1.3} />)
+      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#7A1C1C' })
+    })
   })
 
-  it('renders horizontal orientation', () => {
-    render(<IntensityBar level={0.5} orientation="horizontal" />)
-    expect(screen.getByTestId('intensity-fill')).toBeInTheDocument()
+  describe('over-target bulge', () => {
+    it('renders a bulge when the level exceeds target', () => {
+      render(<IntensityBar level={1.1} />)
+      expect(screen.getByTestId('intensity-bulge')).toBeInTheDocument()
+    })
+
+    it('colors the bulge to match the over-target zone', () => {
+      render(<IntensityBar level={1.2} />)
+      expect(screen.getByTestId('intensity-bulge')).toHaveStyle({ backgroundColor: '#A62626' })
+    })
+
+    it('does not render a bulge at or below target', () => {
+      render(<IntensityBar level={1} />)
+      expect(screen.queryByTestId('intensity-bulge')).not.toBeInTheDocument()
+    })
   })
 
-  it('accepts custom size and thickness', () => {
-    render(<IntensityBar level={0.5} size={32} thickness={8} />)
-    expect(screen.getByTestId('intensity-bar')).toBeInTheDocument()
+  describe('target line', () => {
+    it('renders the target line when threshold is provided', () => {
+      render(<IntensityBar level={0.5} threshold={0.5} />)
+      expect(screen.getByTestId('intensity-target')).toBeInTheDocument()
+    })
+
+    it('does not render the target line when threshold is omitted', () => {
+      render(<IntensityBar level={0.5} />)
+      expect(screen.queryByTestId('intensity-target')).not.toBeInTheDocument()
+    })
   })
 
-  describe('fill zones', () => {
-    it('renders teal fill for low levels (0-0.4)', () => {
-      render(<IntensityBar level={0.3} />)
-      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#14B8A6' })
+  describe('at-target glow', () => {
+    it('applies the blue glow when the level rests on the target', () => {
+      render(<IntensityBar level={0.5} threshold={0.5} />)
+      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ boxShadow: AT_TARGET_GLOW })
+    })
+
+    it('does not glow when the level is away from the target', () => {
+      render(<IntensityBar level={0.2} threshold={0.85} />)
+      expect(screen.getByTestId('intensity-fill')).not.toHaveStyle({ boxShadow: AT_TARGET_GLOW })
     })
 
-    it('renders amber fill for moderate levels (0.4-0.7)', () => {
+    it('does not glow when no threshold is provided', () => {
       render(<IntensityBar level={0.5} />)
-      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#FFB020' })
+      expect(screen.getByTestId('intensity-fill')).not.toHaveStyle({ boxShadow: AT_TARGET_GLOW })
     })
+  })
 
-    it('renders red fill for high levels (0.7-1.0)', () => {
-      render(<IntensityBar level={0.85} />)
-      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#D14343' })
+  describe('MRV threshold label', () => {
+    it('shows MRV when showThresholdLabel is true and threshold set', () => {
+      render(<IntensityBar level={0.6} threshold={0.85} showThresholdLabel />)
+      expect(screen.getByText('MRV')).toBeInTheDocument()
     })
 
-    it('uses teal at the lower zone boundary', () => {
-      render(<IntensityBar level={0.39} />)
-      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#14B8A6' })
+    it('hides MRV when showThresholdLabel is false', () => {
+      render(<IntensityBar level={0.6} threshold={0.85} />)
+      expect(screen.queryByTestId('intensity-threshold-label')).not.toBeInTheDocument()
     })
 
-    it('uses amber at the 0.4 boundary', () => {
-      render(<IntensityBar level={0.4} />)
-      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#FFB020' })
+    it('hides MRV when threshold is omitted even if showThresholdLabel is true', () => {
+      render(<IntensityBar level={0.6} showThresholdLabel />)
+      expect(screen.queryByTestId('intensity-threshold-label')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('geometry', () => {
+    it('renders horizontal orientation', () => {
+      render(<IntensityBar level={0.5} orientation="horizontal" />)
+      expect(screen.getByTestId('intensity-fill')).toBeInTheDocument()
     })
 
-    it('uses red at the 0.7 boundary', () => {
-      render(<IntensityBar level={0.7} />)
-      expect(screen.getByTestId('intensity-fill')).toHaveStyle({ backgroundColor: '#D14343' })
+    it('accepts custom size and thickness', () => {
+      render(<IntensityBar level={0.5} size={36} thickness={8} />)
+      expect(screen.getByTestId('intensity-bar')).toBeInTheDocument()
     })
   })
 
   describe('accessibility', () => {
     it('has no accessibility violations', async () => {
-      const { container } = render(
-        <IntensityBar level={0.5} threshold={0.85} showThresholdLabel />,
-      )
+      const { container } = render(<IntensityBar level={0.5} threshold={0.85} showThresholdLabel />)
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })

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

@@ -1,13 +1,20 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { useEffect, useState } from 'react'
-import { View, Text, Animated, type ViewProps, type ViewStyle } from 'react-native'
+import {
+  View,
+  Text,
+  Animated,
+  type ViewProps,
+  type ViewStyle,
+  type DimensionValue,
+} from 'react-native'
 
 export type IntensityBarOrientation = 'vertical' | 'horizontal'
 
 export interface IntensityBarProps extends ViewProps {
-  /** Current intensity level 0-1 */
+  /** Current intensity level; 1 == 100% of target. Values >1 render as over-target. */
   level: number
-  /** MRV/overexertion threshold position 0-1 */
+  /** Target position 0-1. When the level sits at this target the fill gains an at-target glow. */
   threshold?: number
   /** Orientation */
   orientation?: IntensityBarOrientation
@@ -15,28 +22,57 @@ export interface IntensityBarProps extends ViewProps {
   size?: number
   /** Width for vertical (default 6px) or height for horizontal */
   thickness?: number
-  /** Show threshold label ("MRV") */
+  /** Show the "MRV" threshold label under the bar */
   showThresholdLabel?: boolean
   className?: string
 }
 
-const TRACK_BG = 'rgba(255,255,255,0.06)'
-const THRESHOLD_COLOR = '#FFFFFF'
+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)'
 
-/** Fill color by intensity zone: teal 0-0.4, amber 0.4-0.7, red 0.7-1.0. */
-function getZoneColor(level: number): string {
-  if (level >= 0.7) return '#D14343'
-  if (level >= 0.4) return '#FFB020'
-  return '#14B8A6'
+// 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
+} as const
+
+type OverTier = 0 | 1 | 2 | 3
+
+interface Zone {
+  color: string
+  over: OverTier
+}
+
+const BULGE_SIZE: Record<Exclude<OverTier, 0>, number> = { 1: 8, 2: 10, 3: 11 }
+
+/** Map a true percentage to its fill color and over-target tier. */
+function zoneForPct(pct: number): Zone {
+  if (pct >= 125) return { color: ZONE.over3, over: 3 }
+  if (pct >= 115) return { color: ZONE.over2, over: 2 }
+  if (pct > 100) return { color: ZONE.over1, over: 1 }
+  if (pct === 100) return { color: ZONE.target, over: 0 }
+  if (pct >= 75) return { color: ZONE.approaching, over: 0 }
+  return { color: ZONE.building, over: 0 }
 }
 
-function clamp01(value: number): number {
+function clampFill(value: number): number {
   if (value < 0) return 0
   if (value > 1) return 1
   return value
 }
 
+/** True when the level rests on the supplied target (within 5%). */
+function isAtTarget(pct: number, threshold?: number): boolean {
+  if (threshold == null) return false
+  return Math.abs(pct - Math.round(threshold * 100)) <= 5
+}
+
 export function IntensityBar({
   level,
   threshold,
@@ -48,21 +84,22 @@ export function IntensityBar({
   ...props
 }: IntensityBarProps) {
   const isVertical = orientation === 'vertical'
-  const clampedLevel = clamp01(level)
-  const percentage = Math.round(clampedLevel * 100)
-  const zoneColor = getZoneColor(clampedLevel)
+  const fillLevel = clampFill(level)
+  const pct = Math.round(Math.max(0, level) * 100)
+  const zone = zoneForPct(pct)
+  const atTarget = isAtTarget(pct, threshold)
 
-  const [fillAnim] = useState(() => new Animated.Value(clampedLevel))
+  const [fillAnim] = useState(() => new Animated.Value(fillLevel))
 
   useEffect(() => {
     const animation = Animated.timing(fillAnim, {
-      toValue: clampedLevel,
+      toValue: fillLevel,
       duration: 250,
       useNativeDriver: false,
     })
     animation.start()
     return () => animation.stop()
-  }, [clampedLevel, fillAnim])
+  }, [fillLevel, fillAnim])
 
   const fillSizePercent = fillAnim.interpolate({
     inputRange: [0, 1],
@@ -74,51 +111,50 @@ export function IntensityBar({
     : { width: size, height: thickness }
 
   const fillStyle = isVertical
+    ? { position: 'absolute' as const, bottom: 0, left: 0, right: 0, height: fillSizePercent }
+    : { position: 'absolute' as const, top: 0, bottom: 0, left: 0, width: fillSizePercent }
+
+  const bulgeSize = zone.over === 0 ? 0 : BULGE_SIZE[zone.over]
+  const bulgeStyle: ViewStyle = {
+    position: 'absolute',
+    width: bulgeSize,
+    height: bulgeSize,
+    borderRadius: bulgeSize / 2,
+    backgroundColor: zone.color,
+    zIndex: 1,
+    ...(isVertical
+      ? { top: 0, left: '50%', transform: [{ translateX: -bulgeSize / 2 }] }
+      : { right: 0, top: '50%', transform: [{ translateY: -bulgeSize / 2 }] }),
+  }
+
+  const targetPct: DimensionValue = `${clampFill(threshold ?? 0) * 100}%`
+  const targetLineStyle: ViewStyle = isVertical
     ? {
-        position: 'absolute' as const,
-        bottom: 0,
-        left: 0,
-        right: 0,
-        height: fillSizePercent,
+        position: 'absolute',
+        bottom: targetPct,
+        left: -3,
+        right: -3,
+        height: 1.5,
+        backgroundColor: TARGET_LINE_COLOR,
+        zIndex: 4,
       }
     : {
-        position: 'absolute' as const,
-        top: 0,
-        bottom: 0,
-        left: 0,
-        width: fillSizePercent,
+        position: 'absolute',
+        left: targetPct,
+        top: -3,
+        bottom: -3,
+        width: 1.5,
+        backgroundColor: TARGET_LINE_COLOR,
+        zIndex: 4,
       }
 
-  const thresholdLineStyle: ViewStyle | undefined =
-    threshold != null
-      ? isVertical
-        ? {
-            position: 'absolute' as const,
-            bottom: `${clamp01(threshold) * 100}%`,
-            left: -2,
-            right: -2,
-            height: 1,
-            backgroundColor: THRESHOLD_COLOR,
-            zIndex: 4,
-          }
-        : {
-            position: 'absolute' as const,
-            left: `${clamp01(threshold) * 100}%`,
-            top: -2,
-            bottom: -2,
-            width: 1,
-            backgroundColor: THRESHOLD_COLOR,
-            zIndex: 4,
-          }
-      : undefined
-
   return (
     <View
       className={className}
       style={{ alignItems: 'center' }}
       accessibilityRole="progressbar"
-      accessibilityValue={{ min: 0, max: 100, now: percentage }}
-      accessibilityLabel={`Intensity level: ${percentage}%`}
+      accessibilityValue={{ min: 0, max: 100, now: pct }}
+      accessibilityLabel={`Intensity level: ${pct}%`}
       testID="intensity-bar"
       {...props}
     >
@@ -136,16 +172,31 @@ export function IntensityBar({
           style={{
             ...fillStyle,
             borderRadius: 3,
-            backgroundColor: zoneColor,
+            backgroundColor: zone.color,
             zIndex: 2,
+            ...(atTarget ? { boxShadow: AT_TARGET_GLOW } : null),
           }}
           testID="intensity-fill"
         />
 
-        {threshold != null && (
-          <View style={thresholdLineStyle} testID="intensity-threshold" />
-        )}
+        {zone.over !== 0 && <View style={bulgeStyle} testID="intensity-bulge" />}
+
+        {threshold != null && <View style={targetLineStyle} testID="intensity-target" />}
       </View>
+
+      <Text
+        style={{
+          fontSize: 8,
+          color: LABEL_COLOR,
+          fontFamily: '"Nunito Sans", sans-serif',
+          marginTop: 6,
+        }}
+        accessibilityElementsHidden
+        testID="intensity-label"
+      >
+        {pct}%
+      </Text>
+
       {showThresholdLabel && threshold != null && (
         <Text
           style={{
@@ -153,7 +204,7 @@ export function IntensityBar({
             fontWeight: '500',
             color: LABEL_COLOR,
             fontFamily: 'Inter, sans-serif',
-            marginTop: 6,
+            marginTop: 2,
           }}
           accessibilityElementsHidden
           testID="intensity-threshold-label"

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

@@ -9,10 +9,6 @@ const BRAND_PRIMARY = '#FF7900'
 const BRAND_PRIMARY_DARK = '#C45E00'
 const BRAND_PRIMARY_LIGHT = '#FFB066'
 const BORDER_DEFAULT = '#1F1F1F'
-// Theme-aware foregrounds: resolve to a readable color in both light and dark
-// (react-native-web passes the CSS var through to the inline style).
-const TEXT_PRIMARY = 'var(--color-text-primary)'
-const TEXT_SECONDARY = 'var(--color-text-secondary)'
 
 /** Gradient stops for the 3px top accent: dark -> primary -> light. */
 const ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY, BRAND_PRIMARY_LIGHT]
@@ -119,11 +115,11 @@ export function MesoCard({
     <View style={{ paddingHorizontal: 14, paddingTop: 12, paddingBottom: 10 }} testID="meso-card-body">
       <View className="flex-row items-center" style={{ gap: 8 }} testID="meso-card-header">
         <Text
+          className="text-text-primary"
           style={{
             fontSize: 15,
             fontFamily: '"Space Grotesk", sans-serif',
             fontWeight: '700',
-            color: TEXT_PRIMARY,
           }}
           testID="meso-card-name"
         >
@@ -135,11 +131,11 @@ export function MesoCard({
       </View>
 
       <Text
+        className="text-text-secondary"
         style={{
           marginTop: 4,
           fontSize: 12,
           fontFamily: 'Inter, sans-serif',
-          color: TEXT_SECONDARY,
         }}
         testID="meso-card-subheader"
       >

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

@@ -3,13 +3,11 @@ import { Fragment, type ReactNode } from 'react'
 import { View, Text, type ViewProps, type ViewStyle } from 'react-native'
 import { Card } from '../../ui/card'
 import { StatusDot } from './StatusDot'
+import { resolveColor } from '../../../theme/resolve-color'
 
 const BRAND_PRIMARY = '#FF7900'
 const BRAND_PRIMARY_DARK = '#C45E00'
 const BRAND_PRIMARY_LIGHT = '#FFB066'
-const TEXT_PRIMARY = 'var(--color-text-primary)'
-const TEXT_SECONDARY = 'var(--color-text-secondary)'
-const TEXT_TERTIARY = 'var(--color-text-tertiary)'
 
 const SUCCESS = '#14B8A6'
 const WARNING = '#FFB020'
@@ -18,9 +16,12 @@ const ERROR = '#D14343'
 /** Gradient stops for the 3px top accent: dark -> primary -> light (matches MesoCard). */
 const ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY, BRAND_PRIMARY_LIGHT]
 
-/** Card surface gradient: elevated -> raised at 135deg (theme-aware). */
-const CARD_GRADIENT =
-  'linear-gradient(135deg, var(--color-surface-elevated) 0%, var(--color-surface-raised) 100%)'
+/**
+ * Card surface gradient: elevated -> raised at 135deg. Uses resolved dark-theme
+ * hexes (a gradient string can't carry a className token, and var() renders
+ * black on native).
+ */
+const CARD_GRADIENT = `linear-gradient(135deg, ${resolveColor('surface-elevated')} 0%, ${resolveColor('surface-raised')} 100%)`
 
 /** Gauge track gradient (teal -> amber -> red) at 0.25 alpha. */
 const GAUGE_GRADIENT =
@@ -118,7 +119,8 @@ function renderCoachingText(text: string, highlights?: string[]): ReactNode {
     highlights.includes(part) ? (
       <Text
         key={`${part}-${index}`}
-        style={{ fontWeight: '700', color: TEXT_PRIMARY }}
+        className="text-text-primary"
+        style={{ fontWeight: '700' }}
       >
         {part}
       </Text>
@@ -166,24 +168,24 @@ function MetricCell({ metric }: { metric: MesoStatusMetric }) {
   return (
     <View style={{ width: '48%' }} testID="meso-status-card-metric">
       <Text
+        className="text-text-tertiary"
         style={{
           fontSize: 10,
           fontFamily: 'Inter, sans-serif',
           fontWeight: '600',
           letterSpacing: 0.5,
           textTransform: 'uppercase',
-          color: TEXT_TERTIARY,
         }}
       >
         {metric.label}
       </Text>
       <Text
+        className="text-text-primary"
         style={{
           marginTop: 2,
           fontSize: 13,
           fontFamily: 'Inter, sans-serif',
           fontWeight: '600',
-          color: TEXT_PRIMARY,
         }}
       >
         {metric.value}
@@ -212,24 +214,24 @@ function Gauge({ gauge }: { gauge: MesoStatusGauge }) {
         accessibilityElementsHidden
       >
         <Text
+          className="text-text-secondary"
           style={{
             fontSize: 10,
             fontFamily: 'Inter, sans-serif',
             fontWeight: '500',
             letterSpacing: 0.5,
             textTransform: 'uppercase',
-            color: TEXT_SECONDARY,
           }}
         >
           {gauge.label}
         </Text>
         {gauge.sublabel != null && (
           <Text
+            className="text-text-tertiary"
             style={{
               fontSize: 10,
               fontFamily: 'Inter, sans-serif',
               fontWeight: '500',
-              color: TEXT_TERTIARY,
             }}
           >
             {gauge.sublabel}
@@ -261,6 +263,7 @@ function Gauge({ gauge }: { gauge: MesoStatusGauge }) {
           testID="meso-status-card-gauge-center"
         />
         <View
+          className="border-text-primary"
           style={{
             position: 'absolute',
             left: `${percentage}%`,
@@ -270,7 +273,6 @@ function Gauge({ gauge }: { gauge: MesoStatusGauge }) {
             height: 14,
             borderRadius: 9999,
             borderWidth: 2,
-            borderColor: TEXT_PRIMARY,
             backgroundColor: markerColor,
             boxShadow: '0 0 4px rgba(0,0,0,0.5)',
           }}
@@ -349,12 +351,12 @@ export function MesoStatusCard({
             style={{ gap: 8 }}
           >
             <Text
+              className="text-text-primary"
               style={{
                 flexShrink: 1,
                 fontSize: 15,
                 fontFamily: '"Space Grotesk", sans-serif',
                 fontWeight: '700',
-                color: TEXT_PRIMARY,
               }}
               testID="meso-status-card-name"
             >
@@ -363,11 +365,11 @@ export function MesoStatusCard({
             <StatusPill badge={statusBadge} />
           </View>
           <Text
+            className="text-text-secondary"
             style={{
               marginTop: 4,
               fontSize: 12,
               fontFamily: 'Inter, sans-serif',
-              color: TEXT_SECONDARY,
             }}
             testID="meso-status-card-subtitle"
           >
@@ -408,11 +410,11 @@ export function MesoStatusCard({
             testID="meso-status-card-coaching"
           >
             <Text
+              className="text-text-secondary"
               style={{
                 fontSize: 12,
                 lineHeight: 17,
                 fontFamily: 'Inter, sans-serif',
-                color: TEXT_SECONDARY,
               }}
             >
               {renderCoachingText(coaching.text, coaching.highlights)}