paletas
El motor de temas de Ignite UI for Angular proporciona varias funciones y mezclas potentes para generar y recuperar colores.
Descripción general
Las paletas en el contexto de Ignite UI for Angular se declaran como Mapas Sass, siendo las claves de esos mapas los colores de la paleta (primary,secondary,surface, etc.). Cada color es a su vez un mapa y tiene todas las variantes de color listadas como claves. Los valores asignados a esas variantes de color son los colores reales usados en todos los temas componentes. Todos los mapas de paleta se generan programáticamente por la función de paleta. La función acepta argumentos paraprimary,secondarysurface,,gray,info,,success,warn yerror colores. Elprimary color suele ser el color de tu marca. Se utiliza principalmente para estilizar elementos estáticos, como eligx-navbar componente. Elsecondary color es el que se usa en elementos que son accionables, como botones, interruptores, deslizadores, etc. Elsurface color es el que se utiliza como color de fondo de algunos componentes, como tarjetas, menús, selectores de fechas/horas, hojas de banners, etc. Los únicos argumentos obligatorios son los a favorprimarysecondary ysurface los colores. Por defecto los colores parasurface,gray,info,success,,warn yerror a un conjunto predefinido que elijamos.
Para empezar con tu primera paleta de colores, crea un archivo scss que sea el archivo base para tu tema global. Yo llamaré al mío_variables.scss.
// _variables.scss
$melon-palette: palette(
$primary: #2ab759,
$secondary: #f96a88,
$surface: #e5e5e5
);
Warning
El valor al$primary que pasas,$secondary osurface cualquier otro color, debe ser de tipo color. No puedes pasar variables CSS como argumentos porque no se pueden resolver en tiempo de compilación de Sass.
Creamos una paleta que contiene variantes para todos los colores, incluidos los colores de contraste de texto creados automáticamente para cada variante. Si no ha consultado la documentación sobre paletas con variables CSS, consúltela ahora. Contiene información sobre todas las variantes de color de una paleta.
Lapalette función hace mucho internamente para ayudarte a crear colores en tiempo de compilación que puedas reutilizar a lo largo de tus.scss documentos. La función está bien porque crea un mapa enorme de colores para ti, pero el algoritmo para generar las variantes de color es muy opinativo y puede no ajustarse exactamente a tus necesidades. A nuestros temas componentes no les importa cómo se genera la paleta, solo se preocupan por la forma del mapa.
En caso de que desee crear su paleta manualmente o crear la función de generación de paleta usted mismo, esto es lo que esperamos obtener como mapa de paleta.
$handmade-palette: (
'primary': (
'50': #e6eff8,
'50-contrast': black,
'100': #bfd7f2,
'100-contrast': black,
'200': #98bfec,
'200-contrast': black,
'300': #85b5e9,
'300-contrast': white,
'400': #73a6e4,
'400-contrast': white,
'500': #6797de,
'500-contrast': white,
'600': #3681dd,
'600-contrast': white,
'700': #357fda,
'700-contrast': white,
'800': #306dc8,
'800-contrast': white,
'900': #284ea8,
'900-contrast': white,
'A100': #98bfec,
'A100-contrast': white,
'A200': #73a6e4,
'A200-contrast': white,
'A400': #3681dd,
'A400-contrast': white,
'A700': #284ea8,
'A700-contrast': white
),
'secondary': (
'50': #fef7e2,
'50-contrast': black,
'100': #fdeab7,
'100-contrast': black,
'200': #fbdd89,
'200-contrast': black,
'300': #fad15c,
'300-contrast': black,
'400': #f9c63f,
'400-contrast': black,
'500': #f7bd32,
'500-contrast': white,
'600': #f6b02d,
'600-contrast': white,
'700': #f49e2a,
'700-contrast': white,
'800': #f38e28,
'800-contrast': white,
'900': #f38e28,
'900-contrast': white,
'A100': #fbdd89,
'A100-contrast': black,
'A200': #f9c63f,
'A200-contrast': black,
'A400': #f6b02d,
'A400-contrast': white,
'A700': #f38e28,
'A700-contrast': white
),
'gray': (
'50': #fff,
'50-contrast': black,
'100': #fafafa,
'100-contrast': black,
'200': #f5f5f5,
'200-contrast': black,
'300': #f0f0f0,
'300-contrast': black,
'400': #dedede,
'400-contrast': black,
'500': #b3b2b2,
'500-contrast': black,
'600': #979696,
'600-contrast': white,
'700': #7b7a7a,
'700-contrast': white,
'800': #404040,
'800-contrast': white,
'900': #1a1a1a,
'900-contrast': white
),
'info': (
'500': rgb(18, 118, 211),
'500-contrast': black
),
'success': (
'500': rgb(76, 184, 96),
'500-contrast': black
),
'warn': (
'500': rgb(251, 178, 60),
'500-contrast': black
),
'error': (
'500': rgb(255, 20, 75),
'500-contrast': black
),
'surface': (
'500': rgb(255, 255, 255),
'500-contrast': black
)
);
Warning
Es importante establecer las teclas de mapa como cadenas, explícitamente entre comillas -'primary','secondary','gray', etc. Lo mismo aplica para todas las variantes de color -500,500-contrast, etc.
Predefined Palettes
Proporcionamos paletas claras y oscuras predefinidas, que puede usar junto con nuestros esquemas para crear temas para sus componentes:
- Paletas de luz
$light-material-palette$light-fluent-excel-palette$light-fluent-word-palette$light-fluent-palette$light-bootstrap-palette$light-indigo-palette
- Paletas oscuras
$dark-material-palette$dark-fluent-excel-palette$dark-fluent-word-palette$dark-fluent-palette$dark-bootstrap-palette$dark-indigo-palette
Puede mezclar y combinar todas las paletas claras con un esquema claro de su elección y viceversa: todas las paletas oscuras con un esquema oscuro que crea que se adaptará mejor a sus necesidades y visión.
Grayscale Colors
Al igual que losprimarysecondary colores ysurface colores, puedes añadir otro color a lapalette función que se usará para generar tonos de gris. El color predeterminado utilizado para generar lagray paleta en todos los temas de luz es#000, o más bien conocido comoblack. Lasgray variantes de color se utilizan principalmente para ajustar los colores del texto entre componentes. Modificar el valor es útil al cambiar los colores de fondo o de superficie en tu aplicación. Por ejemplo, si tu aplicación usa un fondo de superficie más oscuro, establecer elgray color eswhite sensato y obligará a que todos los colores del texto se basen en tonos de.white
Para generar una paleta que utilicewhite para sus tonos grises:
// Import the Ignite UI themes library first
$company-color: #2ab759; /* Some green shade I like */
$secondary-color: #f96a88; /* Watermelon pink */
$surface-color: #e5e5e5 /* Light gray for backgrounds/ */
$grayscale-base: #fff; /* Used to generate shades of gray */
$my-color-palette: palette(
$primary: $company-color,
$secondary: $secondary-color,
$surface: $surface-color,
$gray: $grayscale-base
);
Colors Variants
Ofrecemos una función fácil de recordar y usar -color. Puede requerir hasta cuatro argumentos -palette,color,variant yopacity;
// Get the primary color as CSS variable reference to the 500 color variant
$my-primary-500: color();
// Get the primary color as CSS variable reference to the 600 color variant
$my-primary-600: color($variant: 600);
// Get the primary color as CSS variable reference to the 600 color variant with .5 opacity
$my-primary-600-opacity: color($variant: 600, $opacity: .5);
// Get the secondary A700 color variant as a HEX value from $my-palette
$my-primary-A700: color($my-palette, 'secondary', 'A700');
// Get the warn 500 color variant as HEX value from $my-palette
$my-warning-color: color($my-palette, 'warn');
.my-awesome-class {
background: $my-primary-600;
border-color: $my-primary-A700;
}
.warning-bg {
background: $my-warning-color;
}
Si omites el$palette argumento, obtendrás una cadena que hace referencia a la variante correspondiente de la variable CSS. Si no proporcionas$color y/o$variant, serán asignados aprimary y500 respectivamente.
Contrast Text Colors
De forma similar a cómo recuperamos variantes de color, hay una forma de obtener el color de contraste del texto para cada una de las variantes de color en la paleta con la funcióncontrast-color, acepta el mismo tipo y número de argumentos que lacolor función.
$my-primary-800: color($my-palette, 'primary', 600);
$my-primary-800-text: contrast-color($my-palette, 'primary', 600);
// sample usage
.my-awesome-article {
color: $my-primary-800-text;
background: $my-primary-800;
}
Color Classes
Entendemos que algunas personas prefieren usar clases CSS para aplicar colores a elementos web, ya sea texto o fondo. Tenemos un mixin que te permite generar clases CSS para cada color de la paleta.
El mixin toma algunos argumentos que le permiten controlar el nombre de la clase CSS así como la propiedad CSS a la que pasarle el color de la paleta;
$prop- La propiedad CSS a la que asignar el color.$prefix- Una cadena de prefijo que se adjuntará al nombre de clase generado. El valor por defecto es 'igx'.$suffix- Una cadena de sufijos que se adjuntará al nombre de la clase generada.$palette- La paleta para usar.
Por ejemplo, si desea generar clases CSS que apliquen color de fondo a los elementos, puede hacer lo siguiente:
@include color-classes(
$prop: 'background-color',
$prefix: 'bg'
);
El código anterior generará clases CSS para cada variante de color en la paleta. Por ejemplo, la500 variante de color de laprimary paleta recibirá la siguiente clase.bg-primary-500;
<div class="bg-primary-500">...</div>
CSS Variables
Al leer sobre la paleta de colores en la sección de Variables CSS de la documentación, habrás notado que todos los colores de la paleta se incluyen como variables CSS. Hacemos esto internamente cada vez que generamos un tema usando eltheme mixin. Llamatheme a otro mixin en su cuerpo -palette. Toma una paleta y convierte los colores en variables CSS.
Utilice este mixin cuando desee que los colores de su paleta personalizada se incluyan como variables CSS.
He aquí un ejemplo:
$my-palette: palette(
$primary: #2ab759,
$secondary: #f96a88,
$surface: #e5e5e5
);
@include palette($my-palette);
API Reference
Additional Resources
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.
GitHub