Paletas

Ignite UI for Angular expõe variáveis CSS que permitem que você atualize as cores do seu aplicativo de forma consistente.

Visão geral

Ignite UI for Angular expõe mais de 80 variantes de cores como variáveis CSS para 8 cores base: primary, secondary, surface, gray, info, success, warn, error.

As cores primary, secondary e gray seguem a Paleta de Cores do Material Design de 2014. Isso significa que essas cores incluem as seguintes variantes:

Todo										Somente primário e secundário
50	100	200	300	400	500	600	700	800	900	A100	A200	A400	A700

Como mostra a tabela acima, a cor gray não inclui as variantes A100, A200, A400 e A700, enquanto as cores primary e secondary contêm todas as 14 variantes de cor. Incluímos 5 cores adicionais que não fazem parte da Paleta de Cores do Material Design de 2014 -info, success, warn, error e surface.

Além das cores mencionadas, também incluímos Nível AA WCAG compatível contrast cores para cada variante de cor. Isso significa que você pode usar com segurança o correspondente contrast variantes de cor como cores de primeiro plano para a variante de cor base.

Note

As cores de contraste são geradas no momento da compilação pelo mecanismo de temas Sass com base na cor das principais variáveis (primária, secundária, etc.).

Aqui está um trecho da cor variável primary conforme declarada na Paleta de Material de Luz:

:root {
  //...
  --ig-primary-500: #09f;
  --ig-primary-500-contrast: black;
  --ig-primary-600: hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.89));
  --ig-primary-600-contrast: black;
  --ig-primary-700: hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.81));
  //...
  --ig-secondary-400: hsl(from var(--ig-secondary-500) h calc(s * 0.875) calc(l * 1.08));
  --ig-secondary-400-contrast: black;
  --ig-secondary-500: #df1b74;
  --ig-secondary-500-contrast: white;
  --ig-secondary-600: hsl(from var(--ig-secondary-500) h calc(s * 1.26) calc(l * 0.89));
  --ig-secondary-600-contrast: white;
  //...
}

Todas as variantes de cores primárias são derivadas de uma variante de cor de variável base--ig-primary-500. O mesmo vale para as outras variáveis de cor--ig-secondary-500,--ig-surface-500, etc. As outras variantes são geradas por meio da função de cor relativa hsl() que pega a variante de cor da variável principal 500 e altera sua staturation e lightness de acordo com a variante de variável que é atribuída em (600, 700, etc.). Decidimos usar essa abordagem, pois ela nos permite modificar todas as variantes das cores primary, secondary, surface e outras cores em tempo de execução.

Warning

Como as cores de contraste não são geradas no tempo de execução do CSS como o resto, se mudarmos a variante de cor principal (500), a cor de contraste não seria atualizada. Teríamos que alterá-las manualmente. Esse comportamento será melhorado em uma versão futura, onde as cores de contraste também serão calculadas no tempo de execução do CSS.

Defining Palettes

Se você quiser alterar as variantes de cor para uma cor da paleta, você pode fazer isso substituindo sua variante de 500 cores. Por exemplo, alterar as cores primárias é tão fácil quanto escrever:

:root {
  --ig-primary-500: #09f;
}

Isso atualizará automaticamente todas as outras variantes primárias.

Você notará que as variantes de cor para cada cor são monocromáticas. Isso ocorre porque todas as variantes de cor são geradas com a função de cor relativa hsl().

Scoping

Vimos que substituir cores na paleta é relativamente fácil. Podemos atualizar a paleta global definindo o escopo das variantes de cor para o seletor:root no arquivo styles.css do nosso aplicativo:

Digamos que sua cor primária corporativa seja #9f349c e você queira criar variantes primárias para ela. Tudo o que você precisa fazer é substituir a variável--ig-primary-500 pela cor desejada em qualquer tipo de valor de cor - RGB, HEX, etc.

:root {
  --ig-primary-500: #9f349c;
}

Isso alterará automaticamente cada variante de cor primária.

Além de ter uma única paleta global, você também pode criar várias paletas com escopo para outros seletores CSS. Por exemplo, podemos ter uma paleta azul e vermelha com escopo para seletores de classe:

/* styles.css */

.blue-theme {
    --ig-primary-500: #0008ff;
}

.red-theme {
    --ig-primary-500: #ff0400;
}

<app-component class="blue-theme"></app-component>

Então você pode simplesmente reformular as cores no seu aplicativo alterando o valor do atributo class de blue-theme para red-theme.

Essa abordagem funciona para substituir cores de paleta para componentes individuais também. Em alguns casos, você não quer criar várias paletas, mas você pode querer alterar uma cor de paleta usada no componente.

Vamos dar uma olhada no tema do componente material avatar. Ele usa a variante 400 da cor cinza para seu plano de fundo. Agora, podemos personalizar o tema substituindo a propriedade responsável por definir o plano de fundo, ou podemos alterar a cor de plano de fundo desabilitada para ele substituindo a cor da paleta cinza 400:

igx-avatar {
  --ig-gray-400: #efefef;
}

Dark vs. Light

Warning

As cores que têm o maior impacto nas cores de primeiro plano e de fundo são gray e surface. Essas duas cores serão exibidas uma contra a outra na maioria dos casos. Por esse motivo, a cor surface deve sempre contrastar com o gray.

Paletas no Ignite UI for Angular determinam se um tema será claro ou escuro. As duas cores que têm o maior impacto nisso são gray e surface. Veja, as variantes de cor gray em todos os temas são baseadas em um tom de cor muito claro, como #fff, ou um muito escuro como #222. Temas claros têm variantes gray baseadas em tons escuros de cinza, enquanto temas escuros são o oposto - todas as variantes gray são um tom de branco. Essas cores gray serão exibidas contra outra cor, geralmente a cor surface. A cor surface deve sempre estar na extremidade oposta do gray na escala de cinza para garantir que os temas tenham uma boa aparência.

Para deixar isso um pouco mais claro, abaixo está uma lista de algumas variantes de cores gray e surface em um tema claro e escuro;

Material Luz:

:root {
  //...
  /* surface is set to light color*/
  --ig-surface-500: white;
  //...
  /* grays are based on dark gray to contrast the surface color */
  --ig-gray-500: hsl(0, 0%, 62%);
  //...
}

Material Escuro:

:root {
  //...
  /* surface is set to dark color*/
  --ig-surface-500: #222;
  //...
  /* grays are based on light gray to contrast the surface color */
  --ig-gray-500: hsl(0, 0%, 74%);
  //...
}

Tenha cuidado ao alterar as variantes de cor gray e surface, pois elas são usadas na maioria dos componentes e têm um grande impacto na aparência geral.

Other Colors

Até agora, cobrimos as variantes de cor primary, secondary, gray e surface e como você pode substituí-las. Há mais quatro cores -info, success, warn e error. Elas geralmente são usadas para definir as cores em estados diferentes. Por exemplo, o componente igx-input-group usa essas cores em seus estados de validação de entrada. Elas podem ser alteradas como as outras variantes de cor, tudo o que precisamos fazer é definir a variante 500 e todas as outras variantes serão geradas.

:root {
    --ig-info-500: #1377d5;
    --ig-success-500: #4eb862;
    --ig-warn-500: #faa419;
    --ig-error-500: #ff134a;
}

Additional Resources

Tópicos relacionados:

Paletas com Sass

Nossa comunidade é ativa e sempre acolhedora para novas ideias.