Estilos principais, cores, variantes e paletas de cores alternativas

  • Versão de lançamento: Yokohama
  • Atualizado 30 de jan. de 2025
  • 2 min. de leitura
  • Você pode personalizar a aparência da IU Next Experience para diferentes usuários configurando os estilos principais, variantes e paletas de cores alternativas.

    Estilos principais em Construtor de temas

    Um estilo principal é a versão base de um estilo. Os principais estilos incluem cor, forma e forma, tipografia e imagens.

    Cores em Construtor de temas

    Ao editar componentes, use o seletor de cores para mudar a cor de fundo da tela e exibir como as cores do componente serão renderizadas em diferentes planos de fundo.
    Nota:
    A atualização da cor da tela não se aplica à instância. Somente ganchos específicos para componentes serão aplicados na instância se você publicar um tema editado na instância.
    Ao editar as cores do tema, você pode exibir a taxa de contraste no seletor de cores. O valor é atualizado quando você muda a cor na paleta ou na exibição Minhas cores.

    Variantes/paletas de cores alternativas no Construtor de temas

    As variantes e as paletas de cores alternativas são tipos de registros de estilo de UX categorizados como Variante.

    Uma variante é uma versão alternativa de um tema existente, geralmente projetado para acessibilidade, que os usuários podem selecionar nas preferências. Um exemplo de uma variante é a versão escura do tema Polaris padrão que é enviado com Next Experience. A variante Escura pode ser usada para aprimorar a acessibilidade para usuários com deficiência visual, substituindo planos de fundo claros por fundos mais escuros e comparando as cores do texto de acordo.

    Uma paleta de cores alternativa é uma modificação que você pode fazer nas cores de um tema e foi projetada para fins de cosmética. Você pode definir esta paleta na página do gerenciador Construtor de temas para qualquer tema, exceto para o tema Polaris padrão. Quando você usa um tema existente para criar uma paleta de cores alternativa, a paleta de cores alternativa é agrupada com esse tema primário e inicialmente compartilha seus estilos de logotipo, cor, tipografia e forma. A princípio, a única diferença em relação ao tema primário é que você atribui a ele um nome exclusivo.

    Em seguida, você define a cor primária para a paleta de cores alternativa. Essa cor é usada para identificar a barra de navegação, os menus e outros componentes comuns. Da mesma forma, defina uma cor secundária,, se necessário. Se sua interface não exigir uma cor secundária, a cor primária será usada. Por fim, você define uma cor neutra para ajudar a definir linhas divisoras e contêineres. Há duas paletas de base disponíveis, clara e escura.
    Nota:
    Cores secundárias e neutras não podem ser editadas na paleta de cores alternativa escura.

    Quando a paleta é criada usando as cores selecionadas, você tem a opção de renomeá-la. Você também pode visualizar todos os ativos de IU disponíveis no Now Platform para visualizar como eles são renderizados quando você os aplica à sua instância.

    Nota:
    As variantes escuras não se aplicam ao IU principal, anteriormente conhecido como IU16. O IU principal é a interface que você usa se Next Experience estiver inativo. No entanto, as variantes escuras se estendem à maioria dos aspectos do Next Experience.