@inchurch/matcha-theme 20.0.3

package/components/matcha-radio.scss

@@ -0,0 +1,528 @@
+// =============================================================================
+// matcha-radio.scss — Migração Fase 3.1
+//
+// Mudanças em relação ao original:
+//   [3.1-A] State layer em .matcha-radio-container (replaced element: input não suporta ::before)
+//           Pattern: color: getXxx($theme) no container → currentColor funciona no ::before
+//   [3.1-B] .matcha-radio-container:hover background-color removido (substituído por state layer)
+//   [3.1-C] Ripple de paleta: // ok: ripple palette. Semântico (accent/primary/…): CSS var com fallback
+//           Semantic colors (primary/accent/success/warn/danger/info): usa CSS vars com fallback
+//   [3.1-D] :focus → removido (vazio); :focus-visible adicionado dentro do mixin ($theme disponível)
+//   [3.1-E] Disabled: opacity:0.6 + cursor:not-allowed removidos; tokens semânticos usados
+//   [3.1-F] transition: all → transition: border-color específico
+//   [3.1-G] @media (prefers-reduced-motion: reduce) adicionado
+//   [3.1-H] :not([disabled]) guards via seletor de contexto do pai
+// =============================================================================
+
+@mixin matcha-radio($theme) {
+    matcha-radio {
+
+        // ── Sem cor: usa accent ────────────────────────────────────────────
+        &:not([color]) {
+            // [3.1-A] color no container → currentColor para o state layer
+            .matcha-radio-container {
+                color: var(--matcha-color-accent, #{getAccent($theme)});
+            }
+
+            input[type="radio"] {
+                border-color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+
+                &:active {
+                    border-color: var(--matcha-color-accent, #{getAccent($theme)});
+                }
+
+                &:checked {
+                    border-color: var(--matcha-color-accent, #{getAccent($theme)});
+
+                    &::after {
+                        background-color: var(--matcha-color-accent, #{getAccent($theme)});
+                    }
+                }
+            }
+
+            // [3.1-C] ripple — accent é semântico, usa CSS var com fallback
+            .matcha-radio-container .ripple {
+                background: var(--matcha-color-accent-contrast-alpha, #{getAccentContrastAlpha($theme)}) !important;
+            }
+        }
+
+        // ── Com cor customizada ────────────────────────────────────────────
+        &[color] {
+            input[type="radio"] {
+                border-color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+            }
+        }
+
+        // ── Paleta: red ────────────────────────────────────────────────────
+        &[color="red"] {
+            .matcha-radio-container { color: getRed($theme); } // [3.1-A]
+
+            input[type="radio"]:active             { border-color: getRed($theme); }
+            input[type="radio"]:checked            { border-color: getRed($theme); }
+            input[type="radio"]:checked::after     { background-color: getRed($theme); }
+
+            .matcha-radio-container .ripple {
+                background: rgba(getRedContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: pink ───────────────────────────────────────────────────
+        &[color="pink"] {
+            .matcha-radio-container { color: getPink($theme); } // [3.1-A]
+
+            input[type="radio"]:active             { border-color: getPink($theme); }
+            input[type="radio"]:checked            { border-color: getPink($theme); }
+            input[type="radio"]:checked::after     { background-color: getPink($theme); }
+
+            .matcha-radio-container .ripple {
+                background: rgba(getPinkContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: purple ─────────────────────────────────────────────────
+        &[color="purple"] {
+            .matcha-radio-container { color: getPurple($theme); } // [3.1-A]
+
+            input[type="radio"]:active             { border-color: getPurple($theme); }
+            input[type="radio"]:checked            { border-color: getPurple($theme); }
+            input[type="radio"]:checked::after     { background-color: getPurple($theme); }
+
+            .matcha-radio-container .ripple {
+                background: rgba(getPurpleContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: deep-purple ────────────────────────────────────────────
+        &[color="deep-purple"] {
+            .matcha-radio-container { color: getDeepPurple($theme); } // [3.1-A]
+
+            input[type="radio"]:active             { border-color: getDeepPurple($theme); }
+            input[type="radio"]:checked            { border-color: getDeepPurple($theme); }
+            input[type="radio"]:checked::after     { background-color: getDeepPurple($theme); }
+
+            .matcha-radio-container .ripple {
+                background: rgba(getDeepPurpleContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: indigo ─────────────────────────────────────────────────
+        &[color="indigo"] {
+            .matcha-radio-container { color: getIndigo($theme); } // [3.1-A]
+
+            input[type="radio"]:active             { border-color: getIndigo($theme); }
+            input[type="radio"]:checked            { border-color: getIndigo($theme); }
+            input[type="radio"]:checked::after     { background-color: getIndigo($theme); }
+
+            .matcha-radio-container .ripple {
+                background: rgba(getIndigoContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: blue ───────────────────────────────────────────────────
+        &[color="blue"] {
+            .matcha-radio-container { color: getBlue($theme); } // [3.1-A]
+
+            input[type="radio"]:active             { border-color: getBlue($theme); }
+            input[type="radio"]:checked            { border-color: getBlue($theme); }
+            input[type="radio"]:checked::after     { background-color: getBlue($theme); }
+
+            .matcha-radio-container .ripple {
+                background: rgba(getBlueContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: light-blue ─────────────────────────────────────────────
+        &[color="light-blue"] {
+            .matcha-radio-container { color: getLightBlue($theme); } // [3.1-A]
+
+            input[type="radio"]:active             { border-color: getLightBlue($theme); }
+            input[type="radio"]:checked            { border-color: getLightBlue($theme); }
+            input[type="radio"]:checked::after     { background-color: getLightBlue($theme); }
+
+            .matcha-radio-container .ripple {
+                background: rgba(getLightBlueContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: cyan ───────────────────────────────────────────────────
+        &[color="cyan"] {
+            .matcha-radio-container { color: getCyan($theme); } // [3.1-A]
+
+            input[type="radio"]:active             { border-color: getCyan($theme); }
+            input[type="radio"]:checked            { border-color: getCyan($theme); }
+            input[type="radio"]:checked::after     { background-color: getCyan($theme); }
+
+            .matcha-radio-container .ripple {
+                background: rgba(getCyanContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: teal ───────────────────────────────────────────────────
+        &[color="teal"] {
+            .matcha-radio-container { color: getTeal($theme); } // [3.1-A]
+
+            input[type="radio"]:active             { border-color: getTeal($theme); }
+            input[type="radio"]:checked            { border-color: getTeal($theme); }
+            input[type="radio"]:checked::after     { background-color: getTeal($theme); }
+
+            .matcha-radio-container .ripple {
+                background: rgba(getTealContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: green ──────────────────────────────────────────────────
+        &[color="green"] {
+            .matcha-radio-container { color: getGreen($theme); } // [3.1-A]
+
+            input[type="radio"]:active             { border-color: getGreen($theme); }
+            input[type="radio"]:checked            { border-color: getGreen($theme); }
+            input[type="radio"]:checked::after     { background-color: getGreen($theme); }
+
+            .matcha-radio-container .ripple {
+                background: rgba(getGreenContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: light-green ────────────────────────────────────────────
+        &[color="light-green"] {
+            .matcha-radio-container { color: getLightGreen($theme); } // [3.1-A]
+
+            input[type="radio"]:active             { border-color: getLightGreen($theme); }
+            input[type="radio"]:checked            { border-color: getLightGreen($theme); }
+            input[type="radio"]:checked::after     { background-color: getLightGreen($theme); }
+
+            .matcha-radio-container .ripple {
+                background: rgba(getLightGreenContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: lime ───────────────────────────────────────────────────
+        &[color="lime"] {
+            .matcha-radio-container { color: getLime($theme); } // [3.1-A]
+
+            input[type="radio"]:active             { border-color: getLime($theme); }
+            input[type="radio"]:checked            { border-color: getLime($theme); }
+            input[type="radio"]:checked::after     { background-color: getLime($theme); }
+
+            .matcha-radio-container .ripple {
+                background: rgba(getLimeContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: yellow ─────────────────────────────────────────────────
+        &[color="yellow"] {
+            .matcha-radio-container { color: getYellow($theme); } // [3.1-A]
+
+            input[type="radio"]:active             { border-color: getYellow($theme); }
+            input[type="radio"]:checked            { border-color: getYellow($theme); }
+            input[type="radio"]:checked::after     { background-color: getYellow($theme); }
+
+            .matcha-radio-container .ripple {
+                background: rgba(getYellowContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: amber ──────────────────────────────────────────────────
+        &[color="amber"] {
+            .matcha-radio-container { color: getAmber($theme); } // [3.1-A]
+
+            input[type="radio"]:active             { border-color: getAmber($theme); }
+            input[type="radio"]:checked            { border-color: getAmber($theme); }
+            input[type="radio"]:checked::after     { background-color: getAmber($theme); }
+
+            .matcha-radio-container .ripple {
+                background: rgba(getAmberContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: orange ─────────────────────────────────────────────────
+        &[color="orange"] {
+            .matcha-radio-container { color: getOrange($theme); } // [3.1-A]
+
+            input[type="radio"]:active             { border-color: getOrange($theme); }
+            input[type="radio"]:checked            { border-color: getOrange($theme); }
+            input[type="radio"]:checked::after     { background-color: getOrange($theme); }
+
+            .matcha-radio-container .ripple {
+                background: rgba(getOrangeContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: deep-orange ────────────────────────────────────────────
+        &[color="deep-orange"] {
+            .matcha-radio-container { color: getDeepOrange($theme); } // [3.1-A]
+
+            input[type="radio"]:active             { border-color: getDeepOrange($theme); }
+            input[type="radio"]:checked            { border-color: getDeepOrange($theme); }
+            input[type="radio"]:checked::after     { background-color: getDeepOrange($theme); }
+
+            .matcha-radio-container .ripple {
+                background: rgba(getDeepOrangeContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: brown ──────────────────────────────────────────────────
+        &[color="brown"] {
+            .matcha-radio-container { color: getBrown($theme); } // [3.1-A]
+
+            input[type="radio"]:active             { border-color: getBrown($theme); }
+            input[type="radio"]:checked            { border-color: getBrown($theme); }
+            input[type="radio"]:checked::after     { background-color: getBrown($theme); }
+
+            .matcha-radio-container .ripple {
+                background: rgba(getBrownContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: grey ───────────────────────────────────────────────────
+        &[color="grey"] {
+            .matcha-radio-container { color: getGrey($theme); } // [3.1-A]
+
+            input[type="radio"]:active             { border-color: getGrey($theme); }
+            input[type="radio"]:checked            { border-color: getGrey($theme); }
+            input[type="radio"]:checked::after     { background-color: getGrey($theme); }
+
+            .matcha-radio-container .ripple {
+                background: rgba(getGreyContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: blue-grey ──────────────────────────────────────────────
+        &[color="blue-grey"] {
+            .matcha-radio-container { color: getBlueGrey($theme); } // [3.1-A]
+
+            input[type="radio"]:active             { border-color: getBlueGrey($theme); }
+            input[type="radio"]:checked            { border-color: getBlueGrey($theme); }
+            input[type="radio"]:checked::after     { background-color: getBlueGrey($theme); }
+
+            .matcha-radio-container .ripple {
+                background: rgba(getBlueGreyContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Semântica: primary ─────────────────────────────────────────────
+        &[color="primary"] {
+            .matcha-radio-container { color: var(--matcha-color-primary, #{getPrimary($theme)}); } // [3.1-A]
+
+            input[type="radio"]:active             { border-color: var(--matcha-color-primary, #{getPrimary($theme)}); }
+            input[type="radio"]:checked            { border-color: var(--matcha-color-primary, #{getPrimary($theme)}); }
+            input[type="radio"]:checked::after     { background-color: var(--matcha-color-primary, #{getPrimary($theme)}); }
+
+            // [3.1-C] semantic: CSS var com fallback SCSS
+            .matcha-radio-container .ripple {
+                background: var(--matcha-color-primary-contrast-alpha, #{getPrimaryContrastAlpha($theme)}) !important;
+            }
+        }
+
+        // ── Semântica: accent ──────────────────────────────────────────────
+        &[color="accent"] {
+            .matcha-radio-container { color: var(--matcha-color-accent, #{getAccent($theme)}); } // [3.1-A]
+
+            input[type="radio"]:active             { border-color: var(--matcha-color-accent, #{getAccent($theme)}); }
+            input[type="radio"]:checked            { border-color: var(--matcha-color-accent, #{getAccent($theme)}); }
+            input[type="radio"]:checked::after     { background-color: var(--matcha-color-accent, #{getAccent($theme)}); }
+
+            .matcha-radio-container .ripple {
+                background: var(--matcha-color-accent-contrast-alpha, #{getAccentContrastAlpha($theme)}) !important;
+            }
+        }
+
+        // ── Semântica: success ─────────────────────────────────────────────
+        &[color="success"] {
+            .matcha-radio-container { color: getSuccess($theme); } // [3.1-A]
+
+            input[type="radio"]:active             { border-color: getSuccess($theme); }
+            input[type="radio"]:checked            { border-color: getSuccess($theme); }
+            input[type="radio"]:checked::after     { background-color: getSuccess($theme); }
+
+            .matcha-radio-container .ripple {
+                background: var(--matcha-color-success-contrast-alpha, #{getSuccessContrastAlpha($theme)}) !important;
+            }
+        }
+
+        // ── Semântica: warn ────────────────────────────────────────────────
+        &[color="warn"] {
+            .matcha-radio-container { color: getWarn($theme); } // [3.1-A]
+
+            input[type="radio"]:active             { border-color: getWarn($theme); }
+            input[type="radio"]:checked            { border-color: getWarn($theme); }
+            input[type="radio"]:checked::after     { background-color: getWarn($theme); }
+
+            .matcha-radio-container .ripple {
+                background: var(--matcha-color-warn-contrast-alpha, #{getWarnContrastAlpha($theme)}) !important;
+            }
+        }
+
+        // ── Semântica: danger ──────────────────────────────────────────────
+        &[color="danger"] {
+            .matcha-radio-container { color: getDanger($theme); } // [3.1-A]
+
+            input[type="radio"]:active             { border-color: getDanger($theme); }
+            input[type="radio"]:checked            { border-color: getDanger($theme); }
+            input[type="radio"]:checked::after     { background-color: getDanger($theme); }
+
+            .matcha-radio-container .ripple {
+                background: var(--matcha-color-danger-contrast-alpha, #{getDangerContrastAlpha($theme)}) !important;
+            }
+        }
+
+        // ── Semântica: info ────────────────────────────────────────────────
+        &[color="info"] {
+            .matcha-radio-container { color: getInfo($theme); } // [3.1-A]
+
+            input[type="radio"]:active             { border-color: getInfo($theme); }
+            input[type="radio"]:checked            { border-color: getInfo($theme); }
+            input[type="radio"]:checked::after     { background-color: getInfo($theme); }
+
+            .matcha-radio-container .ripple {
+                background: var(--matcha-color-info-contrast-alpha, #{getInfoContrastAlpha($theme)}) !important;
+            }
+        }
+
+        // ── Error state (aligned with Figma State=Error) ──────────────────
+        &.matcha-radio-error,
+        &[error] {
+            input[type="radio"] {
+                border-color: var(--matcha-color-danger, #{getDanger($theme)});
+
+                &:checked {
+                    border-color: var(--matcha-color-danger, #{getDanger($theme)});
+
+                    &::after {
+                        background-color: var(--matcha-color-danger, #{getDanger($theme)});
+                    }
+                }
+            }
+        }
+
+        // ── [3.1-D] Disabled — tokens semânticos (sem opacity no host) ─────
+        &[disabled] {
+            input[type="radio"] {
+                border-color: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
+            }
+
+            // Container recebe cor de disabled para que currentColor do state layer seja correto
+            // (state layer já está bloqueado por pointer-events, mas garante visual consistente)
+            .matcha-radio-container {
+                color: var(--matcha-color-disabled-fg, #{getDisabledBgContrast($theme)});
+            }
+
+            .matcha-radio-label {
+                color: var(--matcha-color-disabled-fg, #{getDisabledBgContrast($theme)});
+            }
+        }
+
+        // ── [3.1-D] :focus-visible — DEVE ficar no mixin (precisa de #{getForeground($theme)}) ──
+        // Aplica no container circular (o foco é visível ali, não no input oculto)
+        .matcha-radio-container:focus-within {
+            outline:        var(--matcha-state-focus-ring-width, 2px) solid
+                            var(--matcha-color-primary, #{getPrimary($theme)});
+            outline-offset: var(--matcha-state-focus-ring-offset, 2px);
+        }
+
+        // Label padrão (preservado do original)
+        .matcha-radio-label {
+            color: getGrey($theme);
+        }
+    }
+}
+
+
+// =============================================================================
+// Bloco estrutural — fora do mixin de tema
+// =============================================================================
+
+// [3.1-A] Container do radio recebe o state layer
+// input[type="radio"] é replaced element — ::before não renderiza nele
+// O container (.matcha-radio-container) é a área clicável circular
+.matcha-radio-container {
+    position:      relative;
+    overflow:      hidden;
+    border-radius: 50%;    // área de hover circular (Material Design radio pattern)
+
+    // State layer — segue INTERACTION-SYSTEM.md template
+    &::before {
+        content:        '';
+        position:       absolute;
+        inset:          0;
+        background:     currentColor; // usa color: getXxx($theme) definido no mixin por variante
+        opacity:        0;
+        border-radius:  inherit;
+        pointer-events: none;
+        transition:     opacity var(--matcha-duration-instant, 80ms) linear;
+    }
+}
+
+// [3.1-H] Hover/active: [disabled] está em matcha-radio (pai), não no container
+// Seletor de contexto do pai evita ativar o state layer quando desabilitado
+matcha-radio:not([disabled]) .matcha-radio-container:hover::before  { opacity: var(--matcha-state-hover, 0.08); }
+matcha-radio:not([disabled]) .matcha-radio-container:active::before { opacity: var(--matcha-state-active, 0.12); }
+
+matcha-radio {
+    display:     inline-flex;
+    align-items: center;
+    gap:         8px;
+    cursor:      pointer;
+
+    input[type="radio"] {
+        appearance:         none;
+        -webkit-appearance: none;
+        width:              var(--matcha-radio-size, 18px);
+        height:             var(--matcha-radio-size, 18px);
+        padding:            0;
+        margin:             0;
+        border-radius:      50%;
+        border-width:       2px;
+        border-style:       solid;
+        cursor:             pointer;
+        position:           relative;
+
+        // [3.1-F] transition específico (não 'all')
+        transition:         border-color 0.2s ease;
+
+        // outline: none REMOVIDO — :focus-visible no mixin garante acessibilidade
+        // &:focus {} REMOVIDO — estava vazio (WCAG 2.4.7)
+
+        &:checked::after {
+            content:       '';
+            position:      absolute;
+            left:          3px;
+            top:           3px;
+            width:         8px;
+            height:        8px;
+            border-radius: 50%;
+        }
+    }
+
+    // Figma matcha/radio label: 12px Medium line 16 (weight 500, diferente do checkbox 400)
+    .matcha-radio-label {
+        font-size:   var(--matcha-text-body-sm, 12px);
+        font-weight: var(--matcha-weight-medium, 500);
+        line-height: var(--matcha-leading-body-sm, 16px);
+        user-select: none;
+        cursor:      pointer;
+    }
+
+    // [3.1-E] Disabled — sem opacity no host, sem cursor: not-allowed
+    // pointer-events: none é suficiente para bloquear interação
+    // Cores gerenciadas pelo mixin via tokens semânticos
+    &[disabled] {
+        pointer-events: none;
+        cursor:         default;
+
+        input[type="radio"] {
+            // cursor: not-allowed REMOVIDO (pointer-events: none o torna ineficaz)
+        }
+
+        .matcha-radio-label {
+            cursor: default;
+        }
+    }
+
+    // [3.1-G] Movimento reduzido — obrigatório (WCAG 2.3.3)
+    @media (prefers-reduced-motion: reduce) {
+        input[type="radio"] { transition: none; }
+
+        .matcha-radio-container::before { transition: none; }
+    }
+}

package/components/matcha-ripple.scss

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

package/components/matcha-scrollbar.scss

@@ -0,0 +1,35 @@
+@use "sass:map";
+
+@mixin matcha-scrollbar-theme($theme) {
+    $is-dark: map.get($theme, is-dark);
+
+    :not(.is-mobile) {
+        ::-webkit-scrollbar {
+            width: var(--matcha-space-200, 16px);
+            height: var(--matcha-space-200, 16px);
+            background-color: transparent;
+        }
+
+        ::-webkit-scrollbar:hover {
+            background-color: var(--matcha-color-surface-hover, #{getBackgroundAlpha($theme)});
+        }
+
+        ::-webkit-scrollbar-thumb {
+            border: var(--matcha-space-050, 4px) solid transparent;
+            // Thumb: grey #888 + alpha 0x33 (~0.2) — fallback hex pra estabilidade em webkit
+            box-shadow: inset 0 0 0 var(--matcha-space-150, 12px) #88888833;
+            border-radius: var(--matcha-radius-xl, 16px);
+        }
+
+        ::-webkit-scrollbar-thumb:active {
+            // Thumb active: grey #888 + alpha 0x44 (~0.27)
+            box-shadow: inset 0 0 0 var(--matcha-space-150, 12px) #88888844;
+            border-radius: var(--matcha-radius-xl, 16px);
+        }
+
+        ::-webkit-scrollbar-corner {
+            background: transparent;
+        }
+    }
+
+}