Ombres
Jetons d'elevation pour les cartes, modales, tiroirs et popovers.
Référence visuelle
Chaque carte rend l’ombre en direct via boxShadow inline pour comparer les profondeurs côte à côte. Cliquez sur un jeton pour copier le nom de la propriété CSS personnalisée.
Cliquez sur un jeton pour le copier.
Halo d’élévation en mode sombre
En mode sombre, chaque ombre passe à une recette plus lourde : l’alpha de l’ombre externe augmente (+0.35 à +0.55) et un halo blanc inset de 1px (rgba 255,255,255,0.04–0.08) est ajouté le long du bord supérieur. Les surfaces sombres absorbent les ombres noires plates, le halo restaure donc la perception d’élévation. C’est la décision de design EX-QA-PASS-7a — les 5 ombres sont toutes swap-in-dark, aucune n’est stable entre thèmes.
Utilisation
Choisissez l’ombre qui correspond au rôle, pas à la valeur brute. Plus l’élévation est haute, plus le poids visuel et les règles d’accessibilité sont stricts.
shadow-ep-md → carte au repos dans une liste
shadow-ep-lg → carte survolée, dropdown, popover
shadow-ep-overlay → modale, tiroir, CommandMenu (élévation maximale)
shadow-ep-card et shadow-ep-elevated sont des alias sémantiques (plugin 3.1.6) peu utilisés. Préférez les niveaux directs (shadow-ep-md / -lg / -overlay) dans le nouveau code.