Farger for Native

Fargene i Indeks kan bygges ut til native-kode. Pakken @sb1/indeks-tokens har en build-colors-kommando som genererer Kotlin-farger til Android og Color Assets til iOS, fra de samme tokenene som ligger bak web.

Hvordan bygge fargene

Du kan kjøre kommandoen med npx uten å installere pakken. Signaturen er den samme uansett plattform, og du styrer resultatet med platform=, path= og valgfritt theme=.

Commit build-scriptet

Legg scriptet dere bygger fargene med i versjonskontroll. Da kan dere se hvilken tokens-versjon appen står på, og når fargene sist ble endret.

Android

For å bygge farger til Android (Kotlin):

npx @sb1/indeks-tokens build-colors platform=android path=./android/colors

Dette genererer en Colors.kt-fil med semantiske farger for både light og dark mode.

Output-eksempel

object Colors {
    object LightDefault {
        val backgroundDefault = Color(0xFFFFFFFF)
        val backgroundNeutral = Color(0xFFF4F5F6)
        // ... flere farger
    }

    object DarkDefault {
        val backgroundDefault = Color(0xFF1E2632)
        val backgroundNeutral = Color(0xFF323B49)
        // ... flere farger
    }
}

iOS

For å bygge farger til iOS (Xcode Color Assets):

npx @sb1/indeks-tokens build-colors platform=ios path=./ios/colors

Dette genererer en .xcassets-mappe med semantiske farger for både light og dark mode.

Output-struktur

SemanticColors.xcassets/
├── Contents.json
├── README.md
└── default/
    ├── Contents.json
    ├── background.default.colorset/
    │   └── Contents.json
    ├── background.neutral.colorset/
    │   └── Contents.json
    └── ... flere farger

Parametere

Parameter	Påkrevd	Betydning
platform=android eller platform=ios	Ja	Hvilken plattform du bygger for
path=<sti>	Ja	Hvor filene skal lagres, for eksempel ./android/colors
theme=<sti>	Nei	Sti til egen JSON-theme-fil. Standard er sb1

Egne themes

Du kan lage ditt eget theme ved å opprette en JSON-fil med et theme-objekt. Generatoren vil da bruke dette themet i stedet for det innebygde sb1-themet.

Eksempel på egen theme-fil

Lag en fil my-theme.json:

{
    "name": "my-custom-theme",
    "identityColor": "#005aa4",
    "colors": {
        "brand": "#0078D8",
        "success": "#00885B",
        "info": "#467CA4",
        "danger": "#C94E4F",
        "warning": "#AF6500",
        "gray": "#6D7888",
        "neutral": "#AF6516"
    },
    "themeable": {
        "font-family": {
            "normal": "System",
            "heading": "System"
        },
        "font-weight": {
            "normal": 400,
            "bold": 600,
            "heading": 700
        },
        "border": {
            "radius": {
                "button": 25,
                "checkbox": 4,
                "input": 8
            }
        }
    }
}

De sju basisfargene under colors er påkrevd. identityColor og themeable er valgfrie.

Bruke eget theme

npx @sb1/indeks-tokens build-colors platform=android path=./android/colors theme=./my-theme.json

Eller for iOS:

npx @sb1/indeks-tokens build-colors platform=ios path=./ios/colors theme=./my-theme.json

Fargeskalaer

Alle farger bygges fra fargeskalaer med 20 steg (0–950) for hver basisfarge:

Basisfarge	Brukes til
brand	Merkevarefargen
success	Bekreftelse og positive tilstander
info	Nøytral informasjon
warning	Advarsel
danger	Feil og destruktive handlinger
gray	Nøytral grå
neutral	Nøytral brun og beige

De semantiske fargene (for eksempel background.default og foreground.main) peker inn i disse skalaene og bytter trinn automatisk mellom light og dark mode.

Se Fargeskalaer for hvordan skalaene genereres, og hvorfor det ikke påvirker resultatet å justere mørkhetsgraden på en basisfarge.

Oppdatere farger

For å oppdatere fargene i native-appen din:

1. Oppdater versjonen av @sb1/indeks-tokens i kommandoen
2. Kjør build-scriptet på nytt
3. Commit de genererte filene

Fargene følger appen fra og med den commiten, så det er dere som bestemmer når endringen slår inn.