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 de Ignite UI for Angular são declaradas como Mapas Sass, com as chaves desses mapas sendo as cores da paleta (primary,secondary,surface, etc.). Cada cor é, por sua vez, um mapa e tem todas as variantes de cor listadas como chaves. Os valores atribuídos a essas variantes de cor são as cores reais usadas em todos os temas componentes. Todos os mapas de paleta são gerados programaticamente pela função paleta. A função aceita argumentos paraprimary,secondarysurface,,gray,info,,success,warn eerror cores. Aprimary cor geralmente é a cor da sua marca. Ele é usado principalmente para estilizar elementos estáticos, como oigx-navbar componente. Asecondary cor é a usada em elementos que são acionáveis, como botões, interruptores, controles deslizantes, etc. Asurface cor é usada como cor de fundo de alguns componentes, como cartões, menus, seletores de data/hora, folhas de banners, etc. Os únicos argumentos obrigatórios são os a favorprimary esecondarysurface as cores. Nós definimos as cores parasurface,gray,info,success,,warn eerror para um conjunto pré-definido de nossa escolha.
Para começar com sua primeira paleta de cores, crie um arquivo scss que seja o arquivo base do seu tema global. Eu vou ligar para o meu_variables.scss.
// _variables.scss
$melon-palette: palette(
$primary: #2ab759,
$secondary: #f96a88,
$surface: #e5e5e5
);
Warning
O valor que você passa para$primary,$secondary esurface /ou qualquer outra cor, deve ser do tipo cor. Você não pode passar variáveis CSS como argumentos, pois elas não podem ser resolvidas em tempo de compilaçã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.
Apalette função faz muito internamente para ajudar você a criar cores durante a construção que você pode reutilizar em seus.scss documentos. A função é legal porque cria um enorme mapa de cores para você, mas o algoritmo para gerar as variantes de cores é muito opinativo e pode não corresponder exatamente às suas necessidades. Nossos temas componentes não se importam com como a paleta é gerada, ela só se importa 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 de mapa como strings, explicitamente entre aspas -'primary','secondary','gray', etc. O mesmo vale para 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 àsprimarysecondary cores esurface cores, você pode fornecer outra cor para apalette função que será usada para gerar tons de cinza. A cor padrão usada para gerar agray paleta em todos os temas de luz é#000, ou mais conhecido comoblack. Asgray variantes de cor são usadas principalmente para definir cores de texto entre os componentes. Modificar o valor é útil ao alterar as cores do fundo ou da superfície na sua aplicação. Por exemplo, se sua aplicação usa um fundo de superfície mais escura, definir agray cor parawhite é sensato e vai forçar todas as cores do texto a serem baseadas em tons de.white
Para gerar uma paleta que usewhite 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
Oferecemos uma função fácil de lembrar e usar -color. Pode ser necessário até quatro argumentos -palette,color,evariantopacity;
// 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$palette argumento, obterá uma string referenciando a variável CSS correspondente. Se você não fornecer$color e/ou$variant, eles serão designados paraprimary e500 respectivamente.
Contrast Text Colors
Semelhante à forma como recuperamos variantes de cor, há uma maneira de obter a cor de contraste do texto para cada uma das variantes de cor na paleta com a funçãocontrast-color aceitar o mesmo tipo e número de argumentos que acolor função.
$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 cadeia de prefixos a ser anexada ao nome da classe gerada. O padrão é 'igx'.$suffix- Uma string de sufixos a ser anexada ao nome da classe gerada.$palette- A paleta a usar.
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, a500 variante de cor daprimary paleta 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 CSS Variables da documentação, você deve ter notado que todas as cores da paleta estão incluídas como variáveis CSS. Fazemos isso internamente toda vez que geramos um tema usando otheme mixin. Chamatheme 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