Overgang til versjon 2
Versjon 2 av designsystemet har omstrukturert tokens for å gjøre det mulig å støtte lys og mørk visning, samt tilrettelegging for flere merkespesifikke temaer i fremtiden. Denne artikkelen viser hvilke tokens som er endret, og hvordan man oppgraderer til versjon 2.
Oppgradering til versjon 2
For de aller fleste skal det fungere å oppgradere alle pakkene til versjon 2.0.0, og deretter kjøre det automatiske migrasjonsscriptet for å gi nye navn til alle tokens. Hvis man konsumerer tokens i Typescript eller Javascript vil ikke migrasjonsscriptet gjøre noen endringer, så da må man manuelt oppdatere de tokenene man bruker til nye navn. Dette gjelder spesielt hvis man bruker fargetokens i Javascript/Typescript.
Migrasjonsscript
For å migrere tokens kan følgende script kjøres fra rotnivå i løsningen din:
npx migrate-aneo-tokens
Scriptet går gjennom alle .css, .scss, .js, .ts, og .tsx filer og leter etter gamle token-navn, og erstatter disse med nye navn. For å sjekke hvilke endringer som vil bli gjort kan man kjøre scriptet i dry-run modus først. Da vil scriptet skrive ut hvilke endringer som vil bli gjort, men uten å faktisk gjøre noen endringer. Kjøring i dry-run gjøres slik:
npx migrate-aneo-tokens --dry-run
Mørkt fargetema
Det nye tokensettet tilbyr tokens som virker både i mørk og lys modus. Mørk modus virker ved at vi bytter ut token-verdiene avhengig av fargetema brukeren vil ha. Aktivt fargetema styres ved hjelp av attributten data-color-scheme på DOM-noder. data-color-scheme kan ha verdiene light, dark, eller auto. Hvis man vil ha hele siden i mørk modus kan man sette data-color-scheme på <html>-elementet på siden slik: <html data-color-scheme="dark">.
Man kan også overstyre fargetema i et spesifikt punkt lenger inn i DOM-nodetreet på siden ved å sette data-color-scheme. F.eks:
<div data-color-scheme="dark" style={{ display: "flex", flexDirection: "column", gap: "var(--layout-spacing-md)"}}> <div style={{ background: "var(--color-background-primary)", color: "var(--color-foreground-primary)", padding: "var(--layout-spacing-md)", border: "1px solid var(--color-foreground-primary)" }}> Innhold i mørk modus </div> <div data-color-scheme="light"> <div style={{ background: "var(--color-background-primary)", color: "var(--color-foreground-primary)", padding: "var(--layout-spacing-md)", border: "1px solid var(--color-foreground-primary)" }}> Innhold i lys modus </div> </div> </div>
På denne dokumentasjonssiden har det også kommet en fargevelger oppe i høyre hjørne, som du kan bruke for å se siden i mørk eller lys modus.
Gap-størrelser for <Grid /> og <Stack />
<Grid />, og <Stack />-komponentene har tidligere hatt en gap-prop som har vært et tall som korresponderer til en størrelse. Dette er endret slik at de nå oppgir en tokenverdi som gap. Nye mulige verdier for gap-prop-en for disse er 0 | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl".
Size-prop for <Spinner />
Spinner har fått endret size-prop'en til å korrespondere til token-navn. Nye mulige verdier er "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl".
Størrelse for <Accordion />
Accordion har fått en size-prop. Og har i tillegg fått endret stilene sine slik at den har padding som standard.
Eksempler
Kosmetiske endringer
I tillegg til mørkt fargetema og noen endrede farger, er også alle knapper endret til å ha full border-radius slik at de får en pilleform. Hvis du ønsker å beholde gammel border-radius anbefales det at du lager dine egne komponenter som wrapper designsystem-komponentene i din egen løsning. I tillegg til dette har <Callout />, <Card />, og <Tag /> fått border istedenfor fyll.
Eksempler
Endrede tokens
Her følger en liste av alle tokens som har fått nye navn i versjon 2.
SCSS Breakpoints
SCSS-variablene for breakpoints har fått nye navn
$layout-breakpoint-extra-small => $layout-breakpoint-xs $layout-breakpoint-small => $layout-breakpoint-sm $layout-breakpoint-medium => $layout-breakpoint-md $layout-breakpoint-large => $layout-breakpoint-lg $layout-breakpoint-extra-large => $layout-breakpoint-xl
CSS Color tokens
color-border
--color-border-primary => --color-foreground-primary --color-border-secondary => --color-foreground-secondary --color-border-dimmed => --color-foreground-dimmed --color-border-accent => --color-foreground-accent --color-border-disabled => --color-foreground-disabled --color-border-divider => --color-alpha-10 --color-border-focus => --color-foreground-focus --color-border-error => --color-foreground-error
color-background-hover
--color-background-hover-primary => --color-background-primary-hover --color-background-hover-secondary => --color-background-secondary-hover --color-background-hover-dimmed => --color-background-dimmed-hover --color-background-hover-accent => --color-background-accent-hover
color-background-active
--color-background-active-primary => --color-background-primary-active --color-background-active-secondary => --color-background-secondary --color-background-active-dimmed => --color-background-dimmed-active --color-background-active-accent => --color-background-accent
color-status
--color-status-positive-dimmed => --color-background-primary --color-status-positive => --color-foreground-positive --color-status-negative-dimmed => --color-background-primary --color-status-negative => --color-foreground-error --color-status-informative-dimmed => --color-background-primary --color-status-informative => --color-foreground-focus --color-status-waiting-dimmed => --color-background-primary --color-status-waiting => --color-foreground-primary
CSS Layout tokens
layout-size
--layout-size-extra-small => --layout-size-xs --layout-size-small => --layout-size-sm --layout-size-medium => --layout-size-md --layout-size-large => --layout-size-lg --layout-size-extra-large7 => --layout-size-7xl --layout-size-extra-large6 => --layout-size-6xl --layout-size-extra-large5 => --layout-size-5xl --layout-size-extra-large4 => --layout-size-4xl --layout-size-extra-large3 => --layout-size-3xl --layout-size-extra-large2 => --layout-size-2xl --layout-size-extra-large => --layout-size-xl
layout-breakpoint
--layout-breakpoint-extra-small => --layout-breakpoint-xs --layout-breakpoint-small => --layout-breakpoint-sm --layout-breakpoint-medium => --layout-breakpoint-md --layout-breakpoint-large => --layout-breakpoint-lg --layout-breakpoint-extra-large => --layout-breakpoint-xl
layout-spacing
--layout-spacing-extra-small => --layout-spacing-xs --layout-spacing-small => --layout-spacing-sm --layout-spacing-medium => --layout-spacing-md --layout-spacing-large => --layout-spacing-lg --layout-spacing-extra-large7 => --layout-spacing-7xl --layout-spacing-extra-large6 => --layout-spacing-6xl --layout-spacing-extra-large5 => --layout-spacing-5xl --layout-spacing-extra-large4 => --layout-spacing-4xl --layout-spacing-extra-large3 => --layout-spacing-3xl --layout-spacing-extra-large2 => --layout-spacing-2xl --layout-spacing-extra-large => --layout-spacing-xl
layout-border-radius
--layout-border-radius-extra-small => --layout-border-radius-xs --layout-border-radius-small => --layout-border-radius-sm --layout-border-radius-medium => --layout-border-radius-md --layout-border-radius-large => --layout-border-radius-lg
layout-border-width
--layout-border-width-small => --layout-border-width-sm --layout-border-width-medium => --layout-border-width-md --layout-border-width-large => --layout-border-width-lg --layout-border-width-extra-large => --layout-border-width-xl
CSS Typography tokens
typography-line-height
--typography-line-height-extra-small => --typography-line-height-xs --typography-line-height-small => --typography-line-height-sm --typography-line-height-medium => --typography-line-height-md --typography-line-height-large => --typography-line-height-lg --typography-line-height-extra-large2 => --typography-line-height-2xl --typography-line-height-extra-large => --typography-line-height-xl
typography-font-size
--typography-font-size-extra-small2 => --typography-font-size-2xs --typography-font-size-extra-small => --typography-font-size-xs --typography-font-size-small => --typography-font-size-sm --typography-font-size-medium => --typography-font-size-md --typography-font-size-large => --typography-font-size-lg --typography-font-size-extra-large8 => --typography-font-size-8xl --typography-font-size-extra-large7 => --typography-font-size-7xl --typography-font-size-extra-large6 => --typography-font-size-6xl --typography-font-size-extra-large5 => --typography-font-size-5xl --typography-font-size-extra-large4 => --typography-font-size-4xl --typography-font-size-extra-large3 => --typography-font-size-3xl --typography-font-size-extra-large2 => --typography-font-size-2xl --typography-font-size-extra-large => --typography-font-size-xl
typography-paragraph-spacing
--typography-paragraph-spacing-extra-small => --typography-paragraph-spacing-xs --typography-paragraph-spacing-small => --typography-paragraph-spacing-sm --typography-paragraph-spacing-medium => --typography-paragraph-spacing-md --typography-paragraph-spacing-large => --typography-paragraph-spacing-lg
Typescript/Javascript
I Typescript/Javascript har tokenene fått tilsvarende nye navn. Her har også fargetokens blitt prefixet med Light og Dark for de tokenene som har separate verdier avhengig av fargetema.