Suporte de variável de cor para regras de IU

Saiba como usar variáveis de cor para alterar temas nas regras de IU para celular.

Use as seguintes variáveis de cor no Valor Seu campo de regras de IU com Operação campo definido como Defina o estilo de IU Variable de cor de fundo Fonte ColorVariable fora ou dentro de TextDecorador 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.

Guia de cores da regra de IU para celular

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

Paleta de cores do alerta

As cores da paleta de cores do alerta destacam 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 no app.

Tabela 1. Paleta de cores do alerta

Nome da cor	Exemplo	Variáveis de cor
Crítico		Variável móvel alert--critical-0 Variável da web --now-color_alert--critical-0
Alto(a)		Variável móvel alert--high-0 Variável da web --now-color_alert--high-0
Aviso		Variável móvel alert--warning-0 Variável da web --now-color_alert--warning-0
Moderado(a)		Variável móvel alert--moderate-0 Variável da web --now-color_alert--moderate-0
Informações		Variável móvel alert--info-0 Variável da web --now-color_alert--info-0
Positivo		Variável móvel alert--positive-0 Variável da web --now-color_alert--positive-0
Baixo(a)		Variável móvel alert--low-0 Variável da web --now-color_alert--low-0
Desativado		Variável móvel alerta-desabilitado-segundo plano Variável da web --now-color_background--secondary
Crítico (alternativo)		Variável móvel alert--critical-4 Variável da web --now-color_alert--critical-4
Alto (alternativo)		Variável móvel alert--high-4 Variável da web --now-color_alert--high-4
Aviso (alternativo)		Variável móvel alert--warning-4 Variável da web --now-color_alert--warning-4
Moderado (alternativo)		Variável móvel alert--moderate-4 Variável da web --now-color_alert--moderate-4
Informações (alternativa)		Variável móvel alert--info-4 Variável da web --now-color_alert--info-4
Positivo (alternativo)		Variável móvel alert--positive-4 Variável da web --now-color_alert--positive-4
Baixo (alternativo)		Variável móvel alert--low-4 Variável da web --now-color_alert--low-4
Desabilitado (alternativo)		Variável móvel texto-desabilitado-alerta Variável da web --now-color_text--terciário

Tabela 2. Paleta de cores agrupada

Nome da cor	Exemplo	Opções de cor
Azul		Variável da web --now-color_grouped--blue-0
Marrom		Variável da web --now-color_grouped--brown-0
Cinza		Variável da web --now-color_grouped--grey-0
Verde		Variável da web --now-color_grouped--green-0
Amarelo esverdeado		Variável da web --now-color_grouped--verde-amarelo-0
Magenta		Variável da web --now-color_grouped--magenta-0
Laranja		Variável da web --now-color_grouped--laranja-0
Rosa		Variável da web --now-color_grouped--pink-0
Roxo		Variável da web --now-color_grouped--purple-0
Turquesa		Variável da web --now-color_grouped--teal-0
Amarelo		Variável da web --now-color_grouped--yellow-0
Azul (alternativo)		Variável da web --now-color_grouped--blue-4
Marrom (alternativo)		Variável da web --now-color_grouped--brown-4
Cinza (alternativo)		Variável da web --now-color_grouped--grey-4
Verde (alternativo)		Variável da web --now-color_grouped--green-4
Verde-Amarelo (alternativo)		Variável da web --now-color_grouped--verde-amarelo-4
Magenta (alternativo)		Variável da web --now-color_grouped--magenta-4
Laranja (alternativo)		Variável da web --now-color_grouped--laranja-4
Rosa (alternativo)		Variável da web --now-color_grouped--pink-4
Roxo (alternativo)		Variável da web --now-color_grouped--purple-4
Azul-petróleo (alternativo)		Variável da web --now-color_grouped--teal-4
Amarelo (alternativo)		Variável da web --now-color_grouped--yellow-4