Design
Cette page documente les combinaisons de couleurs du site sous forme de boîtes de démonstration.
Usage: Neutral, Soft et Dark sont statiques. Action Dark peut être statique ou interactif. Action Warm est interactif.
Cette page documente les combinaisons de couleurs du site sous forme de boîtes de démonstration.
Usage: Neutral, Soft et Dark sont statiques. Action Dark peut être statique ou interactif. Action Warm est interactif.
Usage: page
.my-surface {
@mixin surface neutral;
}Surface par défaut du site, utilisée pour le fond de page et le texte courant.
Texte faint pour informations secondaires.
Texte accent pour mise en avant.
Usage: notification-bar
.my-surface {
@mixin surface soft;
}Bloc clair pour contenu éditorial, notice ou information secondaire.
Texte faint pour informations secondaires.
Texte accent pour mise en avant.
Usage: top-header, footer
.my-surface {
@mixin surface dark;
}Bloc sombre principal, utilisé pour les grandes zones de navigation ou de pied de page.
Texte faint pour informations secondaires.
Texte accent pour mise en avant.
Usage: top-header menu, dropdown menu
.my-surface {
@mixin surfaceInteractive actionDark actionDarkActive;
}Variante dense pour menu, dropdown ou panneau contextuel, avec son état actif documenté dans la même famille.
Texte faint pour informations secondaires.
Texte accent pour mise en avant.
Usage: button
.my-surface {
@mixin surfaceInteractive actionWarm actionWarmActive;
}Lien d’action sobre sur fond clair, avec un état actif documenté dans la même famille.