Tematização com Sass
Visão geral
Como o IgniteUI para Angular baseia seus designs de componentes nos Princípios de Design de Material, tentamos chegar o mais próximo possível das cores, tamanhos, tipografia e aparência geral de nossos componentes daqueles criados pelo Google para nosso tema padrão. O sistema de Design de Material continua mudando e não se desvia de implementar grandes mudanças, o que acaba afetando como escrevemos e modificamos os estilos dos componentes que enviamos. Com suporte para 3 temas adicionais - Microsoft Fluent, Bootstrap e nossos próprios sistemas Indigo Design, adaptar o sistema de Design de Material não é uma tarefa simples. Isso exigiu que construíssemos uma base muito modular, configurável e ainda assim sustentável a partir da qual estilos de componentes muito diferentes podem ser gerados. Também temos que oferecer suporte a navegadores antigos e novos, então o Sass tem sido uma tremenda ajuda nesse esforço, nos dando ferramentas que nos permitiram criar um sistema visceral de variáveis, funções e mixins.
Nossa abordagem para tematização é baseada em vários conceitos - Esquemas de Tema, Paletas, Tipografia, Redondeza, Elevações e Animações. Esses conceitos são então misturados para produzir o tema final. Cada conceito é ainda mais dividido para permitir uma abordagem mais granular para o estilo.
Como queremos garantir que aspectos específicos do nosso sistema de design permaneçam incólumes, não permitimos que você altere tudo e reescreva completamente os estilos usando a API que expomos. No entanto, você pode fazer isso se pesquisar um pouco.
Explicaremos cada conceito em detalhes e as APIs relacionadas para que você possa realmente se sentir no controle do nosso mecanismo de criação de temas.
Note
Embora a biblioteca de temas Sass seja poderosa, a maioria das pessoas precisará modificar apenas algumas variáveis CSS para personalizar o tema padrão. Recomendamos que você leia a documentação das variáveis CSS primeiro. Você só precisará usar o Sass se quiser modificar o tema produzido em um nível mais profundo. Um bom exemplo seria quando você precisa criar várias variantes de tema reutilizáveis diferentes para o mesmo componente ou fazer o tree-shake do CSS produzido para incluir apenas estilos para os componentes que você usa em seu aplicativo.
Paletas
O primeiro conceito que precisamos entender é paletas. Como em qualquer ferramenta visual, as cores são o principal fator de diferenciação entre um aplicativo e outro. As Diretrizes de Design de Material prescrevem paletas predefinidas de cores que variam em matiz, luminosidade e saturação para uma determinada cor base. Há um bom motivo 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 com base nas diretrizes de Material que correspondem à sua marca, provavelmente não teria sorte. Reconhecemos que isso é um problema, então inventamos um algoritmo que gera paletas semelhantes a Material a partir das cores base que você fornece. Também geramos cores de texto de contraste para cada matiz na paleta.
Esquemas
O segundo conceito importante gira em torno de esquemas de tema. Esquemas de tema são como receitas para temas de componentes individuais. Eles dão aos temas de componentes individuais informações sobre quais cores de paleta eles devem usar e qual deve ser a redondeza e as sombras gerais. Por exemplo, um esquema de componente diz a um tema de componente que a cor de fundo de um elemento deve ser a variante 500 da cor primary, sem se importar com qual paleta o usuário passa para o tema de componente.
Tipografia
A tipografia é um módulo separado em nossa biblioteca de temas Sass e é desacoplado dos temas de componentes individuais. Embora tenhamos uma fonte padrão de escolha, 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, botões, corpo de texto, etc. em seu aplicativo.
Redondeza
O sistema de temas Sass define a redondeza mínima e máxima para cada componente. Você pode estar mais familiarizado com o termo border-radius no contexto de CSS. A redondeza é semelhante, pois usa border-radius para estilizar os elementos do componente, no entanto, a redondeza no contexto do sistema de temas é um número entre 0 e 1. Um componente que tem uma redondeza de 0 usa o border-radius mínimo conforme definido pelo tema do componente - pode ser 0 ou um valor diferente de zero. Da mesma forma, definir a redondeza como 1 definirá o border-radius para o raio máximo permitido para o componente. Enquanto o border-radius mínimo e máximo são definidos no próprio tema do componente, o valor da redondeza base é definido no esquema do componente.
Elevações
Elevações são as sombras sendo definidas para diferentes partes de cada tema de componente. Elas são baseadas em 25(0-24) níveis, conforme prescrito pelas diretrizes do Material Design. Ter um número finito de sombras nos permite ter uma maneira consistente de definir a hierarquia de profundidade em nossos aplicativos. No Sass, elas são definidas como um mapa de 24 níveis de elevação com box-shadows como valores e, posteriormente, passadas para um tema de componente. Os esquemas de componentes fornecerão informações genéricas ao tema sobre os níveis de elevação que elementos específicos devem usar.
Animações
Alguns componentes usam transições de quadros-chave e animações para comunicar mudanças de estado de forma clara. Incluímos uma enorme biblioteca de animações de quadros-chave e funções de temporização que podem ser importadas e usadas em todo o seu aplicativo. Elas são treeshaken, então incluir o mesmo mixin de animação duas vezes produz apenas uma única declaração CSS na sua folha de estilo de saída.
Themes
Finalmente, temos temas de componentes. Paletas, Esquemas, Elevações, Arredondamento e Animações não fariam muito bem por si só se não fossem usados por um tema. Nós fornecemos temas para componentes individuais e um global, que estiliza todo o aplicativo e cada componente nele. Você simplesmente passa a paleta e o esquema para o tema global, nós cuidamos do resto. Você pode, é claro, estilizar cada componente individualmente ao seu gosto, criando esquemas personalizados, elevações e passando valores diferentes para arredondamento e cores para os mixins do tema do componente.
Additional Resources
Aprenda os conceitos:
Aprenda a criar temas para todo o aplicativo:
Aprenda a criar temas específicos para componentes:
Nossa comunidade é ativa e sempre acolhedora para novas ideias.
GitHub