Progress component: sync tokens with updated Figma variable modes #1
Description
Summary
The Figma design system has been updated with a new Brutalist variable mode alongside the existing Light and Dark modes. A design-code parity check on the Progress component revealed token discrepancies that need to be addressed on the development side.
Figma Context
- File: CollegeTown Design System (ioFDU1TszfuEsopivSB6Ox)
- Component: Progress (node 296:4740)
- Page: Progress
- Comment: A Figma comment has been left on the component requesting the designer update the variable mode to Dark for validation.
Parity Report (Score: 78/100)
What's Aligned
- Border radius (rounded-full / 9999px)
- Height (h-2 / 8px)
- Token binding (base/primary in Figma maps to bg-primary in code)
- Layout structure (horizontal indicator within track)
What Needs Attention
1. Semantic color variants missing from Figma
Code has 5 variants (default, success, warning, destructive, informational) via CVA that don't exist in the Figma component. The Figma component only has a Percent variant. Since design is the canonical source, decide whether to:
- Keep code variants as code-only enhancements, or
- Wait for Figma to add a matching Variant property
2. New Brutalist mode token values
60 variables in the 3. Mode collection now have Brutalist mode values. Key tokens affecting Progress:
- base/primary → #FF00FF (hot magenta)
- base/primary-hover → #FF4DFF
- base/destructive → #FF0033 (nuclear red)
- base/success → #00FF66 (toxic green)
- base/informational → #0066FF (electric blue)
3. Accessibility annotations
The Figma component lacks accessibility annotations. Code correctly uses role="progressbar" via Radix UI — consider adding annotations to the Figma description for designer documentation.
Files to Review
- src/components/progress/progress.tsx — main component with CVA variants
- src/components/ui/progress.tsx — base shadcn/ui primitive
- src/components/progress/progress.stories.tsx — stories including SemanticVariants
Action Items
- Confirm semantic variants strategy (keep code-only or wait for Figma update)
- Verify Brutalist mode renders correctly when mode switching is implemented
- Test Dark mode token resolution for Progress component
- Add Figma accessibility annotations if not done by designer