Temas

Com apenas algumas linhas de código, os usuários podem facilmente mudar o tema de seus componentes. Sendo desenvolvido por meio do SASS, o uso da API é de baixa dificuldade e oferece reestilização de um componente, de vários componentes ou de todo o conjunto.

The Essence of a Theme

Como o IgniteUI para Angular baseia seus designs de componentes nas Diretrizes de Design de Material, tentamos chegar o mais próximo possível em cores, tamanhos e aparência geral de nossos componentes daqueles criados pelo Google.

Nossa abordagem à temática é baseada em vários conceitos simples.

Paletas

O primeiro conceito é o de paletas de cores. Como em qualquer ferramenta visual, as cores são a principal diferença entre um aplicativo e outro. As Diretrizes de Design de Material prescrevem paletas predefinidas de cores que variam em matiz e luminosidade para uma cor base. Há uma boa razão para isso. Eles realmente querem garantir uma boa correspondência de cores e contraste entre as cores de fundo e as cores do texto em primeiro plano. Isso é ótimo, mas limitante ao mesmo tempo. Se você quisesse ter sua própria paleta personalizada que correspondesse à sua marca, você estaria sem sorte. Reconhecemos que isso é um problema, então inventamos um algoritmo que geraria paletas semelhantes a Material a partir das cores base que você fornece. Ainda mais, também geramos cores de texto de contraste para cada matiz na paleta.

Temas

O segundo conceito é o de temas. Paletas não fariam muito bem se não fossem usadas por um tema. Então temos temas para cada componente, e um global, que estiliza todo o aplicativo e cada componente nele. Você simplesmente passa sua paleta gerada para o tema global, nós cuidamos do resto. Você pode, é claro, estilizar cada componente individualmente ao seu gosto. Daremos uma olhada mais de perto em como fazer isso mais tarde neste artigo.

Tipografia

O último conceito gira em torno da tipografia. Embora tenhamos uma escolha de tipo de letra padrão, realmente queremos dar a você o poder de estilizar seu aplicativo de todas as maneiras. A tipografia é uma parte muito importante disso. Fornecemos um método para alterar a família da fonte, os tamanhos e pesos para títulos, subtítulos e textos de parágrafo em seu aplicativo.

Note

O tema requer Sass.

Generating Color Palettes

Nossa biblioteca de temas é baseada em Sass. Se você usou o Ignite UI CLI para inicializar seu aplicativo, você pode especificar o estilo na configuração angular.json para scss, o CLI cuidará da compilação dos estilos Sass para você. Se você não usou Ignite UI CLI, então você tem que configurar seu construtor para compilar os estilos Sass para você.

Nossas paletas aceitam argumentos para cores primary, secondary, surface, info, success, warn e error. A cor primária é aquela que será a cor mais proeminente em todo o seu aplicativo. A cor secundária é aquela usada em elementos que são acionáveis, como botões, interruptores, controles deslizantes, etc. A cor de superfície é usada para a cor de fundo de alguns dos componentes. Os únicos argumentos necessários são aqueles para cores primary, secondary e surface. Nós definimos como padrão aqueles para info, success, warn e error para um conjunto predefinido de nossa escolha.

Para começar com nossa primeira paleta de cores, crie um arquivo scss que seria o arquivo base para seu tema global. Vou chamar o meu de "my-app-theme.scss".

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

$company-color: #2ab759; // Some green shade I like
$secondary-color: #f96a88; // Watermelon pink
$surface-color: #e5e5e5; // Light gray

$my-color-palette: palette(
  $primary: $company-color,
  $secondary: $secondary-color,
  $surface: $surface-color
);

Agora temos uma paleta, que contém exatamente 216 cores! Uau, espera, o quê? Como isso aconteceu? Você forneceu 3 e obteve 216? De onde vieram as outras 213 cores? Vamos parar aqui para explicar o que aconteceu, pois é muito importante. Quando você forneceu cores primary, secondary e surface, nós as pegamos e geramos tons e cores de destaque para cada uma. Basicamente, agora em sua paleta você tem 3 subpaletas para cores primary, secondary e surface. Cada subpaleta contém 13 variações de cores adicionais com base na cor original. 5 das 13 cores são tons mais claros da sua cor original e 4 são mais escuras. As 4 cores restantes são versões 'de destaque' mais exageradas da cor original. Com a cor original, isso totaliza 14 cores em cada paleta.

