@inchurch/matcha-theme 20.276.0 → 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,7 +172,7 @@
         // 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);
         }
 

package/components/matcha-slider.scss

@@ -25,7 +25,7 @@
 
   .matcha-slider {
     // Default (sem data-color) cai em accent
-    --matcha-slider-fill: var(--matcha-color-accent, #{getAccent($theme)});
+    --matcha-slider-fill: var(--matcha-color-accent);
 
     // Bind por data-color → CSS var pra cores serem trocáveis sem repetir regras
     @each $name, $fn in $semantic-colors {
@@ -44,18 +44,18 @@
 
     // ── Disabled — sobrescreve fill, escurece labels ──
     &.disabled {
-      .selection-bar { background-color: var(--matcha-color-disabled-bg, #{getDisabled($theme)}); }
-      .pointer       { background-color: var(--matcha-color-disabled-bg, #{getDisabled($theme)}); }
+      .selection-bar { background-color: var(--matcha-color-disabled-bg); }
+      .pointer       { background-color: var(--matcha-color-disabled-bg); }
 
       .pointer-label,
       .floor-label,
       .ceil-label {
-        color: var(--matcha-color-disabled-fg, #{getDisabledContrast($theme)});
+        color: var(--matcha-color-disabled-fg);
       }
 
       // Pill do label fica neutro no disabled (não destaca valor que não pode mudar)
       .pointer-label {
-        background-color: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
+        background-color: var(--matcha-color-disabled-bg);
       }
     }
   }

package/components/matcha-snack-bar.scss

@@ -152,7 +152,6 @@ matcha-snack-bar {
 // =============================================================================
 
 @mixin matcha-snack-bar-theme($theme) {
-  $is-dark: map.get($theme, is-dark);
 
   matcha-snack-bar {
 
@@ -160,21 +159,21 @@ matcha-snack-bar {
     // Bg semi-transparente pro frosted glass (backdrop-filter) ter o que blurrar.
     // Fallback sólido em browsers sem suporte (degrade gracioso via @supports).
     .matcha-snack-bar-content {
-      background: var(--matcha-color-surface-card-alpha, #{rgba(if($is-dark, #1C1F26, #FFFFFF), 0.82)});
-      color: var(--matcha-color-fg, #{getForeground($theme)});
-      border-color: var(--matcha-color-border, #{getGrey($theme)});
-      box-shadow: var(--matcha-shadow-3, #{if($is-dark, $shadow-3-dark, $shadow-3-light)});
+      background: var(--matcha-color-surface-card-alpha);
+      color: var(--matcha-color-fg);
+      border-color: var(--matcha-color-border);
+      box-shadow: var(--matcha-shadow-3);
     }
 
     // Fallback sólido pra browsers sem backdrop-filter.
     @supports not (backdrop-filter: blur(1px)) {
       .matcha-snack-bar-content {
-        background: var(--matcha-color-surface, #{getSurface($theme)});
+        background: var(--matcha-color-surface);
       }
     }
 
-    .matcha-snack-bar-title       { color: var(--matcha-color-fg, #{getForeground($theme)}); }
-    .matcha-snack-bar-description { color: var(--matcha-color-text-label, #{getBlueGrey($theme)}); }
+    .matcha-snack-bar-title       { color: var(--matcha-color-fg); }
+    .matcha-snack-bar-description { color: var(--matcha-color-text-label); }
 
     // ── Status — canon DSV3 (mesmo pattern do matcha-notification):
     //    1. `border-left-color` → cor do status na borda esquerda
@@ -186,8 +185,8 @@ matcha-snack-bar {
 
     &[color="error"]   .matcha-snack-bar-content,
     &[color="danger"]  .matcha-snack-bar-content {
-      border-left-color: var(--matcha-color-danger, #{getDanger($theme)});
-      --matcha-icon-color: var(--matcha-color-danger, #{getDanger($theme)});
+      border-left-color: var(--matcha-color-danger);
+      --matcha-icon-color: var(--matcha-color-danger);
 
       .matcha-snack-bar-action {
         --matcha-button-color: var(--matcha-color-danger);
@@ -202,8 +201,8 @@ matcha-snack-bar {
 
     &[color="warning"] .matcha-snack-bar-content,
     &[color="warn"]    .matcha-snack-bar-content {
-      border-left-color: var(--matcha-color-warn, #{getWarn($theme)});
-      --matcha-icon-color: var(--matcha-color-warn, #{getWarn($theme)});
+      border-left-color: var(--matcha-color-warn);
+      --matcha-icon-color: var(--matcha-color-warn);
 
       .matcha-snack-bar-action {
         --matcha-button-color: var(--matcha-color-warn);
@@ -217,8 +216,8 @@ matcha-snack-bar {
     }
 
     &[color="success"] .matcha-snack-bar-content {
-      border-left-color: var(--matcha-color-success, #{getSuccess($theme)});
-      --matcha-icon-color: var(--matcha-color-success, #{getSuccess($theme)});
+      border-left-color: var(--matcha-color-success);
+      --matcha-icon-color: var(--matcha-color-success);
 
       .matcha-snack-bar-action {
         --matcha-button-color: var(--matcha-color-success);
@@ -232,8 +231,8 @@ matcha-snack-bar {
     }
 
     &[color="info"] .matcha-snack-bar-content {
-      border-left-color: var(--matcha-color-info, #{getInfo($theme)});
-      --matcha-icon-color: var(--matcha-color-info, #{getInfo($theme)});
+      border-left-color: var(--matcha-color-info);
+      --matcha-icon-color: var(--matcha-color-info);
 
       .matcha-snack-bar-action {
         --matcha-button-color: var(--matcha-color-info);
@@ -248,8 +247,8 @@ matcha-snack-bar {
 
     // Neutro — bg/border surface; icon + CTA mantêm cor padrão (não-status).
     &[color="neutral"] .matcha-snack-bar-content {
-      border-left-color: var(--matcha-color-surface-border, #{getGrey($theme)});
-      --matcha-icon-color: var(--matcha-color-icon-default, #{getBlueGrey($theme)});
+      border-left-color: var(--matcha-color-surface-border);
+      --matcha-icon-color: var(--matcha-color-icon-default);
 
       .matcha-snack-bar-action {
         color: var(--matcha-color-text-label);