@inchurch/matcha-theme 21.4.0 → 22.1.0

package/components/matcha-radio.scss

@@ -1,320 +1,320 @@
-// =============================================================================
-// matcha-radio.scss — Figma DSV3 matcha/radio (14354:184)
-//
-// Estrutura visual (1:1 com Figma):
-//   .matcha-radio-wrapper (label) — flex row + gap 8px
-//     .matcha-radio-touch (span) — 36×36 pillshape, state-layer, hover bg
-//       .matcha-radio-input (input radio) — 18×18 native, dot 8×8 ::after
-//     .matcha-radio-text (span) — coluna label + desc + hint
-//
-// Color system: accent (default) + 6 semânticas (primary/success/warn/danger/info).
-// Paleta legacy Material 1 (red/pink/purple/blue/...) REMOVIDA — DSV3 não suporta.
-// =============================================================================
-
-// ── Estrutural ─────────────────────────────────────────────────────────────
-
-matcha-radio {
-    display:        inline-flex;
-    align-items:    center;
-    gap:            var(--matcha-space-100, 8px);
-    cursor:         pointer;
-    font-family:    var(--matcha-font-family);
-
-    // Disabled — pointer/cursor only (cores via tokens semânticos no mixin)
-    &[disabled] {
-        pointer-events: none;
-        cursor:         default;
-
-        .matcha-radio-wrapper { cursor: default; }
-    }
-
-    // Movimento reduzido (WCAG 2.3.3)
-    @media (prefers-reduced-motion: reduce) {
-        .matcha-radio-input,
-        .matcha-radio-touch::before { transition: none; }
-    }
-}
-
-.matcha-radio-wrapper {
-    display:        inline-flex;
-    align-items:    center;
-    gap:            var(--matcha-space-100, 8px);
-    cursor:         pointer;
-    user-select:    none;
-}
-
-// Quando há descrição/hint (multi-linha), volta pra align-items: flex-start
-// pra evitar que o glyph fique no meio do bloco texto.
-matcha-radio:has(.matcha-radio-description),
-matcha-radio:has(.matcha-radio-hint) {
-    .matcha-radio-wrapper { align-items: flex-start; }
-}
-
-// ── Touch target — 36×36 pillshape (Figma DSV3) ─────────────────────────────
-// Container circular grande pra área clicável extendida (WCAG 2.5.5).
-// Glyph visual continua 18×18 dentro, mas hover/click cobre 36×36.
-.matcha-radio-touch {
-    position:       relative;
-    display:        inline-flex;
-    align-items:    center;
-    justify-content: center;
-    width:          var(--matcha-radio-touch-size, 36px);
-    height:         var(--matcha-radio-touch-size, 36px);
-    flex-shrink:    0;
-    border-radius:  var(--matcha-radius-pill, 9999px);
-    overflow:       hidden;
-
-    // State layer — segue padrão DSV3 (currentColor + opacity tokenizada).
-    // currentColor herda do .matcha-radio-touch que recebe color por variante (mixin).
-    &::before {
-        content:        '';
-        position:       absolute;
-        inset:          0;
-        background:     currentColor;
-        opacity:        0;
-        border-radius:  inherit;
-        pointer-events: none;
-        transition:     opacity var(--matcha-duration-instant, 80ms) linear;
-    }
-}
-
-// Hover/active state-layer — só quando NÃO disabled
-matcha-radio:not([disabled]) .matcha-radio-touch:hover::before  { opacity: var(--matcha-state-hover, 0.08); }
-matcha-radio:not([disabled]) .matcha-radio-touch:active::before { opacity: var(--matcha-state-active, 0.12); }
-
-// ── Input radio nativo — vector 18×18 ────────────────────────────────────
-.matcha-radio-input {
-    appearance:         none;
-    -webkit-appearance: none;
-    width:              var(--matcha-radio-size, 18px);
-    height:             var(--matcha-radio-size, 18px);
-    padding:            0;
-    margin:              0;
-    border-width:       2px;
-    border-style:       solid;
-    border-radius:      50%;
-    cursor:             pointer;
-    position:           relative;
-    box-sizing:         border-box;
-    transition:         border-color var(--matcha-duration-fast, 200ms) var(--matcha-easing-standard, ease);
-
-    // Dot interno (checked) — 8×8 centralizado via inset
-    &:checked::after {
-        content:       '';
-        position:      absolute;
-        inset:         3px;
-        border-radius: 50%;
-    }
-}
-
-// ── Coluna texto (label + description + hint) ────────────────────────────
-.matcha-radio-text {
-    display:        flex;
-    flex-direction: column;
-    gap:            var(--matcha-space-025, 2px);
-    min-width:      0;
-}
-
-// Em multi-linha (com desc/hint), aplica padding-top no text pra alinhar
-// o label com o centro vertical do glyph (touch 36px, glyph centro em 18px;
-// label-sm height 16px → padding-top 10px alinha label-center com glyph-center).
-matcha-radio:has(.matcha-radio-description) .matcha-radio-text,
-matcha-radio:has(.matcha-radio-hint) .matcha-radio-text {
-    padding-top: var(--matcha-space-150, 10px);
-}
-
-// Label — Figma matcha/text/label-sm (12/500/16) — não body-sm que é regular
-.matcha-radio-label {
-    display:     inline-flex;
-    align-items: center;
-    gap:         var(--matcha-space-050, 4px);
-    font-family: var(--matcha-font-family);
-    font-size:   var(--matcha-text-label-sm, 12px);
-    font-weight: var(--matcha-weight-medium, 500);
-    line-height: var(--matcha-leading-label-sm, 16px);
-    color:       var(--matcha-radio-label-color, var(--matcha-color-text-primary));
-    cursor:      pointer;
-    user-select: none;
-}
-
-// Asterisco required — danger
-.matcha-radio-required {
-    color:       var(--matcha-color-danger);
-    font-weight: var(--matcha-weight-medium, 500);
-}
-
-// Description — caption 11/14 letter-spacing 0.3 (Figma DSV3)
-.matcha-radio-description {
-    font-family:    var(--matcha-font-family);
-    font-size:      var(--matcha-text-p-tiny, 11px);
-    line-height:    var(--matcha-leading-p-tiny, 14px);
-    letter-spacing: 0.3px;
-    color:          var(--matcha-color-text-secondary);
-}
-
-// Hint (só em error) — danger
-.matcha-radio-hint {
-    font-family:    var(--matcha-font-family);
-    font-size:      var(--matcha-text-p-tiny, 11px);
-    line-height:    var(--matcha-leading-p-tiny, 14px);
-    letter-spacing: 0.3px;
-    color:          var(--matcha-color-danger);
-}
-
-// =============================================================================
-// Theme mixin — cores por variante (accent default + 6 semânticas DSV3)
-// Paleta Material 1 (red/pink/purple/...) REMOVIDA — não faz parte do DSV3.
-// =============================================================================
-
-@mixin matcha-radio($theme) {
-    matcha-radio {
-
-        // ── Default (sem [color]) e [color="accent"] = accent ─────────────────
-        &:not([color]),
-        &[color="accent"] {
-            .matcha-radio-touch {
-                color: var(--matcha-color-accent);
-            }
-
-            .matcha-radio-input {
-                border-color: var(--matcha-color-text-label);
-
-                &:checked {
-                    border-color: var(--matcha-color-accent);
-
-                    &::after {
-                        background-color: var(--matcha-color-accent);
-                    }
-                }
-            }
-        }
-
-        // ── primary ────────────────────────────────────────────────────────
-        &[color="primary"] {
-            .matcha-radio-touch { color: var(--matcha-color-primary); }
-            .matcha-radio-input {
-                border-color: var(--matcha-color-text-label);
-                &:checked {
-                    border-color: var(--matcha-color-primary);
-                    &::after { background-color: var(--matcha-color-primary); }
-                }
-            }
-        }
-
-        // ── success ────────────────────────────────────────────────────────
-        &[color="success"] {
-            .matcha-radio-touch { color: var(--matcha-color-success); }
-            .matcha-radio-input {
-                border-color: var(--matcha-color-text-label);
-                &:checked {
-                    border-color: var(--matcha-color-success);
-                    &::after { background-color: var(--matcha-color-success); }
-                }
-            }
-        }
-
-        // ── warn ───────────────────────────────────────────────────────────
-        &[color="warn"] {
-            .matcha-radio-touch { color: var(--matcha-color-warn); }
-            .matcha-radio-input {
-                border-color: var(--matcha-color-text-label);
-                &:checked {
-                    border-color: var(--matcha-color-warn);
-                    &::after { background-color: var(--matcha-color-warn); }
-                }
-            }
-        }
-
-        // ── danger ─────────────────────────────────────────────────────────
-        &[color="danger"] {
-            .matcha-radio-touch { color: var(--matcha-color-danger); }
-            .matcha-radio-input {
-                border-color: var(--matcha-color-text-label);
-                &:checked {
-                    border-color: var(--matcha-color-danger);
-                    &::after { background-color: var(--matcha-color-danger); }
-                }
-            }
-        }
-
-        // ── info ───────────────────────────────────────────────────────────
-        &[color="info"] {
-            .matcha-radio-touch { color: var(--matcha-color-info); }
-            .matcha-radio-input {
-                border-color: var(--matcha-color-text-label);
-                &:checked {
-                    border-color: var(--matcha-color-info);
-                    &::after { background-color: var(--matcha-color-info); }
-                }
-            }
-        }
-
-        // ── Error state (Figma DSV3 State=Error) — sobrescreve cor do glyph ──
-        &.matcha-radio-error,
-        &[error="true"] {
-            .matcha-radio-input {
-                border-color: var(--matcha-color-danger) !important;
-
-                &:checked::after {
-                    background-color: var(--matcha-color-danger) !important;
-                }
-            }
-        }
-
-        // ── Disabled (Figma DSV3 opacity 0.5) ────────────────────────────────
-        &[disabled] {
-            opacity: var(--matcha-opacity-option-disabled, 0.5);
-
-            .matcha-radio-input {
-                border-color: var(--matcha-color-interaction-disabled-fg);
-            }
-
-            .matcha-radio-label,
-            .matcha-radio-description,
-            .matcha-radio-hint {
-                color: var(--matcha-color-interaction-disabled-fg);
-            }
-        }
-
-        // ── Focused — outline 2px primary no touch (não desloca layout) ──────
-        .matcha-radio-input:focus-visible {
-            outline: none;
-        }
-        .matcha-radio-touch:has(.matcha-radio-input:focus-visible) {
-            outline:        var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-primary);
-            outline-offset: calc(-1 * var(--matcha-state-focus-ring-width, 2px));
-        }
-    }
-}
-
-// ── Forced colors ──
-@media (forced-colors: active) {
-    matcha-radio {
-        .matcha-radio-circle {
-            border: 1px solid CanvasText !important;
-            background: Canvas !important;
-        }
-
-        &.is-checked .matcha-radio-circle::after,
-        &[checked] .matcha-radio-circle::after {
-            background: Highlight !important;
-        }
-
-        .matcha-radio-touch:has(.matcha-radio-input:focus-visible) {
-            outline: 2px solid CanvasText !important;
-        }
-
-        &.is-disabled,
-        &[disabled] {
-            opacity: 0.5;
-            .matcha-radio-circle { border-color: GrayText !important; }
-        }
-    }
-}
-
-// ── Print ──
-@media print {
-    matcha-radio .matcha-radio-circle {
-        border: 1px solid currentColor !important;
-    }
-}
+// =============================================================================
+// matcha-radio.scss — Figma DSV3 matcha/radio (14354:184)
+//
+// Estrutura visual (1:1 com Figma):
+//   .matcha-radio-wrapper (label) — flex row + gap 8px
+//     .matcha-radio-touch (span) — 36×36 pillshape, state-layer, hover bg
+//       .matcha-radio-input (input radio) — 18×18 native, dot 8×8 ::after
+//     .matcha-radio-text (span) — coluna label + desc + hint
+//
+// Color system: accent (default) + 6 semânticas (primary/success/warn/danger/info).
+// Paleta legacy Material 1 (red/pink/purple/blue/...) REMOVIDA — DSV3 não suporta.
+// =============================================================================
+
+// ── Estrutural ─────────────────────────────────────────────────────────────
+
+matcha-radio {
+    display:        inline-flex;
+    align-items:    center;
+    gap:            var(--matcha-space-100, 8px);
+    cursor:         pointer;
+    font-family:    var(--matcha-font-family);
+
+    // Disabled — pointer/cursor only (cores via tokens semânticos no mixin)
+    &[disabled] {
+        pointer-events: none;
+        cursor:         default;
+
+        .matcha-radio-wrapper { cursor: default; }
+    }
+
+    // Movimento reduzido (WCAG 2.3.3)
+    @media (prefers-reduced-motion: reduce) {
+        .matcha-radio-input,
+        .matcha-radio-touch::before { transition: none; }
+    }
+}
+
+.matcha-radio-wrapper {
+    display:        inline-flex;
+    align-items:    center;
+    gap:            var(--matcha-space-100, 8px);
+    cursor:         pointer;
+    user-select:    none;
+}
+
+// Quando há descrição/hint (multi-linha), volta pra align-items: flex-start
+// pra evitar que o glyph fique no meio do bloco texto.
+matcha-radio:has(.matcha-radio-description),
+matcha-radio:has(.matcha-radio-hint) {
+    .matcha-radio-wrapper { align-items: flex-start; }
+}
+
+// ── Touch target — 36×36 pillshape (Figma DSV3) ─────────────────────────────
+// Container circular grande pra área clicável extendida (WCAG 2.5.5).
+// Glyph visual continua 18×18 dentro, mas hover/click cobre 36×36.
+.matcha-radio-touch {
+    position:       relative;
+    display:        inline-flex;
+    align-items:    center;
+    justify-content: center;
+    width:          var(--matcha-radio-touch-size, 36px);
+    height:         var(--matcha-radio-touch-size, 36px);
+    flex-shrink:    0;
+    border-radius:  var(--matcha-radius-pill, 9999px);
+    overflow:       hidden;
+
+    // State layer — segue padrão DSV3 (currentColor + opacity tokenizada).
+    // currentColor herda do .matcha-radio-touch que recebe color por variante (mixin).
+    &::before {
+        content:        '';
+        position:       absolute;
+        inset:          0;
+        background:     currentColor;
+        opacity:        0;
+        border-radius:  inherit;
+        pointer-events: none;
+        transition:     opacity var(--matcha-duration-instant, 80ms) linear;
+    }
+}
+
+// Hover/active state-layer — só quando NÃO disabled
+matcha-radio:not([disabled]) .matcha-radio-touch:hover::before  { opacity: var(--matcha-state-hover, 0.08); }
+matcha-radio:not([disabled]) .matcha-radio-touch:active::before { opacity: var(--matcha-state-active, 0.12); }
+
+// ── Input radio nativo — vector 18×18 ────────────────────────────────────
+.matcha-radio-input {
+    appearance:         none;
+    -webkit-appearance: none;
+    width:              var(--matcha-radio-size, 18px);
+    height:             var(--matcha-radio-size, 18px);
+    padding:            0;
+    margin:              0;
+    border-width:       2px;
+    border-style:       solid;
+    border-radius:      50%;
+    cursor:             pointer;
+    position:           relative;
+    box-sizing:         border-box;
+    transition:         border-color var(--matcha-duration-fast, 200ms) var(--matcha-easing-standard, ease);
+
+    // Dot interno (checked) — 8×8 centralizado via inset
+    &:checked::after {
+        content:       '';
+        position:      absolute;
+        inset:         3px;
+        border-radius: 50%;
+    }
+}
+
+// ── Coluna texto (label + description + hint) ────────────────────────────
+.matcha-radio-text {
+    display:        flex;
+    flex-direction: column;
+    gap:            var(--matcha-space-025, 2px);
+    min-width:      0;
+}
+
+// Em multi-linha (com desc/hint), aplica padding-top no text pra alinhar
+// o label com o centro vertical do glyph (touch 36px, glyph centro em 18px;
+// label-sm height 16px → padding-top 10px alinha label-center com glyph-center).
+matcha-radio:has(.matcha-radio-description) .matcha-radio-text,
+matcha-radio:has(.matcha-radio-hint) .matcha-radio-text {
+    padding-top: var(--matcha-space-150, 10px);
+}
+
+// Label — Figma matcha/text/label-sm (12/500/16) — não body-sm que é regular
+.matcha-radio-label {
+    display:     inline-flex;
+    align-items: center;
+    gap:         var(--matcha-space-050, 4px);
+    font-family: var(--matcha-font-family);
+    font-size:   var(--matcha-text-label-sm, 12px);
+    font-weight: var(--matcha-weight-medium, 500);
+    line-height: var(--matcha-leading-label-sm, 16px);
+    color:       var(--matcha-radio-label-color, var(--matcha-color-text-primary));
+    cursor:      pointer;
+    user-select: none;
+}
+
+// Asterisco required — danger
+.matcha-radio-required {
+    color:       var(--matcha-color-danger);
+    font-weight: var(--matcha-weight-medium, 500);
+}
+
+// Description — caption 11/14 letter-spacing 0.3 (Figma DSV3)
+.matcha-radio-description {
+    font-family:    var(--matcha-font-family);
+    font-size:      var(--matcha-text-p-tiny, 11px);
+    line-height:    var(--matcha-leading-p-tiny, 14px);
+    letter-spacing: 0.3px;
+    color:          var(--matcha-color-text-secondary);
+}
+
+// Hint (só em error) — danger
+.matcha-radio-hint {
+    font-family:    var(--matcha-font-family);
+    font-size:      var(--matcha-text-p-tiny, 11px);
+    line-height:    var(--matcha-leading-p-tiny, 14px);
+    letter-spacing: 0.3px;
+    color:          var(--matcha-color-danger);
+}
+
+// =============================================================================
+// Theme mixin — cores por variante (accent default + 6 semânticas DSV3)
+// Paleta Material 1 (red/pink/purple/...) REMOVIDA — não faz parte do DSV3.
+// =============================================================================
+
+@mixin matcha-radio($theme) {
+    matcha-radio {
+
+        // ── Default (sem [color]) e [color="accent"] = accent ─────────────────
+        &:not([color]),
+        &[color="accent"] {
+            .matcha-radio-touch {
+                color: var(--matcha-color-accent);
+            }
+
+            .matcha-radio-input {
+                border-color: var(--matcha-color-text-label);
+
+                &:checked {
+                    border-color: var(--matcha-color-accent);
+
+                    &::after {
+                        background-color: var(--matcha-color-accent);
+                    }
+                }
+            }
+        }
+
+        // ── primary ────────────────────────────────────────────────────────
+        &[color="primary"] {
+            .matcha-radio-touch { color: var(--matcha-color-primary); }
+            .matcha-radio-input {
+                border-color: var(--matcha-color-text-label);
+                &:checked {
+                    border-color: var(--matcha-color-primary);
+                    &::after { background-color: var(--matcha-color-primary); }
+                }
+            }
+        }
+
+        // ── success ────────────────────────────────────────────────────────
+        &[color="success"] {
+            .matcha-radio-touch { color: var(--matcha-color-success); }
+            .matcha-radio-input {
+                border-color: var(--matcha-color-text-label);
+                &:checked {
+                    border-color: var(--matcha-color-success);
+                    &::after { background-color: var(--matcha-color-success); }
+                }
+            }
+        }
+
+        // ── warn ───────────────────────────────────────────────────────────
+        &[color="warn"] {
+            .matcha-radio-touch { color: var(--matcha-color-warn); }
+            .matcha-radio-input {
+                border-color: var(--matcha-color-text-label);
+                &:checked {
+                    border-color: var(--matcha-color-warn);
+                    &::after { background-color: var(--matcha-color-warn); }
+                }
+            }
+        }
+
+        // ── danger ─────────────────────────────────────────────────────────
+        &[color="danger"] {
+            .matcha-radio-touch { color: var(--matcha-color-danger); }
+            .matcha-radio-input {
+                border-color: var(--matcha-color-text-label);
+                &:checked {
+                    border-color: var(--matcha-color-danger);
+                    &::after { background-color: var(--matcha-color-danger); }
+                }
+            }
+        }
+
+        // ── info ───────────────────────────────────────────────────────────
+        &[color="info"] {
+            .matcha-radio-touch { color: var(--matcha-color-info); }
+            .matcha-radio-input {
+                border-color: var(--matcha-color-text-label);
+                &:checked {
+                    border-color: var(--matcha-color-info);
+                    &::after { background-color: var(--matcha-color-info); }
+                }
+            }
+        }
+
+        // ── Error state (Figma DSV3 State=Error) — sobrescreve cor do glyph ──
+        &.matcha-radio-error,
+        &[error="true"] {
+            .matcha-radio-input {
+                border-color: var(--matcha-color-danger) !important;
+
+                &:checked::after {
+                    background-color: var(--matcha-color-danger) !important;
+                }
+            }
+        }
+
+        // ── Disabled (Figma DSV3 opacity 0.5) ────────────────────────────────
+        &[disabled] {
+            opacity: var(--matcha-opacity-option-disabled, 0.5);
+
+            .matcha-radio-input {
+                border-color: var(--matcha-color-interaction-disabled-fg);
+            }
+
+            .matcha-radio-label,
+            .matcha-radio-description,
+            .matcha-radio-hint {
+                color: var(--matcha-color-interaction-disabled-fg);
+            }
+        }
+
+        // ── Focused — outline 2px primary no touch (não desloca layout) ──────
+        .matcha-radio-input:focus-visible {
+            outline: none;
+        }
+        .matcha-radio-touch:has(.matcha-radio-input:focus-visible) {
+            outline:        var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-primary);
+            outline-offset: calc(-1 * var(--matcha-state-focus-ring-width, 2px));
+        }
+    }
+}
+
+// ── Forced colors ──
+@media (forced-colors: active) {
+    matcha-radio {
+        .matcha-radio-circle {
+            border: 1px solid CanvasText !important;
+            background: Canvas !important;
+        }
+
+        &.is-checked .matcha-radio-circle::after,
+        &[checked] .matcha-radio-circle::after {
+            background: Highlight !important;
+        }
+
+        .matcha-radio-touch:has(.matcha-radio-input:focus-visible) {
+            outline: 2px solid CanvasText !important;
+        }
+
+        &.is-disabled,
+        &[disabled] {
+            opacity: 0.5;
+            .matcha-radio-circle { border-color: GrayText !important; }
+        }
+    }
+}
+
+// ── Print ──
+@media print {
+    matcha-radio .matcha-radio-circle {
+        border: 1px solid currentColor !important;
+    }
+}

package/components/matcha-ripple.scss

@@ -1,7 +1,7 @@
-@mixin matcha-ripple-theme($theme) {
-
-    [matchaRipple] .ripple {
-        transform-origin: center;
-        pointer-events: none;
-    }
-}
+@mixin matcha-ripple-theme($theme) {
+
+    [matchaRipple] .ripple {
+        transform-origin: center;
+        pointer-events: none;
+    }
+}