maverick-wave 5.4.0 → 5.6.0

package/src/partials/palette-container.html

@@ -0,0 +1,325 @@
+<button
+  type="button"
+  class="palette-fab"
+  id="palette-fab"
+  aria-expanded="false"
+  aria-controls="palette-panel"
+  aria-label="Try another palette"
+>
+  <i class="fas fa-palette"></i>
+</button>
+
+<div class="palette-panel" id="palette-panel" hidden>
+  <h3 class="palette-heading">Palette</h3>
+  <p class="palette-hint">
+    Two colors. Everything else - bar, ink, borders, tints - is derived from
+    them at runtime.
+  </p>
+
+  <div class="palette-grid">
+    <button
+      type="button"
+      class="palette-item mw-active"
+      data-primary="#1031bb"
+      data-secondary="#bb5710"
+      data-dark="#171f30"
+      data-light="#e7e7f0"
+    >
+      Maverick
+    </button>
+    <button
+      type="button"
+      class="palette-item"
+      data-primary="#0f6f8c"
+      data-secondary="#e8862a"
+      data-dark="#0f1f26"
+      data-light="#e2edf1"
+    >
+      Deep Sea
+    </button>
+    <button
+      type="button"
+      class="palette-item"
+      data-primary="#c2321f"
+      data-secondary="#256f83"
+      data-dark="#13161a"
+      data-light="#f4e9e6"
+    >
+      Ember
+    </button>
+    <button
+      type="button"
+      class="palette-item"
+      data-primary="#2f7a3f"
+      data-secondary="#7f4dbd"
+      data-dark="#141f16"
+      data-light="#e6eee7"
+    >
+      Moss
+    </button>
+    <button
+      type="button"
+      class="palette-item"
+      data-primary="#8e3bd4"
+      data-secondary="#2fa38a"
+      data-dark="#1d1530"
+      data-light="#ece8f5"
+    >
+      Orchid
+    </button>
+    <button
+      type="button"
+      class="palette-item"
+      data-primary="#46617f"
+      data-secondary="#c08a2e"
+      data-dark="#1a1f26"
+      data-light="#e8ebef"
+    >
+      Slate
+    </button>
+    <button
+      type="button"
+      class="palette-item"
+      data-primary="#00b3ff"
+      data-secondary="#ff2d95"
+      data-dark="#0d1117"
+      data-light="#e6f3fb"
+    >
+      Neon
+    </button>
+    <button
+      type="button"
+      class="palette-item"
+      data-primary="#9a5f23"
+      data-secondary="#3b6ea5"
+      data-dark="#241c15"
+      data-light="#f2eadd"
+    >
+      Sand
+    </button>
+    <button
+      type="button"
+      class="palette-item"
+      data-primary="#12a37a"
+      data-secondary="#e2699b"
+      data-dark="#101f1b"
+      data-light="#e2f1ec"
+    >
+      Mint
+    </button>
+    <button
+      type="button"
+      class="palette-item"
+      data-primary="#4b2fc4"
+      data-secondary="#d9a72e"
+      data-dark="#171331"
+      data-light="#eae8f7"
+    >
+      Royal
+    </button>
+    <button
+      type="button"
+      class="palette-item"
+      data-primary="#9b1b4a"
+      data-secondary="#23a08d"
+      data-dark="#1e1220"
+      data-light="#f3e7ec"
+    >
+      Wine
+    </button>
+  </div>
+
+  <div class="palette-custom">
+    <label class="palette-field">
+      <span>Primary</span>
+      <input type="color" id="palette-primary" value="#1031bb" />
+    </label>
+    <label class="palette-field">
+      <span>Secondary</span>
+      <input type="color" id="palette-secondary" value="#bb5710" />
+    </label>
+  </div>
+
+  <h3 class="palette-heading palette-heading-split">Variants</h3>
+  <p class="palette-hint">
+    Every switch is one class on &lt;html&gt; or one custom property - no build,
+    no rebuild. The setup at the bottom is what a project would carry.
+  </p>
+
+  <div id="variant-list">
+    <label class="variant-row">
+      <span class="variant-label">
+        Distinctive card corners
+        <small
+          >The arc across two corners that gives every surface its shape. Off
+          leaves an evenly rounded box.</small
+        >
+      </span>
+      <input
+        type="checkbox"
+        checked
+        data-variant-class="mw-corners-even"
+        data-variant-invert
+      />
+    </label>
+
+    <label class="variant-row">
+      <span class="variant-label">
+        Corner radius
+        <small
+          >How round every box is drawn, from hard edges to fully
+          rounded.</small
+        >
+      </span>
+      <select data-variant-prop="--mw-radius-scale">
+        <option value="0">Square</option>
+        <option value="" selected>Default</option>
+        <option value="1.7">Round</option>
+      </select>
+    </label>
+
+    <label class="variant-row">
+      <span class="variant-label">
+        Pill buttons
+        <small
+          >Buttons rounded all the way. Form fields keep their own shape.</small
+        >
+      </span>
+      <input type="checkbox" data-variant-class="mw-btn-pill" />
+    </label>
+
+    <label class="variant-row">
+      <span class="variant-label">
+        Single accent color
+        <small
+          >Drop the second brand colour - hovers, tints and borders all come
+          from the first one.</small
+        >
+      </span>
+      <input type="checkbox" data-variant-class="mw-accent-single" />
+    </label>
+
+    <label class="variant-row">
+      <span class="variant-label">
+        Photos in grey
+        <small
+          >Pictures stay grey until the pointer reaches them, so only the brand
+          carries colour.</small
+        >
+      </span>
+      <input type="checkbox" data-variant-class="mw-media-mono" />
+    </label>
+
+    <label class="variant-row">
+      <span class="variant-label">
+        Heading font
+        <small>The typeface for headlines. Body copy is unaffected.</small>
+      </span>
+      <select data-variant-prop="--mw-font-family-heading">
+        <option value="" selected>System</option>
+        <option value="Georgia, 'Times New Roman', serif">Serif</option>
+        <option
+          value="Optima, Candara, 'Gill Sans', 'Trebuchet MS', sans-serif"
+        >
+          Humanist
+        </option>
+      </select>
+    </label>
+
+    <label class="variant-row">
+      <span class="variant-label">
+        Uppercase headings
+        <small>Headlines set in capitals with wider letter spacing.</small>
+      </span>
+      <input type="checkbox" data-variant-class="mw-headings-caps" />
+    </label>
+
+    <label class="variant-row">
+      <span class="variant-label">
+        Flat surfaces
+        <small
+          >Cards and panels lose their shadow and sit flat on the page.
+          Dropdowns and dialogs still float.</small
+        >
+      </span>
+      <input type="checkbox" data-variant-class="mw-shadows-flat" />
+    </label>
+
+    <label class="variant-row">
+      <span class="variant-label">
+        Static on hover
+        <small
+          >Nothing lifts or zooms under the pointer. Colours and borders still
+          respond.</small
+        >
+      </span>
+      <input type="checkbox" data-variant-class="mw-hover-static" />
+    </label>
+
+    <label class="variant-row">
+      <span class="variant-label">
+        Sticky header
+        <small
+          >The bar stays put from the top instead of sliding in over the first
+          screen.</small
+        >
+      </span>
+      <input
+        type="checkbox"
+        data-variant-class="mw-header-reveal"
+        data-variant-target=".mw-header"
+        data-variant-invert
+      />
+    </label>
+
+    <label class="variant-row">
+      <span class="variant-label">
+        Alternating sections
+        <small>The fine diagonal hatch behind every second section.</small>
+      </span>
+      <input
+        type="checkbox"
+        checked
+        data-variant-class="mw-sections-plain"
+        data-variant-invert
+      />
+    </label>
+
+    <label class="variant-row">
+      <span class="variant-label">
+        Section spacing
+        <small
+          >How much air sits above and below each section of the page.</small
+        >
+      </span>
+      <select data-variant-prop="--mw-section-padding-block">
+        <option value="2rem">Compact</option>
+        <option value="" selected>Default</option>
+        <option value="5.5rem">Airy</option>
+      </select>
+    </label>
+
+    <label class="variant-row">
+      <span class="variant-label">
+        Page width
+        <small
+          >How wide the content runs before it stops growing on a large
+          screen.</small
+        >
+      </span>
+      <select data-variant-prop="--mw-container-width">
+        <option value="" selected>1200</option>
+        <option
+          value="min(1440px, calc(100% - 2 * var(--mw-container-gutter)))"
+        >
+          1440
+        </option>
+        <option value="calc(100% - 2 * var(--mw-container-gutter))">
+          Full
+        </option>
+      </select>
+    </label>
+  </div>
+
+  <pre class="variant-setup" id="variant-setup"></pre>
+</div>

