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 cor como variáveis CSS para 8 cores base -primary,secondary​surface,gray,,info,success​warn.error​

    Asprimary​secondary coresgray seguem a Paleta de Cores do Material Design 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, agray cor não inclui asA100 variantes ,A200,A400, e (eA700 color) contêmprimary​secondary todas as 14 variantes de cor. Incluímos 5 cores adicionais que não fazem parte da Paleta de Cores do Material Design 2014 -,,,einfo​success.warn​error​surface​

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

    Note

    As cores de contraste são cores relativas CSS e são calculadas em tempo de execução, com base na cor de tonalidade correspondente (primária, secundária etc.).

    Aqui está um trecho daprimary cor variável conforme declarado na Paleta de Material Luminoso:

    :root {
  //...
  --ig-primary-500: #09f;
  --ig-primary-500-contrast: hsl(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l);
  --ig-primary-600: hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.89));
  --ig-primary-600-contrast: hsl(from color(from var(--ig-primary-600) var(--y-contrast)) h 0 l);
  --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: hsl(from color(from var(--ig-secondary-400) var(--y-contrast)) h 0 l);
  --ig-secondary-500: #df1b74;
  --ig-secondary-500-contrast: hsl(from color(from var(--ig-secondary-500) var(--y-contrast)) h 0 l);
  --ig-secondary-600: hsl(from var(--ig-secondary-500) h calc(s * 1.26) calc(l * 0.89));
  --ig-secondary-600-contrast: hsl(from color(from var(--ig-secondary-600) var(--y-contrast)) h 0 l);
  //...
  --ig-wcag-a: 0.31;
  --ig-wcag-aa: 0.185;
  --ig-wcag-aaa: 0.178;
  --ig-contrast-level: var(--ig-wcag-aa);
  --y: clamp(0,(y / var(--ig-contrast-level) - 1)* -infinity, 1);
  --y-contrast: xyz-d65 var(--y) var(--y) var(--y);
}

    Todas as variantes de cor primária vêm de uma única variável base:--ig-primary-500 Esse mesmo padrão se aplica a outras variáveis de cor como--ig-secondary-500 e--ig-surface-500. As variantes adicionais são criadas usando funções CSS de cores relativas que pegam a variável principal500 e ajustam suasaturation elightness para criar outras variantes (600, 700, etc.). Escolhemos essa abordagem porque nos permite modificar todas as variantes deprimary,secondary,surface, e outras cores durante o tempo de execução.

    As cores de contraste são geradas em tempo de execução CSS, com base na luminância da cor fornecida e no nível de contraste escolhido para calcular a melhor cor de contraste para ela. Se mudarmos a variante principal de cor,500 as cores contrastantes também serão atualizadas.

    Note

    Você pode especificar o nível de contraste globalmente usando opalette mixin, ou se quiser defini-lo especificamente no escopo do seu elemento, pode usar oadaptive-contrast mixin. Ambos aceitam um dos valores predefinidos:a,aa ouaaa.

     @include palette($palette, $contrast-level: 'aaa');

    Defining Palettes

    Se você quiser mudar as variantes de cor de uma cor a partir da paleta, pode fazer isso sobrescrevendo a variante de cor.500 Por exemplo, mudar 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ê vai 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çãohsl() de cor relativa.

    Scoping

    Vimos que sobrepor cores na paleta é relativamente fácil. Podemos atualizar a paleta global escopando variantes de cor no:root seletor nostyles.css arquivo da nossa aplicação:

    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--ig-primary-500 variável 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>

    Depois, você pode simplesmente reformular as cores na sua aplicação mudando o valor do atributo da classe deblue-theme parared-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 maior impacto nas cores de primeiro e fundo sãogray esurface. Essas duas cores serão exibidas uma contra a outra na maioria dos casos. Por essa razão, asurface cor deve sempre contrastar com ogray ambiente.

    As paletas em Ignite UI for Angular ditam se um tema será claro ou escuro. As duas cores que têm maior impacto nisso sãogray e.surface Veja, asgray variantes de cor em todos os temas são baseadas em um tom muito claro, tipo#fff, ou muito escuro#222. Temas claros têmgray variantes baseadas em tons escuros de cinza, enquanto temas escuros são o oposto – todasgray as variantes são de um tom de branco. Essasgray cores serão exibidas contra outra cor, geralmente a cor.surface Asurface cor deve estar sempre no extremogray oposto da escala de cinza para garantir que os temas fiquem bonitos.

    Para deixar isso um pouco mais claro, abaixo está uma lista de algumasgray variantes desurface cor tanto em temas claros quanto escuros;

    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 mudar asgray variantes de cor esurface e, pois elas são usadas na maioria dos componentes e têm grande impacto na aparência e sensação geral.

    Other Colors

    Até agora, abordamos asprimary​secondary​gray​surface variantes de cor e como você pode sobrepê-las. Há mais quatro cores -info,success,warn, eerror. Eles geralmente são usados para ajustar as cores em diferentes estados. Por exemplo, oigx-input-group componente usa essas cores em seus estados de validação de entrada. Elas podem ser alteradas como as outras variantes de cor, basta definir a500 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;
}

    Additional Resources

    Tópicos relacionados:

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.