Paletas em Ignite UI for Web Components

Ignite UI for Web Components expõe variáveis CSS que permitem atualizar as cores em seu aplicativo de forma consistente.

Visão geral

As paletas em Ignite UI for Web Components fornecem mais de 80 variantes de cores como variáveis CSS para 8 cores básicas -,,,,,, success, warn e error. info gray surface secondary primary

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 gray cor não inclui as A100 variantes secondary primary, A200, A400, e A700 Incluímos 5 cores adicionais que não fazem parte da Paleta de Cores do Material Design 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] Contrast colors are generated at build-time therefore overriding the CSS variables will not update the corresponding contrast colors.

Aqui está um trecho da primary cor conforme declarado na paleta Light Bootstrap:

: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] Because the contrast colors are not generated at CSS runtime like the rest, if we change the main color variant(500), the contrast color would not be updated. We would need to change them manually. This behavior will be improved upon in an upcoming release, where the contrast colors will also be calculated at CSS runtime.

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().

:root {
  --ig-primary-600: hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.89));
}

Scoping

Vimos que substituir cores na paleta é relativamente fácil. A paleta global pode ser atualizada definindo o escopo das variantes de cores para o:root seletor no styles.css arquivo 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;
}

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

Dark vs. Light

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

Para deixar isso um pouco mais claro, abaixo está a lista completa de todas as gray surface variantes de cores em um tema claro e escuro.

Bootstrap Light:

: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%);
  //...
}

Bootstrap Dark:

: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, surface cobrimos as primary variantes de cores e secondary gray como você pode substituí-las. Existem mais quatro cores -info, success, warn, e error. Eles geralmente são usados para definir as cores em diferentes estados. Por exemplo, o igc-input-group componente usa essas cores em seus estados de validação de entrada. Eles podem ser alterados como as outras variantes de cores, tudo o que precisamos fazer é definir a 500 variante 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;
}

API References

Palettes