Ombres

Les ombres TDS servent uniquement à exprimer la hiérarchie visuelle entre les surfaces. Elles ne sont jamais décoratives.

Échelle

Token	Variable CSS	Valeur	Usage
`none`	`--tds-shadow-none`	`none`	Surfaces plates, tables, sections formelles
`xs`	`--tds-shadow-xs`	`0 1px 2px rgba(0,0,0,0.05)`	Menus légers, badges sur fond clair
`sm`	`--tds-shadow-sm`	`0 1px 3px rgba(0,0,0,0.08)`	Cards simples, dropdowns, composants actifs
`md`	`--tds-shadow-md`	`0 4px 12px rgba(0,0,0,0.08)`	Modales, popovers, panels
`lg`	`--tds-shadow-lg`	`0 10px 30px rgba(0,0,0,0.12)`	Overlays, dialogues de niveau supérieur
`xl`	`--tds-shadow-xl`	`0 20px 60px rgba(0,0,0,0.16)`	Tooltips, floating UI critiques

Règles d’usage

Utiliser none pour tables, listes de données et surfaces très formelles
Utiliser xs ou sm pour les dropdowns et boutons en hover
Réserver md à la profondeur des modales et panels
lg et xl uniquement pour overlays et éléments flottants critiques
Ne pas cumuler ombre et bordure colorée sur le même élément

Variables CSS

--tds-shadow-none: none;
--tds-shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.05);
--tds-shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.08);
--tds-shadow-md:   0 4px 12px rgba(0, 0, 0, 0.08);
--tds-shadow-lg:   0 10px 30px rgba(0, 0, 0, 0.12);
--tds-shadow-xl:   0 20px 60px rgba(0, 0, 0, 0.16);