maverick-wave 5.5.0 → 5.7.0

package/src/scss/form-elements/_input.scss

@@ -3,7 +3,7 @@
 @layer mw.forms {
   .mw-input {
     width: 100%;
-    padding: spacing('2') spacing('3');
+    padding: spacing('1') spacing('3');
     font-size: var(--mw-control-font);
     line-height: var(--mw-control-line-height);
     min-height: var(--mw-control-height);

package/src/scss/form-elements/_select.scss

@@ -3,7 +3,7 @@
 @layer mw.forms {
   .mw-select {
     width: 100%;
-    padding: spacing('2') spacing('6') spacing('2') spacing('3');
+    padding: spacing('1') spacing('6') spacing('1') spacing('3');
     font-size: var(--mw-control-font);
     min-height: var(--mw-control-height);
     background: var(--mw-form-elements-background);

package/src/scss/layout/_footer.scss

@@ -115,7 +115,7 @@
           border-color: var(--mw-primary-color);
         }
 
-        @include hover {
+        @include hover-move {
           transform: translateY(-2px);
         }
 

package/src/scss/layout/_header.scss

@@ -82,7 +82,12 @@
 
       &:hover:not(:disabled) {
         background: var(--mw-primary-color-hover);
-        transform: translateY(-1px);
+      }
+
+      @include hover-move {
+        &:not(:disabled) {
+          transform: translateY(-1px);
+        }
       }
 
       @include focus-ring;
@@ -117,6 +122,9 @@
 
       &:hover {
         background: var(--mw-primary-color-hover);
+      }
+
+      @include hover-move {
         transform: translateY(-1px);
       }
 

package/src/scss/layout/_main.scss

@@ -157,8 +157,23 @@
     padding: spacing('2') spacing('5');
     border: 1px solid #{fade('hero-text-color', 22%)};
     border-radius: 999px;
-    background: fade('hero-text-color', 8%);
-    backdrop-filter: blur(4px);
+    // A vertical ramp and not a flat tint: glass is lit from above, and the
+    // gradient is what gives the pill a thickness instead of a fogged panel
+    background: linear-gradient(
+      to bottom,
+      #{fade('hero-text-color', 16%)},
+      #{fade('hero-text-color', 5%)}
+    );
+    // saturate() is what separates glass from frosted plastic: the blur alone
+    // greys out what shows through, and pushing the chroma back up is how a
+    // real lens reads. The two inset lines are the specular highlight - light
+    // catching the top edge, a fainter bounce off the bottom - and the outer
+    // shadow is what lifts the pill off the photo instead of pasting it on.
+    backdrop-filter: blur(14px) saturate(180%);
+    box-shadow:
+      inset 0 1px 0 #{fade('hero-text-color', 40%)},
+      inset 0 -1px 0 #{fade('hero-text-color', 12%)},
+      0 2px 12px rgb(0 0 0 / 18%);
     color: fade('hero-text-color', 88%);
     font-size: font-size('sm');
     font-weight: font-weight('medium');
@@ -311,6 +326,20 @@
       }
     }
 
+    // A press usually scales the trigger, and a transform makes it a containing
+    // block for the fixed-position bubble above - which would drop the label
+    // into the element being pressed. So it steps aside for the click instead;
+    // by then it has been read anyway. After the hover rule, same weight.
+    &:active::before,
+    &:active::after {
+      opacity: 0;
+      display: none;
+      // Not transitioned: `allow-discrete` holds `display: block` until the fade
+      // ends, and the bubble would spend those 180ms visibly sitting in the
+      // element. Going back out on release keeps the fade - that one is wanted.
+      transition: none;
+    }
+
     // The clipping caveat above, lifted where the browser can do it: `fixed` takes
     // the bubble out of the trigger's containing block, anchor positioning keeps
     // it attached. No `anchor-name` needed - a pseudo element is implicitly

package/src/scss/utilities/_index.scss

@@ -8,3 +8,4 @@
 @forward 'spacing';
 @forward 'text';
 @forward 'touch-targets';
+@forward 'variants';

package/src/scss/utilities/_reveal.scss

@@ -11,8 +11,7 @@
   // `animation:` that cannot carry a timeline.
   @supports (animation-timeline: view()) {
     @media (prefers-reduced-motion: no-preference) {
-      .mw-reveal,
-      .mw-reveal-stagger > * {
+      :root:not(.mw-scroll-static) :is(.mw-reveal, .mw-reveal-stagger > *) {
         animation-name: mw-reveal;
         animation-timing-function: var(--mw-ease-out);
         animation-fill-mode: backwards;
@@ -47,6 +46,14 @@
       transform: translateY(40px);
     }
 
+    // The script has already hidden whatever was below the fold when the class
+    // arrives, and it only ever un-hides on intersection - without this the
+    // switch would leave those elements invisible instead of static.
+    :root.mw-scroll-static .mw-reveal-hidden {
+      opacity: 1;
+      transform: none;
+    }
+
     .mw-reveal-run {
       // `backwards` for the reason above - a forwards fill would pin the
       // transform and cost the card its hover lift. The delay comes inline,

package/src/scss/utilities/_touch-targets.scss

@@ -22,7 +22,7 @@
       min-height: 2.5rem;
     }
 
-    // The base fields sit at 2.35rem from the control scale, which is right under
+    // The base fields sit at 2.125rem from the control scale, which is right under
     // a pointer and short of a thumb. Same floor as the button beside them.
     .mw-input,
     .mw-select {

package/src/scss/utilities/_variants.scss

@@ -0,0 +1,120 @@
+@use '../abstracts' as *;
+
+@layer mw.utilities {
+  // Site-wide looks, switched with one class on <html>. Two more live elsewhere,
+  // because they have to reach every caller of a mixin: .mw-corners-even in
+  // surface(), .mw-hover-static in hover-move().
+
+  // One brand colour instead of two. Every secondary tone is derived from
+  // --mw-secondary-color with color-mix() and oklch(from ...), so the two lines
+  // below carry through to hovers, tints, borders and both themes' ink.
+  :root.mw-accent-single {
+    --mw-secondary-color: var(--mw-primary-color);
+    --mw-secondary-accent-text-color: var(--mw-primary-accent-text-color);
+
+    // Or the two solid buttons would be the same button. Outline keeps the
+    // emphasis order the markup asked for: primary fills, secondary draws a line.
+    .mw-btn-secondary {
+      background: transparent;
+      border-color: var(--mw-primary-text-color);
+      color: var(--mw-primary-text-color);
+
+      &:hover:not(:disabled) {
+        background: var(--mw-primary-color);
+        border-color: var(--mw-primary-color);
+        color: var(--mw-primary-accent-text-color);
+      }
+    }
+  }
+
+  // 1 to 3 are surfaces lying on the page and go; 4 and 5 are the dropdown and
+  // the modal, which genuinely float above content and keep their shadow - in a
+  // flat page they are the only two things that should cast one.
+  //
+  // The second selector is not optional: elevation is a theme alias, and the
+  // light theme re-declares it on <body>. A value written on :root alone is
+  // shadowed for the whole body subtree, so the switch would do nothing at all
+  // in light mode. Any variant that retunes a theme-bound token needs both.
+  :root.mw-shadows-flat,
+  :root.mw-shadows-flat .mw-theme-light {
+    --mw-elevation-1: none;
+    --mw-elevation-2: none;
+    --mw-elevation-3: none;
+  }
+
+  // The diagonal hatch behind an alternating section, dropped. Written on the
+  // section and not as a token on :root: --mw-page-background is a theme alias
+  // that only becomes the light one further down the tree, so a copy taken up
+  // here hands the section the *other* theme's colour - the hatch turns dark
+  // instead of vanishing.
+  :root.mw-sections-plain .mw-section-alternate {
+    background: var(--mw-page-background);
+  }
+
+  // Buttons only. Input groups build their radius corner by corner, so a pill
+  // there is its own piece of geometry rather than one more override.
+  :root.mw-btn-pill .mw-btn {
+    border-radius: 999px;
+  }
+
+  // Tinted glass: a translucent wash with a vertical ramp and a specular line
+  // along the top edge, which is what gives the button its thickness.
+  //
+  // Deliberately without `backdrop-filter`, and that omission has to stay. The
+  // filter makes the button a containing block for its own fixed-position
+  // descendants, which drops a [data-tooltip] bubble inside the button instead
+  // of above it; and nested inside the header's own blur it flickers while the
+  // page scrolls. At the tint below there was next to nothing to see through.
+  //
+  // The tint stays heavy on purpose, and that is the other trade-off: a 20%
+  // wash reads as real glass, but the label then rides on whatever is behind
+  // it, and over a light card that contrast is gone. At 88/70 the label keeps
+  // roughly the fill's contrast.
+  //
+  // Hover and active are restated rather than inherited: this sits in
+  // mw.utilities, which outranks every rule in mw.components whatever its
+  // specificity, so the states would otherwise be flattened along with the fill.
+  :root.mw-btn-glass {
+    @each $name in ('primary', 'secondary', 'danger', 'success') {
+      .mw-btn-#{$name} {
+        background: linear-gradient(
+          to bottom,
+          color-mix(in srgb, var(--mw-#{$name}-color) 88%, transparent),
+          color-mix(in srgb, var(--mw-#{$name}-color) 70%, transparent)
+        );
+        border-color: color-mix(
+          in srgb,
+          var(--mw-#{$name}-color) 70%,
+          transparent
+        );
+        box-shadow:
+          inset 0 1px 0 rgb(255 255 255 / 28%),
+          0 1px 3px rgb(0 0 0 / 14%);
+
+        &:hover:not(:disabled),
+        &.mw-active:not(:disabled),
+        &.active:not(:disabled) {
+          background: linear-gradient(
+            to bottom,
+            color-mix(in srgb, var(--mw-#{$name}-color) 97%, transparent),
+            color-mix(in srgb, var(--mw-#{$name}-color) 82%, transparent)
+          );
+          border-color: color-mix(
+            in srgb,
+            var(--mw-#{$name}-color) 85%,
+            transparent
+          );
+        }
+      }
+    }
+  }
+
+  :root.mw-headings-caps {
+    h1,
+    h2,
+    h3 {
+      text-transform: uppercase;
+      letter-spacing: 0.045em;
+    }
+  }
+}