Kilden

Skygger

Designsystemet definerer tre nivåer av skygger (elevation) som gir visuell dybde til elementer. Skyggene brukes til opphøyde elementer som kort, modaler og dropdown-menyer.

Tokens

VisueltTokenCSS-variabelBeskrivelse
elevation.raised-default--elevation-raised-defaultStandard opphøyd element
elevation.raised-hover--elevation-raised-hoverOpphøyd element ved hover
elevation.raised-pressed--elevation-raised-pressedOpphøyd element ved trykk

Interaksjonsmønster

Skyggene er designet for å brukes sammen for å gi visuell tilbakemelding ved interaksjon:

  1. raised-default — Standardtilstanden for et opphøyd element
  2. raised-hover — Når brukeren holder musepekeren over elementet (økt dybde)
  3. raised-pressed — Når elementet er trykket ned (redusert dybde)

Bruk i CSS

.card {
  box-shadow: var(--elevation-raised-default);
}
 
.card:hover {
  box-shadow: var(--elevation-raised-hover);
}
 
.card:active {
  box-shadow: var(--elevation-raised-pressed);
}

Bruk i TypeScript

import { tokens } from "@kilden/design-tokens";
 
const shadow = tokens.elevation["raised-default"];
// → "var(--elevation-raised-default)"