matcha-components 20.12.0 → 20.15.0

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

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

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

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

package/src/documentation/foundation/displays/display-block.mdx

@@ -0,0 +1,134 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Foundation / Display / Block" />
+
+# Display Block
+
+As classes de display controlam a exibição dos elementos utilizando a propriedade CSS `display: block`.
+
+Todas essas classes possuem **opções** de infix de breakpoint (`xs`, `sm`, `md`, `lg`, `xl`) e suffix de `!important`.
+
+Anatomia da classe: `.d-#{$infix}#{$display-type}#{$has-important}` => `.d-md-block--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="accent d-xs-block flex-center-center h-124 w-124 text-center font-size-14">d-xs-block</div>
+        <div class="accent d-sm-block flex-center-center h-124 w-124 text-center font-size-14">d-sm-block</div>
+        <div class="accent d-md-block flex-center-center h-124 w-124 text-center font-size-14">d-md-block</div>
+        <div class="accent d-lg-block flex-center-center h-124 w-124 text-center font-size-14">d-lg-block</div>
+        <div class="accent d-xl-block flex-center-center h-124 w-124 text-center font-size-14">d-xl-block</div>
+    </div>
+
+    <div>
+        ```html
+        <div class="d-xs-block">d-xs-block</div>
+        <div class="d-sm-block">d-sm-block</div>
+        <div class="d-md-block">d-md-block</div>
+        <div class="d-lg-block">d-lg-block</div>
+        <div class="d-xl-block">d-xl-block</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>.d-block</td>
+                <td>display: block;</td>
+            </tr>
+            <tr>
+                <td>.d-block--force</td>
+                <td>display: block !important;</td>
+            </tr>
+            <tr>
+                <td>.d-xs-block</td>
+                <td>display: block;</td>
+            </tr>
+            <tr>
+                <td>.d-xs-block--force</td>
+                <td>display: block !important;</td>
+            </tr>
+            <tr>
+                <td>.d-sm-block</td>
+                <td>display: block;</td>
+            </tr>
+            <tr>
+                <td>.d-sm-block--force</td>
+                <td>display: block !important;</td>
+            </tr>
+            <tr>
+                <td>.d-md-block</td>
+                <td>display: block;</td>
+            </tr>
+            <tr>
+                <td>.d-md-block--force</td>
+                <td>display: block !important;</td>
+            </tr>
+            <tr>
+                <td>.d-lg-block</td>
+                <td>display: block;</td>
+            </tr>
+            <tr>
+                <td>.d-lg-block--force</td>
+                <td>display: block !important;</td>
+            </tr>
+            <tr>
+                <td>.d-xl-block</td>
+                <td>display: block;</td>
+            </tr>
+            <tr>
+                <td>.d-xl-block--force</td>
+                <td>display: block !important;</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+
+### Instalação
+Para utilizar as classes de _Display Block_, 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>