@titan-design/react-ui 0.12.0 → 0.13.0

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View, Text } from 'react-native'
 import { SetStrip, type SetStripSet } from './SetStrip'
+import { Surface } from '../../ui/surface'
 
 /**
  * `SetStrip` — the per-set segmented performance strip. One continuous bar per
@@ -9,7 +10,7 @@ import { SetStrip, type SetStripSet } from './SetStrip'
  * amber-300 · green-300).
  */
 const meta: Meta<typeof SetStrip> = {
-  title: 'Workout/SetStrip',
+  title: 'Custom/Workout/SetStrip',
   component: SetStrip,
   tags: ['autodocs'],
   parameters: {
@@ -18,8 +19,8 @@ const meta: Meta<typeof SetStrip> = {
         component:
           '**Molecule.** The per-set segmented performance strip — one bar per set, rep ' +
           'intensities as butted ramp-pin segments (no rep gaps), active set pulses. Composes ' +
-          '[SetBar](?path=/docs/workout-setbar--docs) × N. ' +
-          'Used-by ↑ [ExerciseCardHeading](?path=/docs/workout-exercisecardheading--docs).',
+          '[SetBar](?path=/docs/custom-workout-setbar--docs) × N. ' +
+          'Used-by ↑ [ExerciseCardHeading](?path=/docs/custom-workout-exercisecardheading--docs).',
       },
     },
   },
@@ -28,9 +29,9 @@ const meta: Meta<typeof SetStrip> = {
   },
   decorators: [
     (Story) => (
-      <View style={{ width: 210, padding: 16, backgroundColor: '#131313' }}>
+      <Surface level="base" style={{ width: 210, padding: 16 }}>
         <Story />
-      </View>
+      </Surface>
     ),
   ],
 }
@@ -78,6 +79,60 @@ export const ShortStrip: Story = {
   },
 }
 
