maverick-wave 5.7.0 → 5.8.0

package/package.json

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

package/scripts/verify.js

@@ -6,7 +6,7 @@
  *   1. every var(--mw-*) has a definition
  *   2. every --mw-* definition is used somewhere
  *   3. every mw-* class in the markup exists in the built CSS
- *   4. the committed root release files exist and are not empty
+ *   4. the committed root release files match a fresh build
  *   5. the CDN version pinned in the docs matches package.json
  *   6. no `animation:` shorthand in a file that uses a scroll timeline
  *
@@ -135,6 +135,16 @@ for (const f of ['maverick-wave.min.css', 'maverick-wave.min.js']) {
     errors.push(
       `release file missing or empty: ${f} - run \`npm run prepack\` and commit it`
     );
+    continue;
+  }
+  // `gulp release` runs the same sass/postcss/terser pipeline as the dist tasks
+  // and only writes elsewhere, so dist/ is what the committed file has to equal.
+  // Existing-and-not-empty was not enough: 5.7.0 shipped a root bundle four
+  // commits behind src/, and every CDN consumer got that one.
+  if (read(p) !== read(path.join(ROOT, 'dist', f))) {
+    errors.push(
+      `release file stale: ${f} differs from the fresh build in dist/ - run \`npm run prepack\` and commit it`
+    );
   }
 }
 

package/src/partials/header-container.html

@@ -41,14 +41,16 @@
     </div>
   </button>
 
-  <!-- Login Button -->
+  <!-- Palette Switcher, showcase only - the panel lives in palette-container -->
   <button
     type="button"
-    class="mw-login-btn"
-    id="login-button"
-    aria-label="Log in"
+    class="palette-toggle"
+    id="palette-toggle"
+    aria-expanded="false"
+    aria-controls="palette-panel"
+    aria-label="Try another palette"
   >
-    <i class="fas fa-lock"></i>
+    <i class="fas fa-palette"></i>
   </button>
 
   <!-- Burger Menu Button -->

package/src/partials/palette-container.html

@@ -1,14 +1,3 @@
-<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">
@@ -25,7 +14,7 @@
       data-dark="#171f30"
       data-light="#e7e7f0"
     >
-      Maverick
+      MaverickWave
     </button>
     <button
       type="button"
@@ -127,6 +116,46 @@
     >
       Wine
     </button>
+    <button
+      type="button"
+      class="palette-item"
+      data-primary="#cc8a04"
+      data-secondary="#2b5f9e"
+      data-dark="#231c0f"
+      data-light="#f3ecdc"
+    >
+      Amber
+    </button>
+    <button
+      type="button"
+      class="palette-item"
+      data-primary="#6da31c"
+      data-secondary="#a3319b"
+      data-dark="#171e10"
+      data-light="#ecf1e1"
+    >
+      Lime
+    </button>
+    <button
+      type="button"
+      class="palette-item"
+      data-primary="#5e2c6e"
+      data-secondary="#c9853a"
+      data-dark="#1c1221"
+      data-light="#ece5f0"
+    >
+      Aubergine
+    </button>
+    <button
+      type="button"
+      class="palette-item"
+      data-primary="#b0543a"
+      data-secondary="#3d7160"
+      data-dark="#231613"
+      data-light="#f3e8e4"
+    >
+      Clay
+    </button>
   </div>
 
   <div class="palette-custom">
@@ -181,23 +210,32 @@
 
     <label class="variant-row">
       <span class="variant-label">
-        Pill buttons
+        Button shape
         <small
-          >Buttons rounded all the way. Form fields keep their own shape.</small
+          >From cut corners to fully rounded. Form fields keep their own
+          shape.</small
         >
       </span>
-      <input type="checkbox" data-variant-class="mw-btn-pill" />
+      <select data-variant-classes>
+        <option value="mw-btn-square">Square</option>
+        <option value="" selected>Default</option>
+        <option value="mw-btn-pill">Pill</option>
+      </select>
     </label>
 
     <label class="variant-row">
       <span class="variant-label">
-        Glass buttons
+        Button style
         <small
-          >Filled buttons become tinted glass - the colour drops to a
-          translucent wash with a lit top edge.</small
+          >How a filled button is painted. Outline, ghost and link buttons keep
+          their own treatment.</small
         >
       </span>
-      <input type="checkbox" data-variant-class="mw-btn-glass" />
+      <select data-variant-classes>
+        <option value="" selected>Default</option>
+        <option value="mw-btn-glass">Glass</option>
+        <option value="mw-btn-tactile">Tactile</option>
+      </select>
     </label>
 
     <label class="variant-row">
@@ -246,6 +284,17 @@
       <input type="checkbox" data-variant-class="mw-shadows-flat" />
     </label>
 
+    <label class="variant-row">
+      <span class="variant-label">
+        Flush surfaces
+        <small
+          >Cards, panels and the footer drop their own tone and sit on the page
+          colour, separated by their border alone.</small
+        >
+      </span>
+      <input type="checkbox" data-variant-class="mw-surfaces-flush" />
+    </label>
+
     <label class="variant-row">
       <span class="variant-label">
         Static on hover
