Lag ditt eget tema

Alt det visuelle i Kilden styres av design tokens: farger, statusfarger, typografi, form, tetthet, skygger og bevegelse. Komponentene bruker bare klasser som er koblet til tokenene. Et nytt tema gir derfor et nytt uttrykk uten at komponentene må endres.

Vil du se eksempler, kan du velge en av demo-merkevarene Basic, Geeky eller Goofy under «Tema» i menyen til venstre. De finnes bare i dokumentasjonen og publiseres ikke med pakken.

Merkevare og variant

Et tema består av to deler:

En merkevare kan ha flere varianter (Bekk har bekk-ild, bekk-luft, bekk-vann og bekk-jord). Lys og mørk modus kommer automatisk, og styres med data-color-scheme.

<html data-brand="acme" data-theme="acme-standard"></html>

Det holder å sette ett av attributtene:

• data-brand alene gir merkevarens første variant.
• data-theme alene gir også merkevarens typografi, form og så videre, fordi varianten alltid hører til én merkevare.

Begge kan settes på et element lenger ned i treet, for eksempel for å vise en annen merkevare i en forhåndsvisning.

Alternativ 1: Temabyggeren

Temabyggeren lager et komplett tema som CSS. Velg farger, fonter, radius, tetthet, skygger og bevegelse, og trykk Eksporter. Temabyggeren varsler hvis fargene gir for lav kontrast.

Legg den eksporterte CSS-en etter Kilden, utenfor @layer (eller i et lag som kommer etter kilden.design-tokens):

@import "tailwindcss";
@import "@kilden/designsystem/styles.css";
@import "./acme-fonter.css";
@import "./acme-tema.css"; /* fra temabyggeren */

Alternativ 2: Skriv temaet selv

Alle variablene et tema kan sette står i token-kontrakten, @kilden/design-tokens/contract.json:

{
  "name": "--radius-md",
  "type": "borderRadius",
  "dimensions": ["brand"],
  "colorScheme": false,
  "source": "brand.border-radius.md",
  "default": "4px"
}

• dimensions sier om variabelen hører til merkevaren (brand), varianten (theme) eller størrelsen (size). Et tema setter variablene for brand og theme.
• colorScheme: true betyr at verdien er ulik i lys og mørk modus. Bruk light-dark(lys, mørk).
• source er tokenet verdien kommer fra. Variabler med samme kilde bør ha samme verdi.
• default er verdien Bekk-temaet bruker.

Alternativ 3: I designsystemet

Temaer som skal ligge i Kilden, lages i Tokens Studio og sjekkes inn i packages/design-tokens/src:

1. Lag merkevaresettet brands/<id>.json med de samme tokenene som brands/bekk.json.
2. Lag variantsettet themes/<id>-<variant>.json, og eventuelle nye primitive farger.
3. Legg temaene til i gruppene brand og variant i Tokens Studio.

Testene sjekker at alle merkevarer har de samme tokenene, at den ferdige CSS-en stemmer med tokenene, og at tekst og kantlinjer har nok kontrast etter WCAG.

Ting å vite

• Fonter: Kilden laster bare Bekks fonter (@kilden/designsystem/fonts/bekk.css). Andre merkevarer må deklarere sine egne @font-face. Komponentene bruker vektene light, regular og medium.
• Størrelse: Tokens som avhenger av både merkevare og data-size, krever at begge attributtene står på samme element (i praksis <html>).
• Tetthet: Tailwinds p-4, h-10 og lignende er multipler av --spacing-unit. Det gjelder også appens egne klasser.
• Logo: Logo-komponenten er Bekk-spesifikk. Bruk din egen logo for andre merkevarer.