@inchurch/matcha-theme 20.0.8 → 20.276.0

package/components/matcha-scrollbox-shadow.scss

@@ -1,123 +1,123 @@
-@mixin matcha-scrollbox-shadow($theme) {
-    $is-dark: map-get($theme, is-dark);
-
-    // Drop shadow inside of area when scrolled vertically
-    .scrollbox,
-    .scrollbox-vertical,
-    .scrollbox-v,
-    .scrollbox-y {
-        overflow: overlay;
-        background:
-            /* Shadow covers */
-            linear-gradient(getSurface($theme) 30%, rgba(255, 255, 255, 0)),
-            linear-gradient(rgba(255, 255, 255, 0), getSurface($theme) 70%) 0 100%,
-            /* Shadows */
-            linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 50%),
-            linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 50%) 0 100%;
-
-        background-repeat: no-repeat;
-        background-color: getSurface($theme);
-        background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
-
-        /* Opera doesn't support this in the shorthand */
-        background-attachment: local, local, scroll, scroll;
-    }
-
-    // Drop shadow inside of area when scrolled horizontally
-    .scrollbox-horizontal,
-    .scrollbox-h,
-    .scrollbox-x {
-        $fg: if(getForeground($theme), getForeground($theme), #212121);
-        box-shadow: 0px -16px 0px 0px inset getSurface($theme), 20px 0 16px -24px inset rgba($fg, 0.15),
-            -20px 0 16px -24px inset rgba($fg, 0.15), 0px 2px 2px 0px rgba($fg, 0.035), 0px 2px 2px 0px rgba($fg, 0.035),
-            0px 2px 2px 0px rgba($fg, 0.035);
-        overflow: auto;
-        background: linear-gradient(90deg,
-                rgba(0, 0, 0, 0.1),
-                rgba(0, 0, 0, 0) calc(0% + 10px),
-                rgba(0, 0, 0, 0) calc(100% - 10px),
-                rgba(0, 0, 0, 0.1));
-
-        background: -moz-linear-gradient(90deg,
-                rgba(0, 0, 0, 0.1),
-                rgba(0, 0, 0, 0) calc(0% + 10px),
-                rgba(0, 0, 0, 0) calc(100% - 10px),
-                rgba(0, 0, 0, 0.1));
-
-        background: -webkit-linear-gradient(0deg,
-                rgba(0, 0, 0, 0.1),
-                rgba(0, 0, 0, 0) calc(0% + 10px),
-                rgba(0, 0, 0, 0) calc(100% - 10px),
-                rgba(0, 0, 0, 0.1));
-    }
-
-    .scrollbox-horizontal-content,
-    .scrollbox-h-content,
-    .scrollbox-x-content {
-        background: getSurface($theme);
-        background: linear-gradient(90deg,
-                getSurface($theme) 10px,
-                getSurface($theme),
-                rgba(255, 255, 255, 0) calc(0% + 10px),
-                rgba(255, 255, 255, 0) calc(100% - 10px),
-                getSurface($theme) 10px,
-                getSurface($theme));
-        background: -moz-linear-gradient(90deg,
-                getSurface($theme) 10px,
-                getSurface($theme),
-                rgba(255, 255, 255, 0) calc(0% + 10px),
-                rgba(255, 255, 255, 0) calc(100% - 10px),
-                getSurface($theme) 10px,
-                getSurface($theme));
-        background: -webkit-linear-gradient(0deg,
-                getSurface($theme) 10px,
-                getSurface($theme),
-                rgba(255, 255, 255, 0) calc(0% + 10px),
-                rgba(255, 255, 255, 0) calc(100% - 10px),
-                getSurface($theme) 10px,
-                getSurface($theme));
-    }
-
-    .scrollbox-horizontal-content-background,
-    .scrollbox-h-content-background,
-    .scrollbox-x-content-background {
-        background: getBackground($theme);
-        background: linear-gradient(90deg,
-                getBackground($theme) 10px,
-                getBackground($theme),
-                rgba(255, 255, 255, 0) calc(0% + 10px),
-                rgba(255, 255, 255, 0) calc(100% - 10px),
-                getBackground($theme) 10px,
-                getBackground($theme));
-        background: -moz-linear-gradient(90deg,
-                getBackground($theme) 10px,
-                getBackground($theme),
-                rgba(255, 255, 255, 0) calc(0% + 10px),
-                rgba(255, 255, 255, 0) calc(100% - 10px),
-                getBackground($theme) 10px,
-                getBackground($theme));
-        background: -webkit-linear-gradient(0deg,
-                getBackground($theme) 10px,
-                getBackground($theme),
-                rgba(255, 255, 255, 0) calc(0% + 10px),
-                rgba(255, 255, 255, 0) calc(100% - 10px),
-                getBackground($theme) 10px,
-                getBackground($theme));
-    }
-
-    .scrollbox-background {
-        overflow: overlay;
-        background:
-            /* Shadow covers */
-            linear-gradient(getBackground($theme) 30%, rgba(255, 255, 255, 0)),
-            linear-gradient(rgba(255, 255, 255, 0), getBackground($theme) 70%) 0 100%,
-            /* Shadows */
-            linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 50%),
-            linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 50%) 0 100%;
-        background-repeat: no-repeat;
-        background-color: getBackground($theme);
-        background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
-        /* Opera doesn't support this in the shorthand */
-        background-attachment: local, local, scroll, scroll;
-    }
+@mixin matcha-scrollbox-shadow($theme) {
+    $is-dark: map-get($theme, is-dark);
+
+    // Drop shadow inside of area when scrolled vertically
+    .scrollbox,
+    .scrollbox-vertical,
+    .scrollbox-v,
+    .scrollbox-y {
+        overflow: overlay;
+        background:
+            /* Shadow covers */
+            linear-gradient(getSurface($theme) 30%, rgba(255, 255, 255, 0)),
+            linear-gradient(rgba(255, 255, 255, 0), getSurface($theme) 70%) 0 100%,
+            /* Shadows */
+            linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 50%),
+            linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 50%) 0 100%;
+
+        background-repeat: no-repeat;
+        background-color: getSurface($theme);
+        background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+
+        /* Opera doesn't support this in the shorthand */
+        background-attachment: local, local, scroll, scroll;
+    }
+
+    // Drop shadow inside of area when scrolled horizontally
+    .scrollbox-horizontal,
+    .scrollbox-h,
+    .scrollbox-x {
+        $fg: if(getForeground($theme), getForeground($theme), #212121);
+        box-shadow: 0px -16px 0px 0px inset getSurface($theme), 20px 0 16px -24px inset rgba($fg, 0.15),
+            -20px 0 16px -24px inset rgba($fg, 0.15), 0px 2px 2px 0px rgba($fg, 0.035), 0px 2px 2px 0px rgba($fg, 0.035),
+            0px 2px 2px 0px rgba($fg, 0.035);
+        overflow: auto;
+        background: linear-gradient(90deg,
+                rgba(0, 0, 0, 0.1),
+                rgba(0, 0, 0, 0) calc(0% + 10px),
+                rgba(0, 0, 0, 0) calc(100% - 10px),
+                rgba(0, 0, 0, 0.1));
+
+        background: -moz-linear-gradient(90deg,
+                rgba(0, 0, 0, 0.1),
+                rgba(0, 0, 0, 0) calc(0% + 10px),
+                rgba(0, 0, 0, 0) calc(100% - 10px),
+                rgba(0, 0, 0, 0.1));
+
+        background: -webkit-linear-gradient(0deg,
+                rgba(0, 0, 0, 0.1),
+                rgba(0, 0, 0, 0) calc(0% + 10px),
+                rgba(0, 0, 0, 0) calc(100% - 10px),
+                rgba(0, 0, 0, 0.1));
+    }
+
+    .scrollbox-horizontal-content,
+    .scrollbox-h-content,
+    .scrollbox-x-content {
+        background: getSurface($theme);
+        background: linear-gradient(90deg,
+                getSurface($theme) 10px,
+                getSurface($theme),
+                rgba(255, 255, 255, 0) calc(0% + 10px),
+                rgba(255, 255, 255, 0) calc(100% - 10px),
+                getSurface($theme) 10px,
+                getSurface($theme));
+        background: -moz-linear-gradient(90deg,
+                getSurface($theme) 10px,
+                getSurface($theme),
+                rgba(255, 255, 255, 0) calc(0% + 10px),
+                rgba(255, 255, 255, 0) calc(100% - 10px),
+                getSurface($theme) 10px,
+                getSurface($theme));
+        background: -webkit-linear-gradient(0deg,
+                getSurface($theme) 10px,
+                getSurface($theme),
+                rgba(255, 255, 255, 0) calc(0% + 10px),
+                rgba(255, 255, 255, 0) calc(100% - 10px),
+                getSurface($theme) 10px,
+                getSurface($theme));
+    }
+
+    .scrollbox-horizontal-content-background,
+    .scrollbox-h-content-background,
+    .scrollbox-x-content-background {
+        background: getBackground($theme);
+        background: linear-gradient(90deg,
+                getBackground($theme) 10px,
+                getBackground($theme),
+                rgba(255, 255, 255, 0) calc(0% + 10px),
+                rgba(255, 255, 255, 0) calc(100% - 10px),
+                getBackground($theme) 10px,
+                getBackground($theme));
+        background: -moz-linear-gradient(90deg,
+                getBackground($theme) 10px,
+                getBackground($theme),
+                rgba(255, 255, 255, 0) calc(0% + 10px),
+                rgba(255, 255, 255, 0) calc(100% - 10px),
+                getBackground($theme) 10px,
+                getBackground($theme));
+        background: -webkit-linear-gradient(0deg,
+                getBackground($theme) 10px,
+                getBackground($theme),
+                rgba(255, 255, 255, 0) calc(0% + 10px),
+                rgba(255, 255, 255, 0) calc(100% - 10px),
+                getBackground($theme) 10px,
+                getBackground($theme));
+    }
+
+    .scrollbox-background {
+        overflow: overlay;
+        background:
+            /* Shadow covers */
+            linear-gradient(getBackground($theme) 30%, rgba(255, 255, 255, 0)),
+            linear-gradient(rgba(255, 255, 255, 0), getBackground($theme) 70%) 0 100%,
+            /* Shadows */
+            linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 50%),
+            linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 50%) 0 100%;
+        background-repeat: no-repeat;
+        background-color: getBackground($theme);
+        background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+        /* Opera doesn't support this in the shorthand */
+        background-attachment: local, local, scroll, scroll;
+    }
 }

