Paletas
O mecanismo de temas Ignite UI for Angular fornece diversas funções e mixins poderosos para gerar e recuperar cores.
Visão geral
Paletas no contexto do Ignite UI for Angular são declaradas como Sass Maps com as chaves desses mapas sendo as cores da paleta (primary, secondary, surface, etc.). Cada cor é, por sua vez, um mapa em si e tem todas as variantes de cores listadas como chaves. Os valores atribuídos a essas variantes de cores são as cores reais usadas em todos os temas de componentes. Todos os mapas de paletas são gerados programaticamente pela função palette. A função aceita argumentos para as cores primary, secondary, surface, gray, info, success, warn e error. A cor primary geralmente é a cor da sua marca. Ela é usada principalmente para estilizar elementos estáticos, como o componente igx-navbar. A cor secondary é aquela usada em elementos que são acionáveis, como botões, interruptores, controles deslizantes, etc. A cor surface é aquela usada para a cor de fundo de alguns componentes, como cartões, menus, seletores de data/hora, planilhas de banners, etc. Os únicos argumentos necessários são os das cores primary, secondary e surface. Usamos como padrão as cores para surface, gray, info, success, warn e error para um conjunto predefinido de nossa escolha.
Para começar com sua primeira paleta de cores, crie um arquivo scss que seria o arquivo base para seu tema global. Vou chamar o meu de_variables.scss.
// _variables.scss
$melon-palette: palette(
$primary: #2ab759,
$secondary: #f96a88,
$surface: #e5e5e5
);
Warning
O valor que você passa para $primary, $secondary e surface ou qualquer outra cor deve ser do tipo color. Você não pode passar variáveis CSS como argumentos, pois elas não podem ser resolvidas no tempo de construção do Sass.
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.
A função palette faz muito internamente para ajudar você a criar cores no momento da construção que você pode reutilizar em seus documentos.scss. A função é boa porque criará um enorme mapa de cores para você, mas o algoritmo para gerar as variantes de cores é muito opinativo e pode não corresponder às suas necessidades exatas. Nossos temas de componentes não se importam com a forma como a paleta é gerada, eles só se importam com o formato do mapa.
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
É importante definir as chaves do mapa como strings, explicitamente entre aspas - 'primary', 'secondary', 'gray', etc. O mesmo se aplica a todas as variantes de cor -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
Semelhante às cores primary, secondary e surface, você pode fornecer outra cor para a função palette que será usada para gerar tons de cinza. A cor padrão usada para gerar a paleta gray em todos os temas claros é #000, ou mais conhecida como black. As variantes de cor gray são usadas principalmente para definir cores de texto em componentes. Modificar o valor é útil ao alterar as cores de fundo ou de superfície em seu aplicativo. Por exemplo, se seu aplicativo usa um fundo de superfície mais escuro, definir a cor gray como white é sensato e forçará todas as cores de texto a serem baseadas em tons de white.
Para gerar uma paleta que usa white para seus tons de cinza:
// 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
Fornecemos uma função que é fácil de lembrar e usar -color. Ela pode receber até quatro argumentos -palette, color, variant e 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;
}
Se você omitir o argumento $palette, você obterá uma string referenciando a variável CSS correspondente variant. Se você não fornecer $color e/ou $variant, eles serão atribuídos a primary e 500 respectivamente.
Contrast Text Colors
Semelhante à forma como recuperamos variantes de cor, há uma maneira de obter a cor do texto de contraste para cada uma das variantes de cor na paleta com a função contrast-color, que aceita o mesmo tipo e número de argumentos que a função color.
$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- A propriedade CSS para atribuir a cor.$prefix- Uma string de prefixo a ser anexada ao nome da classe gerada. O padrão é 'igx'.$suffix- Uma string de sufixo a ser anexada ao nome da classe gerada.$palette- A paleta a ser usada.
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'
);
O código acima gerará classes CSS para cada variante de cor na paleta. Por exemplo, a variante de 500 cores da paleta primary receberá a seguinte classe.bg-primary-500;
<div class="bg-primary-500">...</div>
CSS Variables
Ao ler sobre a paleta de cores na seção Variáveis CSS da documentação, você deve ter notado que todas as cores da paleta são incluídas como variáveis CSS. Fazemos isso internamente toda vez que geramos um tema usando o mixin theme. O theme chama outro mixin em seu corpo -palette. Ele pega uma paleta e converte as cores nela em variáveis CSS.
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