Migreringsguide

Fra 0.2 til 0.3

Versjon 0.3 oppdaterer avhengighetene. Den eneste brytende endringen gjelder Calendar.

Bytt utgåtte props på Calendar

Calendar bruker nå react-day-picker 10, som har fjernet props som var markert som utgått. TypeScript sier fra hvis du bruker noen av dem:

Fra 0.1 til 0.2

Versjon 0.2 gjør det mulig å endre hele uttrykket med et tema – farger, typografi, form, tetthet, skygger og bevegelse. Temaet er delt i merkevare og fargevariant, og lys/mørk modus har fått sitt eget attributt.

Ingenting krasjer hvis du ikke migrerer, men flere av endringene gir stille visuelle feil. Gå gjennom stegene under.

Nye krav

Fargene bruker CSS-funksjonen light-dark(). Den krever Chrome/Edge 123, Safari 17.5 eller Firefox 120 (fra mai 2024) eller nyere. I eldre nettlesere vises ingen farger fra designsystemet.

1. Importer fontene

Fontene ligger ikke lenger i styles.css, slik at hver merkevare kan levere sine egne. Uten importen faller all tekst tilbake til systemfonten.

@import "tailwindcss";
@import "@kilden/designsystem/styles.css";
@import "@kilden/designsystem/fonts/bekk.css"; /* ny */

2. Bytt tema-attributtene

data-theme har fått merkevaren som prefiks, og lys/mørk settes med data-color-scheme:

De gamle verdiene treffer ingen regler lenger. Uten migrering får siden standardtemaet bekk-ild, og Vann, Jord og Luft blir stille til Ild. -light og -dark ignoreres, så fargene følger operativsystemet.

Bruker du ThemeSwitcher eller applyThemeToDocument(), settes de nye attributtene automatisk. Husk også attributtene du setter i server-rendret HTML og i inline-skript i <head>.

3. Sjekk egen CSS og egne temaer

• Selektorer på gamle attributter, som [data-theme="ild-dark"] .noe, treffer ikke lenger. Bruk [data-theme="bekk-ild"] og [data-color-scheme="dark"], eller enda bedre: CSS-variablene, som allerede følger temaet.
• font-expanded heter nå font-action. Klassen font-expanded finnes ikke lenger, og gir vanlig font.
• Temaer fra den gamle temabyggeren (:root { … } og .dark { … }) virker i lys modus, men mørk modus virker bare hvis appen selv setter .dark. Lag temaet på nytt i temabyggeren, som nå eksporterer et komplett tema for data-brand. Se Lag ditt eget tema.

4. Sjekk visuelle endringer

• Ingress og ActionText får riktig størrelse (32 og 14 px på desktop, 24 og 12 px på mobil) også uten data-size. Tidligere var størrelses-tokenene udefinerte uten data-size, så tekstene arvet størrelsen fra omgivelsene og ble ofte for små. Uten data-size brukes nå desktop-størrelsene.
• Calendar har 12 px tekst i stedet for 12,8 px.
• text-body, text-leading og text-action setter nå linjehøyde 1,5. Det er det samme som de arvet fra før i de fleste tilfeller.

Alle andre komponenter ser ut som før.

Dette trenger du ikke gjøre noe med

• CSS-variablene har samme navn og verdi som før. Det er bare kommet nye i tillegg (se @kilden/design-tokens/contract.json).
• Tailwind-klassene i appen din (p-4, rounded-md, font-medium, text-sm, shadow-lg …) gir samme resultat for Bekk. p-4, rounded-* og font-* følger nå merkevarens tokens.
• Komponent-API-ene er uendret.

Nytt i denne versjonen

• Egne merkevarer med data-brand: se Lag ditt eget tema.
• Token-klasser for typografi, skygger og bevegelse: text-caption, text-small, text-title, text-heading-sm/-md/-lg, font-display, font-action, shadow-subtle, shadow-floating, shadow-overlay, duration-fast/-default/-slow/-slower og ease-standard/-enter/-exit. Bruk dem i stedet for Tailwinds standardskala når noe skal følge merkevaren.
• data-theme alene gir hele merkevaren, og attributtene kan settes på elementer lenger ned i treet.

Fra 0.0.x til 0.1.0

Denne guiden gjelder deg som oppgraderer fra @kilden/designsystem 0.0.x til 0.1.0. Versjon 0.1.0 gjør designsystemet klart for produksjon, og inneholder noen endringer som krever at du gjør små justeringer i prosjektet ditt.

