@titan-design/react-ui 0.9.2 → 0.10.0

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

@@ -22,6 +22,9 @@ import { WeightBadge } from './WeightBadge'
 import { PrBadge } from './PrBadge'
 import { PlaceholderStrip } from './PlaceholderStrip'
 import { SupersetWrapper } from './SupersetWrapper'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+const t = getSemanticColors('dark')
 
 // ----------------------------------------------------------------------------- gallery scaffold
 class Boundary extends Component<{ children: ReactNode }, { err: string | null }> {
@@ -364,10 +367,10 @@ export const AllRows: Story = {
         </Cell>
         <Cell name="SupersetWrapper" entity="grouping bracket" expand="no">
           <SupersetWrapper label="SS1" color="#FF7900">
-            <View style={{ padding: 10, backgroundColor: '#1C1C1C', borderRadius: 8 }}>
+            <View style={{ padding: 10, backgroundColor: t['surface-raised'], borderRadius: 8 }}>
               <Text style={{ color: '#F3F4F6' }}>Exercise A</Text>
             </View>
-            <View style={{ padding: 10, backgroundColor: '#1C1C1C', borderRadius: 8 }}>
+            <View style={{ padding: 10, backgroundColor: t['surface-raised'], borderRadius: 8 }}>
               <Text style={{ color: '#F3F4F6' }}>Exercise B</Text>
             </View>
           </SupersetWrapper>

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

@@ -4,6 +4,9 @@
  */
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { NavStub, Rail, Page, T_TERTIARY } from './setHeadingKit'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+const t = getSemanticColors('dark')
 
 type Args = { stripHeight: number }
 const meta: Meta<Args> = {
@@ -25,7 +28,16 @@ export const NextToNav: Story = {
       <div style={{ display: 'flex', alignItems: 'stretch', width: 'fit-content' }}>
         <NavStub />
         <Rail stripH={args.stripHeight} />
-        <div style={{ width: 140, background: '#161616', alignSelf: 'stretch', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <div
+          style={{
+            width: 140,
+            background: t['background-base'],
+            alignSelf: 'stretch',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
           <span style={{ fontSize: 10, color: T_TERTIARY, fontFamily: 'monospace' }}>stage</span>
         </div>
       </div>

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

@@ -1,6 +1,6 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { View, Text, type ViewProps } from 'react-native'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { Surface, onSurfaceColors, useSurfaceMode } from '../../ui/surface'
 import { Typography } from '../Typography'
 import { TimerReadout } from '../TimerReadout'
 import { SegmentedProgressBar } from './SegmentedProgressBar'
@@ -8,13 +8,10 @@ import { MetricTiles, type MetricTileData } from './MetricTiles'
 import { ScheduleTiles } from './ScheduleTiles'
 import { paceTone, paceToneColor } from './paceTone'
 
-const t = getSemanticColors('dark')
-
-// The header shares the SideNav's `background-base` (charcoal 900, #101010) so the nav and
-// the rail header read as ONE continuous dark plane on the left — the sunk exercise list
-// (charcoal 800) sits raised off it. Previously charcoal 400 (#1F1F1F), which made the header
-// the lightest rail surface and let it blend with the rows instead of anchoring to the nav.
-const HEADER_BG = t['background-base'] // #101010 — matches SideNav bg-background-base
+// The header shares the SideNav's `background-base` (warm-tapered ramp shell, #1C1916) so the
+// nav and the rail header read as ONE continuous dark plane on the left — the sunk exercise list
+// sits raised off it. A `<Surface level="background">` owns that plane so the header no
+// longer hand-sets it, and its title/label text resolve on-surface colours from context.
 
 // The chunked pace bar matches the SetStrip language but sits tighter than the default
 // SetStrip gap (5) — the locked design uses a 3px gap and a 9px track.
@@ -73,21 +70,22 @@ export function SessionHeader({
 }: SessionHeaderProps) {
   const upcoming = next != null
   const totalSets = plan.reduce((sum, e) => sum + e.sets, 0)
+  const onSurface = onSurfaceColors(useSurfaceMode())
 
   const hasPace = !upcoming && budgetMs != null && elapsedMs != null
   const target = hasPace ? (elapsedMs as number) / (budgetMs as number) : undefined
 
   const setsLabel = upcoming ? `${totalSets} sets` : `${Math.floor(setsDone)}/${totalSets} sets`
   const setsLabelColor = upcoming
-    ? t['text-secondary']
+    ? onSurface.secondary
     : paceToneColor(paceTone(totalSets > 0 ? setsDone / totalSets : 0, target))
 
   return (
-    <View
+    <Surface
+      level="background"
       className={className}
       style={[
         {
-          backgroundColor: HEADER_BG,
           paddingTop: 11,
           paddingRight: 12,
           paddingBottom: 12,
@@ -106,7 +104,7 @@ export function SessionHeader({
           lineHeight: 18,
           fontWeight: '700',
           fontFamily: '"Space Grotesk", sans-serif',
-          color: t['text-primary'],
+          color: onSurface.primary,
           marginBottom: 10,
         }}
         testID="session-rail-title"
@@ -148,6 +146,6 @@ export function SessionHeader({
           />
         </View>
       </View>
-    </View>
+    </Surface>
   )
 }

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

@@ -1,8 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View, Text } from 'react-native'
 import { primitiveRamps } from '../../../theme/tokens/primitives'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 import { SessionRail, type SessionRailExercise } from './SessionRail'
 
+const t = getSemanticColors('dark')
+
 /**
  * `SessionRail` (shell organism) — the live-workout exercise list: a flat raised
  * `SessionHeader` glance (title, stat tiles, chunked pace bar) over a sunk, inset list
@@ -20,7 +23,7 @@ const meta: Meta<typeof SessionRail> = {
   },
   decorators: [
     (Story) => (
-      <View className="min-h-screen flex-row" style={{ backgroundColor: '#101010' }}>
+      <View className="min-h-screen flex-row" style={{ backgroundColor: t['background-base'] }}>
         <Story />
         <View className="flex-1 items-center justify-center">
           <Text style={{ color: '#6B7280', fontSize: 12 }}>main viewport</Text>

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

@@ -2,20 +2,20 @@
 import { View, type ViewProps } from 'react-native'
 import { primitiveColors } from '../../../theme/tokens/primitives'
 import { neumorphicShadows } from '../../../theme/shadows'
+import { Surface } from '../../ui/surface'
 import { ExerciseCardHeading } from './ExerciseCardHeading'
 import { SessionHeader } from './SessionHeader'
 import type { MetricTileData } from './MetricTiles'
 import type { SetStripSet } from './SetStrip'
 import type { ExerciseIndicatorKind } from './ExerciseIndicator'
 
-// Charcoal-ramp surfaces (the locked S3 shell shades): the nav + the heading plane read as
-// ONE dark plane (charcoal 900, #101010, set in SessionHeader). The exercise list is a
-// LIGHTER inset panel (charcoal 600) — recessed via its inner shadow yet paler than the
-// header, so the transparent exercise headings on it never blend into the header plane.
-// (Band-aid: the list is picked to clear the components; the durable fix is a `<Surface>`
-// primitive whose cards own their own raised background — see the rail's PR notes.)
-const INSET = primitiveColors.charcoal[600] // #191919 — lighter sunk exercise-list panel
-const DIVIDER = primitiveColors.charcoal[300] // #2C2C2C — row divider (raised to read on #191919)
+// Warm-tapered ramp surfaces (the locked S3 shell shades): the nav + the heading plane read as
+// ONE dark plane (background shell, #1C1916, owned by SessionHeader's `<Surface level="background">`).
+// The exercise list is a LIGHTER inset panel — `<Surface level="elevated">` (#2A2827) —
+// recessed via its inner shadow yet paler than the header, so the transparent
+// exercise headings on it never blend into the header plane. Surface owns both backgrounds,
+// so the rail no longer hand-sets them.
+const DIVIDER = primitiveColors.charcoal[300] // #2C2C2C — row divider (raised to read on surface-elevated #2A2827)
 
 const DEFAULT_WIDTH = 246
 
@@ -87,9 +87,10 @@ export function SessionRail({
   ...props
 }: SessionRailProps) {
   return (
-    <View
+    <Surface
+      level="elevated"
       className={className}
-      style={[{ width, flexDirection: 'column', backgroundColor: INSET }, style]}
+      style={[{ width, flexDirection: 'column' }, style]}
       testID="session-rail"
       {...props}
     >
@@ -104,8 +105,9 @@ export function SessionRail({
         next={next}
       />
 
-      <View
-        style={[{ flex: 1, backgroundColor: INSET }, neumorphicShadows.charcoal.pressed.subtle]}
+      <Surface
+        level="elevated"
+        style={[{ flex: 1 }, neumorphicShadows.charcoal.pressed.subtle]}
         testID="session-rail-list"
       >
         {exercises.map((ex, i) => (
@@ -131,7 +133,7 @@ export function SessionRail({
             />
           </View>
         ))}
-      </View>
-    </View>
+      </Surface>
+    </Surface>
   )
 }

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

@@ -2,6 +2,9 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View, Text } from 'react-native'
 import { SupersetWrapper } from './SupersetWrapper'
 import { ExerciseCard } from './ExerciseCard'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+const t = getSemanticColors('dark')
 
 const meta: Meta<typeof SupersetWrapper> = {
   title: 'Workout/SupersetWrapper',
@@ -9,7 +12,7 @@ const meta: Meta<typeof SupersetWrapper> = {
   tags: ['autodocs'],
   decorators: [
     (Story) => (
-      <View style={{ maxWidth: 400, padding: 16, backgroundColor: '#121212' }}>
+      <View style={{ maxWidth: 400, padding: 16, backgroundColor: t['background-base'] }}>
         <Story />
       </View>
     ),
@@ -26,24 +29,20 @@ export const Default: Story = {
         <View
           style={{
             padding: 12,
-            backgroundColor: '#1C1C1C',
+            backgroundColor: t['surface-raised'],
             borderRadius: 8,
           }}
         >
-          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>
-            Exercise A
-          </Text>
+          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>Exercise A</Text>
         </View>
         <View
           style={{
             padding: 12,
-            backgroundColor: '#1C1C1C',
+            backgroundColor: t['surface-raised'],
             borderRadius: 8,
           }}
         >
-          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>
-            Exercise B
-          </Text>
+          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>Exercise B</Text>
         </View>
       </>
     ),
@@ -58,24 +57,20 @@ export const CustomLabel: Story = {
         <View
           style={{
             padding: 12,
-            backgroundColor: '#1C1C1C',
+            backgroundColor: t['surface-raised'],
             borderRadius: 8,
           }}
         >
-          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>
-            Exercise A1
-          </Text>
+          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>Exercise A1</Text>
         </View>
         <View
           style={{
             padding: 12,
-            backgroundColor: '#1C1C1C',
+            backgroundColor: t['surface-raised'],
             borderRadius: 8,
           }}
         >
-          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>
-            Exercise A2
-          </Text>
+          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>Exercise A2</Text>
         </View>
       </>
     ),
@@ -90,24 +85,20 @@ export const CustomColor: Story = {
         <View
           style={{
             padding: 12,
-            backgroundColor: '#1C1C1C',
+            backgroundColor: t['surface-raised'],
             borderRadius: 8,
           }}
         >
-          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>
-            Exercise A
-          </Text>
+          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>Exercise A</Text>
         </View>
         <View
           style={{
             padding: 12,
-            backgroundColor: '#1C1C1C',
+            backgroundColor: t['surface-raised'],
             borderRadius: 8,
           }}
         >
-          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>
-            Exercise B
-          </Text>
+          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>Exercise B</Text>
         </View>
       </>
     ),

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

@@ -12,7 +12,7 @@ export interface SupersetWrapperProps {
 const DEFAULTS = {
   label: 'SS',
   color: getSemanticColors('dark')['brand-primary'],
-  bgBase: '#101010',
+  bgBase: getSemanticColors('dark')['background-base'],
 } as const
 
 export function SupersetWrapper({

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

@@ -84,11 +84,7 @@ function activeNumberTone(elapsedMs: number, targetMs: number | null): string {
 }
 
 /** The active number: `countup` elapsed (→ target) or `countdown` remaining (→ 0.0, then −). */
-function liveReadoutText(
-  elapsedMs: number,
-  targetMs: number,
-  readout: TempoLiveReadout,
-): string {
+function liveReadoutText(elapsedMs: number, targetMs: number, readout: TempoLiveReadout): string {
   const seconds = readout === 'countup' ? elapsedMs / 1000 : (targetMs - elapsedMs) / 1000
   return seconds.toFixed(1)
 }
@@ -308,7 +304,7 @@ export function TempoDisplay({
       style={{
         flexDirection: 'row',
         alignItems: 'center',
-        backgroundColor: '#1C1C1C',
+        backgroundColor: t['surface-raised'],
         paddingHorizontal: chromePadX,
         paddingVertical: chromePadY,
         borderRadius: chromeRadius,
@@ -378,7 +374,7 @@ export function TempoDisplay({
         >
           <View
             style={{
-              backgroundColor: '#191919',
+              backgroundColor: t['surface-overlay'],
               borderRadius: 6,
               paddingVertical: 8,
               paddingHorizontal: 12,

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

@@ -1,6 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View } from 'react-native'
 import { VolumeLandmarkBar } from './VolumeLandmarkBar'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+const t = getSemanticColors('dark')
 
 const meta: Meta<typeof VolumeLandmarkBar> = {
   title: 'Workout/DataViz/VolumeLandmarkBar',
@@ -28,7 +31,7 @@ const meta: Meta<typeof VolumeLandmarkBar> = {
   },
   decorators: [
     (Story) => (
-      <View style={{ padding: 24, paddingBottom: 40, backgroundColor: '#101010' }}>
+      <View style={{ padding: 24, paddingBottom: 40, backgroundColor: t['background-base'] }}>
         <Story />
       </View>
     ),

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

@@ -26,7 +26,7 @@ const statusBgColors: Record<WorkoutPillStatus, string> = {
   completed: 'rgba(46,213,115,0.15)',
   current: 'rgba(255,121,0,0.15)',
   next: 'transparent',
-  upcoming: '#1C1C1C',
+  upcoming: t['surface-raised'],
   missed: 'rgba(209,67,67,0.1)',
   deload: 'rgba(186,41,150,0.15)',
 }
@@ -72,7 +72,7 @@ function usePulse(enabled: boolean) {
           easing: Easing.inOut(Easing.ease),
           useNativeDriver: true,
         }),
-      ]),
+      ])
     )
     animation.start()
 

package/src/components/shell/DashboardShell.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react'
 import { View, Text } from 'react-native'
 import { cn } from '../../utils/cn'
+import { Surface } from '../ui/surface'
 import { SideNav, type SideNavItem } from './SideNav'
 import { TopBar } from './TopBar'
 import { type Device } from './DeviceRow'
@@ -60,13 +61,15 @@ export function DashboardShell({
   return (
     // Column: the TopBar spans the FULL width across the top, and the SideNav sits BELOW it
     // in the content row (not a full-height left rail). This keeps the brand/status band
-    // unbroken edge-to-edge and lets the nav align under it.
-    <View className={cn('flex-1 bg-surface-base', className)}>
+    // unbroken edge-to-edge and lets the nav align under it. The shell is the outermost
+    // Surface — it owns the base plane and seeds the on-surface colour context (mode) for
+    // the whole dashboard tree.
+    <Surface level="base" className={cn('flex-1', className)}>
       <TopBar state={state} devices={devices} subtitle={subtitle} onSelectDevice={onSelectDevice} />
       <View className="flex-1 flex-row">
         <SideNav activeKey={activeKey} items={navItems} liveKey={liveKey} onNavigate={onNavigate} />
         <View className="flex-1">{children ?? <ContentPlaceholder />}</View>
       </View>
-    </View>
+    </Surface>
   )
 }