@titan-design/react-ui 0.12.1 → 0.14.0

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

@@ -1,10 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Treemap, type TreemapDatum } from './Treemap'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+const t = getSemanticColors('dark')
 
 const meta: Meta<typeof Treemap> = {
-  title: 'Components/DataViz/Treemap',
+  title: 'Custom/Charts/Treemap',
   component: Treemap,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:candidate', '!status:review'],
   argTypes: {
     width: { control: { type: 'range', min: 200, max: 900, step: 20 } },
     height: { control: { type: 'range', min: 120, max: 600, step: 20 } },
@@ -16,14 +19,14 @@ export default meta
 type Story = StoryObj<typeof Treemap>
 
 const sample: TreemapDatum[] = [
-  { id: 'router', value: 5035, color: '#F83030', label: 'router.ts' },
-  { id: 'engine', value: 4378, color: '#F83030', label: 'engine.ts' },
-  { id: 'linker', value: 1695, color: '#F4A736', label: 'linker.ts' },
-  { id: 'validate', value: 1288, color: '#F4A736', label: 'validate.ts' },
-  { id: 'hook', value: 1050, color: '#F4A736', label: 'hook.ts' },
-  { id: 'update', value: 890, color: '#5B9BD5', label: 'update.ts' },
-  { id: 'pool', value: 504, color: '#5B9BD5', label: 'pool.ts' },
-  { id: 'log', value: 342, color: '#5B9BD5', label: 'log.ts' },
+  { id: 'router', value: 5035, color: t['data-4'], label: 'router.ts' },
+  { id: 'engine', value: 4378, color: t['data-4'], label: 'engine.ts' },
+  { id: 'linker', value: 1695, color: t['data-6'], label: 'linker.ts' },
+  { id: 'validate', value: 1288, color: t['data-6'], label: 'validate.ts' },
+  { id: 'hook', value: 1050, color: t['data-6'], label: 'hook.ts' },
+  { id: 'update', value: 890, color: t['data-7'], label: 'update.ts' },
+  { id: 'pool', value: 504, color: t['data-7'], label: 'pool.ts' },
+  { id: 'log', value: 342, color: t['data-7'], label: 'log.ts' },
 ]
 
 export const Default: Story = {
@@ -33,7 +36,7 @@ export const Default: Story = {
 /** A single outlier under a linear scale swallows the canvas... */
 export const OutlierLinear: Story = {
   args: {
-    data: [{ id: 'mega', value: 205422, color: '#F83030', label: 'mega.ts' }, ...sample],
+    data: [{ id: 'mega', value: 205422, color: t['data-4'], label: 'mega.ts' }, ...sample],
     width: 560,
     height: 300,
     scale: 'linear',
@@ -43,7 +46,7 @@ export const OutlierLinear: Story = {
 /** ...the same data with a sqrt scale keeps every tile legible. */
 export const OutlierSqrt: Story = {
   args: {
-    data: [{ id: 'mega', value: 205422, color: '#F83030', label: 'mega.ts' }, ...sample],
+    data: [{ id: 'mega', value: 205422, color: t['data-4'], label: 'mega.ts' }, ...sample],
     width: 560,
     height: 300,
     scale: 'sqrt',

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

@@ -47,7 +47,7 @@ describe('Treemap', () => {
 
   it('assigns fallback palette colors when omitted', () => {
     const { container } = render(
-      <Treemap data={[{ id: 'x', value: 1 }]} width={100} height={100} />,
+      <Treemap data={[{ id: 'x', value: 1 }]} width={100} height={100} />
     )
     expect(container.firstChild).toBeInTheDocument()
   })

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

@@ -2,6 +2,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'
+import { primitiveColors } from '../../../theme/tokens/primitives'
 
 export interface TreemapDatum {
   /** Stable identity — returned by onPress and used as the React key. */
@@ -100,7 +101,7 @@ function squarify(data: TreemapDatum[], w: number, h: number): Rect[] {
       out.push(
         vertical
           ? { x: rx, y: along, w: thickness, h: len, datum: r.datum }
-          : { x: along, y: ry, w: len, h: thickness, datum: r.datum },
+          : { x: along, y: ry, w: len, h: thickness, datum: r.datum }
       )
       along += len
     }
@@ -143,7 +144,13 @@ export function Treemap({
     const restValue = clean.slice(maxTiles - 1).reduce((s, d) => s + d.value, 0)
     tiles = [
       ...head,
-      { id: '__more__', value: restValue, color: '#3a3a3a', label: `+${clean.length - (maxTiles - 1)} more` },
+      {
+        id: '__more__',
+        value: restValue,
+        // VW-82: no token at this value (nearest surface-overlay #373635); proposed, not swapped.
+        color: '#3a3a3a',
+        label: `+${clean.length - (maxTiles - 1)} more`,
+      },
     ]
   }
 
@@ -172,12 +179,13 @@ export function Treemap({
               borderRadius: 3,
               opacity: selected ? 1 : 0.9,
               borderWidth: selected ? 2 : 0,
-              borderColor: '#ffffff',
+              borderColor: primitiveColors.white,
               padding: 4,
               overflow: 'hidden',
             }}
           >
             {labelFits && (
+              // VW-82: label on a data-coloured tile; no on-data token exists yet.
               <Text numberOfLines={2} className="text-[10px] font-semibold text-[#0b0b0b]">
                 {r.datum.label ?? r.datum.id}
               </Text>

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

@@ -5,7 +5,7 @@ import { Typography, Heading, Paragraph, Caption, Label, Overline } from './Typo
 const meta: Meta<typeof Typography> = {
   title: 'Foundations/Typography',
   component: Typography,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:candidate', '!status:review'],
   argTypes: {
     variant: {
       control: 'select',
@@ -25,6 +25,8 @@ const meta: Meta<typeof Typography> = {
         'button',
         'mono',
         'monoLabel',
+        'microLabel',
+        'boldLabel',
       ],
     },
     color: {
@@ -111,6 +113,31 @@ export const Mono: Story = {
   ),
 }
 
+/** The sans label pair, shown against the variants they sit between on the scale. */
+export const Labels: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <Typography variant="microLabel">microLabel — SET · PREV · REPS · LBS · RPE</Typography>
+      <Typography variant="overline">overline — 12PX FONT-BODY MICRO LABEL</Typography>
+      <Typography variant="boldLabel">boldLabel — PR e1RM</Typography>
+      <Typography variant="caption">caption — 12px font-body, regular weight</Typography>
+    </View>
+  ),
+}
+
+/** microLabel is the only 10px step; every other label variant is 12px. */
+export const MicroLabelInATableHeader: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 24 }}>
+      {['SET', 'PREV', 'REPS', 'LBS', 'RPE'].map((label) => (
+        <Typography key={label} variant="microLabel" color="tertiary">
+          {label}
+        </Typography>
+      ))}
+    </View>
+  ),
+}
+
 export const AllColors: Story = {
   render: () => (
     <View style={{ gap: 8 }}>

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

@@ -89,6 +89,40 @@ describe('Typography', () => {
     })
   })
 
+  describe('label variants', () => {
+    it('renders the microLabel variant', () => {
+      render(<Typography variant="microLabel">SET</Typography>)
+      expect(screen.getByText('SET')).toBeInTheDocument()
+    })
+
+    it('renders the boldLabel variant', () => {
+      render(<Typography variant="boldLabel">PR e1RM</Typography>)
+      expect(screen.getByText('PR e1RM')).toBeInTheDocument()
+    })
+
+    it('keeps both label variants out of the heading tree', () => {
+      render(
+        <>
+          <Typography variant="microLabel">REPS</Typography>
+          <Typography variant="boldLabel">PR Weight</Typography>
+        </>
+      )
+      expect(screen.queryByRole('heading')).not.toBeInTheDocument()
+    })
+
+    it('label variants have no accessibility violations', async () => {
+      const { container } = render(
+        <div>
+          <Typography variant="microLabel">RPE</Typography>
+          <Typography variant="boldLabel">PR Volume</Typography>
+        </div>
+      )
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+
   describe('accessibility', () => {
     it('headings have no accessibility violations', async () => {
       const { container } = render(

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

@@ -18,6 +18,8 @@ export type TypographyVariant =
   | 'button'
   | 'mono'
   | 'monoLabel'
+  | 'microLabel'
+  | 'boldLabel'
 
 export type TypographyColor =
   | 'primary'
@@ -75,6 +77,10 @@ const variantStyles: Record<TypographyVariant, string> = {
   // 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',
+  // The sans (Inter) label pair: 10px for dense table/column headers, 12px bold for
+  // badge and row labels. `overline` is the 12px font-body form of the same idea.
+  microLabel: 'font-sans text-2xs font-semibold uppercase tracking-widest leading-normal',
+  boldLabel: 'font-sans text-xs font-bold leading-normal',
 }
 
 const colorStyles: Record<TypographyColor, string> = {

package/src/components/custom/Typography/index.ts

@@ -1,11 +1,4 @@
-export {
-  Typography,
-  Heading,
-  Paragraph,
-  Caption,
-  Label,
-  Overline,
-} from './Typography'
+export { Typography, Heading, Paragraph, Caption, Label, Overline } from './Typography'
 export type {
   TypographyProps,
   TypographyVariant,

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { ActiveWorkoutPage, type ActiveWorkoutExercise } from './ActiveWorkoutPage'
 import type { SetRowProps } from './SetRow'
+import { primitiveRamps } from '../../../theme/tokens/primitives'
 
 const velocities = (base: number): number[] =>
   Array.from({ length: 8 }, (_, i) => Number((base - i * 0.03).toFixed(2)))
@@ -95,13 +96,21 @@ const exercises: ActiveWorkoutExercise[] = [
 const meta: Meta<typeof ActiveWorkoutPage> = {
   title: 'Pages/Active Workout',
   component: ActiveWorkoutPage,
-  parameters: { layout: 'fullscreen' },
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Composes **ExerciseCard** · **InputBar** · **RestTimer** · **SupersetWrapper**.',
+      },
+    },
+  },
   tags: ['autodocs'],
   args: {
     title: 'Push Day A',
     subtitle: 'Hypertrophy · Week 6 of 8',
     exercises,
-    supersets: [{ id: 'ss1', label: 'SS1', color: '#22D3EE' }],
+    supersets: [{ id: 'ss1', label: 'SS1', color: primitiveRamps.cyan[300] }],
     input: { reps: '8', weight: '195' },
     rest: { totalSeconds: 120, elapsedMs: 42_000, nextSetInfo: 'Set 3 · 8 × 195 lbs' },
   },

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

@@ -2,9 +2,13 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View, Text } from 'react-native'
 import { DumbbellIcon } from './icons'
 import { BaseBadge } from './BaseBadge'
+import { greyRamp } from '../../../theme/tokens/primitives'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+const t = getSemanticColors('dark')
 
 const meta: Meta<typeof BaseBadge> = {
-  title: 'Components/Atoms/BaseBadge',
+  title: 'Custom/Workout/BaseBadge',
   component: BaseBadge,
   tags: ['autodocs'],
   argTypes: {
@@ -17,7 +21,7 @@ const meta: Meta<typeof BaseBadge> = {
 export default meta
 type Story = StoryObj<typeof BaseBadge>
 
-const Label = ({ children, color = '#9CA3AF' }: { children: string; color?: string }) => (
+const Label = ({ children, color = greyRamp[400] }: { children: string; color?: string }) => (
   <Text
     style={{
       fontFamily: '"Space Grotesk", sans-serif',
@@ -40,14 +44,14 @@ export const Plain: Story = {
 export const Pr: Story = {
   args: {
     variant: 'pr',
-    children: <Label color="#FF7900">PR</Label>,
+    children: <Label color={t['brand-primary']}>PR</Label>,
   },
 }
 
 export const WithIcon: Story = {
   args: {
     variant: 'plain',
-    icon: <DumbbellIcon size={12} color="#9CA3AF" strokeWidth={2} />,
+    icon: <DumbbellIcon size={12} color={greyRamp[400]} strokeWidth={2} />,
     children: <Label>225 lbs</Label>,
   },
 }
@@ -56,17 +60,29 @@ export const AllVariants: Story = {
   render: () => (
     <View style={{ gap: 12 }}>
       <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
-        <BaseBadge size="sm"><Label>225 lbs</Label></BaseBadge>
-        <BaseBadge size="md"><Label>225 lbs</Label></BaseBadge>
-        <BaseBadge size="lg"><Label>225 lbs</Label></BaseBadge>
+        <BaseBadge size="sm">
+          <Label>225 lbs</Label>
+        </BaseBadge>
+        <BaseBadge size="md">
+          <Label>225 lbs</Label>
+        </BaseBadge>
+        <BaseBadge size="lg">
+          <Label>225 lbs</Label>
+        </BaseBadge>
       </View>
       <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
-        <BaseBadge variant="pr" size="sm"><Label color="#FF7900">PR</Label></BaseBadge>
-        <BaseBadge variant="pr" size="md"><Label color="#FF7900">PR</Label></BaseBadge>
-        <BaseBadge variant="pr" size="lg"><Label color="#FF7900">PR</Label></BaseBadge>
+        <BaseBadge variant="pr" size="sm">
+          <Label color={t['brand-primary']}>PR</Label>
+        </BaseBadge>
+        <BaseBadge variant="pr" size="md">
+          <Label color={t['brand-primary']}>PR</Label>
+        </BaseBadge>
+        <BaseBadge variant="pr" size="lg">
+          <Label color={t['brand-primary']}>PR</Label>
+        </BaseBadge>
       </View>
       <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
-        <BaseBadge icon={<DumbbellIcon size={12} color="#9CA3AF" strokeWidth={2} />}>
+        <BaseBadge icon={<DumbbellIcon size={12} color={greyRamp[400]} strokeWidth={2} />}>
           <Label>225 lbs</Label>
         </BaseBadge>
       </View>

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

@@ -11,12 +11,20 @@ const T = getSemanticColors('dark')
 
 describe('BaseBadge', () => {
   it('renders children', () => {
-    render(<BaseBadge testID="bb"><Text>Hello</Text></BaseBadge>)
+    render(
+      <BaseBadge testID="bb">
+        <Text>Hello</Text>
+      </BaseBadge>
+    )
     expect(screen.getByText('Hello')).toBeInTheDocument()
   })
 
   it('defaults to the plain variant border color', () => {
-    render(<BaseBadge testID="bb"><Text>x</Text></BaseBadge>)
+    render(
+      <BaseBadge testID="bb">
+        <Text>x</Text>
+      </BaseBadge>
+    )
     expect(screen.getByTestId('bb')).toHaveStyle({ borderTopColor: T['hairline-default'] })
   })
 
@@ -24,7 +32,7 @@ describe('BaseBadge', () => {
     render(
       <BaseBadge variant="pr" testID="bb">
         <Text>x</Text>
-      </BaseBadge>,
+      </BaseBadge>
     )
     expect(screen.getByTestId('bb')).toHaveStyle({
       borderTopColor: 'rgba(255, 121, 0, 0.3)',
@@ -36,14 +44,18 @@ describe('BaseBadge', () => {
       render(
         <BaseBadge icon={<View testID="my-icon" />}>
           <Text>x</Text>
-        </BaseBadge>,
+        </BaseBadge>
       )
       expect(screen.getByTestId('base-badge-icon')).toBeInTheDocument()
       expect(screen.getByTestId('my-icon')).toBeInTheDocument()
     })
 
     it('does not render an icon wrapper when no icon is provided', () => {
-      render(<BaseBadge><Text>x</Text></BaseBadge>)
+      render(
+        <BaseBadge>
+          <Text>x</Text>
+        </BaseBadge>
+      )
       expect(screen.queryByTestId('base-badge-icon')).not.toBeInTheDocument()
     })
   })
@@ -54,7 +66,7 @@ describe('BaseBadge', () => {
       render(
         <BaseBadge onPress={onPress} accessibilityLabel="Press me">
           <Text>x</Text>
-        </BaseBadge>,
+        </BaseBadge>
       )
       const pressable = screen.getByTestId('base-badge-pressable')
       fireEvent.click(pressable)
@@ -62,7 +74,11 @@ describe('BaseBadge', () => {
     })
 
     it('does not render a Pressable when onPress is omitted', () => {
-      render(<BaseBadge><Text>x</Text></BaseBadge>)
+      render(
+        <BaseBadge>
+          <Text>x</Text>
+        </BaseBadge>
+      )
       expect(screen.queryByTestId('base-badge-pressable')).not.toBeInTheDocument()
     })
 
@@ -70,7 +86,7 @@ describe('BaseBadge', () => {
       render(
         <BaseBadge onPress={() => {}} accessibilityLabel="Press me">
           <Text>x</Text>
-        </BaseBadge>,
+        </BaseBadge>
       )
       expect(screen.getByRole('button')).toBeInTheDocument()
     })
@@ -78,7 +94,11 @@ describe('BaseBadge', () => {
 
   describe('size', () => {
     it.each(['sm', 'md', 'lg'] as const)('renders %s size', (size) => {
-      render(<BaseBadge size={size} testID="bb"><Text>x</Text></BaseBadge>)
+      render(
+        <BaseBadge size={size} testID="bb">
+          <Text>x</Text>
+        </BaseBadge>
+      )
       expect(screen.getByTestId('bb')).toBeInTheDocument()
     })
   })
@@ -88,7 +108,7 @@ describe('BaseBadge', () => {
       const { container } = render(
         <BaseBadge accessibilityLabel="Static badge">
           <Text>x</Text>
-        </BaseBadge>,
+        </BaseBadge>
       )
       const results = await axe(container)
       expect(results).toHaveNoViolations()
@@ -98,7 +118,7 @@ describe('BaseBadge', () => {
       const { container } = render(
         <BaseBadge onPress={() => {}} accessibilityLabel="Pressable badge">
           <Text>x</Text>
-        </BaseBadge>,
+        </BaseBadge>
       )
       const results = await axe(container)
       expect(results).toHaveNoViolations()

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

@@ -2,6 +2,7 @@
 import { useState, type ReactNode } from 'react'
 import { View, Pressable, Animated, type ViewProps } from 'react-native'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { alpha } from '../../../utils/colors'
 
 const t = getSemanticColors('dark')
 
@@ -32,11 +33,14 @@ export const baseBadgeSizeConfig: Record<
 const variantColors: Record<BaseBadgeVariant, { backgroundColor: string; borderColor: string }> = {
   plain: { backgroundColor: t['surface-raised'], borderColor: t['hairline-default'] },
   pr: {
-    backgroundColor: 'rgba(255, 121, 0, 0.12)',
-    borderColor: 'rgba(255, 121, 0, 0.3)',
+    backgroundColor: alpha(t['brand-primary'], 0.12),
+    borderColor: alpha(t['brand-primary'], 0.3),
   },
 }
 
+/**
+ * @deprecated Use `<Pill tone="…" variant="…">` — removed after AW-127 consumer migration.
+ */
 export function BaseBadge({
   variant = 'plain',
   size = 'md',

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

@@ -51,8 +51,11 @@ const backData: BodyMapData[] = [
 ]
 
 const meta: Meta<typeof BodyMap> = {
-  title: 'Workout/DataViz/BodyMap',
+  title: 'Custom/Workout/DataViz/BodyMap',
   component: BodyMap,
+  parameters: {
+    docs: { description: { component: 'Composes **MuscleGroup** · **SimpleMuscleGroup**.' } },
+  },
   tags: ['autodocs'],
   argTypes: {
     view: { control: 'inline-radio', options: ['front', 'back'] },

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

@@ -5,6 +5,9 @@ import BodyHighlighter, { type ExtendedBodyPart, type Slug } from 'react-native-
 import { cn } from '../../../utils/cn'
 import { resolveColor } from '../../../theme/resolve-color'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { primitiveColors } from '../../../theme/tokens/primitives'
+import { alpha } from '../../../utils/colors'
+import { getGlowShadow } from '../../../theme/elevation'
 import {
   MuscleGroup,
   SimpleMuscleGroup,
@@ -28,8 +31,8 @@ const Body = ((BodyHighlighter as unknown as { default?: 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 OUTLINE_FILL = alpha(primitiveColors.white, 0.08)
+const OUTLINE_BORDER = alpha(primitiveColors.white, 0.12)
 const BODY_SCALE = 0.8 // 200x400 intrinsic -> ~160x320 px
 
 export interface BodyMapData {
@@ -197,7 +200,8 @@ export function BodyMap({
             alignSelf: 'center',
             transform: [{ scale }],
           },
-          glowColor ? { boxShadow: `0 0 14px 2px ${glowColor}` } : undefined,
+          // The highlight halo is emphasis, not depth.
+          glowColor ? getGlowShadow(glowColor, 'medium') : undefined,
         ]}
         // The SVG is decorative; the accessible muscle legend below is the
         // screen-reader / keyboard interface.
@@ -276,7 +280,7 @@ function ViewToggle({ view, onViewChange }: ViewToggleProps) {
               paddingHorizontal: 12,
               paddingVertical: 4,
               borderRadius: 9999,
-              backgroundColor: active ? 'rgba(255,121,0,0.16)' : 'transparent',
+              backgroundColor: active ? alpha(BRAND_PRIMARY, 0.16) : 'transparent',
               borderWidth: 1,
               borderColor: active ? BRAND_PRIMARY : resolveColor('hairline-strong'),
             }}

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

@@ -7,6 +7,11 @@ import {
   type UpcomingExercise,
 } from './BodyMapDetailPanel'
 import { MuscleGroup } from './muscleTaxonomy'
+import { Surface } from '../../ui/surface'
+import { primitiveColors } from '../../../theme/tokens/primitives'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+const t = getSemanticColors('dark')
 
 const contributing: ContributingExercise[] = [
   { name: 'Barbell Bench Press', sets: 4, contributionWeight: 1 },
@@ -21,14 +26,17 @@ const upcoming: UpcomingExercise[] = [
 ]
 
 const meta: Meta<typeof BodyMapDetailPanel> = {
-  title: 'Workout/DataViz/BodyMapDetailPanel',
+  title: 'Custom/Workout/DataViz/BodyMapDetailPanel',
   component: BodyMapDetailPanel,
+  parameters: {
+    docs: { description: { component: 'Composes **Badge** · **Sparkline** · **MuscleGroup**.' } },
+  },
   tags: ['autodocs'],
   decorators: [
     (Story) => (
-      <View style={{ position: 'relative', height: 640, width: 380, backgroundColor: '#0E0E0E' }}>
+      <Surface level="base" style={{ position: 'relative', height: 640, width: 380 }}>
         <Story />
-      </View>
+      </Surface>
     ),
   ],
   argTypes: {
@@ -132,19 +140,33 @@ export const WithoutUpcoming: Story = {
 function InteractiveBodyMapDetailPanel() {
   const [open, setOpen] = useState(false)
   return (
-    <View style={{ position: 'relative', height: 640, width: 380, backgroundColor: '#0E0E0E', padding: 16 }}>
+    <View
+      style={{
+        position: 'relative',
+        height: 640,
+        width: 380,
+        backgroundColor: t['background-frame'],
+        padding: 16,
+      }}
+    >
       <Pressable
         onPress={() => setOpen(true)}
         accessibilityRole="button"
         style={{
           alignSelf: 'flex-start',
-          backgroundColor: '#FF7900',
+          backgroundColor: t['brand-primary'],
           paddingVertical: 10,
           paddingHorizontal: 20,
           borderRadius: 8,
         }}
       >
-        <Text style={{ color: '#FFFFFF', fontWeight: '700', fontFamily: 'Inter, sans-serif' }}>
+        <Text
+          style={{
+            color: primitiveColors.white,
+            fontWeight: '700',
+            fontFamily: 'Inter, sans-serif',
+          }}
+        >
           Tap Chest
         </Text>
       </Pressable>