package/src/partials/utilities-container.html

@@ -423,3 +423,44 @@
     </p>
   </div>
 </div>
+
+<h3 class="mw-mb-4 mw-mt-6">Site-wide Variants</h3>
+<p class="mw-text-muted mw-text-measure">
+  Eight classes on <code>&lt;html&gt;</code> retune the whole look without
+  touching markup. They stack, and the palette button in the corner switches all
+  of them live - the box at the bottom of that panel prints the setup a project
+  would carry.
+</p>
+<ul class="mw-list mw-list-dot mw-text-measure">
+  <li>
+    <code>mw-corners-even</code> - drops the surface signature; every panel
+    becomes an evenly rounded box
+  </li>
+  <li>
+    <code>mw-accent-single</code> - one brand colour instead of two,
+    <code>mw-btn-secondary</code> turns outline
+  </li>
+  <li>
+    <code>mw-shadows-flat</code> - elevation 1-3 to <code>none</code>, dropdown
+    and modal keep theirs
+  </li>
+  <li>
+    <code>mw-hover-static</code> - no hover travels; colour and border still
+    respond
+  </li>
+  <li>
+    <code>mw-sections-plain</code> - the hatch behind
+    <code>mw-section-alternate</code> collapses into the page colour
+  </li>
+  <li><code>mw-headings-caps</code> - h1 to h3 in capitals</li>
+  <li>
+    <code>mw-btn-pill</code> - fully rounded buttons, form fields keep their
+    radius
+  </li>
+  <li><code>mw-media-mono</code> - photos grey until hovered</li>
+</ul>
+<p class="mw-text-muted mw-text-measure">
+  Four properties do the rest: <code>--mw-radius-scale</code> multiplies every
+  radius, plus <code>--mw-font-family-heading</code>,
+  <code>--mw-container-width</code> and <code>--mw-section-padding-block</code>.
+</p>

