matcha-components 20.13.0 → 20.15.0

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

@@ -0,0 +1,235 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Foundation / Colors / Base / Yellow" />
+
+# Yellow
+
+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 yellow"><span class="i-matcha-special-need"></span>.yellow</div>
+            <div class="p-8 color-yellow">.color-yellow</div>
+            <div class="p-8 background-yellow-alpha">.background-yellow-alpha</div>
+            <div class="p-8 background-yellow">.background-yellow</div>
+        </div>
+
+        <div class="grid-1 elevation-z-1 radius-8 overflow-hidden background-surface">
+            <div class="p-8 yellow">.yellow</div>
+            <div class="p-8 yellow-50">.yellow-50</div>
+            <div class="p-8 yellow-100">.yellow-100</div>
+            <div class="p-8 yellow-200">.yellow-200</div>
+            <div class="p-8 yellow-300">.yellow-300</div>
+            <div class="p-8 yellow-400">.yellow-400</div>
+            <div class="p-8 yellow-500">.yellow-500</div>
+            <div class="p-8 yellow-600">.yellow-600</div>
+            <div class="p-8 yellow-700">.yellow-700</div>
+            <div class="p-8 yellow-800">.yellow-800</div>
+            <div class="p-8 yellow-900">.yellow-900</div>
+            <div class="p-8 yellow-A100">.yellow-A100</div>
+            <div class="p-8 yellow-A200">.yellow-A200</div>
+            <div class="p-8 yellow-A400">.yellow-A400</div>
+            <div class="p-8 yellow-A700">.yellow-A700</div>
+        </div>
+
+        <div class="grid-1 elevation-z-1 radius-8 overflow-hidden background-surface">
+            <div class="p-8 yellow-bg">.yellow-bg</div>
+            <div class="p-8 yellow-50-bg">.yellow-50-bg</div>
+            <div class="p-8 yellow-100-bg">.yellow-100-bg</div>
+            <div class="p-8 yellow-200-bg">.yellow-200-bg</div>
+            <div class="p-8 yellow-300-bg">.yellow-300-bg</div>
+            <div class="p-8 yellow-400-bg">.yellow-400-bg</div>
+            <div class="p-8 yellow-500-bg">.yellow-500-bg</div>
+            <div class="p-8 yellow-600-bg">.yellow-600-bg</div>
+            <div class="p-8 yellow-700-bg">.yellow-700-bg</div>
+            <div class="p-8 yellow-800-bg">.yellow-800-bg</div>
+            <div class="p-8 yellow-900-bg">.yellow-900-bg</div>
+            <div class="p-8 yellow-A100-bg">.yellow-A100-bg</div>
+            <div class="p-8 yellow-A200-bg">.yellow-A200-bg</div>
+            <div class="p-8 yellow-A400-bg">.yellow-A400-bg</div>
+            <div class="p-8 yellow-A700-bg">.yellow-A700-bg</div>
+        </div>
+
+        <div class="grid-1 elevation-z-1 radius-8 overflow-hidden background-surface">
+            <div class="p-8 yellow-fg">.yellow-fg</div>
+            <div class="p-8 yellow-50-fg">.yellow-50-fg</div>
+            <div class="p-8 yellow-100-fg">.yellow-100-fg</div>
+            <div class="p-8 yellow-200-fg">.yellow-200-fg</div>
+            <div class="p-8 yellow-300-fg">.yellow-300-fg</div>
+            <div class="p-8 yellow-400-fg">.yellow-400-fg</div>
+            <div class="p-8 yellow-500-fg">.yellow-500-fg</div>
+            <div class="p-8 yellow-600-fg">.yellow-600-fg</div>
+            <div class="p-8 yellow-700-fg">.yellow-700-fg</div>
+            <div class="p-8 yellow-800-fg">.yellow-800-fg</div>
+            <div class="p-8 yellow-900-fg">.yellow-900-fg</div>
+            <div class="p-8 yellow-A100-fg">.yellow-A100-fg</div>
+            <div class="p-8 yellow-A200-fg">.yellow-A200-fg</div>
+            <div class="p-8 yellow-A400-fg">.yellow-A400-fg</div>
+            <div class="p-8 yellow-A700-fg">.yellow-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 yellow">
+            <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
+                    .yellow
+                ```
+            </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-yellow">
+                <span class="h5">Exemplo de texto</span>
+                <div class="flex-column pt-16">
+                    ```css
+                        .color-yellow
+                    ```
+                </div>
+            </div>
+
+            <div class="elevation-z-1 matcha-card background-yellow-alpha">
+                <span class="h5">Exemplo de texto</span>
+                <div class="flex-column pt-16">
+                    ```css
+                        .background-yellow-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-yellow">
+                <span class="h5">Exemplo de texto</span>
+                <div class="flex-column pt-16">
+                    ```css
+                        .background-yellow
+                    ```
+                </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 Pyellowefinidas
+    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 yellow">
+            <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
+                    .yellow
+                ```
+            </div>
+
+            <div class="grid-1 elevation-z-1 radius-8 overflow-hidden background-surface ">
+                <div class="p-8 yellow">.yellow</div>
+                <div class="p-8 yellow-50">.yellow-50</div>
+                <div class="p-8 yellow-100">.yellow-100</div>
+                <div class="p-8 yellow-200">.yellow-200</div>
+                <div class="p-8 yellow-300">.yellow-300</div>
+                <div class="p-8 yellow-400">.yellow-400</div>
+                <div class="p-8 yellow-500">.yellow-500</div>
+                <div class="p-8 yellow-600">.yellow-600</div>
+                <div class="p-8 yellow-700">.yellow-700</div>
+                <div class="p-8 yellow-800">.yellow-800</div>
+                <div class="p-8 yellow-900">.yellow-900</div>
+                <div class="p-8 yellow-A100">.yellow-A100</div>
+                <div class="p-8 yellow-A200">.yellow-A200</div>
+                <div class="p-8 yellow-A400">.yellow-A400</div>
+                <div class="p-8 yellow-A700">.yellow-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 yellow-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
+                    .yellow
+                ```
+            </div>
+
+            <div class="grid-1 elevation-z-1 radius-8 overflow-hidden background-surface">
+                <div class="p-8 yellow-bg">.yellow-bg</div>
+                <div class="p-8 yellow-50-bg">.yellow-50-bg</div>
+                <div class="p-8 yellow-100-bg">.yellow-100-bg</div>
+                <div class="p-8 yellow-200-bg">.yellow-200-bg</div>
+                <div class="p-8 yellow-300-bg">.yellow-300-bg</div>
+                <div class="p-8 yellow-400-bg">.yellow-400-bg</div>
+                <div class="p-8 yellow-500-bg">.yellow-500-bg</div>
+                <div class="p-8 yellow-600-bg">.yellow-600-bg</div>
+                <div class="p-8 yellow-700-bg">.yellow-700-bg</div>
+                <div class="p-8 yellow-800-bg">.yellow-800-bg</div>
+                <div class="p-8 yellow-900-bg">.yellow-900-bg</div>
+                <div class="p-8 yellow-A100-bg">.yellow-A100-bg</div>
+                <div class="p-8 yellow-A200-bg">.yellow-A200-bg</div>
+                <div class="p-8 yellow-A400-bg">.yellow-A400-bg</div>
+                <div class="p-8 yellow-A700-bg">.yellow-A700-bg</div>
+            </div>
+        </div>
+
+        <div class="elevation-z-1 matcha-card yellow-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
+                    .yellow
+                ```
+            </div>
+
+            <div class="grid-1 elevation-z-1 radius-8 overflow-hidden background-surface">
+                <div class="p-8 yellow-fg">.yellow-fg</div>
+                <div class="p-8 yellow-50-fg">.yellow-50-fg</div>
+                <div class="p-8 yellow-100-fg">.yellow-100-fg</div>
+                <div class="p-8 yellow-200-fg">.yellow-200-fg</div>
+                <div class="p-8 yellow-300-fg">.yellow-300-fg</div>
+                <div class="p-8 yellow-400-fg">.yellow-400-fg</div>
+                <div class="p-8 yellow-500-fg">.yellow-500-fg</div>
+                <div class="p-8 yellow-600-fg">.yellow-600-fg</div>
+                <div class="p-8 yellow-700-fg">.yellow-700-fg</div>
+                <div class="p-8 yellow-800-fg">.yellow-800-fg</div>
+                <div class="p-8 yellow-900-fg">.yellow-900-fg</div>
+                <div class="p-8 yellow-A100-fg">.yellow-A100-fg</div>
+                <div class="p-8 yellow-A200-fg">.yellow-A200-fg</div>
+                <div class="p-8 yellow-A400-fg">.yellow-A400-fg</div>
+                <div class="p-8 yellow-A700-fg">.yellow-A700-fg</div>
+            </div>
+        </div>
+    </div>

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

@@ -0,0 +1,93 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Foundation / Colors / Surface"/>
+
+# Superfícies Adaptáveis no Matcha Design System
+No Matcha Design System, as **superfícies** referem-se ao fundo de elementos visuais, como blocos de conteúdo, painéis, caixas de diálogo e outras áreas que compõem a interface do usuário. Essas superfícies desempenham um papel crucial na definição da aparência e da experiência geral do usuário.
+
+---
+
+### Light Mode e Dark Mode: Personalização e Legibilidade
+
+Um dos destaques do Matcha Design System é a sua capacidade de oferecer suporte tanto ao **light mode** (modo claro) quanto ao **dark mode** (modo escuro). As superfícies desempenham um papel fundamental nessa funcionalidade, pois se adaptam automaticamente às escolhas dos usuários. No light mode, as superfícies são claras e agradáveis, enquanto no dark mode, elas adotam tons escuros. Essa adaptação não só oferece personalização, mas também otimiza a **legibilidade** e a **usabilidade**, garantindo que os usuários possam interagir de maneira confortável, independentemente das preferências de cores.
+
+
+    <div class="grid-2 gap-16">
+        <div class="flex-column gap-16 matcha-card background-surface elevation-z-1 radius-8 overflow-hidden">
+            <h5 class="h5 color-fg">Tema Ativo</h5>
+            <div class="flex-column matcha-card background-bg elevation-z-1 radius-8 overflow-hidden color-fg">
+                <span>.background-bg</span>
+            </div>
+            <div class="span-2c">
+                <div class="grid-md-2 gap-16">
+                    <div class="flex-column gap-16 matcha-card background-bg elevation-z-1 radius-8 overflow-hidden">
+                        <div class="flex-column gap-16 matcha-card background-surface-alpha elevation-z-1 radius-8 overflow-hidden">
+                            <span class="color-fg">.background-surface-alpha</span>
+                            <div class="flex-column matcha-card gap-16 background-surface elevation-z-1 radius-8 overflow-hidden">
+                                <span class="color-fg">.background-surface</span>
+                                <div class="matcha-card h-64 background-bg-alpha elevation-z-1 radius-8 overflow-hidden">
+                                    <span class="color-fg">.background-bg-alpha</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="flex-column matcha-card background-bg elevation-z-1 radius-8 overflow-hidden">
+                        <div class="grid-1 gap-16 matcha-card background-surface-alpha elevation-z-1 radius-8 overflow-hidden">
+                            <div class="matcha-card background-surface elevation-z-1 radius-8 overflow-hidden">
+                                <div class="matcha-card background-bg-alpha elevation-z-1 radius-8 overflow-hidden">
+                                    <div class="matcha-card background-bg elevation-z-1 radius-8 overflow-hidden"></div>
+                                </div>
+                            </div>
+                            <div class="matcha-card background-surface elevation-z-1 radius-8 overflow-hidden"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="span-2c matcha-card background-bg elevation-z-1 radius-8 overflow-hidden h-64"></div>
+        </div>
+
+        <div class="flex-column gap-16 matcha-card background-surface-inverse elevation-z-1 radius-8 overflow-hidden">
+            <h5 class="h5 color-fg-inverse">Tema Ativo Invertido</h5>
+            <div class="flex-column matcha-card background-bg-inverse elevation-z-1 radius-8 overflow-hidden color-fg-inverse">
+                <span>.background-bg-inverse</span>
+            </div>
+            <div class="span-2c">
+                <div class="grid-md-2 gap-16">
+                    <div class="flex-column gap-16 matcha-card background-bg-inverse elevation-z-1 radius-8 overflow-hidden">
+                        <div class="flex-column gap-16 matcha-card background-surface-alpha-inverse elevation-z-1 radius-8 overflow-hidden">
+                            <span class="color-fg-inverse">.background-surface-alpha-inverse</span>
+                            <div class="flex-column matcha-card gap-16 background-surface-inverse elevation-z-1 radius-8 overflow-hidden">
+                                <span class="color-fg-inverse">.background-surface-inverse</span>
+                                <div class="matcha-card h-64 background-bg-alpha-inverse elevation-z-1 radius-8 overflow-hidden">
+                                    <span class="color-fg-inverse">.background-bg-alpha-inverse</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="flex-column matcha-card background-bg-inverse elevation-z-1 radius-8 overflow-hidden">
+                        <div class="grid-1 gap-16 matcha-card background-surface-alpha-inverse elevation-z-1 radius-8 overflow-hidden">
+                            <div class="matcha-card background-surface-inverse elevation-z-1 radius-8 overflow-hidden">
+                                <div class="matcha-card background-bg-alpha-inverse elevation-z-1 radius-8 overflow-hidden">
+                                    <div class="matcha-card background-bg-inverse elevation-z-1 radius-8 overflow-hidden"></div>
+                                </div>
+                            </div>
+                            <div class="matcha-card background-surface-inverse elevation-z-1 radius-8 overflow-hidden"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="span-2c matcha-card background-bg-inverse elevation-z-1 radius-8 overflow-hidden h-64"></div>
+        </div>
+    </div>
+
+
+---
+
+### Cores Dinâmicas: Harmonia e Identidade Visual
+As superfícies no Matcha Design System são conectadas às cores dinâmicas das [paletas base](/docs/fundamentos-cores-base--docs), [primary] e [accent]. As superfícies de fundo se ajustam automaticamente a essas cores, proporcionando uma harmonia visual em toda a interface. Ao manter as superfícies em sintonia com as cores dinâmicas, o sistema cria uma experiência coesa e atraente para os usuários.
+
+
+### Adaptabilidade às Necessidades do Usuário
+O uso de superfícies adaptáveis é vantajoso porque permite que o Matcha Design System atenda às necessidades individuais dos usuários. Se um usuário prefere uma interface mais clara e arejada, o light mode é a escolha ideal. Por outro lado, para quem prefere uma experiência mais focada e com menos emissão de luz, o dark mode oferece essa possibilidade. As superfícies dinâmicas desempenham um papel crucial nesse processo, garantindo que a interface se adapte à visão e às preferências de cada usuário.

package/src/documentation/foundation/colors/theme/accent.mdx

@@ -0,0 +1,235 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Foundation / Colors / Tema / Accent" />
+
+# Accent
+
+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 accent"><span class="i-matcha-special-need"></span>.accent</div>
+            <div class="p-8 color-accent">.color-accent</div>
+            <div class="p-8 background-accent-alpha">.background-accent-alpha</div>
+            <div class="p-8 background-accent">.background-accent</div>
+        </div>
+
+        <div class="grid-1 elevation-z-1 radius-8 overflow-hidden background-surface">
+            <div class="p-8 accent">.accent</div>
+            <div class="p-8 accent-50">.accent-50</div>
+            <div class="p-8 accent-100">.accent-100</div>
+            <div class="p-8 accent-200">.accent-200</div>
+            <div class="p-8 accent-300">.accent-300</div>
+            <div class="p-8 accent-400">.accent-400</div>
+            <div class="p-8 accent-500">.accent-500</div>
+            <div class="p-8 accent-600">.accent-600</div>
+            <div class="p-8 accent-700">.accent-700</div>
+            <div class="p-8 accent-800">.accent-800</div>
+            <div class="p-8 accent-900">.accent-900</div>
+            <div class="p-8 accent-A100">.accent-A100</div>
+            <div class="p-8 accent-A200">.accent-A200</div>
+            <div class="p-8 accent-A400">.accent-A400</div>
+            <div class="p-8 accent-A700">.accent-A700</div>
+        </div>
+
+        <div class="grid-1 elevation-z-1 radius-8 overflow-hidden background-surface">
+            <div class="p-8 accent-bg">.accent-bg</div>
+            <div class="p-8 accent-50-bg">.accent-50-bg</div>
+            <div class="p-8 accent-100-bg">.accent-100-bg</div>
+            <div class="p-8 accent-200-bg">.accent-200-bg</div>
+            <div class="p-8 accent-300-bg">.accent-300-bg</div>
+            <div class="p-8 accent-400-bg">.accent-400-bg</div>
+            <div class="p-8 accent-500-bg">.accent-500-bg</div>
+            <div class="p-8 accent-600-bg">.accent-600-bg</div>
+            <div class="p-8 accent-700-bg">.accent-700-bg</div>
+            <div class="p-8 accent-800-bg">.accent-800-bg</div>
+            <div class="p-8 accent-900-bg">.accent-900-bg</div>
+            <div class="p-8 accent-A100-bg">.accent-A100-bg</div>
+            <div class="p-8 accent-A200-bg">.accent-A200-bg</div>
+            <div class="p-8 accent-A400-bg">.accent-A400-bg</div>
+            <div class="p-8 accent-A700-bg">.accent-A700-bg</div>
+        </div>
+
+        <div class="grid-1 elevation-z-1 radius-8 overflow-hidden background-surface">
+            <div class="p-8 accent-fg">.accent-fg</div>
+            <div class="p-8 accent-50-fg">.accent-50-fg</div>
+            <div class="p-8 accent-100-fg">.accent-100-fg</div>
+            <div class="p-8 accent-200-fg">.accent-200-fg</div>
+            <div class="p-8 accent-300-fg">.accent-300-fg</div>
+            <div class="p-8 accent-400-fg">.accent-400-fg</div>
+            <div class="p-8 accent-500-fg">.accent-500-fg</div>
+            <div class="p-8 accent-600-fg">.accent-600-fg</div>
+            <div class="p-8 accent-700-fg">.accent-700-fg</div>
+            <div class="p-8 accent-800-fg">.accent-800-fg</div>
+            <div class="p-8 accent-900-fg">.accent-900-fg</div>
+            <div class="p-8 accent-A100-fg">.accent-A100-fg</div>
+            <div class="p-8 accent-A200-fg">.accent-A200-fg</div>
+            <div class="p-8 accent-A400-fg">.accent-A400-fg</div>
+            <div class="p-8 accent-A700-fg">.accent-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 accent">
+            <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
+                    .accent
+                ```
+            </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-accent">
+                <span class="h5">Exemplo de texto</span>
+                <div class="flex-column pt-16">
+                    ```css
+                        .color-accent
+                    ```
+                </div>
+            </div>
+
+            <div class="elevation-z-1 matcha-card background-accent-alpha">
+                <span class="h5">Exemplo de texto</span>
+                <div class="flex-column pt-16">
+                    ```css
+                        .background-accent-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-accent">
+                <span class="h5">Exemplo de texto</span>
+                <div class="flex-column pt-16">
+                    ```css
+                        .background-accent
+                    ```
+                </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 Paccentefinidas
+    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 accent">
+            <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
+                    .accent
+                ```
+            </div>
+
+            <div class="grid-1 elevation-z-1 radius-8 overflow-hidden background-surface ">
+                <div class="p-8 accent">.accent</div>
+                <div class="p-8 accent-50">.accent-50</div>
+                <div class="p-8 accent-100">.accent-100</div>
+                <div class="p-8 accent-200">.accent-200</div>
+                <div class="p-8 accent-300">.accent-300</div>
+                <div class="p-8 accent-400">.accent-400</div>
+                <div class="p-8 accent-500">.accent-500</div>
+                <div class="p-8 accent-600">.accent-600</div>
+                <div class="p-8 accent-700">.accent-700</div>
+                <div class="p-8 accent-800">.accent-800</div>
+                <div class="p-8 accent-900">.accent-900</div>
+                <div class="p-8 accent-A100">.accent-A100</div>
+                <div class="p-8 accent-A200">.accent-A200</div>
+                <div class="p-8 accent-A400">.accent-A400</div>
+                <div class="p-8 accent-A700">.accent-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 accent-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
+                    .accent
+                ```
+            </div>
+
+            <div class="grid-1 elevation-z-1 radius-8 overflow-hidden background-surface">
+                <div class="p-8 accent-bg">.accent-bg</div>
+                <div class="p-8 accent-50-bg">.accent-50-bg</div>
+                <div class="p-8 accent-100-bg">.accent-100-bg</div>
+                <div class="p-8 accent-200-bg">.accent-200-bg</div>
+                <div class="p-8 accent-300-bg">.accent-300-bg</div>
+                <div class="p-8 accent-400-bg">.accent-400-bg</div>
+                <div class="p-8 accent-500-bg">.accent-500-bg</div>
+                <div class="p-8 accent-600-bg">.accent-600-bg</div>
+                <div class="p-8 accent-700-bg">.accent-700-bg</div>
+                <div class="p-8 accent-800-bg">.accent-800-bg</div>
+                <div class="p-8 accent-900-bg">.accent-900-bg</div>
+                <div class="p-8 accent-A100-bg">.accent-A100-bg</div>
+                <div class="p-8 accent-A200-bg">.accent-A200-bg</div>
+                <div class="p-8 accent-A400-bg">.accent-A400-bg</div>
+                <div class="p-8 accent-A700-bg">.accent-A700-bg</div>
+            </div>
+        </div>
+
+        <div class="elevation-z-1 matcha-card accent-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
+                    .accent
+                ```
+            </div>
+
+            <div class="grid-1 elevation-z-1 radius-8 overflow-hidden background-surface">
+                <div class="p-8 accent-fg">.accent-fg</div>
+                <div class="p-8 accent-50-fg">.accent-50-fg</div>
+                <div class="p-8 accent-100-fg">.accent-100-fg</div>
+                <div class="p-8 accent-200-fg">.accent-200-fg</div>
+                <div class="p-8 accent-300-fg">.accent-300-fg</div>
+                <div class="p-8 accent-400-fg">.accent-400-fg</div>
+                <div class="p-8 accent-500-fg">.accent-500-fg</div>
+                <div class="p-8 accent-600-fg">.accent-600-fg</div>
+                <div class="p-8 accent-700-fg">.accent-700-fg</div>
+                <div class="p-8 accent-800-fg">.accent-800-fg</div>
+                <div class="p-8 accent-900-fg">.accent-900-fg</div>
+                <div class="p-8 accent-A100-fg">.accent-A100-fg</div>
+                <div class="p-8 accent-A200-fg">.accent-A200-fg</div>
+                <div class="p-8 accent-A400-fg">.accent-A400-fg</div>
+                <div class="p-8 accent-A700-fg">.accent-A700-fg</div>
+            </div>
+        </div>
+    </div>