+// ---- prescribed rep range (VMCP-03.04) — optional on `todo`/`active` only
+
+export const RepRange: Story = {
+  args: {
+    height: 8,
+    sets: [
+      { status: 'done', velocities: decay(8, 0.9) },
+      { status: 'active', velocities: decay(3, 0.75), planned: 8, repsLow: 8, repsHigh: 12 },
+      { status: 'todo', planned: 8, repsLow: 8, repsHigh: 12 },
+    ],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "The plan's prescribed rep RANGE (VMCP-03.04): `8–12` on the active and todo sets. " +
+          "Independent of the `range` set-type's value range (isokinetic bands).",
+      },
+    },
+  },
+}
+
+export const RepRangeSingleNumber: Story = {
+  args: {
+    height: 8,
+    sets: [
+      { status: 'active', velocities: decay(3, 0.75), planned: 8, repsLow: 8, repsHigh: 8 },
+      { status: 'todo', planned: 8, repsLow: 8 },
+    ],
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Equal bounds (or only one given) collapse to a single number: `8`, not `8–8`.',
+      },
+    },
+  },
+}
+
+export const RepRangeAbsent: Story = {
+  args: {
+    height: 8,
+    sets: [
+      { status: 'active', velocities: decay(3, 0.75), planned: 8 },
+      { status: 'todo', planned: 8 },
+    ],
+  },
+  parameters: {
+    docs: {
+      description: { story: 'No prescription on the set — no label renders (the default today).' },
+    },
+  },
+}
+
 // ---- set-type variant sheet: every variant at the real rail width, for eyeballing
 function SheetRow({ label, meta, sets }: { label: string; meta: string; sets: SetStripSet[] }) {
   return (

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

@@ -94,6 +94,31 @@ describe('SetStrip', () => {
     expect(screen.getAllByTestId('set-strip-set')).toHaveLength(2)
   })
 
+  describe('prescribed rep range (VMCP-03.04)', () => {
+    it('todo: renders the range when both bounds are given', () => {
+      render(<SetStrip sets={[{ status: 'todo', planned: 10, repsLow: 8, repsHigh: 12 }]} />)
+      expect(screen.getByTestId('set-strip-reps-label')).toHaveTextContent('8–12')
+    })
+
+    it('active: renders a single number when the bounds are equal or only one is given', () => {
+      const { rerender } = render(
+        <SetStrip
+          sets={[{ status: 'active', velocities: [0.9], planned: 8, repsLow: 8, repsHigh: 8 }]}
+        />
+      )
+      expect(screen.getByTestId('set-strip-reps-label')).toHaveTextContent('8')
+      rerender(
+        <SetStrip sets={[{ status: 'active', velocities: [0.9], planned: 8, repsLow: 8 }]} />
+      )
+      expect(screen.getByTestId('set-strip-reps-label')).toHaveTextContent('8')
+    })
+
+    it('renders no label when neither bound is given', () => {
+      render(<SetStrip sets={[{ status: 'todo', planned: 10 }]} />)
+      expect(screen.queryByTestId('set-strip-reps-label')).not.toBeInTheDocument()
+    })
+  })
+
   describe('accessibility', () => {
     it('has no accessibility violations', async () => {
       const sets: SetStripSet[] = [

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

@@ -1,6 +1,7 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
-import { View, type ViewProps } from 'react-native'
+import { View, Text, type ViewProps } from 'react-native'
 import { SetBar, type SetStripSet } from './SetBar'
+import { formatRepsRange } from '../../../utils/workout-format'
 
 // Re-exported so the per-set colour vocabulary stays importable from either the
 // molecule (SetStrip) or the atom (SetBar) it now lives in.
@@ -40,6 +41,12 @@ function describeSets(sets: SetStripSet[]): string {
   return `Set progress: ${done} done, ${active} in progress, ${upcoming} upcoming`
 }
 
+/** The prescribed rep-range label for a `todo`/`active` set, or `null` when unset. */
+function repsRangeLabel(set: SetStripSet): string | null {
+  if (set.status !== 'todo' && set.status !== 'active') return null
+  return formatRepsRange(set.repsLow, set.repsHigh)
+}
+
 export interface SetStripProps extends ViewProps {
   /** Per-set performance data, in set order. */
   sets: SetStripSet[]
@@ -63,9 +70,22 @@ export function SetStrip({ sets, height = 8, className, ...props }: SetStripProp
       testID="set-strip"
       {...props}
     >
-      {sets.map((set, i) => (
-        <SetBar key={i} set={set} height={height} />
-      ))}
+      {sets.map((set, i) => {
+        const label = repsRangeLabel(set)
+        if (label == null) return <SetBar key={i} set={set} height={height} />
+        return (
+          <View key={i} style={{ flex: 1, minWidth: 0, position: 'relative' }}>
+            <Text
+              className="text-text-secondary text-2xs font-semibold text-center"
+              style={{ position: 'absolute', bottom: height + 3, left: 0, right: 0 }}
+              testID="set-strip-reps-label"
+            >
+              {label}
+            </Text>
+            <SetBar set={set} height={height} />
+          </View>
+        )
+      })}
     </View>
   )
 }

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { View } from 'react-native'
 import { SetTableHeader } from './SetTableHeader'
+import { Surface } from '../../ui/surface'
 
 /**
  * 🚧 WIP / placeholder — `SetTableHeader` (exported as `SetTableHeader`; the generic
@@ -10,7 +10,7 @@ import { SetTableHeader } from './SetTableHeader'
  * unification (TD-03.56).
  */
 const meta: Meta<typeof SetTableHeader> = {
-  title: 'Workout/SetTableHeader',
+  title: 'Custom/Workout/SetTableHeader',
   component: SetTableHeader,
   tags: ['autodocs'],
   parameters: {
@@ -18,8 +18,8 @@ const meta: Meta<typeof SetTableHeader> = {
       description: {
         component:
           '**Atom.** The expanded-set-table column header row; per-column widths mirror ' +
-          '[SetRow](?path=/docs/workout-setrow--docs) so headers align over the rows. ' +
-          'Used-by ↑ [ExerciseCard](?path=/docs/workout-exercisecard--docs) (expanded), which ' +
+          '[SetRow](?path=/docs/custom-workout-setrow--docs) so headers align over the rows. ' +
+          'Used-by ↑ [ExerciseCard](?path=/docs/custom-workout-exercisecard--docs) (expanded), which ' +
           'renders it with `showPrevious={false}`. ' +
           'Column set / widths provisional pending TD-03.56 responsive unification.',
       },
@@ -31,9 +31,9 @@ const meta: Meta<typeof SetTableHeader> = {
   },
   decorators: [
     (Story) => (
-      <View style={{ width: 320, backgroundColor: '#131313' }}>
+      <Surface level="base" style={{ width: 320 }}>
         <Story />
-      </View>
+      </Surface>
     ),
   ],
 }

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

@@ -1,5 +1,6 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
-import { View, Text } from 'react-native'
+import { View } from 'react-native'
+import { Typography } from '../Typography'
 
 // One header column: its label and its fixed width (PREV is the lone flex column,
 // `undefined`). Order + widths mirror SetRow's cells so headers align over rows.
@@ -19,6 +20,11 @@ export interface SetTableHeaderProps {
 // distribute across the full strip width via `justifyContent: space-between`.
 const PREV_COLUMN: Column = { label: 'PREV', width: undefined }
 
+// `microLabel` is the 10px step of the scale (TOKENS.md §4), in the same Inter face as
+// the table's value cells. Only the row's line box is pinned: the raw <Text> this
+// replaced carried no lineHeight, and the variant's `leading-normal` would grow the row.
+const COLUMN_LABEL = 'leading-[normal]'
+
 /** Columns in order, with the weight column reflecting `unit`; PREV dropped when hidden. */
 function buildColumns(unit: 'lbs' | 'kg', showPrevious: boolean): Column[] {
   return [
@@ -68,18 +74,9 @@ export function SetTableHeader({
             }}
             {...(isFlex ? { className: 'flex-1' } : {})}
           >
-            <Text
-              className="text-text-tertiary"
-              style={{
-                fontSize: 10,
-                fontWeight: '600',
-                fontFamily: 'Inter, sans-serif',
-                textTransform: 'uppercase',
-                letterSpacing: 0.8,
-              }}
-            >
+            <Typography variant="microLabel" color="tertiary" className={COLUMN_LABEL}>
               {label}
-            </Text>
+            </Typography>
           </View>
         )
       })}

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { View } from 'react-native'
 import { SetsRepsLoad } from './SetsRepsLoad'
+import { Surface } from '../../ui/surface'
 
 /**
  * `SetsRepsLoad` — the `sets × reps @ load` prescription line in the TempoDisplay
@@ -8,7 +8,7 @@ import { SetsRepsLoad } from './SetsRepsLoad'
  * separators).
  */
 const meta: Meta<typeof SetsRepsLoad> = {
-  title: 'Workout/SetsRepsLoad',
+  title: 'Custom/Workout/SetsRepsLoad',
   component: SetsRepsLoad,
   tags: ['autodocs'],
   parameters: {
@@ -16,17 +16,17 @@ const meta: Meta<typeof SetsRepsLoad> = {
       description: {
         component:
           '**Atom.** The `sets × reps @ load` prescription line in the TempoDisplay visual ' +
-          'language. Composes [MetricCell](?path=/docs/workout-metriccell--docs) ' +
-          '(shared with [TempoDisplay](?path=/docs/workout-tempodisplay--docs)). ' +
-          'Used-by ↑ [ExerciseHeading](?path=/docs/workout-exerciseheading--docs).',
+          'language. Composes [MetricCell](?path=/docs/custom-workout-metriccell--docs) ' +
+          '(shared with [TempoDisplay](?path=/docs/custom-workout-tempodisplay--docs)). ' +
+          'Used-by ↑ [ExerciseHeading](?path=/docs/custom-workout-exerciseheading--docs).',
       },
     },
   },
   decorators: [
     (Story) => (
-      <View style={{ padding: 16, backgroundColor: '#131313' }}>
+      <Surface level="base" style={{ padding: 16 }}>
         <Story />
-      </View>
+      </Surface>
     ),
   ],
 }

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

@@ -1,10 +1,8 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { View, type ViewProps } from 'react-native'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { useOnSurfaceColor } from '../../ui/surface/SurfaceContext'
 import { MetricCell } from './metricText'
 
-const t = getSemanticColors('dark')
-
 const TIMES = '×' // × multiplication sign, padded by muted separators
 const AT = '@'
 
@@ -34,8 +32,8 @@ export function SetsRepsLoad({
   className,
   ...props
 }: SetsRepsLoadProps) {
-  const value = t['text-primary']
-  const sep = t['text-tertiary']
+  const value = useOnSurfaceColor('primary')
+  const sep = useOnSurfaceColor('tertiary')
 
   return (
     <View

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

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { Sparkline } from './Sparkline'
 
 const meta: Meta<typeof Sparkline> = {
-  title: 'Workout/DataViz/Sparkline',
+  title: 'Custom/Workout/DataViz/Sparkline',
   component: Sparkline,
   tags: ['autodocs'],
   argTypes: {

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

@@ -2,6 +2,7 @@ import { describe, it, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { Sparkline } from './Sparkline'
+import { resolveColor } from '../../../theme/resolve-color'
 
 const sampleData = [10, 25, 15, 30, 20]
 
@@ -19,9 +20,7 @@ describe('Sparkline', () => {
   it('renders line segments between points', () => {
     render(<Sparkline data={sampleData} />)
     for (let i = 1; i < sampleData.length; i++) {
-      expect(
-        screen.getByTestId(`sparkline-segment-${i}`),
-      ).toBeInTheDocument()
+      expect(screen.getByTestId(`sparkline-segment-${i}`)).toBeInTheDocument()
     }
   })
 
@@ -40,9 +39,7 @@ describe('Sparkline', () => {
   it('highlights last dot when highlightLast is true', () => {
     render(<Sparkline data={sampleData} highlightLast />)
     const lastIndex = sampleData.length - 1
-    expect(
-      screen.getByTestId(`sparkline-dot-${lastIndex}`),
-    ).toBeInTheDocument()
+    expect(screen.getByTestId(`sparkline-dot-${lastIndex}`)).toBeInTheDocument()
     // Other dots should not be present (showDots is false)
     expect(screen.queryByTestId('sparkline-dot-0')).not.toBeInTheDocument()
   })
@@ -62,7 +59,7 @@ describe('Sparkline', () => {
           { value: 20, color: '#ff0000' },
           { value: 25, color: '#00ff00', dashed: true },
         ]}
-      />,
+      />
     )
     expect(screen.getByTestId('sparkline-reference-0')).toBeInTheDocument()
     expect(screen.getByTestId('sparkline-reference-1')).toBeInTheDocument()
@@ -70,9 +67,36 @@ describe('Sparkline', () => {
 
   it('does not render reference lines when not provided', () => {
     render(<Sparkline data={sampleData} />)
-    expect(
-      screen.queryByTestId('sparkline-reference-0'),
-    ).not.toBeInTheDocument()
+    expect(screen.queryByTestId('sparkline-reference-0')).not.toBeInTheDocument()
+  })
+
+  it('defaults the trace to the brand-primary token', () => {
+    render(<Sparkline data={sampleData} highlightLast />)
+    expect(screen.getByTestId('sparkline-segment-1')).toHaveStyle({
+      backgroundColor: resolveColor('brand-primary'),
+    })
+    expect(screen.getByTestId('sparkline-dot-4')).toHaveStyle({
+      backgroundColor: resolveColor('brand-primary'),
+    })
+  })
+
+  it('lets a caller override the trace colour', () => {
+    render(<Sparkline data={sampleData} color="#00ff00" />)
+    expect(screen.getByTestId('sparkline-segment-1')).toHaveStyle({
+      backgroundColor: '#00ff00',
+    })
+  })
+
+  it('renders a reference-line label in the caller colour', () => {
+    render(
+      <Sparkline
+        data={sampleData}
+        referenceLines={[{ value: 20, color: '#ff0000', label: 'MAV' }]}
+      />
+    )
+    const label = screen.getByTestId('sparkline-reference-label-0')
+    expect(label).toHaveTextContent('MAV')
+    expect(label).toHaveStyle({ color: '#ff0000' })
   })
 
   it('uses default dimensions', () => {
@@ -89,23 +113,17 @@ describe('Sparkline', () => {
 
   it('sets accessibility label', () => {
     render(<Sparkline data={sampleData} />)
-    expect(
-      screen.getByLabelText('Sparkline chart with 5 data points'),
-    ).toBeInTheDocument()
+    expect(screen.getByLabelText('Sparkline chart with 5 data points')).toBeInTheDocument()
   })
 
   it('sets empty accessibility label for no data', () => {
     render(<Sparkline data={[]} />)
-    expect(
-      screen.getByLabelText('Sparkline chart, no data'),
-    ).toBeInTheDocument()
+    expect(screen.getByLabelText('Sparkline chart, no data')).toBeInTheDocument()
   })
 
   describe('accessibility', () => {
     it('has no accessibility violations', async () => {
-      const { container } = render(
-        <Sparkline data={sampleData} showDots highlightLast />,
-      )
+      const { container } = render(<Sparkline data={sampleData} showDots highlightLast />)
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })

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

@@ -1,10 +1,8 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
-import React from 'react'
-import { View, Text, type ViewProps } from 'react-native'
+import { View, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
-
-const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
+import { Typography } from '../Typography'
+import { resolveColor } from '../../../theme/resolve-color'
 
 export interface SparklineProps extends ViewProps {
   data: number[]
@@ -22,10 +20,7 @@ export interface SparklineProps extends ViewProps {
   className?: string
 }
 
-function normalizeData(
-  data: number[],
-  height: number,
-): number[] {
+function normalizeData(data: number[], height: number): number[] {
   if (data.length === 0) return []
   const min = Math.min(...data)
   const max = Math.max(...data)
@@ -33,11 +28,7 @@ function normalizeData(
   return data.map((v) => height - ((v - min) / range) * height)
 }
 
-function normalizeValue(
-  value: number,
-  data: number[],
-  height: number,
-): number {
+function normalizeValue(value: number, data: number[], height: number): number {
   const min = Math.min(...data)
   const max = Math.max(...data)
   const range = max - min || 1
@@ -67,7 +58,7 @@ export function Sparkline({
     )
   }
 
-  const resolvedColor = color ?? BRAND_PRIMARY
+  const resolvedColor = color ?? resolveColor('brand-primary')
   const normalized = normalizeData(data, height)
   const stepX = data.length > 1 ? width / (data.length - 1) : 0
 
@@ -112,19 +103,24 @@ export function Sparkline({
             testID={`sparkline-reference-${i}`}
           >
             {line.label && (
-              <Text
+              // `3xs` (9px) is the scale floor; the label was 7px, which is off it
+              // entirely (TOKENS.md §4). The line box stays unpinned, as the raw
+              // <Text> this replaced was, so the absolute offset still lands.
+              <Typography
+                variant="caption"
+                color="inherit"
+                className="text-3xs leading-[normal]"
                 style={{
                   position: 'absolute',
                   right: 0,
                   top: -10,
-                  fontSize: 7,
                   color: line.color,
                   opacity: 1,
                 }}
                 testID={`sparkline-reference-label-${i}`}
               >
                 {line.label}
-              </Text>
+              </Typography>
             )}
           </View>
         )

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

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { StatusDot } from './StatusDot'
 
 const meta: Meta<typeof StatusDot> = {
-  title: 'Components/Atoms/StatusDot',
+  title: 'Custom/Workout/StatusDot',
   component: StatusDot,
   tags: ['autodocs'],
   argTypes: {

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

@@ -2,6 +2,16 @@ import { describe, it, expect } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { StatusDot } from './StatusDot'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { greyRamp } from '../../../theme/tokens/primitives'
+import { hexToRgb } from '../../../theme/color-utils'
+import { resolveColor } from '../../../theme/resolve-color'
+
+/** The `rgba(r, g, b` prefix getGlowShadow emits for a token colour. */
+function glowRgb(hex: string): string {
+  const { r, g, b } = hexToRgb(hex)!
+  return `rgba(${r}, ${g}, ${b}`
+}
 
 describe('StatusDot', () => {
   it('renders a dot', () => {
@@ -50,6 +60,23 @@ describe('StatusDot', () => {
   })
 
   describe('solid variants', () => {
+    it.each([
+      ['success', 'status-success'],
+      ['warning', 'status-warning'],
+      ['error', 'status-error'],
+      ['neutral', 'text-tertiary'],
+    ] as const)('fills the %s dot from the %s token', (variant, token) => {
+      render(<StatusDot variant={variant} />)
+      expect(screen.getByTestId('status-dot')).toHaveStyle({
+        backgroundColor: resolveColor(token),
+      })
+    })
+
+    it('draws the glyph on a solid fill in text-inverse', () => {
+      render(<StatusDot variant="success" size="md" icon="check" />)
+      expect(screen.getByText('✓')).toHaveStyle({ color: resolveColor('text-inverse') })
+    })
+
     it('renders all solid variant types without error', () => {
       const { rerender } = render(<StatusDot variant="success" />)
       expect(screen.getByTestId('status-dot')).toBeInTheDocument()
@@ -84,6 +111,18 @@ describe('StatusDot', () => {
       expect(screen.getByLabelText('future status')).toBeInTheDocument()
     })
 
+    // The rim is a whole rung above the wash. Asserting both rules out the
+    // flattening that collapses a two-step ring onto one `-subtle`.
+    it.each([
+      ['on-track', 'status-success'],
+      ['deviation', 'status-warning'],
+    ] as const)('washes the %s ring with %s -subtle inside a -muted rim', (variant, role) => {
+      render(<StatusDot variant={variant} />)
+      const dot = screen.getByTestId('status-dot')
+      expect(dot).toHaveStyle({ backgroundColor: resolveColor(`${role}-subtle`) })
+      expect(dot.style.borderTopColor).toBe(resolveColor(`${role}-muted`))
+    })
+
     it('renders the future variant with a 1px dashed border', () => {
       render(<StatusDot variant="future" />)
       const dot = screen.getByTestId('status-dot')
@@ -103,19 +142,19 @@ describe('StatusDot', () => {
     it('applies a box-shadow when glow is set on a solid variant', () => {
       render(<StatusDot variant="success" glow />)
       const dot = screen.getByTestId('status-dot')
-      expect(dot.style.boxShadow).toContain('rgba(46,213,115,0.4)')
+      expect(dot.style.boxShadow).toContain(glowRgb(getSemanticColors('dark')['status-success']))
     })
 
     it('applies a box-shadow when glow is set on a ring variant', () => {
       render(<StatusDot variant="on-track" glow />)
       const dot = screen.getByTestId('status-dot')
-      expect(dot.style.boxShadow).toContain('rgba(46,213,115,0.4)')
+      expect(dot.style.boxShadow).toContain(glowRgb(getSemanticColors('dark')['status-success']))
     })
 
     it('applies a gray box-shadow when glow is set on the future variant', () => {
       render(<StatusDot variant="future" glow />)
       const dot = screen.getByTestId('status-dot')
-      expect(dot.style.boxShadow).toContain('rgba(107,114,128,0.4)')
+      expect(dot.style.boxShadow).toContain(glowRgb(greyRamp[500]))
     })
 
     it('does not apply a box-shadow when glow is not set', () => {
@@ -128,7 +167,7 @@ describe('StatusDot', () => {
   describe('accessibility', () => {
     it('has no accessibility violations', async () => {
       const { container } = render(
-        <StatusDot variant="success" size="md" icon="check" label="On track" />,
+        <StatusDot variant="success" size="md" icon="check" label="On track" />
       )
       const results = await axe(container)
       expect(results).toHaveNoViolations()
@@ -136,7 +175,7 @@ describe('StatusDot', () => {
 
     it('has no accessibility violations for ring variants', async () => {
       const { container } = render(
-        <StatusDot variant="on-track" size="md" icon="check" label="On track" />,
+        <StatusDot variant="on-track" size="md" icon="check" label="On track" />
       )
       const results = await axe(container)
       expect(results).toHaveNoViolations()