Foundations
@rahhal/themes (tokens) · @rahhal/themes/tailwind.preset (Tailwind mapping)

Colors & radius

View as Markdown

Every design token from `@rahhal/themes`. Stored as HSL channels (so Tailwind opacity modifiers work) AND surfaced as `#RRGGBB` hex for cross-platform consumers (iOS, Android, slides, Figma). Click any hex chip to copy it. Try toggling theme via the cog — every swatch flips live.

Examples

Surfaces

Backgrounds for the canvas, cards, popovers, and quiet/loud emphasis regions.

background--background
Lightactive
0 0% 100%
Dark
0 0% 0%
card--card
Lightactive
240 23.8% 95.9%
Dark
240 3.4% 11.4%
popover--popover
Lightactive
0 0% 100%
Dark
240 2.2% 17.6%
muted--muted
Lightactive
240 23.8% 95.9%
Dark
240 3.4% 11.4%
accent--accent
Lightactive
200.6 72.7% 91.4%
Dark
199.6 63.6% 15.1%

Text on surface

Foreground colors paired with their surface counterparts.

foreground--foreground
Lightactive
0 0% 0%
Dark
0 0% 100%
cardForeground--card-foreground
Lightactive
0 0% 0%
Dark
0 0% 100%
popoverForeground--popover-foreground
Lightactive
0 0% 0%
Dark
0 0% 100%
mutedForeground--muted-foreground
Lightactive
240 1.8% 43.1%
Dark
240 3.5% 61%
accentForeground--accent-foreground
Lightactive
197.6 74.4% 15.3%
Dark
200 67.3% 90.4%

Brand

Primary CTAs and the quieter secondary surface.

primary--primary
Lightactive
198 100% 41.8%
Dark
200.2 80.5% 53.7%
primaryForeground--primary-foreground
Lightactive
0 0% 100%
Dark
199.4 100% 6.7%
secondary--secondary
Lightactive
240 10.6% 90.8%
Dark
240 2.2% 17.6%
secondaryForeground--secondary-foreground
Lightactive
240 3.4% 11.4%
Dark
0 0% 100%

State

Destructive surfaces for errors and irreversible actions.

destructive--destructive
Lightactive
3.2 100% 59.4%
Dark
3.4 100% 61.4%
destructiveForeground--destructive-foreground
Lightactive
0 0% 100%
Dark
0 0% 100%

Chrome

Borders, input outlines, and focus-rings.

border--border
Lightactive
240 1.8% 78%
Dark
240 1.8% 22.4%
input--input
Lightactive
240 1.8% 78%
Dark
240 1.8% 22.4%
ring--ring
Lightactive
198 100% 41.8%
Dark
200.2 80.5% 53.7%

Radius

Border-radius scale. Use the matching Tailwind utility (`rounded-md` etc.) so radii stay token-driven.

radius.sm--radius-sm0.25rem
radius.md--radius-md0.5rem
radius.lg--radius-lg0.75rem
radius.xl--radius-xl1rem