Tipografia
O módulo Sass Ignite UI for Angular Typography permite que você modifique a tipografia de todos os componentes do seu aplicativo, escala tipográfica específica ou componentes específicos.
Visão geral
Um aplicativo pode definir várias scales tipográficas que podem compartilhar categorias de escala entre si. Uma scale category é um conjunto de type styles, contendo informações sobre font-family, font-size, font-weight, line-height, letter-spacing e text-transform.
Ignite UI for Angular expõe 4 escalas de tipo padrão para cada um de seus temas -$material-type-scale, $fluent-type-scale, $bootstrap-type-scale e $indigo-type-scale, que são por sua vez usados pelo mixin de typography para definir os estilos de tipografia. No entanto, você pode criar escalas de tipo adicionais.
Em muitos casos, você só precisaria fazer pequenas modificações na tipografia, portanto, é recomendado que você leia a seção Tipografia da documentação de Variáveis CSS primeiro, se ainda não o fez. Usar o Sass para modificar a tipografia só é necessário se você quiser fazer mudanças mais profundas referentes a toda a escala tipográfica.
Usage
Important
Por padrão, não aplicamos nenhum estilo de tipografia. Para usar nossa tipografia em seu aplicativo, você precisa definir a classe CSS ig-typography em um elemento de nível superior e incluir o mixin de typography em seu arquivo base.scss.
Selecionamos Titillium Web para ser a fonte padrão no tema Material para Ignite UI for Angular. Para usá-lo, você precisa hospedá-lo você mesmo, ou incluí-lo do Google Fonts:
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet"/>
Existem vários mixins e funções que são usados para definir e recuperar estilos de categoria para/de uma escala de tipo. São eles:
type-style[função] - Retorna um conjunto de regras de estilo a serem usadas por uma categoria de escala de tipo.type-scale[função] - Retorna um conjunto de 13 categorias de estilo.type-scale-category[função] - Retorna um mapa de regras de estilo de uma escala de tipo e categoria.type-style[mixin] - Adiciona regras de estilo a um seletor de uma escala de tipo e categoria específica.type-style-vars[mixin] - Adiciona regras de estilo a um seletor de um estilo de tipo específico.typography[mixin] - Define os estilos de tipografia do aplicativo global.
Vamos dar uma olhada mais de perto no que cada um dos mixins e funções mencionados acima fazem.
The Type Style
A função type-style é uma função semelhante a uma interface que simplesmente garante que certos argumentos sejam passados como parte do conjunto de estilos para uma categoria de escala. Digamos, por exemplo, que queremos definir um novo conjunto de regras de estilo para a categoria de escala h1. Para fazer isso, poderíamos simplesmente escrever:
$h1-style: type-style(
$font-size: rem(112px),
$font-weight: 600,
$line-height: rem(96px),
...,
);
The Type Scale
A escala de tipo produz um mapa de 13 estilos de tipografia usados como categorias de escala. Para gerar uma nova escala de tipo, faça o seguinte:
$my-type-scale: type-scale(...);
Important
Você precisa fornecer um estilo de tipo para cada uma das 13 categorias de escala. Um estilo pode ser gerado usando a função type-style como mostrado acima.
$my-type-scale: type-scale(
$h1: $h1-style,
[$h2...$overline],
);
Você pode modificar uma escala de tipo existente estendendo-a. Para alterar o estilo de tipo h1 do $material-type-scale você pode fazer:
$my-type-scale: extend(
$material-type-scale,
(
h1: type-style(...),
)
);
Adicionar estilos de tipo adicionais a uma escala é igualmente fácil:
$my-type-category: type-style(
$font-weight: 600,
$font-size: rem(42px),
$text-transform: uppercase,
...,
);
$my-type-scale: extend(
$my-type-scale,
(
"my-category": $my-type-category,
)
);
The Typography Mixin
O mixin de tipografia define os estilos de tipografia globais para um aplicativo, incluindo como os elementos nativos h1-h6 e p são estilizados.
Atualmente, ele aceita 2 argumentos:
$font-family- A família de fontes global a ser usada pelo aplicativo.$type-scale- A escala de tipo padrão a ser usada pelo aplicativo.
Para usar os estilos de tipografia, inclua o mixin de typography em qualquer lugar depois do core. Vamos aproveitar a escala de tipo $my-type-scale que definimos acima e torná-la a escala de tipo padrão.
@include typography(
$font-family: $material-typeface,
$type-scale: $my-type-scale
);
Expomos quatro variáveis para tipo de letra, semelhantes a type-scale -$material-typeface, $fluent-typeface, $bootstrap-typeface e $indigo-typeface. Você pode usar qualquer uma delas em combinação com qualquer type-scale ao incluir o mixin typography.
Custom Type Styles
O mixin type-style pode ser usado para recuperar as regras de estilo para uma categoria de escala de uma escala de tipo específica. Além disso, ele permite que você adicione regras de estilo adicionais.
.my-fancy-h1 {
@include type-style('h1') {
color: royalblue;
}
}
O código acima produzirá um seletor de estilo de classe.my-fancy-h1, que contém todas as regras de estilo para a categoria de escala h1 de $my-type-scale com a adição da propriedade color definida para a cor royalblue. Agora, se você definir a classe de qualquer elemento para.my-fancy-h1, ele se parecerá com qualquer outro elemento h1, mas também será royalblue na cor.
Component Typography
A maioria dos componentes no Ignite UI for Angular usa categorias de escala para estilizar o texto. Por exemplo, o componente igx-card usa as seguintes categorias de escala:
h6- usado para estilizar o título do cartão.subtitle-2- usado para estilizar legendas de cartões e títulos pequenos.body-2- usado para estilizar o conteúdo do texto do cartão.
Há duas maneiras de alterar os estilos de texto de um card. A primeira é modificando as escalas h6, subtitle-2 e/ou body-2 na escala do tipo de material que passamos para o mixin de tipografia. Então, se quiséssemos tornar o título de um card menor, tudo o que temos a fazer é alterar o font-size da categoria de escala h6.
// Create a custom h6 scale category style
$my-h6: type-style(
$font-size: rem(12px),
);
// Create a custom type scale with the modified h6
$my-type-scale: extend(
$material-type-scale,
(
h6: $my-h6,
)
);
// Pass the custom scale to the global typography mixin
@include typography($type-scale: $my-type-scale);
Warning
O código acima modificará a categoria de escala h6 globalmente, o que afetará a aparência de todos os componentes que usam a escala h6. Isso é feito para consistência, para que todos os elementos h6 tenham a mesma aparência em seu aplicativo. Entendemos que você pode querer aplicar a modificação para h6 apenas a componentes específicos, como o componente igx-card em nosso caso. É por isso que cada componente tem seu próprio mixin de tipografia, que aceita uma configuração de categoria.
// Create a custom h6 scale category style
$my-h6: type-style(
$font-size: rem(12px),
);
// You can specify which categories from the type sale the card uses
$card-categories: (
title: 'h6',
title-small: 'subtitle-1',
subtitle: 'subtitle-2',
content: 'body-2',
);
.my-cool-card {
// Overwrite the 'h6' type style for this scope
@include type-style-vars('h6', $my-h6);
// Pass the custom card catergories to the card typography mixin
@include card-typography($card-categories);
}
Não incluímos mais o mixin typography passando a ele a escala $my-type-scale com nossa modificação para a categoria h6. Agora, tudo o que fazemos é passar o estilo h6 personalizado que criamos para o mixin type-style-vars.
Usando o mixin card-typography, podemos atualizar os estilos de tipografia para todos os elementos no componente card. No exemplo acima, a chave title-small no mapa $card-categories é atribuída ao estilo de tipo subtitle-1. Essa alteração torna o título pequeno no card um pouco maior. Por padrão, o componente card usa o estilo de tipo subtitle-2 para o título pequeno, que tem um tamanho de fonte menor que o subtitle-1. O mixin nos permite substituir esse padrão e aplicar o novo estilo.
Converting Units
Também temos três funções de tipografia para converter unidades de propriedade. Com as funções, podemos converter unidades px para em ou rem, e também unidades em ou rem para px. Tudo o que precisamos fazer é chamar uma das três funções e passar um valor que queremos converter.
To 'px'
.my-component {
margin: px(3.23rem);
}
To 'rem'
.my-component {
margin: rem(10px) rem(5px);
}
To 'em'
.my-component {
margin: em(10px) em(5px);
}
É importante lembrar que, ao converter um valor, a conversão é baseada em um tamanho de fonte base padrão de 16px (onde 16px = 1em/rem). Se quisermos, podemos fornecer um tamanho de fonte base personalizado como um argumento para a função de conversão. Isso garantirá que o valor resultante seja calculado em relação ao tamanho de fonte base especificado.
.my-component {
margin: rem(10px, 26px);
// The result will be 0.385rem
}
Isso converterá o valor de 10px para rem, com base no tamanho de fonte de 26px.
CSS Classes
Além de adicionar estilos de texto para todos os componentes com base em categorias de escala de tipo, também estilizamos os elementos padrão h1-h6 e p. Isso nos permite separar a semântica do estilo. Então, por exemplo, mesmo que a tag h1 tenha algum estilo padrão que fornecemos ao usar typography, você pode modificá-la para se parecer com um h3 dando a ela uma classe de ig-typography__h3.
<h1 class="ig-typography__h3">Some text</h1>
Aqui está uma lista de todas as classes CSS que fornecemos por padrão:
ig-typography__h1ig-typography__h2ig-typography__h3ig-typography__h4ig-typography__h5ig-typography__h6ig-typography__subtitle-1ig-typography__subtitle-2ig-typography__body-1ig-typography__body-2ig-typography__buttonig-typography__captionig-typography__overline
Additional Resources
Nossa comunidade é ativa e sempre acolhedora para novas ideias.
GitHub