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