Color

Summit keeps the variable names of shadcn’s base-nova style and adds success and warning. accent has a new purpose: it marks state.

Surfaces and TextCopy Anchor Link

A surface variable fills an area, and its -foreground partner colors the text on it. background pairs with foreground.

Actions and StateCopy Anchor Link

primary is for actions, and accent is for state.

LinesCopy Anchor Link

border divides content. input is the edge of a control.

StatusCopy Anchor Link

A status variable has no -foreground partner. It colors a tint, a dot, or an icon. destructive also colors error text.

ChartsCopy Anchor Link

chart-1 to chart-5 color the series of a chart. They are the first five colors of IBM Carbon’s categorical palette, in Carbon’s order.

SidebarCopy Anchor Link

The Sidebar has variables of its own. Its surface is sidebar, not background, and sidebar-accent is a neutral fill, unlike accent.

RulesCopy Anchor Link

Apply these rules when you override a class or build a surface outside the registry.

Primary and AccentCopy Anchor Link

Fill an action with primary and a state with accent. A checked Checkbox next to a filled Button stays distinct because the two have different colors.

Highlighted RowsCopy Anchor Link

Use secondary for the row under the pointer or the arrow keys in a menu, a Select, or a Combobox. The fill moves with the pointer and doesn’t mark anything as on, so accent isn’t used.

Control EdgesCopy Anchor Link

A Checkbox and a radio have nothing but their edge to be found by, so keep that edge in input, which has the 3 to 1 that WCAG 2.2 SC 1.4.11 Non-text Contrast requires for the edge that identifies a control. The box of a text field has a fainter edge, below that floor.

Warning TextCopy Anchor Link

warning is too light for text on a light surface. Tint with it and keep the label in foreground, as the warning Badge does.

Chart OrderCopy Anchor Link

Use chart-1 for the first series of a Chart, chart-2 for the second, and continue in order. Carbon arranges the sequence so that each color contrasts most with its neighbors.

Raw ValuesCopy Anchor Link

Reach a color through its variable. tokens.css sets a light and a dark value for every color variable. A hex value or a Tailwind palette color, such as bg-indigo-600, has one value, so it stays the same when the theme changes. Avoid adding a variable.

AccessibilityCopy Anchor Link

See Accessibility for the contrast floors for text and for a mark. The ratios in this table are computed from tokens.css, and a production build fails if a pair falls below its floor. A pair that isn’t in the table isn’t checked.

Color can’t be the only sign of a status, so a status Badge has a label, an Alert pairs its colored icon with a title, and an invalid Field shows an error message with its destructive border.

In CodeCopy Anchor Link

A value changes under a .dark ancestor, so a class doesn’t need a dark: variant unless its alpha differs between themes.

<section className="bg-card text-card-foreground">
    <p className="text-muted-foreground">48 invoices this year.</p>
    <span className="bg-success/15 dark:bg-success/25">Paid</span>
</section>

Outside a class, read the variable: for a chart series, set color: 'var(--chart-1)'.

ReferenceCopy Anchor Link

tokens.css declares these colors.