From 56813460b985bd81d7f76cad53a05db82db66621 Mon Sep 17 00:00:00 2001
From: kabrunko-dev <kabrunko.dev@protonmail.com>
Date: Fri, 12 Jan 2024 12:47:11 -0300
Subject: [PATCH] docs(pt): translate challenge 13 (styling)

---
 .../angular/styling/src/app/page.component.ts |  2 +-
 .../docs/pt/challenges/angular/13-styling.md  | 23 +++++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 docs/src/content/docs/pt/challenges/angular/13-styling.md

diff --git a/apps/angular/styling/src/app/page.component.ts b/apps/angular/styling/src/app/page.component.ts
index a378647..0674532 100644
--- a/apps/angular/styling/src/app/page.component.ts
+++ b/apps/angular/styling/src/app/page.component.ts
@@ -11,7 +11,7 @@ import { TextComponent } from './text.component';
     <static-text></static-text>
     <static-text type="error"></static-text>
     <static-text type="warning"></static-text>
-    <text [font]="15" color="blue">This a a blue text</text>
+    <text [font]="15" color="blue">This is a blue text</text>
   `,
 })
 export class PageComponent {}
diff --git a/docs/src/content/docs/pt/challenges/angular/13-styling.md b/docs/src/content/docs/pt/challenges/angular/13-styling.md
new file mode 100644
index 0000000..99932df
--- /dev/null
+++ b/docs/src/content/docs/pt/challenges/angular/13-styling.md
@@ -0,0 +1,23 @@
+---
+title: 🟠 CSS Altamente Personalizável
+description: Desafio 13 é sobre criar estilos CSS altamente personalizáveis
+author: thomas-laforge
+challengeNumber: 13
+command: angular-styling
+sidebar:
+  order: 104
+---
+
+## Informação
+
+Estilização é um aspecto importante do trabalho diário de um desenvolvedor frontend, mas é muitas vezes subestimado. Em aplicações Angular, eu frequentemente vejo pessoas usando `@Input()` para personalizar o estilo de seus componentes. No entanto, `@Input()` deve ser usado apenas para lógica. Outras técnicas, como **variáveis CSS** e **host-context** devem ser usadas para estilização.
+
+Neste desafio, você precisará usar tanto variáveis CSS como `:host-context` para remover todos `@Input()` de seu código.
+
+## Restrições
+
+- Na sua submissão final, seu componente não deve conter nenhuma linha de código. Toda a estilização deve ser manipulada dentro do decorador _(ou arquivos css externos se preferir)_
+
+## Bônus
+
+- Você pode manter o `@Input` no componente `TextStaticComponent` e utilizar `@HostBinding` (documentação [aqui](https://angular.dev/api/core/HostBinding)) para usufruir o autocompletar.