@startsidan/tokens

PaketGemensam

Definierar varje färg, mått och rörelse i systemet som Tailwind-tema, och är det enda stället där ett värde får uppstå.

källa: packages/tokens/srcuppdaterad: 2026-08-31

Ansvar

Bära prototypens värden 1:1 som CSS-variabler i @theme.
Mappa shadcns semantiska tokens mot kommunens palett, så att komponenterna inte bär egen färg.
Hålla basreglerna: rotens 62,5 %, typsnitt, fokusmarkering, .wrap och prefers-reduced-motion.
Skilja betydelserna åt: blått är identitet, grönt med --ai-prefix är AI, statusfärgerna är sina egna.

Tabell: Sökväg, Roll
Sökväg	Roll
packages/tokens/src/theme.css	@theme med alla tokens, plus shadcn-mappningen och keyframes.
packages/tokens/src/base.css	Basregler: html 62,5 %, body, rubriker, fokus, .wrap, reduced-motion.
packages/tokens/src/index.css	Importerar båda. Det appen importerar.

Rotens font-size är 62,5 %: 1rem = 10px, och --spacing: 0.4rem ger Tailwinds vanliga px-semantik (p-4 = 16px).
--color-ai-* är reserverat för AI-ytor och får aldrig betyda status.
--sidebar är shadcns token för sidopanelens färg. Breddmåttet heter därför --sidebar-w.
--color-page-deep är ett steg mörkare än --color-page och används för helbreddsband som ska läsas som en egen del av sidan. Ljusare än --color-border, så att kortens ramar inte försvinner mot botten.
Nya utilities som ligger utanför Tailwinds skala måste registreras i cn() – annars plockas de tyst bort av tailwind-merge.

Inga – delen är fristående.

Inget mörkt läge. Tokens är enfärgade och prototypen har ingen mörk variant.
Bara två bottennivåer: page och page-deep. En tredje bör inte läggas till utan att någon bestämt vad nivåerna betyder.