paletas
El motor de temática Ignite UI for Angular proporciona varias funciones y combinaciones potentes para generar y recuperar colores.
Descripción general
Las paletas en el contexto de Ignite UI for Angular se declaran como Sass Maps y las claves de esos mapas son los colores de la paleta (primary, secondary, gray, etc.). Cada color es a su vez un mapa en sí mismo y tiene todas las variantes de color enumeradas como claves. Los valores asignados a esas variantes de color son los colores reales utilizados en todos los temas de los componentes. Todos los mapas de paleta se generan mediante programación mediante la función de paleta. La función acepta argumentos para los colores primary, secondary, gray, surface, info, success, warn y error. El color primary suele ser el color de su marca. Se utiliza principalmente para diseñar elementos estáticos, como el componente igx-navbar. El color secundario es el que se usa en elementos que son procesables, como botones, interruptores, controles deslizantes, etc. Los únicos argumentos requeridos son los de los colores primary y secondary. El color de la superficie se utiliza para colorear la "superficie" de algunos componentes, como tarjetas, menús, selectores de fecha/hora, hojas de pancartas, etc. Los colores predeterminados para surface, gray, info, success, warn y error son un conjunto predefinido de nuestra elección.
Para comenzar con su primera paleta de colores, cree un archivo scss que será el archivo base para su tema global. Yo llamaré al mío _" variables.scss".
// _variables.scss
$melon-palette: palette(
$primary: #2ab759,
$secondary: #f96a88,
);
Warning
El valor que pase a $primary, $secondary o cualquier otro color debe ser de tipo color. No puede pasar variables CSS como argumentos, ya que no se pueden resolver en el momento de la 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.
La función palette hace mucho internamente para ayudarlo a crear colores en el momento de la compilación que puede reutilizar en sus documentos.scss. La función es buena porque creará un enorme mapa de colores para usted, pero el algoritmo para generar las variantes de color es muy obstinado y puede no satisfacer sus necesidades exactas. A nuestros temas componentes no les importa cómo se genera la paleta, solo les importa 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: to-hsl(#e6eff8),
'50-contrast': black,
100: to-hsl(#bfd7f2),
'100-contrast': black,
200: to-hsl(#98bfec),
'200-contrast': black,
300: to-hsl(#85b5e9),
'300-contrast': white,
400: to-hsl(#73a6e4),
'400-contrast': white,
500: to-hsl(#6797de),
'500-contrast': white,
600: to-hsl(#3681dd),
'600-contrast': white,
700: to-hsl(#357fda),
'700-contrast': white,
800: to-hsl(#306dc8),
'800-contrast': white,
900: to-hsl(#284ea8),
'900-contrast': white,
'A100': to-hsl(#98bfec),
'A100-contrast': white,
'A200': to-hsl(#73a6e4),
'A200-contrast': white,
'A400': to-hsl(#3681dd),
'A400-contrast': white,
'A700': to-hsl(#284ea8),
'A700-contrast': white
),
secondary: (
50: to-hsl(#fef7e2),
'50-contrast': black,
100: to-hsl(#fdeab7),
'100-contrast': black,
200: to-hsl(#fbdd89),
'200-contrast': black,
300: to-hsl(#fad15c),
'300-contrast': black,
400: to-hsl(#f9c63f),
'400-contrast': black,
500: to-hsl(#f7bd32),
'500-contrast': white,
600: to-hsl(#f6b02d),
'600-contrast': white,
700: to-hsl(#f49e2a),
'700-contrast': white,
800: to-hsl(#f38e28),
'800-contrast': white,
900: to-hsl(#f38e28),
'900-contrast': white,
'A100': to-hsl(#fbdd89),
'A100-contrast': black,
'A200': to-hsl(#f9c63f),
'A200-contrast': black,
'A400': to-hsl(#f6b02d),
'A400-contrast': white,
'A700': to-hsl(#f38e28),
'A700-contrast': white
),
gray: (
50: to-hsl(#fff),
'50-contrast': black,
100: to-hsl(#fafafa),
'100-contrast': black,
200: to-hsl(#f5f5f5),
'200-contrast': black,
300: to-hsl(#f0f0f0),
'300-contrast': black,
400: to-hsl(#dedede),
'400-contrast': black,
500: to-hsl(#b3b2b2),
'500-contrast': black,
600: to-hsl(#979696),
'600-contrast': white,
700: to-hsl(#7b7a7a),
'700-contrast': white,
800: to-hsl(#404040),
'800-contrast': white,
900: to-hsl(#1a1a1a),
'900-contrast': white
),
info: (
500: to-hsl(rgb(18, 118, 211)),
'500-contrast': black
),
success: (
500: to-hsl(rgb(76, 184, 96)),
'500-contrast': black
),
warn: (
500: to-hsl(rgb(251, 178, 60)),
'500-contrast': black
),
error: (
500: to-hsl(rgb(255, 20, 75)),
'500-contrast': black
),
surface: (
500: to-hsl(rgb(255, 255, 255)),
'500-contrast': black
)
);
:root {
--ig-primary-a: 1;
--ig-secondary-a: 1;
--ig-info-a: 1;
--ig-success-a: 1;
--ig-warn-a: 1;
--ig-error-a: 1;
--ig-gray-a: 1;
--ig-surface-a: 1;
}
La función to-hsl() toma un color, sin importar el espacio de color, y devuelve sus valores de tono, saturación y luminosidad en una lista separada por comas, que se utilizará al declarar las variables CSS para cada tono en la paleta. El valor alpha para cada color de la paleta (primario, secundario, gris, etc.) debe inicializarse por separado.
Predefined Palettes
Proporcionamos paletas claras y oscuras predefinidas, que puede usar junto con nuestros esquemas para crear temas para sus componentes:
- Paletas de luz
- $paleta-de-materiales-claros
- $paleta-excel-fluida-luz
- $paleta-de-palabras-luz-fluida
- $paleta-luz-fluida
- $paleta-bootstrap-luz
- $paleta-índigo-claro
- Paletas oscuras
- $paleta-de-material-oscuro
- $paleta-de-excel-fluida-oscura
- $paleta-de-palabras-fluidas-oscuras
- $paleta-fluida-oscura
- $paleta-bootstrap-oscura
- $paleta-índigo-oscuro
También proporcionamos algunas paletas adicionales que puede utilizar:
- Paletas adicionales ligeras
- $paleta-verde-claro
- $paleta-violeta-clara
- Paletas adicionales oscuras
- $paleta-verde-oscuro
- $paleta-morado-oscuro
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.
The Default Palette
El theme mixin toma una paleta (ver la sección anterior) como uno de sus argumentos. La paleta pasada se asigna a la variable global $default-palette. Esta paleta almacenada en esta variable se utiliza en toda la biblioteca Sass como paleta alternativa, siempre que se espera una paleta, pero el usuario no la proporciona explícitamente.
Puede utilizar este conocimiento a su favor para permitirle reutilizar la misma paleta en varios documentos Sass en su aplicación.
Por ejemplo, podría tener los siguientes archivos Sass en su aplicación.
// src/styles/_variables.scss
$my-palette: palette(
$primary: #2ab759,
$secondary: #f96a88,
);
$default-palette: $my-palette;
En su archivo de estilos principal:
// src/styles/styles.scss
@use 'variables' as *;
@include theme($palette: $my-palette);
En un archivo.scss de componente:
@use '../styles/styles/variables' as *;
:host {
background: color($variant: 900);
}
Esto garantiza que la misma paleta, declarada en nuestro archivo_variables.scss, se utilice en todos los archivos Sass.
Grayscale Colors
De manera similar a los colores primary y secondary, puede proporcionar otro color a la función palette que se utilizará para generar tonos de grises. El color predeterminado que se utiliza para generar la paleta gray en todos los temas claros es #000, o mejor conocido como black. Las variantes de color gray se utilizan principalmente para configurar los colores del texto en todos los componentes. Modificar el valor es útil al cambiar los colores de fondo o de superficie en su aplicación. Por ejemplo, si su aplicación utiliza un fondo de superficie más oscuro, establecer el color gray en white es sensato y obligará a que todos los colores del texto se basen en tonos de white.
Para generar una paleta que utilice white para sus tonos grises:
// Import the Ignite UI themes library first
$company-color: #2ab759; /* Some green shade I like */
$secondary-color: #f96a88; /* Watermelon pink */
$grayscale-base: #fff; /* Used to generate shades of gray */
$my-color-palette: palette(
$primary: $company-color,
$secondary: $secondary-color,
$gray: $grayscale-base
);
Colors Variants
Proporcionamos una función que es fácil de recordar y usar: color. Puede tomar hasta tres argumentos: palette, color y variant;
// Get the primary CSS variable reference of the 500 color variant
$my-primary-500: color();
// Get the primary CSS variable reference of the 600 color variant
$my-primary-600: color($variant: 600);
// 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 omite el argumento $palette, obtendrá una cadena que hace referencia a la variante de variable CSS correspondiente. Si no proporciona $color y/o $variant, se asignarán a primary y 500 respectivamente.
Contrast Text Colors
De manera similar a cómo recuperamos variantes de color, hay una manera de obtener el color de texto de contraste para cada una de las variantes de color en la paleta.
$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 la clase generada. El valor predeterminado es 'igx'.$suffix: una cadena de sufijo que se adjuntará al nombre de la clase generada.$palette: la paleta a utilizar.
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, a la variante de 500 colores de la paleta primary se le asignará 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 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 el mixin theme. El theme llama a otro mixin en su palette corporal. Toma una paleta y convierte los colores que contiene 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,
);
@include palette($my-palette);
API Reference
Additional Resources
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.
GitHub