Om kategorien
Formål
Én reell skygge (--shadow-elevated) for flytende flater, bygget med color-mix() mellom --color-surface-text og transparent så den følger temaet uten egen mørk-modusvariant. --shadow-soft beholdes kun som et usynlig kompatibilitetstoken.
Egner seg for
- Flytende flater som dialoger, nedtrekkslister og statuslinjer som trenger et lite, konsistent visuelt løft over resten av siden.
Egner seg ikke for
- Ikke for vanlige flater i dokumentflyt, som kort, seksjoner og tabeller; bruk heller
--border-colorog--color-surface-mutednår flater bare skal skilles fra hverandre.
Tokens
| Token | Verdi | Beskrivelse |
|---|---|---|
--shadow-soft | 0 0 0 transparent | Kompatibilitetstoken for eldre flater som tidligere brukte en hvileskygge. Verdien er bevisst gjort usynlig: minimalistiske flater i dokumentflyt skal være optisk flate og skilles med hårfin kantlinje og subtil bakgrunnskontrast, ikke med løft. |
--shadow-elevated | 0 0.45em 1.1em color-mix(in srgb, var(--color-surface-text) 10%, transparent) | Den ene reelle skyggen i systemet: for dialoger, nedtrekkslister, verktøytips og andre overlays som faktisk flyter over siden. Fortsatt ett enkelt lag og lav kontrast, men strammet inn så dybden leses tydelig uten å bli en dekorativ effekt. |