maverick-wave 5.5.0 → 5.7.0

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "maverick-wave",
-  "version": "5.5.0",
+  "version": "5.7.0",
   "config": {
-    "version_short": "5.5"
+    "version_short": "5.7"
   },
   "description": "A lightweight, modern CSS framework for building responsive websites with elegance and speed.",
   "main": "src/js/main.js",

package/src/partials/history-container.html

@@ -56,7 +56,7 @@
     <div class="mw-timeline-simple-date">2025-04-30</div>
     <div class="mw-timeline-simple-content">
       <div class="mw-card mw-card-simple">
-        <h3 class="mw-card-title">v1.3.0</h3>
+        <h3 class="mw-card-title">v1.0.0</h3>
         <p>
           Let's say initial release - grid, header and a first handful of
           components, published as they were.

package/src/partials/palette-container.html

@@ -139,4 +139,214 @@
       <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 box at the bottom is what a project would carry, and it
+    reads back: paste someone else's setup in to see it.
+  </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">
+        Glass buttons
+        <small
+          >Filled buttons become tinted glass - the colour drops to a
+          translucent wash with a lit top edge.</small
+        >
+      </span>
+      <input type="checkbox" data-variant-class="mw-btn-glass" />
+    </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">
+        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">
+        Scroll reveal
+        <small
+          >Cards and sections rise into place as they scroll in. Off has
+          everything sit where it lands.</small
+        >
+      </span>
+      <input
+        type="checkbox"
+        checked
+        data-variant-class="mw-scroll-static"
+        data-variant-invert
+      />
+    </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>
+
+  <label class="variant-setup-label" for="variant-setup">
+    Setup - editable, paste one in to load it
+  </label>
+  <textarea
+    class="variant-setup"
+    id="variant-setup"
+    rows="4"
+    spellcheck="false"
+    autocapitalize="off"
+    autocorrect="off"
+  ></textarea>
 </div>

package/src/partials/typography-container.html

@@ -19,6 +19,14 @@
     <blockquote>
       In the complex world of code, simplicity is the ultimate sophistication.
     </blockquote>
+    <p>
+      <span class="mw-text-xs">Extra Small Text</span><br />
+      <span class="mw-text-sm">Small Text</span><br />
+      <span class="mw-text-base">Base Text</span><br />
+      <span class="mw-text-md">Medium Text</span><br />
+      <span class="mw-text-lg">Large Text</span><br />
+      <span class="mw-text-xl">Extra Large Text</span>
+    </p>
   </div>
 
   <div class="mw-grid-stack mw-gap-2">
@@ -59,14 +67,5 @@
     <p class="mw-text-color-light">
       This always remains the text color of the light theme.
     </p>
-
-    <p>
-      <span class="mw-text-xs">Extra Small Text</span><br />
-      <span class="mw-text-sm">Small Text</span><br />
-      <span class="mw-text-base">Base Text</span><br />
-      <span class="mw-text-md">Medium Text</span><br />
-      <span class="mw-text-lg">Large Text</span><br />
-      <span class="mw-text-xl">Extra Large Text</span>
-    </p>
   </div>
 </div>

package/src/partials/utilities-container.html

@@ -423,3 +423,51 @@
     </p>
   </div>
 </div>
+
+<h3 class="mw-mb-4 mw-mt-6">Site-wide Variants</h3>
+<p class="mw-text-muted mw-text-measure">
+  Nine 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, and reads it back: paste one in to see someone else's.
+</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-scroll-static</code> - no scroll entrance;
+    <code>mw-reveal</code> blocks sit where they land
+  </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-btn-glass</code> - filled buttons become tinted glass with a lit
+    top edge
+  </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,23 @@
   }
 }
 
