@titan-design/react-ui 0.13.0 → 0.14.0

package/src/components/ui/indicator/Indicator.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View } from 'react-native'
 import { Indicator } from './Indicator'
+import { primitiveRamps } from '../../../theme/tokens/primitives'
 
 const meta: Meta<typeof Indicator> = {
   title: 'Components/Atoms/Indicator',
@@ -69,9 +70,9 @@ export const WithRing: Story = {
 export const CustomColor: Story = {
   render: () => (
     <View className="flex-row gap-4 items-center">
-      <Indicator size="md" customColor="#FF6B6B" />
-      <Indicator size="md" customColor="#4ECDC4" />
-      <Indicator size="md" customColor="#45B7D1" glow />
+      <Indicator size="md" customColor={primitiveRamps.red[400]} />
+      <Indicator size="md" customColor={primitiveRamps.cyan[300]} />
+      <Indicator size="md" customColor={primitiveRamps.blue[400]} glow />
     </View>
   ),
 }

package/src/components/ui/list-item/ListItem.stories.tsx

@@ -7,6 +7,7 @@ import {
   ListItemTrailing,
   ListItemDivider,
 } from './ListItem'
+import { greyRamp } from '../../../theme/tokens/primitives'
 
 function UserIcon({ size = 20 }: { size?: number; className?: string }) {
   return (
@@ -15,12 +16,14 @@ function UserIcon({ size = 20 }: { size?: number; className?: string }) {
         width: size,
         height: size,
         borderRadius: size / 2,
-        backgroundColor: '#6366f1',
+        backgroundColor: 'var(--color-avatar-background)',
         justifyContent: 'center',
         alignItems: 'center',
       }}
     >
-      <Text style={{ color: '#fff', fontSize: size * 0.5, fontWeight: '600' }}>U</Text>
+      <Text style={{ color: 'var(--color-avatar-text)', fontSize: size * 0.5, fontWeight: '600' }}>
+        U
+      </Text>
     </View>
   )
 }
@@ -50,7 +53,7 @@ function LockIcon({ size = 20 }: { size?: number; className?: string }) {
 }
 
 function ChevronRight({ size = 16 }: { size?: number }) {
-  return <Text style={{ color: '#9ca3af', fontSize: size }}>{'>'}</Text>
+  return <Text style={{ color: greyRamp[400], fontSize: size }}>{'>'}</Text>
 }
 
 const meta: Meta<typeof ListItem> = {
@@ -133,7 +136,7 @@ export const SettingsList: Story = {
         <ListItemIcon icon={WifiIcon} />
         <ListItemContent title="Wi-Fi" subtitle="HomeNetwork" />
         <ListItemTrailing>
-          <Text style={{ color: '#22c55e', fontSize: 12 }}>Connected</Text>
+          <Text style={{ color: 'var(--color-status-success)', fontSize: 12 }}>Connected</Text>
         </ListItemTrailing>
       </ListItem>
     </View>

package/src/components/ui/modal/Modal.tsx

@@ -92,6 +92,8 @@ export function Modal({
       onPress={handleBackdropPress}
       className={cn(
         'flex-1 items-center justify-center',
+        // VW-82: scrims stay raw — Tailwind v3 drops the `/n` modifier on a
+        // `var()` colour, so a translucent role has to be its own token (proposed).
         backdropBlur ? 'bg-black/30 web:backdrop-blur-sm' : 'bg-black/50',
         backdropClassName
       )}

package/src/components/ui/pill/Pill.stories.tsx

@@ -2,6 +2,8 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View } from 'react-native'
 import { Pill } from './Pill'
 import { Indicator } from '../indicator'
+import { Surface } from '../surface'
+import { Typography } from '../../custom/Typography'
 
 const meta: Meta<typeof Pill> = {
   title: 'Components/Atoms/Pill',
@@ -54,6 +56,57 @@ export const AllTones: Story = {
   ),
 }
 
+/**
+ * The same row on both planes a subtle pill actually lands on. A `-subtle` fill is
+ * alpha, so it composites against whatever is behind it: the raised card lifts every
+ * capsule and costs each label contrast. It is the harder case and the one AW-133 is
+ * measured against, so judge the tone weight here, not only on the page plane.
+ */
+export const OnBothPlanes: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Page plane (`grey-925`) above, raised card (`grey-875`) below. Every tone loses ' +
+          'roughly 0.8-1.0 of contrast ratio on the card. `brand` is the deliberate exception ' +
+          'from AW-133 — its label stays the exact `orange[400]` brand hue rather than ' +
+          'levelling with the other five, which leaves it the one tone under AA here.',
+      },
+    },
+  },
+  render: () => (
+    <View className="gap-4">
+      <View className="gap-2">
+        <Typography variant="caption" color="tertiary">
+          page plane · grey-925
+        </Typography>
+        <View className="flex-row gap-2 flex-wrap">
+          <Pill tone="brand">Brand</Pill>
+          <Pill tone="brand-secondary">Accent</Pill>
+          <Pill tone="success">Success</Pill>
+          <Pill tone="warning">Warning</Pill>
+          <Pill tone="error">Error</Pill>
+          <Pill tone="info">Info</Pill>
+        </View>
+      </View>
+
+      <Surface level="raised" className="gap-2 rounded-xl border-hairline p-4">
+        <Typography variant="caption" color="tertiary">
+          raised card · grey-875
+        </Typography>
+        <View className="flex-row gap-2 flex-wrap">
+          <Pill tone="brand">Brand</Pill>
+          <Pill tone="brand-secondary">Accent</Pill>
+          <Pill tone="success">Success</Pill>
+          <Pill tone="warning">Warning</Pill>
+          <Pill tone="error">Error</Pill>
+          <Pill tone="info">Info</Pill>
+        </View>
+      </Surface>
+    </View>
+  ),
+}
+
 export const AllSizes: Story = {
   render: () => (
     <View className="flex-row gap-2 items-center">

package/src/components/ui/pill/Pill.tsx

@@ -83,13 +83,17 @@ const toneStyles: Record<PillVariant, Record<PillTone, string>> = {
     // host is, and an alpha fill composites by the same amount on all of them.
     // A `surface-*` fill would vanish on the plane it names. Borderless like the
     // six coloured tones — the fill carries the capsule, not a ring.
+    // Label comes from `on-*-subtle`, not the base tone token: the base is tuned to
+    // carry a white label as a solid fill, which left error and accent unreadable
+    // here (AW-133). The on-subtle tokens level the family at one weight.
     neutral: 'bg-hairline-subtle border-transparent text-text-secondary',
-    brand: 'bg-brand-primary-subtle border-transparent text-brand-primary',
-    'brand-secondary': 'bg-brand-secondary-subtle border-transparent text-brand-secondary',
-    success: 'bg-status-success-subtle border-transparent text-status-success',
-    warning: 'bg-status-warning-subtle border-transparent text-status-warning',
-    error: 'bg-status-error-subtle border-transparent text-status-error',
-    info: 'bg-status-info-subtle border-transparent text-status-info',
+    brand: 'bg-brand-primary-subtle border-transparent text-on-brand-primary-subtle',
+    'brand-secondary':
+      'bg-brand-secondary-subtle border-transparent text-on-brand-secondary-subtle',
+    success: 'bg-status-success-subtle border-transparent text-on-status-success-subtle',
+    warning: 'bg-status-warning-subtle border-transparent text-on-status-warning-subtle',
+    error: 'bg-status-error-subtle border-transparent text-on-status-error-subtle',
+    info: 'bg-status-info-subtle border-transparent text-on-status-info-subtle',
   },
   outline: {
     neutral: 'border-hairline text-text-secondary',

package/src/components/ui/popover/Popover.stories.tsx

@@ -160,7 +160,7 @@ export const WithFormContent: Story = {
               </View>
             </PopoverCloseButton>
             <View className="px-3 py-1.5 rounded-md bg-brand-primary">
-              <Text className="text-white text-sm font-medium">Save</Text>
+              <Text className="text-on-brand-primary text-sm font-medium">Save</Text>
             </View>
           </View>
         </View>

package/src/components/ui/progress/Progress.tsx

@@ -56,13 +56,16 @@ const colorStyles: Record<ProgressColor, string> = {
   info: 'bg-status-info',
 }
 
+// `-muted` rather than `-subtle`: the track is structural — it has to show the
+// bar's full extent behind the fill — and the lightest rung disappears on the
+// dark base. Replaces a `/20` modifier that emitted no rule (VW-308).
 const trackColorStyles: Record<ProgressColor, string> = {
-  primary: 'bg-brand-primary/20',
-  secondary: 'bg-brand-secondary/20',
-  success: 'bg-status-success/20',
-  error: 'bg-status-error/20',
-  warning: 'bg-status-warning/20',
-  info: 'bg-status-info/20',
+  primary: 'bg-brand-primary-muted',
+  secondary: 'bg-brand-secondary-muted',
+  success: 'bg-status-success-muted',
+  error: 'bg-status-error-muted',
+  warning: 'bg-status-warning-muted',
+  info: 'bg-status-info-muted',
 }
 
 /**

package/src/components/ui/radio/Radio.tsx

@@ -191,7 +191,7 @@ export function Radio({
         )}
       >
         {/* Inner dot */}
-        {isChecked && <View className={cn('rounded-full bg-white', inner)} />}
+        {isChecked && <View className={cn('rounded-full bg-on-brand-primary', inner)} />}
       </View>
 
       {/* Label */}

package/src/components/ui/section/Section.stories.tsx

@@ -16,7 +16,7 @@ export const Default: Story = {
     <Section>
       <SectionHeader title="Recent Workouts" />
       <SectionContent>
-        <Text style={{ color: '#a0a0a0' }}>Workout items would go here</Text>
+        <Text style={{ color: 'var(--color-text-secondary)' }}>Workout items would go here</Text>
       </SectionContent>
     </Section>
   ),
@@ -27,7 +27,7 @@ export const WithSubtitle: Story = {
     <Section>
       <SectionHeader title="Workout Stats" subtitle="Last 7 days" />
       <SectionContent>
-        <Text style={{ color: '#a0a0a0' }}>Stats content</Text>
+        <Text style={{ color: 'var(--color-text-secondary)' }}>Stats content</Text>
       </SectionContent>
     </Section>
   ),
@@ -38,10 +38,10 @@ export const WithTrailingAction: Story = {
     <Section>
       <SectionHeader
         title="Exercises"
-        trailing={<Text style={{ color: '#6366f1', fontSize: 13 }}>View All</Text>}
+        trailing={<Text style={{ color: 'var(--color-text-link)', fontSize: 13 }}>View All</Text>}
       />
       <SectionContent>
-        <Text style={{ color: '#a0a0a0' }}>Exercise list</Text>
+        <Text style={{ color: 'var(--color-text-secondary)' }}>Exercise list</Text>
       </SectionContent>
     </Section>
   ),
@@ -53,10 +53,10 @@ export const FullExample: Story = {
       <SectionHeader
         title="Performance"
         subtitle="Average velocity by set"
-        trailing={<Text style={{ color: '#6366f1', fontSize: 13 }}>Details</Text>}
+        trailing={<Text style={{ color: 'var(--color-text-link)', fontSize: 13 }}>Details</Text>}
       />
       <SectionContent className="rounded-lg bg-surface-elevated p-4">
-        <Text style={{ color: '#a0a0a0' }}>Chart or data visualization</Text>
+        <Text style={{ color: 'var(--color-text-secondary)' }}>Chart or data visualization</Text>
       </SectionContent>
     </Section>
   ),
@@ -68,7 +68,7 @@ export const MultipleSections: Story = {
       <Section>
         <SectionHeader title="Today" subtitle="3 exercises" />
         <SectionContent className="rounded-lg bg-surface-elevated p-4">
-          <Text style={{ color: '#a0a0a0' }}>Today&apos;s workout data</Text>
+          <Text style={{ color: 'var(--color-text-secondary)' }}>Today&apos;s workout data</Text>
         </SectionContent>
       </Section>
 
@@ -76,17 +76,17 @@ export const MultipleSections: Story = {
         <SectionHeader
           title="This Week"
           subtitle="12 sets completed"
-          trailing={<Text style={{ color: '#6366f1', fontSize: 13 }}>See All</Text>}
+          trailing={<Text style={{ color: 'var(--color-text-link)', fontSize: 13 }}>See All</Text>}
         />
         <SectionContent className="rounded-lg bg-surface-elevated p-4">
-          <Text style={{ color: '#a0a0a0' }}>Weekly summary</Text>
+          <Text style={{ color: 'var(--color-text-secondary)' }}>Weekly summary</Text>
         </SectionContent>
       </Section>
 
       <Section>
         <SectionHeader title="Personal Records" />
         <SectionContent className="rounded-lg bg-surface-elevated p-4">
-          <Text style={{ color: '#a0a0a0' }}>PR list</Text>
+          <Text style={{ color: 'var(--color-text-secondary)' }}>PR list</Text>
         </SectionContent>
       </Section>
     </View>

package/src/components/ui/select/Select.tsx

@@ -140,6 +140,7 @@ export function Select<T extends string = string>({
           accessibilityState={{ expanded: isOpen, disabled: isDisabled }}
           className={cn(
             'flex-row items-center justify-between px-4 py-2.5 rounded-md border',
+            // VW-82: scrim-style fill, left raw (see Modal.tsx).
             variant === 'filled' ? 'bg-black/30' : 'bg-surface-base',
             isInvalid
               ? 'border-border-input-error'
@@ -227,7 +228,7 @@ function SelectOption<T>({ option }: SelectOptionComponentProps<T>) {
             selected ? 'bg-brand-primary border-brand-primary' : 'border-hairline-strong'
           )}
         >
-          {selected && <Text className="text-white text-xs text-center">✓</Text>}
+          {selected && <Text className="text-on-brand-primary text-xs text-center">✓</Text>}
         </View>
       )}
       <Text

package/src/components/ui/spinner/Spinner.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { ActivityIndicator, View, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
 import { SPINNER_PRIMARY, SPINNER_SECONDARY } from '../../../theme/extracted-colors-ui'
+import { primitiveColors } from '../../../theme/tokens/primitives'
 
 export type SpinnerSize = 'sm' | 'md' | 'lg' | 'xl'
 export type SpinnerColor = 'primary' | 'secondary' | 'white' | 'default'
@@ -27,7 +28,8 @@ const sizeMap: Record<SpinnerSize, 'small' | 'large'> = {
 const colorMap: Record<SpinnerColor, string> = {
   primary: SPINNER_PRIMARY,
   secondary: SPINNER_SECONDARY,
-  white: '#FFFFFF',
+  white: primitiveColors.white,
+  // VW-82: Tailwind gray-500; no titan grey matches. Left raw, proposed in the PR.
   default: '#6B7280',
 }
 

package/src/components/ui/stack/Stack.stories.tsx

@@ -35,7 +35,7 @@ type Story = StoryObj<typeof Stack>
 function Box({ children }: { children: string }) {
   return (
     <View className="rounded bg-brand-primary px-4 py-2">
-      <Text className="text-sm text-white">{children}</Text>
+      <Text className="text-sm text-on-brand-primary">{children}</Text>
     </View>
   )
 }
@@ -76,23 +76,23 @@ export const Vertical: Story = {
 export const WithAlignment: Story = {
   render: () => (
     <VStack gap={6}>
-      <Text className="text-sm font-medium text-neutral-400">justify=&quot;between&quot;</Text>
+      <Text className="text-sm font-medium text-text-secondary">justify=&quot;between&quot;</Text>
       <HStack gap={2} justify="between" className="w-full">
         <Box>A</Box>
         <Box>B</Box>
         <Box>C</Box>
       </HStack>
 
-      <Text className="text-sm font-medium text-neutral-400">align=&quot;center&quot;</Text>
+      <Text className="text-sm font-medium text-text-secondary">align=&quot;center&quot;</Text>
       <HStack gap={2} align="center">
         <View className="rounded bg-brand-primary px-4 py-1">
-          <Text className="text-sm text-white">Short</Text>
+          <Text className="text-sm text-on-brand-primary">Short</Text>
         </View>
         <View className="rounded bg-brand-primary px-4 py-4">
-          <Text className="text-sm text-white">Tall</Text>
+          <Text className="text-sm text-on-brand-primary">Tall</Text>
         </View>
         <View className="rounded bg-brand-primary px-4 py-2">
-          <Text className="text-sm text-white">Medium</Text>
+          <Text className="text-sm text-on-brand-primary">Medium</Text>
         </View>
       </HStack>
     </VStack>
@@ -114,7 +114,7 @@ export const GapScale: Story = {
     <VStack gap={6}>
       {([0, 1, 2, 4, 6, 8, 12] as const).map((g) => (
         <VStack key={g} gap={1}>
-          <Text className="text-xs text-neutral-400">gap={g}</Text>
+          <Text className="text-xs text-text-secondary">gap={g}</Text>
           <HStack gap={g}>
             <Box>A</Box>
             <Box>B</Box>

package/src/components/ui/surface/Surface.stories.tsx

@@ -3,6 +3,8 @@ import { View, Text } from 'react-native'
 import { Surface } from './Surface'
 import { useOnSurfaceColor, type SurfaceLevel } from './SurfaceContext'
 import type { ElevationLevel } from '../../../theme/elevation'
+import { semanticColorsLight, semanticColorsDark } from '../../../theme/tokens/semantic'
+import { primitiveRamps } from '../../../theme/tokens/primitives'
 
 const meta: Meta<typeof Surface> = {
   title: 'Components/Atoms/Surface',
@@ -56,11 +58,18 @@ export const Default: Story = {
     elevation: 2,
     theme: 'dark',
   },
-  render: (args) => (
-    <Surface {...args} style={{ padding: 24 }}>
-      <Text style={{ color: '#fff' }}>Default Surface</Text>
-    </Surface>
-  ),
+  render: function Render(args) {
+    return (
+      <Surface {...args} style={{ padding: 24 }}>
+        <Text style={{ color: useOnSurfaceColor('primary') }}>Default Surface</Text>
+      </Surface>
+    )
+  },
+}
+
+/** On-surface elevation label — resolves from whichever Surface encloses it. */
+function ElevationLabel({ level }: { level: ElevationLevel }) {
+  return <Text style={{ color: useOnSurfaceColor('primary') }}>Elevation {level}</Text>
 }
 
 // Every level is a ramp plane. Negative levels recess, 0 sits flat on the page,
@@ -71,7 +80,7 @@ export const ElevationLevels: Story = {
     <Surface level="base" style={{ gap: 16, padding: 24 }}>
       {([-2, -1, 0, 1, 2, 3, 4, 5] as ElevationLevel[]).map((level) => (
         <Surface key={level} elevation={level} style={{ padding: 16 }}>
-          <Text style={{ color: '#fff' }}>Elevation {level}</Text>
+          <ElevationLabel level={level} />
         </Surface>
       ))}
     </Surface>
@@ -79,25 +88,58 @@ export const ElevationLevels: Story = {
 }
 
 export const WithGlow: Story = {
-  render: () => (
-    <View style={{ gap: 16, padding: 24 }}>
-      <Surface elevation={2} glowColor="#FF7900" glowIntensity="subtle" style={{ padding: 16 }}>
-        <Text style={{ color: '#fff' }}>Subtle Orange Glow</Text>
-      </Surface>
-      <Surface elevation={2} glowColor="#FF7900" glowIntensity="medium" style={{ padding: 16 }}>
-        <Text style={{ color: '#fff' }}>Medium Orange Glow</Text>
-      </Surface>
-      <Surface elevation={2} glowColor="#FF7900" glowIntensity="strong" style={{ padding: 16 }}>
-        <Text style={{ color: '#fff' }}>Strong Orange Glow</Text>
-      </Surface>
-      <Surface elevation={2} glowColor="#22C55E" glowIntensity="medium" style={{ padding: 16 }}>
-        <Text style={{ color: '#fff' }}>Green Glow (Success)</Text>
-      </Surface>
-      <Surface elevation={2} glowColor="#EF4444" glowIntensity="medium" style={{ padding: 16 }}>
-        <Text style={{ color: '#fff' }}>Red Glow (Error)</Text>
-      </Surface>
-    </View>
-  ),
+  render: function Render() {
+    const onSurface = useOnSurfaceColor('primary')
+    return (
+      <View style={{ gap: 16, padding: 24 }}>
+        <Surface
+          elevation={2}
+          glowColor={primitiveRamps.orange[400]}
+          glowIntensity="subtle"
+          style={{ padding: 16 }}
+        >
+          <Text style={{ color: onSurface }}>Subtle Orange Glow</Text>
+        </Surface>
+        <Surface
+          elevation={2}
+          glowColor={primitiveRamps.orange[400]}
+          glowIntensity="medium"
+          style={{ padding: 16 }}
+        >
+          <Text style={{ color: onSurface }}>Medium Orange Glow</Text>
+        </Surface>
+        <Surface
+          elevation={2}
+          glowColor={primitiveRamps.orange[400]}
+          glowIntensity="strong"
+          style={{ padding: 16 }}
+        >
+          <Text style={{ color: onSurface }}>Strong Orange Glow</Text>
+        </Surface>
+        <Surface
+          elevation={2}
+          glowColor={semanticColorsDark['status-success']}
+          glowIntensity="medium"
+          style={{ padding: 16 }}
+        >
+          <Text style={{ color: onSurface }}>Green Glow (Success)</Text>
+        </Surface>
+        <Surface
+          elevation={2}
+          glowColor={semanticColorsDark['status-error']}
+          glowIntensity="medium"
+          style={{ padding: 16 }}
+        >
+          <Text style={{ color: onSurface }}>Red Glow (Error)</Text>
+        </Surface>
+      </View>
+    )
+  },
+}
+
+/** On-surface plane label — resolves from whichever Surface encloses it. */
+function NamedPlaneLabel({ level }: { level: SurfaceLevel }) {
+  return <Text style={{ color: useOnSurfaceColor('primary') }}>level=&quot;{level}&quot;</Text>
 }
 
 // The named-plane model: flat, full-bleed grey planes straight from the
@@ -108,7 +150,7 @@ export const NamedPlanes: Story = {
     <View style={{ gap: 12, padding: 24 }}>
       {(['background', 'base', 'elevated', 'raised', 'overlay'] as SurfaceLevel[]).map((level) => (
         <Surface key={level} level={level} style={{ padding: 16 }}>
-          <Text style={{ color: '#fff' }}>level=&quot;{level}&quot;</Text>
+          <NamedPlaneLabel level={level} />
         </Surface>
       ))}
     </View>
@@ -199,12 +241,17 @@ export const OnSurfaceText: Story = {
   ),
 }
 
+/** On-surface elevation label for the forced-light demo below. */
+function LightElevationLabel({ level }: { level: ElevationLevel }) {
+  return <Text style={{ color: useOnSurfaceColor('primary') }}>Light Elevation {level}</Text>
+}
+
 export const LightTheme: Story = {
   render: () => (
-    <View style={{ gap: 16, padding: 24, backgroundColor: '#F3F4F6' }}>
+    <View style={{ gap: 16, padding: 24, backgroundColor: semanticColorsLight['background-base'] }}>
       {([0, 1, 2, 3, 4, 5] as ElevationLevel[]).map((level) => (
         <Surface key={level} elevation={level} theme="light" style={{ padding: 16 }}>
-          <Text style={{ color: '#111' }}>Light Elevation {level}</Text>
+          <LightElevationLabel level={level} />
         </Surface>
       ))}
     </View>

package/src/components/ui/switch/Switch.tsx

@@ -72,7 +72,7 @@ export const Switch = forwardRef<View, SwitchProps>(function Switch(
       {/* The thumb is a raised control resting in its track: one plane of lift. */}
       <View
         className={cn(
-          'rounded-full bg-white transition-transform',
+          'rounded-full bg-on-brand-primary transition-transform',
           styles.thumb,
           isChecked && styles.translate
         )}

package/src/components/ui/tabs/Tabs.tsx

@@ -169,7 +169,9 @@ export function Tab({ index = 0, isDisabled = false, className, children }: TabP
     ),
     'soft-rounded': cn(
       'px-4 py-2 rounded-full',
-      isActive ? 'bg-brand-primary text-white' : 'text-text-secondary web:hover:text-text-primary'
+      isActive
+        ? 'bg-brand-primary text-on-brand-primary'
+        : 'text-text-secondary web:hover:text-text-primary'
     ),
   }
 
@@ -191,7 +193,7 @@ export function Tab({ index = 0, isDisabled = false, className, children }: TabP
           'font-medium',
           isActive
             ? variant === 'soft-rounded'
-              ? 'text-white'
+              ? 'text-on-brand-primary'
               : 'text-text-primary'
             : 'text-text-secondary'
         )}

package/src/components/ui/toast/Toast.tsx

@@ -157,24 +157,26 @@ interface ToastItemProps extends ToastConfig {
   onClose: () => void
 }
 
+// `-subtle` is the wash ladder's lightest rung. It replaces a `/10` opacity
+// modifier, which emitted no rule at all against a var()-backed token (VW-308).
 const statusStyles: Record<ToastStatus, { bg: string; border: string; icon: string }> = {
   success: {
-    bg: 'bg-status-success/10',
+    bg: 'bg-status-success-subtle',
     border: 'border-status-success',
     icon: '✓',
   },
   error: {
-    bg: 'bg-status-error/10',
+    bg: 'bg-status-error-subtle',
     border: 'border-status-error',
     icon: '✕',
   },
   warning: {
-    bg: 'bg-status-warning/10',
+    bg: 'bg-status-warning-subtle',
     border: 'border-status-warning',
     icon: '⚠',
   },
   info: {
-    bg: 'bg-status-info/10',
+    bg: 'bg-status-info-subtle',
     border: 'border-status-info',
     icon: 'ℹ',
   },

package/src/components/ui/toolbar-button/ToolbarButton.tsx

@@ -2,10 +2,11 @@ import React, { useState, useCallback, createContext, useContext } from 'react'
 import { View, Text, Pressable, type ViewProps, StyleSheet, Platform } from 'react-native'
 import { cn } from '../../../utils/cn'
 import { getHoverColors } from '../../../theme'
-import { greyRamp } from '../../../theme/tokens/primitives'
+import { greyRamp, primitiveColors } from '../../../theme/tokens/primitives'
 import { resolveColor } from '../../../theme/resolve-color'
 import { getPressedRecessShadow } from '../../../theme/elevation'
 import { liftStyle } from '../../../theme/lift'
+import { alpha } from '../../../utils/colors'
 import { Surface, useSurfaceMode } from '../surface'
 
 export type ToolbarButtonVariant = 'default' | 'raised'
@@ -16,6 +17,14 @@ interface ToolbarButtonContextType {
   setIsOpen: (open: boolean) => void
 }
 
+/**
+ * Idle icon/label tone. VW-82: no token resolves to this — it sits between
+ * `text-secondary` (#A29F9D) and `text-primary` (#F9F6F3) and is cooler than
+ * either, so snapping it to the warm grey ramp is a visual change awaiting the
+ * proposed `on-control-idle` role rather than a silent swap.
+ */
+const ICON_IDLE = '#D1D1D1'
+
 const ToolbarButtonContext = createContext<ToolbarButtonContextType>({
   isOpen: false,
   setIsOpen: () => {},
@@ -51,9 +60,7 @@ export interface ToolbarButtonProps extends ViewProps {
   className?: string
 }
 
-// Base button colours. These were raw `#3C3C3C`/`#2C2C2C` literals — old cold
-// charcoal steps that survived the grey migration only because they were plain
-// strings rather than scale references.
+// Base button colours.
 const BUTTON_BG = greyRamp[800]
 
 // Calculate hover colors using color math
@@ -137,7 +144,7 @@ export function ToolbarButton({
   // Determine icon color based on state
   const getIconColor = () => {
     if (isActive === true) return resolveColor('brand-primary')
-    return showActive ? '#FFFFFF' : '#D1D1D1'
+    return showActive ? primitiveColors.white : ICON_IDLE
   }
 
   /**
@@ -246,7 +253,7 @@ export function ToolbarButton({
 const styles = StyleSheet.create({
   // Disabled - flat gray background, no shadows
   disabledBg: {
-    backgroundColor: 'rgba(255, 255, 255, 0.12)',
+    backgroundColor: alpha(primitiveColors.white, 0.12),
     ...Platform.select({
       web: { boxShadow: 'none' } as any,
       default: { shadowOpacity: 0, elevation: 0 },

package/src/stories/PresetShowcase.stories.tsx

@@ -324,7 +324,7 @@ function TypographyShowcase() {
 function ColorSwatch({
   label,
   className,
-  textClass = 'text-white',
+  textClass = 'text-on-brand-primary',
 }: {
   label: string
   className: string