paletas
El motor de temas de Ignite UI for Angular proporciona varias funciones y mezclas potentes para generar y recuperar colores.
Descripción general
Palettes in the context of Ignite UI for Angular are declared as Sass Maps with the keys of those map being the palette colors (primary, secondary, surface, etc.). Each color is in turn a map itself and has all color variants listed as keys. The values assigned to those color variants are the actual colors used throughout all component themes. All palette maps are generated programmatically by the palette function. The function accepts arguments for primary, secondary, surface, gray, info, success, warn, and error colors. The primary color is usually your brand color. It is mostly used to style static elements, such as the igx-navbar component. The secondary color is the one used on elements that are actionable, such as buttons, switches, sliders, etc.
The surface color is the one used for background color of some components, such as cards, menus, date/time pickers, banners sheets, etc.. The only required arguments are the ones for primary, secondary and surface colors. We default the colors for surface, gray, info, success, warn, and error to a predefined set of our choosing.
To get started with your first color palette, create an scss file that would be the base file for your global theme. I will call mine _variables.scss.
// _variables.scss
$melon-palette: palette(
$primary: #2ab759,
$secondary: #f96a88,
$surface: #e5e5e5
);
Warning
The value you pass to $primary, $secondary and surface or any other color must be of type color. You cannot pass CSS variables as arguments as those can't be resolved at Sass build-time.
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.
The palette function does a lot internally to help you create colors at build-time that you can reuse throughout your .scss documents. The function is nice in that it will create a huge map of colors for you, but the algorithm for generating the color variants is very opinionated and may not match your exact needs. Our component themes don't care how the palette is generated, it only cares about the shape of the map.
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
It's important to set the map keys as strings, explicitly between quotation marks - 'primary', 'secondary', 'gray', etc. The same applies for all color variants - 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
Similar to the primary, secondary and surface colors, you can provide another color to the palette function that will be used to generate shades of gray. The default color used to generate the gray palette in all light themes is #000, or better known as black. The gray color variants are mainly used for setting text colors across components. Modifying the value is useful when changing the background or surface colors in your application. For instance, if your application uses a darker surface background, setting the gray color to white is sensible, and will force all text colors to be based on shades of white.
To generate a palette that uses white for its gray shades:
// 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
We provide a function that is easy to remember and use - color. It can take up to four arguments - palette, color, variant and opacity;
// 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;
}
If you omit the $palette argument, you will get a string referencing the corresponding CSS variable variant. If you do not provide $color and/or $variant, they will be assigned to primary and 500 respectively.
Contrast Text Colors
Similar to how we retrieve color variants, there's a way to get the contrast text color for each of the color variants in the palette with the function contrast-color, accepts the same type and number of arguments as the color function.
$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- The CSS property to assign the color to.$prefix- A prefix string to be attached to the generated class name. The default is 'igx'.$suffix- A suffix string to be attached to the generated class name.$palette- The palette to use.
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'
);
The above code will generate CSS classes for each color variant in the palette. For instance, the 500 color variant of the primary palette will be given the following class .bg-primary-500;
<div class="bg-primary-500">...</div>
CSS Variables
When reading about the color palette in the CSS Variables section of the documentation, you would've noticed that all palette colors are included as CSS variables. We do this internally every time we generate a theme using the theme mixin. The theme calls another mixin in its body - palette. It takes a palette and converts the colors in it into CSS variables.
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