package/components/matcha-select.scss

@@ -378,7 +378,7 @@
         width: 16px;
         height: 16px;
         margin-top: -8px;
-        background-color: var(--matcha-color-primary);
+        background-color: var(--matcha-color-accent);
         mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>");
         -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>");
         mask-size: contain;
@@ -540,7 +540,7 @@
     width: 100%;
     max-height: 90vh;
     min-height: 50vh;
-    background: var(--matcha-color-surface-card);
+    background: var(--matcha-color-surface-card-strong, var(--matcha-color-surface-card));
     border-top-left-radius: var(--matcha-radius-xl, 16px);
     border-top-right-radius: var(--matcha-radius-xl, 16px);
     box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
@@ -647,7 +647,7 @@
   .matcha-select-sheet-safe-area {
     flex: 0 0 auto;
     height: calc(env(safe-area-inset-bottom, 0px) + var(--matcha-space-150, 12px));
-    background: var(--matcha-color-surface-card);
+    background: var(--matcha-color-surface-card-strong, var(--matcha-color-surface-card));
   }
 
   // Quando sheet-mode tá ativo, esconder a arrow do trigger faz menos sentido —

package/components/matcha-skeleton.scss

@@ -136,3 +136,21 @@
         }
     }
 }
+
+// ── Forced colors ──
+@media (forced-colors: active) {
+    .skeleton,
+    .skeleton-animated-background {
+        background: GrayText !important;
+        border: 1px solid CanvasText;
+    }
+}
+
+// ── Print ──
+// Skeleton é placeholder de loading — não tem motivo de aparecer em papel.
+@media print {
+    .skeleton,
+    matcha-skeleton {
+        display: none !important;
+    }
+}

package/components/matcha-slide-toggle.scss

@@ -442,9 +442,9 @@
             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 +588,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; }
+        }
+    }
+}