



A propriedade _float_ está desde os primórdios da web e ela é considerada uma das propriedades mais básicas, porem você realmente sabe seu comportamento?

Todos elementos HTML segue um comportamento (inline, block, table, flex, etc…) Porem, float tem um comportamento totalmente diferente entre estas mesmas propriedades conhecidas.

O float foi criado pensando em layouts com o design “text wrap” que explicando em poucas palavras por min, seria como o “estilo em jornal”.

![Protótipo de layout utilizando float](/img/float-example-default.png "Protótipo de layout utilizando float")

A maioria das vezes quando aprendemos algo básico, sempre aceitamos a teoria básica e com o tempo, revisamos o básico do básico e aprendemos mais coisas novas (é como se fosse a refatoração do seu conhecimento).

Bom foi basicamente que eu fiz e gostaria de compartilhar com vocês! :)

Criei um exemplo bem simples [(link do código no github](https://github.com/diegodsgarcia/float-behaviors-tests)), a qual eu testei alguns comportamentos.

Bom até aí beleza! Com a leitura do artigo [**“All about float”**](https://css-tricks.com/all-about-floats/) (a qual eu super recomendo você também ler) está tudo certo!! Então eu cheguei na seguinte conclusão.

_**Todos elementos inline vão respeitar o fluxo do elemento float.**_

Então criei uma div no meio do fluxo de um elemento float para testar os seus vários tipos de comportamento, e verificar se minha teoria está correta.

## DISPLAY BLOCK

![Teste com float utilizando o display block](/img/float-display-block.png "Teste com float utilizando o display block")

Beleza por enquanto minha teoria esta certa! O elemento div não flutuo. O que apenas seguiu o fluxo foi o conteúdo dentro, seguindo ainda minha teoria dos elementos inline.

## DISPLAY INLINE

![Teste com float utilizando o display inline](/img/float-display-inline.png "Teste com float utilizando o display inline")

Nada a comentar aqui também, teoria ainda funcionando perfeitamente! (OBS: Esse espaçamento enorme na altura é por conta do tamanho da fonte…(Ainda quero estudar mais sobre fontes e também falar sobre seus comportamentos malucos).

## DISPLAY INLINE BLOCK

![Teste com float utilizando o display inline block](/img/float-display-inline-block.png "Teste com float utilizando o display inline block")

Ééé Bom… Seguindo a lógica, como esse elemento segue o comportamento híbrido, então ele realmente flutuará.

Porém quando há um conteúdo que ultrapassada o fluxo, o comportamento será igual ao block.

![Teste com float utilizando o display inline block com muitas palavras](/img/float-display-table-with-many-words.png "Teste com float utilizando o display inline block com muitas palavras")

## DISPLAY FLEX

![Teste com float utilizando o display flex](/img/float-display-flex.png "Teste com float utilizando o display flex")

Tá… por essa eu realmente não esperava, o _display flex_ consegue também se adaptar ao fluxo do float!!! Justo ao nome flex ❤.

O mais bacana do display flex é que ele sempre respeitará o fluxo do float, não importando com o tamanho do conteúdo dentro do elemento.

![Teste com float utilizando o display flex com muitas palavras](/img/float-display-flex-with-many-words.png "Teste com float utilizando o display flex com muitas palavras")

## DISPLAY TABLE

![Teste com float utilizando o display table](/img/float-display-table.png "Teste com float utilizando o display table")

Oi?? O _display table_ também se adapta ao fluxo do float. Tá bom… Está na hora de desistir da minha pequena teoria.

Porém diferente do flex, ele não irá respeitar sempre o fluxo do float.

![Teste com float utilizando o display table com muitas palavras](/img/float-display-table-with-many-words.png "Teste com float utilizando o display table com muitas palavras")

## DISPLAY BLOCK COM UMA LARGURA FIXA, A QUAL NÃO RESPEITA O FLUXO DO FLOAT

![Teste com float utilizando o display block sem respeitar a largura fixa, a qual não respeita o fluxo do float](/img/float-display-block-with-width-without-respect-flow.png "Teste com float utilizando o display block sem respeitar a largura fixa, a qual não respeita o fluxo do float")

Hum… Realmente faz sentido! Pois o conteúdo dentro do elemento sempre deve respeitar as dimensões do elemento pai (Nesse caso, coloquei uma largura fixa de 10% na div) . Neste caso como a largura do elemento é muito menor que o fluxo do float, o conteúdo não vai respeitar mais o mesmo.

## OUTROS ELEMENTOS COM LARGURA QUE NÃO RESPEITAM O FLUXO DO FLOAT

Bom como já testamos com exceção do display block e inline (a qual não é possível definir uma largura em elementos inline), os outros formatos vão seguir o fluxo do float. Com uma pequena exceção ao display table a qual não podemos definir uma largura menor que o conteúdo dentro dela.

## CONCLUSÃO

Sempre devemos buscar a refatoração do nosso conhecimento. Eu sempre imaginei que dominava totalmente essa propriedade, mas só quando comecei a estudar caso a caso, eu realmente comecei a adquirir conhecimento. Eu não sou um expert nisso (e nunca serei), um grande bom exemplo nos meus testes a qual não consegui entender muito bem o comportamento é com propriedade overflow.

Enfim, uma propriedade que de primeira impressão é bem simples de trabalhar, pode ser mais complexa do que você imagina e como a maravilhosa ciência trabalha, uma teoria cientifica só é comprovada quando analisada e testada por toda comunidade, podemos dizer a mesma coisa com a comunidade open source! Para qualquer assunto, desde o mais simples, até o mais complexo, sempre estude, pratique, questione-se e divulgue!

_All about float —_ [_https://css-tricks.com/all-about-floats/_](https://css-tricks.com/all-about-floats/)__


A propriedade float está desde os primórdios da web e ela é considerada uma das propriedades mais básicas, porem você realmente sabe seu comportamento?

Refatorando seu conhecimento! Desvendando o comportamento da propriedade Float (CSS).

Se você desenvolve aplicações em Angular, com certeza já ouviu falar de sua extensão visual, o [Angular Material](https://material.angular.io/). Nesta série de artigos vamos explorar e descobrir mais sobre como funciona os padrões de tematização e criar nossos próprios componentes tematizados!

## Definições e padrões:

O framework trabalha com conceitos muito bem definidos proposto em todo conceito visual do Material Design. Sua divisão de paleta de cores é definida  por 5 categorias:

* **Primary** - Cor principal da sua aplicação.
* **Accent** - Cores de interação e de elementos flutuantes.
* **Warn** - Cores que emitem estados de erros.
* **Background** - Cores dos backgrounds  nos componentes e elementos.
* **Foreground** - Cores de textos, ícones, divisores, etc.

As paletas **primary**, **accent** e **warn** são paleta de cores que possuí variações de sua cor para a tonalidade mais clara até a mais escura, elas também possuem suas cores de contraste.

As paletas **background** e **foreground** possuem cores fixas relacionado a todo seu projeto:

Todas paletas são criadas e geradas por variáveis, funções e mixins no SASS.

Para gerar um tema nos devemos declarar primeiramente as variáveis **primary**, **accent** e **warn** no formato Map com todas as tonalidades de nossas cores.

![Exemplo de paleta](/img/material-design-theme.png "Exemplo de paleta")

O Angular Material possuí uma ótima abordagem sobre a criação de sua tematização. Vamos decifrar um pouco sobre seu exemplo no tutorial [oficial do site](https://material.angular.io/guide/theming).

```scss
// Importação das váriaveis e mixens do Angular Material
@import '~@angular/material/theming';

// Geração estilos bases de todos os componentes do Angular Material
@include mat-core();

// Definição da paleta primária
$app-primary: mat-palette($mat-indigo);

// Definiçao da paleta de cores accent
// OBS: Para cada paleta você pode definir as cores default, lighter, and darker, como no exemplo a baixo
$app-accent: mat-palette($mat-pink, A200, A100, A400);

// Definição da paleta de cores warn (Essa definição é opcional);
$app-warn: mat-palette($mat-red);

// Essa váriavel será um objeto Map a qual irá conter todas as paletas de sua aplicação
$app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

// Por fim este mixin irá gerar todos os estilos do componente baseado nas váriaveis de
// a qual foi definido a cima.
@include angular-material-theme($app-theme)
```

O código a cima é um exemplo básico de criação de uma estilização de paletas customizadas no Angular Material. Todo esse código foi declarado no **style.scss** global do projeto. Esta paleta só pode ser gerada através de pré-processadores, mas caso seu projeto Angular foi criado através do CLI, você pode facilmente trocar seu processamento de estilo no **angular.json**

Seu arquivo de customização de tema **NÃO DEVE** ser importado em nenhum outro arquivo de estilização, pois os mixins `mat-core()` e `angular-material-theme()` irão gerar classes, causando assim duplicidade de código em CSS gerado.

Vamos agora um pouco mais além.... No exemplo a cima nas paletas de cores utilizamos apenas paletas pré definidas vindo do `@import '~@angular/material/theming';`

Vamos agora criar nossas próprias paleta de cores principais! Para isso devemos definir uma variável map de todas as tonalidades da paleta como no exemplo a baixo:

```scss
$dark-primary-text: #000;
$light-primary-text: #fff;
$app-primary-palette: (
  50: #f3e5f5,
  100: #e1bee7,
  200: #ce93d8,
  300: #ba68c8,
  400: #ab47bc,
  500: #9c27b0,
  600: #8e24aa,
  700: #7b1fa2,
  800: #6a1b9a,
  900: #4a148c,
  A100: #ea80fc,
  A200: #e040fb,
  A400: #d500f9,
  A700: #aa00ff,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $light-primary-text,
    400: $light-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  )
);
```

Como pode ver as paletas principais (primary, accent e warn), tem toda sua tonalidade de cor definida entre a variação da mais clara (50) para a mais escura (A700), a qual você pode utilizar qualquer uma das tonalidades no método `mat-palette()`:

```scss
// @Param - Paleta definida
// @Param (OPCIONAL) - Cor principal da paleta
// @Param (OPCIONAL) - Cor ligther da paleta
// @Param (OPCIONAL) - Cor darkner da paleta
$primary: mat-palette($app-primary-palette, 600, 100, A400);
```

Com isso podemos definir qualquer cor nas paletas principais do Angular Material, porém como foi citado no começo o Angular Material trabalha com 5 categorias de paletas.... Onde está as paletas **background** e **foreground**?

Bom, essas paletas o angular já gera todas as definições para nos sem configurações com o método **mat-light-theme()** ou **mat-dark-theme()** e infelizmente o Angular Material não nos permite customizar essas paletas. Porém no próximo post, vamos sobrescrever as variáveis **background** e **foreground,** tornado assim possível sua customização total!

No [próximo post](https://dsg.net.br/posts/angular-material-entendendo-como-funciona-sua-tematizacao-parte-II/) vamos focar em criar um componente do zero baseado nas paletas que o Angular Material nos fornece!

Até a próxima!!! \o/

## Referencias

<https://material.angular.io/guide/theming>

<https://material.io/design/>


Se você desenvolve aplicações em Angular, com certeza já ouviu falar de sua extensão visual, o Angular Material. Nesta série de artigos vamos explorar e descobrir mais como funciona os padrões de tematização e criar nossos próprios componentes tematizados!

Angular Material  - Entendendo como funciona sua tematização (Parte I)

No último post vimos sobre o Material Design e Angular Material. Falamos sobre como o Angular Material trabalha em sua tematização. Nessa continuação vamos criar nosso próprio componente utilizando a tematização de paletas.

Vamos direto ao que interessa! Vamos criar um **componente card** a qual irá possuir todas suas definições de cores baseada na paleta do tema. Vamos criar nossas paletas primary, accent, warn e definir seu tema no arquivo global de estilo do projeto:

### styles.scss

```scss
@import '~@angular/material/theming';

$app-primary: mat-palette($mat-indigo, 900, 50, A400);
$app-accent:  mat-palette($mat-pink, A200, A100, A400);
$app-warn:    mat-palette($mat-red);

$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);

@include mat-core();
@include angular-material-theme($app-theme);
@import '~@angular/material/theming';

* {
  margin: 0;
  padding: 0;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
```

Com nosso tema definido agora podemos criar nosso componente de card:

### card.component.ts

```typescript
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.scss']
})
export class CardComponent {
  @Input() title;
}
```

### card.component.html

```html
<div class="card">
  <header class="header">
    {{ title }}
  </header>
  <div class="content">
    <ng-content></ng-content>
  </div>
</div><div class="card">
  <header class="header">
    {{ title }}
  </header>
  <div class="content">
    <ng-content></ng-content>
  </div>
</div>
```

### card.component.scss

```scss
.card {
  box-shadow: 1px 1px 10px #DDD;
}

.header {
  background-color: #000;
  color: #fff;
  padding: .5rem 0;
  text-align: center;
  font-size: 1.2rem;
}

.content {
  background-color: #fff;
  padding: .5rem;
}
```

Vamos agora customizar nosso header do card de acordo com a paleta **primary**, para isso vamos criar um arquivo chamado **theming.scss** na raiz do projeto e adicionar neste arquivo apenas as paletas de cores que definimos no **style.scss**

### theming.scss

```scss
@import '~@angular/material/theming';

$app-primary: mat-palette($mat-indigo, 900, 50, A400);
$app-accent:  mat-palette($mat-pink, A200, A100, A400);
$app-warn:    mat-palette($mat-red);

$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);
```

No **style.scss** iremos apenas importar o **theming.scss**

### style.scss

```scss
@import './theming';

@include mat-core();
@include angular-material-theme($app-theme);

* {
  margin: 0;
  padding: 0;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
```

Agora vamos importar o arquivo **theming.scss** no arquivo de estilo de nosso card. Com isso podemos utilizar a função `mat-color()` e chamar qualquer paleta de variável criada. Vamos adicionar no header do card a cor primária da paleta, chamando a função `mat-color($app-primary)`:

### card.component.scss

```scss
@import '../../theming';

.card {
  box-shadow: 1px 1px 10px #DDD;
}

.header {
  background-color: mat-color($app-primary);
  color: #fff;
  padding: .5rem 0;
  text-align: center;
  font-size: 1.2rem;
}

.content {
  background-color: #fff;
  padding: .5rem;
}
```

Com arquivo **theming.scss** podemos acessar apenas as paletas principais (primary, accent e warn), porém para a criação de um componente essas paletas não são o suficiente. Como podemos definir as cores de fundo do card ou as bordas? Para isso devemos entender qual variável essas cores são definidas e felizmente, graças a magia do open source, você pode ver todas as variáveis de estilo do Angular Material [neste link](https://github.com/angular/components/blob/9db13336393eab8bebbc151043917829fa0bb013/src/material/core/theming/_palette.scsshttps://github.com/angular/components/blob/9db13336393eab8bebbc151043917829fa0bb013/src/material/core/theming/_palette.scss). Com base no código implementado pela **framework** as variáveis de background e **foreground** são definidas da seguinte forma:

```scss
$background: (
  status-bar: mat-color($mat-grey, 300),
  app-bar:    mat-color($mat-grey, 100),
  background: mat-color($mat-grey, 50),
  hover:      rgba(black, 0.04),
  card:       white,
  dialog:     white,
  disabled-button: rgba(black, 0.12),
  raised-button: white,
  focused-button: $dark-focused,
  selected-button: mat-color($mat-grey, 300),
  selected-disabled-button: mat-color($mat-grey, 400),
  disabled-button-toggle: mat-color($mat-grey, 200),
  unselected-chip: mat-color($mat-grey, 300),
  disabled-list-option: mat-color($mat-grey, 200),
  tooltip: mat-color($mat-grey, 700),
);

$foreground: (
  base:              black,
  divider:           $dark-dividers,
  dividers:          $dark-dividers,
  disabled:          $dark-disabled-text,
  disabled-button:   rgba(black, 0.26),
  disabled-text:     $dark-disabled-text,
  elevation:         black,
  hint-text:         $dark-disabled-text,
  secondary-text:    $dark-secondary-text,
  icon:              rgba(black, 0.54),
  icons:             rgba(black, 0.54),
  text:              rgba(black, 0.87),
  slider-min:        rgba(black, 0.87),
  slider-off:        rgba(black, 0.26),
  slider-off-active: rgba(black, 0.38),
);
```

Com isto, para utilizarmos essas variáveis basta no estilo do nosso componente criar uma variável pegando o background e foreground do tema criado e por fim chamar as propriedades desejadas com o método **mat-color()**:

### card.component.scss

```scss
@import '../../theming';
$background: map-get($app-theme, background);
$foreground: map-get($app-theme, foreground);

.card {
  box-shadow: 1px 1px 10px mat-color($foreground, divider);
}

.header {
  background-color: mat-color($app-primary);
  color: mat-color($app-primary, default-contrast);
  padding: .5rem 0;
  text-align: center;
  font-size: 1.2rem;
}

.content {
  background-color: mat-color($background, card);
  padding: .5rem;
  color: mat-color($foreground, text);
}
```

Caso você deseje alterar as cores das variáveis **background** e **foreground**, você deve **SOBRESCREVER** essas variáveis antes de criar o tema com o nome **mat-light-theme** (para temas claros) ou **mat-dark-theme** (para temas escuros):

### theming.scss

```scss
@import '~@angular/material/theming';

$app-primary: mat-palette($mat-indigo, 900, 50, A400);
$app-accent:  mat-palette($mat-pink, A200, A100, A400);
$app-warn:    mat-palette($mat-red);

$mat-light-theme-background: (
  status-bar: mat-color($mat-grey, 300),
  app-bar:    mat-color($mat-grey, 100),
  background: mat-color($mat-grey, 50),
  hover:      rgba(black, 0.04),
  card:       white,
  dialog:     white,
  disabled-button: rgba(black, 0.12),
  raised-button: white,
  focused-button: $dark-focused,
  selected-button: mat-color($mat-grey, 300),
  selected-disabled-button: mat-color($mat-grey, 400),
  disabled-button-toggle: mat-color($mat-grey, 200),
  unselected-chip: mat-color($mat-grey, 300),
  disabled-list-option: mat-color($mat-grey, 200),
  tooltip: mat-color($mat-grey, 700),
);

$mat-light-theme-foreground: (
  base:              black,
  divider:           $dark-dividers,
  dividers:          $dark-dividers,
  disabled:          $dark-disabled-text,
  disabled-button:   rgba(black, 0.26),
  disabled-text:     $dark-disabled-text,
  elevation:         black,
  hint-text:         $dark-disabled-text,
  secondary-text:    $dark-secondary-text,
  icon:              rgba(black, 0.54),
  icons:             rgba(black, 0.54),
  text:              rgba(black, 0.87),
  slider-min:        rgba(black, 0.87),
  slider-off:        rgba(black, 0.26),
  slider-off-active: rgba(black, 0.38),
);

$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);
```

Agora temos total controle de customização das paletas podendo deixar todo componente criado baseado no estilo do Angular Material!

![Exemplo do card component](/img/card-component-exemplo.jpg "Exemplo do card component")

Todo exemplo deste artigo está disponível online no [stackblitz](https://stackblitz.com/edit/angular-palette-theme).

Então é isso ai galera! No próximo post iremos falar sobre como trabalhar com as fontes no Angular Material.

Obrigado e até mais!!! \o/

## Referências

<https://material.angular.io/guide/theming>

[https://github.com/angular/components/blob/9db13336393eab8bebbc151043917829fa0bb013/src/material/core/theming/_palette.scss](https://github.com/angular/components/blob/9db13336393eab8bebbc151043917829fa0bb013/src/material/core/theming/_palette.scss)


No último post vimos sobre o Material Design e Angular Material.Falamos sobre como o Angular Material trabalha em sua tematização aplicada no framework. Nessa continuação vamos criar nosso próprio componente utilizando a tematização de paletas.

Angular Material  -  Entendendo como funciona sua tematização (Parte II)

Nos últimos artigos falamos sobre a tematização de paletas no Angular Material e criamos nosso próprio componente card baseado na mesma. Vamos finalizar essa sequência falando um pouco sobre como funciona a tipografia no framework.

A tipográfia no framework trabalha baseado nos conceitos do Angular Material, dividindo por **leveis**. Cada level possuí seu `font-size`, `line-height` e `font-weight`. Os leveis são divididos na seguintes categorias:

| Nome         | CSS classe                             | Descrição                                                           |
| ------------ | -------------------------------------- | ------------------------------------------------------------------- |
| display-4    | .mat-display-4                         | Largo, cabeçalho único, geralmente usado no topo da página (header) |
| display-3    | .mat-display-3                         | Largo, cabeçalho único, geralmente usado no topo da página (header) |
| display-2    | .mat-display-2                         | Largo, cabeçalho único, geralmente usado no topo da página (header) |
| display-1    | .mat-display-1                         | Largo, cabeçalho único, geralmente usado no topo da página (header) |
| headline     | .mat-h1, .mat-headline                 | Seção de cabeçalho, corresponde a tag <h1>                          |
| title        | .mat-h2, .mat-title                    | Seção de cabeçalho, corresponde a tag <h2>                          |
| subheading-2 | .mat-h3, .mat-subheading-2             | Seção de cabeçalho, corresponde a tag <h3>                          |
| subheading-1 | .mat-h3, .mat-subheading-1             | Seção de cabeçalho, corresponde a tag <h4>                          |
| body-1       | .mat-body, .mat-body-1                 | Texto base do body                                                  |
| body-2       | .mat-body-strong, .mat-body-2          | Texto base do bolder                                                |
| caption      | .mat-small, .mat-caption               | Pequeno, texto para avisos                                          |
| button       | Sem classe, usado direto no componente | Botões e ancoras                                                    |
| input        | Sem classe, usado direto no componente | Campos input                                                        |

Podemos utilizar qualquer tipo de level na aplicação, desde que respeito sua forma semântica.

Vamos utilizar estas classes no nosso [card component](https://stackblitz.com/edit/angular-palette-theme):

### card.component.html

```html
<div class="card">
  <header class="header">
    <h2 class="mat-h2">{{ title }}</h2>
  </header>
  <div class="content mat-body">
    <ng-content></ng-content>
  </div>
</div>
```

## Customizando tipografia

Por padrão o framework utiliza a fonte Roboto. Mas como podemos trocar a fonte ou seus tamanhos? Podemos criar uma variável de configuração dos leveis da fonte.

```scss
@import '~@angular/material/theming';

$custom-typography: mat-typography-config(
  $font-family: 'Roboto, monospace',
  $headline: mat-typography-level(32px, 48px, 700),
  $body-1: mat-typography-level(16px, 24px, 500)
);
```

Você pode perceber que a variável `$font-family`, apenas é definida o nome da fonte.

Na função `mat-typography-level()` é recebida os 3 parâmetros na seguinte ordem:

* Font-size
* Line-height
* Font-weight

Por fim basta passar como parâmetro na função `mat-core()`, assim todos componentes serão gerado na configuração de tipografia customizada:

```scss
@include mat-core($custom-typography);
```

## Utilizando a tipografia em elementos customizados

Com a tipografia configurada, você pode utilizar ela em qualquer elemento HTML, deixando assim seus componentes padronizado. Para isso no seu arquivo de estilo do componente, basta chamar a função `mat-typography-config()` e armazenar seu retorno em uma variável.

Para chamar o estilo específico de uma tipografia basta você utilizar a função `mat-typography-level-to-styles()`, como no exemplo a baixo:

```scss
@import '../../theming';
$background: map-get($app-theme, background);
$foreground: map-get($app-theme, foreground);

// Cria váriavel de configuração com os valores defaults da tipografia definida
$config: mat-typography-config();

.card {
  box-shadow: 1px 1px 10px mat-color($foreground, divider);
}

.header {
  background-color: mat-color($app-primary);
  color: mat-color($app-primary, default-contrast);
  padding: .5rem 0;
  text-align: center;
  font-size: 1.2rem;

  > * {
    margin: 0;
    // Gera estilos de tipográfia de título
    @include mat-typography-level-to-styles($config, title);
  }
}

.content {
  background-color: mat-color($background, card);
  padding: .5rem;
  color: mat-color($foreground, text);
}
```

## Conclusão
O Angular Material é uma ferramente SUPER completa de estilização e criação, ela fornece todas ferramentas para realizar qualquer tipo de componente baseado já em seu Design System (Material Design). Todo projeto desta série de artigo esta no [StackBlitz](https://stackblitz.com/edit/angular-palette-theme). Muito obrigado por ter acompanhado até aqui, qualquer dúvida ou sugestão, você pode mandar um [PR neste post no GitHub](https://github.com/diegodsgarcia/dsg-web/pulls).

Obrigado e até a próxima!!! \o/

## Referencias

<https://material.angular.io/guide/typography>


Nos últimos artigos falamos sobre a tematização de paletas no Angular Material e criamos nosso próprio componente card baseado na mesma. Vamos finalizar essa sequência falando um pouco sobre como funciona a tipografia no framework.