Prise en charge de variables de couleur pour les descriptions d’entrée

  • Rversion finale: Xanadu
  • Mis à jour 1 août 2024
  • 2 minutes de lecture

    • Découvrez comment utiliser des variables de couleur pour modifier le thème dans les descriptions de vos entrées mobiles.

    Utilisez des variables de couleur dans le champ Description de vos entrées pour contrôler la couleur du texte.

    Utilisez des variables de couleur dans le champ Description de vos entrées pour contrôler la couleur du texte lorsque le champ Description est configuré au format HTML.

    Par exemple, en plus des valeurs hexadécimales de couleur telles que #FF0000, vous pouvez utiliser une variable de couleur, telle que --now-color-primary-0. Pour obtenir la liste des variables disponibles, reportez-vous à Considérations relatives au thème de couleur pour mobile.

    Pour en savoir plus sur les entrées, reportez-vous à la section Configurer un écran de formulaire d'entrée.

    		 Variable de couleur utilisée dans une description d’entrée

    Guide des couleurs de la description de l’entrée

    Les variables de couleur sont divisées en Utilisez les directives de conception pour identifier la variable de couleur adaptée à votre cas d’utilisation.

    Palette de couleurs des alertes
    Les couleurs de la palette de couleurs des alertes mettent en évidence les états, les états et les tâches importants. Utilisez des couleurs d’alerte pour communiquer un sens spécifique plutôt que pour la décoration ou l’organisation.
    Palette de couleurs groupée
    Les couleurs de palette de couleurs groupées suivent les conventions de couleur dans un secteur d’activité. Utilisez ces couleurs pour montrer que l’élément coloré est associé à un secteur d’activité ou à un secteur d’activité spécifique. La signification de chaque couleur dépend du contexte, mais doit rester cohérente au sein de votre application.
    Tableau 1. Palette de couleurs des alertes
    Nom de la couleur Exemple Variables de couleurs
    Critique Combinaison de couleurs d’alerte critique
    Variable mobile
    alert--critical-0
    Variable Web
    --now-color_alert--critical-0
    Élevée Combinaison de couleurs d’alerte élevée
    Variable mobile
    alert--high-0
    Variable Web
    --now-color_alert--high-0
    Warning Combinaison de couleurs d’alerte d’avertissement
    Variable mobile
    alert--warning-0
    Variable Web
    --now-color_alert--warning-0
    Modérée Combinaison de couleurs d’alerte modérée
    Variable mobile
    alert--moderate-0
    Variable Web
    --now-color_alert--moderate-0
    Info Combinaison de couleurs d’alerte d’informations
    Variable mobile
    alert--info-0
    Variable Web
    --now-color_alert--info-0
    Positif Combinaison de couleurs d’alerte positive
    Variable mobile
    alert--positive-0
    Variable Web
    --now-color_alert--positive-0
    Faible Combinaison de couleurs d’alerte basse
    Variable mobile
    alert--low-0
    Variable Web
    --now-color_alert--low-0
    Désactivé Combinaison de couleurs d’alerte désactivée
    Variable mobile
    alerte-désactivée-arrière-plan
    Variable Web
    --now-color_background--secondary
    Critique (alternatif) Combinaison de couleurs alternative pour l’alerte critique
    Variable mobile
    alert--critical-4
    Variable Web
    --now-color_alert--critical-4
    Élevé (alternatif) Combinaison de couleurs d’alerte élevée alternative
    Variable mobile
    alert--high-4
    Variable Web
    --now-color_alert--high-4
    Avertissement (alternatif) Combinaison de couleurs d’alerte alternative pour l’avertissement
    Variable mobile
    alert--warning-4
    Variable Web
    --now-color_alert--warning-4
    Modéré (alternatif) Combinaison de couleurs d’alerte modérée alternative
    Variable mobile
    alert--moderate-4
    Variable Web
    --now-color_alert--moderate-4
    Informations (alternatives) Combinaison de couleurs d’alerte d’informations alternative
    Variable mobile
    alert--info-4
    Variable Web
    --now-color_alert--info-4
    Positif (alternatif) Combinaison de couleurs d’alerte positive alternative
    Variable mobile
    alert--positive-4
    Variable Web
    --now-color_alert--positive-4
    Faible (alternatif) Combinaison de couleurs d’alerte basse alternative
    Variable mobile
    alert--low-4
    Variable Web
    --now-color_alert--low-4
    Désactivé (alternatif) Combinaison de couleurs d’alerte alternative désactivée
    Variable mobile
    texte désactivé pour alerte
    Variable Web
    --now-color_text--tertiaire
    Tableau 2. Palette de couleurs groupée
    Nom de la couleur Exemple Options de couleur
    Bleu Combinaison de couleurs groupées en bleu
    Variable Web
    --now-color_grouped--blue-0
    Marron Combinaison de couleurs groupées marron
    Variable Web
    --now-color_grouped--brown-0
    Gris Combinaison de couleurs groupées de gris
    Variable Web
    --now-color_grouped--gray-0
    Vert Combinaison de couleurs groupées vertes
    Variable Web
    --now-color_grouped--green-0
    Vert-Jaune Combinaison de couleurs groupées vert-jaune
    Variable Web
    --now-color_grouped--vert-jaune-0
    Magenta Combinaison de couleurs groupées magenta
    Variable Web
    --now-color_grouped--magenta-0
    Orange Combinaison de couleurs groupées orange
    Variable Web
    --now-color_grouped--orange-0
    Rose Combinaison de couleurs groupées roses
    Variable Web
    --now-color_grouped--rose-0
    Violet Combinaison de couleurs groupées violettes
    Variable Web
    --now-color_grouped--purple-0
    Clair Combinaison de couleurs groupées bleu-vert
    Variable Web
    --now-color_grouped--sarcelle-0
    Jaune Combinaison de couleurs groupées jaunes
    Variable Web
    --now-color_grouped--jaune-0
    Bleu (alternatif) Combinaison de couleurs groupée bleue alternative
    Variable Web
    --now-color_grouped--bleu-4
    Marron (alternatif) Combinaison de couleurs groupée marron alternative
    Variable Web
    --now-color_grouped--brown-4
    Gris (alternatif) Combinaison de couleurs groupée de gris alternative
    Variable Web
    --now-color_grouped--gray-4
    Vert (alternatif) Combinaison de couleurs groupée verte alternative
    Variable Web
    --now-color_grouped--green-4
    Vert-jaune (alternatif) Combinaison de couleurs groupées vert-jaune alternée
    Variable Web
    --now-color_grouped--vert-jaune-4
    Magenta (alternatif) Combinaison de couleurs groupée magenta alternative
    Variable Web
    --now-color_grouped--magenta-4
    Orange (alternatif) Combinaison de couleurs groupée orange alternative
    Variable Web
    --now-color_grouped--orange-4
    Rose (alternatif) Combinaison de couleurs groupée rose alternative
    Variable Web
    --now-color_grouped--rose-4
    Violet (alternatif) Combinaison de couleurs groupée violette alternative
    Variable Web
    --now-color_grouped--purple-4
    Bleu-vert (alternatif) Combinaison de couleurs groupée bleu-vert alternative
    Variable Web
    --now-color_grouped--sarcelle-4
    Jaune (alternatif) Combinaison de couleurs groupée jaune alternative
    Variable Web
    --now-color_grouped--jaune-4