@inchurch/matcha-theme 20.0.11 → 20.277.0

package/components/matcha-scrollbar.scss

@@ -1,7 +1,6 @@
 @use "sass:map";
 
 @mixin matcha-scrollbar-theme($theme) {
-    $is-dark: map.get($theme, is-dark);
 
     :not(.is-mobile) {
         ::-webkit-scrollbar {
@@ -11,7 +10,7 @@
         }
 
         ::-webkit-scrollbar:hover {
-            background-color: var(--matcha-color-surface-hover, #{getBackgroundAlpha($theme)});
+            background-color: var(--matcha-color-surface-hover);
         }
 
         ::-webkit-scrollbar-thumb {

package/components/matcha-scrollbox-shadow.scss

@@ -1,123 +1,121 @@
-@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) {
+
+    // Drop shadow inside of area when scrolled vertically
+    .scrollbox,
+    .scrollbox-vertical,
+    .scrollbox-v,
+    .scrollbox-y {
+        overflow: overlay;
+        background:
+            /* Shadow covers */
+            linear-gradient(var(--matcha-color-surface) 30%, rgba(255, 255, 255, 0)),
+            linear-gradient(rgba(255, 255, 255, 0), var(--matcha-color-surface) 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: var(--matcha-color-surface);
+        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 {
+        box-shadow: 0px -16px 0px 0px inset var(--matcha-color-surface), 20px 0 16px -24px inset color-mix(in srgb, var(--matcha-color-fg) 15%, transparent),
+            -20px 0 16px -24px inset color-mix(in srgb, var(--matcha-color-fg) 15%, transparent), 0px 2px 2px 0px color-mix(in srgb, var(--matcha-color-fg) 3.5%, transparent), 0px 2px 2px 0px color-mix(in srgb, var(--matcha-color-fg) 3.5%, transparent),
+            0px 2px 2px 0px color-mix(in srgb, var(--matcha-color-fg) 3.5%, transparent);
+        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: var(--matcha-color-surface);
+        background: linear-gradient(90deg,
+                var(--matcha-color-surface) 10px,
+                var(--matcha-color-surface),
+                rgba(255, 255, 255, 0) calc(0% + 10px),
+                rgba(255, 255, 255, 0) calc(100% - 10px),
+                var(--matcha-color-surface) 10px,
+                var(--matcha-color-surface));
+        background: -moz-linear-gradient(90deg,
+                var(--matcha-color-surface) 10px,
+                var(--matcha-color-surface),
+                rgba(255, 255, 255, 0) calc(0% + 10px),
+                rgba(255, 255, 255, 0) calc(100% - 10px),
+                var(--matcha-color-surface) 10px,
+                var(--matcha-color-surface));
+        background: -webkit-linear-gradient(0deg,
+                var(--matcha-color-surface) 10px,
+                var(--matcha-color-surface),
+                rgba(255, 255, 255, 0) calc(0% + 10px),
+                rgba(255, 255, 255, 0) calc(100% - 10px),
+                var(--matcha-color-surface) 10px,
+                var(--matcha-color-surface));
+    }
+
+    .scrollbox-horizontal-content-background,
+    .scrollbox-h-content-background,
+    .scrollbox-x-content-background {
+        background: var(--matcha-color-bg);
+        background: linear-gradient(90deg,
+                var(--matcha-color-bg) 10px,
+                var(--matcha-color-bg),
+                rgba(255, 255, 255, 0) calc(0% + 10px),
+                rgba(255, 255, 255, 0) calc(100% - 10px),
+                var(--matcha-color-bg) 10px,
+                var(--matcha-color-bg));
+        background: -moz-linear-gradient(90deg,
+                var(--matcha-color-bg) 10px,
+                var(--matcha-color-bg),
+                rgba(255, 255, 255, 0) calc(0% + 10px),
+                rgba(255, 255, 255, 0) calc(100% - 10px),
+                var(--matcha-color-bg) 10px,
+                var(--matcha-color-bg));
+        background: -webkit-linear-gradient(0deg,
+                var(--matcha-color-bg) 10px,
+                var(--matcha-color-bg),
+                rgba(255, 255, 255, 0) calc(0% + 10px),
+                rgba(255, 255, 255, 0) calc(100% - 10px),
+                var(--matcha-color-bg) 10px,
+                var(--matcha-color-bg));
+    }
+
+    .scrollbox-background {
+        overflow: overlay;
+        background:
+            /* Shadow covers */
+            linear-gradient(var(--matcha-color-bg) 30%, rgba(255, 255, 255, 0)),
+            linear-gradient(rgba(255, 255, 255, 0), var(--matcha-color-bg) 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: var(--matcha-color-bg);
+        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-section.scss

@@ -8,22 +8,18 @@
 // =============================================================================
 
 @mixin matcha-section-theme($theme) {
-  $is-dark: map.get($theme, is-dark);
-
   .matcha-section {
-    background: var(--matcha-color-surface, #{getSurface($theme)});
-
-    @if $is-dark {
-      border: var(--matcha-border-hairline, 1px) solid rgba(#212121, 0.06); // ok: structural
-    }
+    background: var(--matcha-color-surface);
+    // Borda só-no-dark vira valor por modo (light = 0/transparent, sem mudar layout).
+    border: var(--matcha-section-border);
   }
 
   .matcha-section__subtitle {
-    color: var(--matcha-color-fg, #{getForeground($theme)});
+    color: var(--matcha-color-fg);
   }
 
   .matcha-section__description {
-    color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+    color: var(--matcha-color-text-label);
   }
 }
 

package/components/matcha-select-multiple.scss

@@ -0,0 +1,56 @@
+@mixin matcha-select-multiple-theme($theme) {
+    $foreground: map-get($theme, foreground);
+
+    // O matcha-select-multiple reusa as classes .matcha-select-* do matcha-select
+    // (.matcha-select-container, .matcha-select-trigger, .matcha-select-value, etc.),
+    // então herda toda a aparência do trigger. Aqui replicamos apenas as regras
+    // ligadas ao seletor de elemento, que são específicas por tag.
+    matcha-select-multiple {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    // Campo de busca dentro do painel (fixo no topo enquanto rola as opções)
+    .matcha-select-multiple-search {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 12px;
+        background: var(--matcha-color-surface);
+        border-bottom: 1px solid var(--matcha-color-bg);
+
+        .matcha-select-multiple-search-input {
+            flex: 1;
+            border: 0;
+            outline: none;
+            background: transparent;
+            color: map-get($foreground, text);
+            font-size: 14px;
+            line-height: 20px;
+
+            &::placeholder {
+                color: var(--matcha-color-text-muted);
+            }
+        }
+    }
+
+    // Seção fixa das opções selecionadas (topo do painel, independente da busca)
+    .matcha-select-multiple-selected {
+        background: var(--matcha-color-surface);
+        border-bottom: 1px solid var(--matcha-color-bg);
+
+        .matcha-select-multiple-selected-header {
+            padding: 8px 12px 4px;
+            font-size: 11px;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.04em;
+            color: var(--matcha-color-text-muted);
+        }
+    }
+}

package/components/matcha-select.scss

@@ -68,7 +68,7 @@
     box-sizing: border-box;
 
     &:focus-visible:not([disabled]) {
-      outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #{getAccent($theme)});
+      outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
       outline-offset: var(--matcha-state-focus-ring-offset, 2px);
     }
   }
@@ -79,10 +79,10 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    color: var(--matcha-color-fg, #{getForeground($theme)});
+    color: var(--matcha-color-fg);
 
     &.matcha-select-placeholder {
-      color: var(--matcha-color-text-placeholder, #{getGrey($theme)});
+      color: var(--matcha-color-text-placeholder);
     }
   }
 
@@ -95,7 +95,7 @@
     margin: 0;
     border: 0;
     background: transparent;
-    color: var(--matcha-color-fg, #{getForeground($theme)});
+    color: var(--matcha-color-fg);
     font: inherit;
     font-family: var(--matcha-font-family);
     outline: none;
@@ -103,11 +103,11 @@
     cursor: text;
 
     &::placeholder {
-      color: var(--matcha-color-text-placeholder, #{getGrey($theme)});
+      color: var(--matcha-color-text-placeholder);
     }
 
     &:disabled {
-      color: var(--matcha-color-disabled-fg, #{getDisabledContrast($theme)});
+      color: var(--matcha-color-disabled-fg);
       cursor: not-allowed;
       background: transparent;
     }
@@ -255,7 +255,7 @@
     }
 
     .matcha-select-value {
-      color: var(--matcha-color-disabled-fg, #{getDisabledContrast($theme)});
+      color: var(--matcha-color-disabled-fg);
     }
 
     .matcha-select-arrow {
@@ -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

@@ -99,26 +99,25 @@
 // ── Theme mixin ─────────────────────────────────────────────────────────────
 
 @mixin matcha-skeleton-theme($theme) {
-    $is-dark: map.get($theme, is-dark);
 
     .matcha-skeleton-line,
     .matcha-skeleton-card__avatar,
     .matcha-skeleton-card__image,
     .matcha-skeleton-table__header,
     .matcha-skeleton-table__cell-avatar {
-        background: var(--matcha-color-surface-card-alpha, #{getSurfaceAlpha($theme)});
+        background: var(--matcha-color-surface-card-alpha);
     }
 
     .matcha-skeleton-table__row--alt {
-        background: var(--matcha-color-surface-bg-alpha, #{getBackgroundAlpha($theme)});
+        background: var(--matcha-color-surface-bg-alpha);
     }
 
     .skeleton-animated-background {
         background: linear-gradient(
             to right,
-            var(--matcha-color-disabled-bg, #{getDisabled($theme)}),
-            #{if($is-dark, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.5))},
-            var(--matcha-color-disabled-bg, #{getDisabled($theme)})
+            var(--matcha-color-disabled-bg),
+            var(--matcha-skeleton-shimmer),
+            var(--matcha-color-disabled-bg)
         );
         background-size: 200% 100%;
         animation: matcha-skeleton-shimmer 1s linear infinite;
@@ -132,7 +131,25 @@
     @media (prefers-reduced-motion: reduce) {
         .skeleton-animated-background {
             animation: none;
-            background: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
+            background: var(--matcha-color-disabled-bg);
         }
     }
 }
+
+// ── 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;
+    }
+}