matcha-components 1.0.6 → 1.0.8

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

@@ -1,17 +1,17 @@
+import { Meta } from "@storybook/addon-docs";
 
-
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Fundamentos / Cores / Base / Yellow"/>
+<Meta title="Fundamentos / Cores / 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 border-radius-8 overflow-hidden background-surface">
-            <div class="p-8 base-yellow"><span class="i-matcha-special-need"></span>.base-yellow</div>
-            <div class="p-8 background-yellow-alpha">.background-yellow-alpha</div>
+            <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 border-radius-8 overflow-hidden background-surface">
@@ -68,20 +68,22 @@ Nesta seção, apresentamos uma lista abrangente de todas as classes CSS associa
             <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 ```.base-<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.
+    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="d-flex-column">
-        <div class="elevation-z-1 matcha-card base-yellow">
+        <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="d-flex-column pt-16">
                 ```css
-                    .base-yellow
+                    .yellow
                 ```
             </div>
         </div>
@@ -136,6 +138,7 @@ A seção "Cores Dinâmicas" apresenta uma coleção versátil de cores que se a
 ---
 
 ### 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

package/src/foundation/colors/base-colors.mdx

@@ -1,18 +1,20 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from "@storybook/addon-docs";
 
-<Meta title="Fundamentos / Cores / Base"/>
+<Meta title="Fundamentos / Cores / Base" />
 
 # Base
+
 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.
 
 ---
 
 ### Base 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="d-flex-column elevation-z-1 border-radius-8 overflow-hidden background-surface-alpha p-0">
-        <div class="p-8 base-red">.base-red</div>
+        <div class="p-8 red">.red</div>
         <div class="p-8 background-red">.background-red</div>
         <div class="p-8 background-red-alpha">.background-red-alpha</div>
         <div class="p-8 color-red">.color-red</div>
@@ -20,7 +22,7 @@ Essas são as cores base do Matcha, elas são usadas para toasts, snackbars, inf
     </div>
 
     <div class="d-flex-column elevation-z-1 border-radius-8 overflow-hidden background-surface-alpha p-0">
-        <div class="p-8 base-pink">.base-pink</div>
+        <div class="p-8 pink">.pink</div>
         <div class="p-8 background-pink">.background-pink</div>
         <div class="p-8 background-pink-alpha">.background-pink-alpha</div>
         <div class="p-8 color-pink">.color-pink</div>
@@ -28,7 +30,7 @@ Essas são as cores base do Matcha, elas são usadas para toasts, snackbars, inf
     </div>
 
     <div class="d-flex-column elevation-z-1 border-radius-8 overflow-hidden background-surface-alpha p-0">
-        <div class="p-8 base-purple">.base-purple</div>
+        <div class="p-8 purple">.purple</div>
         <div class="p-8 background-purple">.background-purple</div>
         <div class="p-8 background-purple-alpha">.background-purple-alpha</div>
         <div class="p-8 color-purple">.color-purple</div>
@@ -36,7 +38,7 @@ Essas são as cores base do Matcha, elas são usadas para toasts, snackbars, inf
     </div>
 
     <div class="d-flex-column elevation-z-1 border-radius-8 overflow-hidden background-surface-alpha p-0">
-        <div class="p-8 base-deep-purple">.base-deep-purple</div>
+        <div class="p-8 deep-purple">.deep-purple</div>
         <div class="p-8 background-deep-purple">.background-deep-purple</div>
         <div class="p-8 background-deep-purple-alpha">.background-deep-purple-alpha</div>
         <div class="p-8 color-deep-purple">.color-deep-purple</div>
@@ -44,7 +46,7 @@ Essas são as cores base do Matcha, elas são usadas para toasts, snackbars, inf
     </div>
 
     <div class="d-flex-column elevation-z-1 border-radius-8 overflow-hidden background-surface-alpha p-0">
-        <div class="p-8 base-indigo">.base-indigo</div>
+        <div class="p-8 indigo">.indigo</div>
         <div class="p-8 background-indigo">.background-indigo</div>
         <div class="p-8 background-indigo-alpha">.background-indigo-alpha</div>
         <div class="p-8 color-indigo">.color-indigo</div>
@@ -52,7 +54,7 @@ Essas são as cores base do Matcha, elas são usadas para toasts, snackbars, inf
     </div>
 
     <div class="d-flex-column elevation-z-1 border-radius-8 overflow-hidden background-surface-alpha p-0">
-        <div class="p-8 base-blue">.base-blue</div>
+        <div class="p-8 blue">.blue</div>
         <div class="p-8 background-blue">.background-blue</div>
         <div class="p-8 background-blue-alpha">.background-blue-alpha</div>
         <div class="p-8 color-blue">.color-blue</div>
@@ -60,7 +62,7 @@ Essas são as cores base do Matcha, elas são usadas para toasts, snackbars, inf
     </div>
 
     <div class="d-flex-column elevation-z-1 border-radius-8 overflow-hidden background-surface-alpha p-0">
-        <div class="p-8 base-light-blue">.base-light-blue</div>
+        <div class="p-8 light-blue">.light-blue</div>
         <div class="p-8 background-light-blue">.background-light-blue</div>
         <div class="p-8 background-light-blue-alpha">.background-light-blue-alpha</div>
         <div class="p-8 color-light-blue">.color-light-blue</div>
@@ -68,7 +70,7 @@ Essas são as cores base do Matcha, elas são usadas para toasts, snackbars, inf
     </div>
 
     <div class="d-flex-column elevation-z-1 border-radius-8 overflow-hidden background-surface-alpha p-0">
-        <div class="p-8 base-cyan">.base-cyan</div>
+        <div class="p-8 cyan">.cyan</div>
         <div class="p-8 background-cyan">.background-cyan</div>
         <div class="p-8 background-cyan-alpha">.background-cyan-alpha</div>
         <div class="p-8 color-cyan">.color-cyan</div>
@@ -76,7 +78,7 @@ Essas são as cores base do Matcha, elas são usadas para toasts, snackbars, inf
     </div>
 
     <div class="d-flex-column elevation-z-1 border-radius-8 overflow-hidden background-surface-alpha p-0">
-        <div class="p-8 base-teal">.base-teal</div>
+        <div class="p-8 teal">.teal</div>
         <div class="p-8 background-teal">.background-teal</div>
         <div class="p-8 background-teal-alpha">.background-teal-alpha</div>
         <div class="p-8 color-teal">.color-teal</div>
@@ -84,7 +86,7 @@ Essas são as cores base do Matcha, elas são usadas para toasts, snackbars, inf
     </div>
 
     <div class="d-flex-column elevation-z-1 border-radius-8 overflow-hidden background-surface-alpha p-0">
-        <div class="p-8 base-green">.base-green</div>
+        <div class="p-8 green">.green</div>
         <div class="p-8 background-green">.background-green</div>
         <div class="p-8 background-green-alpha">.background-green-alpha</div>
         <div class="p-8 color-green">.color-green</div>
@@ -92,7 +94,7 @@ Essas são as cores base do Matcha, elas são usadas para toasts, snackbars, inf
     </div>
 
     <div class="d-flex-column elevation-z-1 border-radius-8 overflow-hidden background-surface-alpha p-0">
-        <div class="p-8 base-light-green">.base-light-green</div>
+        <div class="p-8 light-green">.light-green</div>
         <div class="p-8 background-light-green">.background-light-green</div>
         <div class="p-8 background-light-green-alpha">.background-light-green-alpha</div>
         <div class="p-8 color-light-green">.color-light-green</div>
@@ -100,7 +102,7 @@ Essas são as cores base do Matcha, elas são usadas para toasts, snackbars, inf
     </div>
 
     <div class="d-flex-column elevation-z-1 border-radius-8 overflow-hidden background-surface-alpha p-0">
-        <div class="p-8 base-lime">.base-lime</div>
+        <div class="p-8 lime">.lime</div>
         <div class="p-8 background-lime">.background-lime</div>
         <div class="p-8 background-lime-alpha">.background-lime-alpha</div>
         <div class="p-8 color-lime">.color-lime</div>
@@ -108,7 +110,7 @@ Essas são as cores base do Matcha, elas são usadas para toasts, snackbars, inf
     </div>
 
     <div class="d-flex-column elevation-z-1 border-radius-8 overflow-hidden background-surface-alpha p-0">
-        <div class="p-8 base-yellow">.base-yellow</div>
+        <div class="p-8 yellow">.yellow</div>
         <div class="p-8 background-yellow">.background-yellow</div>
         <div class="p-8 background-yellow-alpha">.background-yellow-alpha</div>
         <div class="p-8 color-yellow">.color-yellow</div>
@@ -116,7 +118,7 @@ Essas são as cores base do Matcha, elas são usadas para toasts, snackbars, inf
     </div>
 
     <div class="d-flex-column elevation-z-1 border-radius-8 overflow-hidden background-surface-alpha p-0">
-        <div class="p-8 base-amber">.base-amber</div>
+        <div class="p-8 amber">.amber</div>
         <div class="p-8 background-amber">.background-amber</div>
         <div class="p-8 background-amber-alpha">.background-amber-alpha</div>
         <div class="p-8 color-amber">.color-amber</div>
@@ -124,7 +126,7 @@ Essas são as cores base do Matcha, elas são usadas para toasts, snackbars, inf
     </div>
 
     <div class="d-flex-column elevation-z-1 border-radius-8 overflow-hidden background-surface-alpha p-0">
-        <div class="p-8 base-orange">.base-orange</div>
+        <div class="p-8 orange">.orange</div>
         <div class="p-8 background-orange">.background-orange</div>
         <div class="p-8 background-orange-alpha">.background-orange-alpha</div>
         <div class="p-8 color-orange">.color-orange</div>
@@ -132,10 +134,11 @@ Essas são as cores base do Matcha, elas são usadas para toasts, snackbars, inf
     </div>
 
     <div class="d-flex-column elevation-z-1 border-radius-8 overflow-hidden background-surface-alpha p-0">
-        <div class="p-8 base-deep-orange">.base-deep-orange</div>
+        <div class="p-8 deep-orange">.deep-orange</div>
         <div class="p-8 background-deep-orange">.background-deep-orange</div>
         <div class="p-8 background-deep-orange-alpha">.background-deep-orange-alpha</div>
         <div class="p-8 color-deep-orange">.color-deep-orange</div>
         <div class="p-8 background-surface d-flex-center-center">[Ver Mais](/docs/fundamentos-cores-base-deep-orange--docs)</div>
     </div>
+
 </div>

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

@@ -1,17 +1,17 @@
+import { Meta } from "@storybook/addon-docs";
 
-
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Fundamentos / Cores / Tema / Accent"/>
+<Meta title="Fundamentos / Cores / 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 border-radius-8 overflow-hidden background-surface">
-            <div class="p-8 base-accent"><span class="i-matcha-special-need"></span>.base-accent</div>
-            <div class="p-8 background-accent-alpha">.background-accent-alpha</div>
+            <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 border-radius-8 overflow-hidden background-surface">
@@ -68,20 +68,22 @@ Nesta seção, apresentamos uma lista abrangente de todas as classes CSS associa
             <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 ```.base-<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.
