@inchurch/matcha-theme 20.0.11 → 20.277.0

package/components/matcha-slide-toggle.scss

@@ -23,7 +23,7 @@
         input[type="checkbox"] {
             &::before {
                 background-color: transparent;
-                border-color: var(--matcha-color-text-label, #{getGrey($theme)});
+                border-color: var(--matcha-color-text-label);
             }
 
             &::after {
@@ -37,356 +37,90 @@
         &[color="accent"] {
             // [3.1-A] color no label → currentColor para o state layer
             label {
-                color: var(--matcha-color-accent, #{getAccent($theme)});
+                color: var(--matcha-color-accent);
             }
 
             input[type="checkbox"] {
                 &:checked {
                     &::before {
-                        background-color: var(--matcha-color-accent, #{getAccent($theme)});
-                        border-color: var(--matcha-color-accent, #{getAccent($theme)});
+                        background-color: var(--matcha-color-accent);
+                        border-color: var(--matcha-color-accent);
                     }
 
                     &::after {
-                        background-color: getAccentContrast($theme);
+                        background-color: var(--matcha-color-accent-contrast);
                     }
                 }
             }
         }
 
-        // ── 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]
+            label { color: var(--matcha-color-primary); } // [3.1-A]
 
             input[type="checkbox"]:checked::before {
-                background-color: var(--matcha-color-primary, #{getPrimary($theme)});
-                border-color: var(--matcha-color-primary, #{getPrimary($theme)});
+                background-color: var(--matcha-color-primary);
+                border-color: var(--matcha-color-primary);
             }
 
             input[type="checkbox"]:checked::after {
-                background-color: getPrimaryContrast($theme);
+                background-color: var(--matcha-color-primary-contrast);
             }
         }
 
         // ── Semântica: success ─────────────────────────────────────────────
         &[color="success"] {
-            label { color: getSuccess($theme); } // [3.1-A]
+            label { color: var(--matcha-color-success); } // [3.1-A]
 
             input[type="checkbox"]:checked::before {
-                background-color: getSuccess($theme);
-                border-color: getSuccess($theme);
+                background-color: var(--matcha-color-success);
+                border-color: var(--matcha-color-success);
             }
 
             input[type="checkbox"]:checked::after {
-                background-color: getSuccessContrast($theme);
+                background-color: var(--matcha-color-success-contrast);
             }
         }
 
         // ── Semântica: warn ────────────────────────────────────────────────
         &[color="warn"] {
-            label { color: getWarn($theme); } // [3.1-A]
+            label { color: var(--matcha-color-warn); } // [3.1-A]
 
             input[type="checkbox"]:checked::before {
-                background-color: getWarn($theme);
-                border-color: getWarn($theme);
+                background-color: var(--matcha-color-warn);
+                border-color: var(--matcha-color-warn);
             }
 
             input[type="checkbox"]:checked::after {
-                background-color: getWarnContrast($theme);
+                background-color: var(--matcha-color-warn-contrast);
             }
         }
 
         // ── Semântica: danger ──────────────────────────────────────────────
         &[color="danger"] {
-            label { color: getDanger($theme); } // [3.1-A]
+            label { color: var(--matcha-color-danger); } // [3.1-A]
 
             input[type="checkbox"]:checked::before {
-                background-color: getDanger($theme);
-                border-color: getDanger($theme);
+                background-color: var(--matcha-color-danger);
+                border-color: var(--matcha-color-danger);
             }
 
             input[type="checkbox"]:checked::after {
-                background-color: getDangerContrast($theme);
+                background-color: var(--matcha-color-danger-contrast);
             }
         }
 
         // ── Semântica: info ────────────────────────────────────────────────
         &[color="info"] {
-            label { color: getInfo($theme); } // [3.1-A]
+            label { color: var(--matcha-color-info); } // [3.1-A]
 
             input[type="checkbox"]:checked::before {
-                background-color: getInfo($theme);
-                border-color: getInfo($theme);
+                background-color: var(--matcha-color-info);
+                border-color: var(--matcha-color-info);
             }
 
             input[type="checkbox"]:checked::after {
-                background-color: getInfoContrast($theme);
+                background-color: var(--matcha-color-info-contrast);
             }
         }
 
@@ -395,12 +129,12 @@
         &[error] {
             input[type="checkbox"] {
                 &::before {
-                    border-color: var(--matcha-color-danger, #{getDanger($theme)});
+                    border-color: var(--matcha-color-danger);
                 }
 
                 &:checked::before {
-                    background-color: var(--matcha-color-danger, #{getDanger($theme)});
-                    border-color: var(--matcha-color-danger, #{getDanger($theme)});
+                    background-color: var(--matcha-color-danger);
+                    border-color: var(--matcha-color-danger);
                 }
             }
         }
@@ -418,17 +152,17 @@
         // ── [3.1-C] Disabled — tokens semânticos (sem opacity no host) ─────
         &[disabled] {
             label {
-                color: var(--matcha-color-disabled-fg, #{getDisabledBgContrast($theme)});
+                color: var(--matcha-color-disabled-fg);
             }
 
             input[type="checkbox"] {
                 &::before {
-                    background-color: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
-                    border-color:     var(--matcha-color-disabled-bg, #{getDisabled($theme)});
+                    background-color: var(--matcha-color-disabled-bg);
+                    border-color:     var(--matcha-color-disabled-bg);
                 }
 
                 &::after {
-                    background-color: var(--matcha-color-disabled-fg, #{getDisabledBgContrast($theme)});
+                    background-color: var(--matcha-color-disabled-fg);
                 }
             }
         }
@@ -438,13 +172,13 @@
         // 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)});
+                            var(--matcha-color-primary);
             outline-offset: var(--matcha-state-focus-ring-offset, 2px);
         }
 
-        // Label padrão — Figma: text-primary (não text-label cinza)
+        // Label padrão — Figma: text-primary. Slot pra consumer override.
         .matcha-slide-toggle-label {
-            color: var(--matcha-color-text-primary);
+            color: var(--matcha-slide-toggle-label-color, var(--matcha-color-text-primary));
         }
     }
 }
@@ -588,3 +322,48 @@ matcha-slide-toggle {
         label::before { transition: none; }
     }
 }
+
+// ── Forced colors ──
+@media (forced-colors: active) {
+    matcha-slide-toggle,
+    .matcha-slide-toggle {
+        input[type="checkbox"] {
+            // Track
+            &::before {
+                background: Canvas !important;
+                border: 1px solid CanvasText !important;
+            }
+
+            // Thumb
+            &::after {
+                background: ButtonFace !important;
+                border: 1px solid CanvasText !important;
+            }
+
+            &:checked::before {
+                background: Highlight !important;
+                border-color: Highlight !important;
+            }
+
+            &:focus-visible::before {
+                outline: 2px solid CanvasText !important;
+                outline-offset: 2px;
+            }
+
+            &:disabled::before,
+            &:disabled::after {
+                border-color: GrayText !important;
+            }
+        }
+    }
+}
+
+// ── Print ──
+@media print {
+    matcha-slide-toggle,
+    .matcha-slide-toggle {
+        input[type="checkbox"] {
+            &::before { border: 1px solid currentColor !important; }
+        }
+    }
+}