@cantera/status-tokenstokens
Semantic status colors — success, warning, danger, neutral — each with a foreground and a surface companion, contrast-verified in light and dark. The palette every cantera status surface renders from.
npx shadcn@latest add @cantera/status-tokensThe solid pairs (bg-status-* with text-status-*-foreground) are the default treatment; the -surface companions are for soft rows and callouts and must always carry text-status-* ink. If your theme redefines :root without these variables, the utilities fall back to foreground / destructive / muted so nothing renders invisible. lib/status-tokens.ts ships the same twelve tokens as typed var() strings (statusCssVars) for the places a class cannot reach: inline styles, chart series, canvas fills.
| Token | Utilities | Description |
|---|---|---|
| --status-success | bg-status-success · text-status-success | Healthy. A live grant, a passing check, a connection that needs nothing. |
| --status-warning | bg-status-warning · text-status-warning | Recoverable and needs attention. Expiring soon and expired both live here — a refresh away, not a failure. |
| --status-danger | bg-status-danger · text-status-danger | A failure the user must act on: a revoked grant, a rejected scope. |
| --status-neutral | bg-status-neutral · text-status-neutral | Absence. Never connected, nothing to report — not an error. |
| -foreground | text-status-*-foreground | Ink for text sitting on the solid fill. Every pair clears 4.5:1 in both appearances. |
| -surface | bg-status-*-surface | Soft background for rows and callouts. Always carries text-status-* ink, never the -foreground ink. |
| Export | Type | Description |
|---|---|---|
| statusCssVars | Record<StatusCssVar, string> | The twelve tokens as typed var() strings — success, successForeground, successSurface, and the same three for warning, danger, and neutral. For the places a class cannot reach: an inline style, a chart series color, a canvas fill. Each value carries the same fallback chain the utilities use, so an unthemed project degrades instead of rendering invisible. |
| StatusCssVar | type | The twelve token names, for a Record keyed by token or a prop that takes one. |
This is the exact code the CLI installs into your project — you own it from there.
// For the places a Tailwind class cannot reach — inline style, chart series,
// canvas fill. Every value carries the same fallback chain the @theme mappings
// use, so a theme without the variables degrades instead of rendering invisible.
export const statusCssVars = {
success: 'var(--status-success, var(--foreground))',
successForeground: 'var(--status-success-foreground, var(--background))',
successSurface: 'var(--status-success-surface, var(--muted))',
warning: 'var(--status-warning, var(--foreground))',
warningForeground: 'var(--status-warning-foreground, var(--background))',
warningSurface: 'var(--status-warning-surface, var(--muted))',
danger: 'var(--status-danger, var(--destructive))',
dangerForeground: 'var(--status-danger-foreground, var(--background))',
dangerSurface: 'var(--status-danger-surface, var(--muted))',
neutral: 'var(--status-neutral, var(--muted-foreground))',
neutralForeground: 'var(--status-neutral-foreground, var(--background))',
neutralSurface: 'var(--status-neutral-surface, var(--muted))',
} as const
export type StatusCssVar = keyof typeof statusCssVars