@inchurch/matcha-theme 21.3.3 → 22.0.0

package/components/matcha-table-cell.scss

@@ -1,41 +1,74 @@
-@mixin matcha-table-cell-theme($theme) {
-    .matcha-table{
-        .td-with-image,
-        .td-with-checkbox,
-        .td-with-icon,
-        .td-duble-line {
-            display: flex;
-            align-items: center;
-
-            .td-text-aside {
-                display: inline-block;
-                width: calc(100% - 48px);
-            }
-
-            .avatar {
-                width: 48px;
-                min-width: 48px;
-                height: 48px;
-                line-height: 48px;
-                border-width: 0;
-                margin-right: 24px;
-            }
-
-            .thumbnail {
-                width: 72px;
-                min-width: 72px;
-                height: 48px;
-                border-radius: var(--matcha-radius-lg, 8px);
-                margin: 0 8px 0 0;
-
-                &-portrait {
-                    width: 56px;
-                    min-width: 56px;
-                    height: 72px;
-                    border-radius: var(--matcha-radius-lg, 8px);
-                    margin: 0 8px 0 0;
-                }
-            }
-        }
-    }
-}
+@mixin matcha-table-cell-theme($theme) {
+    .matcha-table{
+        .td-with-image,
+        .td-with-checkbox,
+        .td-with-icon,
+        .td-duble-line {
+            display: flex;
+            align-items: center;
+
+            .td-text-aside {
+                display: inline-block;
+                width: calc(100% - 48px);
+            }
+
+            .avatar {
+                width: 48px;
+                min-width: 48px;
+                height: 48px;
+                line-height: 48px;
+                border-width: 0;
+                margin-right: 24px;
+            }
+
+            .thumbnail {
+                width: 72px;
+                min-width: 72px;
+                height: 48px;
+                border-radius: var(--matcha-radius-lg, 8px);
+                margin: 0 8px 0 0;
+
+                &-portrait {
+                    width: 56px;
+                    min-width: 56px;
+                    height: 72px;
+                    border-radius: var(--matcha-radius-lg, 8px);
+                    margin: 0 8px 0 0;
+                }
+            }
+        }
+    }
+}
+
+// =============================================================================
+// 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.
+// =============================================================================
+
+// ── 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;
+    }
+}