@inchurch/matcha-theme 21.4.0 → 22.1.0

package/components/matcha-emoji.scss

@@ -1,69 +1,69 @@
-@use "sass:map";
-
-// =============================================================================
-// matcha-emoji.scss — Pastoral sentiment emojis
-// Aligned with Figma matcha/emoji:
-//   9 sentimentos × 3 estilos = 27 variantes
-//   Sentimentos: Feliz, Grato, Abençoado, Doente, Sozinho, Triste, Pouca fé, Cuidado, Angustiado
-//   Estilos: Default (emoji nativo), Outline, Filled
-//   Tamanhos: sm (16px), md (24px), lg (32px)
-// Angular: matcha-emoji
-// =============================================================================
-
-// ── Layout ──────────────────────────────────────────────────────────────────
-
-.matcha-emoji {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  user-select: none;
-}
-
-// ── Sizes ───────────────────────────────────────────────────────────────────
-
-.matcha-emoji--sm {
-  width: var(--matcha-icon-size-sm, 16px);
-  height: var(--matcha-icon-size-sm, 16px);
-  font-size: var(--matcha-icon-size-sm, 16px);
-}
-
-.matcha-emoji--md {
-  width: var(--matcha-icon-size-md, 24px);
-  height: var(--matcha-icon-size-md, 24px);
-  font-size: var(--matcha-icon-size-md, 24px);
-}
-
-.matcha-emoji--lg {
-  width: var(--matcha-icon-size-lg, 32px);
-  height: var(--matcha-icon-size-lg, 32px);
-  font-size: var(--matcha-icon-size-lg, 32px);
-}
-
-// ── Styles ──────────────────────────────────────────────────────────────────
-
-.matcha-emoji--default {
-  // Native emoji — no additional styling needed
-}
-
-.matcha-emoji--outline,
-.matcha-emoji--filled {
-  svg {
-    width: 100%;
-    height: 100%;
-  }
-}
-
-// ── Theme ───────────────────────────────────────────────────────────────────
-
-@mixin matcha-emoji-theme($theme) {
-  .matcha-emoji--outline svg {
-    fill: none;
-    stroke: var(--matcha-color-fg);
-    stroke-width: 1.5;
-  }
-
-  .matcha-emoji--filled svg {
-    fill: var(--matcha-color-fg);
-  }
-}
+@use "sass:map";
+
+// =============================================================================
+// matcha-emoji.scss — Pastoral sentiment emojis
+// Aligned with Figma matcha/emoji:
+//   9 sentimentos × 3 estilos = 27 variantes
+//   Sentimentos: Feliz, Grato, Abençoado, Doente, Sozinho, Triste, Pouca fé, Cuidado, Angustiado
+//   Estilos: Default (emoji nativo), Outline, Filled
+//   Tamanhos: sm (16px), md (24px), lg (32px)
+// Angular: matcha-emoji
+// =============================================================================
+
+// ── Layout ──────────────────────────────────────────────────────────────────
+
+.matcha-emoji {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  user-select: none;
+}
+
+// ── Sizes ───────────────────────────────────────────────────────────────────
+
+.matcha-emoji--sm {
+  width: var(--matcha-icon-size-sm, 16px);
+  height: var(--matcha-icon-size-sm, 16px);
+  font-size: var(--matcha-icon-size-sm, 16px);
+}
+
+.matcha-emoji--md {
+  width: var(--matcha-icon-size-md, 24px);
+  height: var(--matcha-icon-size-md, 24px);
+  font-size: var(--matcha-icon-size-md, 24px);
+}
+
+.matcha-emoji--lg {
+  width: var(--matcha-icon-size-lg, 32px);
+  height: var(--matcha-icon-size-lg, 32px);
+  font-size: var(--matcha-icon-size-lg, 32px);
+}
+
+// ── Styles ──────────────────────────────────────────────────────────────────
+
+.matcha-emoji--default {
+  // Native emoji — no additional styling needed
+}
+
+.matcha-emoji--outline,
+.matcha-emoji--filled {
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+// ── Theme ───────────────────────────────────────────────────────────────────
+
+@mixin matcha-emoji-theme($theme) {
+  .matcha-emoji--outline svg {
+    fill: none;
+    stroke: var(--matcha-color-fg);
+    stroke-width: 1.5;
+  }
+
+  .matcha-emoji--filled svg {
+    fill: var(--matcha-color-fg);
+  }
+}

package/components/matcha-empty-state.scss

@@ -1,230 +1,230 @@
-// =============================================================================
-// matcha-empty-state.scss — Figma DSV3 matcha/empty-state (14935:130)
-// 6 variants: Tamanho (Padrão 400/Compacto 280) × Ação (Sim/Não) × Descrição (Sim/Não)
-// + extensão DSV3: variantes semânticas (success/warning/error/info), slot media,
-//   heading level configurável, anúncio aria-live opt-in.
-// =============================================================================
-
-// ── Structural ──────────────────────────────────────────────────────────────
-
-matcha-empty-state {
-    display:         flex;
-    flex-direction:  column;
-    align-items:     center;
-    justify-content: center;
-    gap:             var(--matcha-space-200, 16px);
-    width:           400px;
-    max-width:       100%;
-    // Centraliza o bloco horizontalmente quando o parent é mais largo que 400px
-    // (canon Figma DSV3 — empty-state sempre no centro do container).
-    margin-inline:   auto;
-    padding:         var(--matcha-space-600, 48px) var(--matcha-space-400, 32px);
-    box-sizing:      border-box;
-    text-align:      center;
-}
-
-// ── Container do ícone — 64×64 com bg disabled e opacity 0.4 ────────────────
-.matcha-empty-state__icon-container {
-    display:          flex;
-    align-items:      center;
-    justify-content:  center;
-    flex-shrink:      0;
-    width:            64px;
-    height:           64px;
-    border-radius:    var(--matcha-radius-xl, 16px);
-    background-color: var(--matcha-color-interaction-disabled-bg, #282C34);
-    opacity:          var(--matcha-opacity-overlay-soft, 0.4);
-    overflow:         hidden;
-}
-
-// ── Ícone dentro do container — 28×28 (Figma exato) ────────────────────────
-matcha-empty-state .matcha-empty-state__icon-container .matcha-empty-state__icon,
-matcha-empty-state .matcha-empty-state__icon-container matcha-icon {
-    font-size:   28px;
-    width:       28px;
-    height:      28px;
-    line-height: 28px;
-    color:       var(--matcha-color-text-primary, #E8EAED);
-}
-
-// ── Variantes semânticas — colorem o container do ícone ────────────────────
-matcha-empty-state[variant="success"] .matcha-empty-state__icon-container {
-    background-color: var(--matcha-color-success, #4caf50);
-}
-matcha-empty-state[variant="warning"] .matcha-empty-state__icon-container {
-    background-color: var(--matcha-color-warn, #ff9800);
-}
-matcha-empty-state[variant="error"] .matcha-empty-state__icon-container {
-    background-color: var(--matcha-color-danger, #f44336);
-}
-matcha-empty-state[variant="info"] .matcha-empty-state__icon-container {
-    background-color: var(--matcha-color-info, #64B5F6);
-}
-
-// Em variantes semânticas, ícone fica branco/contraste, sem opacity baixa
-matcha-empty-state[variant]:not([variant="default"]) .matcha-empty-state__icon-container {
-    opacity: 1;
-}
-matcha-empty-state[variant]:not([variant="default"]) .matcha-empty-state__icon-container .matcha-empty-state__icon,
-matcha-empty-state[variant]:not([variant="default"]) .matcha-empty-state__icon-container matcha-icon {
-    color: var(--matcha-color-on-feedback, #FFFFFF);
-}
-
-// Pareamento canônico por variant — usa o token *-contrast de cada feedback,
-// que respeita WCAG AA em ambos os themes (preto em dark / branco em light
-// pros tons claros; e o inverso pros tons escuros).
-// !important: a regra global do matcha-icon (`matcha-icon { color: ... }`)
-// tem mesma specificity que esses descendant selectors em alguns casos, e o
-// browser cai no source order. !important garante que o contrast vence sempre.
-matcha-empty-state[variant="success"] .matcha-empty-state__icon-container .matcha-empty-state__icon,
-matcha-empty-state[variant="success"] .matcha-empty-state__icon-container matcha-icon {
-    color: var(--matcha-color-success-contrast) !important;
-}
-matcha-empty-state[variant="warning"] .matcha-empty-state__icon-container .matcha-empty-state__icon,
-matcha-empty-state[variant="warning"] .matcha-empty-state__icon-container matcha-icon {
-    color: var(--matcha-color-warn-contrast) !important;
-}
-matcha-empty-state[variant="error"] .matcha-empty-state__icon-container .matcha-empty-state__icon,
-matcha-empty-state[variant="error"] .matcha-empty-state__icon-container matcha-icon {
-    color: var(--matcha-color-danger-contrast) !important;
-}
-matcha-empty-state[variant="info"] .matcha-empty-state__icon-container .matcha-empty-state__icon,
-matcha-empty-state[variant="info"] .matcha-empty-state__icon-container matcha-icon {
-    color: var(--matcha-color-info-contrast) !important;
-}
-
-// ── Slot media (ilustração custom) — 64×64 default, 48×48 compact ──────────
-matcha-empty-state [matchaEmptyStateMedia] {
-    display:        block;
-    flex-shrink:    0;
-    max-width:      120px;
-    max-height:     120px;
-    object-fit:     contain;
-}
-
-// Quando slot media presente, esconde o container do ícone padrão
-matcha-empty-state:has([matchaEmptyStateMedia]) .matcha-empty-state__icon-container {
-    display: none;
-}
-
-// ── Bloco texto — título + descrição ────────────────────────────────────────
-.matcha-empty-state__text {
-    display:        flex;
-    flex-direction: column;
-    align-items:    center;
-    gap:            var(--matcha-space-100, 8px);
-    width:          100%;
-}
-
-// ── Título — matcha/text/button-lg (16/600/22, letter-spacing 0.2) ─────────
-.matcha-empty-state__title {
-    font-family:    var(--matcha-font-family);
-    font-size:      var(--matcha-text-label-lg, 16px);
-    font-weight:    var(--matcha-weight-semibold, 600);
-    line-height:    var(--matcha-leading-label-lg, 22px);
-    letter-spacing: 0.2px;
-    color:          var(--matcha-color-text-primary, #E8EAED);
-    margin:         0;
-    max-width:      336px;
-}
-
-// ── Descrição — matcha/text/body-md (14/400/20) — w fixo 210px (Figma) ─────
-.matcha-empty-state__description {
-    font-family: var(--matcha-font-family);
-    font-size:   var(--matcha-text-body-md, 14px);
-    font-weight: var(--matcha-weight-regular, 400);
-    line-height: var(--matcha-leading-body-md, 20px);
-    color:       var(--matcha-color-text-secondary);
-    margin:      0;
-    max-width:   210px;
-}
-
-// ── Slot da ação — suporta múltiplas ações com gap padrão ──────────────────
-.matcha-empty-state__action {
-    display:         inline-flex;
-    flex-wrap:       wrap;
-    align-items:     center;
-    justify-content: center;
-    gap:             var(--matcha-space-100, 8px);
-}
-
-// Esconde container vazio (sem ng-content projetado)
-.matcha-empty-state__action:empty {
-    display: none;
-}
-
-// ── Compact variant — 280px largura, ícone menor, padding reduzido ─────────
-matcha-empty-state[size="compact"],
-matcha-empty-state.matcha-empty-state--compact {
-    width:   280px;
-    padding: var(--matcha-space-300, 24px) var(--matcha-space-200, 16px);
-    gap:     var(--matcha-space-150, 12px);
-
-    .matcha-empty-state__icon-container {
-        width:         48px;
-        height:        48px;
-        border-radius: var(--matcha-radius-lg, 12px);
-    }
-
-    .matcha-empty-state__icon,
-    matcha-icon.matcha-empty-state__icon {
-        font-size:   20px;
-        width:       20px;
-        height:      20px;
-        line-height: 20px;
-    }
-
-    .matcha-empty-state__title {
-        font-size:   var(--matcha-text-body-md, 14px);
-        line-height: var(--matcha-leading-body-md, 20px);
-        max-width:   240px;
-    }
-
-    .matcha-empty-state__description {
-        max-width: 240px;
-    }
-}
-
-// ── Responsive: telas pequenas reduzem padding lateral ─────────────────────
-@media (max-width: 479px) {
-    matcha-empty-state:not([size="compact"]):not(.matcha-empty-state--compact) {
-        padding: var(--matcha-space-400, 32px) var(--matcha-space-250, 20px);
-    }
-}
-
-// =============================================================================
-// Theme mixin — vazia. Tudo via CSS custom properties globais.
-// =============================================================================
-
-@mixin matcha-empty-state-theme($theme) {
-    // Sem overrides — tokens globais bastam.
-}
-
-// ── Forced colors ──
-@media (forced-colors: active) {
-    matcha-empty-state {
-        .matcha-empty-state__icon-container {
-            background: Canvas !important;
-            border: 1px solid CanvasText !important;
-            opacity: 1 !important;
-
-            matcha-icon { color: CanvasText !important; }
-        }
-    }
-}
-
-// ── Reduced motion ──
-@media (prefers-reduced-motion: reduce) {
-    matcha-empty-state * {
-        transition: none !important;
-        animation: none !important;
-    }
-}
-
-// ── Print ──
-// Empty state é informacional — mantém visível, ação pode hide.
-@media print {
-    matcha-empty-state .matcha-empty-state__action {
-        display: none !important;
-    }
-}
+// =============================================================================
+// matcha-empty-state.scss — Figma DSV3 matcha/empty-state (14935:130)
+// 6 variants: Tamanho (Padrão 400/Compacto 280) × Ação (Sim/Não) × Descrição (Sim/Não)
+// + extensão DSV3: variantes semânticas (success/warning/error/info), slot media,
+//   heading level configurável, anúncio aria-live opt-in.
+// =============================================================================
+
+// ── Structural ──────────────────────────────────────────────────────────────
+
+matcha-empty-state {
+    display:         flex;
+    flex-direction:  column;
+    align-items:     center;
+    justify-content: center;
+    gap:             var(--matcha-space-200, 16px);
+    width:           400px;
+    max-width:       100%;
+    // Centraliza o bloco horizontalmente quando o parent é mais largo que 400px
+    // (canon Figma DSV3 — empty-state sempre no centro do container).
+    margin-inline:   auto;
+    padding:         var(--matcha-space-600, 48px) var(--matcha-space-400, 32px);
+    box-sizing:      border-box;
+    text-align:      center;
+}
+
+// ── Container do ícone — 64×64 com bg disabled e opacity 0.4 ────────────────
+.matcha-empty-state__icon-container {
+    display:          flex;
+    align-items:      center;
+    justify-content:  center;
+    flex-shrink:      0;
+    width:            64px;
+    height:           64px;
+    border-radius:    var(--matcha-radius-xl, 16px);
+    background-color: var(--matcha-color-interaction-disabled-bg, #282C34);
+    opacity:          var(--matcha-opacity-overlay-soft, 0.4);
+    overflow:         hidden;
+}
+
+// ── Ícone dentro do container — 28×28 (Figma exato) ────────────────────────
+matcha-empty-state .matcha-empty-state__icon-container .matcha-empty-state__icon,
+matcha-empty-state .matcha-empty-state__icon-container matcha-icon {
+    font-size:   28px;
+    width:       28px;
+    height:      28px;
+    line-height: 28px;
+    color:       var(--matcha-color-text-primary, #E8EAED);
+}
+
+// ── Variantes semânticas — colorem o container do ícone ────────────────────
+matcha-empty-state[variant="success"] .matcha-empty-state__icon-container {
+    background-color: var(--matcha-color-success, #4caf50);
+}
+matcha-empty-state[variant="warning"] .matcha-empty-state__icon-container {
+    background-color: var(--matcha-color-warn, #ff9800);
+}
+matcha-empty-state[variant="error"] .matcha-empty-state__icon-container {
+    background-color: var(--matcha-color-danger, #f44336);
+}
+matcha-empty-state[variant="info"] .matcha-empty-state__icon-container {
+    background-color: var(--matcha-color-info, #64B5F6);
+}
+
+// Em variantes semânticas, ícone fica branco/contraste, sem opacity baixa
+matcha-empty-state[variant]:not([variant="default"]) .matcha-empty-state__icon-container {
+    opacity: 1;
+}
+matcha-empty-state[variant]:not([variant="default"]) .matcha-empty-state__icon-container .matcha-empty-state__icon,
+matcha-empty-state[variant]:not([variant="default"]) .matcha-empty-state__icon-container matcha-icon {
+    color: var(--matcha-color-on-feedback, #FFFFFF);
+}
+
+// Pareamento canônico por variant — usa o token *-contrast de cada feedback,
+// que respeita WCAG AA em ambos os themes (preto em dark / branco em light
+// pros tons claros; e o inverso pros tons escuros).
+// !important: a regra global do matcha-icon (`matcha-icon { color: ... }`)
+// tem mesma specificity que esses descendant selectors em alguns casos, e o
+// browser cai no source order. !important garante que o contrast vence sempre.
+matcha-empty-state[variant="success"] .matcha-empty-state__icon-container .matcha-empty-state__icon,
+matcha-empty-state[variant="success"] .matcha-empty-state__icon-container matcha-icon {
+    color: var(--matcha-color-success-contrast) !important;
+}
+matcha-empty-state[variant="warning"] .matcha-empty-state__icon-container .matcha-empty-state__icon,
+matcha-empty-state[variant="warning"] .matcha-empty-state__icon-container matcha-icon {
+    color: var(--matcha-color-warn-contrast) !important;
+}
+matcha-empty-state[variant="error"] .matcha-empty-state__icon-container .matcha-empty-state__icon,
+matcha-empty-state[variant="error"] .matcha-empty-state__icon-container matcha-icon {
+    color: var(--matcha-color-danger-contrast) !important;
+}
+matcha-empty-state[variant="info"] .matcha-empty-state__icon-container .matcha-empty-state__icon,
+matcha-empty-state[variant="info"] .matcha-empty-state__icon-container matcha-icon {
+    color: var(--matcha-color-info-contrast) !important;
+}
+
+// ── Slot media (ilustração custom) — 64×64 default, 48×48 compact ──────────
+matcha-empty-state [matchaEmptyStateMedia] {
+    display:        block;
+    flex-shrink:    0;
+    max-width:      120px;
+    max-height:     120px;
+    object-fit:     contain;
+}
+
+// Quando slot media presente, esconde o container do ícone padrão
+matcha-empty-state:has([matchaEmptyStateMedia]) .matcha-empty-state__icon-container {
+    display: none;
+}
+
+// ── Bloco texto — título + descrição ────────────────────────────────────────
+.matcha-empty-state__text {
+    display:        flex;
+    flex-direction: column;
+    align-items:    center;
+    gap:            var(--matcha-space-100, 8px);
+    width:          100%;
+}
+
+// ── Título — matcha/text/button-lg (16/600/22, letter-spacing 0.2) ─────────
+.matcha-empty-state__title {
+    font-family:    var(--matcha-font-family);
+    font-size:      var(--matcha-text-label-lg, 16px);
+    font-weight:    var(--matcha-weight-semibold, 600);
+    line-height:    var(--matcha-leading-label-lg, 22px);
+    letter-spacing: 0.2px;
+    color:          var(--matcha-color-text-primary, #E8EAED);
+    margin:         0;
+    max-width:      336px;
+}
+
+// ── Descrição — matcha/text/body-md (14/400/20) — w fixo 210px (Figma) ─────
+.matcha-empty-state__description {
+    font-family: var(--matcha-font-family);
+    font-size:   var(--matcha-text-body-md, 14px);
+    font-weight: var(--matcha-weight-regular, 400);
+    line-height: var(--matcha-leading-body-md, 20px);
+    color:       var(--matcha-color-text-secondary);
+    margin:      0;
+    max-width:   210px;
+}
+
+// ── Slot da ação — suporta múltiplas ações com gap padrão ──────────────────
+.matcha-empty-state__action {
+    display:         inline-flex;
+    flex-wrap:       wrap;
+    align-items:     center;
+    justify-content: center;
+    gap:             var(--matcha-space-100, 8px);
+}
+
+// Esconde container vazio (sem ng-content projetado)
+.matcha-empty-state__action:empty {
+    display: none;
+}
+
+// ── Compact variant — 280px largura, ícone menor, padding reduzido ─────────
+matcha-empty-state[size="compact"],
+matcha-empty-state.matcha-empty-state--compact {
+    width:   280px;
+    padding: var(--matcha-space-300, 24px) var(--matcha-space-200, 16px);
+    gap:     var(--matcha-space-150, 12px);
+
+    .matcha-empty-state__icon-container {
+        width:         48px;
+        height:        48px;
+        border-radius: var(--matcha-radius-lg, 12px);
+    }
+
+    .matcha-empty-state__icon,
+    matcha-icon.matcha-empty-state__icon {
+        font-size:   20px;
+        width:       20px;
+        height:      20px;
+        line-height: 20px;
+    }
+
+    .matcha-empty-state__title {
+        font-size:   var(--matcha-text-body-md, 14px);
+        line-height: var(--matcha-leading-body-md, 20px);
+        max-width:   240px;
+    }
+
+    .matcha-empty-state__description {
+        max-width: 240px;
+    }
+}
+
+// ── Responsive: telas pequenas reduzem padding lateral ─────────────────────
+@media (max-width: 479px) {
+    matcha-empty-state:not([size="compact"]):not(.matcha-empty-state--compact) {
+        padding: var(--matcha-space-400, 32px) var(--matcha-space-250, 20px);
+    }
+}
+
+// =============================================================================
+// Theme mixin — vazia. Tudo via CSS custom properties globais.
+// =============================================================================
+
+@mixin matcha-empty-state-theme($theme) {
+    // Sem overrides — tokens globais bastam.
+}
+
+// ── Forced colors ──
+@media (forced-colors: active) {
+    matcha-empty-state {
+        .matcha-empty-state__icon-container {
+            background: Canvas !important;
+            border: 1px solid CanvasText !important;
+            opacity: 1 !important;
+
+            matcha-icon { color: CanvasText !important; }
+        }
+    }
+}
+
+// ── Reduced motion ──
+@media (prefers-reduced-motion: reduce) {
+    matcha-empty-state * {
+        transition: none !important;
+        animation: none !important;
+    }
+}
+
+// ── Print ──
+// Empty state é informacional — mantém visível, ação pode hide.
+@media print {
+    matcha-empty-state .matcha-empty-state__action {
+        display: none !important;
+    }
+}