@@ -302,6 +351,21 @@
       />
     </label>
 
+    <label class="variant-row">
+      <span class="variant-label">
+        Text size
+        <small
+          >The base the whole scale is built on - type, padding and control
+          heights move together.</small
+        >
+      </span>
+      <select data-variant-prop="--mw-root-font-size">
+        <option value="93.75%">Compact</option>
+        <option value="" selected>Default</option>
+        <option value="106.25%">Large</option>
+      </select>
+    </label>
+
     <label class="variant-row">
       <span class="variant-label">
         Section spacing
@@ -325,7 +389,13 @@
         >
       </span>
       <select data-variant-prop="--mw-container-width">
-        <option value="" selected>1200</option>
+        <option value="min(800px, calc(100% - 2 * var(--mw-container-gutter)))">
+          800
+        </option>
+        <option value="min(960px, calc(100% - 2 * var(--mw-container-gutter)))">
+          960
+        </option>
+        <option value="" selected>1200 (default)</option>
         <option
           value="min(1440px, calc(100% - 2 * var(--mw-container-gutter)))"
         >

package/src/partials/utilities-container.html

@@ -426,7 +426,7 @@
 
 <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
+  Twelve 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.
@@ -444,6 +444,10 @@
     <code>mw-shadows-flat</code> - elevation 1-3 to <code>none</code>, dropdown
     and modal keep theirs
   </li>
+  <li>
+    <code>mw-surfaces-flush</code> - cards, panels and footer on the page
+    colour, held by their border
+  </li>
   <li>
     <code>mw-hover-static</code> - no hover travels; colour and border still
     respond
@@ -461,13 +465,22 @@
     <code>mw-btn-pill</code> - fully rounded buttons, form fields keep their
     radius
   </li>
+  <li>
+    <code>mw-btn-square</code> - the other end of that axis: buttons cut to a
+    hard corner while the page keeps its radius
+  </li>
+  <li>
+    <code>mw-btn-tactile</code> - filled buttons stand on a darker edge and sink
+    onto it when pressed
+  </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>.
+  Five properties do the rest: <code>--mw-radius-scale</code> multiplies every
+  radius and <code>--mw-root-font-size</code> the whole rem scale, plus
+  <code>--mw-font-family-heading</code>, <code>--mw-container-width</code> and
+  <code>--mw-section-padding-block</code>.
 </p>

package/src/scss/base/_base.scss

@@ -54,6 +54,10 @@
     // Same list, for a state that should feel instant rather than animated
     --mw-transition-fast: #{transition-list('--mw-duration-fast')};
 
+    // The whole scale is rem, so this one percentage moves type, spacing and
+    // control heights together. Breakpoints are px and stay where they are.
+    --mw-root-font-size: 100%;
+
     // Custom properties, so an application can tighten its forms without recompiling
     --mw-control-height-sm: #{$control-height-sm};
     --mw-control-height: #{$control-height};

package/src/scss/base/_reset.scss

@@ -10,6 +10,8 @@
   }
 
   html {
+    // Percent and not px, or a reader who raised their browser font loses it
+    font-size: var(--mw-root-font-size);
     scroll-behavior: smooth;
     min-width: 320px;
     scroll-padding-top: var(--mw-header-height);

package/src/scss/utilities/_variants.scss

@@ -42,6 +42,19 @@
     --mw-elevation-3: none;
   }
 
+  // Cards, panels and the footer give up their own tone and sit flush on the
+  // page, told apart by their line alone. That line then has to carry them:
+  // --mw-border is a neighbouring shade of the surface and reads as nothing once
+  // the surface *is* the page, so it is redrawn from the ink instead.
+  //
+  // Theme-bound tokens, so both selectors - see the note above.
+  :root.mw-surfaces-flush,
+  :root.mw-surfaces-flush .mw-theme-light {
+    --mw-card-background: var(--mw-page-background);
+    --mw-footer-background: var(--mw-page-background);
+    --mw-border: color-mix(in srgb, var(--mw-text-color) 20%, transparent);
+  }
+
   // 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
@@ -57,6 +70,35 @@
     border-radius: 999px;
   }
 
+  // The other end of the same axis. Not --mw-radius-scale, which squares off the
+  // whole page - a page can want its cards round and its buttons cut.
+  :root.mw-btn-square .mw-btn {
+    border-radius: 0;
+  }
+
+  // A raised edge under the fill that the button sinks onto when pressed. The
+  // four solid variants only: outline, ghost and link have no fill to darken.
+  //
+  // Mixed toward black rather than taken from --mw-*-color-hover, which moves
+  // toward the light in one theme and away from it in the other - an edge has to
+  // be darker than its face in both.
+  :root.mw-btn-tactile {
+    @each $name in ('primary', 'secondary', 'danger', 'success') {
+      .mw-btn-#{$name} {
+        box-shadow: 0
+          3px
+          0
+          color-mix(in srgb, var(--mw-#{$name}-color) 72%, #000);
+
+        // Travels the full height of the edge, where the base button moves 1px
+        &:active:not(:disabled) {
+          transform: translateY(3px);
+          box-shadow: none;
+        }
+      }
+    }
+  }
+
   // 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.
   //