Easy Solutions - Principes / Ombres

Règle fondamentale

Les ombres expriment uniquement l'élévation, jamais la décoration. Toujours en rgba, jamais en couleur opaque.

Interdit

box-shadow: 0 4px 8px #000000

Couleur opaque / trop agressive

Interdit

box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 4px 8px rgba(0,0,0,.08)

Deux shadows sur un même élément

Correct

box-shadow: var(--ds-shadow-md)

Token de l'échelle, rgba uniquement

Une ombre ne doit jamais être appliquée sur un élément disabled un élément inactif ne flotte pas au-dessus de l'interface. Pas de shadow sur les éléments grisés.

Échelle des ombres

4 niveaux d'élévation, du plus discret au plus prononcé.

sm

--ds-shadow-sm 0 1px 4px rgba(0, 0, 0, 0.08) Éléments légèrement surélevés (cards, badges)

md

--ds-shadow-md 0 2px 8px rgba(0, 0, 0, 0.12) Composants flottants (dropdowns, tooltips)

lg

--ds-shadow-lg 0 4px 16px rgba(0, 0, 0, 0.16) Panneaux et drawers

xl

--ds-shadow-xl 0 8px 32px rgba(0, 0, 0, 0.20) Modales et overlays

Élévation & usage

L'ombre reflète la position verticale d'un élément dans l'interface. Plus l'élément est haut, plus l'ombre est prononcée.

Niveau 0

Pas d'ombre

Flat

Éléments dans le flux normal de la page. Textes, labels, contenus.

box-shadow: none

Niveau 1

sm

Surélevé

Cards, badges, éléments qui se distinguent légèrement du fond.

var(--ds-shadow-sm)

Niveau 2

md

Flottant

Dropdowns, tooltips, popovers éléments qui apparaissent au-dessus du contenu.

var(--ds-shadow-md)

Niveau 3

lg

Panneau

Drawers, sidebars, panneaux latéraux qui glissent par-dessus l'interface.

var(--ds-shadow-lg)

Niveau 4

xl

Overlay

Modales, dialogs éléments au sommet de la hiérarchie visuelle.

var(--ds-shadow-xl)

Do & Don't

Utiliser uniquement les tokens var(--ds-shadow-*)
Même élévation = même shadow sur tous les composants
Shadow toujours en rgba, jamais en couleur opaque
Retirer la shadow sur les éléments disabled
Une seule shadow par élément, sans combinaison

Combiner deux shadows sur un même élément
Utiliser une shadow pour décorer, elle exprime l'élévation uniquement
Shadow en couleur opaque comme #00000033
Appliquer une shadow sur un élément disabled
Inventer une valeur de shadow hors de l'échelle

Règles

Règle

Utiliser uniquement les valeurs de l'échelle via var(--ds-shadow-*). Jamais de valeur brute.

Règle

Ne jamais combiner deux shadows sur un même élément, une seule valeur suffit.

Règle

Pas de shadow sur les éléments disabled, un élément inactif ne flotte pas.

Règle

Shadow toujours en rgba. Une couleur opaque crée un artefact visuel sur fond coloré.