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 dos esquemas temáticos. Esquemas de temas são como receitas para temas de componentes individuais. Eles fornecem aos temas componentes individuais informações sobre quais cores de paleta devem usar e qual deve ser a arredondamento e as sombras gerais. Por exemplo, um esquema de componentes diz a um tema componente que a cor de fundo de um elemento deve ser a500 variante daprimary cor, sem se importar com qual paleta o usuário passa para o tema 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 tematiza Sass define a arredondamento mínimo e máximo para cada componente. Você pode estar mais familiarizado com o termoborder-radius no contexto do CSS. A arredondamento é semelhante no sentido de que é usadoborder-radius para estilizar os elementos do componente, porém, a arredondamento no contexto do sistema de temação é um número entre 0 e 1. Um componente com arredondamento 0 usa o raio mínimo da borda definido pelo tema do componente – pode ser 0 ou um valor diferente de zero. Da mesma forma, definir a arredondamento em 1 definirá o raio da borda para o raio máximo permitido para o componente. Enquanto o raio mínimo e máximo da borda são definidos no próprio tema do componente, o valor de arredondamento base é definido no esquema do componente.
Elevações
Elevações são as sombras definidas para diferentes partes de cada tema componente. Eles são baseados em níveis 25(0-24) conforme prescrito pelas diretrizes de Design de Materiais. Ter um número finito de sombras nos permite ter uma forma consistente de definir hierarquia de profundidade em nossas aplicações. No Sass, eles são definidos como um mapa de 24 níveis de elevação combox-shadows valores como e depois passados para um tema componente. 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