+    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="d-flex-column">
-        <div class="elevation-z-1 matcha-card base-accent">
+        <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="d-flex-column pt-16">
                 ```css
-                    .base-accent
+                    .accent
                 ```
             </div>
         </div>
@@ -136,6 +138,7 @@ A seção "Cores Dinâmicas" apresenta uma coleção versátil de cores que se a
 ---
 
 ### 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

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

@@ -1,17 +1,17 @@
+import { Meta } from "@storybook/addon-docs";
 
-
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Fundamentos / Cores / Tema / Primary"/>
+<Meta title="Fundamentos / Cores / 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 border-radius-8 overflow-hidden background-surface">
-            <div class="p-8 base-primary"><span class="i-matcha-special-need"></span>.base-primary</div>
-            <div class="p-8 background-primary-alpha">.background-primary-alpha</div>
+            <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 border-radius-8 overflow-hidden background-surface">
@@ -68,20 +68,22 @@ Nesta seção, apresentamos uma lista abrangente de todas as classes CSS associa
             <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 ```.base-<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.
+    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="d-flex-column">
-        <div class="elevation-z-1 matcha-card base-primary">
+        <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="d-flex-column pt-16">
                 ```css
-                    .base-primary
+                    .primary
                 ```
             </div>
         </div>
@@ -136,6 +138,7 @@ A seção "Cores Dinâmicas" apresenta uma coleção versátil de cores que se a
 ---
 
 ### 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

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

@@ -1,17 +1,17 @@
+import { Meta } from "@storybook/addon-docs";
 
-
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Fundamentos / Cores / Tema / Warn"/>
+<Meta title="Fundamentos / Cores / 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 border-radius-8 overflow-hidden background-surface">
-            <div class="p-8 base-warn"><span class="i-matcha-special-need"></span>.base-warn</div>
-            <div class="p-8 background-warn-alpha">.background-warn-alpha</div>
+            <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 border-radius-8 overflow-hidden background-surface">
@@ -68,20 +68,22 @@ Nesta seção, apresentamos uma lista abrangente de todas as classes CSS associa
             <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 ```.base-<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.
