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