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 exposes over 80 color variants as CSS variables for 8 base colors - primary, secondary, surface, gray, info, success, warn, error.

    The primary, secondary, and gray colors follow the 2014 Material Design Color Palette. This means these colors include the following variants:

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

    As the table above shows, the gray color doesn't include the A100, A200, A400, and A700 variants, while the primary and secondary colors contain all 14 color variants. We include 5 additional colors that are not part of the 2014 Material Design Color Palette - info, success, warn, error and surface.

    On top of the aforementioned colors, we also include Level AA WCAG compliant contrast colors for each color variant. This means that you can safely use the corresponding contrast color variants as foreground colors for the base color variant.

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

    Here's an excerpt of the primary variable color as declared in the Light Material Palette:

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

    All primary color variants come from a single base variable: --ig-primary-500. This same pattern applies to other color variables like --ig-secondary-500 and --ig-surface-500. The additional variants are created using relative color CSS functions that take the main 500 variable and adjust its saturation and lightness to create other variants (600, 700, etc.). We chose this approach because it lets us modify all variants of primary, secondary, surface, and other colors during runtime.

    The contrast colors are CSS runtime generated, based on the the provided color's luminance and the chosen contrast-level to calculate the best contrast color for it. If we change the main color variant(500), the contrast colors will also be updated.

    Note

    You could specify the contrast-level globally by using the palette mixin, or if you'd like to set it specifically in the scope of your element, you could use the adaptive-contrast mixin. They both accept one of the predefined values: a, aa or aaa.

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

    Defining Palettes

    If you wanted to change the color variants for a color from the palette, you can do so by overriding its 500 color variant. For instance, changing the primary colors is as easy as writing:

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

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

    You will notice that color variants for each color are monochromatic. This is because all color variants are generated with the relative color function hsl().

    Scoping

    We've seen that overriding colors in the palette is relatively easy. We can update the global palette by scoping color variants to the :root selector in the styles.css file of our application:

    Let's say your corporate primary color is #9f349c and you want to create primary variants for it. All you need to do is to replace the --ig-primary-500 variable with the desired color in any color value type - 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>

    Then you can simply overhaul the colors in your application by changing the value of the class attribute from blue-theme to 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

    The colors that have the biggest impact on foreground and background colors are gray and surface. These two colors will be displayed against one another in most cases. For that reason the surface color should always contrast the gray.

    Palettes in Ignite UI for Angular dictate whether a theme is going to be light or dark. The two colors that have the biggest impact on that are gray and surface. See, the gray color variants in all themes are based on either a very light color shade, like #fff, or a very dark one like #222. Light themes have gray variants based on dark shades of gray, while dark themes are the opposite - all gray variants are a shade of white. These gray colors will be displayed against another color, usually the surface color. The surface color should always be on the opposite end of the gray in the gray scale to ensure themes look good.

    To make this a bit clearer, below is a list of some gray and surface color variants in both a light and a dark theme;

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

    Be mindful when changing the gray and surface color variants as they are used in most components and have a big impact on their overall look and feel.

    Other Colors

    So far we've covered the primary, secondary, gray, and surface color variants and how you can override them. There are four more colors - info, success, warn, and error. They are usually used to set the colors in different states. For example, the igx-input-group component uses these colors in its input validation states. They can be changed as the other color variants, all we need to do it to set the 500 variant and all of the other variants will be generated.

    :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.