+    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="d-flex-column">
-        <div class="elevation-z-1 matcha-card base-warn">
+        <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="d-flex-column pt-16">
                 ```css
-                    .base-warn
+                    .warn
                 ```
             </div>
         </div>
@@ -136,6 +138,7 @@ A seção "Cores Dinâmicas" apresenta uma coleção versátil de cores que se a
 ---
 
 ### 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

package/src/foundation/colors/theme-colors.mdx

@@ -1,21 +1,21 @@
+import { Meta } from "@storybook/addon-docs";
 
-
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Fundamentos / Cores / Tema"/>
+<Meta title="Fundamentos / Cores / Tema" />
 
 # Cores
+
 Aqui você encontrará uma lista com as cores base do Matcha e as suas respectivas classes. Cada card exemplifica uma cor, e cada cor tem uma classe que pode ser usada para aplicar a mesma em qualquer elemento.
 
 ---
 
 ### Theme Colors
+
 Essas são as cores do tema do Matcha, elas são usadas para customizar todos os componente do Matcha, como botões, inputs, selects, checkboxes, radios, switches e etc.
 
 <div class="grid-md-3 gap-16">
 
     <div class="d-flex-column gap-8">
-        <div class="elevation-z-1 matcha-card color-primary">
+        <div class="elevation-z-1 matcha-card background-surface color-primary">
             <span class="h5">Sample text</span>
             <div class="d-flex-column pt-16">
                 ```css
@@ -24,17 +24,8 @@ Essas são as cores do tema do Matcha, elas são usadas para customizar todos os
             </div>
         </div>
 
-        <div class="elevation-z-1 matcha-card base-primary">
-            <span class="h5"><span class="i-matcha-special-need"></span>Sample text</span>
-            <div class="d-flex-column pt-16">
-                ```css
-                    .base-primary
-                ```
-            </div>
-        </div>
-
         <div class="elevation-z-1 matcha-card primary">
-            <span class="h5">Sample text</span>
+            <span class="h5"><span class="i-matcha-special-need"></span>Sample text</span>
             <div class="d-flex-column pt-16">
                 ```css
                     .primary
