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 100 variantes de color para 8 colores base -primary
,,, gray
, warn
info
success
error
, y. surface
secondary
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.
Los colores de contraste se generan en el momento de la compilación, por lo que anular las variables CSS no actualizará los colores de contraste correspondientes.
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;
// ...
}
css
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.
Definición de paletas
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;
}
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 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%;
}
css
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%;
}
css
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.
Alcance
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%;
}
css
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;
}
css
Luego, simplemente puede revisar los colores en su aplicación cambiando el valor del atributo de clase blue-theme
a red-theme
.
Oscuro versus claro
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 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%;
}
css
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%;
}
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
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%;
}
css
Referencias de API
paletas