3 · Effets & mouvement

Ombres, voiles d'état neutres, durées et courbes. Trois familles qui n'existaient pas — et dont l'absence cachait un bug.

Les voiles neutres — et le bug qu'ils corrigent

Les voiles role.X.tint teintent à la couleur d'un rôle. Mais une ligne de tableau survolée ne doit pas virer au violet, et un scrim de modale doit assombrir. D'où des voiles blanc et noir absolus, indépendants de toute palette.

`color.alpha.black`

12%

16%

40%

60%

`color.alpha.white`

12%

16%

Le bug. scrim pointait sur brand.neutral.alpha.10, c'est-à-dire un slateBlue translucide. Sous ce voile, la luminance de la page ne passait que de 0,96 à 0,86 : une modale ne se serait jamais détachée. Il pointe maintenant sur alpha.black.60 → 0,96 → 0,13.

Voiles d'état

C'est le seul groupe qui s'inverse entre les modes : en clair on assombrit (noir), en sombre on éclaircit (blanc). Bascule le thème pour le voir.

state.hover

Voile de survol neutre (ligne de tableau, item de liste).

state.selected

Voile d’un élément sélectionné.

state.active

Voile d’un élément pressé.

Ombres

shadow.raised

shadow.float

shadow.overlay

`shadow.raised`	Légère élévation (carte au repos).
`shadow.float`	Élément flottant (carte au survol, dropdown).
`shadow.overlay`	Élément détaché de la page (modale, drawer).

Géométrie et couleur sont séparées. Le décalage, le flou et l'étalement viennent des primitives (elevation.*) ; la couleur est choisie par le mode — sur fond sombre, une ombre doit être bien plus opaque pour rester lisible (black.8 en clair, black.40 en sombre pour shadow.raised).

Les ombres sont émises en valeurs résolues, pas en var(). Style Dictionary réinjecte les var() dans une valeur courte par recherche de chaîne : quand offsetX vaut 0 et que le spread vaut 0 aussi, il intervertit les deux positions. Un spread non nul se serait retrouvé dans l'offset horizontal.

Mouvement

Token	Valeur	Usage
`motion.duration.hover`	120ms	Changement d'état au survol / focus.
`motion.duration.expand`	200ms	Ouverture d'un accordéon, d'un menu.
`motion.duration.modal`	320ms	Entrée d'une modale ou d'un drawer.

Courbes

Token	Valeur	Usage
`easing.standard`	cubic-bezier(0.2, 0, 0, 1)	Défaut : accélère vite, décélère long. Pour les changements d'état.
`easing.enter`	cubic-bezier(0, 0, 0.2, 1)	Entrée : démarre à pleine vitesse, se pose en douceur.
`easing.exit`	cubic-bezier(0.4, 0, 1, 1)	Sortie : part doucement puis s'échappe.
`easing.emphasized`	cubic-bezier(0.2, 0, 0, 1)	Mouvements appuyés (modale, drawer).

Opacité

opacity.disabled 0.4 Alternative aux couleurs `disabled` dédiées : atténue un composant entier d'un coup.

Deux façons de traiter le désactivé coexistent : les couleurs dédiées (surface.disabled, text.disabled, border.disabled) — plus contrôlables — ou cette opacité globale, qui atténue un composant entier d'un coup. Choisis-en une par composant, pas les deux.