Suporte à variável de cor para regras de IU

  • Versão de lançamento: Yokohama
  • Atualizado 30 de jan. de 2025
  • 2 min. de leitura
  • Aprenda a usar variáveis de cor para mudar o tema nas regras da IU para celular.

    Use as seguintes variáveis de cor no campo Valor de suas regras de IU com o campo Operação definido como Definir estilo de IU

    • VariávelCorDeFundo
    • FontColorVariable fora ou dentro do TextDecorator

    Você pode definir qualquer variável de cor na tabela Propriedades do tema de UX [sys_ux_theme_property]. Para obter uma lista de variáveis disponíveis, consulte o guia de design de cores abaixo. Por exemplo:

    {“BackgroundColorVariable”: “--now-color-secondary-3”, “BackgroundColor”: “#3f2c11”}

    Para obter detalhes sobre como criar essas ações de regra de IU, consulte Criar uma ação de regra de IU para celular.

    Variável de cor usada em uma ação de IU

    Guia de cores de regra da IU para celular

    As variáveis de cor são divididas em Use a diretriz de design para identificar a variável de cor certa para o seu caso de uso.

    Paleta de cores de alerta
    As cores da paleta de cores de alerta realçam status, estados e tarefas importantes. Use cores de alerta para comunicar um significado específico, em vez de decoração ou organização.
    Paleta de cores agrupada
    As cores da paleta de cores agrupadas seguem as convenções de cores em uma linha do setor. Use essas cores para mostrar que o item colorido está associado a um setor ou linha de negócios específica. O significado de cada cor depende do contexto, mas deve permanecer consistente em seu app.
    Tabela 1. Paleta de cores de alerta
    Nome da cor Exemplo Variáveis de cor
    Crítico Esquema de cores de alerta crítico
    Variável móvel
    alert--critical-0
    Variável da web
    --now-color_alert--critical-0
    Alto  Esquema de cores de alerta alto
    Variável móvel
    alert--high-0
    Variável da web
    --now-color_alert--high-0
    Aviso Esquema de cores de alerta de aviso
    Variável móvel
    alert--warning-0
    Variável da web
    --now-color_alert--warning-0
    Moderado(a) Esquema de cores de alerta moderado
    Variável móvel
    alert--moderate-0
    Variável da web
    --now-color_alert--moderate-0
    Informações Esquema de cores do alerta de informações
    Variável móvel
    alert--info-0
    Variável da web
    --now-color_alert--info-0
    Positiva Esquema de cores de alerta positivo
    Variável móvel
    alert--positive-0
    Variável da web
    --now-color_alert--positivo-0
    Baixo(a) Esquema de cores de alerta baixo
    Variável móvel
    alert--low-0
    Variável da web
    --now-color_alert--low-0
    Desativado Esquema de cores de alerta desabilitado
    Variável móvel
    alerta-desabilitado-em-segundo plano
    Variável da web
    --now-color_background--secondary
    Crítico (alternativo) Esquema de cores de alerta crítico alternativo
    Variável móvel
    alert--critical-4
    Variável da web
    --now-color_alert--critical-4
    Alto (alternativo) Esquema de cores alternativo de alerta máximo
    Variável móvel
    alert--high-4
    Variável da web
    --now-color_alert--high-4
    Aviso (alternativo) Esquema de cores de alerta de aviso alternativo
    Variável móvel
    alert--warning-4
    Variável da web
    --now-color_alert--warning-4
    Moderado (alternativo) Esquema de cores de alerta moderado alternativo
    Variável móvel
    alert--moderate-4
    Variável da web
    --now-color_alert--moderate-4
    Informações (alternativo) Esquema de cores alternativo do alerta de informações
    Variável móvel
    alert--info-4
    Variável da web
    --now-color_alert--info-4
    Positivo (alternativo) Esquema de cores de alerta positivo alternativo
    Variável móvel
    alert--positive-4
    Variável da web
    --now-color_alert--positive-4
    Baixo (alternativo) Alternativa de esquema de cores de alerta baixo
    Variável móvel
    alert--low-4
    Variável da web
    --now-color_alert--low-4
    Desabilitado (alternativo) Alternativa de esquema de cores de alerta desabilitada
    Variável móvel
    texto-alerta-desabilitado
    Variável da web
    --now-color_text--terciário
    Tabela 2. Paleta de cores agrupada
    Nome da cor Exemplo Opções de cores
    Azul Esquema de cores azul agrupado
    Variável da web
    --now-color_grouped--azul-0
    Marrom Esquema de cores agrupado em marrom
    Variável da web
    --now-color_grouped--brown-0
    Cinza Esquema de cores cinza agrupado
    Variável da web
    --now-color_grouped--gray-0
    Verde Esquema de cores verde agrupado
    Variável da web
    --now-color_grouped--verde-0
    Verde-amarelo Esquema de cores agrupado verde-amarelado
    Variável da web
    --now-color_grouped--verde-amarelo-0
    Magenta Esquema de cores agrupado em Magenta
    Variável da web
    --now-color_grouped--magenta-0
    Laranja Esquema de cores agrupado laranja
    Variável da web
    --now-color_grouped--orange-0
    Rosa Esquema de cores agrupado em rosa
    Variável da web
    --now-color_grouped--pink-0
    Roxo Esquema de cores agrupado roxo
    Variável da web
    --now-color_grouped--purple-0
    Turquesa Esquema de cores agrupado azul-petróleo
    Variável da web
    --now-color_grouped--teal-0
    Amarelo Esquema de cores agrupado amarelo
    Variável da web
    --now-color_grouped--yellow-0
    Azul (alternativo) Esquema de cores azul agrupado alternativo
    Variável da web
    --now-color_grouped--azul-4
    Marrom (alternativo) Alternativa de esquema de cores agrupado em marrom
    Variável da web
    --now-color_grouped--brown-4
    Cinza (alternativo) Esquema de cores agrupado de cinza alternativo
    Variável da web
    --now-color_grouped--gray-4
    Verde (alternativo) Alternativa de esquema de cores agrupado verde
    Variável da web
    --now-color_grouped--verde-4
    Verde-amarelo (alternativo) Esquema de cores agrupado verde-amarelo alternativo
    Variável da web
    --now-color_grouped--verde-amarelo-4
    Magenta (alternativo) Alternativa de esquema de cores agrupado de Magenta
    Variável da web
    --now-color_grouped--magenta-4
    Laranja (alternativo) Alternativa de esquema de cores agrupado laranja
    Variável da web
    --now-color_grouped--orange-4
    Rosa (alternativo) Alternativa de esquema de cores agrupado em rosa
    Variável da web
    --now-color_grouped--pink-4
    Roxo (alternativo) Esquema de cores roxo alternativo agrupado
    Variável da web
    --now-color_grouped--purple-4
    Azul-petróleo (alternativo) Alternativa de esquema de cores agrupado azul-petróleo
    Variável da web
    --now-color_grouped--teal-4
    Amarelo (alternativo) Alternativa de esquema de cores agrupado amarelo
    Variável da web
    --now-color_grouped--yellow-4