Paletas en Ignite UI for Web Components
Ignite UI for Web Components expone variables CSS que le permiten actualizar los colores de la aplicación de forma coherente.
Descripción general
Las paletas en Ignite UI for Web Components proporcionan más de 80 variantes de color como variables CSS para 8 colores base -primary, secondary, surface, gray, info, success, warn y 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, y 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.
Contrast colors are generated at build-time therefore overriding the CSS variables will not update the corresponding contrast colors.
Aquí hay un extracto del color primary declarado en la paleta Light Bootstrap:
: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;
//...
}
cssTodas 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.
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.
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;
}
cssEsto 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.
:root {
--ig-primary-600: hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.89));
}
css
Scoping
Hemos visto que anular colores en la paleta es relativamente fácil. La paleta global se puede actualizar ajustando el alcance de las 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;
}
cssEsto 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;
}
cssLuego, simplemente puede revisar los colores en su aplicación cambiando el valor del atributo de clase blue-theme a red-theme.
Dark vs. Light
Las paletas en Ignite UI for Web Components dictan si un tema va a ser claro u oscuro. Los dos colores que tienen el mayor impacto en eso son gray y surface. Verás, las variantes de gray color en todos los temas se basan en un tono de color muy claro, como #fff, o uno muy oscuro #222. Los temas claros tienen gray variantes basadas en tonos oscuros de gris, mientras que los temas oscuros son lo contrario: todas gray las variantes son de un tono blanco. Estos gray colores se mostrarán contra otro color, generalmente el surface color. El surface color siempre debe estar en el extremo opuesto de la escala de grises para garantizar que los gray temas se vean bien.
Para que esto quede un poco más claro, a continuación se muestra la lista completa de todas las variantes de gray y colores surface, tanto en un tema claro como en uno oscuro.
Bootstrap Light:
: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%);
//...
}
cssBootstrap Dark:
: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%);
//...
}
cssTenga 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 igc-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;
}
cssAPI References
Palettes