matcha-components 20.13.0 → 20.15.0

package/src/documentation/foundation/borders/border-size.mdx

@@ -0,0 +1,111 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Foundation / Border / Border Size" />
+
+# Border Size
+
+Os tamanhos para as classes de border são os pares de **0** até **8**(0,2,4,6,8).
+
+Todas essas classes possuem **opções** de infix de breakpoint(`xs`, `sm`, `md`, `lg`, `xl`) e suffix de `!important`.
+
+Anatomia da classe: `.#{$abbrev}#{$breakpoint-infix}#{$border-value}#{$has-important}` => `.bl-md-4--force`.
+
+### Exemplo
+<div class="matcha-card background-surface flex-column gap-16">
+    <div class="matcha-card background-bg grid-2 gap-16 grid-md-5">
+        <div class="border-color-accent background-surface b-8 flex-center-center h-120 w-120 text-center font-size-14">b-8</div>
+        <div class="border-color-accent background-surface bt-8 flex-center-center h-120 w-120 text-center font-size-14">bt-8</div>
+        <div class="border-color-accent background-surface br-8 flex-center-center h-120 w-120 text-center font-size-14">br-8</div>
+        <div class="border-color-accent background-surface bb-8 flex-center-center h-120 w-120 text-center font-size-14">bb-8</div>
+        <div class="border-color-accent background-surface bl-8 flex-center-center h-120 w-120 text-center font-size-14">bl-8</div>
+    </div>
+
+    <div>
+        ```html
+        <div class="b-8">8px border</div>
+        <div class="bt-8">8px border-top</div>
+        <div class="br-8">8px border-right</div>
+        <div class="bb-8">8px border-bottom</div>
+        <div class="bl-8">8px border-left</div>
+        ```
+    </div>
+</div>
+
+### Atributos
+    <div class="h-400 w-100-p overflow-y-scroll">
+        <table class="w-100-p">
+            <thead>
+                <tr>
+                    <th>Classe CSS</th>
+                    <th>Propriedade</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>border-none</td>
+                    <td>border: none;</td>
+                </tr>
+                {Array.from({ length: 9 }, (_, index) => {
+                    const borderValue = (index - 1) + 1;
+                    return (
+                    <>
+                        {[
+                            {'abrev':'b', 'prop': ''},
+                            {'abrev':'bt', 'prop': '-top'},
+                            {'abrev':'br', 'prop': '-right'},
+                            {'abrev':'bb', 'prop': '-bottom'},
+                            {'abrev':'bl', 'prop': '-left'}
+                            ].map((border) => (
+                                <tr>
+                                    <td>{`${border.abrev}-${borderValue}`}</td>
+                                    <td>{`border${border.prop}: ${borderValue}px solid;`}</td>
+                                </tr>
+                            ))
+                        }
+                    </>
+                );
+            })}
+            </tbody>
+        </table>
+    </div>
+
+### Instalação
+Para utilizar as classes de _Border Size_, você pode fazer de duas formas:
+
+Primeira opção, você pode importar o pacote matcha-core no seu projeto.
+
+1. Instale o pacote [matcha-core](https://www.npmjs.com/package/matcha-core) via npm ou yarn.
+
+`npm install matcha-core`
+
+2. Importe o pacote no seu estilo global, diretamente no seu angular.json ou no head do seu index.html.
+
+<div class="matcha-card background-surface flex-column gap-16">
+    <span class="h6">Importação via estilo global:</span>
+    <div class="flex-column">
+        ```css
+        @import 'node_modules/matcha-core/matcha-core.min.css';
+        ```
+    </div>
+
+    <span class="h6">Importação via angular.json:</span>
+    <div class="flex-column">
+        ```js
+        "styles": [
+            "node_modules/matcha-core/matcha-core.min.css"
+        ]
+        ```
+    </div>
+</div>
+
+
+Segunda opção, você pode importar o pacote diretamente no seu HTML.
+
+<div class="matcha-card background-surface flex-column gap-16">
+    <span class="h6">Importação na tag header do HTML</span>
+    <div class="flex-column">
+        ```html
+        <link rel="stylesheet" href="https://unpkg.com/matcha-core@latest/matcha-core.min.css">
+        ```
+    </div>
+</div>

package/src/documentation/foundation/borders/border-style.mdx

@@ -0,0 +1,144 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Foundation / Border / Border Style" />
+
+# Border Style
+
+Todos os tipos de border-style estão cobertos (dashed, dotted, double, groove, ridge, inset, outset e none).
+
+Todas essas classes possuem **opções** de infix de breakpoint(`xs`, `sm`, `md`, `lg`, `xl`) e suffix de `!important`.
+
+Anatomia da classe: `.border-style#{$infix}-#{$style}#{$has-important}` => `.border-style-md-dashed--force`.
+
+### Exemplo
+<div class="matcha-card background-surface flex-column gap-16">
+    <div class="matcha-card background-bg grid-2 gap-16 grid-sm-3 flex-md-space-between">
+        <div class="border-color-accent radius-16 b-2 border-style-dashed flex-center-center h-124 w-124 text-center font-size-14">border-style-dashed</div>
+        <div class="border-color-accent radius-16 b-2 border-style-dotted flex-center-center h-124 w-124 text-center font-size-14">border-style-dotted</div>
+        <div class="border-color-accent b-4 border-style-double flex-center-center h-124 w-124 text-center font-size-14">border-style-double</div>
+        <div class="border-color-accent b-4 border-style-groove flex-center-center h-124 w-124 text-center font-size-14">border-style-groove</div>
+        <div class="border-color-accent b-4 border-style-ridge flex-center-center h-124 w-124 text-center font-size-14">border-style-ridge</div>
+    </div>
+
+    <div>
+        ```html
+        <div class="border-style-dashed">border-style: dashed</div>
+        <div class="border-style-dotted">border-style: dotted</div>
+        <div class="border-style-double">border-style: double</div>
+        <div class="border-style-groove">border-style: groove</div>
+        <div class="border-style-ridge">border-style: ridge</div>
+        ```
+    </div>
+</div>
+
+### Atributos
+    <div class="h-400 w-100-p overflow-y-scroll">
+        <table class="w-100-p">
+            <thead>
+                <tr>
+                    <th>Classe</th>
+                    <th>Propriedade</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>border-none</td>
+                    <td>border-style: none;</td>
+                </tr>
+                <tr>
+                    <td>border-dashed</td>
+                    <td>border-style: dashed;</td>
+                </tr>
+                <tr>
+                    <td>border-dotted</td>
+                    <td>border-style: dotted;</td>
+                </tr>
+                <tr>
+                    <td>border-double</td>
+                    <td>border-style: double;</td>
+                </tr>
+                <tr>
+                    <td>border-groove</td>
+                    <td>border-style: groove;</td>
+                </tr>
+                <tr>
+                    <td>border-ridge</td>
+                    <td>border-style: ridge;</td>
+                </tr>
+                <tr>
+                    <td>border-inset</td>
+                    <td>border-style: inset;</td>
+                </tr>
+                <tr>
+                    <td>border-outset</td>
+                    <td>border-style: outset;</td>
+                </tr>
+
+                {['none', 'dashed', 'dotted', 'double', 'groove', 'ridge', 'inset', 'outset'].map((style) => (
+                    <>
+                    <tr>
+                        <td>{`border-${style}`}</td>
+                        <td>{`border-style: ${style};`}</td>
+                    </tr>
+                    <tr>
+                        <td>{`border-top-${style}`}</td>
+                        <td>{`border-top-style: ${style};`}</td>
+                    </tr>
+                    <tr>
+                        <td>{`border-right-${style}`}</td>
+                        <td>{`border-right-style: ${style};`}</td>
+                    </tr>
+                    <tr>
+                        <td>{`border-bottom-${style}`}</td>
+                        <td>{`border-bottom-style: ${style};`}</td>
+                    </tr>
+                    <tr>
+                        <td>{`border-left-${style}`}</td>
+                        <td>{`border-left-style: ${style};`}</td>
+                    </tr>
+                    </>
+                ))}
+            </tbody>
+        </table>
+    </div>
+
+### Instalação
+Para utilizar as classes de _Border Style_, você pode fazer de duas formas:
+
+Primeira opção, você pode importar o pacote matcha-core no seu projeto.
+
+1. Instale o pacote [matcha-core](https://www.npmjs.com/package/matcha-core) via npm ou yarn.
+
+`npm install matcha-core`
+
+2. Importe o pacote no seu estilo global, diretamente no seu angular.json ou no head do seu index.html.
+
+<div class="matcha-card background-surface flex-column gap-16">
+    <span class="h6">Importação via estilo global:</span>
+    <div class="flex-column">
+        ```css
+        @import 'node_modules/matcha-core/matcha-core.min.css';
+        ```
+    </div>
+
+    <span class="h6">Importação via angular.json:</span>
+    <div class="flex-column">
+        ```js
+        "styles": [
+            "node_modules/matcha-core/matcha-core.min.css"
+        ]
+        ```
+    </div>
+</div>
+
+
+Segunda opção, você pode importar o pacote diretamente no seu HTML.
+
+<div class="matcha-card background-surface flex-column gap-16">
+    <span class="h6">Importação na tag header do HTML</span>
+    <div class="flex-column">
+        ```html
+        <link rel="stylesheet" href="https://unpkg.com/matcha-core@latest/matcha-core.min.css">
+        ```
+    </div>
+</div>

package/src/documentation/foundation/colors/all-colors.mdx

@@ -0,0 +1,153 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Foundation / Colors / Colors" />
+
+# Colors
+
+Nesta seção, apresentamos uma lista abrangente das classes CSS associadas as cores base do Matcha Design System.Essas classes abrangem apenas as cores **Dinâmicas(que se adaptam ao tema)** de cada uma das paletas de cores base. Isso se aplica tanto ao **foreground(texto)** quanto ao **background(fundo)**. Explore essa gama completa de opções para personalizar e adaptar as cores de acordo com suas preferências e necessidades.
+
+---
+
+### Colors Classes
+
+Essas são as cores base do Matcha, elas são usadas para toasts, snackbars, informações, gráficos, bullets, borders, dots e etc.
+
+<div class="grid-md-4 gap-16">
+    <div class="flex-column elevation-z-1 radius-8 overflow-hidden background-surface-alpha p-0">
+        <div class="p-8 red">.red</div>
+    </div>
+
+    <div class="flex-column elevation-z-1 radius-8 overflow-hidden background-surface-alpha p-0">
+        <div class="p-8 pink">.pink</div>
+    </div>
+
+    <div class="flex-column elevation-z-1 radius-8 overflow-hidden background-surface-alpha p-0">
+        <div class="p-8 purple">.purple</div>
+    </div>
+
+    <div class="flex-column elevation-z-1 radius-8 overflow-hidden background-surface-alpha p-0">
+        <div class="p-8 deep-purple">.deep-purple</div>
+    </div>
+
+    <div class="flex-column elevation-z-1 radius-8 overflow-hidden background-surface-alpha p-0">
+        <div class="p-8 indigo">.indigo</div>
+    </div>
+
+    <div class="flex-column elevation-z-1 radius-8 overflow-hidden background-surface-alpha p-0">
+        <div class="p-8 blue">.blue</div>
+    </div>
+
+    <div class="flex-column elevation-z-1 radius-8 overflow-hidden background-surface-alpha p-0">
+        <div class="p-8 light-blue">.light-blue</div>
+    </div>
+
+    <div class="flex-column elevation-z-1 radius-8 overflow-hidden background-surface-alpha p-0">
+        <div class="p-8 cyan">.cyan</div>
+    </div>
+
+    <div class="flex-column elevation-z-1 radius-8 overflow-hidden background-surface-alpha p-0">
+        <div class="p-8 teal">.teal</div>
+    </div>
+
+    <div class="flex-column elevation-z-1 radius-8 overflow-hidden background-surface-alpha p-0">
+        <div class="p-8 green">.green</div>
+    </div>
+
+    <div class="flex-column elevation-z-1 radius-8 overflow-hidden background-surface-alpha p-0">
+        <div class="p-8 light-green">.light-green</div>
+    </div>
+
+    <div class="flex-column elevation-z-1 radius-8 overflow-hidden background-surface-alpha p-0">
+        <div class="p-8 lime">.lime</div>
+    </div>
+
+    <div class="flex-column elevation-z-1 radius-8 overflow-hidden background-surface-alpha p-0">
+        <div class="p-8 yellow">.yellow</div>
+    </div>
+
+    <div class="flex-column elevation-z-1 radius-8 overflow-hidden background-surface-alpha p-0">
+        <div class="p-8 amber">.amber</div>
+    </div>
+
+    <div class="flex-column elevation-z-1 radius-8 overflow-hidden background-surface-alpha p-0">
+        <div class="p-8 orange">.orange</div>
+    </div>
+
+    <div class="flex-column elevation-z-1 radius-8 overflow-hidden background-surface-alpha p-0">
+        <div class="p-8 deep-orange">.deep-orange</div>
+    </div>
+
+    <div class="flex-column elevation-z-1 radius-8 overflow-hidden background-surface-alpha p-0">
+        <div class="p-8 brown">.brown</div>
+    </div>
+
+    <div class="flex-column elevation-z-1 radius-8 overflow-hidden background-surface-alpha p-0">
+        <div class="p-8 grey">.grey</div>
+    </div>
+
+    <div class="flex-column elevation-z-1 radius-8 overflow-hidden background-surface-alpha p-0">
+        <div class="p-8 blue-grey">.blue-grey</div>
+    </div>
+
+</div>
+
+---
+
+### Theme Colors Classes
+
+Essas são as cores base do Matcha, elas são usadas para toasts, snackbars, informações, gráficos, bullets, borders, dots e etc.
+
+<div class="grid-md-3 gap-16">
+    <div class="flex-column elevation-z-1 radius-8 overflow-hidden background-surface-alpha p-0">
+        <div class="p-8 primary">.primary</div>
+    </div>
+
+    <div class="flex-column elevation-z-1 radius-8 overflow-hidden background-surface-alpha p-0">
+        <div class="p-8 accent">.accent</div>
+    </div>
+
+    <div class="flex-column elevation-z-1 radius-8 overflow-hidden background-surface-alpha p-0">
+        <div class="p-8 warn">.warn</div>
+    </div>
+</div>
+
+---
+
+### Surface Colors Classes
+
+Essas são as cores base do Matcha, elas são usadas para toasts, snackbars, informações, gráficos, bullets, borders, dots e etc.
+
+<div class="grid-md-2 gap-16">
+    <div class="flex-column elevation-z-1 radius-8 overflow-hidden p-0">
+        <div class="p-8 background-bg">.background-bg</div>
+    </div>
+
+    <div class="flex-column elevation-z-1 radius-8 overflow-hidden p-0 background-surface-alpha">
+        <div class="p-8 background-bg-alpha">.background-bg-alpha</div>
+    </div>
+
+    <div class="flex-column elevation-z-1 radius-8 overflow-hidden p-0">
+        <div class="p-8 background-surface">.background-surface</div>
+    </div>
+
+    <div class="flex-column elevation-z-1 radius-8 overflow-hidden p-0">
+        <div class="p-8 background-surface-alpha">.background-surface-alpha</div>
+    </div>
+
+
+    <div class="flex-column elevation-z-1 radius-8 overflow-hidden p-0">
+        <div class="p-8 color-fg-inverse background-bg-inverse">.background-bg-inverse</div>
+    </div>
+
+    <div class="flex-column elevation-z-1 radius-8 overflow-hidden p-0 background-surface-alpha">
+        <div class="p-8 color-fg-inverse background-bg-alpha-inverse">.background-bg-alpha-inverse</div>
+    </div>
+
+    <div class="flex-column elevation-z-1 radius-8 overflow-hidden p-0">
+        <div class="p-8 color-fg-inverse background-surface-inverse">.background-surface-inverse</div>
+    </div>
+
+    <div class="flex-column elevation-z-1 radius-8 overflow-hidden p-0">
+        <div class="p-8 color-fg-inverse background-surface-alpha-inverse">.background-surface-alpha-inverse</div>
+    </div>
+</div>

package/src/documentation/foundation/colors/base/amber.mdx

@@ -0,0 +1,235 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Foundation / Colors / Base / Amber" />
+
+# Amber
+
+Nesta seção, apresentamos uma lista abrangente de todas as classes CSS associadas a esta cor no Matcha Design System. As classes abrangem cada um dos níveis de saturação dentro desta paleta de cores, incluindo cores **estáticas** e **Dinâmicas(que se adaptam ao tema)**. Isso se aplica tanto ao **foreground(texto)** quanto ao **background(fundo)**. Explore essa gama completa de opções para personalizar e adaptar as cores de acordo com suas preferências e necessidades.
+
+    <div class="grid-md-4 gap-8 pb-32">
+        <div class="grid-1 elevation-z-1 radius-8 overflow-hidden background-surface">
+            <div class="p-8 amber"><span class="i-matcha-special-need"></span>.amber</div>
+            <div class="p-8 color-amber">.color-amber</div>
+            <div class="p-8 background-amber-alpha">.background-amber-alpha</div>
+            <div class="p-8 background-amber">.background-amber</div>
+        </div>
+
+        <div class="grid-1 elevation-z-1 radius-8 overflow-hidden background-surface">
+            <div class="p-8 amber">.amber</div>
+            <div class="p-8 amber-50">.amber-50</div>
+            <div class="p-8 amber-100">.amber-100</div>
+            <div class="p-8 amber-200">.amber-200</div>
+            <div class="p-8 amber-300">.amber-300</div>
+            <div class="p-8 amber-400">.amber-400</div>
+            <div class="p-8 amber-500">.amber-500</div>
+            <div class="p-8 amber-600">.amber-600</div>
+            <div class="p-8 amber-700">.amber-700</div>
+            <div class="p-8 amber-800">.amber-800</div>
+            <div class="p-8 amber-900">.amber-900</div>
+            <div class="p-8 amber-A100">.amber-A100</div>
+            <div class="p-8 amber-A200">.amber-A200</div>
+            <div class="p-8 amber-A400">.amber-A400</div>
+            <div class="p-8 amber-A700">.amber-A700</div>
+        </div>
+
+        <div class="grid-1 elevation-z-1 radius-8 overflow-hidden background-surface">
+            <div class="p-8 amber-bg">.amber-bg</div>
+            <div class="p-8 amber-50-bg">.amber-50-bg</div>
+            <div class="p-8 amber-100-bg">.amber-100-bg</div>
+            <div class="p-8 amber-200-bg">.amber-200-bg</div>
+            <div class="p-8 amber-300-bg">.amber-300-bg</div>
+            <div class="p-8 amber-400-bg">.amber-400-bg</div>
+            <div class="p-8 amber-500-bg">.amber-500-bg</div>
+            <div class="p-8 amber-600-bg">.amber-600-bg</div>
+            <div class="p-8 amber-700-bg">.amber-700-bg</div>
+            <div class="p-8 amber-800-bg">.amber-800-bg</div>
+            <div class="p-8 amber-900-bg">.amber-900-bg</div>
+            <div class="p-8 amber-A100-bg">.amber-A100-bg</div>
+            <div class="p-8 amber-A200-bg">.amber-A200-bg</div>
+            <div class="p-8 amber-A400-bg">.amber-A400-bg</div>
+            <div class="p-8 amber-A700-bg">.amber-A700-bg</div>
+        </div>
+
+        <div class="grid-1 elevation-z-1 radius-8 overflow-hidden background-surface">
+            <div class="p-8 amber-fg">.amber-fg</div>
+            <div class="p-8 amber-50-fg">.amber-50-fg</div>
+            <div class="p-8 amber-100-fg">.amber-100-fg</div>
+            <div class="p-8 amber-200-fg">.amber-200-fg</div>
+            <div class="p-8 amber-300-fg">.amber-300-fg</div>
+            <div class="p-8 amber-400-fg">.amber-400-fg</div>
+            <div class="p-8 amber-500-fg">.amber-500-fg</div>
+            <div class="p-8 amber-600-fg">.amber-600-fg</div>
+            <div class="p-8 amber-700-fg">.amber-700-fg</div>
+            <div class="p-8 amber-800-fg">.amber-800-fg</div>
+            <div class="p-8 amber-900-fg">.amber-900-fg</div>
+            <div class="p-8 amber-A100-fg">.amber-A100-fg</div>
+            <div class="p-8 amber-A200-fg">.amber-A200-fg</div>
+            <div class="p-8 amber-A400-fg">.amber-A400-fg</div>
+            <div class="p-8 amber-A700-fg">.amber-A700-fg</div>
+        </div>
+    </div>
+
+---
+
+### Cores Dinâmicas: Acessibilidade e Harmonia Visual
+
+A seção "Cores Dinâmicas" apresenta uma coleção versátil de cores que se adaptam de maneira inteligente e intuitiva com base no tema escolhido pelo usuário: Tema claro ou escuro. Essas cores dinâmicas são especialmente projetadas para criar uma experiência visual perfeita e agradável, independentemente das preferências de contraste e iluminação.
+
+    #### Acessibilidade: Cor Acessível e inclusiva
+    O uso das classes ```.<nome-da-cor> ``` é essencial para garantir que nosso aplicativo ofereça uma acessibilidade ideal e uma experiência visual consistente, independentemente das condições de iluminação ou das necessidades individuais dos usuários.
+
+    <div class="flex-column">
+        <div class="elevation-z-1 matcha-card amber">
+            <span class="h5"><span class="i-matcha-special-need"></span>Exemplo: Mantém equilíbrio de contraste entre texto e plano de fundo, adaptando a cor de acordo com os temas claro ou escuro.</span>
+            <div class="flex-column pt-16">
+                ```css
+                    .amber
+                ```
+            </div>
+        </div>
+    </div>
+
+    #### Harmonia Visual: Background e Foreground dinâmicos
+    Ao usar as classes CSS de "Background" ou "Foreground", lembre-se de que é crucial **evitar combinar as classes CSS de cores de plano de fundo e texto** de forma separada. Para obter harmonia visual e acessibilidade, opte por usar a opção "Acessibilidade: Cor Acessível e inclusiva" mencionada anteriormente. Essa abordagem única garante uma combinação equilibrada de cores para um ótimo contraste e legibilidade, resultando em uma experiência de usuário mais eficaz e agradável. No entanto, é fundamental evitar combinar classes CSS para aplicar estilo ao plano de fundo e ao texto de maneira que possa afetar a acessibilidade. Certifique-se de que a aplicação das classes mantenha a legibilidade e a harmonia visual para todos os usuários independente das condições de iluminação.
+
+    <div class="grid-md-2 gap-16">
+        <div class="flex-column gap-16">
+            <span class="color-success">
+                <span class="i-matcha-action_sign_success i-size-lg"></span>
+                <span class="pl-8">Faça isso</span>
+            </span>
+
+            <div class="elevation-z-1 matcha-card color-amber">
+                <span class="h5">Exemplo de texto</span>
+                <div class="flex-column pt-16">
+                    ```css
+                        .color-amber
+                    ```
+                </div>
+            </div>
+
+            <div class="elevation-z-1 matcha-card background-amber-alpha">
+                <span class="h5">Exemplo de texto</span>
+                <div class="flex-column pt-16">
+                    ```css
+                        .background-amber-alpha
+                    ```
+                </div>
+            </div>
+        </div>
+
+        <div class="flex-column gap-16">
+            <span class="color-error">
+                <span class="i-matcha-action_sign_error i-size-lg"></span>
+                <span class="pl-8">Não faça isso</span>
+            </span>
+
+            <div class="elevation-z-1 matcha-card background-amber">
+                <span class="h5">Exemplo de texto</span>
+                <div class="flex-column pt-16">
+                    ```css
+                        .background-amber
+                    ```
+                </div>
+            </div>
+        </div>
+    </div>
+
+---
+
+### Cores Não Dinâmicas (estáticas): Harmonia Visual Estática e Background e Foreground Estáticos
+
+Nesta seção, focamos nas "Cores Não Dinâmicas", que mantêm sua consistência independentemente do tema selecionado (claro ou escuro). Aqui, você encontrará uma lista de classes que permanecem constantes, garantindo uma harmonia visual estática em toda a aplicação. Algumas classes já foram configuradas para oferecer equilíbrio de contraste entre texto e plano de fundo, enquanto outras classes permitem personalizar separadamente as cores de background e texto.
+
+    #### Harmonia Visual: Cores Estáticas Pamberefinidas
+    Classes nesta categoria foram cuidadosamente selecionadas para oferecer uma combinação equilibrada entre o texto e o background. Elas garantem legibilidade e estética, independentemente das preferências de tema. Use essas classes para manter uma aparência uniforme e agradável.
+
+        <div class="elevation-z-1 matcha-card amber">
+            <span class="h5">Exemplo: Mantém equilíbrio de contraste entre texto e plano de fundo, mas não ajusta sua cor de acordo com os temas claro ou escuro</span>
+            <div class="flex-column pt-16">
+                ```css
+                    .amber
+                ```
+            </div>
+
+            <div class="grid-1 elevation-z-1 radius-8 overflow-hidden background-surface ">
+                <div class="p-8 amber">.amber</div>
+                <div class="p-8 amber-50">.amber-50</div>
+                <div class="p-8 amber-100">.amber-100</div>
+                <div class="p-8 amber-200">.amber-200</div>
+                <div class="p-8 amber-300">.amber-300</div>
+                <div class="p-8 amber-400">.amber-400</div>
+                <div class="p-8 amber-500">.amber-500</div>
+                <div class="p-8 amber-600">.amber-600</div>
+                <div class="p-8 amber-700">.amber-700</div>
+                <div class="p-8 amber-800">.amber-800</div>
+                <div class="p-8 amber-900">.amber-900</div>
+                <div class="p-8 amber-A100">.amber-A100</div>
+                <div class="p-8 amber-A200">.amber-A200</div>
+                <div class="p-8 amber-A400">.amber-A400</div>
+                <div class="p-8 amber-A700">.amber-A700</div>
+            </div>
+
+        </div>
+
+    #### Background e Foreground Estáticos Separados
+    Algumas classes permitem personalizar independentemente as cores de plano de fundo e texto. Embora essa abordagem ofereça flexibilidade, lembre-se de que é crucial manter o contraste e a legibilidade para uma experiência de usuário acessível. Escolha combinações adequadas de cores e evite comprometer a visibilidade do conteúdo.
+
+    Ao selecionar classes da seção "Cores Não Dinâmicas", você terá uma base sólida para criar interfaces coesas e visualmente atraentes, garantindo que cada elemento contribua para uma experiência de usuário de alta qualidade, independentemente do tema escolhido.
+    Essas são as cores base do Matcha, elas são usadas para toasts, snackbars, informações, gráficos, bullets, borders, dots e etc.
+
+    <div class="grid-md-2 gap-8">
+        <div class="elevation-z-1 matcha-card amber-bg gap-16 flex-column">
+            <span class="h5">Não assegura o equilíbrio de contraste entre texto e plano de fundo, nem ajusta sua cor de acordo com os temas claro ou escuro.</span>
+            <div class="flex-column pt-16">
+                ```css
+                    .amber
+                ```
+            </div>
+
+            <div class="grid-1 elevation-z-1 radius-8 overflow-hidden background-surface">
+                <div class="p-8 amber-bg">.amber-bg</div>
+                <div class="p-8 amber-50-bg">.amber-50-bg</div>
+                <div class="p-8 amber-100-bg">.amber-100-bg</div>
+                <div class="p-8 amber-200-bg">.amber-200-bg</div>
+                <div class="p-8 amber-300-bg">.amber-300-bg</div>
+                <div class="p-8 amber-400-bg">.amber-400-bg</div>
+                <div class="p-8 amber-500-bg">.amber-500-bg</div>
+                <div class="p-8 amber-600-bg">.amber-600-bg</div>
+                <div class="p-8 amber-700-bg">.amber-700-bg</div>
+                <div class="p-8 amber-800-bg">.amber-800-bg</div>
+                <div class="p-8 amber-900-bg">.amber-900-bg</div>
+                <div class="p-8 amber-A100-bg">.amber-A100-bg</div>
+                <div class="p-8 amber-A200-bg">.amber-A200-bg</div>
+                <div class="p-8 amber-A400-bg">.amber-A400-bg</div>
+                <div class="p-8 amber-A700-bg">.amber-A700-bg</div>
+            </div>
+        </div>
+
+        <div class="elevation-z-1 matcha-card amber-fg background-surface gap-16 flex-column">
+            <span class="h5">Não assegura o equilíbrio de contraste entre texto e plano de fundo, nem ajusta sua cor de acordo com os temas claro ou escuro.</span>
+            <div class="flex-column pt-16">
+                ```css
+                    .amber
+                ```
+            </div>
+
+            <div class="grid-1 elevation-z-1 radius-8 overflow-hidden background-surface">
+                <div class="p-8 amber-fg">.amber-fg</div>
+                <div class="p-8 amber-50-fg">.amber-50-fg</div>
+                <div class="p-8 amber-100-fg">.amber-100-fg</div>
+                <div class="p-8 amber-200-fg">.amber-200-fg</div>
+                <div class="p-8 amber-300-fg">.amber-300-fg</div>
+                <div class="p-8 amber-400-fg">.amber-400-fg</div>
+                <div class="p-8 amber-500-fg">.amber-500-fg</div>
+                <div class="p-8 amber-600-fg">.amber-600-fg</div>
+                <div class="p-8 amber-700-fg">.amber-700-fg</div>
+                <div class="p-8 amber-800-fg">.amber-800-fg</div>
+                <div class="p-8 amber-900-fg">.amber-900-fg</div>
+                <div class="p-8 amber-A100-fg">.amber-A100-fg</div>
+                <div class="p-8 amber-A200-fg">.amber-A200-fg</div>
+                <div class="p-8 amber-A400-fg">.amber-A400-fg</div>
+                <div class="p-8 amber-A700-fg">.amber-A700-fg</div>
+            </div>
+        </div>
+    </div>