Tilpasning

Du tilpasser Fristil ved å sette CSS-variabler i din egen CSS. Verdiene som følger med pakken er standardverdier, og dine egne vinner over dem.

Fire veier, i den rekkefølgen du bør prøve dem:

Vei	Til hva
Tokens	Farger, på tvers av hele systemet
Komponentvariabler	Form og størrelse på én komponent
Vanlige regler	Alt annet

Egne farger

Skal hele systemet ha organisasjonens farger, er Eget tema raskere: du oppgir merkefargene, og generatoren byggefunksjon skalaene og kontrollerer kontrasten i begge temaer.

Skal du bare endre en farge eller to, overstyrer du variablene i din egen CSS. Last den etter tokens.css:

:root {
  --semantic-interactive-main: #7c3aed;
  --semantic-interactive-contrast: #ffffff;
}

Alt Fristil sender ut ligger i et cascade layer (@layer fristil). CSS uten layer vinner alltid over CSS i et layer, uansett spesifisitet. Du trenger verken !important eller lange selektorer.

Overstyrer du, eier du kontrasten

Fargene i Fristil er kontrollert mot WCAG AA, i begge temaer. Bytter du en av dem, gjelder ikke den garantien lenger, og paret fargen inngår i må måles på nytt. --semantic-interactive-main brukes for eksempel både som lenkefarge på sideflaten og som knappebakgrunn under --semantic-interactive-contrast.

Per tema

Overstyringen over gjelder begge temaer. Vil du ha ulike verdier, skriver du dine egne regler:

:root {
  --semantic-interactive-main: #7c3aed;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --semantic-interactive-main: #c4b5fd;
  }
}

[data-theme="dark"] {
  --semantic-interactive-main: #c4b5fd;
}

De to siste blokkene må begge være med, siden Fristil støtter både systemvalget og et eksplisitt data-theme.

Hvilket lag?

Overstyr semantiske verdier når du vil endre hva en farge betyr. Overstyr palett-verdier når du vil bytte hele skalaen; da følger alle semantiske verdier som peker på den, med.

Form og størrelse

Farger er ikke det eneste du kan endre. Hver komponent har egne variabler for form og størrelse:

:root {
  --fs-button-radius: 9999px;
  --fs-input-radius: 0;
}

Variabel	Standard
--fs-button-padding	var(--size-2) var(--size-4)
--fs-button-radius	var(--size-1)
--fs-badge-padding	var(--size-0-5) var(--size-2)
--fs-badge-radius	var(--size-4)
--fs-alert-padding	var(--size-3) var(--size-4)
--fs-alert-radius	var(--size-1)
--fs-alert-accent	var(--size-1)
--fs-card-padding	var(--size-4)
--fs-card-radius	var(--size-2)
--fs-divider-space	var(--size-4)
--fs-spinner-size	var(--size-6)
--fs-spinner-thickness	2px
--fs-table-cell-padding	var(--size-2) var(--size-3)
--fs-list-gap	var(--size-1)
--fs-tag-padding	var(--size-0-5) var(--size-2)
--fs-tag-radius	var(--size-1)
--fs-avatar-size	var(--size-10)
--fs-avatar-radius	var(--size-1)
--fs-skeleton-height	var(--size-4)
--fs-skeleton-radius	var(--size-1)
--fs-breadcrumbs-gap	var(--size-2)
--fs-pagination-gap	var(--size-1)
--fs-pagination-size	var(--size-10)
--fs-pagination-radius	var(--size-1)
--fs-skip-link-padding	var(--size-2) var(--size-4)
--fs-skip-link-radius	var(--size-1)
--fs-accordion-radius	var(--size-1)
--fs-accordion-padding	var(--size-3) var(--size-4)
--fs-dialog-width	min(32rem, 100%, calc(100vw - var(--size-8)))
--fs-dialog-padding	var(--size-5)
--fs-dialog-radius	var(--size-2)
--fs-tooltip-width	16rem
--fs-tooltip-padding	var(--size-1) var(--size-2)
--fs-tooltip-radius	var(--size-1)
--fs-paragraph-width	70ch
--fs-paragraph-gap	var(--size-3)
--fs-tabs-gap	var(--size-1)
--fs-tabs-padding	var(--size-2) var(--size-4)
--fs-tabs-panel-space	var(--size-4)
--fs-error-summary-padding	var(--size-4)
--fs-error-summary-radius	var(--size-1)
--fs-file-upload-padding	var(--size-2)
--fs-file-upload-radius	var(--size-1)
--fs-avatar-stack-overlap	calc(var(--size-2) * -1)
--fs-popover-width	min(20rem, calc(100vw - var(--size-8)))
--fs-popover-padding	var(--size-3)
--fs-popover-radius	var(--size-1)
--fs-popover-top	settes av komponenten
--fs-popover-left	settes av komponenten
--fs-toast-space	var(--size-4)
--fs-toast-width	min(24rem, calc(100vw - var(--size-8)))
--fs-toast-padding	var(--size-3) var(--size-4)
--fs-toast-radius	var(--size-1)
--fs-suggestion-max-height	calc(var(--size-10) * 4)
--fs-suggestion-radius	var(--size-1)
--fs-suggestion-option-padding	var(--size-2) var(--size-3)
--fs-input-padding	var(--size-2) var(--size-3)
--fs-input-radius	var(--size-1)
--fs-textarea-min-height	calc(var(--size-4) * 5)
--fs-textarea-padding	var(--size-2) var(--size-3)
--fs-textarea-radius	var(--size-1)
--fs-select-radius	var(--size-1)
--fs-select-option-padding	var(--size-2) var(--size-3)
--fs-select-viewport-margin	var(--size-2)
--fs-checkbox-size	var(--size-5)
--fs-checkbox-radius	var(--size-1)
--fs-radio-size	var(--size-5)
--fs-switch-width	var(--size-10)
--fs-switch-height	var(--size-6)
--fs-fieldset-gap	var(--size-2)
--fs-search-icon-space	var(--size-10)
--fs-search-icon-size	var(--size-5)
--fs-toggle-group-radius	var(--size-1)
--fs-toggle-group-height	var(--size-10)
--fs-toggle-group-padding	0 var(--size-4)
--fs-session-timeout-width	26rem
--fs-session-timeout-padding	var(--size-5)
--fs-session-timeout-radius	var(--size-1)
--fs-connection-status-layer	1000
--fs-connection-status-padding	var(--size-2) var(--size-4)

