@inchurch/matcha-theme 20.276.0 → 20.278.0

package/components/matcha-radio.scss

@@ -177,7 +177,7 @@ matcha-radio:has(.matcha-radio-hint) .matcha-radio-text {
             }
 
             .matcha-radio-input {
-                border-color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+                border-color: var(--matcha-color-text-label);
 
                 &:checked {
                     border-color: var(--matcha-color-accent);
@@ -193,7 +193,7 @@ matcha-radio:has(.matcha-radio-hint) .matcha-radio-text {
         &[color="primary"] {
             .matcha-radio-touch { color: var(--matcha-color-primary); }
             .matcha-radio-input {
-                border-color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+                border-color: var(--matcha-color-text-label);
                 &:checked {
                     border-color: var(--matcha-color-primary);
                     &::after { background-color: var(--matcha-color-primary); }
@@ -205,7 +205,7 @@ matcha-radio:has(.matcha-radio-hint) .matcha-radio-text {
         &[color="success"] {
             .matcha-radio-touch { color: var(--matcha-color-success); }
             .matcha-radio-input {
-                border-color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+                border-color: var(--matcha-color-text-label);
                 &:checked {
                     border-color: var(--matcha-color-success);
                     &::after { background-color: var(--matcha-color-success); }
@@ -217,7 +217,7 @@ matcha-radio:has(.matcha-radio-hint) .matcha-radio-text {
         &[color="warn"] {
             .matcha-radio-touch { color: var(--matcha-color-warn); }
             .matcha-radio-input {
-                border-color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+                border-color: var(--matcha-color-text-label);
                 &:checked {
                     border-color: var(--matcha-color-warn);
                     &::after { background-color: var(--matcha-color-warn); }
@@ -229,7 +229,7 @@ matcha-radio:has(.matcha-radio-hint) .matcha-radio-text {
         &[color="danger"] {
             .matcha-radio-touch { color: var(--matcha-color-danger); }
             .matcha-radio-input {
-                border-color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+                border-color: var(--matcha-color-text-label);
                 &:checked {
                     border-color: var(--matcha-color-danger);
                     &::after { background-color: var(--matcha-color-danger); }
@@ -241,7 +241,7 @@ matcha-radio:has(.matcha-radio-hint) .matcha-radio-text {
         &[color="info"] {
             .matcha-radio-touch { color: var(--matcha-color-info); }
             .matcha-radio-input {
-                border-color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+                border-color: var(--matcha-color-text-label);
                 &:checked {
                     border-color: var(--matcha-color-info);
                     &::after { background-color: var(--matcha-color-info); }

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,5 +1,4 @@
 @mixin matcha-scrollbox-shadow($theme) {
-    $is-dark: map-get($theme, is-dark);
 
     // Drop shadow inside of area when scrolled vertically
     .scrollbox,
@@ -9,14 +8,14 @@
         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%,
+            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: getSurface($theme);
+        background-color: var(--matcha-color-surface);
         background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
 
         /* Opera doesn't support this in the shorthand */
@@ -27,10 +26,9 @@
     .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);
+        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),
@@ -54,68 +52,68 @@
     .scrollbox-horizontal-content,
     .scrollbox-h-content,
     .scrollbox-x-content {
-        background: getSurface($theme);
+        background: var(--matcha-color-surface);
         background: linear-gradient(90deg,
-                getSurface($theme) 10px,
-                getSurface($theme),
+                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),
-                getSurface($theme) 10px,
-                getSurface($theme));
+                var(--matcha-color-surface) 10px,
+                var(--matcha-color-surface));
         background: -moz-linear-gradient(90deg,
-                getSurface($theme) 10px,
-                getSurface($theme),
+                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),
-                getSurface($theme) 10px,
-                getSurface($theme));
+                var(--matcha-color-surface) 10px,
+                var(--matcha-color-surface));
         background: -webkit-linear-gradient(0deg,
-                getSurface($theme) 10px,
-                getSurface($theme),
+                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),
-                getSurface($theme) 10px,
-                getSurface($theme));
+                var(--matcha-color-surface) 10px,
+                var(--matcha-color-surface));
     }
 
     .scrollbox-horizontal-content-background,
     .scrollbox-h-content-background,
     .scrollbox-x-content-background {
-        background: getBackground($theme);
+        background: var(--matcha-color-bg);
         background: linear-gradient(90deg,
-                getBackground($theme) 10px,
-                getBackground($theme),
+                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),
-                getBackground($theme) 10px,
-                getBackground($theme));
+                var(--matcha-color-bg) 10px,
+                var(--matcha-color-bg));
         background: -moz-linear-gradient(90deg,
-                getBackground($theme) 10px,
-                getBackground($theme),
+                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),
-                getBackground($theme) 10px,
-                getBackground($theme));
+                var(--matcha-color-bg) 10px,
+                var(--matcha-color-bg));
         background: -webkit-linear-gradient(0deg,
-                getBackground($theme) 10px,
-                getBackground($theme),
+                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),
-                getBackground($theme) 10px,
-                getBackground($theme));
+                var(--matcha-color-bg) 10px,
+                var(--matcha-color-bg));
     }
 
     .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%,
+            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: getBackground($theme);
+        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 {

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,7 @@
     @media (prefers-reduced-motion: reduce) {
         .skeleton-animated-background {
             animation: none;
-            background: var(--matcha-color-disabled-bg, #{getDisabled($theme)});
+            background: var(--matcha-color-disabled-bg);
         }
     }
 }