@@ -42,6 +33,7 @@ Essas são as cores do tema do Matcha, elas são usadas para customizar todos os
             </div>
         </div>
 
+
         <div class="elevation-z-1 matcha-card background-primary">
             <span class="h5">Sample text</span>
             <div class="d-flex-column pt-16">
@@ -63,7 +55,7 @@ Essas são as cores do tema do Matcha, elas são usadas para customizar todos os
 
     <div class="d-flex-column gap-8">
 
-        <div class="elevation-z-1 matcha-card color-accent">
+        <div class="elevation-z-1 matcha-card background-surface color-accent">
             <span class="h5">Sample text</span>
             <div class="d-flex-column pt-16">
                 ```css
@@ -72,17 +64,8 @@ Essas são as cores do tema do Matcha, elas são usadas para customizar todos os
             </div>
         </div>
 
-        <div class="elevation-z-1 matcha-card base-accent">
-            <span class="h5"><span class="i-matcha-special-need"></span>Sample text</span>
-            <div class="d-flex-column pt-16">
-                ```css
-                    .base-accent
-                ```
-            </div>
-        </div>
-
         <div class="elevation-z-1 matcha-card accent">
-            <span class="h5">Sample text</span>
+            <span class="h5"><span class="i-matcha-special-need"></span>Sample text</span>
             <div class="d-flex-column pt-16">
                 ```css
                     .accent
@@ -110,7 +93,7 @@ Essas são as cores do tema do Matcha, elas são usadas para customizar todos os
     </div>
 
     <div class="d-flex-column gap-8">
-        <div class="elevation-z-1 matcha-card color-warn">
+        <div class="elevation-z-1 matcha-card background-surface color-warn">
             <span class="h5">Sample text</span>
             <div class="d-flex-column pt-16">
                 ```css
@@ -119,17 +102,8 @@ Essas são as cores do tema do Matcha, elas são usadas para customizar todos os
             </div>
         </div>
 
-        <div class="elevation-z-1 matcha-card base-warn">
-            <span class="h5"><span class="i-matcha-special-need"></span>Sample text</span>
-            <div class="d-flex-column pt-16">
-                ```css
-                    .base-warn
-                ```
-            </div>
-        </div>
-
         <div class="elevation-z-1 matcha-card warn">
-            <span class="h5">Sample text</span>
+            <span class="h5"><span class="i-matcha-special-need"></span>Sample text</span>
             <div class="d-flex-column pt-16">
                 ```css
                     .warn