@inchurch/matcha-theme 21.4.0 → 22.1.0

package/components/matcha-scrollbar.scss

@@ -1,34 +1,34 @@
-@use "sass:map";
-
-@mixin matcha-scrollbar-theme($theme) {
-
-    :not(.is-mobile) {
-        ::-webkit-scrollbar {
-            width: var(--matcha-space-200, 16px);
-            height: var(--matcha-space-200, 16px);
-            background-color: transparent;
-        }
-
-        ::-webkit-scrollbar:hover {
-            background-color: var(--matcha-color-surface-hover);
-        }
-
-        ::-webkit-scrollbar-thumb {
-            border: var(--matcha-space-050, 4px) solid transparent;
-            // Thumb: grey #888 + alpha 0x33 (~0.2) — fallback hex pra estabilidade em webkit
-            box-shadow: inset 0 0 0 var(--matcha-space-150, 12px) #88888833;
-            border-radius: var(--matcha-radius-xl, 16px);
-        }
-
-        ::-webkit-scrollbar-thumb:active {
-            // Thumb active: grey #888 + alpha 0x44 (~0.27)
-            box-shadow: inset 0 0 0 var(--matcha-space-150, 12px) #88888844;
-            border-radius: var(--matcha-radius-xl, 16px);
-        }
-
-        ::-webkit-scrollbar-corner {
-            background: transparent;
-        }
-    }
-
+@use "sass:map";
+
+@mixin matcha-scrollbar-theme($theme) {
+
+    :not(.is-mobile) {
+        ::-webkit-scrollbar {
+            width: var(--matcha-space-200, 16px);
+            height: var(--matcha-space-200, 16px);
+            background-color: transparent;
+        }
+
+        ::-webkit-scrollbar:hover {
+            background-color: var(--matcha-color-surface-hover);
+        }
+
+        ::-webkit-scrollbar-thumb {
+            border: var(--matcha-space-050, 4px) solid transparent;
+            // Thumb: grey #888 + alpha 0x33 (~0.2) — fallback hex pra estabilidade em webkit
+            box-shadow: inset 0 0 0 var(--matcha-space-150, 12px) #88888833;
+            border-radius: var(--matcha-radius-xl, 16px);
+        }
+
+        ::-webkit-scrollbar-thumb:active {
+            // Thumb active: grey #888 + alpha 0x44 (~0.27)
+            box-shadow: inset 0 0 0 var(--matcha-space-150, 12px) #88888844;
+            border-radius: var(--matcha-radius-xl, 16px);
+        }
+
+        ::-webkit-scrollbar-corner {
+            background: transparent;
+        }
+    }
+
 }

package/components/matcha-scrollbox-shadow.scss

@@ -1,121 +1,121 @@
-@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;
-    }
+@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

