Prise en charge des variables de couleur pour les règles d’interface utilisateur

  • Rversion finale: Washingtondc
  • Mis à jour 1 févr. 2024
  • 2 minutes de lecture

    • Découvrez comment utiliser des variables de couleur pour changer le thème dans vos règles d’interface utilisateur pour mobile.

    Utilisez les variables de couleur suivantes dans le champ Valeur de vos règles d’interface utilisateur avec le champ Opération défini sur Définir le style d’interface utilisateur

    • VariableDeCouleurDeFond
    • FontColorVariable à l’extérieur ou à l’intérieur du TextDecorator

    Vous pouvez définir n’importe quelle variable de couleur à partir de la table Propriétés du thème UX [sys_ux_theme_property]. Pour obtenir la liste des variables disponibles, consultez le guide de conception des couleurs ci-dessous. Par exemple :

    {"BackgroundColorVariable » : « --now-color-secondary-3 », « BackgroundColor » : « #3f2c11"}

    Pour en savoir plus sur la création de ces actions de règle d’interface utilisateur, reportez-vous à la section Créer une action de règle d'interface utilisateur pour mobile.

    		 Variable de couleur utilisée dans une action d’interface utilisateur

    Guide des couleurs des règles d’interface utilisateur pour mobile

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

    Palette de couleurs d’alerte
    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 d’alerte
    Nom de la couleur Exemple Variables de couleur
    Critique Combinaison de couleurs d’alerte critique
    Variable mobile
    alerte--critique-0
    Variable Web
    --now-color_alert--critical-0
    Élevée Combinaison de couleurs d’alerte élevée
    Variable mobile
    alerte--haute-0
    Variable Web
    --now-color_alert--high-0
    Warning Combinaison de couleurs d’alerte d’avertissement
    Variable mobile
    alerte--avertissement-0
    Variable Web
    --now-color_alert--warning-0
    Modérée Combinaison de couleurs d’alerte modérée
    Variable mobile
    alerte--moderate-0
    Variable Web
    --now-color_alert--moderate-0
    Info Combinaison de couleurs d’alertes d’informations
    Variable mobile
    alerte--info-0
    Variable Web
    --now-color_alert--info-0
    Positif Combinaison de couleurs d’alertes positives
    Variable mobile
    alerte--positive-0
    Variable Web
    --now-color_alert--positive-0
    Faible Combinaison de couleurs d’alerte faible
    Variable mobile
    alerte--faible-0
    Variable Web
    --now-color_alert--low-0
    Désactivé Combinaison de couleurs d’alerte désactivée
    Variable mobile
    alerte-arrière-plan désactivée
    Variable Web
    --now-color_background--secondary
    Critique (alternatif) Combinaison de couleurs alternative pour l’alerte critique
    Variable mobile
    alerte--critique-4
    Variable Web
    --now-color_alert--critical-4
    Élevé (alternatif) Combinaison de couleurs d’alerte élevée alternative
    Variable mobile
    alerte : élevée-4
    Variable Web
    --now-color_alert--high-4
    Avertissement (alternatif) Combinaison de couleurs d’alerte d’avertissement alternative
    Variable mobile
    alerte--avertissement-4
    Variable Web
    --now-color_alert--warning-4
    Modérée (alternative) Combinaison de couleurs d’alerte modérée alternative
    Variable mobile
    alerte--modéré-4
    Variable Web
    --now-color_alert--moderate-4
    Info (alternatif) Combinaison de couleurs d’alerte d’informations alternative
    Variable mobile
    alerte--info-4
    Variable Web
    --now-color_alert--info-4
    Positif (alternatif) Combinaison de couleurs d’alerte positive alternative
    Variable mobile
    alerte--positive-4
    Variable Web
    --now-color_alert--positive-4
    Faible (alternatif) Combinaison de couleurs d’alerte basse alternative
    Variable mobile
    alerte--faible-4
    Variable Web
    --now-color_alert--low-4
    Désactivé (alternatif) Combinaison de couleurs d’alerte différente 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 bleues
    Variable Web
    --maintenant-color_grouped--bleu-0
    Marron Combinaison de couleurs groupées marron
    Variable Web
    --maintenant-color_grouped--brun-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
    --maintenant-color_grouped--vert-0
    Vert-Jaune Combinaison de couleurs groupées vert-jaune
    Variable Web
    --maintenant-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 rose
    Variable Web
    --maintenant-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 sarcelle
    Variable Web
    --maintenant-color_grouped--sarcelle-0
    Jaune Combinaison de couleurs groupées en jaune
    Variable Web
    --maintenant-color_grouped--jaune-0
    Bleu (alternatif) Combinaison de couleurs groupée bleue alternative
    Variable Web
    --maintenant-color_grouped--bleu-4
    Brun (alternatif) Combinaison de couleurs groupée marron alternative
    Variable Web
    --maintenant-color_grouped--brun-4
    Gris (alternatif) Combinaison de couleurs groupée de gris alternative
    Variable Web
    --maintenant-color_grouped--gris-4
    Vert (alternatif) Combinaison de couleurs groupée verte alternative
    Variable Web
    --maintenant-color_grouped--vert-4
    Vert-jaune (alternatif) Combinaison de couleurs groupées vert-jaune alternée
    Variable Web
    --maintenant-color_grouped--vert-jaune-4
    Magenta (alternatif) Combinaison de couleurs groupées magenta alternée
    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
    --maintenant-color_grouped--rose-4
    Violet (alternatif) Combinaison de couleurs groupée violette alternative
    Variable Web
    --maintenant-color_grouped--violet-4
    Bleu-vert (alternatif) Combinaison de couleurs groupée bleu sarcelle alternative
    Variable Web
    --maintenant-color_grouped--sarcelle-4
    Jaune (alternatif) Combinaison de couleurs groupée jaune alternative
    Variable Web
    --maintenant-color_grouped--jaune-4