@inchurch/matcha-theme 20.0.3

package/components/matcha-scrollbox-shadow.scss

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

package/components/matcha-section.scss

@@ -0,0 +1,105 @@
+@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) {
+  $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
+    }
+  }
+
+  .matcha-section__subtitle {
+    color: var(--matcha-color-fg, #{getForeground($theme)});
+  }
+
+  .matcha-section__description {
+    color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
+  }
+}
+
+// ── 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);
+  }
+}