Suporte a variáveis de cor para ícones

Saiba como usar variáveis de cor para mudar temas nas telas de mapa do seu celular

Os ícones para celular têm um Definir aparência seção usada para definir a aparência dos ícones. Use ColorVariable opção de estilo para usar uma variável de cor uma cor. Usando este estilo, 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. Para obter detalhes sobre como criar telas de mapa, consulte Configurar uma seção de IU de ícone. Para obter detalhes sobre como criar ícones em dispositivos móveis, consulte Ícones de dispositivos móveis.

Guia de cores do ícone para celular

As variáveis de cor são divididas em Usar 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 seu app.

Cada cor de suporte tem três opções, incluindo uma opção avaliável. Considere usar a opção de cor acessível para ícones que não contêm texto para melhorar a navegabilidade dos usuários.

Tabela 1. Paleta de cores do alerta

Nome da cor	Exemplo	Variáveis de cor
Crítico		Variáveis para dispositivos móveis Opção 1: crítico-2 Opção 2: crítico-3 Opção 3 (acessível): crítico-4 Variável da Web Opção 1: -now-color_alert--critical-2 Opção 2: -now-color_alert--critical-3 Opção 3 (acessível): -now-color_alert--critical-4
Alto(a)		Variáveis para dispositivos móveis Opção 1: alerta--alto-2 Opção 2: alerta--alto-3 Opção 3 (acessível): alerta--alto-4 Variável da Web Opção 1: -now-color_alert--high-2 Opção 2: -now-color_alert--high-3 Opção 3 (acessível): -now-color_alert--high-4
Aviso		Variáveis para dispositivos móveis Opção 1: alerta--aviso-2 Opção 2: alerta--aviso-3 Opção 3 (acessível): alerta--aviso-4 Variável da Web Opção 1: -now-color_alert--warning-2 Opção 2: -now-color_alert--warning-3 Opção 3 (acessível): -now-color_alert--warning-4
Moderado		Variáveis para dispositivos móveis Opção 1: moderado-2 Opção 2: moderado-3 Opção 3 (acessível): moderado-4 Variável da Web Opção 1: -now-color_alert--moderate-2 Opção 2: -now-color_alert--moderate-3 Opção 3 (acessível): -now-color_alert--moderate-4
Informação		Variáveis para dispositivos móveis Opção 1: alerta--info-2 Opção 2: alerta--info-3 Opção 3 (acessível): alerta--info-4 Variável da Web Opção: 1 -now-color_alert--info-2 Opção 2: -now-color_alert--info-3 Opção 3 (acessível): -now-color_alert--info-4
Positivo		Variáveis para dispositivos móveis Opção 1: -positivo-2 Opção 2: -positivo-3 Opção 3 (acessível): -positivo-4 Variável da Web Opção 1: -now-color_alert--positive-2 Opção 2: -now-color_alert--positive-3 Opção 3 (acessível): -now-color_alert--positive-4
Baixo(a)		Variáveis para dispositivos móveis Opção 1: baixo-2 Opção 2: baixo-3 Opção 3 (acessível): baixo-4 Variável da Web Opção 1: -now-color_alert--low-2 Opção 2: -now-color_alert--low-3 Opção 3 (acessível): -now-color_alert--low-4

Tabela 2. Paleta de cores agrupada

Nome da cor	Exemplo	Opções de cor
Azul		Variável da Web Opção 1: -now-color_grouped--blue-2 Opção 2: -now-color_grouped--blue-3 Opção 3 (acessível): -now-color_grouped--blue-4
Marrom		Variável da Web Opção 1: -now-color_grouped--brown-2 Opção 2: -now-color_grouped--brown-3 Opção 3 (acessível): -now-color_grouped--brown-4
Cinza		Variável da Web Opção 1: -now-color_grouped--grey-2 Opção 2: -now-color_grouped--grey-3 Opção 3 (acessível): -now-color_grouped--grey-4
Verde		Variável da Web Opção 1: -now-color_grouped--green-2 Opção 2: -now-color_grouped--green-3 Opção 3 (acessível): -now-color_grouped--green-4
Amarelo esverdeado		Variável da Web Opção 1: -now-color_grouped--green-yelow-2 Opção 2: -now-color_grouped--green-yelow-3 Opção 3 (acessível): -now-color_grouped--green-yelow-4
Magenta		Variável da Web Opção 1: -now-color_grouped--magenta-2 Opção 2: -now-color_grouped--magenta-3 Opção 3 (acessível): -now-color_grouped--magenta-4
Laranja		Variável da Web Opção 1: -now-color_grouped--laranja-2 Opção 2" -now-color_grouped--laranja-3 Opção 3 (acessível): -now-color_grouped--laranja-4
Rosa		Variável da Web Opção 1: -now-color_grouped--pink-2 Opção 2: -now-color_grouped--pink-3 Opção 3 (acessível): -now-color_grouped--pink-4
Roxo		Variável da Web Opção 1: -now-color_grouped--roxo-2 Opção 2: -now-color_grouped--roxo-3 Opção 3 (acessível): -now-color_grouped--roxo-4
Turquesa		Variável da Web Opção 1: -now-color_grouped--teal-2 Opção 2: -now-color_grouped--teal-3 Opção 3 (acessível): -now-color_grouped--teal-4
Amarelo		Variável da Web Opção 1: -now-color_grouped--yellow-2 Opção 2: -now-color_grouped--yellow-3 Opção 3 (acessível): -now-color_grouped--yellow-4