Design tokens

Alle verdier er CSS-variabler i tokens.css, både farger, avstander og skriftstørrelser.

import "@fristil/designsystem/tokens.css"

.min-komponent {
  color: var(--semantic-interactive-main);
  padding: var(--size-4);
  font-size: var(--font-size-m);
}

To lag med farger

Palett (--palette-{farge}-{trinn}) er råverdiene. Semantisk (--semantic-{sammenheng}-{rolle}) peker på en palettfarge og sier hva den betyr.

Bruk det semantiske laget. Da følger komponenten din med når paletten justeres.

Semantiske farger

Gruppe	Variabler	Brukes til
Side	--semantic-page-background, --semantic-page-foreground	Bakgrunn og tekst på en vanlig flate
Interaktiv	--semantic-interactive-main, --semantic-interactive-background, --semantic-interactive-foreground, --semantic-interactive-contrast, --semantic-interactive-visited	Lenker, knapper, fokusmarkering. --semantic-interactive-contrast er teksten oppå main.
Suksess	--semantic-success-background, --semantic-success-foreground	Fullført, godkjent
Advarsel	--semantic-warning-background, --semantic-warning-foreground	Krever oppmerksomhet
Fare	--semantic-danger-background, --semantic-danger-foreground	Feil, sletting, avslag
Deaktivert	--semantic-disabled-background, --semantic-disabled-foreground	Kontroller som er slått av
Nøytral	--semantic-neutral-background, --semantic-neutral-foreground	Dempet, men lesbar informasjon
Skillelinjer	--semantic-divider-30, --semantic-divider-100	Rammer og streker, svak og sterk
Dempet tekst	--semantic-muted-foreground	Hjelpetekst, plassholdere, ukedager i kalenderen
Skjemafelt	--semantic-field-border, --semantic-field-border-hover	Rammen rundt felt. Holder 3:1 mot flaten, som WCAG 1.4.11 krever.
Farefylt handling	--semantic-danger-main, --semantic-danger-contrast	Fylt flate på en sletteknapp, og teksten oppå
Over siden	--semantic-shadow-overlay, --semantic-overlay-backdrop	Skyggen under et panel, og flaten bak en dialog
Tastaturfokus	--semantic-focus-ring	Hele ringen rundt det som har fokus, som kortform til outline. Endrer du den, endrer du fokusringen i hele systemet.
Ikoner	--semantic-icon-calendar, --semantic-icon-clock, --semantic-icon-search, --semantic-icon-check, --semantic-icon-dash	Ikoner tegnet inn i en bakgrunn
Standardverdier	--semantic-size-default, --semantic-spacing-default	Fallhøyde for størrelse og avstand

Bruk background og foreground som par. Da er kontrasten kontrollert mot WCAG AA av testene i designsystemet.

Ikoner som tokens. Et ikon som er tegnet inn i en bakgrunn kan ikke lese en CSS-variabel: streken er malt inn i selve bildet. Derfor ligger de fem ikonene i det semantiske laget, slik at de snur med temaet på samme måte som fargene. Bruker du dem selv, sett dem som background-image.

disabled eller neutral? De ser like ut, men kravene er ulike. disabled er for kontroller som er slått av, og er unntatt kontrastkravet i WCAG 1.4.3, og derfor bevisst dempet. neutral er for dempet informasjon brukeren skal lese eller trykke på, og holder 6,7:1.

Er elementet slått av, bruk disabled. Kan brukeren lese eller trykke på det, bruk neutral.

Palett

Seks skalaer: burgundy, forest, ochre, denim, azure og graphite. Trinnene er 5, 10, 30, 50, 70 og 100, der lave tall er lyse. azure mangler trinn 5 og 50, og graphite har i tillegg 0, som er ren hvit.

Størrelsesskalaen

Én skala, --size-*, til alt spatialt: padding, margin, gap, width, height. Ingen egen --spacing-*. Fire piksler som grunnenhet, som Tailwind, så --size-4 tilsvarer p-4.

Variabel	Verdi	Tailwind
--size-px	1px	ingen
--size-0-5	0.125rem	0.5
--size-1	0.25rem	1
--size-2	0.5rem	2
--size-3	0.75rem	3
--size-4	1rem	4
--size-5	1.25rem	5
--size-6	1.5rem	6
--size-7	1.75rem	7
--size-8	2rem	8
--size-10	2.5rem	10
--size-12	3rem	12
--size-16	4rem	16

Typografi

Egen rytme framfor numerisk skala, så navnet sier hvor stor teksten er i forhold til brødteksten.

--font-size-m er brødteksten. --font-size-reference er 16px, grunnstørrelsen rem-verdiene regnes fra.

TypeScript

Alle variabelnavn finnes som en typet oppslagstabell:

import { cssTokens, type CssToken } from "@fristil/designsystem/tokens"

const token: CssToken = "--semantic-interactive-main"
element.style.setProperty(token, "red")

cssTokens["--palette-azure-70"]
// "#1362ae"

Skriver du --semantic-interactiv-main, får du feil i editoren i stedet for en var() som stille faller tilbake til ingenting.

Brekkpunkter og containere

Build-time-verdier, ikke CSS-variabler, og eksporteres derfor som konstanter:

import { Breakpoints, Containers } from "@fristil/designsystem/tokens"

Breakpoints.md   // "768px"
Containers.aside // "384px"

Brekkpunktene følger Tailwind: sm 640px, md 768px, lg 1024px, xl 1280px, 2xl 1536px.

Tailwind

Temaet er en CSS-fil, ikke en forhåndsinnstilling i JavaScript. Pakken har derfor ingen avhengighet til Tailwind i det hele tatt, og to Tailwind-versjoner kan ikke komme i konflikt: det er versjonen i appen din som leser fila.

app.css

@layer theme, base, fristil, components, utilities;

@import "tailwindcss";
@import "@fristil/designsystem/tokens.css";
@import "@fristil/designsystem/tailwind.css";

Den første linja er det viktigste. Se Tilpasning for hvorfor.

Alt temaet legger til heter fs-, som klassene ellers i systemet. Da er bg-neutral-100 fortsatt Tailwinds egen farge:

Klasse	Verdi
text-fs-interactive	--semantic-interactive-main
bg-fs-danger-bg	--semantic-danger-background
text-fs-muted	--semantic-muted-foreground
border-fs-field-border	--semantic-field-border
text-fs-mega	--font-size-mega
max-w-fs-aside	384px
shadow-fs-overlay	--semantic-shadow-overlay
bg-fs-azure-70	--palette-azure-70

Avstandene er koblet til skalaen: Tailwind regner p-4 som calc(var(--spacing) * 4), og --spacing er satt til --size-1. p-4 er dermed nøyaktig --size-4, og endrer du skalaen, følger alle Tailwind-klassene med.

Brekkpunktene er utelatt med vilje. Fristils sm til 2xl har de samme verdiene som Tailwind allerede bruker, så md: virker som før.

Klassene i tabellen er ikke skrevet av hukommelsen: hver utgivelse av Fristil kompilerer temaet med Tailwind og kontrollerer at de kommer ut med tokenene over i seg.

Hele oppsettet, med eksempler som blandes fritt med komponentene, står på Tailwind.

Vil du endre farger, form eller størrelse, se Tilpasning.