Colour
The semantic colour layer — the only colours a component may use.
A component uses these names and nothing else: never a palette class such as
bg-teal-700, never a literal hex or oklch(…). The values below are read from
packages/tokens/src/tokens.ts; a palette path such as teal.700 resolves through the
palette, which is deliberately not exported.
Green never means a state. It is the brand colour. States are neutral, amber and red,
plus an informational blue — and colour is never the only carrier: StatusPill will not
compile without a text label.
The clinic brand overrides primary, ring and sidebar-ring only; switch the brand on
any component example to see it.
| Token | Light | Dark |
|---|---|---|
--background | gray.50 | gray.950 |
--foreground | gray.950 | gray.50 |
--card | #ffffff | gray.900 |
--card-foreground | gray.950 | gray.50 |
--muted | gray.100 | gray.800 |
--muted-foreground | gray.700 | gray.400 |
--border | gray.200 | gray.700 |
--primary | teal.700 | teal.500 |
--primary-foreground | #ffffff | teal.950 |
--destructive | red.600 | red.400 |
--destructive-foreground | #ffffff | red.950 |
--accent | gray.100 | gray.800 |
--accent-foreground | gray.950 | gray.50 |
--secondary | gray.100 | gray.800 |
--secondary-foreground | gray.950 | gray.50 |
--popover | #ffffff | gray.900 |
--popover-foreground | gray.950 | gray.50 |
--input | gray.200 | gray.700 |
--ring | teal.700 | teal.500 |
--status-ok | gray.100 | gray.800 |
--status-ok-fg | gray.700 | gray.400 |
--status-warn | amber.100 | amber.700 |
--status-warn-fg | amber.700 | amber.100 |
--status-crit | red.100 | red.600 |
--status-crit-fg | red.600 | red.100 |
--status-info | blue.100 | blue.700 |
--status-info-fg | blue.700 | blue.100 |
--sidebar | gray.100 | gray.900 |
--sidebar-foreground | gray.700 | gray.400 |
--sidebar-accent | #ffffff | gray.950 |
--sidebar-accent-foreground | gray.950 | gray.50 |
--sidebar-border | gray.200 | gray.700 |
--sidebar-ring | teal.700 | teal.500 |