Ombres

Les neuf

--shadow-none
--shadow-xs
--shadow-s
--shadow-m
--shadow-l
--shadow-xl
--shadow-highlight
--shadow-inner-s
--shadow-inner-m
--shadow-inner-l
--shadow-inner-s-strong
--shadow-inner-m-strong
--shadow-inner-l-strong

Valeurs

TokenGéométrieClairSombre
--shadow-nonenone
--shadow-xs 0 2px 6px -2px ——
--shadow-s 0 4px 12px -4px ——
--shadow-m 0 6px 18px -6px ——
--shadow-l 0 8px 24px -8px ——
--shadow-xl 0 12px 36px -12px ——
--shadow-inner-s inset 0 1px 3px 25 %15 %
--shadow-inner-m inset 0 2px 6px 25 %15 %
--shadow-inner-l inset 0 3px 9px 25 %15 %
--shadow-inner-s-strong inset 0 1px 3px 25 %15 %
--shadow-inner-m-strong inset 0 2px 6px 25 %15 %
--shadow-inner-l-strong inset 0 3px 9px 25 %15 %
--shadow-highlight 0 4px 12px -4px rgb(0 250 252 / .20), 0 12px 36px -12px rgb(39 104 206 / .50)

Balisage

.mon-panneau { box-shadow: var(--shadow-l); }
.mon-champ   { box-shadow: var(--shadow-inner-s); }