# Styles! 🎨
Här beskriver vi hur vi jobbar med styles i designsystemet. 

## Dokumentationswebben 💻
Dokumentationswebben inkluderar våra byggda CSS-filer och fonter på samma sätt som andra team som använder sig av designsystemet. 

Dokumentationswebben har egna sass-variabler och sass-hjälpfunktion och använder inte samma som i libs/styles.
Detta på grund av jag inte fick till rätt sökväg vid import, så detta kanske vi vill ändra framöver. 

Vi visar upp tokens på dokumentationswebben, dessa genereras med hjälp av script i tools/token-management.

### Skapa assets till dokumentationswebben 
1. Läs README i tools/token-management
2. Hämta hem senaste från Figma 
2. Skapa Web-Assets
3. Byggda filer versionshanteras nu i källkoden

### Riktlinjer för dokumentationswebben
1. Använd primärt våra egna komponenter
2. Om det inte går - skriv egen css/scss i komponent-filen
3. Finns lite gemensam style i global/app.scss och global/_styles.scss, men håll det så enkelt som möjligt. 
   När vi jobbar om dokumentationswebben så kan vi förtydliga och förenkla stylen ännu mer.

## Kod komponenterna 📦
Komponentdesignen sätts primärt i Figma. Där definieras vilka tokens som är aktuella för komponenten. 
Övrig style är vanlig CSS/Sass i komponentens style. Just nu är det manuell handpåläggning att få samma token mellan Figma och kod, ingen automatisk process. 

### Vad är ett token? 
Att avgöra om en CSS-property är ett token eller ej är inte alltid så lätt. Vi har under 2025 arbetat igenom 
alla våra färger så dessa är generellt tokens. Däremot om en komponent ska ha en viss padding eller margin behöver
inte alltid vara en token. Vi har en Milestone som går ut på att arbeta igenom tokens för numeriska värden. I det 
arbetet kommer vi förtydliga mer om när vi använder token och när vi inte gör det. 
Till det arbetet är gjort så fattar vi beslut gemensamt per komponent. 

### Regler för komponent-token  
1. Alla färger är ett token - kan finnas undantag, men har inte sett något ännu
2. Om en CSS-property behöver exponeras från en komponent för att team kan behöva ändra den så är det ett komponent-token

### Uppdatera komponentvariabler 
Alla CSS-properties behöver inte vara tokens. En del CSS är "hårdkodad" till komponenten. 
Vad som är en token eller inte beslutas av teamet, men tanken är att det är något som kan behöva ändras ev team eller av annan implementerande organisation. 
Ledordet är dock att vi håller det enkelt och exponerar inte tokens i onödan då dom inte kan plockas bort hur som helst, utan följer vårt mönster för deprecation. 

1. Gör uppdateringen i Figma 
2. Uppdatera manuellt i koden - vi har ännu inga skript som hanterar komponent-variabler automatiskt.


## Besluta
* Vilken dokumentation ska vi ha vart? 
* Hur vi vill jobba med scss kontra CSS-variabler
* Vilka scss-variabler vill vi exponera? 
* Hur vill vi dela dom mellan apps och libs i nx-repot? Fick inte import av scss-variabler att fungera

