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, gray, info, success, warn, error y surface.
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* |
Además de los colores antes mencionados, también incluimos Nivel AAA WCAG obediente contrast colores para cada variante de color. Esto significa que puede utilizar con seguridad el correspondiente contrast variantes de color como colores de primer plano para la variante de color base.
Note
Los colores de contraste se generan en el momento de la construcción mediante el motor de temas Sass. Anular las variables CSS no actualizará los colores de contraste correspondientes.
Aquí hay un extracto del color primary declarado en la paleta de materiales claros:
:root {
--ig-primary-h: 204deg;
--ig-primary-s: 100%;
--ig-primary-l: 50%;
--ig-primary-a: 1;
--ig-primary-50: hsla(
var(--ig-primary-h),
calc(var(--ig-primary-s) * 1.23),
calc(var(--ig-primary-l) * 1.78),
var(--ig-primary-a)
);
--ig-primary-100: hsla(
var(--ig-primary-h),
calc(var(--ig-primary-s) * 0.8),
calc(var(--ig-primary-l) * 1.66),
var(--ig-primary-a)
);
--ig-primary-200: hsla(
var(--ig-primary-h),
calc(var(--ig-primary-s) * 0.64),
calc(var(--ig-primary-l) * 1.43),
var(--ig-primary-a)
);
// ...
--ig-primary-50-contrast: black;
--ig-primary-100-contrast: black;
--ig-primary-200-contrast: black;
// ...
}
Todas las variantes de colores primarios se derivan de 4 variables base:--ig-primary-h,--ig-primary-s,--ig-primary-l y--ig-primary-a. Cada una de estas variables sujeta las piezas HSLA para un solo color. HSLA significa hue, saturation, lightness y alpha. Es otro esquema de color utilizado para describir colores. Decidimos utilizar este enfoque ya que nos permite modificar todas las variantes de los colores primary, secondary y otros en tiempo de ejecución.
Defining Palettes
Si desea cambiar las variantes de color de un color de la paleta, puede hacerlo anulando sus valores HSLA en sus hojas de estilo. Por ejemplo, cambiar los colores primarios es tan fácil como escribir:
/* The HSLA representation of orange (#ffa500) */
/* hsla(38.8,100%,50%, 1); */
:root {
--ig-primary-h: 38.8deg;
--ig-primary-s: 100%;
--ig-primary-l: 50%;
--ig-primary-a: 1;
}
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 a partir de las variables HSLA.
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:
Digamos que su color primario corporativo es #9f349c y desea crear variantes principales para él. Así es como harías para hacer esto. Primero obtenga la representación HEX del color en el espacio de color HSLA. En este caso es 302 grados para tono, 51% para saturación, 41% para luminosidad y 1 para alfa. Una vez derivados los valores HSLA, todo lo que necesita hacer para actualizar la paleta principal a este color es reemplazar los valores globales h, s y l para la paleta principal:
:root {
--ig-primary-h: 302deg;
--ig-primary-s: 51%;
--ig-primary-l: 41%;
}
Esto no calculará automáticamente el color de contraste para cada variante de color primario. Existen muchas herramientas que lo ayudarán a determinar si un color específico tiene suficiente contraste cuando se usa en combinación con otro color. Puede utilizar el verificador de contraste integrado en Chrome para determinar el color de contraste que desea elegir para cada variante de color. Proporcionamos una función Sass para generar paletas de colores en el momento de la construcción. Si prefiere que generemos todas las variantes de color y sus colores de contraste a partir de sus propios colores, consulte la sección Paletas con Sass de la documentación.
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 */
/* cornflowerblue hsl(218.5,79.2%,66.1%) */
.blue-theme {
--ig-primary-h: 218.5deg;
--ig-primary-s: 79.2%;
--ig-primary-l: 66.1%;
--ig-primary-a: 1;
}
/* brick red hsl(351.7,57%,52.5%) */
.red-theme {
--ig-primary-h: 351.7deg;
--ig-primary-s: 57%;
--ig-primary-l: 52.5%;
--ig-primary-a: 1;
}
<app-component class="blue-theme"></app-component>
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: 146deg, 36%, 64%;
}
Dark vs. Light
Warning
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 white, i.e. ligthness 100% */
--ig-surface-h: 0deg;
--ig-surface-s: 0%;
--ig-surface-l: 100%;
--ig-surface-a: 1;
--ig-gray-h: 0deg;
/* grays are based on black to contrast the surface color */
--ig-gray-h: 0%;
--ig-gray-s: 0%;
--ig-gray-900: var(--ig-gray-h), var(--ig-gray-s), 13%;
}
Material oscuro:
:root {
/* surface is a dark shade of gray, i.e. lightness only at 13% */
--ig-surface-h: 0deg;
--ig-surface-s: 0%;
--ig-surface-l: 13%;
--ig-surface-a: 1;
/* grays are based on white to contrast the surface color */
--ig-gray-h: 0deg;
--ig-gray-s: 0%;
--ig-gray-900: var(--ig-gray-h), var(--ig-gray-s), 98%;
}
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.
Other Colors
Hasta ahora hemos cubierto las variantes de color primary, secondary, gray y surface y cómo anularlas. Hay cuatro colores más: info, success, warn y error. Suelen utilizarse para fijar los colores en diferentes estados. Por ejemplo, el componente igx-input-group utiliza estos colores en sus estados de validación de entrada. Se pueden cambiar como las tres primeras variantes. Simplemente actualice sus variables h, s y l.
Additional Resources
Temas relacionados:
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.
GitHub