Com tantas cores em cada subpaleta, você pode estar se perguntando, como diabos eu vou saber qual é qual, certo? É bem simples, na verdade. Cada uma das cores na subpaleta tem um número. Atribuímos o número 500 à cor original. Os tons mais claros começam em 50 e vão até 400. Os tons mais escuros começam em 600 e vão até 900. As cores de destaque têm nomes de string A100, A200, A400 e A700, respectivamente. Ok, mas agora são apenas 42 de 216. Não se preocupe, há outra subpaleta que oferecemos a você. Uma que consiste em 'cores' cinzas, chamadas grays. É como as outras duas subpaletas de cores, mas não inclui nenhuma variação de destaque. Ótimo, agora estamos em 42 + 10 para um total de 52 cores. Ainda está muito longe de 216. De onde vêm as outras 164 cores? Vamos resolver o quebra-cabeça final. Lembre-se de que você também pode ter 4 cores adicionais para info, success, warn e error. Isso deixa outras 56 cores não contabilizadas. Lembre-se de que a contagem para as subpaletas primary, secondary, surface, info, success, warn, error e grays era exatamente 108, que é a metade das 216 cores. A metade restante das cores são as cores de texto de contraste para cada variante de cor, todas elas têm-contrast como um sufixo em seu nome de variável e são pretas ou brancas.

Entendeu? Ótimo! Mas como acessar qualquer uma das cores na paleta?

Obtendo cores de subpaleta

Fornecemos uma função que é fácil de lembrar e usar color. Ela recebe três argumentos -palette, color e variant;

$my-primary-600: color($my-color-palette, "primary", 600);
$my-primary-A700: color($my-color-palette, "secondary", "A700");
$my-warning-color: color($my-color-palette, "warn");
// sample usage

.my-awesome-class {
  background: $my-primary-600;
  border-color: $my-primary-A700;
}

.warning-bg {
  background: $my-warning-color;
}

Obtendo cores de texto contrastantes

Semelhante a como obtemos as cores da subpaleta, há uma maneira de obter a cor de texto de contraste para cada uma das cores nas subpaletas.

$my-primary-800: color($my-palette, "primary", 600);
$my-primary-800-text: contrast-color($my-palette, "primary", 600);
// sample usage

.my-awesome-article {
  background: $my-primary-800;
  color: $my-primary-800-text;
}

Generating a Theme

Se você incluiu o arquivo "igniteui-angular.css" no seu projeto de aplicativo, agora é um bom momento para removê-lo. Usaremos nosso próprio arquivo "my-app-theme.scss" para gerar nosso próprio tema.

Vamos começar do nosso primeiro exemplo nesta página. Desta vez, porém, vamos incluir dois mixins core e theme; Por enquanto, core não aceita nenhum argumento. theme, no entanto, aceita alguns -$palette, $schema, $exclude, $roundness, $elevation, $elevations. Por enquanto, falaremos apenas sobre o argumento $palette.

Important

Incluir core antes theme é essencial. O mixin core fornece todas as definições básicas necessárias para theme funcionar.

// Import the IgniteUI themes library first
@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

$company-color: #2ab759; // Some green shade I like
$secondary-color: #f96a88; // Watermelon pink
$surface-color: #e5e5e5; // Light gray

$my-color-palette: palette(
  $primary: $company-color,
  $secondary: $secondary-color,
  $surface: $surface-color
);

// IMPORTANT: Make sure you always include core first!
@include core();
// Pass the color palette we generated to the theme mixin
@include theme($my-color-palette);

Pronto. Seu aplicativo agora usará as cores da sua paleta recém-gerada.

Em seu estado atual, a definição de tipografia personalizada é limitada a alterar a font family do aplicativo. Atualizaremos essa funcionalidade com lançamentos subsequentes. Nossa intenção é fornecer uma maneira robusta de personalizar a tipografia em seu aplicativo.

Para personalizar a tipografia, use o mixin typography. Ele recebe exatamente um argumento -config.

Important

Incluir typography após core é essencial. Isso está sujeito a alterações em lançamentos futuros.

// Import the IgniteUI themes library first
@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

// IMPORTANT: Make sure you always include core first!
@include core();
// Include typography before theme
@include typography(
  $config: (
    font-family: "Comic Sans MS",
  )
);
@include theme($default-palette);