Expand description
Role-based color palette for the design system.
§shadcn mapping
shadcn’s --destructive / --destructive-foreground map to danger
(Tailwind red ramp). Use danger(600) for solid destructive backgrounds
and danger(700) for hover; pair with white foreground text on filled
destructive controls. Theme-aware neutrals use crate::styles::semantic.
Colors are organized by semantic ROLE (neutral, primary, success,
warning, danger, info), never by brand color name. Each role is a
50..=950 shade ramp returning Hsla.
Hex values are sourced from the Tailwind v3 reference palette internally (neutral←slate, primary/info←blue, success←green, warning←amber, danger←red) — but this mapping is an implementation detail. Swapping the ramps below re-themes every component without touching any call site.
Accents/status use these swatches directly (mode-agnostic). Neutrals for
surfaces/borders/text should come from crate::styles::semantic instead,
so dark/light both work via the theme.
Functions§
- danger
- Danger/error ramp (source: Tailwind
red). - info
- Informational ramp — shares the primary (blue) ramp.
- neutral
- Neutral ramp (source: Tailwind
slate). Prefersemantic::*for theme-aware surfaces/text; use this only for fixed neutral swatches. - primary
- Primary accent ramp (source: Tailwind
blue). - success
- Success ramp (source: Tailwind
green). - warning
- Warning ramp (source: Tailwind
amber).