Système d'ombres et d'élévation
L'élévation représente la superposition d’un élément par rapport à autre sur un axe Z.
Au sein du DSFR, l'élévation est notamment matérialise par une ombre placée sur les éléments mis en avant (élevés) , ainsi que par une couleur de fond, plus claire, en mode sombre.
On distingue 4 niveaux ou étages différents sur l’ensemble des composants du DSFR :
- Base (default) : le niveau par défaut, sans manifestation visuelle.
- Surélevé (raised) : niveau le plus bas, les éléments concernés sont mis en avant par rapport à la base mais existent dans le même contexte et ne se superposent pas (peut notamment servir à souligner une interaction).
- Superposé (overlap) : les éléments concernés passent par-dessus les niveaux précédents (par exemple, lors d’un défilement ou l’ouverture d’un menu) ; pour autant, les niveaux précédents ne sont pas ignorés et partiellement visibles. En code, on trouve $overlap-over et $overlap-above pour gérer les cas où des éléments $overlap sont affichés en même temps sur l’écran (exemple : bandeau consent et menu déroulant).
- Détaché (lifted) : les éléments concernés passent par-dessus les niveaux précédents, et ces derniers sont retirés du champ d’attention de l’utilisateur (par exemple via l’utilisation d’une surcouche assombrissante).
Niveau |
Fond (Bg) |
Valeurs thème clair |
Valeurs thème sombre |
Tokens sketch |
Tokens Figma |
Composants |
---|---|---|---|---|---|---|
Base (default) | Fond : $grey-1000 | Fond : $grey-50 | $background-default-grey | Background : $background/default-grey |
||
Surélevé (raised) | défaut | Fond : $grey-1000 Ombre : 0, 2, 6, 0 rgba(0, 0, 18, 16%) |
Fond : $grey-75 Ombre : 0, 2, 6, 0 rgba(0, 0, 18, 32%) |
$background-raised-grey | Background : $background/elevation/raised-grey Ombre : $raised |
Carte, Header |
alt | Fond : $grey-975 Ombre : 0, 2, 6, 0 rgba(0, 0, 18, 16%) |
Fond : $grey-100 Ombre : 0, 2, 6, 0 rgba(0, 0, 18, 32%) |
$background-alt-raised-grey | Background : $background/elevation/alt-raised-grey Ombre : $raised |
||
contrast | Fond : $grey-950 Ombre : 0, 2, 6, 0 rgba(0, 0, 18, 16%) |
Fond : $grey-125 Ombre : 0, 2, 6, 0 rgba(0, 0, 18, 32%) |
$background-contrast-raised-grey | Background : $background/elevation/contrast-raised-grey Ombre : $raised |
Carte | |
Superposé (overlap) | défaut | Fond : $grey-1000 Ombre : 0, 4, 12, 0 rgba(0, 0, 18, 16%) |
Fond : $grey-100 Ombre : 0, 4, 12, 0 rgba(0, 0, 18, 32%) |
$background-overlap-grey | Background : $background/elevation/overlap-grey Ombre : $overlap |
Navigation principale, Sélecteur de langue. |
alt | Fond : $grey-975 Ombre : 0, 4, 12, 0 rgba(0, 0, 18, 16%) |
Fond : $grey-125 Ombre : 0, 4, 12, 0 rgba(0, 0, 18, 32%) |
$background-overlap-grey | Background : $background/elevation/alt-overlap-grey Ombre : $overlap |
Gestionnaire de consentement | |
contrast | Fond : $grey-950 Ombre : 0, 4, 12, 0 rgba(0, 0, 18, 16%) |
Fond : $grey-150 Ombre : 0, 4, 12, 0 rgba(0, 0, 18, 32%) |
$background-contrast-overlap-grey | Background : $background/elevation/contrast-overlap-grey Ombre : $overlap |
||
Détaché (lifted) |
Fond : $grey-1000 Ombre : 0, 6, 18, 0 rgba(0, 0, 18, 16%) |
Fond : $grey-75 Ombre : 0, 6, 18, 0 rgba(0, 0, 18, 32%) |
$background-lifted-grey | Background : $background/elevation/lifted-grey Ombre : $lifted |
Modale |