Suporte de variável de cor para seções de IU de ícone

Saiba como usar variáveis de cor para mudar o tema nas seções de IU do ícone para celular.

As seções de IU de ícone têm uma seção Cor com dois campos para controlar as cores de primeiro plano e de fundo do elemento. Variável da cor de fundo Variável da cor em primeiro plano Esses dois campos podem ser encontrados nas seguintes tabelas: Inicializador de destino da seção de ícone [sys_sg_navigation_section_destination_applet_launcher] Função de destino da seção do ícone [sys_sg_navigation_section_destination_button] Tela de destino da seção de ícones [sys_sg_navigation_section_destination_screen] Para obter detalhes sobre como criar essas ações, consulte Configurar uma seção de IU de ícone. 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.

Guia de cores da seção IU do ícone do Mobile

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.

Paleta de cores de alerta

Nome da cor	Cor	Exemplo	Opções de cor
Primário			Variável móvel primary Variável da web --now-color--primary-1
Crítico			Variável móvel alerta--critical-2 Variável da web --now-color_alert--critical-2
Alta			Variável móvel alerta--high-2 Variável da web --now-color_alert--high-2
Aviso			Variável móvel alerta--aviso-2 Variável da web --now-color_alert--warning-2
Moderado			Variável móvel alerta--moderate-2 Variável da web --now-color_alert--moderate-2
Informações			Variável móvel alerta--info-2 Variável da web --now-color_alert--info-2
Positivo			Variável móvel alerta--positive-2 Variável da web --now-color_alert--positive-2
Baixo(a)			Variável móvel alerta--low-2 Variável da web --now-color_alert--low-2

Paleta de cores agrupada

Nome da cor	Cor	Exemplo	Opções de cor
Azul			Variável da web --now-color_grouped--blue-2
Marrom			Variável da web --now-color_grouped--brown-2
Cinza			Variável da web --now-color_grouped--gray-2
Verde			Variável da web --now-color_grouped--Green-2
Verde-amarelado			Variável da web --now-color_grouped--verde-amarelo-2
Magenta			Variável da web --now-color_grouped--magenta-2
Laranja			Variável da web --now-color_grouped--orange-2
Rosa			Variável da web --now-color_grouped--pink-2
Roxo			Variável da web --now-color_grouped--purple-2
Turquesa			Variável da web --now-color_grouped--petróleo-2
Amarelo			Variável da web --now-color_grouped--yellow-2