Standardverdiene peker på --size-*-skalaen. Endrer du skalaen, følger komponentene med. Setter du variabelen, gjelder din verdi bare for den komponenten.

Når variabelen ikke rekker

Alt Fristil sender ut, både tokens og komponent-CSS, ligger i @layer fristil. CSS uten layer vinner alltid over CSS i et layer, uansett spesifisitet. Du kan derfor overstyre hva som helst med en enkel selektor:

.fs-button {
  letter-spacing: 0.02em;
}

Uten layeret ville du måttet slå selektorer som .fs-button[data-variant="danger"]:hover, eller ty til !important.

!important snur rekkefølgen

For erklæringer med !important går kaskaden motsatt vei: da vinner CSS inne i et layer over CSS utenfor. Skriver du !important for å være sikker, oppnår du det motsatte. Du trenger det ikke, så la det være.

Tailwind og lagrekkefølgen

Bruker du Tailwind, må laget vårt plasseres. Lagene teller i den rekkefølgen de først blir nevnt, og det siste vinner uansett spesifisitet. Sett rekkefølgen på første linje i CSS-en din:

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

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

Uten den linja får du ett av to problemer, avhengig av hvilken import som kommer først:

Rekkefølge	Hva som skjer
fristil før base	Tailwinds Preflight nullstiller komponentene. Bakgrunnen forsvinner fra knappen.
fristil etter utilities	Komponentene slår Tailwind-klassene dine. p-6 på en .fs-button gjør ingenting.
base, fristil, utilities	Begge deler virker

Dette er testet, ikke antatt: tilpasning.browser.test.ts bygger begge tilfellene i hvert sitt dokument og kontrollerer hva knappen faktisk får.

Fristils eget tema for Tailwind ligger i @fristil/designsystem/tailwind.css. Det er en vanlig CSS-fil, så pakken har ingen avhengighet til Tailwind, og din versjon er den eneste som er i bruk. Se Design tokens.

Ingen shadow DOM

Ingen komponent i Fristil bruker shadow DOM lenger. <fs-calendar> var den eneste, og den er fjernet til fordel for nettleserens eget datopanel. Se Dato i et skjema.

Det betyr at CSS-en din når fram overalt. Du trenger verken ::part() eller å lete etter en vei inn i en skyggerot.

Når CSS ikke er nok

Variabler og laget dekker utseendet. De dekker ikke at komponenten skal gjøre noe annet enn den gjør. Da kan du overta kildekoden til den ene komponenten:

npx @fristil/designsystem overta button --ut=src/ui

Kommandoen kopierer komponentens filer inn i prosjektet ditt, og skriver om henvisningene ut av mappa, slik at kopien virker der den havner:

Kopierte button til src/ui/button/
  button.ts
  button.css

Komponenten er nå din. Oppdateringer av @fristil/designsystem rører den ikke.

Henvisninger ut av mappa peker nå på pakken:
  ../shared.js → @fristil/designsystem/shared

Bytt ut disse importene med kopien:
  @fristil/designsystem/button
  @fristil/designsystem/button.css

Klassenavnene følger med. Importerer du stilarket fra pakken i tillegg, finnes komponenten to ganger, og hvilken som vinner avgjøres av rekkefølgen. Bytt derfor ut importene, som utskriften sier.

Det du gir fra deg er oppdateringene. Rettelser og forbedringer i pakken treffer ikke kopien, og det er du som eier den derfra. Bruk kommandoen på den ene komponenten som trenger det, ikke på alle.

npx @fristil/designsystem overta uten navn lister komponentene. Kopien skrives ikke over hvis mappa finnes fra før, med mindre du legger til --overskriv=ja.