@inchurch/matcha-theme 20.0.3

package/components/matcha-slide-toggle.scss

@@ -0,0 +1,590 @@
+// =============================================================================
+// matcha-slide-toggle.scss — Migração Fase 3.1
+//
+// Template B: replaced element com child container
+//   - input[type="checkbox"] é replaced element (::before/::after são pseudo-elementos
+//     internos do browser para track/thumb, não suportam state layer externo)
+//   - label é o container hit area → recebe o state layer (::before)
+//   - Pattern: color: getXxx($theme) no label → currentColor funciona no ::before
+//
+// Mudanças:
+//   [3.1-A] State layer em label (container do replaced element)
+//   [3.1-B] cursor: not-allowed + opacity no .matcha-slide-toggle-disabled removidos
+//   [3.1-C] Disabled: tokens semânticos no mixin
+//   [3.1-D] :focus-within no mixin (foco está no input dentro do label)
+//   [3.1-E] transition: all → transições específicas
+//   [3.1-F] @media (prefers-reduced-motion: reduce) adicionado
+//   [3.1-G] :not([disabled]) guards via seletor de contexto do pai
+// =============================================================================
+
+@mixin matcha-slide-toggle-theme($theme) {
+    matcha-slide-toggle {
+        // Figma matcha/switch (14510:226): track off sem fill + stroke text-label, thumb off text-primary
+        input[type="checkbox"] {
+            &::before {
+                background-color: transparent;
+                border-color: var(--matcha-color-text-label, #{getGrey($theme)});
+            }
+
+            &::after {
+                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+                background-color: var(--matcha-color-text-primary);
+            }
+        }
+
+        // ── Sem cor / accent ───────────────────────────────────────────────
+        &:not([color]),
+        &[color="accent"] {
+            // [3.1-A] color no label → currentColor para o state layer
+            label {
+                color: var(--matcha-color-accent, #{getAccent($theme)});
+            }
+
+            input[type="checkbox"] {
+                &:checked {
+                    &::before {
+                        background-color: var(--matcha-color-accent, #{getAccent($theme)});
+                        border-color: var(--matcha-color-accent, #{getAccent($theme)});
+                    }
+
+                    &::after {
+                        background-color: getAccentContrast($theme);
+                    }
+                }
+            }
+        }
+
+        // ── Paleta: red ────────────────────────────────────────────────────
+        &[color="red"] {
+            label { color: getRed($theme); } // [3.1-A]
+
+            input[type="checkbox"]:checked::before {
+                background-color: getRed($theme);
+                border-color: getRed($theme);
+            }
+
+            input[type="checkbox"]:checked::after {
+                background-color: getRedContrast($theme);
+            }
+        }
+
+        // ── Paleta: pink ───────────────────────────────────────────────────
+        &[color="pink"] {
+            label { color: getPink($theme); } // [3.1-A]
+
+            input[type="checkbox"]:checked::before {
+                background-color: getPink($theme);
+                border-color: getPink($theme);
+            }
+
+            input[type="checkbox"]:checked::after {
+                background-color: getPinkContrast($theme);
+            }
+        }
+
+        // ── Paleta: purple ─────────────────────────────────────────────────
+        &[color="purple"] {
+            label { color: getPurple($theme); } // [3.1-A]
+
+            input[type="checkbox"]:checked::before {
+                background-color: getPurple($theme);
+                border-color: getPurple($theme);
+            }
+
+            input[type="checkbox"]:checked::after {
+                background-color: getPurpleContrast($theme);
+            }
+        }
+
+        // ── Paleta: deep-purple ────────────────────────────────────────────
+        &[color="deep-purple"] {
+            label { color: getDeepPurple($theme); } // [3.1-A]
+
+            input[type="checkbox"]:checked::before {
+                background-color: getDeepPurple($theme);
+                border-color: getDeepPurple($theme);
+            }
+
+            input[type="checkbox"]:checked::after {
+                background-color: getDeepPurpleContrast($theme);
+            }
+        }
+
+        // ── Paleta: indigo ─────────────────────────────────────────────────
+        &[color="indigo"] {
+            label { color: getIndigo($theme); } // [3.1-A]
+
+            input[type="checkbox"]:checked::before {
+                background-color: getIndigo($theme);
+                border-color: getIndigo($theme);
+            }
+
+            input[type="checkbox"]:checked::after {
+                background-color: getIndigoContrast($theme);
+            }
+        }
+
+        // ── Paleta: blue ───────────────────────────────────────────────────
+        &[color="blue"] {
+            label { color: getBlue($theme); } // [3.1-A]
+
+            input[type="checkbox"]:checked::before {
+                background-color: getBlue($theme);
+                border-color: getBlue($theme);
+            }
+
+            input[type="checkbox"]:checked::after {
+                background-color: getBlueContrast($theme);
+            }
+        }
+
+        // ── Paleta: light-blue ─────────────────────────────────────────────
+        &[color="light-blue"] {
+            label { color: getLightBlue($theme); } // [3.1-A]
+
+            input[type="checkbox"]:checked::before {
+                background-color: getLightBlue($theme);
+                border-color: getLightBlue($theme);
+            }
+
+            input[type="checkbox"]:checked::after {
+                background-color: getLightBlueContrast($theme);
+            }
+        }
+
+        // ── Paleta: cyan ───────────────────────────────────────────────────
+        &[color="cyan"] {
+            label { color: getCyan($theme); } // [3.1-A]
+
+            input[type="checkbox"]:checked::before {
+                background-color: getCyan($theme);
+                border-color: getCyan($theme);
+            }
+
+            input[type="checkbox"]:checked::after {
+                background-color: getCyanContrast($theme);
+            }
+        }
+
+        // ── Paleta: teal ───────────────────────────────────────────────────
+        &[color="teal"] {
+            label { color: getTeal($theme); } // [3.1-A]
+
+            input[type="checkbox"]:checked::before {
+                background-color: getTeal($theme);
+                border-color: getTeal($theme);
+            }
+
+            input[type="checkbox"]:checked::after {
+                background-color: getTealContrast($theme);
+            }
+        }
+
+        // ── Paleta: green ──────────────────────────────────────────────────
+        &[color="green"] {
+            label { color: getGreen($theme); } // [3.1-A]
+
+            input[type="checkbox"]:checked::before {
+                background-color: getGreen($theme);
+                border-color: getGreen($theme);
+            }
+
+            input[type="checkbox"]:checked::after {
+                background-color: getGreenContrast($theme);
+            }
+        }
+
+        // ── Paleta: light-green ────────────────────────────────────────────
+        &[color="light-green"] {
+            label { color: getLightGreen($theme); } // [3.1-A]
+
+            input[type="checkbox"]:checked::before {
+                background-color: getLightGreen($theme);
+                border-color: getLightGreen($theme);
+            }
+
+            input[type="checkbox"]:checked::after {
+                background-color: getLightGreenContrast($theme);
+            }
+        }
+
+        // ── Paleta: lime ───────────────────────────────────────────────────
+        &[color="lime"] {
+            label { color: getLime($theme); } // [3.1-A]
+
+            input[type="checkbox"]:checked::before {
+                background-color: getLime($theme);
+                border-color: getLime($theme);
+            }
+
+            input[type="checkbox"]:checked::after {
+                background-color: getLimeContrast($theme);
+            }
+        }
+
+        // ── Paleta: yellow ─────────────────────────────────────────────────
+        &[color="yellow"] {
+            label { color: getYellow($theme); } // [3.1-A]
+
+            input[type="checkbox"]:checked::before {
+                background-color: getYellow($theme);
+                border-color: getYellow($theme);
+            }
+
+            input[type="checkbox"]:checked::after {
+                background-color: getYellowContrast($theme);
+            }
+        }
+
+        // ── Paleta: amber ──────────────────────────────────────────────────
+        &[color="amber"] {
+            label { color: getAmber($theme); } // [3.1-A]
+
+            input[type="checkbox"]:checked::before {
+                background-color: getAmber($theme);
+                border-color: getAmber($theme);
+            }
+
+            input[type="checkbox"]:checked::after {
+                background-color: getAmberContrast($theme);
+            }
+        }
+
+        // ── Paleta: orange ─────────────────────────────────────────────────
+        &[color="orange"] {
+            label { color: getOrange($theme); } // [3.1-A]
+
+            input[type="checkbox"]:checked::before {
+                background-color: getOrange($theme);
+                border-color: getOrange($theme);
+            }
+
+            input[type="checkbox"]:checked::after {
+                background-color: getOrangeContrast($theme);
+            }
+        }
+
+        // ── Paleta: deep-orange ────────────────────────────────────────────
+        &[color="deep-orange"] {
+            label { color: getDeepOrange($theme); } // [3.1-A]
+
+            input[type="checkbox"]:checked::before {
+                background-color: getDeepOrange($theme);
+                border-color: getDeepOrange($theme);
+            }
+
+            input[type="checkbox"]:checked::after {
+                background-color: getDeepOrangeContrast($theme);
+            }
+        }
+
+        // ── Paleta: brown ──────────────────────────────────────────────────
+        &[color="brown"] {
+            label { color: getBrown($theme); } // [3.1-A]
+
+            input[type="checkbox"]:checked::before {
+                background-color: getBrown($theme);
+                border-color: getBrown($theme);
+            }
+
+            input[type="checkbox"]:checked::after {
+                background-color: getBrownContrast($theme);
+            }
+        }
+
+        // ── Paleta: grey ───────────────────────────────────────────────────
+        &[color="grey"] {
+            label { color: getGrey($theme); } // [3.1-A]
+
+            input[type="checkbox"]:checked::before {
+                background-color: getGrey($theme);
+                border-color: getGrey($theme);
+            }
+
+            input[type="checkbox"]:checked::after {
+                background-color: getGreyContrast($theme);
+            }
+        }
+
+        // ── Paleta: blue-grey ──────────────────────────────────────────────
+        &[color="blue-grey"] {
+            label { color: getBlueGrey($theme); } // [3.1-A]
+
+            input[type="checkbox"]:checked::before {
+                background-color: getBlueGrey($theme);
+                border-color: getBlueGrey($theme);
+            }
+
+            input[type="checkbox"]:checked::after {
+                background-color: getBlueGreyContrast($theme);
+            }
+        }
+
+        // ── Semântica: primary ─────────────────────────────────────────────
+        &[color="primary"] {
+            label { color: var(--matcha-color-primary, #{getPrimary($theme)}); } // [3.1-A]
+
+            input[type="checkbox"]:checked::before {
+                background-color: var(--matcha-color-primary, #{getPrimary($theme)});
+                border-color: var(--matcha-color-primary, #{getPrimary($theme)});
+            }
+
+            input[type="checkbox"]:checked::after {
+                background-color: getPrimaryContrast($theme);
+            }
+        }
+
+        // ── Semântica: success ─────────────────────────────────────────────
+        &[color="success"] {
+            label { color: getSuccess($theme); } // [3.1-A]
+
+            input[type="checkbox"]:checked::before {
+                background-color: getSuccess($theme);
+                border-color: getSuccess($theme);
+            }
+
+            input[type="checkbox"]:checked::after {
+                background-color: getSuccessContrast($theme);
+            }
+        }
+
+        // ── Semântica: warn ────────────────────────────────────────────────
+        &[color="warn"] {
+            label { color: getWarn($theme); } // [3.1-A]
+
+            input[type="checkbox"]:checked::before {
+                background-color: getWarn($theme);
+                border-color: getWarn($theme);
+            }
+
+            input[type="checkbox"]:checked::after {
+                background-color: getWarnContrast($theme);
+            }
+        }
+
+        // ── Semântica: danger ──────────────────────────────────────────────
+        &[color="danger"] {
+            label { color: getDanger($theme); } // [3.1-A]
+
+            input[type="checkbox"]:checked::before {
+                background-color: getDanger($theme);
+                border-color: getDanger($theme);
+            }
+
+            input[type="checkbox"]:checked::after {
+                background-color: getDangerContrast($theme);
+            }
+        }
+
+        // ── Semântica: info ────────────────────────────────────────────────
+        &[color="info"] {
+            label { color: getInfo($theme); } // [3.1-A]
+
+            input[type="checkbox"]:checked::before {
+                background-color: getInfo($theme);
+                border-color: getInfo($theme);
+            }
+
+            input[type="checkbox"]:checked::after {
+                background-color: getInfoContrast($theme);
+            }
+        }
+
+        // ── Error state (aligned with Figma State=Error) ──────────────────
+        &.matcha-slide-toggle-error,
+        &[error] {
+            input[type="checkbox"] {
+                &::before {
+                    border-color: var(--matcha-color-danger, #{getDanger($theme)});
+                }
+
+                &:checked::before {
+                    background-color: var(--matcha-color-danger, #{getDanger($theme)});
+                    border-color: var(--matcha-color-danger, #{getDanger($theme)});
+                }
+            }
+        }
+
+        // ── Loading state (aligned with Figma State=Loading) ────────────────
+        &.matcha-slide-toggle-loading,
+        &[loading] {
+            pointer-events: none;
+
+            input[type="checkbox"]::after {
+                animation: matcha-toggle-loading 800ms linear infinite;
+            }
+        }
+
+        // ── [3.1-C] Disabled — tokens semânticos (sem opacity no host) ─────
+        &[disabled] {
+            label {
+                color: var(--matcha-color-disabled-fg, #{getDisabledBgContrast($theme)});
+            }
+
+            input[type="checkbox"] {
+                &::before {
+                    background-color: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
+                    border-color:     var(--matcha-color-disabled-bg, #{getDisabled($theme)});
+                }
+
+                &::after {
+                    background-color: var(--matcha-color-disabled-fg, #{getDisabledBgContrast($theme)});
+                }
+            }
+        }
+
+        // Focus ring: só em navegação por teclado (não mostra em clique com mouse).
+        // :has(input:focus-visible) — apenas mostra outline quando o input interno
+        // tem focus-visible (keyboard nav), não em :focus geral (mouse click).
+        label:has(input:focus-visible) {
+            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 — Figma: text-primary (não text-label cinza)
+        .matcha-slide-toggle-label {
+            color: var(--matcha-color-text-primary);
+        }
+    }
+}
+
+
+// =============================================================================
+// Bloco estrutural — fora do mixin de tema
+// =============================================================================
+
+// [3.1-A] label recebe o state layer
+// input[type="checkbox"] é replaced element — state layer externo vai no container (label)
+matcha-slide-toggle label {
+    position:   relative;
+    overflow:   hidden;
+
+    // State layer — segue INTERACTION-SYSTEM.md template B
+    &::before {
+        content:        '';
+        position:       absolute;
+        inset:          0;
+        background:     currentColor; // usa color: getXxx($theme) definido no mixin por variante
+        opacity:        0;
+        pointer-events: none;
+        transition:     opacity var(--matcha-duration-instant, 80ms) linear;
+    }
+}
+
+// [3.1-G] Hover/active: [disabled] está em matcha-slide-toggle (pai), não no label
+// Seletor de contexto do pai evita ativar o state layer quando desabilitado
+matcha-slide-toggle:not([disabled]) label:hover::before  { opacity: var(--matcha-state-hover, 0.08); }
+matcha-slide-toggle:not([disabled]) label:active::before { opacity: var(--matcha-state-active, 0.12); }
+
+matcha-slide-toggle {
+    label {
+        display:                    inline-flex;
+        align-items:                center;
+        gap:                        var(--matcha-space-100, 8px); // Figma: gap 8 entre switch e content
+        cursor:                     pointer;
+        -webkit-tap-highlight-color: transparent;
+        vertical-align:             middle;
+
+        .matcha-slide-toggle-label {
+            font-family: var(--matcha-font-family, 'Manrope', sans-serif);
+            font-size:   var(--matcha-text-body-md, 14px);
+            line-height: 20px;
+            font-weight: 400;
+            user-select: none;
+        }
+    }
+
+    // [3.1-B] Disabled — sem cursor: not-allowed, sem opacity no host
+    // pointer-events: none bloqueia interação; cores via tokens no mixin
+    &[disabled] {
+        pointer-events: none;
+
+        label {
+            cursor: default;
+        }
+    }
+
+    input[type="checkbox"] {
+        appearance:         none;
+        -webkit-appearance: none;
+        position:           relative;
+        display:            inline-block;
+        width:              36px;
+        height:             20px;
+        margin:             0;
+        outline:            none;
+        cursor:             pointer;
+        vertical-align:     middle;
+        min-width:          36px;  // garante que não fique < 36px
+        flex-shrink:        0;     // se estiver dentro de um container flex
+
+        &::before {
+            content:       "";
+            position:      absolute;
+            top:           50%;
+            left:          0;
+            transform:     translateY(-50%);
+            width:         100%;
+            height:        20px;
+            border-width:  2px;
+            border-style:  solid;
+            border-radius: var(--matcha-radius-xl, 16px);
+            box-sizing:    border-box;
+
+            // [3.1-E] transition específico (não 'all')
+            transition:    background-color 0.15s linear;
+        }
+
+        // Figma matcha/switch: thumb 12×12 off → 16×16 on (14510:226)
+        &::after {
+            content:       "";
+            position:      absolute;
+            top:           4px;
+            left:          4px;
+            width:         12px;
+            height:        12px;
+            border-radius: 50%;
+
+            transition:
+                transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
+                width 0.15s cubic-bezier(0.4, 0, 0.2, 1),
+                height 0.15s cubic-bezier(0.4, 0, 0.2, 1),
+                top 0.15s cubic-bezier(0.4, 0, 0.2, 1),
+                left 0.15s cubic-bezier(0.4, 0, 0.2, 1),
+                background-color 0.15s linear,
+                outline 0.1s ease-out;
+        }
+
+        &:checked {
+            &::after {
+                top:       2px;
+                left:      2px;
+                width:     16px;
+                height:    16px;
+                transform: translateX(16px);  // desliza 16px (36 - 16 - 2×2 = 16)
+            }
+        }
+
+        &:focus-visible::after {
+            outline-offset: 2px;
+        }
+    }
+
+    // ── Loading animation ──
+    @keyframes matcha-toggle-loading {
+        0%   { opacity: 1; }
+        50%  { opacity: 0.4; }
+        100% { opacity: 1; }
+    }
+
+    // [3.1-F] Movimento reduzido — obrigatório (WCAG 2.3.3)
+    @media (prefers-reduced-motion: reduce) {
+        input[type="checkbox"] {
+            &::before { transition: none; }
+            &::after  { transition: none; animation: none; }
+        }
+
+        label::before { transition: none; }
+    }
+}