paletas

    Ignite UI for Angular expone variables CSS que le permiten actualizar los colores en su aplicación de manera consistente.

    Descripción general

    Ignite UI for Angular exposes over 80 color variants as CSS variables for 8 base colors - primary, secondary, surface, gray, info, success, warn, error.

    Los colores primary, secondary y gray siguen la paleta de colores de Material Design de 2014. Esto significa que estos colores incluyen las siguientes variantes:

    Todo Primary & Secondary Only
    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.

    Contrast colors are generated at build-time by the Sass theming engine based on the main variables color (primary, secondary, 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: 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;
      //...
    }
    css

    All primary color variants are derived from one base variable color variant --ig-primary-500. The same goes for the other color variables --ig-secondary-500, --ig-surface-500, etc. The other variants are generated through the relative color function hsl() which takes the main variable color variant 500 and changes it's staturation and lightness according to the variable variant which is assigned on (600,700, etc.). We decided to use this approach as it allows us to modify all variants of the primary, secondary, surface and other colors at runtime.

    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.

    Definición de paletas

    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;
    }
    css

    Esto actualizará automáticamente todas las demás variantes principales.

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

    Alcance

    Hemos visto que anular colores en la paleta es relativamente fácil. Podemos actualizar la paleta global asignando variantes de color al selector:root en el archivo styles.css de nuestra aplicación:

    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;
    }
    css

    This will automatically alter each primary color variant.

    Además de tener una única paleta global, también puedes crear varias paletas con alcance para otros selectores CSS. Por ejemplo, podemos tener una paleta azul y roja con alcance para selectores de clases:

    /* styles.css */
    
    .blue-theme {
        --ig-primary-500: #0008ff;
    }
    
    .red-theme {
        --ig-primary-500: #ff0400;
    }
    css
    <app-component class="blue-theme"></app-component>
    html

    Luego, simplemente puede revisar los colores en su aplicación cambiando el valor del atributo de clase blue-theme a red-theme.

    Este enfoque también funciona para anular los colores de la paleta de componentes individuales. En algunos casos, no desea crear varias paletas, pero sí desea cambiar el color de una paleta utilizada en el componente.

    Veamos el tema del componente material avatar. Utiliza la variante 400 del color gris como fondo. Ahora, podemos personalizar el tema anulando la propiedad responsable de configurar el fondo, o podemos cambiar el color de fondo deshabilitado anulando el color de la paleta gris 400:

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

    Oscuro versus claro

    Los colores que tienen mayor impacto en los colores de primer plano y de fondo son gray y surface. Estos dos colores se mostrarán uno frente al otro en la mayoría de los casos. Por esta razón el color de la surface siempre debe contrastar con el gray.

    Las paletas en Ignite UI for Angular dictan si un tema será claro u oscuro. Los dos colores que más impacto tienen son gray y surface. Mira, las variantes de color gray en todos los temas se basan en un tono de color muy claro, como #fff, o uno muy oscuro como #222. Los temas claros tienen variantes gray basadas en tonos oscuros de gris, mientras que los temas oscuros son todo lo contrario: todas las variantes gray son un tono de blanco. Estos colores gray se mostrarán contra otro color, normalmente el color surface. El color surface siempre debe estar en el extremo opuesto del gray en la escala de grises para garantizar que los temas se vean bien.

    Para dejar esto un poco más claro, a continuación se muestra una lista de algunas variantes de gray y colores surface tanto en un tema claro como en uno oscuro;

    Luz de materiales:

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

    Material oscuro:

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

    Tenga cuidado al cambiar las variantes de color gray y surface, ya que se utilizan en la mayoría de los componentes y tienen un gran impacto en su apariencia general.

    App Builder | Banner de llamada a la acción

    Otros colores

    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 varints will be generated.

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

    Recursos adicionales

    Temas relacionados:

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.