Temaer
Grunnmuren har OBOS sine farger, ikke alle merkevarenes. Trenger du andre farger, skriver du et tema i din egen app som overstyrer våre. Komponentene bruker rollene, så de følger med uten at du rører dem.
Se Farger for alle rollene og hva de er som standard.
Hva er et tema
Et tema er litt CSS i appen din som bytter ut fargene våre med dine:
Og så setter du attributtet der temaet skal gjelde:
- Det funker på en del av siden, ikke bare på hele siden.
- Rekkefølgen CSS-en lastes i spiller ingen rolle, temaet ditt vinner.
- Tema inni tema funker, men bare primitivene arves fra temaet utenfor.
data-theme="default"går tilbake til Grunnmuren sine egne farger.
To måter å gjøre det på
Overstyr rollene
Anbefalt for en annen merkevare. Du setter hver rolle til fargen du vil ha, og har full kontroll på hva som havner hvor. Det er sånn Frøen Hage er laget.
Overstyr primitivene
Primitivene er fargene rollene peker på, som --gm-blue-900. Det går raskt, siden alle rollene som peker på en primitiv følger med. Men --gm-blue-900: #2d3a26 leser rart når fargen er grønn, så bruk det bare til å justere OBOS sin egen palett.
Lag temaet
Skriv fargene som JSON med Grunnmuren sine navn, så lager vi CSS-en. Det viktigste er sjekken: en skrivefeil i en CSS-variabel gjør ingenting uten å si fra, og ingen sjekker kontrasten i temaet ditt. Det gjør denne.
Eksempel-JSON-en har alle rollene, og peker på det de er som standard, så den er et greit sted å starte. Bytt ut det du vil endre og slett resten.
data-theme="mitt-tema"Kontrast
Alle 18 parene temaet endrer holder WCAG 2.2 AA.
| Par | Kontrast | Krav | Ok? |
|---|---|---|---|
primary.text-default på primary.background-default | 12,03:1 | 4,5:1 (tekst på flate) | Ok |
primary.text-default på primary.background-tinted | 10,86:1 | 4,5:1 (tekst på flate) | Ok |
primary.text-default på primary.surface-default | 12,03:1 | 4,5:1 (tekst på flate) | Ok |
primary.text-default på primary.surface-tinted | 10,86:1 | 4,5:1 (tekst på flate) | Ok |
primary.text-default på primary.surface-hover | 10,18:1 | 4,5:1 (tekst på flate) | Ok |
primary.text-default på primary.surface-active | 9,17:1 | 4,5:1 (tekst på flate) | Ok |
primary.base-contrast-default på primary.base-default | 12,03:1 | 4,5:1 (tekst i knapp) | Ok |
primary.base-contrast-default på primary.base-hover | 13,84:1 | 4,5:1 (tekst i knapp) | Ok |
primary.base-contrast-default på primary.base-active | 13,84:1 | 4,5:1 (tekst i knapp) | Ok |
primary.base-contrast-subtle på primary.base-default | 10,18:1 | 4,5:1 (tekst i knapp) | Ok |
primary.base-contrast-subtle på primary.base-hover | 11,71:1 | 4,5:1 (tekst i knapp) | Ok |
primary.base-contrast-subtle på primary.base-active | 11,71:1 | 4,5:1 (tekst i knapp) | Ok |
primary.base-default på primary.background-default | 12,03:1 | 3:1 (knapp mot siden) | Ok |
primary.base-hover på primary.background-default | 13,84:1 | 3:1 (knapp mot siden) | Ok |
primary.base-active på primary.background-default | 13,84:1 | 3:1 (knapp mot siden) | Ok |
accent.base-contrast-default på accent.base-default | 5,07:1 | 4,5:1 (tekst i knapp) | Ok |
accent.base-contrast-subtle på accent.base-default | 4,51:1 | 4,5:1 (tekst i knapp) | Ok |
accent.base-default på accent.background-default | 5,07:1 | 3:1 (knapp mot siden) | Ok |
Sånn ser det ut
CSS
Tokenfila
- Rollene (
primary,accent,neutral,success,danger,warningoginfo) har de samme navnene som på Farger. - Primitivene er fargefamilien, som
"blue": { "900": … }og"white". - En verdi er hex,
rgb()eller en referanse som{primary.base-active}. En referanse til noe fila ikke setter, peker på Grunnmuren sin verdi. - Filer fra Figma (DTCG) og Designsystemet funker også.
- Bare det du setter havner i CSS-en. Et tema med tre farger er helt greit.
Fra kommandolinja
Den samme sjekken følger med @obosbbl/grunnmuren-tailwind, så temaet kan bygges og sjekkes i appen din:
Temaet får navnet til fila, eller det du gir --name. Feil stopper bygget. Kontrast under kravet er en advarsel, med --strict stopper den også. npx grunnmuren-theme --example skriver ut eksempelet.
Det et tema ikke kan
- Tekststiler og animasjon kan ikke endres. Fontfamilie og vekter kan, siden de er primitiver.
- Verktøyet over tar bare farger. Radius, spacing og fonter skriver du i CSS-en selv, ved siden av det verktøyet lager.
- Kontrasten er temaets ansvar. Grunnmuren sjekker sine egne roller mot WCAG 2.2 AA, som er 4.5:1 for tekst og 3:1 for kanter, ikoner og andre UI-elementer. Verktøyet over sjekker de samme parene i ditt, der det endrer en farge.
Alt et tema kan sette, med detaljene, står i README-en til grunnmuren-tailwind.