@inchurch/matcha-theme 22.0.0 → 22.1.0

package/base/_reset.scss

@@ -2,11 +2,12 @@
     // theme-agnóstico em valor (var); fica per-classe de tema pelo & (pinta o
     // elemento que carrega a classe). $theme vestigial (default ()).
     & {
+        color: var(--matcha-color-fg);
+        background: var(--matcha-color-surface-bg);
+
         *, *:before, *:after {
             box-sizing: border-box;
         }
-        color: var(--matcha-color-fg);
-        background: var(--matcha-color-surface-bg);
     }
 }
 

package/components/matcha-button-toggle.scss

@@ -242,6 +242,7 @@ matcha-button-toggle {
             button[matcha-button],
             a[matcha-button] {
                 &[active] {
+                    @include disabled-solid-button($theme);
 
                     &[outline],
                     &[outline]:not([outline="false"]),
@@ -266,8 +267,6 @@ matcha-button-toggle {
                     &[link="true"] {
                         @include disabled-link-button($theme);
                     }
-
-                    @include disabled-solid-button($theme);
                 }
             }
         }

package/components/matcha-contact.scss

@@ -0,0 +1,35 @@
+// =============================================================================
+// matcha-contact — ícone (whatsapp/telefone) + número, com link wa.me opcional.
+// Top-level (sem mixin): usa só var(--matcha-color-*), que resolve por tema —
+// mesmo padrão de matcha-avatar.scss / matcha-status-pill.scss.
+// =============================================================================
+matcha-contact {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--matcha-space-100, 8px);
+    min-width: 0;
+
+    .matcha-contact__icon.is-whatsapp {
+        --matcha-icon-color: var(--matcha-color-success);
+    }
+
+    .matcha-contact__value {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    // Link wa.me — herda a cor do texto (não vira o azul de link default) e só
+    // sublinha no hover, pra não competir visualmente com o número.
+    .matcha-contact__link {
+        color: inherit;
+        text-decoration: none;
+
+        &:hover { text-decoration: underline; }
+    }
+
+    .matcha-contact__empty {
+        color: var(--matcha-color-text-muted);
+        font-style: italic;
+    }
+}

package/components/matcha-table-cell.scss

@@ -41,34 +41,9 @@
 }
 
 // =============================================================================
-// Família matcha-cell-* (DSV3) — cells de tabela canônicas, seletor de
-// atributo em <td> nativo (td[matcha-cell-<tipo>]). Top-level (fora do mixin
-// acima de propósito): usam só var(--matcha-color-*), que já resolve por
-// tema sem precisar reemitir por @include — mesmo padrão do matcha-avatar.scss.
-//
-// td[matcha-cell-identity] e td[matcha-cell-status] não precisam de CSS aqui:
-// o layout já vem inteiro do matcha-avatar (showName) e do matcha-status-pill.
+// Família matcha-cell-* (DSV3) — cells de tabela canônicas, seletor de atributo
+// em <td> nativo (td[matcha-cell-<tipo>]). Cada cell é um wrapper fino sobre um
+// átomo do DS (identity→matcha-avatar, status→matcha-status-pill,
+// contact→matcha-contact), então o estilo mora no átomo — não aqui. Nenhuma das
+// cells precisa de CSS próprio neste parcial.
 // =============================================================================
-
-// ── td[matcha-cell-contact] — ícone (whatsapp/telefone) + número ───────────
-.matcha-cell-contact {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--matcha-space-100, 8px);
-    min-width: 0;
-
-    &__icon.is-whatsapp {
-        --matcha-icon-color: var(--matcha-color-success);
-    }
-
-    &__value {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    &__empty {
-        color: var(--matcha-color-text-muted);
-        font-style: italic;
-    }
-}

package/main.scss

@@ -89,6 +89,8 @@
 @use "./components/matcha-table" as *; // matcha-table-modern (canon DSV3 1:1 Figma)
 @forward "./components/matcha-table-cell";
 @use "./components/matcha-table-cell" as *; // matcha-table-cell-theme($theme)
+@forward "./components/matcha-contact";
+@use "./components/matcha-contact" as *; // matcha-contact (átomo de exibição de contato)
 @forward "./components/matcha-tooltip";
 @use "./components/matcha-tooltip" as *; // matcha-tooltip-theme($theme)
 @forward "./components/matcha-form-field";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inchurch/matcha-theme",
-  "version": "22.0.0",
+  "version": "22.1.0",
   "description": "Themes for matcha-design-system",
   "main": "main.scss",
   "scripts": {