maverick-wave 5.5.0 → 5.6.0

package/package.json

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

package/src/partials/palette-container.html

@@ -139,4 +139,187 @@
       <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%,

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

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

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/utilities/_index.scss

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

package/src/scss/utilities/_variants.scss

@@ -0,0 +1,90 @@
+@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;
+  }
+
+  // Photos drained of colour until pointed at - the palette then comes only from
+  // the brand tones. Avatars stay out: a greyed-out face reads as disabled, and
+  // so does mw-media, which is the audio player and holds no picture at all.
+  :root.mw-media-mono {
+    .mw-card-img img,
+    .mw-card-img-contain img,
+    .mw-tile-img img,
+    .mw-gallery img,
+    .mw-image-slider img,
+    img.mw-blog-post-featured-image {
+      filter: grayscale(1);
+      transition: filter var(--mw-duration-zoom) var(--mw-ease-out);
+    }
+
+    // The blog image carries the class itself rather than sitting in a wrapper,
+    // so it is the one that has to answer for its own hover
+    :is(.mw-card, .mw-tile, .mw-gallery, .mw-image-slider):hover img,
+    img.mw-blog-post-featured-image:hover {
+      filter: none;
+    }
+  }
+
+  :root.mw-headings-caps {
+    h1,
+    h2,
+    h3 {
+      text-transform: uppercase;
+      letter-spacing: 0.045em;
+    }
+  }
+}