@@ -1,102 +1,102 @@
-@use "../abstracts/media-breakpoint" as *;
-@use "sass:map";
-
-// =============================================================================
-// matcha-section.scss — Section card (config block, settings group)
-// Aligned with Figma matcha/section:
-//   Slots: Header (title + badge + action), Body (subtitle + desc + content)
-// Angular: matcha-section
-// =============================================================================
-
-@mixin matcha-section-theme($theme) {
-  .matcha-section {
-    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);
-  }
-
-  .matcha-section__description {
-    color: var(--matcha-color-text-label);
-  }
-}
-
-// ── Layout ──────────────────────────────────────────────────────────────────
-
-.matcha-section {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  border-radius: var(--matcha-radius-lg, 8px);
-  overflow: hidden;
-  box-sizing: border-box;
-}
-
-// ── Header ──
-.matcha-section__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--matcha-space-150, 12px);
-  padding: var(--matcha-space-200, 16px) var(--matcha-space-300, 24px);
-}
-
-.matcha-section__header-left {
-  display: flex;
-  align-items: center;
-  gap: var(--matcha-space-150, 12px);
-  flex: 1;
-  min-width: 0;
-}
-
-.matcha-section__header-actions {
-  display: flex;
-  align-items: center;
-  gap: var(--matcha-space-100, 8px);
-  flex-shrink: 0;
-}
-
-// ── Body ──
-.matcha-section__body {
-  display: flex;
-  flex-direction: column;
-  gap: var(--matcha-space-150, 12px);
-  padding: var(--matcha-space-200, 16px) var(--matcha-space-300, 24px) var(--matcha-space-300, 24px);
-}
-
-.matcha-section__subtitle {
-  font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-title-sm, 16px);
-  font-weight: var(--matcha-weight-semibold, 600);
-  line-height: var(--matcha-leading-title-sm, 22px);
-}
-
-.matcha-section__description {
-  font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-body-md, 14px);
-  font-weight: var(--matcha-weight-regular, 400);
-  line-height: var(--matcha-leading-body-md, 20px);
-}
-
-.matcha-section__content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--matcha-space-150, 12px);
-}
-
-// ── Responsive ──────────────────────────────────────────────────────────────
-
-@include media-breakpoint('xs') {
-  .matcha-section__header {
-    flex-direction: column;
-    align-items: flex-start;
-    padding: var(--matcha-space-200, 16px);
-  }
-
-  .matcha-section__body {
-    padding: var(--matcha-space-200, 16px);
-  }
-}
+@use "../abstracts/media-breakpoint" as *;
+@use "sass:map";
+
+// =============================================================================
+// matcha-section.scss — Section card (config block, settings group)
+// Aligned with Figma matcha/section:
+//   Slots: Header (title + badge + action), Body (subtitle + desc + content)
+// Angular: matcha-section
+// =============================================================================
+
+@mixin matcha-section-theme($theme) {
+  .matcha-section {
+    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);
+  }
+
+  .matcha-section__description {
+    color: var(--matcha-color-text-label);
+  }
+}
+
+// ── Layout ──────────────────────────────────────────────────────────────────
+
+.matcha-section {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border-radius: var(--matcha-radius-lg, 8px);
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+// ── Header ──
+.matcha-section__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--matcha-space-150, 12px);
+  padding: var(--matcha-space-200, 16px) var(--matcha-space-300, 24px);
+}
+
+.matcha-section__header-left {
+  display: flex;
+  align-items: center;
+  gap: var(--matcha-space-150, 12px);
+  flex: 1;
+  min-width: 0;
+}
+
+.matcha-section__header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--matcha-space-100, 8px);
+  flex-shrink: 0;
+}
+
+// ── Body ──
+.matcha-section__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--matcha-space-150, 12px);
+  padding: var(--matcha-space-200, 16px) var(--matcha-space-300, 24px) var(--matcha-space-300, 24px);
+}
+
+.matcha-section__subtitle {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-title-sm, 16px);
+  font-weight: var(--matcha-weight-semibold, 600);
+  line-height: var(--matcha-leading-title-sm, 22px);
+}
+
+.matcha-section__description {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-body-md, 14px);
+  font-weight: var(--matcha-weight-regular, 400);
+  line-height: var(--matcha-leading-body-md, 20px);
+}
+
+.matcha-section__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--matcha-space-150, 12px);
+}
+
+// ── Responsive ──────────────────────────────────────────────────────────────
+
+@include media-breakpoint('xs') {
+  .matcha-section__header {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: var(--matcha-space-200, 16px);
+  }
+
+  .matcha-section__body {
+    padding: var(--matcha-space-200, 16px);
+  }
+}

package/components/matcha-select-multiple.scss

@@ -1,56 +1,56 @@
-@mixin matcha-select-multiple-theme($theme) {
-    // theme-agnóstico: cor via var(--matcha-color-*). $theme mantido só na assinatura.
-
-    // 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: var(--matcha-color-text-primary);
-            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);
-        }
-    }
-}
+@mixin matcha-select-multiple-theme($theme) {
+    // theme-agnóstico: cor via var(--matcha-color-*). $theme mantido só na assinatura.
+
+    // 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: var(--matcha-color-text-primary);
+            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);
+        }
+    }
+}