Paletas
O mecanismo de temas Ignite UI for Angular fornece diversas funções e mixins poderosos para gerar e recuperar cores.
Visão geral
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.
Criamos uma paleta que contém variantes para todas as cores, incluindo cores de contraste de texto criadas automaticamente para cada variante. Se você não verificou a documentação sobre paletas com variáveis CSS, vá conferir agora. Ela contém informações sobre todas as variantes de cores de uma 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.
Caso você queira criar sua paleta manualmente ou criar você mesmo a função de geração de paleta, aqui está o que esperamos obter como um 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
Fornecemos paletas claras e escuras predefinidas, que você pode usar junto com nossos esquemas para criar temas para seus 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 escuras
$dark-material-palette$dark-fluent-excel-palette$dark-fluent-word-palette$dark-fluent-palette$dark-bootstrap-palette$dark-indigo-palette
Você pode misturar e combinar todas as paletas claras com um esquema de luz de sua escolha e vice-versa - todas as paletas escuras com um esquema escuro que você acha que melhor atenderá às suas necessidades e visão.
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 algumas pessoas preferem usar classes CSS para aplicar cores a elementos da web, seja texto ou plano de fundo. Temos um mixin que permite gerar classes CSS para cada cor na paleta.
O mixin recebe alguns argumentos que permitem que você controle o nome da classe CSS, bem como a propriedade CSS para a qual passar a cor da 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 exemplo, se você quiser gerar classes CSS que apliquem cor de fundo aos elementos, você pode fazer o seguinte:
@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.
Use este mixin quando quiser que as cores da sua paleta personalizada sejam incluídas como variáveis CSS.
Aqui está um exemplo:
$my-palette: palette(
$primary: #2ab759,
$secondary: #f96a88,
$surface: #e5e5e5
);
@include palette($my-palette);
API Reference
Additional Resources
Nossa comunidade é ativa e sempre acolhedora para novas ideias.
GitHub