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

  • Versão de lançamento: Xanadu
  • Atualizado 1 de ago. de 2024
  • 2 min. de leitura

    • Aprenda a usar variáveis de cor para mudar o tema nas seções de IU do ícone para dispositivos móveis.

    As seções de IU de ícone têm uma seção Cor com dois campos para controlar as cores de primeiro e segundo plano do elemento.

    • Variável de 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 ícones [sys_sg_navigation_section_destination_applet_launcher]
    • Função de destino da seção de í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.

    		 Variável de cor usada em uma seção de IU de ícone

    Guia de cores da seção de IU do ícone para dispositivos móveis

    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.

    Paleta de cores de alerta

    Nome da cor Cor Exemplo Opções de cores
    Primário Cor primária do ícone Exemplo de ícone primário
    Variável móvel
    primary
    Variável da web
    --now-color--primary-1
    Crítico Cor do ícone crítico Exemplo de ícone crítico
    Variável móvel
    alert--critical-2
    Variável da web
    --now-color_alert--critical-2
    Alta Cor alta do ícone Exemplo de ícone alto
    Variável móvel
    alert--high-2
    Variável da web
    --now-color_alert--high-2
    Aviso Cor do ícone de aviso Exemplo de ícone de aviso
    Variável móvel
    alert--warning-2
    Variável da web
    --now-color_alert--warning-2
    Moderado Cor moderada do ícone Exemplo de ícone moderado
    Variável móvel
    alert--moderate-2
    Variável da web
    --now-color_alert--moderate-2
    Informações Cor do ícone de informações Exemplo de ícone de informações
    Variável móvel
    alert--info-2
    Variável da web
    --now-color_alert--info-2
    Positivo Cor do ícone positivo Exemplo de ícone positivo
    Variável móvel
    alert--positive-2
    Variável da web
    --now-color_alert--positive-2
    Baixo(a) Cor baixa do ícone Exemplo de ícone baixo
    Variável móvel
    alert--low-2
    Variável da web
    --now-color_alert--low-2

    Paleta de cores agrupada

    Nome da cor Cor Exemplo Opções de cores
    Azul Cor do ícone azul Exemplo de ícone azul
    Variável da web
    --now-color_grouped--azul-2
    Marrom Cor do ícone marrom
    Variável da web
    --now-color_grouped--brown-2
    Cinza Cor do ícone cinza Exemplo de ícone cinza
    Variável da web
    --now-color_grouped--gray-2
    Verde Cor do ícone verde Exemplo de ícone verde
    Variável da web
    --now-color_grouped--verde-2
    Verde-amarelo Cor do ícone verde-amarelado Exemplo de ícone verde-amarelado
    Variável da web
    --now-color_grouped--verde-amarelo-2
    Magenta Cor do ícone Magenta Exemplo de ícone Magenta
    Variável da web
    --now-color_grouped--magenta-2
    Laranja Cor do ícone laranja Exemplo de ícone laranja
    Variável da web
    --now-color_grouped--orange-2
    Rosa Cor do ícone rosa Exemplo de ícone rosa
    Variável da web
    --now-color_grouped--pink-2
    Roxo Cor do ícone roxo Exemplo de ícone roxo
    Variável da web
    --now-color_grouped--purple-2
    Turquesa Cor do ícone azul-petróleo Exemplo de ícone azul-petróleo
    Variável da web
    --now-color_grouped--teal-2
    Amarelo Cor do ícone amarelo Exemplo de ícone amarelo
    Variável da web
    --now-color_grouped--yellow-2