Tokens visuais
Tokens definidos em src/styles.css.
Cores semânticas
Tokens light/dark. Use sempre via classes Tailwind (bg-primary, text-foreground). Nunca cores diretas.
--background
oklch(…)
--foreground
oklch(…)
--card
oklch(…)
--card-foreground
oklch(…)
--popover
oklch(…)
--popover-foreground
oklch(…)
--primary
oklch(…)
--primary-foreground
oklch(…)
--secondary
oklch(…)
--secondary-foreground
oklch(…)
--muted
oklch(…)
--muted-foreground
oklch(…)
--accent
oklch(…)
--accent-foreground
oklch(…)
--destructive
oklch(…)
--destructive-foreground
oklch(…)
--border
oklch(…)
--input
oklch(…)
--ring
oklch(…)
--demo
oklch(…)
--demo-foreground
oklch(…)
--demo-muted
oklch(…)
Cores de gráfico
--chart-1
oklch(…)
--chart-2
oklch(…)
--chart-3
oklch(…)
--chart-4
oklch(…)
--chart-5
oklch(…)
Sidebar
Tokens dedicados ao componente Sidebar do shadcn.
--sidebar
oklch(…)
--sidebar-foreground
oklch(…)
--sidebar-primary
oklch(…)
--sidebar-primary-foreground
oklch(…)
--sidebar-accent
oklch(…)
--sidebar-accent-foreground
oklch(…)
--sidebar-border
oklch(…)
--sidebar-ring
oklch(…)
Radius
Escala derivada de --radius (0.625rem).
sm
md
lg
xl
2xl
3xl
4xl
Sombras e elevação
Definidas globalmente em @layer base para links/role=button com borda e rounded.
Painel estático (sem sombra)
Card clicável (sombra padrão + lift)Espaçamento
Escala base do Tailwind (1 unidade = 0.25rem = 4px).
1
0.25rem · 4px
2
0.5rem · 8px
3
0.75rem · 12px
4
1rem · 16px
6
1.5rem · 24px
8
2rem · 32px
12
3rem · 48px
16
4rem · 64px
24
6rem · 96px