@startsidan/tokens

dok · tokens
id: tokens
namn: @startsidan/tokens
sammanfattning: 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å.
uppdaterad: 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.

filer:
- 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.

kontrakt:
- 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.

beroenden: inga
beslut: ADR-002, ADR-008

kvarstår:
- 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.