Skygger

Designsystemet definerer skygger (elevation) som gir visuell dybde til elementer: raised-* for opphøyde, klikkbare flater, og subtle, floating og overlay for kort, flytende elementer og lag over siden. Skyggene hører til merkevaren.

Tokens

Token	CSS-variabel	Beskrivelse
elevation.raised-default	--elevation-raised-default	Standard opphøyd element
elevation.raised-hover	--elevation-raised-hover	Opphøyd element ved hover
elevation.raised-pressed	--elevation-raised-pressed	Opphøyd element ved trykk
elevation.subtle	--elevation-subtle	Kort og aktive faner (shadow-subtle)
elevation.floating	--elevation-floating	Menyer, popovere, nedtrekkslister og tooltips (shadow-floating)
elevation.overlay	--elevation-overlay	Dialoger, sheets og toasts (shadow-overlay)

Interaksjonsmønster

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

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

Bruk med Tailwind

Skyggene er registrert i Tailwind-temaet når du importerer @kilden/designsystem/styles.css:

<div className="shadow-raised hover:shadow-raised-hover active:shadow-raised-pressed">
  …
</div>
<div className="shadow-subtle">Kort</div>
<div className="shadow-floating">Meny</div>
<div className="shadow-overlay">Dialog</div>

Tailwinds egne skygger (shadow-sm, shadow-lg osv.) følger ikke merkevaren. Komponentene bruker bare klassene over.

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)"