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 expone más de 80 variantes de color como variables CSS para 8 colores base -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 Solo Primaria y Secundaria
    50 100 200 300 400 500 600 700 800 900 A100 A200 A400 A700

    Como se muestra en la tabla anterior, el gray color no incluye las A100 variantes, A200, A400, y , A700 mientras que los primary colores y secondary contienen las 14 variantes de color. Incluimos 5 colores adicionales que no forman parte de la paleta de colores de Material Design 2014 -info, success, warn, error,. surface

    Además de los colores antes mencionados, también incluimos Nivel AA WCAG (en inglés) dócil contrast colores para cada variante de color. Esto significa que puede utilizar de forma segura el contrast Variantes de color como colores de primer plano para la variante de color base.

    Los colores de contraste se generan en tiempo de construcción por el motor de temas de Sass en función de las variables principales color (primario, secundario, etc.).

    A continuación, se muestra un extracto de la primary variable color tal y como se declara en la paleta de materiales ligeros:

    :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

    Todas las variantes de color primario se derivan de una variante--ig-primary-500 de color variable base. Lo mismo ocurre con las otras variables--ig-secondary-500 de color,--ig-surface-500 etc. Las otras variantes se generan a través de la función hsl() de color relativo que toma la variable 500 principal variante de staturation​ ​lightness color y la cambia de acuerdo con la variante variable que se asigna en (600, 700, etc.). Decidimos usar este enfoque ya que nos permite modificar todas las variantes de los colores y primary​ ​secondary​ ​surface otros en tiempo de ejecución.

    Debido a que los colores de contraste no se generan en tiempo de ejecución CSS como el resto, si cambiamos la variante de color principal (500), el color de contraste no se actualizaría. Tendríamos que cambiarlos manualmente. Este comportamiento se mejorará en una próxima versión, donde los colores de contraste también se calcularán en el tiempo de ejecución de CSS.

    Defining Palettes

    Si desea cambiar las variantes de color de un color de la paleta, puede hacerlo anulando su 500 variante de color. Por ejemplo, cambiar los colores primarios es tan fácil como escribir:

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

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

    Notará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ón hsl() de color relativo.

    Scoping

    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:

    Supongamos que el color primario de su empresa es #9f349c y desea crear variantes primarias para él. Todo lo que necesita hacer es reemplazar la--ig-primary-500 variable con el color deseado en cualquier tipo de valor de color: RGB, HEX, etc.

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

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

    Dark vs. Light

    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 | CTA Banner

    Other Colors

    Hasta ahora hemos cubierto las primary​ ​secondary​ ​gray​ ​surface variantes de color y cómo puede anularlas. Hay cuatro colores más -info, success, warn, y error. Por lo general, se utilizan para establecer los colores en diferentes estados. Por ejemplo, el componente utiliza estos colores en sus estados de igx-input-group validación de entrada. Se pueden cambiar como las otras variantes de color, todo lo que necesitamos hacer es establecer la 500 variante y se generarán todas las demás variantes.

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

    Additional Resources

    Temas relacionados:

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