Farger
I Indeks bruker vi semantiske farger. En farge navngis etter hva den brukes til, ikke etter hvordan den ser ut: surface-main og fill-success, ikke «fjell» eller #E4002B.
Navnet er dermed en instruks. Trenger du bakgrunn på et kort, leter du etter surface, og du slipper å vurdere hvilken grå som er den riktige. Dark mode følger med av seg selv, siden hvert semantiske navn har én verdi for light og én for dark.
Background
Vi har to bakgrunnsfarger, default og tinted. De skal kun brukes som bakgrunnsfarge på en side.
ix-color-background-default | |
ix-color-background-tinted |
Surface
Til større overflater som ligger oppå bakgrunnen brukes surface-fargene. For eksempel på Cards, Messages og Accordion.
Main | ix-color-surface-main-default ix-color-surface-main-hover ix-color-surface-main-active |
Info | ix-color-surface-info-default ix-color-surface-info-hover ix-color-surface-info-active |
Success | ix-color-surface-success-default ix-color-surface-success-hover ix-color-surface-success-active |
Warning | ix-color-surface-warning-default ix-color-surface-warning-hover ix-color-surface-warning-active |
Danger | ix-color-surface-danger-default ix-color-surface-danger-hover ix-color-surface-danger-active |
Fill
Brukes til mindre elementer, for eksempel Tag, Checkbox og Badge.
Default
Main | ix-color-fill-main-default ix-color-fill-main-hover ix-color-fill-main-active |
Main - Subtle | ix-color-fill-main-subtle-default ix-color-fill-main-subtle-hover ix-color-fill-main-subtle-active |
Neutral | ix-color-fill-neutral-default ix-color-fill-neutral-hover ix-color-fill-neutral-active |
Neutral - Subtle | ix-color-fill-neutral-subtle-default ix-color-fill-neutral-subtle-hover ix-color-fill-neutral-subtle-active |
Info | ix-color-fill-info-default ix-color-fill-info-hover ix-color-fill-info-active |
Info - Subtle | ix-color-fill-info-subtle-default ix-color-fill-info-subtle-hover ix-color-fill-info-subtle-active |
Success | ix-color-fill-success-default ix-color-fill-success-hover ix-color-fill-success-active |
Success - Subtle | ix-color-fill-success-subtle-default ix-color-fill-success-subtle-hover ix-color-fill-success-subtle-active |
Warning | ix-color-fill-warning-default ix-color-fill-warning-hover ix-color-fill-warning-active |
Warning - Subtle | ix-color-fill-warning-subtle-default ix-color-fill-warning-subtle-hover ix-color-fill-warning-subtle-active |
Danger | ix-color-fill-danger-default ix-color-fill-danger-hover ix-color-fill-danger-active |
Danger - Subtle | ix-color-fill-danger-subtle-default ix-color-fill-danger-subtle-hover ix-color-fill-danger-subtle-active |
Interactive
Interactive | ix-color-fill-interactive-default ix-color-fill-interactive-hover ix-color-fill-interactive-active | Brukes til interaktive elementer, som input, checkbox og radiobutton. |
Disabled | ix-color-fill-interactive-disabled | Elementet kan ikke brukes i det hele tatt |
Read-only | ix-color-fill-interactive-read-only | Kan ikke endres, men kan brukes til å lese/kopiere |
Foreground
Foreground-fargene brukes til tekst og ikoner.
Main
Default tekst | ix-color-foreground-main-default | Main-default på all body-tekst. |
Subtle tekst | ix-color-foreground-main-subtle | Tekst som er mindre viktig kan ha fargen main-subtle, men bruk sparsommelig. |
Emphasis tekst | ix-color-foreground-main-emphasis | Brukes til overskrifter |
Disabled tekst | ix-color-foreground-main-disabled | Elementet kan ikke brukes i det hele tatt |
Read only tekst | ix-color-foreground-main-read-only | Kan ikke endres, men kan brukes til å lese/kopiere |
Inverse
Inverse brukes der det er kontrastbakgrunn, for eksempel i en Tag eller liknende hvor foreground-main ikke kan brukes.
Default tekst | ix-color-foreground-inverse-default | |
Subtle tekst | ix-color-foreground-inverse-subtle |
Link
Link-fargene brukes på interaktiv tekst, for eksempel lenker. Bruk active mens musepekeren holdes nede på teksten, og når teksten har fokus fra tastaturnavigasjon.
Default tekst | ix-color-foreground-link-default |
Hover tekst | ix-color-foreground-link-hover |
Active tekst | ix-color-foreground-link-active |
Status
Status-foreground-fargene brukes på tekst eller ikon og skal brukes som en indikasjon på status, ikke til dekorasjon. Hvis fargen brukes til tekst skal den brukes sammen med et ikon og andre indikatorer enn bare farge.
Info tekst | ix-color-foreground-info-default |
Success tekst | ix-color-foreground-success-default |
Warning tekst | ix-color-foreground-warning-default |
Danger tekst | ix-color-foreground-danger-default |
Fargene er kalibrert for vanlig bakgrunn (6.7–7.6:1 mot hvit) og for
status-surface (5.4–6.5:1). De er ikke kalibrert for pastell-fyllet
fill-*-subtle — der havner info på 4.49:1 og success på 4.36:1, som bryter
WCAG 1.4.3 (4.5:1). Skal du ha tekst på et subtle fyll, bruk
foreground-main-default. Vær også varsom med kombinasjonen mot
surface-*-active, som er nede på 4.36–4.87:1.
Statusen kan kobles automatisk via data-status i stedet for å velge token selv.
Da settes --ix-color-status-foreground sammen med resten av
--ix-color-status-*-variablene, og util-klassen ix-color-status-foreground
leser den. neutral — og elementer uten data-status — får
foreground-main-default, siden det ikke finnes en foreground-neutral-*.
Border
Farger som brukes til border, for eksempel rundt bokser, input-felt og meldinger. Disse finnes kun som variabler, ikke som util-klasser.
Main | var(--ix-color-border-main-default) var(--ix-color-border-main-hover) var(--ix-color-border-main-active) |
Info | var(--ix-color-border-info-default) var(--ix-color-border-info-hover) var(--ix-color-border-info-active) |
Success | var(--ix-color-border-success-default) var(--ix-color-border-success-hover) var(--ix-color-border-success-active) |
Warning | var(--ix-color-border-warning-default) var(--ix-color-border-warning-hover) var(--ix-color-border-warning-active) |
Danger | var(--ix-color-border-danger-default) var(--ix-color-border-danger-hover) var(--ix-color-border-danger-active) |
Focus
Focus border viser hvilket element som har fokus, for eksempel når brukeren navigerer med tastatur. Bruk den rundt input-felt og andre interaktive elementer.
Focus | var(--ix-color-border-focus-default) |
Migrere fra FFE
Hvis du har laget dine egne komponenter eller bruker farger på andre måter fra FFE, kan du bruke denne oversikten for å migrere til Indeks sine farge-variabler.
Denne oversikten er et utgangspunkt for migrering, og ikke nødvendigvis en 1-til-1 mapping. Fargesystemet i Indeks er forenklet fra FFE, og en del FFE-farger har ingen direkte ekvivalent i Indeks. Bruk skjønn, vurder konteksten når du migrerer og ta kontakt med designsystemteamet hvis du er usikker.
| FFE-token | Indeks-token |
|---|---|
| --ffe-color-background-default | ix-color-background-default |
| --ffe-color-background-subtle | |
| --ffe-color-surface-primary-default | ix-color-surface-main-default |
| --ffe-color-surface-primary-default-hover | ix-color-surface-main-hover |
| --ffe-color-surface-primary-default-pressed | ix-color-surface-main-active |
| --ffe-color-surface-secondary-default | |
| --ffe-color-surface-secondary-default-hover | |
| --ffe-color-surface-secondary-default-pressed | |
| --ffe-color-surface-tertiary-default | |
| --ffe-color-surface-tertiary-default-hover | |
| --ffe-color-surface-tertiary-default-pressed | |
| --ffe-color-surface-neutral-default | |
| --ffe-color-surface-neutral-default-hover | |
| --ffe-color-surface-neutral-default-pressed | |
| --ffe-color-surface-feedback-info | ix-color-surface-info-default |
| --ffe-color-surface-feedback-success | ix-color-surface-success-default |
| --ffe-color-surface-feedback-warning | ix-color-surface-warning-default |
| --ffe-color-surface-feedback-critical | ix-color-surface-danger-default |
| --ffe-color-surface-feedback-tip | |
| --ffe-color-fill-primary-default | ix-color-fill-main-default |
| --ffe-color-fill-primary-default-hover | ix-color-fill-main-hover |
| --ffe-color-fill-primary-default-pressed | ix-color-fill-main-active |
| --ffe-color-fill-primary-selected-default | ix-color-fill-main-default |
| --ffe-color-fill-primary-selected-hover | ix-color-fill-main-hover |
| --ffe-color-fill-primary-selected-pressed | ix-color-fill-main-active |
| --ffe-color-fill-primary-subtle | ix-color-fill-main-subtle-default |
| --ffe-color-fill-primary-subtle-hover | ix-color-fill-main-subtle-hover |
| --ffe-color-fill-primary-subtle-pressed | ix-color-fill-main-subtle-active |
| --ffe-color-fill-primary-invisible | |
| --ffe-color-fill-secondary-default | |
| --ffe-color-fill-secondary-default-hover | |
| --ffe-color-fill-secondary-default-pressed | |
| --ffe-color-fill-secondary-subtle | |
| --ffe-color-fill-secondary-subtle-hover | |
| --ffe-color-fill-secondary-subtle-pressed | |
| --ffe-color-fill-tertiary-default | |
| --ffe-color-fill-tertiary-default-hover | |
| --ffe-color-fill-tertiary-default-pressed | |
| --ffe-color-fill-tertiary-subtle | |
| --ffe-color-fill-tertiary-subtle-hover | |
| --ffe-color-fill-tertiary-subtle-pressed | |
| --ffe-color-fill-neutral-default | ix-color-fill-neutral-default |
| --ffe-color-fill-neutral-default-hover | ix-color-fill-neutral-hover |
| --ffe-color-fill-neutral-default-pressed | ix-color-fill-neutral-active |
| --ffe-color-fill-neutral-subtle | ix-color-fill-neutral-subtle-default |
| --ffe-color-fill-neutral-subtle-hover | ix-color-fill-neutral-subtle-hover |
| --ffe-color-fill-neutral-subtle-pressed | ix-color-fill-neutral-subtle-active |
| --ffe-color-fill-neutral-extra-subtle | |
| --ffe-color-fill-neutral-extra-subtle-hover | |
| --ffe-color-fill-neutral-extra-subtle-pressed | |
| --ffe-color-fill-feedback-info | ix-color-fill-info-default |
| --ffe-color-fill-feedback-info-subtle | ix-color-fill-info-subtle-default |
| --ffe-color-fill-feedback-success | ix-color-fill-success-default |
| --ffe-color-fill-feedback-success-subtle | ix-color-fill-success-subtle-default |
| --ffe-color-fill-feedback-warning | ix-color-fill-warning-default |
| --ffe-color-fill-feedback-warning-subtle | ix-color-fill-warning-subtle-default |
| --ffe-color-fill-feedback-critical | ix-color-fill-danger-default |
| --ffe-color-fill-feedback-critical-subtle | ix-color-fill-danger-subtle-default |
| --ffe-color-fill-feedback-tip | |
| --ffe-color-fill-feedback-tip-subtle | |
| --ffe-color-foreground-default | ix-color-foreground-main-default |
| --ffe-color-foreground-subtle | ix-color-foreground-main-subtle |
| --ffe-color-foreground-emphasis | ix-color-foreground-main-emphasis |
| --ffe-color-foreground-inverse | ix-color-foreground-inverse-default |
| --ffe-color-foreground-interactive-link | ix-color-foreground-link-default |
| --ffe-color-foreground-interactive-link-hover | ix-color-foreground-link-hover |
| --ffe-color-foreground-interactive-link-pressed | ix-color-foreground-link-active |
| --ffe-color-foreground-interactive-link-active | ix-color-foreground-link-active |
| --ffe-color-foreground-interactive-disabled | ix-color-foreground-main-disabled |
| --ffe-color-foreground-feedback-info | ix-color-foreground-info-default |
| --ffe-color-foreground-feedback-success | ix-color-foreground-success-default |
| --ffe-color-foreground-feedback-warning | ix-color-foreground-warning-default |
| --ffe-color-foreground-feedback-critical | ix-color-foreground-danger-default |
| --ffe-color-foreground-feedback-tip | |
| --ffe-color-border-primary-default | ix-color-border-main-default |
| --ffe-color-border-primary-default-hover | ix-color-border-main-hover |
| --ffe-color-border-primary-default-pressed | ix-color-border-main-active |
| --ffe-color-border-primary-subtle | |
| --ffe-color-border-primary-subtle-hover | |
| --ffe-color-border-primary-subtle-pressed | |
| --ffe-color-border-primary-emphasis | |
| --ffe-color-border-feedback-info | ix-color-border-info-default |
| --ffe-color-border-feedback-success | ix-color-border-success-default |
| --ffe-color-border-feedback-warning | ix-color-border-warning-default |
| --ffe-color-border-feedback-critical | ix-color-border-danger-default |
| --ffe-color-border-feedback-tip | |
| --ffe-color-border-interactive-focus | ix-color-border-focus-default |
| --ffe-color-border-interactive-selected | |
| --ffe-color-component-form-input-foreground-default | |
| --ffe-color-component-form-input-foreground-subtle | |
| --ffe-color-component-form-input-foreground-placeholder | |
| --ffe-color-component-form-input-foreground-disabled | |
| --ffe-color-component-form-input-foreground-read-only | |
| --ffe-color-component-form-input-foreground-error | |
| --ffe-color-component-form-input-border-active | |
| --ffe-color-component-form-input-fill-default | |
| --ffe-color-component-form-input-fill-default-hover | |
| --ffe-color-component-form-input-fill-default-pressed | |
| --ffe-color-component-form-input-fill-disabled | |
| --ffe-color-component-form-input-fill-read-only | |
| --ffe-color-component-form-input-fill-error | |
| --ffe-color-component-form-toggleswitch-handle-default | |
| --ffe-color-component-form-toggleswitch-handle-disabled | |
| --ffe-color-component-form-toggleswitch-fill-default | |
| --ffe-color-component-form-toggleswitch-fill-default-hover | |
| --ffe-color-component-form-toggleswitch-fill-default-pressed | |
| --ffe-color-component-form-toggleswitch-fill-selected | |
| --ffe-color-component-form-toggleswitch-fill-selected-hover | |
| --ffe-color-component-form-toggleswitch-fill-selected-pressed | |
| --ffe-color-component-form-toggleswitch-fill-selected-disabled | |
| --ffe-color-component-form-toggleswitch-fill-selected-read-only | |
| --ffe-color-component-form-toggleswitch-fill-critical | |
| --ffe-color-component-form-toggleswitch-fill-disabled | |
| --ffe-color-component-form-toggleswitch-fill-read-only | |
| --ffe-color-component-button-action-border-default | |
| --ffe-color-component-button-action-border-hover | |
| --ffe-color-component-button-action-border-pressed | |
| --ffe-color-component-button-action-fill-default | |
| --ffe-color-component-button-action-fill-hover | |
| --ffe-color-component-button-action-fill-pressed | |
| --ffe-color-component-button-action-foreground-default | |
| --ffe-color-component-button-action-foreground-hover | |
| --ffe-color-component-button-primary-border-default | |
| --ffe-color-component-button-primary-border-hover | |
| --ffe-color-component-button-primary-border-pressed | |
| --ffe-color-component-button-primary-fill-default | |
| --ffe-color-component-button-primary-fill-hover | |
| --ffe-color-component-button-primary-fill-pressed | |
| --ffe-color-component-button-primary-foreground-default | |
| --ffe-color-component-button-primary-foreground-hover | |
| --ffe-color-component-button-secondary-border-default | |
| --ffe-color-component-button-secondary-border-hover | |
| --ffe-color-component-button-secondary-border-pressed | |
| --ffe-color-component-button-secondary-fill-default | |
| --ffe-color-component-button-secondary-fill-hover | |
| --ffe-color-component-button-secondary-fill-pressed | |
| --ffe-color-component-button-secondary-foreground-default | |
| --ffe-color-component-button-secondary-foreground-hover | |
| --ffe-color-component-button-tertiary-fill-default | |
| --ffe-color-component-button-tertiary-fill-hover | |
| --ffe-color-component-button-tertiary-fill-pressed | |
| --ffe-color-component-button-tertiary-foreground-default | |
| --ffe-color-component-button-tertiary-foreground-hover | |
| --ffe-color-component-logo-name | |
| --ffe-color-component-logo-number1 | |
| --ffe-color-component-logo-circle-dark-red | |
| --ffe-color-component-logo-circle-light-red |