Paletas en Ignite UI for Web Components
Ignite UI for Web Components expone variables CSS que le permiten actualizar los colores en su aplicación de manera consistente.
Descripción general
Las paletas en Ignite UI for Web Components proporcionan más de 100 variantes de color 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 | *Sin gris* | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| **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] 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-h: 216deg;
--ig-primary-s: 98%;
--ig-primary-l: 52%;
--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) * .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 color 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 espacio de color utilizado para representar 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 su hoja 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. Puede anular colores individuales únicamente utilizando cualquier combinación de colores:
/* The HSLA representation of darkorange (#ff6e00) */
:root {
--ig-primary-600: 25.9deg, 100%, 50%;
}
Tenga cuidado al hacer esto:
:root {
/* The HSLA representation of orange (#ffa500) */
--ig-primary-500: 38.8deg, 100%, 50%;
/* The HSLA representation of blue (#0080ff) */
--ig-primary-600: 210deg, 100%, 50%;
}
Puede producir resultados inesperados, ya que algunos temas de componentes utilizan más de una variante de color. Diseñamos todos los temas componentes en torno a paletas monocromáticas.
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.
Digamos que su color primario corporativo es #9f349c y desea crear variantes principales para él. Una opción sería utilizar la herramienta Color de material para generar todas las variantes de color. Así es como declararemos los colores producidos por la herramienta:
:root {
--ig-primary-50: 305deg, 35%, 93%;
--ig-primary-100: 304deg, 37%, 82%;
--ig-primary-200: 303deg, 38%, 70%;
--ig-primary-300: 303deg, 38%, 58%;
--ig-primary-400: 303deg, 38%, 50%;
--ig-primary-500: 302deg, 51%, 41%;
--ig-primary-600: 298deg, 51%, 39%;
--ig-primary-700: 293deg, 55%, 36%;
--ig-primary-800: 289deg, 56%, 33%;
--ig-primary-900: 279deg, 60%, 28%;
}
La herramienta Color de material no le proporciona el color de contraste para cada variante de color. 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.
Además de tener una única paleta global, también puedes crear varias paletas con alcance para otros selectores CSS. Por ejemplo, podemos tener paletas azul y roja con alcance para selectores de clases:
/* 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;
}
Luego, 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 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 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 a shade of white */
--ig-surface-500: 210deg, 17%, 98%;
/* gray variants */
--ig-gray-h: 210deg;
--ig-gray-s: 11%;
--ig-gray-l: 71%;
--ig-gray-a: 1;
--ig-gray-50: var(--ig-gray-h), var(--ig-gray-s), 98%;
--ig-gray-100: var(--ig-gray-h), var(--ig-gray-s), 96%;
--ig-gray-200: var(--ig-gray-h), var(--ig-gray-s), 93%;
--ig-gray-300: var(--ig-gray-h), var(--ig-gray-s), 88%;
--ig-gray-400: var(--ig-gray-h), var(--ig-gray-s), 74%;
--ig-gray-500: var(--ig-gray-h), var(--ig-gray-s), 62%;
--ig-gray-600: var(--ig-gray-h), var(--ig-gray-s), 54%;
--ig-gray-700: var(--ig-gray-h), var(--ig-gray-s), 38%;
--ig-gray-800: var(--ig-gray-h), var(--ig-gray-s), 26%;
--ig-gray-900: var(--ig-gray-h), var(--ig-gray-s), 13%;
}
Bootstrap Dark:
:root {
/* surface is set to a dark shade of gray */
--ig-surface-500: 210deg, 11%, 15%;
/* gray variants */
--ig-gray-h: 210deg;
--ig-gray-s: 11%;
--ig-gray-l: 71%;
--ig-gray-50: var(--ig-gray-h), var(--ig-gray-s), 13%;
--ig-gray-100: var(--ig-gray-h), var(--ig-gray-s), 26%;
--ig-gray-200: var(--ig-gray-h), var(--ig-gray-s), 38%;
--ig-gray-300: var(--ig-gray-h), var(--ig-gray-s), 54%;
--ig-gray-400: var(--ig-gray-h), var(--ig-gray-s), 62%;
--ig-gray-500: var(--ig-gray-h), var(--ig-gray-s), 74%;
--ig-gray-600: var(--ig-gray-h), var(--ig-gray-s), 88%;
--ig-gray-700: var(--ig-gray-h), var(--ig-gray-s), 93%;
--ig-gray-800: var(--ig-gray-h), var(--ig-gray-s), 96%;
--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 igc-input-group utiliza estos colores en sus estados de validación de entrada.
:root {
--ig-info-500: 190deg, 90%, 50%;
--ig-success-500: 152deg, 69%, 31%;
--ig-warn-500: 45deg, 100%, 51%;
--ig-error-500: 354deg, 70%, 54%;
}
API References
Palettes