paletas

    Ignite UI for Angular expone variables CSS que le permiten actualizar los colores de la aplicación de forma coherente.

    Descripción general

    Ignite UI for Angular expone más de 80 variantes de color como variables CSS para 8 colores base -primary,secondary​surface,,gray,info,success,warn,.error​

    Losprimary​secondary​gray colores siguen la Paleta de Colores de Diseño de Materiales 2014. Esto significa que estos colores incluyen las siguientes variantes:

    Todo Solo Primaria y Secundaria
    50 100 200 300 400 500 600 700 800 900 A100 A200 A400 A700

    Como muestra la tabla anterior, elgray color no incluye lasA100 variantes ,A200,A400, yA700, mientras que losprimary colores ysecondary contienen las 14 variantes de color. Incluimos 5 colores adicionales que no forman parte de la Paleta de Colores de Material Design 2014 -,,,yinfo​success.warn​error​surface​

    Además de los colores mencionados, también incluimos Nivel AA WCAG Cumplecontrast colores para cada variante de color. Esto significa que puedes usar con seguridad el correspondientecontrast variantes de color como colores en primer plano para la variante de color base.

    Note

    Los colores de contraste son colores relativos CSS y se calculan en tiempo de ejecución, en función del color de sombra correspondiente (primario, secundario, etc.).

    Aquí tienes un extracto delprimary color variable declarado en la Paleta de Materiales Ligeros:

    :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 las variantes de color primario provienen de una única variable base:--ig-primary-500 Este mismo patrón se aplica a otras variables de color como--ig-secondary-500 y--ig-surface-500. Las variantes adicionales se crean usando funciones CSS de color relativo que toman la variable principal500 y ajustan susaturation ylightness para crear otras variantes (600, 700, etc.). Elegimos este enfoque porque nos permite modificar todas las variantes deprimary,secondary,surface, y otros colores durante el tiempo de ejecución.

    Los colores de contraste se generan en tiempo de ejecución CSS, basándose en la luminancia del color proporcionado y el nivel de contraste elegido para calcular el mejor color de contraste para el mismo color. Si cambiamos la variante principal de color(500), los colores de contraste también se actualizarán.

    Note

    Podrías especificar el nivel de contraste globalmente usando elpalette mixin, o si quieres configurarlo específicamente dentro del ámbito de tu elemento, podrías usar eladaptive-contrast mixin. Ambos aceptan uno de los valores predefinidos:a oaa​aaa.

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

    Defining Palettes

    Si quieres cambiar las variantes de color de un color desde la paleta, puedes hacerlo sobrscribiendo su500 variante de color. Por ejemplo, cambiar los colores primarios es tan fácil como escribir:

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

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

    Verás que las variantes de color para cada color son monocromáticas. Esto se debe a que todas las variantes de color se generan con la funciónhsl() de color relativo.

    Scoping

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

    Supongamos que el color primario de tu empresa es#9f349c y quieres crear variantes primarias para él. Solo tienes que reemplazar la--ig-primary-500 variable por el color deseado en cualquier tipo de valor de color - RGB, HEX, etc.

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

    Esto alterará automáticamente cada variante de color primario.

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

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

    Luego puedes simplemente renovar los colores en tu aplicación cambiando el valor del atributo de clase deblue-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;
}

    Dark vs. Light

    Warning

    Los colores que tienen mayor impacto en los colores de primer plano y fondo songray ysurface. Estos dos colores se mostrarán uno contra otro en la mayoría de los casos. Por esa razón, elsurface color siempre debe contrastar con elgray.

    Las paletas en Ignite UI for Angular dictan si un tema será claro o oscuro. Los dos colores que más influyen en eso songray y.surface Verás, lasgray variantes de color en todos los temas se basan en un tono muy claro, como#fff en un tono, o en uno muy oscuro.#222 Los temas claros tienengray variantes basadas en tonos oscuros de gris, mientras que los temas oscuros son lo contrario: todasgray las variantes son de un tono de blanco. Estosgray colores se muestran sobre otro color, normalmente esesurface color. Elsurface color siempre debe estar en el extremogray opuesto de la escala de grises para que los temas luzcan bien.

    Para aclararlo un poco más, a continuación hay una lista de algunasgray variantes ysurface variantes de color tanto en temas de luz como de sombra;

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

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

    Ten cuidado al cambiar lasgray variantes de color,surface ya que se usan en la mayoría de los componentes y tienen un gran impacto en su aspecto y sensación general.

    Other Colors

    Hasta ahora hemos cubierto lasprimary​secondary​gray​surface variantes de color y cómo puedes anularlas. Hay cuatro colores más -info,success,warn, yerror. Normalmente se utilizan para ajustar los colores en diferentes estados. Por ejemplo, eligx-input-group componente utiliza estos colores en sus estados de validación de entrada. Se pueden cambiar como las otras variantes de color, solo necesitamos establecer la500 variante y todas las demás variantes serán generadas.

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

    Additional Resources

    Temas relacionados:

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