Se endringsloggen for en fullstendig liste over endringer.

Nye krav

Har du ikke Tailwind CSS v4 fra før, følg Tailwinds installasjonsguide først.

1. Flytt CSS-importen inn i Tailwind-CSS-en

@kilden/designsystem/styles.css er ikke lenger ferdig kompilert CSS, men et Tailwind v4-oppsett. Appen din genererer nå bare klassene som faktisk brukes, i stedet for å laste ca. 140 KB med alle klassene – og du slipper dobbel preflight.

Før – importert fra JavaScript:

// app/layout.tsx eller app/root.tsx
import "@kilden/designsystem/styles.css";

Nå – importert fra CSS-filen der du importerer Tailwind:

/* app.css / globals.css */
@import "tailwindcss";
@import "@kilden/designsystem/styles.css";

Fjern importen fra layout.tsx/root.tsx. Har du egne @theme-variabler for Kilden-fargene (f.eks. --color-on-page), kan du fjerne dem – alle semantiske farger, fonter og tekststørrelser er nå registrert i Tailwind-temaet.

2. Fjern bruk av styles

Eksporten styles (CSS-in-JS-objekter) er fjernet. Bruk Tailwind-klasser eller CSS-variablene fra design tokens i stedet:

// Før
<button style={styles.button.primary}>Send</button>
 
// Nå
<Button>Send</Button>
// eller
<button className="bg-dominant-base-default text-dominant-base-contrast-default">
  Send
</button>

3. Sjekk visuelle endringer

Ingen av disse krever kodeendringer, men de kan påvirke utseendet:

• Skjemafelt (Input, Textarea, Select, Combobox, DateInput, TimePicker, DatePicker) har felles boksstil. Input hadde tidligere understrek.
• DatePicker fyller nå hele bredden i stedet for å være 280 px. Legg til className="w-[280px]" hvis du vil beholde den gamle bredden.
• Label er like stor som feltets innebygde label (text-base). Det gjelder også labels for Checkbox, Switch og RadioGroup.
• FormMessage vises med en rød prikk og nøytral tekst, som feilmeldingen i Input.
• Overskrifter og titler bruker font-medium, siden GT America bare lastes i vektene 300–500.
• Fokusmarkering er lik i alle komponenter, og fungerer i mørke temaer og høykontrastmodus.

4. Sjekk endret oppførsel

• Button med isLoading uten loadingText viser nå children ved siden av spinneren, slik at knappen beholder sitt tilgjengelige navn. Tidligere ble children skjult.
• Combobox nullstiller ikke lenger valgt verdi når den åpnes og lukkes uten endring.
• TimePicker setter bare aria-label="Klokkeslett" når feltet mangler label.
• AlertTitle rendres som div i stedet for h5. Trenger du en overskrift, bruk f.eks. <AlertTitle as="h3">.
• DatePicker setter ikke lenger aria-required på trigger-knappen (det er ikke tillatt på knapper). Påkrevd vises i labelen.
• ThemeSwitcher setter fortsatt data-theme på <html> som standard. Styrer appen temaet selv, kan du slå det av med applyToDocument={false}.

5. Valgfritt: forenkle skjemaene dine

FormField kobler nå Label, skjemaelement, FormDescription og FormMessage automatisk. Manuelle id/htmlFor/aria-describedby fungerer fortsatt, men kan fjernes:

// Før
<FormField>
  <Label htmlFor="name">Navn</Label>
  <Input id="name" aria-invalid="true" aria-describedby="name-error" />
  <FormMessage id="name-error">Navn er påkrevd.</FormMessage>
</FormField>
 
// Nå
<FormField>
  <Label>Navn</Label>
  <Input />
  <FormMessage>Navn er påkrevd.</FormMessage>
</FormField>

Textarea, Combobox, DateInput, TimePicker og DatePicker har også fått label- og error-props på samme måte som Input.

Nytt i denne versjonen

• toast(), useToast() og <Toaster /> for å vise varsler uten egen tilstand. Se Toast.
• useFormControl() for å koble egne skjemaelementer til FormField. Se FormField.
• require("@kilden/designsystem") fungerer på Node 20.19+ og 22.12+, og pakken kan lastes direkte av Node (f.eks. ved SSR og i Vitest).