Unités de style de couleur
Unités de style de couleur et accessibilité
Soyez judicieux dans votre choix d’unités de style de couleur
var(--gcds-text-primary) plutôt que #333333. Unités de style de couleur globales
- Concevoir des maquettes, des couleurs de texte et des styles globaux (ou de site).
- 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.
- 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 | #ffffff | 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 | 7 | #595959 | 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 | 9.16 | #1f497a | Couleur de lien par défaut pour les hyperliens sur un arrière-plan blanc. | |
| --gcds-link-hover | 5.98 | #1354ec | Couleur de lien pointé pour les hyperliens sur un arrière-plan blanc. | |
| --gcds-link-light | 1 | #ffffff | 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 | 10.77 | #4b248f | Couleur de lien visité pour les hyperliens sur un arrière-plan blanc. |
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.11 | #f2f2f2 | 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 | #ffffff | 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.36 | #8c8c8c | 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 | 6.78 | #b3192e | 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 | 6.78 | #b3192e | La couleur de la bordure de danger sur arrière-plan blanc pour accentuer une action destructrice ou un retour d'expérience critique. | |
| --gcds-danger-text | 6.78 | #b3192e | La couleur du texte de danger sur arrière-plan blanc 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 | #d9d9d9 | Couleur d'arrière-plan désactivé. Utiliser judicieusement pour un élément interactif désactivé. | |
| --gcds-disabled-text | 3.94 | #808080 | 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 | 5.98 | #1354ec | Couleur du texte ciblé, exclusivement pour les éléments interactifs ciblés. | |
| --gcds-focus-border | 5.98 | #1354ec | Couleur de la bordure ciblée, exclusivement pour les éléments interactifs ciblés. | |
| --gcds-focus-text | 1 | #ffffff | Couleur du texte ciblé, exclusivement pour les éléments interactifs ciblés. |
Unités de style de couleur de base
- 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-black | 21 | #000000 | ||
| --gcds-color-blue-50 | 1.12 | #ebf2fa | ||
| --gcds-color-blue-100 | 1.29 | #d6e4f5 | ||
| --gcds-color-blue-150 | 1.47 | #c2d7f0 | ||
| --gcds-color-blue-200 | 1.69 | #adcaeb | ||
| --gcds-color-blue-250 | 1.94 | #99bde6 | ||
| --gcds-color-blue-300 | 2.28 | #85afe0 | ||
| --gcds-color-blue-350 | 2.66 | #70a2db | ||
| --gcds-color-blue-400 | 3.12 | #5c95d6 | ||
| --gcds-color-blue-450 | 3.67 | #4788d1 | ||
| --gcds-color-blue-500 | 4.37 | #337acc | ||
| --gcds-color-blue-550 | 5.19 | #2e6eb8 | ||
| --gcds-color-blue-600 | 6.23 | #2962a3 | ||
| --gcds-color-blue-650 | 7.49 | #24568f | ||
| --gcds-color-blue-700 | 9.16 | #1f497a | ||
| --gcds-color-blue-750 | 11.04 | #193d66 | ||
| --gcds-color-blue-800 | 13.2 | #143152 | ||
| --gcds-color-blue-850 | 15.52 | #0f253d | ||
| --gcds-color-blue-900 | 17.86 | #0a1829 | ||
| --gcds-color-blue-muted | 12.15 | #26374a | ||
| --gcds-color-blue-vivid | 5.98 | #1354ec | ||
| --gcds-color-grayscale-50 | 1.11 | #f2f2f2 | ||
| --gcds-color-grayscale-100 | 1.24 | #e6e6e6 | ||
| --gcds-color-grayscale-150 | 1.41 | #d9d9d9 | ||
| --gcds-color-grayscale-200 | 1.6 | #cccccc | ||
| --gcds-color-grayscale-250 | 1.83 | #bfbfbf | ||
| --gcds-color-grayscale-300 | 2.09 | #b3b3b3 | ||
| --gcds-color-grayscale-350 | 2.43 | #a6a6a6 | ||
| --gcds-color-grayscale-400 | 2.84 | #999999 | ||
| --gcds-color-grayscale-450 | 3.36 | #8c8c8c | ||
| --gcds-color-grayscale-500 | 3.94 | #808080 | ||
| --gcds-color-grayscale-550 | 4.74 | #737373 | ||
| --gcds-color-grayscale-600 | 5.74 | #666666 | ||
| --gcds-color-grayscale-650 | 7 | #595959 | ||
| --gcds-color-grayscale-700 | 8.45 | #4d4d4d | ||
| --gcds-color-grayscale-750 | 10.36 | #404040 | ||
| --gcds-color-grayscale-800 | 12.63 | #333333 | ||
| --gcds-color-grayscale-850 | 15.13 | #262626 | ||
| --gcds-color-grayscale-900 | 17.4 | #1a1a1a | ||
| --gcds-color-green-50 | 1.07 | #ebfaf0 | ||
| --gcds-color-green-100 | 1.16 | #d6f5e1 | ||
| --gcds-color-green-150 | 1.25 | #c2f0d3 | ||
| --gcds-color-green-200 | 1.35 | #adebc4 | ||
| --gcds-color-green-250 | 1.46 | #99e6b5 | ||
| --gcds-color-green-300 | 1.58 | #85e0a6 | ||
| --gcds-color-green-350 | 1.71 | #70db97 | ||
| --gcds-color-green-400 | 1.83 | #5cd689 | ||
| --gcds-color-green-450 | 1.96 | #47d17a | ||
| --gcds-color-green-500 | 2.1 | #33cc6b | ||
| --gcds-color-green-550 | 2.57 | #2eb860 | ||
| --gcds-color-green-600 | 3.24 | #29a356 | ||
| --gcds-color-green-650 | 4.11 | #248f4b | ||
| --gcds-color-green-700 | 5.36 | #1f7a40 | ||
| --gcds-color-green-750 | 7.01 | #196636 | ||
| --gcds-color-green-800 | 9.24 | #14522b | ||
| --gcds-color-green-850 | 12.29 | #0f3d20 | ||
| --gcds-color-green-900 | 15.66 | #0a2915 | ||
| --gcds-color-purple-50 | 1.16 | #f0ebfa | ||
| --gcds-color-purple-100 | 1.38 | #e1d6f5 | ||
| --gcds-color-purple-150 | 1.64 | #d3c2f0 | ||
| --gcds-color-purple-200 | 1.99 | #c4adeb | ||
| --gcds-color-purple-250 | 2.42 | #b599e6 | ||
| --gcds-color-purple-300 | 2.97 | #a685e0 | ||
| --gcds-color-purple-350 | 3.71 | #9770db | ||
| --gcds-color-purple-400 | 4.59 | #895cd6 | ||
| --gcds-color-purple-450 | 5.75 | #7a47d1 | ||
| --gcds-color-purple-500 | 7.06 | #6b33cc | ||
| --gcds-color-purple-550 | 8.13 | #602eb8 | ||
| --gcds-color-purple-600 | 9.36 | #5629a3 | ||
| --gcds-color-purple-650 | 10.77 | #4b248f | ||
| --gcds-color-purple-700 | 12.38 | #401f7a | ||
| --gcds-color-purple-750 | 14.11 | #361966 | ||
| --gcds-color-purple-800 | 15.85 | #2b1452 | ||
| --gcds-color-purple-850 | 17.54 | #200f3d | ||
| --gcds-color-purple-900 | 18.96 | #150a29 | ||
| --gcds-color-red-50 | 1.16 | #fce9eb | ||
| --gcds-color-red-100 | 1.37 | #f9d2d7 | ||
| --gcds-color-red-150 | 1.63 | #f5bcc4 | ||
| --gcds-color-red-200 | 1.93 | #f2a6b0 | ||
| --gcds-color-red-250 | 2.31 | #ef8f9c | ||
| --gcds-color-red-300 | 2.74 | #ec7988 | ||
| --gcds-color-red-350 | 3.22 | #e96375 | ||
| --gcds-color-red-400 | 3.75 | #e64d61 | ||
| --gcds-color-red-450 | 4.31 | #e2364d | ||
| --gcds-color-red-500 | 4.76 | #df2039 | ||
| --gcds-color-red-550 | 5.66 | #c91d34 | ||
| --gcds-color-red-600 | 6.78 | #b3192e | ||
| --gcds-color-red-650 | 8.2 | #9c1628 | ||
| --gcds-color-red-700 | 9.85 | #861322 | ||
| --gcds-color-red-750 | 11.79 | #70101d | ||
| --gcds-color-red-800 | 14.04 | #590d17 | ||
| --gcds-color-red-850 | 16.27 | #430a11 | ||
| --gcds-color-red-900 | 18.38 | #2d060b | ||
| --gcds-color-white | 1 | #ffffff | ||
| --gcds-color-yellow-50 | 1.06 | #fef7e7 | ||
| --gcds-color-yellow-100 | 1.14 | #fcefcf | ||
| --gcds-color-yellow-150 | 1.22 | #fbe7b6 | ||
| --gcds-color-yellow-200 | 1.31 | #fade9e | ||
| --gcds-color-yellow-250 | 1.4 | #f9d686 | ||
| --gcds-color-yellow-300 | 1.49 | #f7ce6e | ||
| --gcds-color-yellow-350 | 1.59 | #f6c655 | ||
| --gcds-color-yellow-400 | 1.7 | #f5be3d | ||
| --gcds-color-yellow-450 | 1.81 | #f4b625 | ||
| --gcds-color-yellow-500 | 1.95 | #f2ad0d | ||
| --gcds-color-yellow-550 | 2.4 | #da9c0b | ||
| --gcds-color-yellow-600 | 3 | #c28b0a | ||
| --gcds-color-yellow-650 | 3.85 | #aa7909 | ||
| --gcds-color-yellow-700 | 5.01 | #916808 | ||
| --gcds-color-yellow-750 | 6.6 | #795706 | ||
| --gcds-color-yellow-800 | 8.89 | #614505 | ||
| --gcds-color-yellow-850 | 11.82 | #493404 | ||
| --gcds-color-yellow-900 | 15.35 | #302303 |