Farger
I Indeks bruker vi semantiske farger. Det betyr at farger defineres og navngis ut fra hvordan de brukes, ikke hvordan de ser ut. For eksempel navngir vi en farge "Background" i stedet for å bruke det visuelle navnet (f.eks fjell) eller en hex-verdi.
Ved å bruke semantiske farger standardiserer vi fargebruk på tvers av våre digitale flater. Fordi fargene har en fast betydning knyttet til bruksområde uavhengig av selve fargetonen, bruker vi navn som "surface-main" og "fill-success". Dette sikrer konsistent og forutsigbar bruk gjennom hele systemet.
Dark mode kommer automatisk med når man bruker semantiske fargevariabelnavn.
Background
Vi har 2 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 elemeneter som f.eks. 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 farger 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 foreground-farger brukes på interaktiv tekst, for eksempel lenker. Bruk active når musepekeren trykker ned på teksten eller når det er fokus på teksten via 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.
Success tekst | ix-color-foreground-success-default |
Danger tekst | ix-color-foreground-danger-default |
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 brukes for å indikere hvilket element som har fokus, for eksempel når man navigerer med tastatur. Kan brukes 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.
Manglende fargevariabler?
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 | |
| --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 |