package/src/scss/abstracts/_functions.scss

@@ -27,9 +27,18 @@
   @return map.get(v.$breakpoints, $key);
 }
 
-// Function to get a radius value from the radius map
+// Emitted through --mw-radius-scale, so one number retunes every rounded box in
+// the framework at once - 0 squares them off, above 1 rounds them further, and
+// the corner arc follows. 'none' and 'full' pass through: a scaled 0 is still 0,
+// and a circle has to stay a circle.
 @function radius($key) {
-  @return map.get(v.$radius, $key);
+  $value: map.get(v.$radius, $key);
+
+  @if $key == 'none' or $key == 'full' {
+    @return $value;
+  }
+
+  @return calc(#{$value} * var(--mw-radius-scale, 1));
 }
 
 // Function to get a z-index value from the z-index map

package/src/scss/abstracts/_mixins.scss

@@ -129,6 +129,18 @@
   }
 }
 
+// A hover that *travels*. Separate from `hover`, because movement has two more
+// opt-outs than a colour change does: reduced motion, where a transform still
+// jumps to its end position in one frame however short the duration is, and the
+// static-hover variant. Colour and shadow belong in `hover` and stay either way.
+@mixin hover-move {
+  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
+    :root:not(.mw-hover-static) &:hover {
+      @content;
+    }
+  }
+}
+
 // No 300ms double-tap wait, no grey flash - the component draws its own :active
 @mixin tappable {
   touch-action: manipulation;
@@ -219,17 +231,32 @@
   &::after {
     @include corner-accent($border-width, $corners);
   }
+
+  // Site-wide opt-out for an even rounded box - .mw-corner-plain next door drops
+  // the arc on a single element, this drops the whole silhouette on all of them.
+  // Generated here and not as a list of the eleven callers, so a new caller is
+  // covered the day it is written.
+  :root.mw-corners-even & {
+    border-radius: radius('md');
+
+    &::after {
+      display: none;
+    }
+  }
 }
 
 // The arc alone, for a variant that redraws it without restating the shape
 @mixin corner-accent($border-width: 1px, $corners: 'both') {
-  $sharp: radius('sm') - $border-width;
-  $round: radius('xl') - $border-width;
+  // max(), not a bare subtraction: --mw-radius-scale can take the radius to 0,
+  // and while a negative border-radius is clamped for us, a negative circle in
+  // the mask below would throw the whole gradient away and lose the arc.
+  $sharp: max(0px, calc(#{radius('sm')} - #{$border-width}));
+  $round: max(0px, calc(#{radius('xl')} - #{$border-width}));
   // Opaque to where the curve ends, fading from there, so the arc runs into the
   // straight edge instead of stopping at the tangent. 1.8 is bounded by the
   // shortest surface: past about 2 the two arcs meet on a 50px box and read as
   // a frame.
-  $reach: $round * 1.8;
+  $reach: calc(#{$round} * 1.8);
   $top: radial-gradient(circle $reach at 100% 0, #000 $round, transparent 100%);
   $bottom: radial-gradient(
     circle $reach at 0 100%,
@@ -253,11 +280,12 @@
   }
 }
 
-// The reveal zone as the range of the n-th column. Viewport lengths and not
-// percentages of the block, so a short band and a tall card rise through the same
-// region of the screen. Each further column starts 4dvh after the one before.
+// The reveal zone as the range of the n-th column, measured along the block's own
+// entry and not in viewport lengths: a zone in dvh is the same length whatever the
+// block measures, so a card shorter than the zone stands fully in place while it is
+// still transparent. Each further column starts a tenth of that entry later.
 @mixin reveal-range($column: 1) {
-  $shift: 4dvh * ($column - 1);
+  $shift: 10% * ($column - 1);
 
-  animation-range: entry #{8dvh + $shift} entry #{34dvh + $shift};
+  animation-range: entry #{$shift} entry #{60% + $shift};
 }

package/src/scss/abstracts/_variables.scss

@@ -86,10 +86,10 @@ $header-active-tint: 25% !default;
 $shadow-cast-dark: 0.3 !default;
 // Near (contact) and far (ambient) opacity. The dark theme's far layer is a light
 // rim, so it stays low - a glow carries further than a shadow at the same alpha.
-$shadow-near-dark: 55% !default;
-$shadow-far-dark: 13% !default;
-$shadow-near-light: 14% !default;
-$shadow-far-light: 10% !default;
+$shadow-near-dark: 68% !default;
+$shadow-far-dark: 16% !default;
+$shadow-near-light: 21% !default;
+$shadow-far-light: 14% !default;
 
 // Control sizes - 32 / 36 / 40px, shared by input, select, textarea and button so
 // the row lines up. A minimum, not a fixed height, and it is what sets a field's

package/src/scss/base/_base.scss

@@ -88,6 +88,9 @@
     --mw-hero-pattern: #{$mw-hero-pattern};
     --mw-hero-text-color: #{$mw-hero-text-color};
 
+    // Read by every radius the framework draws - see the radius() function
+    --mw-radius-scale: 1;
+
     // header height
     --mw-header-height: #{$header-height};
 

package/src/scss/base/_reset.scss

@@ -24,9 +24,12 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 
+    // `dvh` and not `vh`: on iOS `100vh` is the tall viewport behind the
+    // address bar, so the locked body stays taller than the screen and keeps a
+    // strip of rubber-band scroll under the modal.
     &:has(.mw-modal-open) {
       overflow: hidden;
-      height: 100vh;
+      height: 100dvh;
     }
   }
 

package/src/scss/components/_accordions.scss

@@ -83,27 +83,51 @@
       }
     }
 
+    // A grid row from `0fr` to `1fr`, and not `height: 0` to `auto`: `auto` is
+    // not an animatable value, and `interpolate-size`, which would make it one,
+    // is Chrome's alone - Firefox and Safari jumped the panel open instead of
+    // running the 900ms. A fraction interpolates in all three.
     &-content {
-      height: spacing('0');
+      display: grid;
+      grid-template-rows: 0fr;
       overflow: hidden;
-      transition: height var(--mw-duration-slower) var(--mw-ease-out);
+      transition: grid-template-rows var(--mw-duration-slower)
+        var(--mw-ease-out);
       background: var(--mw-card-background);
-      interpolate-size: allow-keywords;
 
       &-inner {
-        padding: spacing('4');
-        border-top: 1px solid var(--mw-border-accent);
+        // The row is never shorter than what the item contributes, and padding
+        // and a border do not collapse with it - so both travel along, or the
+        // shut panel keeps a 25px strip of itself on screen. No `overflow` here
+        // on purpose: the panel above already clips, and clipping twice would
+        // hide the overflow that makes a long panel scrollable.
+        min-height: 0;
+        padding: spacing('0') spacing('4');
+        border-top: 0 solid var(--mw-border-accent);
+        transition:
+          padding-block var(--mw-duration-slower) var(--mw-ease-out),
+          border-top-width var(--mw-duration-slower) var(--mw-ease-out);
+
         @include media-down('sm') {
           font-size: font-size('sm');
         }
       }
 
       @include active() {
-        height: auto;
+        grid-template-rows: 1fr;
         max-height: 500px;
         overflow-y: auto;
 
-        // Scrollbar styling
+        > .mw-accordion-content-inner {
+          padding-block: spacing('4');
+          border-top-width: 1px;
+        }
+
+        // Both spellings: the standard pair is what Firefox reads, the webkit
+        // pseudos are for Safari below 18.2.
+        scrollbar-width: thin;
+        scrollbar-color: var(--mw-primary-color-hover) var(--mw-card-background);
+
         &::-webkit-scrollbar {
           width: 6px;
         }

package/src/scss/components/_avatars.scss

@@ -85,10 +85,13 @@
         transition: transform var(--mw-duration-base) var(--mw-ease-out);
 
         @include hover {
-          transform: translateY(-3px);
           z-index: z-index('lift');
         }
 
+        @include hover-move {
+          transform: translateY(-3px);
+        }
+
         &:last-child {
           margin-right: spacing('0');
         }

package/src/scss/components/_blog-post.scss

@@ -274,14 +274,14 @@
         transition: var(--mw-transition);
         color: var(--mw-primary-text-color);
 
-        &:hover {
+        @include hover-move {
           transform: translateX(-7px);
         }
 
         &.next {
           flex-direction: row-reverse;
 
-          &:hover {
+          @include hover-move {
             transform: translateX(7px);
           }
         }

package/src/scss/components/_cards.scss

@@ -81,11 +81,10 @@
       --mw-corner-accent: var(--mw-corner-accent-hover);
     }
 
-    // The lift moves the box, so it is guarded: on touch `:hover` latches after a
-    // tap and the card stays raised, visibly out of line with the row it sits in.
-    // The colour and shadow below are not - a latched border reads as "the one you
-    // last touched", which is no worse than nothing.
-    @include hover {
+    // Pointer-guarded, unlike the colour and shadow above: on touch `:hover`
+    // latches after a tap and the card would stay raised, visibly out of line
+    // with the row it sits in. A latched border is no worse than nothing.
+    @include hover-move {
       transform: translateY(-2px);
     }
 
@@ -145,7 +144,7 @@
       height: var(--mw-card-img-height, 210px);
       overflow: hidden;
       flex-shrink: 0;
-      border-radius: (radius('sm') - 1px) (radius('xl') - 1px) 0 0;
+      border-radius: calc(#{radius('sm')} - 1px) calc(#{radius('xl')} - 1px) 0 0;
 
       img {
         width: 100%;
@@ -154,8 +153,10 @@
         transition: transform var(--mw-duration-zoom) var(--mw-ease-out);
       }
 
-      &:hover img {
-        transform: scale(1.05);
+      @include hover-move {
+        img {
+          transform: scale(1.05);
+        }
       }
     }
 
@@ -323,8 +324,10 @@
         font-size: font-size('md');
       }
 
-      &:hover &-icon {
-        transform: rotate(25deg);
+      @include hover-move {
+        .mw-card-stack-icon {
+          transform: rotate(25deg);
+        }
       }
 
       &-header {
@@ -427,16 +430,4 @@
       --mw-card-addon-text-color: var(--mw-#{$name}-accent-text-color);
     }
   }
-
-  // Only the movement. The durations are already pinned to 1ms globally in
-  // base/_base.scss; a hover that *travels* has to be taken away outright, or it
-  // still jumps to its lifted position in one frame.
-  @media (prefers-reduced-motion: reduce) {
-    .mw-card:hover,
-    .mw-card-img:hover img,
-    .mw-card-img-contain:hover img,
-    .mw-card-stack:hover .mw-card-stack-icon {
-      transform: none;
-    }
-  }
 }

package/src/scss/components/_coming-soon.scss

@@ -51,7 +51,7 @@
       transition: opacity var(--mw-duration-slower) var(--mw-ease-out);
     }
 
-    @include hover {
+    @include hover-move {
       transform: translateY(-3px);
     }