Replace hardcoded CSS values with design tokens #672
Description
Summary
Many components use hardcoded pixel values, hex colors, magic numbers, and fixed dimensions in their CSS instead of referencing the design token system (var(--rs-*)). This creates inconsistency, makes theming difficult, and increases maintenance burden.
Goal
Audit and replace all hardcoded CSS values with appropriate design tokens across the component library. This includes:
- Pixel values for spacing, sizing, padding, margins →
var(--rs-space-*)tokens - Hex/RGB colors →
var(--rs-color-*)semantic tokens - Font sizes →
var(--rs-font-size-*)tokens - Border widths, radii →
var(--rs-radius-*),var(--rs-border-width-*)tokens - Animation durations →
var(--rs-transition-*)tokens - Max-width/height constraints → CSS custom properties or configurable props
- Gradient hex values → token-based gradients
Affected Components
| Component | Details |
|---|---|
| Tooltip (#648) | max-width: 400px hardcoded |
| Toast (#647) | CSS variable fallbacks missing |
| ThemeProvider (#646) | Scattered hardcoded defaults |
| TextArea (#645) | Hardcoded icon dimensions 12px |
| Text (#644) | Hardcoded px in deprecated size variants (13px–28px) |
| Tabs (#643) | height: 28px, icon 16px hardcoded |
| Table (#642) | border-bottom: 0.5px, sticky top: 0px |
| Switch (#641) | Transform 16px/12px, thumb dimensions hardcoded |
| Slider (#639) | gap: 3px, height: 6px, thumb 24x20px, border: 0.5px |
| Skeleton (#638) | Inline 50px default width |
| Sidebar (#637) | 220px, 240px, 57px widths hardcoded |
| SidePanel (#636) | width: 400px fixed |
| Sheet (#635) | width: 250px, height: 300px hardcoded |
| Select (#633) | containerWidth - 70 magic number, 0.6 char width, max-height: 320px |
| Search (#632) | SVG 12px hardcoded, magic number in icon sizing |
| ScrollArea (#631) | Scrollbar 4px/6px width hardcoded |
| Popover (#629) | min-width: 120px, max-width: 18rem, animation 400ms |
| Link (#625) | opacity: 0.8 hover, transition timing |
| InputField (#623) | line-height: 32px, padding: 6px 0, max-width: 200px, icon 16px |
| Indicator (#622) | Scale-specific token instead of semantic |
| Headline (#619) | Hardcoded font size pixel values |
| FilterChip (#616) | Hardcoded color and spacing values |
| EmptyState (#615) | Hardcoded padding, gaps, font sizes |
| DropdownMenu (#614) | Hardcoded pixel values |
| Dialog (#613) | Hardcoded sizing values |
| Command (#609) | max-height: 300px, padding: 0 12px, padding: 30px 0 |
| Combobox (#608) | max-height: 320px hardcoded |
| ColorPicker (#607) | Hardcoded hue gradient hex colors |
| Callout (#603) | Hardcoded gradient hex, width: 318px |
| Badge (#598) | Hardcoded gradient hex values |
| AnnouncementBar (#596) | Hardcoded gradient hex values |
| Navbar (#576) | min-height: 48px hardcoded |
Approach
- Audit each component's CSS module for hardcoded values
- Map each value to the appropriate design token (or create new tokens if needed)
- Replace values one component at a time
- Visual regression test after each batch
Acceptance Criteria
- No hardcoded pixel values for spacing/sizing in component CSS (except
0,1pxborders) - No hardcoded hex/RGB colors — all use
var(--rs-color-*)tokens - No undocumented magic numbers
- Max-width/max-height constraints use CSS custom properties
- Gradient values derive from token system