Suporte de variável de cor para descrições de entrada

Saiba como usar variáveis de cor para mudar o tema em suas descrições de entrada móveis.

Use variáveis de cor no campo Descrição de suas entradas para controlar a cor do texto. Use variáveis de cor no campo Descrição de suas entradas para controlar a cor do texto quando o campo Descrição estiver configurado como HTML. Por exemplo, além de valores hexadecimais de cor como #FF0000, você pode usar uma variável de cor, como --now-color-primary-0. Para obter uma lista de variáveis disponíveis, consulte Considerações do tema de cores para dispositivos móveis. Para obter detalhes sobre entradas, consulte Configurar uma tela de formulário de entrada.

Guia de cores da descrição de entrada

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 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 para 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 de setor. Use essas cores para mostrar que o item colorido está associado a um setor ou linha de negócios específico. O significado de cada cor depende do contexto, mas deve permanecer consistente na sua aplicação.

Tabela 1. Paleta de cores de alerta

Nome da cor	Exemplo	Variáveis de cor
Crítico		Variável móvel alerta--critical-0 Variável da web --now-color_alert--critical-0
Alta		Variável móvel alerta--high-0 Variável da web --now-color_alert--high-0
Aviso		Variável móvel alerta--aviso-0 Variável da web --now-color_alert--warning-0
Moderado		Variável móvel alerta--moderate-0 Variável da web --now-color_alert--moderate-0
Informações		Variável móvel alerta--info-0 Variável da web --now-color_alert--info-0
Positivo		Variável móvel alerta--positive-0 Variável da web --now-color_alert--positive-0
Baixo(a)		Variável móvel alerta--low-0 Variável da web --now-color_alert--low-0
Desativado		Variável móvel alerta-desabilitado-background Variável da web --now-color_background--secondary
Crítico (alternativo)		Variável móvel alerta--critical-4 Variável da web --now-color_alert--critical-4
Alto (alternativo)		Variável móvel alerta--high-4 Variável da web --now-color_alert--high-4
Aviso (alternativo)		Variável móvel alerta--warning-4 Variável da web --now-color_alert--warning-4
Moderado (alternativo)		Variável móvel alerta--moderate-4 Variável da web --now-color_alert--moderate-4
Informações (alternativas)		Variável móvel alerta--info-4 Variável da web --now-color_alert--info-4
Positivo (alternativo)		Variável móvel alerta--positive-4 Variável da web --now-color_alert--positive-4
Baixo (alternativo)		Variável móvel alerta--low-4 Variável da web --now-color_alert--low-4
Desabilitado (alternativo)		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 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--gray-0
Verde		Variável da web --now-color_grouped--Green-0
Verde-amarelado		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--orange-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--gray-4
Verde (alternativo)		Variável da web --now-color_grouped--Green-4
Verde-amarelado (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--orange-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--petróleo-4
Amarelo (alternativo)		Variável da web --now-color_grouped--yellow-4