@inchurch/matcha-theme 20.0.3

package/components/matcha-checkbox.scss

@@ -0,0 +1,554 @@
+// =============================================================================
+// matcha-checkbox.scss — Migração Fase 3.1
+//
+// Segue o mesmo padrão do matcha-radio.scss migrado.
+// Diferenças em relação ao radio:
+//   - input:checked preenche background (não apenas border)
+//   - estado :indeterminate adicional
+//   - ::after no input é checkmark (borda rotacionada), não círculo
+//   - .matcha-checkbox-container (análogo a .matcha-radio-container)
+//
+// Mudanças:
+//   [3.1-A] State layer em .matcha-checkbox-container (replaced element pattern)
+//   [3.1-B] background-color: rgba() removido; color: getXxx($theme) no container
+//   [3.1-C] Ripple de paleta: // ok: ripple palette. Semântico (accent/primary/…): CSS var com fallback
+//   [3.1-D] :focus-visible no mixin; :focus vazio removido
+//   [3.1-E] Disabled: opacity:0.6 + cursor:not-allowed removidos; tokens semânticos
+//   [3.1-F] transition: all → border-color específico
+//   [3.1-G] @media (prefers-reduced-motion: reduce) adicionado
+//   [3.1-H] :not([disabled]) via seletor de contexto do pai
+// =============================================================================
+
+@mixin matcha-checkbox($theme) {
+    matcha-checkbox {
+
+        // ── Sem cor: usa accent ────────────────────────────────────────────
+        &:not([color]) {
+            .matcha-checkbox-container {
+                color: var(--matcha-color-accent, #{getAccent($theme)}); // [3.1-A]
+            }
+
+            input[type="checkbox"] {
+                border-color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+
+                &:active {
+                    border-color: var(--matcha-color-accent, #{getAccent($theme)});
+                }
+
+                &:checked {
+                    background-color: var(--matcha-color-accent, #{getAccent($theme)});
+                    border-color:     var(--matcha-color-accent, #{getAccent($theme)});
+
+                    &::after {
+                        border-color: getAccentContrast($theme);
+                    }
+                }
+
+                &:indeterminate {
+                    background-color: getGrey($theme);
+                    border-color:     getGrey($theme);
+
+                    &::after {
+                        background-color: getGreyContrast($theme);
+                    }
+                }
+            }
+
+            .matcha-checkbox-container .ripple {
+                background: var(--matcha-color-accent-contrast-alpha, #{getAccentContrastAlpha($theme)}) !important;
+            }
+        }
+
+        // ── Com cor customizada ────────────────────────────────────────────
+        &[color] {
+            input[type="checkbox"] {
+                border-color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+
+                &:indeterminate {
+                    background-color: getGrey($theme);
+                    border-color:     getGrey($theme);
+
+                    &::after {
+                        background-color: getGreyContrast($theme);
+                    }
+                }
+            }
+        }
+
+        // ── Paleta: red ────────────────────────────────────────────────────
+        &[color="red"] {
+            .matcha-checkbox-container { color: getRed($theme); } // [3.1-A]
+
+            input[type="checkbox"]:active             { border-color: getRed($theme); }
+            input[type="checkbox"]:checked            { background-color: getRed($theme); border-color: getRed($theme); }
+            input[type="checkbox"]:checked::after     { border-color: getRedContrast($theme); }
+
+            .matcha-checkbox-container .ripple {
+                background: rgba(getRedContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: pink ───────────────────────────────────────────────────
+        &[color="pink"] {
+            .matcha-checkbox-container { color: getPink($theme); } // [3.1-A]
+
+            input[type="checkbox"]:active             { border-color: getPink($theme); }
+            input[type="checkbox"]:checked            { background-color: getPink($theme); border-color: getPink($theme); }
+            input[type="checkbox"]:checked::after     { border-color: getPinkContrast($theme); }
+
+            .matcha-checkbox-container .ripple {
+                background: rgba(getPinkContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: purple ─────────────────────────────────────────────────
+        &[color="purple"] {
+            .matcha-checkbox-container { color: getPurple($theme); } // [3.1-A]
+
+            input[type="checkbox"]:active             { border-color: getPurple($theme); }
+            input[type="checkbox"]:checked            { background-color: getPurple($theme); border-color: getPurple($theme); }
+            input[type="checkbox"]:checked::after     { border-color: getPurpleContrast($theme); }
+
+            .matcha-checkbox-container .ripple {
+                background: rgba(getPurpleContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: deep-purple ────────────────────────────────────────────
+        &[color="deep-purple"] {
+            .matcha-checkbox-container { color: getDeepPurple($theme); } // [3.1-A]
+
+            input[type="checkbox"]:active             { border-color: getDeepPurple($theme); }
+            input[type="checkbox"]:checked            { background-color: getDeepPurple($theme); border-color: getDeepPurple($theme); }
+            input[type="checkbox"]:checked::after     { border-color: getDeepPurpleContrast($theme); }
+
+            .matcha-checkbox-container .ripple {
+                background: rgba(getDeepPurpleContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: indigo ─────────────────────────────────────────────────
+        &[color="indigo"] {
+            .matcha-checkbox-container { color: getIndigo($theme); } // [3.1-A]
+
+            input[type="checkbox"]:active             { border-color: getIndigo($theme); }
+            input[type="checkbox"]:checked            { background-color: getIndigo($theme); border-color: getIndigo($theme); }
+            input[type="checkbox"]:checked::after     { border-color: getIndigoContrast($theme); }
+
+            .matcha-checkbox-container .ripple {
+                background: rgba(getIndigoContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: blue ───────────────────────────────────────────────────
+        &[color="blue"] {
+            .matcha-checkbox-container { color: getBlue($theme); } // [3.1-A]
+
+            input[type="checkbox"]:active             { border-color: getBlue($theme); }
+            input[type="checkbox"]:checked            { background-color: getBlue($theme); border-color: getBlue($theme); }
+            input[type="checkbox"]:checked::after     { border-color: getBlueContrast($theme); }
+
+            .matcha-checkbox-container .ripple {
+                background: rgba(getBlueContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: light-blue ─────────────────────────────────────────────
+        &[color="light-blue"] {
+            .matcha-checkbox-container { color: getLightBlue($theme); } // [3.1-A]
+
+            input[type="checkbox"]:active             { border-color: getLightBlue($theme); }
+            input[type="checkbox"]:checked            { background-color: getLightBlue($theme); border-color: getLightBlue($theme); }
+            input[type="checkbox"]:checked::after     { border-color: getLightBlueContrast($theme); }
+
+            .matcha-checkbox-container .ripple {
+                background: rgba(getLightBlueContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: cyan ───────────────────────────────────────────────────
+        &[color="cyan"] {
+            .matcha-checkbox-container { color: getCyan($theme); } // [3.1-A]
+
+            input[type="checkbox"]:active             { border-color: getCyan($theme); }
+            input[type="checkbox"]:checked            { background-color: getCyan($theme); border-color: getCyan($theme); }
+            input[type="checkbox"]:checked::after     { border-color: getCyanContrast($theme); }
+
+            .matcha-checkbox-container .ripple {
+                background: rgba(getCyanContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: teal ───────────────────────────────────────────────────
+        &[color="teal"] {
+            .matcha-checkbox-container { color: getTeal($theme); } // [3.1-A]
+
+            input[type="checkbox"]:active             { border-color: getTeal($theme); }
+            input[type="checkbox"]:checked            { background-color: getTeal($theme); border-color: getTeal($theme); }
+            input[type="checkbox"]:checked::after     { border-color: getTealContrast($theme); }
+
+            .matcha-checkbox-container .ripple {
+                background: rgba(getTealContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: green ──────────────────────────────────────────────────
+        &[color="green"] {
+            .matcha-checkbox-container { color: getGreen($theme); } // [3.1-A]
+
+            input[type="checkbox"]:active             { border-color: getGreen($theme); }
+            input[type="checkbox"]:checked            { background-color: getGreen($theme); border-color: getGreen($theme); }
+            input[type="checkbox"]:checked::after     { border-color: getGreenContrast($theme); }
+
+            .matcha-checkbox-container .ripple {
+                background: rgba(getGreenContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: light-green ────────────────────────────────────────────
+        &[color="light-green"] {
+            .matcha-checkbox-container { color: getLightGreen($theme); } // [3.1-A]
+
+            input[type="checkbox"]:active             { border-color: getLightGreen($theme); }
+            input[type="checkbox"]:checked            { background-color: getLightGreen($theme); border-color: getLightGreen($theme); }
+            input[type="checkbox"]:checked::after     { border-color: getLightGreenContrast($theme); }
+
+            .matcha-checkbox-container .ripple {
+                background: rgba(getLightGreenContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: lime ───────────────────────────────────────────────────
+        &[color="lime"] {
+            .matcha-checkbox-container { color: getLime($theme); } // [3.1-A]
+
+            input[type="checkbox"]:active             { border-color: getLime($theme); }
+            input[type="checkbox"]:checked            { background-color: getLime($theme); border-color: getLime($theme); }
+            input[type="checkbox"]:checked::after     { border-color: getLimeContrast($theme); }
+
+            .matcha-checkbox-container .ripple {
+                background: rgba(getLimeContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: yellow ─────────────────────────────────────────────────
+        &[color="yellow"] {
+            .matcha-checkbox-container { color: getYellow($theme); } // [3.1-A]
+
+            input[type="checkbox"]:active             { border-color: getYellow($theme); }
+            input[type="checkbox"]:checked            { background-color: getYellow($theme); border-color: getYellow($theme); }
+            input[type="checkbox"]:checked::after     { border-color: getYellowContrast($theme); }
+
+            .matcha-checkbox-container .ripple {
+                background: rgba(getYellowContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: amber ──────────────────────────────────────────────────
+        &[color="amber"] {
+            .matcha-checkbox-container { color: getAmber($theme); } // [3.1-A]
+
+            input[type="checkbox"]:active             { border-color: getAmber($theme); }
+            input[type="checkbox"]:checked            { background-color: getAmber($theme); border-color: getAmber($theme); }
+            input[type="checkbox"]:checked::after     { border-color: getAmberContrast($theme); }
+
+            .matcha-checkbox-container .ripple {
+                background: rgba(getAmberContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: orange ─────────────────────────────────────────────────
+        &[color="orange"] {
+            .matcha-checkbox-container { color: getOrange($theme); } // [3.1-A]
+
+            input[type="checkbox"]:active             { border-color: getOrange($theme); }
+            input[type="checkbox"]:checked            { background-color: getOrange($theme); border-color: getOrange($theme); }
+            input[type="checkbox"]:checked::after     { border-color: getOrangeContrast($theme); }
+
+            .matcha-checkbox-container .ripple {
+                background: rgba(getOrangeContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: deep-orange ────────────────────────────────────────────
+        &[color="deep-orange"] {
+            .matcha-checkbox-container { color: getDeepOrange($theme); } // [3.1-A]
+
+            input[type="checkbox"]:active             { border-color: getDeepOrange($theme); }
+            input[type="checkbox"]:checked            { background-color: getDeepOrange($theme); border-color: getDeepOrange($theme); }
+            input[type="checkbox"]:checked::after     { border-color: getDeepOrangeContrast($theme); }
+
+            .matcha-checkbox-container .ripple {
+                background: rgba(getDeepOrangeContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: brown ──────────────────────────────────────────────────
+        &[color="brown"] {
+            .matcha-checkbox-container { color: getBrown($theme); } // [3.1-A]
+
+            input[type="checkbox"]:active             { border-color: getBrown($theme); }
+            input[type="checkbox"]:checked            { background-color: getBrown($theme); border-color: getBrown($theme); }
+            input[type="checkbox"]:checked::after     { border-color: getBrownContrast($theme); }
+
+            .matcha-checkbox-container .ripple {
+                background: rgba(getBrownContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: grey ───────────────────────────────────────────────────
+        &[color="grey"] {
+            .matcha-checkbox-container { color: getGrey($theme); } // [3.1-A]
+
+            input[type="checkbox"]:active             { border-color: getGrey($theme); }
+            input[type="checkbox"]:checked            { background-color: getGrey($theme); border-color: getGrey($theme); }
+            input[type="checkbox"]:checked::after     { border-color: getGreyContrast($theme); }
+
+            .matcha-checkbox-container .ripple {
+                background: rgba(getGreyContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Paleta: blue-grey ──────────────────────────────────────────────
+        &[color="blue-grey"] {
+            .matcha-checkbox-container { color: getBlueGrey($theme); } // [3.1-A]
+
+            input[type="checkbox"]:active             { border-color: getBlueGrey($theme); }
+            input[type="checkbox"]:checked            { background-color: getBlueGrey($theme); border-color: getBlueGrey($theme); }
+            input[type="checkbox"]:checked::after     { border-color: getBlueGreyContrast($theme); }
+
+            .matcha-checkbox-container .ripple {
+                background: rgba(getBlueGreyContrast($theme), 0.1) !important; // ok: ripple palette
+            }
+        }
+
+        // ── Semântica: primary ─────────────────────────────────────────────
+        &[color="primary"] {
+            .matcha-checkbox-container { color: var(--matcha-color-primary, #{getPrimary($theme)}); } // [3.1-A]
+
+            input[type="checkbox"]:active             { border-color: var(--matcha-color-primary, #{getPrimary($theme)}); }
+            input[type="checkbox"]:checked            { background-color: var(--matcha-color-primary, #{getPrimary($theme)}); border-color: var(--matcha-color-primary, #{getPrimary($theme)}); }
+            input[type="checkbox"]:checked::after     { border-color: getPrimaryContrast($theme); }
+
+            .matcha-checkbox-container .ripple {
+                background: var(--matcha-color-primary-contrast-alpha, #{getPrimaryContrastAlpha($theme)}) !important;
+            }
+        }
+
+        // ── Semântica: accent ──────────────────────────────────────────────
+        &[color="accent"] {
+            .matcha-checkbox-container { color: var(--matcha-color-accent, #{getAccent($theme)}); } // [3.1-A]
+
+            input[type="checkbox"]:active             { border-color: var(--matcha-color-accent, #{getAccent($theme)}); }
+            input[type="checkbox"]:checked            { background-color: var(--matcha-color-accent, #{getAccent($theme)}); border-color: var(--matcha-color-accent, #{getAccent($theme)}); }
+            input[type="checkbox"]:checked::after     { border-color: getAccentContrast($theme); }
+
+            .matcha-checkbox-container .ripple {
+                background: var(--matcha-color-accent-contrast-alpha, #{getAccentContrastAlpha($theme)}) !important;
+            }
+        }
+
+        // ── Semântica: success ─────────────────────────────────────────────
+        &[color="success"] {
+            .matcha-checkbox-container { color: getSuccess($theme); } // [3.1-A]
+
+            input[type="checkbox"]:active             { border-color: getSuccess($theme); }
+            input[type="checkbox"]:checked            { background-color: getSuccess($theme); border-color: getSuccess($theme); }
+            input[type="checkbox"]:checked::after     { border-color: getSuccessContrast($theme); }
+
+            .matcha-checkbox-container .ripple {
+                background: var(--matcha-color-success-contrast-alpha, #{getSuccessContrastAlpha($theme)}) !important;
+            }
+        }
+
+        // ── Semântica: warn ────────────────────────────────────────────────
+        &[color="warn"] {
+            .matcha-checkbox-container { color: getWarn($theme); } // [3.1-A]
+
+            input[type="checkbox"]:active             { border-color: getWarn($theme); }
+            input[type="checkbox"]:checked            { background-color: getWarn($theme); border-color: getWarn($theme); }
+            input[type="checkbox"]:checked::after     { border-color: getWarnContrast($theme); }
+
+            .matcha-checkbox-container .ripple {
+                background: var(--matcha-color-warn-contrast-alpha, #{getWarnContrastAlpha($theme)}) !important;
+            }
+        }
+
+        // ── Semântica: danger ──────────────────────────────────────────────
+        &[color="danger"] {
+            .matcha-checkbox-container { color: getDanger($theme); } // [3.1-A]
+
+            input[type="checkbox"]:active             { border-color: getDanger($theme); }
+            input[type="checkbox"]:checked            { background-color: getDanger($theme); border-color: getDanger($theme); }
+            input[type="checkbox"]:checked::after     { border-color: getDangerContrast($theme); }
+
+            .matcha-checkbox-container .ripple {
+                background: var(--matcha-color-danger-contrast-alpha, #{getDangerContrastAlpha($theme)}) !important;
+            }
+        }
+
+        // ── Semântica: info ────────────────────────────────────────────────
+        &[color="info"] {
+            .matcha-checkbox-container { color: getInfo($theme); } // [3.1-A]
+
+            input[type="checkbox"]:active             { border-color: getInfo($theme); }
+            input[type="checkbox"]:checked            { background-color: getInfo($theme); border-color: getInfo($theme); }
+            input[type="checkbox"]:checked::after     { border-color: getInfoContrast($theme); }
+
+            .matcha-checkbox-container .ripple {
+                background: var(--matcha-color-info-contrast-alpha, #{getInfoContrastAlpha($theme)}) !important;
+            }
+        }
+
+        // ── Error state (aligned with Figma State=Error) ──────────────────
+        &.matcha-checkbox-error,
+        &[error] {
+            input[type="checkbox"] {
+                border-color: var(--matcha-color-danger, #{getDanger($theme)});
+
+                &:checked {
+                    background-color: var(--matcha-color-danger, #{getDanger($theme)});
+                    border-color: var(--matcha-color-danger, #{getDanger($theme)});
+                }
+            }
+        }
+
+        // ── [3.1-E] Disabled — tokens semânticos ──────────────────────────
+        &[disabled] {
+            input[type="checkbox"] {
+                border-color: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
+
+                &:checked {
+                    background-color: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
+                    border-color:     var(--matcha-color-disabled-bg, #{getDisabled($theme)});
+
+                    &::after {
+                        border-color: var(--matcha-color-disabled-fg, #{getDisabledBgContrast($theme)});
+                    }
+                }
+            }
+
+            .matcha-checkbox-container {
+                color: var(--matcha-color-disabled-fg, #{getDisabledBgContrast($theme)});
+            }
+
+            .matcha-checkbox-label {
+                color: var(--matcha-color-disabled-fg, #{getDisabledBgContrast($theme)});
+            }
+        }
+
+        // ── [3.1-D] :focus-visible — DEVE ficar no mixin ──────────────────
+        .matcha-checkbox-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-checkbox-label {
+            color: getGrey($theme);
+        }
+    }
+}
+
+
+// =============================================================================
+// Bloco estrutural — fora do mixin de tema
+// =============================================================================
+
+// [3.1-A] Container recebe o state layer (mesmo pattern do radio)
+.matcha-checkbox-container {
+    position:      relative;
+    overflow:      hidden;
+    border-radius: 50%;    // área de hover circular
+
+    &::before {
+        content:        '';
+        position:       absolute;
+        inset:          0;
+        background:     currentColor;
+        opacity:        0;
+        border-radius:  inherit;
+        pointer-events: none;
+        transition:     opacity var(--matcha-duration-instant, 80ms) linear;
+    }
+}
+
+// [3.1-H] Seletor de contexto do pai — [disabled] está em matcha-checkbox, não no container
+matcha-checkbox:not([disabled]) .matcha-checkbox-container:hover::before  { opacity: var(--matcha-state-hover, 0.08); }
+matcha-checkbox:not([disabled]) .matcha-checkbox-container:active::before { opacity: var(--matcha-state-active, 0.12); }
+
+matcha-checkbox {
+    display:     inline-flex;
+    align-items: center;
+    gap:         var(--matcha-space-100, 8px);
+    cursor:      pointer;
+
+    input[type="checkbox"] {
+        appearance:         none;
+        -webkit-appearance: none;
+        width:              var(--matcha-checkbox-size, 18px);
+        height:             var(--matcha-checkbox-size, 18px);
+        padding:            0;
+        border-radius:      var(--matcha-radius-md, 4px);
+        border-width:       var(--matcha-border-thin, 2px);
+        border-style:       solid;
+        cursor:             pointer;
+        position:           relative;
+
+        // [3.1-F] transition específico (não 'all')
+        transition:         border-color 0.2s ease, background-color 0.2s ease;
+
+        // outline: none REMOVIDO — :focus-visible no mixin garante acessibilidade
+        // &:focus {} REMOVIDO — estava vazio (WCAG 2.4.7)
+
+        // Checkmark glyph: valores pixel-level s\u00e3o geometria do desenho
+        // dentro da caixa 16px (n\u00e3o tokens sem\u00e2nticos por natureza)
+        &:checked::after {
+            content:      '';
+            position:     absolute;
+            left:         var(--matcha-space-050, 4px);
+            top:          0;
+            width:        5px;  // glyph
+            height:       10px; // glyph
+            border-style: solid;
+            border-width: 0 var(--matcha-border-thin, 2px) var(--matcha-border-thin, 2px) 0;
+            transform:    rotate(45deg);
+        }
+
+        &:indeterminate::after {
+            content:  '';
+            position: absolute;
+            left:     3px; // glyph
+            top:      7px; // glyph
+            width:    var(--matcha-space-100, 8px);
+            height:   var(--matcha-border-thin, 2px);
+        }
+    }
+
+    // Figma matcha/checkbox label: 12px Regular line 16 (matcha/color/text/primary)
+    .matcha-checkbox-label {
+        font-size:   var(--matcha-text-body-sm, 12px);
+        font-weight: var(--matcha-weight-regular, 400);
+        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
+    &[disabled] {
+        pointer-events: none;
+        cursor:         default;
+
+        .matcha-checkbox-label {
+            cursor: default;
+        }
+    }
+
+    // [3.1-G] Movimento reduzido — obrigatório (WCAG 2.3.3)
+    @media (prefers-reduced-motion: reduce) {
+        input[type="checkbox"] { transition: none; }
+
+        .matcha-checkbox-container::before { transition: none; }
+    }
+}