Replace hardcoded CSS values with design tokens

[ravisuhag]

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

1. Audit each component's CSS module for hardcoded values
2. Map each value to the appropriate design token (or create new tokens if needed)
3. Replace values one component at a time
4. Visual regression test after each batch

Acceptance Criteria

• No hardcoded pixel values for spacing/sizing in component CSS (except 0, 1px borders)
• 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