Theme tokens

Every color and radius variable in this theme

Surface

6

Page, card and popover backgrounds with their text colors.

background

--background

foreground

--foreground

card

--card

card-foreground

--card-foreground

popover

--popover

popover-foreground

--popover-foreground

Semantic

9

Intent colors used by buttons, badges and other controls.

primary

--primary

primary-foreground

--primary-foreground

secondary

--secondary

secondary-foreground

--secondary-foreground

muted

--muted

muted-foreground

--muted-foreground

accent

--accent

accent-foreground

--accent-foreground

destructive

--destructive

Interface

3

Outlines and focus states shared across every component.

border

--border

input

--input

ring

--ring

Charts

5

Ordered data series palette for graphs and visualizations.

chart-1

--chart-1

chart-2

--chart-2

chart-3

--chart-3

chart-4

--chart-4

chart-5

--chart-5

Sidebar

8

A standalone scale so navigation can differ from the page.

sidebar

--sidebar

sidebar-foreground

--sidebar-foreground

sidebar-primary

--sidebar-primary

sidebar-primary-foreground

--sidebar-primary-foreground

sidebar-accent

--sidebar-accent

sidebar-accent-foreground

--sidebar-accent-foreground

sidebar-border

--sidebar-border

sidebar-ring

--sidebar-ring

Radius

7

Corner scale derived from the base --radius variable.

radius-sm

radius * 0.6

radius-md

radius * 0.8

radius-lg

radius

radius-xl

radius * 1.4

radius-2xl

radius * 1.8

radius-3xl

radius * 2.2

radius-4xl

radius * 2.6