Unités de style de couleur
Les unités de style de couleur définissent les couleurs pour les composants et les styles globaux.
Unités de style de couleur et accessibilité
Les composants de Système de design GC sont conformes
Lorsque vous utilisez des unités de style de couleur, vérifiez si vos combinaisons de couleurs satisfont aux normes en matière d'accessibilité du contraste des couleurs à l'aide de l'outil
Soyez judicieux dans votre choix d'unités de style de couleur
Sélectionnez les unités de style globales en fonction de leur utilisation prévue et de vos besoins.
Remplacez les valeurs codées en dur dans votre code par les unités de style de couleur proposées par Système de design GC, comme var(--gcds-text-primary) plutôt que #000000.
Unités de style de couleur globales
Utilisez les unités de style globales pour :
- Concevoir des maquettes, des couleurs de texte et des styles globaux (ou de site) pour la typographie ou l'espacement.
- Communiquer le sens associé à l'unité de style. Les unités de style globales suivent des règles sémantiques.
- Créer de nouvelles unités de style pour vos composants.
Utilisez les unités de style d'état global pour :
- Appliquer un style uniforme aux états de vos composants.
Texte
| Aperçu | Nom de l'unité de style | Rapport de contraste | Valeur hex | Utilisation |
|---|---|---|---|---|
| --gcds-text-light | 1 | #FFF | Couleur claire principale du texte. À utiliser sur un arrière-plan de nuance 700 ou plus foncé (comme --gcds-bg-dark). | |
| --gcds-text-primary | 12.63 | #333333 | Couleur principale du texte. À utiliser sur un arrière-plan de nuance 50 ou plus clair (comme --gcds-bg-white). | |
| --gcds-text-secondary | 9.33 | #43474E | Couleur de texte contrastante (alternative à --gcds-text-primary). À utiliser sur un arrière-plan de nuance 50 ou plus clair (comme --gcds-bg-white). |
Lien
| Aperçu | Nom de l'unité de style | Rapport de contraste | Valeur hex | Utilisation |
|---|---|---|---|---|
| --gcds-link-default | 10.38 | #284162 | Couleur de lien par défaut pour les hyperliens sur un arrière-plan blanc. | |
| --gcds-link-hover | 8.58 | #0535d2 | Couleur de lien pointé pour les hyperliens sur un arrière-plan blanc. | |
| --gcds-link-light | 1 | #FFF | Couleur d'hyperlien pâle par défaut pour les arrière-plans à valeur 700 ou plus sombres (p. ex. --gcds-color-blue-700). | |
| --gcds-link-visited | 7.22 | #7532B8 |
Arrière-plan
| Aperçu | Nom de l'unité de style | Rapport de contraste | Valeur hex | Utilisation |
|---|---|---|---|---|
| --gcds-bg-dark | 12.63 | #333333 | Couleur foncée principale de l'arrière-plan. À utiliser avec du texte de nuance 100 ou plus clair (comme --gcds-text-light). | |
| --gcds-bg-light | 1.12 | #F1F2F3 | Couleur claire d'arrière plan (alternative à --gcds-bg-white). À utiliser avec du texte de nuance 700 ou plus foncé (comme --gcds-text-primary). | |
| --gcds-bg-primary | 12.15 | #26374A | Couleur de surbrillance de l'arrière-plan. À utiliser avec du texte de nuance 100 ou plus clair (comme --gcds-text-light). | |
| --gcds-bg-white | 1 | #FFF | Couleur principale de l'arrière-plan. À utiliser avec du texte de nuance 700 ou plus foncé (comme --gcds-text-primary). |
Bordure
| Aperçu | Nom de l'unité de style | Rapport de contraste | Valeur hex | Utilisation |
|---|---|---|---|---|
| --gcds-border-default | 3.86 | #7D828B | Couleur par défaut pour les bordures et les icônes sur un arrière-plan blanc. |
État danger
| Aperçu | Nom de l'unité de style | Rapport de contraste | Valeur hex | Utilisation |
|---|---|---|---|---|
| --gcds-danger-background | 1.27 | #FBDDDA | La couleur de l'arrière-plan de danger pour accentuer une action destructrice ou un retour d'expérience critique en arrière-plan. | |
| --gcds-danger-border | 5.51 | #d3080c | La couleur de la bordure de danger sur blanc ou sur arrière-plans de danger pour accentuer une action destructrice ou un retour d'expérience critique. | |
| --gcds-danger-text | 7.06 | #A62A1E | La couleur du texte de danger sur blanc ou arrière-plans de danger pour accentuer une action destructrice ou un retour d'expérience critique. |
État désactivé
| Aperçu | Nom de l'unité de style | Rapport de contraste | Valeur hex | Utilisation |
|---|---|---|---|---|
| --gcds-disabled-background | 1.41 | #D6D9DD | Couleur d'arrière-plan désactivé. Utiliser judicieusement pour un élément interactif désactivé. | |
| --gcds-disabled-text | 7.05 | #545961 | Couleur du texte désactivé. Utiliser judicieusement pour un élément interactif désactivé. |
État ciblé
| Aperçu | Nom de l'unité de style | Rapport de contraste | Valeur hex | Utilisation |
|---|---|---|---|---|
| --gcds-focus-background | 8.58 | #0535d2 | Couleur du texte ciblé, exclusivement pour les éléments interactifs ciblés. | |
| --gcds-focus-border | 8.58 | #0535d2 | ||
| --gcds-focus-text | 1 | #FFF | Couleur du texte ciblé, exclusivement pour les éléments interactifs ciblés. |
Unités de style de couleur de base
Utilisez les unités de style de base lorsqu'il vous faut quelque chose de précis pour construire vos propres composants, unités de style ou images, mais vérifiez d'abord s'il existe des unités de style globales.
Utilisez les unités de style de base pour :
- Combler les lacunes lorsqu'il n'existe aucune unité de style globale.
- Concevoir un visuel personnalisé en faisant appel à la gamme de couleurs complète.
- Prendre en charge vos propres composants.
- Fournir une base pour construire (et potentiellement publier) vos propres unités de style.
| Aperçu | Nom de l'unité de style | Rapport de contraste | Valeur hex | Utilisation |
|---|---|---|---|---|
| --gcds-color-grayscale-0 | 1 | #FFF | ||
| --gcds-color-grayscale-50 | 1.12 | #F1F2F3 | ||
| --gcds-color-grayscale-100 | 1.41 | #D6D9DD | ||
| --gcds-color-grayscale-300 | 2.25 | #A8ADB4 | ||
| --gcds-color-grayscale-500 | 3.86 | #7D828B | ||
| --gcds-color-grayscale-700 | 7.05 | #545961 | ||
| --gcds-color-grayscale-800 | 9.33 | #43474E | ||
| --gcds-color-grayscale-900 | 12.63 | #333333 | ||
| --gcds-color-grayscale-1000 | 21 | #000 | ||
| --gcds-color-blue-100 | 1.27 | #D7E5F5 | ||
| --gcds-color-blue-500 | 3.88 | #6584A6 | ||
| --gcds-color-blue-650 | 10.38 | #284162 | ||
| --gcds-color-blue-700 | 9.67 | #33465c | ||
| --gcds-color-blue-750 | 4.85 | #1E7B96 | ||
| --gcds-color-blue-800 | 9.47 | #2b4380 | ||
| --gcds-color-blue-850 | 8.58 | #0535d2 | ||
| --gcds-color-blue-900 | 12.15 | #26374A | ||
| --gcds-color-red-100 | 1.27 | #FBDDDA | ||
| --gcds-color-red-500 | 5.51 | #d3080c | ||
| --gcds-color-red-700 | 7.06 | #A62A1E | ||
| --gcds-color-red-900 | 9.63 | #822117 | ||
| --gcds-color-red-flag | 4.23 | #eb2d37 | ||
| --gcds-color-green-100 | 1.11 | #E6F6EC | ||
| --gcds-color-green-500 | 3.39 | #289F58 | ||
| --gcds-color-green-700 | 7.14 | #03662A | ||
| --gcds-color-green-800 | 12.78 | #023b1a | ||
| --gcds-color-yellow-100 | 1.16 | #FAEDD1 | ||
| --gcds-color-yellow-500 | 3.49 | #B3800F |
Remarque : Les éléments de code utilisent l'orthographe américaine pour « colour » et « grey ».
Aidez-nous à nous améliorer
Vous avez des questions ou des demandes? Faites-nous part de vos commentaires à l'aide de notre formulaire de contact.
Quelque chose ne va pas? Signalez-le sur GitHub en créant un