+// 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.
+//
+// A tooltip trigger is a third: a transform makes the element a containing block
+// for its own fixed-position descendants, and the tooltip is exactly that - so a
+// lifted trigger drags the bubble down onto itself. The two cannot both happen,
+// and a label that lands where it belongs beats two pixels of travel.
+@mixin hover-move {
+  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
+    :root:not(.mw-hover-static) &:hover:not([data-tooltip]) {
+      @content;
+    }
+  }
+}
+
 // No 300ms double-tap wait, no grey flash - the component draws its own :active
 @mixin tappable {
   touch-action: manipulation;
@@ -219,17 +236,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%,

package/src/scss/abstracts/_variables.scss

@@ -86,17 +86,17 @@ $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
+// Control sizes - 30 / 34 / 38px, 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
 // height: trimming `padding-block` moves the text inside the box, not the box.
-$control-height-sm: 2rem !default;
-$control-height: 2.25rem !default;
-$control-height-lg: 2.5rem !default;
+$control-height-sm: 1.875rem !default;
+$control-height: 2.125rem !default;
+$control-height-lg: 2.375rem !default;
 
 // All three fields share it; buttons stay one step above, because a button
 // carries a label and a field carries what the user typed

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/components/_avatars.scss

@@ -22,6 +22,35 @@
       height: 100%;
       object-fit: cover;
       display: block;
+      transition: transform var(--mw-duration-slow) var(--mw-ease-out);
+    }
+
+    // `:has(img)` keeps the sweep off the initials variant, where it would just
+    // flash a white bar across the letters
+    &:has(img)::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(
+        115deg,
+        transparent 38%,
+        rgb(255 255 255 / 0.45) 50%,
+        transparent 62%
+      );
+      transform: translateX(-130%);
+      pointer-events: none;
+    }
+
+    @include hover-move {
+      img {
+        transform: scale(1.12);
+      }
+
+      // Transition only here, so the sweep resets instantly instead of travelling back
+      &:has(img)::after {
+        transform: translateX(130%);
+        transition: transform var(--mw-duration-slower) var(--mw-ease-out);
+      }
     }
 
     &-xs {
@@ -85,10 +114,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/_button-bar.scss

@@ -132,7 +132,7 @@
     gap: spacing('3');
 
     .mw-btn {
-      padding: spacing('3') spacing('5');
+      padding: spacing('2') spacing('5');
       font-size: font-size('md');
       min-height: var(--mw-control-height-lg);
     }

package/src/scss/components/_buttons.scss

@@ -242,7 +242,7 @@
     min-height: var(--mw-control-height-sm);
   }
   .mw-btn-lg {
-    padding: spacing('3') spacing('5');
+    padding: spacing('2') spacing('5');
     font-size: font-size('md');
     min-height: var(--mw-control-height-lg);
   }

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);
     }
 

package/src/scss/components/_info.scss

@@ -24,7 +24,7 @@
       box-shadow: var(--mw-elevation-3);
     }
 
-    @include hover {
+    @include hover-move {
       transform: translateY(-2px);
     }
 
@@ -74,7 +74,7 @@
         box-shadow: none;
       }
 
-      @include hover {
+      @include hover-move {
         transform: none;
       }
 

package/src/scss/components/_lists.scss

@@ -239,7 +239,7 @@
         }
       }
 
-      @include hover {
+      @include hover-move {
         transform: translateX(8px);
       }
     }

package/src/scss/components/_panels.scss

@@ -18,7 +18,7 @@
       justify-content: space-between;
       align-items: center;
       margin: spacing('0');
-      border-radius: (radius('sm') - 2px) (radius('xl') - 2px) 0 0;
+      border-radius: calc(#{radius('sm')} - 2px) calc(#{radius('xl')} - 2px) 0 0;
     }
 
     &-body {

package/src/scss/components/_pricing.scss

@@ -156,7 +156,7 @@
       gap: spacing('2');
       padding: spacing('6') spacing('5');
       // The card's own radius minus its border - the band sits inside it
-      border-radius: (radius('sm') - 1px) (radius('xl') - 1px) 0 0;
+      border-radius: calc(#{radius('sm')} - 1px) calc(#{radius('xl')} - 1px) 0 0;
       background: var(--mw-card-addon-color, var(--mw-primary-color));
       color: var(
         --mw-card-addon-text-color,

package/src/scss/components/_techstack-bucket.scss

@@ -33,7 +33,7 @@
         font-size: font-size('xs');
       }
 
-      @include hover {
+      @include hover-move {
         transform: translateY(-2px);
       }
 

package/src/scss/components/_tiles.scss

@@ -81,7 +81,7 @@
       --mw-corner-accent: var(--mw-corner-accent-hover);
     }
 
-    @include hover {
+    @include hover-move {
       transform: translateY(-2px);
     }