@inchurch/matcha-theme 21.4.0 → 22.1.0

package/components/matcha-flag.scss

@@ -1,103 +1,103 @@
-// =============================================================================
-// matcha-flag.scss — Bandeiras (country) + Pagamento (payment)
-//
-// 1:1 Figma DSV3 (i04CyWczuVctwRjE5VbJh7):
-//   - matcha/flag/country  (3969:15347)  — 24x24 frame, 22x16 flag (2:3)
-//   - matcha/flag/payment  (3205:13569)  — 32x24 SVG card (4:3)
-//
-// API host attrs (set pelo MatchaFlagComponent):
-//   data-set   — country | payment
-//   data-name  — slug (brasil, visa, pix, etc.)
-//   data-size  — sm | md | lg
-//
-// Componentes:
-//   .matcha-flag                — host (inline-flex, alinha + tamanho)
-//   .matcha-flag__emoji         — span unicode (country)
-//   .matcha-flag__svg           — wrapper innerHTML SVG (payment)
-//
-// Usado em: matcha-phone (DDI), forms de pagamento, transaction lists, hero CTA.
-// =============================================================================
-
-@mixin matcha-flag($theme) {
-
-    // ── Host ─────────────────────────────────────────────────────────────────
-    .matcha-flag {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-        overflow: hidden;
-        line-height: 1;
-        // Default size = md (sobrescrito por data-size abaixo)
-        width: var(--matcha-flag-w, 32px);
-        height: var(--matcha-flag-h, 24px);
-        border-radius: var(--matcha-radius-sm, 2px);
-    }
-
-    // ── Emoji (country) ─────────────────────────────────────────────────────
-    // Emoji ocupa o box todo; font-size ditando o tamanho do glyph.
-    .matcha-flag__emoji {
-        font-size: calc(var(--matcha-flag-h, 24px) * 0.95);
-        line-height: 1;
-        // Emoji-style render — força o emoji color (algumas fonts renderizam
-        // o codepoint como texto B&W; emoji color preserva as cores nacionais)
-        font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
-        font-variant-emoji: emoji;
-    }
-
-    // ── SVG (payment) ───────────────────────────────────────────────────────
-    .matcha-flag__svg {
-        display: inline-flex;
-        width: 100%;
-        height: 100%;
-
-        svg {
-            width: 100%;
-            height: 100%;
-            display: block;
-        }
-    }
-
-    // ── Set: country — 2:3 aspect ratio ─────────────────────────────────────
-    .matcha-flag[data-set="country"] {
-        --matcha-flag-w: 22px;
-        --matcha-flag-h: 16px;
-    }
-    .matcha-flag[data-set="country"][data-size="small"],
-    .matcha-flag[data-set="country"][data-size="sm"] {
-        --matcha-flag-w: 16px;
-        --matcha-flag-h: 12px;
-    }
-    .matcha-flag[data-set="country"][data-size="medium"],
-    .matcha-flag[data-set="country"][data-size="md"] {
-        --matcha-flag-w: 22px;
-        --matcha-flag-h: 16px;
-    }
-    .matcha-flag[data-set="country"][data-size="large"],
-    .matcha-flag[data-set="country"][data-size="lg"] {
-        --matcha-flag-w: 32px;
-        --matcha-flag-h: 24px;
-    }
-
-    // ── Set: payment — 4:3 aspect ratio ─────────────────────────────────────
-    .matcha-flag[data-set="payment"] {
-        --matcha-flag-w: 32px;
-        --matcha-flag-h: 24px;
-    }
-    .matcha-flag[data-set="payment"][data-size="small"],
-    .matcha-flag[data-set="payment"][data-size="sm"] {
-        --matcha-flag-w: 24px;
-        --matcha-flag-h: 18px;
-    }
-    .matcha-flag[data-set="payment"][data-size="medium"],
-    .matcha-flag[data-set="payment"][data-size="md"] {
-        --matcha-flag-w: 32px;
-        --matcha-flag-h: 24px;
-    }
-    .matcha-flag[data-set="payment"][data-size="large"],
-    .matcha-flag[data-set="payment"][data-size="lg"] {
-        --matcha-flag-w: 48px;
-        --matcha-flag-h: 36px;
-        border-radius: var(--matcha-radius-md, 4px);
-    }
-}
+// =============================================================================
+// matcha-flag.scss — Bandeiras (country) + Pagamento (payment)
+//
+// 1:1 Figma DSV3 (i04CyWczuVctwRjE5VbJh7):
+//   - matcha/flag/country  (3969:15347)  — 24x24 frame, 22x16 flag (2:3)
+//   - matcha/flag/payment  (3205:13569)  — 32x24 SVG card (4:3)
+//
+// API host attrs (set pelo MatchaFlagComponent):
+//   data-set   — country | payment
+//   data-name  — slug (brasil, visa, pix, etc.)
+//   data-size  — sm | md | lg
+//
+// Componentes:
+//   .matcha-flag                — host (inline-flex, alinha + tamanho)
+//   .matcha-flag__emoji         — span unicode (country)
+//   .matcha-flag__svg           — wrapper innerHTML SVG (payment)
+//
+// Usado em: matcha-phone (DDI), forms de pagamento, transaction lists, hero CTA.
+// =============================================================================
+
+@mixin matcha-flag($theme) {
+
+    // ── Host ─────────────────────────────────────────────────────────────────
+    .matcha-flag {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        overflow: hidden;
+        line-height: 1;
+        // Default size = md (sobrescrito por data-size abaixo)
+        width: var(--matcha-flag-w, 32px);
+        height: var(--matcha-flag-h, 24px);
+        border-radius: var(--matcha-radius-sm, 2px);
+    }
+
+    // ── Emoji (country) ─────────────────────────────────────────────────────
+    // Emoji ocupa o box todo; font-size ditando o tamanho do glyph.
+    .matcha-flag__emoji {
+        font-size: calc(var(--matcha-flag-h, 24px) * 0.95);
+        line-height: 1;
+        // Emoji-style render — força o emoji color (algumas fonts renderizam
+        // o codepoint como texto B&W; emoji color preserva as cores nacionais)
+        font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
+        font-variant-emoji: emoji;
+    }
+
+    // ── SVG (payment) ───────────────────────────────────────────────────────
+    .matcha-flag__svg {
+        display: inline-flex;
+        width: 100%;
+        height: 100%;
+
+        svg {
+            width: 100%;
+            height: 100%;
+            display: block;
+        }
+    }
+
+    // ── Set: country — 2:3 aspect ratio ─────────────────────────────────────
+    .matcha-flag[data-set="country"] {
+        --matcha-flag-w: 22px;
+        --matcha-flag-h: 16px;
+    }
+    .matcha-flag[data-set="country"][data-size="small"],
+    .matcha-flag[data-set="country"][data-size="sm"] {
+        --matcha-flag-w: 16px;
+        --matcha-flag-h: 12px;
+    }
+    .matcha-flag[data-set="country"][data-size="medium"],
+    .matcha-flag[data-set="country"][data-size="md"] {
+        --matcha-flag-w: 22px;
+        --matcha-flag-h: 16px;
+    }
+    .matcha-flag[data-set="country"][data-size="large"],
+    .matcha-flag[data-set="country"][data-size="lg"] {
+        --matcha-flag-w: 32px;
+        --matcha-flag-h: 24px;
+    }
+
+    // ── Set: payment — 4:3 aspect ratio ─────────────────────────────────────
+    .matcha-flag[data-set="payment"] {
+        --matcha-flag-w: 32px;
+        --matcha-flag-h: 24px;
+    }
+    .matcha-flag[data-set="payment"][data-size="small"],
+    .matcha-flag[data-set="payment"][data-size="sm"] {
+        --matcha-flag-w: 24px;
+        --matcha-flag-h: 18px;
+    }
+    .matcha-flag[data-set="payment"][data-size="medium"],
+    .matcha-flag[data-set="payment"][data-size="md"] {
+        --matcha-flag-w: 32px;
+        --matcha-flag-h: 24px;
+    }
+    .matcha-flag[data-set="payment"][data-size="large"],
+    .matcha-flag[data-set="payment"][data-size="lg"] {
+        --matcha-flag-w: 48px;
+        --matcha-flag-h: 36px;
+        border-radius: var(--matcha-radius-md, 4px);
+    }
+}

