npm - matcha-components - Versions diffs - 20.13.0 → 20.15.0 - Mend

matcha-components 20.13.0 → 20.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (810) hide show

package/src/documentation/presentation.mdx ADDED Viewed

@@ -0,0 +1,591 @@
+import { Story } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs";
+<Meta title="Apresentação / Boas-Vindas" />
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" class="w-100-p" viewBox="0 0 980 489.48047" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path d="M317.06006,205.25977a205.979,205.979,0,0,0-77.68457,15.06689c-.99365.40723-1.99121.81641-2.98828,1.23486A206.78061,206.78061,0,0,0,110,412.31982v225.94a9.01016,9.01016,0,0,0,9,9l.17871.01562c173.4668,31.50195,342.106,47.46484,501.37207,47.46484q3.58155,0,7.15625-.01074c156.55469-.47656,308.99414-16.43945,453.083-47.44726l.21-.02246a9.00984,9.00984,0,0,0,9-9v-424a9.01015,9.01015,0,0,0-9-9Z" transform="translate(-110 -205.25977)" class="fill-surface" />
+    <path id="f4300551-56ef-4356-8f30-d0080b223343-211" data-name="Path 40" d="M855.79948,385.45241a5.94683,5.94683,0,0,0,0,11.89205H1004.8852a5.94683,5.94683,0,1,0,.19525-11.89205q-.09762-.00165-.19525,0Z" transform="translate(-110 -205.25977)" class="fill-bg" />
+    <path d="M1038.69419,383.79676a1.17,1.17,0,0,0,0,1.65472l5.02282,5.02288H1031.3312a1.17005,1.17005,0,1,0,0,2.34011H1043.717l-5.02282,5.02287a1.17005,1.17005,0,1,0,1.65468,1.65473l7.02029-7.02029a1.17011,1.17011,0,0,0,0-1.65473l-7.02029-7.02029A1.17,1.17,0,0,0,1038.69419,383.79676Z" transform="translate(-110 -205.25977)" class="fill-accent" />
+    <path d="M821.92744,383.79676a1.17,1.17,0,0,1,0,1.65472l-5.02282,5.02288h12.38581a1.17006,1.17006,0,1,1,0,2.34011H816.90462l5.02282,5.02287a1.17,1.17,0,0,1-1.65467,1.65473l-7.0203-7.02029a1.17011,1.17011,0,0,1,0-1.65473l7.0203-7.02029A1.17,1.17,0,0,1,821.92744,383.79676Z" transform="translate(-110 -205.25977)" class="fill-accent" />
+    <g opacity="0.4">
+        <circle cx="751.81992" cy="50.3899" r="6.3899" class="fill-accent" />
+        <circle cx="778.44451" cy="50.3899" r="6.3899" class="fill-accent" />
+        <circle cx="805.06909" cy="50.3899" r="6.3899" class="fill-accent" />
+        <circle cx="831.69368" cy="50.3899" r="6.3899" class="fill-accent" />
+        <circle cx="858.31826" cy="50.3899" r="6.3899" class="fill-accent" />
+        <circle cx="884.94285" cy="50.3899" r="6.3899" class="fill-accent" />
+        <circle cx="911.56744" cy="50.3899" r="6.3899" class="fill-accent" />
+        <circle cx="751.81992" cy="70.62459" r="6.3899" class="fill-accent" />
+        <circle cx="778.44451" cy="70.62459" r="6.3899" class="fill-accent" />
+        <circle cx="805.06909" cy="70.62459" r="6.3899" class="fill-accent" />
+        <circle cx="831.69368" cy="70.62459" r="6.3899" class="fill-accent" />
+        <circle cx="858.31826" cy="70.62459" r="6.3899" class="fill-accent" />
+        <circle cx="884.94285" cy="70.62459" r="6.3899" class="fill-accent" />
+        <circle cx="911.56744" cy="70.62459" r="6.3899" class="fill-accent" />
+        <circle cx="751.81992" cy="90.85927" r="6.3899" class="fill-accent" />
+        <circle cx="778.44451" cy="90.85927" r="6.3899" class="fill-accent" />
+        <circle cx="805.06909" cy="90.85927" r="6.3899" class="fill-accent" />
+        <circle cx="831.69368" cy="90.85927" r="6.3899" class="fill-accent" />
+        <circle cx="858.31826" cy="90.85927" r="6.3899" class="fill-accent" />
+        <circle cx="884.94285" cy="90.85927" r="6.3899" class="fill-accent" />
+        <circle cx="911.56744" cy="90.85927" r="6.3899" class="fill-accent" />
+        <circle cx="751.81992" cy="111.09396" r="6.3899" class="fill-accent" />
+        <circle cx="778.44451" cy="111.09396" r="6.3899" class="fill-accent" />
+        <circle cx="751.81992" cy="131.32864" r="6.3899" class="fill-accent" />
+        <circle cx="778.44451" cy="131.32864" r="6.3899" class="fill-accent" />
+        <circle cx="805.06909" cy="131.32864" r="6.3899" class="fill-accent" />
+        <circle cx="805.06909" cy="111.09396" r="6.3899" class="fill-accent" />
+        <circle cx="831.69368" cy="111.09396" r="6.3899" class="fill-accent" />
+        <circle cx="858.31826" cy="111.09396" r="6.3899" class="fill-accent" />
+        <circle cx="884.94285" cy="111.09396" r="6.3899" class="fill-accent" />
+        <circle cx="911.56744" cy="111.09396" r="6.3899" class="fill-accent" />
+    </g>
+    <path d="M770.15723,580.71875a35.27246,35.27246,0,1,1,35.27246-35.27246A35.31251,35.31251,0,0,1,770.15723,580.71875Zm0-68.54492a33.27246,33.27246,0,1,0,33.27246,33.27246A33.30991,33.30991,0,0,0,770.15723,512.17383Z" transform="translate(-110 -205.25977)" class="fill-bg-inverse" />
+    <path d="M783.68058,542.06548H773.53835V531.92315a3.38081,3.38081,0,0,0-6.76162,0v10.14233H756.6344a3.38076,3.38076,0,0,0,0,6.76152h10.14233v10.14233a3.38081,3.38081,0,0,0,6.76162,0V548.827h10.14223a3.38076,3.38076,0,1,0,0-6.76152Z" transform="translate(-110 -205.25977)" class="fill-accent" />
+    <g opacity="0.4">
+        <circle cx="54.0239" cy="374.76553" r="5.02391" class="fill-accent" />
+        <circle cx="54.0239" cy="353.83257" r="5.02391" class="fill-accent" />
+        <circle cx="54.0239" cy="332.89961" r="5.02391" class="fill-accent" />
+        <circle cx="54.0239" cy="311.96665" r="5.02391" class="fill-accent" />
+        <circle cx="54.0239" cy="291.03369" r="5.02391" class="fill-accent" />
+        <circle cx="54.0239" cy="270.10073" r="5.02391" class="fill-accent" />
+        <circle cx="54.0239" cy="249.16777" r="5.02391" class="fill-accent" />
+        <circle cx="69.93295" cy="374.76553" r="5.02391" class="fill-accent" />
+        <circle cx="69.93295" cy="353.83257" r="5.02391" class="fill-accent" />
+        <circle cx="69.93295" cy="332.89961" r="5.02391" class="fill-accent" />
+        <circle cx="69.93295" cy="311.96665" r="5.02391" class="fill-accent" />
+        <circle cx="69.93295" cy="291.03369" r="5.02391" class="fill-accent" />
+        <circle cx="69.93295" cy="270.10073" r="5.02391" class="fill-accent" />
+        <circle cx="69.93295" cy="249.16777" r="5.02391" class="fill-accent" />
+        <circle cx="85.842" cy="374.76553" r="5.02391" class="fill-accent" />
+        <circle cx="85.842" cy="353.83257" r="5.02391" class="fill-accent" />
+        <circle cx="85.842" cy="332.89961" r="5.02391" class="fill-accent" />
+        <circle cx="85.842" cy="311.96665" r="5.02391" class="fill-accent" />
+        <circle cx="85.842" cy="291.03369" r="5.02391" class="fill-accent" />
+        <circle cx="85.842" cy="270.10073" r="5.02391" class="fill-accent" />
+        <circle cx="85.842" cy="249.16777" r="5.02391" class="fill-accent" />
+        <circle cx="101.75105" cy="374.76553" r="5.02391" class="fill-accent" />
+        <circle cx="101.75105" cy="353.83257" r="5.02391" class="fill-accent" />
+        <circle cx="117.6601" cy="374.76553" r="5.02391" class="fill-accent" />
+        <circle cx="117.6601" cy="353.83257" r="5.02391" class="fill-accent" />
+        <circle cx="117.6601" cy="332.89961" r="5.02391" class="fill-accent" />
+        <circle cx="101.75105" cy="332.89961" r="5.02391" class="fill-accent" />
+        <circle cx="101.75105" cy="311.96665" r="5.02391" class="fill-accent" />
+        <circle cx="101.75105" cy="291.03369" r="5.02391" class="fill-accent" />
+        <circle cx="101.75105" cy="270.10073" r="5.02391" class="fill-accent" />
+        <circle cx="101.75105" cy="249.16777" r="5.02391" class="fill-accent" />
+    </g>
+    <path d="M607.40837,238.262H273.66631a6.18856,6.18856,0,0,0-6.1823,6.18237v285.3832a6.18855,6.18855,0,0,0,6.1823,6.18236H607.40837a6.1886,6.1886,0,0,0,6.18237-6.18236V244.44434A6.18861,6.18861,0,0,0,607.40837,238.262Zm3.70479,291.56557a3.71813,3.71813,0,0,1-3.70479,3.71637H273.66631a3.71067,3.71067,0,0,1-3.70472-3.71637V244.44434a3.71067,3.71067,0,0,1,3.70472-3.71637H607.40837a3.71813,3.71813,0,0,1,3.70479,3.71637Z" transform="translate(-110 -205.25977)" class="fill-bg-inverse" />
+    <path d="M350.70245,485.26609c0,.43995-.01159.87989-.03477,1.30825a25.17464,25.17464,0,0,1-50.28069,0c-.02317-.42836-.03469-.8683-.03469-1.30825a25.17508,25.17508,0,1,1,50.35015,0Z" transform="translate(-110 -205.25977)" class="fill-accent" />
+    <path d="M581.475,468.47884H383.66331a4.19682,4.19682,0,0,0,0,8.39363H581.475a4.19682,4.19682,0,0,0,0-8.39363Z" transform="translate(-110 -205.25977)" class="fill-bg-inverse" />
+    <path d="M468.78046,493.65971H383.66331a4.191,4.191,0,0,0,0,8.382h85.11715a4.191,4.191,0,1,0,0-8.382Z" transform="translate(-110 -205.25977)" class="fill-accent" />
+    <path d="M686.69824,438.84082H352.958a8.559,8.559,0,0,1-8.54883-8.5498V283.8291a8.55888,8.55888,0,0,1,8.54883-8.54931H686.69824a8.55888,8.55888,0,0,1,8.54883,8.54931V430.291A8.559,8.559,0,0,1,686.69824,438.84082ZM352.958,278.27979a5.55529,5.55529,0,0,0-5.54883,5.54931V430.291a5.55572,5.55572,0,0,0,5.54883,5.5498H686.69824a5.55572,5.55572,0,0,0,5.54883-5.5498V283.8291a5.55529,5.55529,0,0,0-5.54883-5.54931Z" transform="translate(-110 -205.25977)" class="fill-accent" />
+    <path d="M420.9242,328.69922a4.19591,4.19591,0,1,0,0,8.39182H618.73156a4.19591,4.19591,0,1,0,0-8.39182Z" transform="translate(-110 -205.25977)" class="fill-accent" />
+    <path d="M420.9242,353.01178a4.19591,4.19591,0,0,0,0,8.39183H618.73156a4.19592,4.19592,0,0,0,0-8.39183Z" transform="translate(-110 -205.25977)" class="fill-accent" />
+    <path d="M420.9242,377.02952a4.19591,4.19591,0,0,0,0,8.39183h85.11711a4.19592,4.19592,0,0,0,0-8.39183Z" transform="translate(-110 -205.25977)" class="fill-accent" />
+    <path d="M741.72363,500.89258l-33.51977-47.30731,10.85107,2.2611a1.50113,1.50113,0,1,0,.61212-2.9392l-16.17059-3.36628-2.18262,16.37055a1.50115,1.50115,0,1,0,2.976.39642l1.46319-10.99322L739.27637,502.627a1.49976,1.49976,0,1,0,2.44726-1.73437Z" transform="translate(-110 -205.25977)" class="fill-accent" />
+    <path d="M559.66593,638.58034H321.40883a4.41735,4.41735,0,0,1-4.41216-4.41216V575.06677a4.41735,4.41735,0,0,1,4.41216-4.41216h238.2571a4.41735,4.41735,0,0,1,4.41216,4.41216v59.10141A4.41735,4.41735,0,0,1,559.66593,638.58034Zm-238.2571-66.16087a2.65019,2.65019,0,0,0-2.6473,2.6473v59.10141a2.65019,2.65019,0,0,0,2.6473,2.64729h238.2571a2.65019,2.65019,0,0,0,2.64729-2.64729V575.06677a2.65019,2.65019,0,0,0-2.64729-2.6473Z" transform="translate(-110 -205.25977)" class="fill-bg-inverse" />
+    <circle cx="248.42913" cy="397.08997" r="17.97281" class="fill-accent" />
+    <path d="M399.93776,590.36787a2.99547,2.99547,0,1,0,0,5.99093H541.15269a2.99546,2.99546,0,1,0,0-5.99093Z" transform="translate(-110 -205.25977)" class="fill-accent" />
+    <path d="M399.93776,608.34068a2.99547,2.99547,0,1,0,0,5.99093H460.703a2.99546,2.99546,0,1,0,0-5.99093Z" transform="translate(-110 -205.25977)" class="fill-accent" />
+    <path d="M874.0245,428.0156H979.91678a4.41735,4.41735,0,0,1,4.41216,4.41216V542.71023a4.41735,4.41735,0,0,1-4.41216,4.41216H874.0245a4.41736,4.41736,0,0,1-4.41217-4.41216V432.42776A4.41736,4.41736,0,0,1,874.0245,428.0156ZM979.91678,545.35752a2.65019,2.65019,0,0,0,2.6473-2.64729V432.42776a2.6502,2.6502,0,0,0-2.6473-2.6473H874.0245a2.65019,2.65019,0,0,0-2.6473,2.6473V542.71023a2.65019,2.65019,0,0,0,2.6473,2.64729Z" transform="translate(-110 -205.25977)" class="fill-bg-inverse" />
+    <path d="M957.35324,524.38014a2.99547,2.99547,0,0,0,0-5.99094H896.588a2.99547,2.99547,0,0,0,0,5.99094Z" transform="translate(-110 -205.25977)" class="fill-accent" />
+    <path d="M957.35324,506.73149a2.99547,2.99547,0,1,0,0-5.99093H896.588a2.99547,2.99547,0,1,0,0,5.99093Z" transform="translate(-110 -205.25977)" class="fill-accent" />
+    <path d="M926.97042,450.75785a18.85509,18.85509,0,1,1-18.85509,18.85509A18.87645,18.87645,0,0,1,926.97042,450.75785Z" transform="translate(-110 -205.25977)" class="fill-accent" />
+</svg>
+<div class="flex-column mt-64">
+    <h3 class="fw-700">Matcha Design System (Ui-Kit) - Bem-vindo</h3>
+</div>
+---
+# MatchaComponents
+###### Publicar com *nvm use lts/jod*
+#### Repositório
+[Link para o projeto](https://bitbucket.org/inradar/design-system/src/master/).
+Esta biblioteca foi gerada com [Angular CLI](https://github.com/angular/angular-cli) versão 19.0.0. | Versão do Node - lts/iron -> v20.12.2
+## Como criar um componente
+### Criar um novo módulo
+Para gerar um novo módulo execute o comando:
+> Terminal: `ng g m test-component --project matcha-components`
+### Criar um novo Componente
+Para gerar um componente dentro do seu módulo execute o comando:
+> Terminal: `ng g c test-component/my-test-component --project matcha-components`
+### Atualizar seu novo arquivo de módulo
+Importe o arquivo do componente dentro do módulo criado.
+###### Caminho: design-system/projects/matcha-components/src/lib/test-component/test-component.module.ts
+``` TS
+import { MyTestComponentComponent } from './test-component/my-test-component.component';
+```
+Declare o novo componente
+###### Caminho: design-system/projects/matcha-components/src/lib/test-component/test-component.module.ts
+``` TS
+declarations: [MyTestComponentComponent],
+```
+Exporte o novo componente
+###### Caminho: design-system/projects/matcha-components/src/lib/test-component/test-component.module.ts
+``` TS
+exports: [MyTestComponentComponent],
+```
+### Atualizar seu novo arquivo de componente
+Estamos trabalhando com módulos e por padrão o angular-cli cria componentes para trabalhar com standalone. Atualize o decorador do seu componente para ficar assim:
+######  Caminho: design-system/projects/matcha-components/src/lib/test-component/my-test-component.component.ts
+``` TS
+@Component({
+  selector: 'lib-my-test-component',
+  templateUrl: './my-test-component.component.html',
+  styleUrl: './my-test-component.component.scss'
+})
+```
+### Atualizar MatchaComponentsModule
+Atualize o módulo principal da biblioteca matcha-components.
+Importe o módulo do componente dentro do módulo criado.
+######  Caminho: design-system/projects/matcha-components/src/lib/test-component/matcha-components.module.ts
+```TS
+import { TestComponentModule } from './test-component/test-component.module';`
+```
+Importe o novo módulo
+######  Caminho: design-system/projects/matcha-components/src/lib/test-component/matcha-components.module.ts
+```TS
+imports: [TestComponentModule, ...`
+```
+Exporte o novo módulo
+######  Caminho: design-system/projects/matcha-components/src/lib/test-component/matcha-components.module.ts
+```TS
+exports: [TestComponentModule, ...`
+```
+### Atualizar Arquivo Public API
+Adicione a exportação para seu novo componente
+######  Caminho: design-system/projects/matcha-components/src/public-api.ts
+```TS
+export * from './lib/test-component/my-test-component/my-test-component.component';
+```
+Adicione a exportação para seu novo módulo
+######  Caminho: design-system/projects/matcha-components/src/public-api.ts
+```TS
+export * from './lib/test-component/test-component.module';
+```
+## Como testar um componente antes de publicar
+### Atualizar AppModule
+Vá para a pasta principal do projeto src e encontre o arquivo app.modules.ts.
+Importe o arquivo do módulo dentro do app.module.
+######  Caminho: design-system/src/app/app.modules.ts
+```TS
+import { TestComponentModule } from '../../projects/matcha-components/src/public-api';
+```
+Importe o módulo
+######  Caminho: design-system/src/app/app.modules.ts
+```TS
+imports: [TestComponentModule, ...
+```
+### Chamar a tag do componente em algum lugar da sua aplicação de teste
+Adicione a `tag` do componente dentro do arquivo template
+######  Caminho: design-system/src/app/dashboard/dashboard.component.html
+``` HTML
+<lib-my-test-component></lib-my-test-component>
+```
+### Executar o projeto de teste
+Execute o comando serve
+> Terminal: `ng s`
+## Como publicar
+### Atualizar Versão
+Dentro da pasta projects encontre o package.json do matcha-components e atualize a versão
+######  Caminho: design-system/projects/matcha-components/package.json
+```JSON
+{
+    "name": "matcha-components",
+    "version": "x.x.xx",
+    "peerDependencies": {},
+    "dependencies": {},
+    "sideEffects": false
+}
+```
+### Construir o projeto matcha-component
+npm run publish-minor
+Execute o comando de build.
+> Terminal: `ng build matcha-components`
+### Publicação do pacote
+No terminal, mude o diretório para a pasta bundle do matcha-components dentro da pasta dist. Esta é a pasta que será publicada no NPM.
+> Terminal: `cd dist/matcha-components`
+Agora podemos fazer o comando de publicação do pacote:
+> Terminal: `npm publish`
+## Testar componente publicado
+No terminal, volte para a raiz do design-system
+> Terminal: `cd ../..`
+Agora você deve remover a instalação anterior do matcha-components para garantir a nova instalação.
+> Terminal: `npm uninstall matcha-components`
+Então instale a nova versão do matcha-components
+> Terminal: `npm i matcha-components`
+Atualize as importações no app.modules para o matcha-component do node_modules.
+######  Caminho: design-system/src/app/app.modules.ts
+```TS
+import { TestComponentModule } from 'matcha-components';
+```
+Execute o comando serve:
+> Terminal: `ng s`
+---
+### Storybook
+Execute `ng run matcha-components:storybook` ou `npm run storybook` para executar a aplicação storybook e ver a documentação de todos os componentes via [storybook](https://storybook.js.org/tutorials/intro-to-storybook/angular/en/get-started/).
+---
+### Scaffold
+Você também pode usar `ng g directive|pipe|service|class|guard|interface|enum|module --project matcha-components`, no caso de componentes aninhados você pode usar `ng g c component-name/child-component --project matcha-component`.
+> Nota: Não se esqueça de adicionar `--project matcha-components` ou será adicionado ao projeto padrão no seu arquivo `angular.json`.
+---
+### Executando aplicação de exemplo
+Execute `ng s --project matcha-design-system` para executar uma aplicação angular onde você pode, por exemplo, testar seus componentes ou diretivas na prática.
+---
+### Testes unitários
+Execute `ng test matcha-components` para executar os testes unitários via [Karma](https://karma-runner.github.io).
+# Matcha-Theme
+###  Tematizando Matcha Components
+Coloque a classe (`.theme-default-light`) que você define no arquivo de tema, dentro da tag `body`. Desta forma você pode cobrir toda a aplicação com o tema.
+Algo como isso `<body class=".theme-default-light">`.
+```scss
+// app.theme.scss
+@use "../lib/main.scss" as matcha;
+//MATCHA THEME - LIGHT
+// paletas
+$default-light-primary: matcha.palette(matcha.$blue-grey, 500, 400, 600);
+$default-light-accent: matcha.palette(matcha.$lime, 500, 200, 900);
+$default-light-warn: matcha.palette(matcha.$red, 900, 200, 900);
+// tipografia
+$matcha-default-typography: matcha.matcha-typography-config(
+    $font-family: "Arial",
+);
+// tema
+$matcha-default-theme: matcha.light-theme($default-light-primary, $default-light-accent, $default-light-warn);
+.theme-default-light {
+    @include matcha.matcha-components($matcha-default-theme);
+    @include matcha.matcha-typography($matcha-default-typography);
+}
+```
+###  Exemplos de temas claro e escuro
+Você deve criar algum código para fazer a alternância de classe de `.theme-default-light` para `.theme-default-dark` dentro da tag `<body>`.
+```scss
+@use "../lib/main.scss" as matcha;
+//MATCHA THEME - LIGHT
+// paletas
+$default-light-primary: matcha.palette(matcha.$blue-grey, 500, 400, 600);
+$default-light-accent: matcha.palette(matcha.$lime, 500, 200, 900);
+$default-light-warn: matcha.palette(matcha.$red, 900, 200, 900);
+// tipografia
+$matcha-default-typography: matcha.matcha-typography-config(
+    $font-family: "Arial",
+);
+// tema
+$matcha-default-theme: matcha.light-theme($default-light-primary, $default-light-accent, $default-light-warn);
+.theme-default-light {
+    @include matcha.matcha-components($matcha-default-theme);
+    @include matcha.matcha-typography($matcha-default-typography);
+}
+// Você pode definir quantos temas precisar...
+//MATCHA THEME - DARK
+// paleta
+$default-dark-primary: matcha.palette(matcha.$blue-grey, 100, 50, 200);
+$default-dark-accent: matcha.palette(matcha.$lime, A400, A200, A700);
+$default-dark-warn: matcha.palette(matcha.$red, 200, 50, 300);
+// tipografia
+$matcha-default-typography: matcha.matcha-typography-config(
+    $font-family: "Arial",
+);
+// tema
+$matcha-default-theme: matcha.dark-theme($default-dark-primary, $default-dark-accent, $default-dark-warn);
+.theme-default-dark {
+    @include matcha.matcha-components($matcha-default-theme);
+    @include matcha.matcha-typography($matcha-default-typography);
+}
+```
+###  Tematizando tanto Angular Material quanto Matcha Components
+```scss
+@use "@angular/material" as mat;
+@use "../lib/main.scss" as matcha;
+@include mat.core();
+//MATCHA THEME - LIGHT
+// paletas
+$default-light-primary: matcha.palette(matcha.$blue-grey, 500, 400, 600);
+$default-light-accent: matcha.palette(matcha.$lime, 500, 200, 900);
+$default-light-warn: matcha.palette(matcha.$red, 900, 200, 900);
+// tipografia
+$matcha-default-typography: matcha.matcha-typography-config(
+    $font-family: "Arial",
+);
+$mat-default-typography: mat.define-typography-config(
+    $font-family: "Arial",
+);
+// tema
+$matcha-default-theme: matcha.light-theme($default-light-primary, $default-light-accent, $default-light-warn);
+$mat-default-theme: mat.define-light-theme(
+    (
+        color: (
+            primary: $default-light-primary,
+            accent: $default-light-accent,
+            warn: $default-light-warn,
+        ),
+        typography: $mat-default-typography,
+    )
+);
+.theme-default-light {
+    @include mat.all-component-themes($mat-default-theme);
+    @include matcha.matcha-components($matcha-default-theme);
+    @include matcha.matcha-typography($matcha-default-typography);
+}
+```
+-   Tematizando Matcha Components
+```scss
+@use "../lib/main.scss" as matcha;
+//MATCHA THEME - DARK
+// paleta
+$default-dark-primary: matcha.palette(matcha.$blue-grey, 100, 50, 200);
+$default-dark-accent: matcha.palette(matcha.$lime, A400, A200, A700);
+$default-dark-warn: matcha.palette(matcha.$red, 200, 50, 300);
+// tipografia
+$matcha-default-typography: matcha.matcha-typography-config(
+    $font-family: "Arial",
+);
+// tema
+$matcha-default-theme: matcha.dark-theme($default-dark-primary, $default-dark-accent, $default-dark-warn);
+.theme-default-dark {
+    @include matcha.matcha-components($matcha-default-theme);
+    @include matcha.matcha-typography($matcha-default-typography);
+}
+```
+## Mais ajuda
+Para obter mais ajuda sobre o Angular CLI use `ng help` ou visite a página [Angular CLI Overview and Command Reference](https://angular.io/cli).
+Para obter mais ajuda sobre o Storybook [stories](https://github.com/geromegrignon/angular-material-storybook/blob/main/stories/components/progress-bar/progress-bar.stories.ts)
+## Roadmap
+Componentes **Alpha** estão em desenvolvimento e podem ter muitas mudanças que quebram compatibilidade frequentes.
+Componentes **Beta** estão principalmente polidos e prontos para uso, mas ainda podem ter mudanças que quebram compatibilidade.
+Componentes **Estáveis** são revisados, documentados e com API completa.
+-   ❌ Não iniciado
+-   🟡 Em progresso
+-   ✅ Completo
+### `v1.0.0` (2023)
+| Componente                     | Alpha | Beta | Estável |
+| ----------------------------- | :---: | :--: | :----: |
+| Botão                        |  ✅   |  ✅  |   ✅   |
+| FAB                           |  ✅   |  ✅  |   ✅   |
+| Botão com ícone                   |  ✅   |  ✅  |   ✅   |
+| Card                          |  ✅   |  ✅  |   ✅   |
+| Checkbox                      |  ✅   |  ✅  |   ✅   |
+| Chips                         |  ✅   |  ✅  |   ✅   |
+| Diálogo                        |  ✅   |  ✅  |   ✅   |
+| Divisor                       |  ✅   |  ✅  |   ✅   |
+| Elevação                     |  ✅   |  ✅  |   ✅   |
+| Anel de foco                    |  ✅   |  ✅  |   ✅   |
+| Campo                         |  ✅   |  ✅  |   ✅   |
+| Ícone                          |  ✅   |  ✅  |   ✅   |
+| Lista                          |  ✅   |  ✅  |   ✅   |
+| Menu                          |  ✅   |  ✅  |   ✅   |
+| Indicador de progresso (circular) |  ✅   |  ✅  |   ✅   |
+| Indicador de progresso (linear)   |  ✅   |  ✅  |   ✅   |
+| Botão de rádio                  |  ✅   |  ✅  |   ✅   |
+| Ripple                        |  ✅   |  ✅  |   ✅   |
+| Select                        |  ✅   |  ✅  |   ✅   |
+| Slider                        |  ✅   |  ✅  |   ✅   |
+| Switch                        |  ✅   |  ✅  |   ✅   |
+| Abas                          |  ✅   |  ✅  |   ✅   |
+| Título                         |  ✅   |  ✅  |   ✅   |
+| Campo de texto                    |  ✅   |  ✅  |   ✅   |
+### Futuro
+Estas funcionalidades estão planejadas para uma versão futura.
+| Componente         | Alpha | Beta | Estável |
+| ----------------- | :---: | :--: | :----: |
+| Autocomplete      |  ✅   |  ✅  |   ✅   |
+| Badge             |  ✅   |  ✅  |   ✅   |
+| Banner            |  ✅   |  ✅  |   ✅   |
+| Barra de aplicativo inferior    |  ✅   |  ✅  |   ✅   |
+| Bottom sheet      |  ✅   |  ✅  |   ✅   |
+| Botão segmentado  |  ✅   |  ✅  |   ✅   |
+| Card              |  ✅   |  ✅  |   ✅   |
+| Tabela de dados        |  ✅   |  ✅  |   ✅   |
+| Seletor de data       |  ✅   |  ✅  |   ✅   |
+| Barra de navegação    |  ✅   |  ✅  |   ✅   |
+| Gaveta de navegação |  ✅   |  ✅  |   ✅   |
+| Trilho de navegação   |  ✅   |  ✅  |   ✅   |
+| Busca            |  ✅   |  ✅  |   ✅   |
+| Snackbar          |  ✅   |  ✅  |   ✅   |
+| Seletor de hora       |  ✅   |  ✅  |   ✅   |
+| Tooltip           |  ✅   |  ✅  |   ✅   |
+| Barra de aplicativo superior       |  ✅   |  ✅  |   ✅   |
+### CLASSES CSS Base
+    ✅TIPOGRAFIA
+    ✅ESPACAMENTO
+    ✅BORDA
+    ✅CORES
+    ✅TAMANHOS
+### Componentes Atômicos
+    FORMULÁRIO
+        ✅autocomplete
+        ✅checkbox
+        ✅seletor de data
+        ✅campo de formulário
+        ✅input
+        ✅botão de rádio
+        ✅select
+        ✅slider
+        ✅slide toggle
+---
+    NAVEGAÇÃO
+        ✅menu
+        ✅barra lateral
+        ✅barra de ferramentas
+        ✅cabeçalho
+---
+    LAYOUT
+        ✅badge
+        ✅bottom sheet
+        ✅card
+        ✅divisor
+        ✅elevação
+        ✅painel de expansão
+        ✅display grid
+        ✅display flex
+        ✅lista
+        ✅stepper
+        ✅abas
+        ✅títulos
+        ✅árvore
+---
+    BOTÕES/INDICADORES
+        ✅botão
+        ✅botão toggle
+        ✅chips
+        ✅ícone
+        ✅spinner de progresso
+        ✅barra de progresso
+        ✅ripple
+---
+    POPUP/MODAIS
+        ✅diálogo
+        ✅snackbar
+        ✅tooltip
+---
+    TABELA DE DADOS
+        ✅paginador
+        ✅cabeçalho de ordenação
+        ✅tabela
+---
+No momento temos 6 bases e 42 átomos para fazer documentação
+1 componente igual a 2,083% do progresso
+---
+### Componentes Moleculares
+---
+    Autocomplete de membros
+### Componentes Organismos
+---
+    Cabeçalho de buscas
+### Componentes de Páginas
+---
+    Página de lista