@inchurch/matcha-theme 20.0.3

package/components/matcha-menu.scss

@@ -0,0 +1,86 @@
+// =============================================================================
+// matcha-menu.scss — Dropdown context menu (modernized)
+// =============================================================================
+
+.matcha-menu-content {
+  button,
+  [matcha-button] {
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: currentColor;
+      opacity: 0;
+      border-radius: inherit;
+      pointer-events: none;
+      transition: opacity var(--matcha-duration-instant, 80ms) linear;
+    }
+
+    &:hover:not([disabled])::before  { opacity: var(--matcha-state-hover, 0.08); }
+    &:active:not([disabled])::before { opacity: var(--matcha-state-active, 0.12); }
+
+    @media (prefers-reduced-motion: reduce) {
+      &::before { transition: none; }
+    }
+
+    &[disabled] { pointer-events: none; }
+  }
+}
+
+@mixin matcha-menu-theme($theme) {
+  .matcha-menu-content {
+    display: flex;
+    flex-direction: column;
+    padding: var(--matcha-space-100, 8px) 0;
+
+    button,
+    [matcha-button] {
+      width: 100%;
+      text-align: left;
+      justify-content: flex-start;
+      border-radius: 0;
+      padding: var(--matcha-space-100, 8px) var(--matcha-space-200, 16px);
+      height: var(--matcha-space-500, 40px);
+      font-weight: var(--matcha-weight-medium, 500);
+
+      &:focus-visible:not([disabled]) {
+        outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #{getAccent($theme)});
+        outline-offset: var(--matcha-state-focus-ring-offset, 2px);
+      }
+
+      matcha-icon,
+      .matcha-icon {
+        margin-right: var(--matcha-space-150, 12px);
+      }
+    }
+
+    .matcha-menu-item-has-submenu {
+      position: relative;
+      padding-right: calc(var(--matcha-space-400, 32px) + var(--matcha-space-050, 4px)); // 36
+
+      &::after {
+        content: '';
+        position: absolute;
+        right: var(--matcha-space-150, 12px);
+        top: 50%;
+        transform: translateY(-50%);
+        width: 0;
+        height: 0;
+        border-left: calc(var(--matcha-border-medium, 4px) + var(--matcha-border-hairline, 1px)) solid var(--matcha-color-hint, #{getGrey($theme)});
+        border-top: var(--matcha-border-medium, 4px) solid transparent;
+        border-bottom: var(--matcha-border-medium, 4px) solid transparent;
+        opacity: var(--matcha-opacity-secondary, 0.54);
+        transition: opacity var(--matcha-duration-instant, 80ms) linear;
+      }
+
+      &:hover::after { opacity: var(--matcha-opacity-high, 0.87); }
+
+      @media (prefers-reduced-motion: reduce) {
+        &::after { transition: none; }
+      }
+    }
+  }
+}

package/components/matcha-modal.scss

@@ -0,0 +1,234 @@
+@use "sass:map";
+
+// =============================================================================
+// matcha-modal.scss — Modal dialog system (overlay, backdrop, sizes)
+// =============================================================================
+
+// ── Size generator ──────────────────────────────────────────────────────────
+
+@mixin generate-matcha-modal-sizes-classes($helper-breakpoints) {
+    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
+        @include media-breakpoint($materialBreakpoint) {
+            $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
+
+            &[size#{$infix}="tiny"] .matcha-modal {
+                width: 100%;
+                max-width: px-to-rem(320px);
+            }
+
+            &[size#{$infix}="small"] .matcha-modal {
+                width: 100%;
+                max-width: px-to-rem(400px);
+            }
+
+            &[size#{$infix}="medium"] .matcha-modal {
+                width: 100%;
+                max-width: px-to-rem(480px);
+            }
+
+            &[size#{$infix}="large"] .matcha-modal {
+                width: 100%;
+                max-width: px-to-rem(560px);
+            }
+
+            &[size#{$infix}="huge"] .matcha-modal {
+                width: 100%;
+                max-width: px-to-rem(640px);
+            }
+        }
+    }
+}
+
+// ── Overlay container ───────────────────────────────────────────────────────
+
+.matcha-overlay-container {
+    position: fixed;
+    inset: 0;
+    z-index: 1000;
+    pointer-events: none;
+
+    & > * {
+        pointer-events: auto;
+    }
+
+    // Dim previous modals when stacking
+    & > *:not(:last-child) {
+        opacity: 0.1;
+    }
+}
+
+// ── Animations ──────────────────────────────────────────────────────────────
+
+@keyframes matcha-modal-backdrop-in {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}
+
+@keyframes matcha-modal-backdrop-out {
+    from { opacity: 1; }
+    to   { opacity: 0; }
+}
+
+@keyframes matcha-modal-in {
+    from {
+        opacity: 0;
+        transform: scale(0.95) translateY(-8px);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+}
+
+@keyframes matcha-modal-out {
+    from {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+    to {
+        opacity: 0;
+        transform: scale(0.97) translateY(4px);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .matcha-modal-backdrop,
+    .matcha-modal,
+    matcha-modal {
+        animation: none !important;
+        transition: none !important;
+    }
+}
+
+// =============================================================================
+// Theme mixin
+// =============================================================================
+
+@mixin matcha-modal-theme($theme) {
+    $is-dark: map.get($theme, is-dark);
+
+    // ── Host element ──
+    matcha-modal {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: fixed;
+        inset: 0;
+        z-index: 999;
+
+        @include generate-matcha-modal-sizes-classes($helper-breakpoints);
+
+        // Exit animation class (added by service before destroy)
+        &.matcha-modal--closing {
+            .matcha-modal {
+                animation: matcha-modal-out 150ms cubic-bezier(0.4, 0, 1, 1) forwards;
+            }
+        }
+    }
+
+    // ── Backdrop ──
+    .matcha-modal-backdrop {
+        position: fixed;
+        inset: 0;
+        z-index: 998;
+        cursor: pointer;
+        // Figma matcha/overlay Type=Modal: scrim 50% + blur 6px
+        background: var(--matcha-scrim-modal, rgba(0, 0, 0, 0.5));
+        backdrop-filter: blur(var(--matcha-scrim-modal-blur, 6px));
+        animation: matcha-modal-backdrop-in var(--matcha-duration-normal, 200ms) ease-out;
+
+        &.matcha-modal-backdrop--closing {
+            animation: matcha-modal-backdrop-out 150ms ease-in forwards;
+        }
+    }
+
+    // ── Modal card ──
+    .matcha-modal {
+        position: relative;
+        z-index: 999;
+        display: flex;
+        flex-direction: column;
+        border-radius: var(--matcha-radius-xl, 16px);
+        background-color: var(--matcha-color-surface, #{getSurface($theme)});
+        color: var(--matcha-color-fg, #{getForeground($theme)});
+        overflow: hidden;
+        animation: matcha-modal-in var(--matcha-duration-normal, 200ms) cubic-bezier(0.16, 1, 0.3, 1);
+
+        // Shadow level 3 (modals, drawers)
+        box-shadow: var(--matcha-shadow-3, #{if($is-dark, $shadow-3-dark, $shadow-3-light)});
+
+        @if $is-dark {
+            border: var(--matcha-border-hairline, 1px) solid rgba(255, 255, 255, 0.06);
+        }
+    }
+
+    // ── Header ──
+    .matcha-modal-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);
+        flex-shrink: 0;
+
+        // Figma matcha/modal title: 20/800/28 (title-xl ExtraBold)
+        .matcha-modal-header__title {
+            flex: 1;
+            font-size: var(--matcha-text-title-xl, 20px);
+            font-weight: var(--matcha-weight-extrabold, 800);
+            line-height: var(--matcha-leading-title-xl, 28px);
+            color: var(--matcha-color-fg, #{getForeground($theme)});
+        }
+    }
+
+    // ── Content ──
+    .matcha-modal-content {
+        flex: 1;
+        overflow-y: auto;
+        overflow-x: hidden;
+        padding: var(--matcha-space-300, 24px);
+        max-height: calc(100vh - 300px);
+        color: var(--matcha-color-fg, #{getForeground($theme)});
+
+        // Smooth content resize
+        transition: max-height var(--matcha-duration-normal, 200ms) ease;
+    }
+
+    // ── Footer ──
+    .matcha-modal-footer {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: var(--matcha-space-150, 12px);
+        padding: var(--matcha-space-200, 16px) var(--matcha-space-300, 24px);
+        flex-shrink: 0;
+
+        // Mobile: stack buttons vertically
+        @media (max-width: 575px) {
+            flex-direction: column-reverse;
+
+            .matcha-button {
+                width: 100%;
+            }
+        }
+    }
+
+    // ── Dividers inside modal ──
+    matcha-modal-header matcha-divider,
+    matcha-modal-footer matcha-divider {
+        margin-inline: calc(-1 * var(--matcha-space-300, 24px));
+    }
+
+    // ── Options (action icons in header) ──
+    .matcha-modal-options {
+        display: flex;
+        align-items: center;
+        gap: var(--matcha-space-100, 8px);
+    }
+
+    // ── Focus ring on modal ──
+    .matcha-modal:focus-visible {
+        outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent, #{getAccent($theme)});
+        outline-offset: var(--matcha-state-focus-ring-offset, 2px);
+    }
+}