package/components/matcha-footer.scss

@@ -1,91 +1,91 @@
-@use "../abstracts/media-breakpoint" as *;
-@use "sass:map";
-
-// =============================================================================
-// matcha-footer.scss — App footer bar
-// 1:1 com Figma DSV3 matcha/footer (nodeId 15930:27)
-//   • Default  · w fluida · h 28 · padding 8/16
-//   • Expanded · w fluida · h 28 · padding 8/16
-//   • Mobile   · w fluida · h 24 · padding 6/16
-//   • bg surface/card  · border-top hairline surface/border
-//   • topLeftRadius/topRightRadius = 8 · bottom = 0
-//   • Conteúdo centralizado (brand inchurch via matcha-brand)
-// =============================================================================
-
-@mixin matcha-footer-theme($theme) {
-
-    .matcha-footer {
-        background: var(--matcha-color-surface-card);
-        border-top: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border);
-        color: var(--matcha-color-text-label);
-    }
-}
-
-.matcha-footer {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    position: relative;
-    z-index: 1;
-    // Gap default — footer nunca colado no conteúdo nem nas bordas.
-    // Tokens: --matcha-footer-gap-block (top) e --matcha-footer-gap-inline (laterais).
-    // Fallback unificado --matcha-footer-gap controla os 3 simultaneamente.
-    margin-block-start: var(--matcha-footer-gap-block, var(--matcha-footer-gap, var(--matcha-space-300, 24px)));
-    margin-inline: var(--matcha-footer-gap-inline, var(--matcha-footer-gap, var(--matcha-space-300, 24px)));
-    // max(0, ...) protege de width negativo se container <= 2 * gap-inline.
-    width: max(0px, calc(100% - 2 * var(--matcha-footer-gap-inline, var(--matcha-footer-gap, var(--matcha-space-300, 24px)))));
-    // Figma DSV3 Default/Expanded: h 28, padding 8/16. Logical props pra RTL.
-    min-block-size: var(--matcha-footer-height, 28px);
-    padding-block: var(--matcha-space-100, 8px);
-    padding-inline: var(--matcha-space-200, 16px);
-    // Top corners arredondados (Figma DSV3 topLeftRadius/topRightRadius = 8).
-    border-start-start-radius: var(--matcha-radius-lg, 8px);
-    border-start-end-radius:   var(--matcha-radius-lg, 8px);
-    border-end-start-radius:   0;
-    border-end-end-radius:     0;
-    font-family: var(--matcha-font-family);
-    font-size: var(--matcha-text-body-sm, 12px);
-    line-height: var(--matcha-leading-body-sm, 16px);
-}
-
-// ── Forced colors (Windows High Contrast) ──────────────────────────────────
-// Border hairline com surface/border (12% opacidade) pode sumir em high-contrast.
-// CanvasText é o token system semantic — sempre visível.
-@media (forced-colors: active) {
-    .matcha-footer {
-        border-top: 1px solid CanvasText;
-    }
-}
-
-// ── Reduced motion (defensivo) ──────────────────────────────────────────────
-// Hoje footer não tem transitions, mas mantemos o block pra futuro (sticky
-// shadow, scroll-shrink) — quando adicionar, já está coberto.
-@media (prefers-reduced-motion: reduce) {
-    .matcha-footer {
-        transition: none !important;
-        animation: none !important;
-    }
-}
-
-// ── Print ──────────────────────────────────────────────────────────────────
-// Convenção DS: chrome (header/footer) some em impressão, conteúdo full-page.
-@media print {
-    .matcha-footer {
-        display: none;
-    }
-}
-
-// ── Responsive ──────────────────────────────────────────────────────────────
-
-@include media-breakpoint('xs') {
-    .matcha-footer {
-        // Figma DSV3 Mobile: h 24, padding 6/16. Gap reduzido em mobile.
-        min-block-size: 24px;
-        padding-block: var(--matcha-space-075, 6px);
-        padding-inline: var(--matcha-space-200, 16px);
-        margin-block-start: var(--matcha-footer-gap-block, var(--matcha-footer-gap, var(--matcha-space-200, 16px)));
-        margin-inline: var(--matcha-footer-gap-inline, var(--matcha-footer-gap, var(--matcha-space-200, 16px)));
-        width: max(0px, calc(100% - 2 * var(--matcha-footer-gap-inline, var(--matcha-footer-gap, var(--matcha-space-200, 16px)))));
-    }
-}
+@use "../abstracts/media-breakpoint" as *;
+@use "sass:map";
+
+// =============================================================================
+// matcha-footer.scss — App footer bar
+// 1:1 com Figma DSV3 matcha/footer (nodeId 15930:27)
+//   • Default  · w fluida · h 28 · padding 8/16
+//   • Expanded · w fluida · h 28 · padding 8/16
+//   • Mobile   · w fluida · h 24 · padding 6/16
+//   • bg surface/card  · border-top hairline surface/border
+//   • topLeftRadius/topRightRadius = 8 · bottom = 0
+//   • Conteúdo centralizado (brand inchurch via matcha-brand)
+// =============================================================================
+
+@mixin matcha-footer-theme($theme) {
+
+    .matcha-footer {
+        background: var(--matcha-color-surface-card);
+        border-top: var(--matcha-border-hairline, 1px) solid var(--matcha-color-surface-border);
+        color: var(--matcha-color-text-label);
+    }
+}
+
+.matcha-footer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    position: relative;
+    z-index: 1;
+    // Gap default — footer nunca colado no conteúdo nem nas bordas.
+    // Tokens: --matcha-footer-gap-block (top) e --matcha-footer-gap-inline (laterais).
+    // Fallback unificado --matcha-footer-gap controla os 3 simultaneamente.
+    margin-block-start: var(--matcha-footer-gap-block, var(--matcha-footer-gap, var(--matcha-space-300, 24px)));
+    margin-inline: var(--matcha-footer-gap-inline, var(--matcha-footer-gap, var(--matcha-space-300, 24px)));
+    // max(0, ...) protege de width negativo se container <= 2 * gap-inline.
+    width: max(0px, calc(100% - 2 * var(--matcha-footer-gap-inline, var(--matcha-footer-gap, var(--matcha-space-300, 24px)))));
+    // Figma DSV3 Default/Expanded: h 28, padding 8/16. Logical props pra RTL.
+    min-block-size: var(--matcha-footer-height, 28px);
+    padding-block: var(--matcha-space-100, 8px);
+    padding-inline: var(--matcha-space-200, 16px);
+    // Top corners arredondados (Figma DSV3 topLeftRadius/topRightRadius = 8).
+    border-start-start-radius: var(--matcha-radius-lg, 8px);
+    border-start-end-radius:   var(--matcha-radius-lg, 8px);
+    border-end-start-radius:   0;
+    border-end-end-radius:     0;
+    font-family: var(--matcha-font-family);
+    font-size: var(--matcha-text-body-sm, 12px);
+    line-height: var(--matcha-leading-body-sm, 16px);
+}
+
+// ── Forced colors (Windows High Contrast) ──────────────────────────────────
+// Border hairline com surface/border (12% opacidade) pode sumir em high-contrast.
+// CanvasText é o token system semantic — sempre visível.
+@media (forced-colors: active) {
+    .matcha-footer {
+        border-top: 1px solid CanvasText;
+    }
+}
+
+// ── Reduced motion (defensivo) ──────────────────────────────────────────────
+// Hoje footer não tem transitions, mas mantemos o block pra futuro (sticky
+// shadow, scroll-shrink) — quando adicionar, já está coberto.
+@media (prefers-reduced-motion: reduce) {
+    .matcha-footer {
+        transition: none !important;
+        animation: none !important;
+    }
+}
+
+// ── Print ──────────────────────────────────────────────────────────────────
+// Convenção DS: chrome (header/footer) some em impressão, conteúdo full-page.
+@media print {
+    .matcha-footer {
+        display: none;
+    }
+}
+
+// ── Responsive ──────────────────────────────────────────────────────────────
+
+@include media-breakpoint('xs') {
+    .matcha-footer {
+        // Figma DSV3 Mobile: h 24, padding 6/16. Gap reduzido em mobile.
+        min-block-size: 24px;
+        padding-block: var(--matcha-space-075, 6px);
+        padding-inline: var(--matcha-space-200, 16px);
+        margin-block-start: var(--matcha-footer-gap-block, var(--matcha-footer-gap, var(--matcha-space-200, 16px)));
+        margin-inline: var(--matcha-footer-gap-inline, var(--matcha-footer-gap, var(--matcha-space-200, 16px)));
+        width: max(0px, calc(100% - 2 * var(--matcha-footer-gap-inline, var(--matcha-footer-gap, var(--matcha-space-200, 16px)))));
+    }
+}