maverick-wave 5.7.0 → 5.10.0

package/src/partials/preview-container.html

@@ -0,0 +1,136 @@
+<!--
+  Showcase only: a page-shaped preview for the variant switches. The sections
+  above show one component at a time, which is the wrong lens for a switch that
+  retunes everything at once - here the parts sit next to each other the way
+  they would on a real page, and a change reads as a change of look. One column,
+  because the panel is fixed over the right half while any of this is in use.
+-->
+<div class="preview-page">
+  <div class="preview-head">
+    <div>
+      <h3 class="preview-title">Quarterly report</h3>
+      <p class="preview-lede">
+        Numbers for Q3 are in. The
+        <a href="#preview" class="mw-link">full breakdown</a> sits in the sheet,
+        the short version is below.
+      </p>
+    </div>
+    <span class="mw-badge mw-badge-info">Draft</span>
+  </div>
+
+  <div class="mw-alert mw-alert-info mw-mb-5">
+    <div class="mw-alert-icon">
+      <i class="fas fa-circle-info"></i>
+    </div>
+    <div class="mw-alert-content">
+      <span class="mw-alert-title">Two figures are still provisional</span>
+      <p>Finance signs off on Friday, the rest is final.</p>
+    </div>
+  </div>
+
+  <div class="mw-grid-3 mw-gap-4 mw-mb-5">
+    <div class="mw-card">
+      <div class="mw-card-badge mw-card-addon-success">Best</div>
+      <div class="mw-card-body">
+        <h4 class="mw-card-title">
+          <span class="mw-card-title-icon">
+            <i class="fas fa-arrow-trend-up"></i>
+          </span>
+          Revenue
+        </h4>
+        <hr class="mw-card-title-divider" />
+        <p class="mw-card-subtitle">EUR 4.2m, up 12 percent</p>
+        <p class="mw-card-text">
+          Carried by the two enterprise deals that closed in September.
+        </p>
+        <div class="mw-card-footer">
+          <span class="mw-text-muted mw-text-xs">Updated today</span>
+          <button type="button" class="mw-btn mw-btn-link">Details</button>
+        </div>
+      </div>
+    </div>
+
+    <div class="mw-card">
+      <div class="mw-card-body">
+        <h4 class="mw-card-title">
+          <span class="mw-card-title-icon">
+            <i class="fas fa-user-minus"></i>
+          </span>
+          Churn
+        </h4>
+        <hr class="mw-card-title-divider" />
+        <p class="mw-card-subtitle">1.8 percent, flat</p>
+        <p class="mw-card-text">
+          Both accounts that left cited the same missing integration.
+        </p>
+        <div class="mw-card-footer">
+          <span class="mw-text-muted mw-text-xs">Updated today</span>
+          <button type="button" class="mw-btn mw-btn-link">Details</button>
+        </div>
+      </div>
+    </div>
+
+    <div class="mw-card">
+      <div class="mw-card-body">
+        <h4 class="mw-card-title">
+          <span class="mw-card-title-icon">
+            <i class="fas fa-users"></i>
+          </span>
+          Headcount
+        </h4>
+        <hr class="mw-card-title-divider" />
+        <p class="mw-card-subtitle">41 people, four hires</p>
+        <p class="mw-card-text">
+          Two of them on the platform team. One open role left this quarter.
+        </p>
+        <div class="mw-card-footer">
+          <span class="mw-text-muted mw-text-xs">Updated today</span>
+          <button type="button" class="mw-btn mw-btn-link">Details</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="preview-row mw-mb-5">
+    <input
+      type="text"
+      class="mw-input"
+      placeholder="Add a note"
+      aria-label="Add a note"
+    />
+    <select class="mw-select" aria-label="Reviewer">
+      <option>Send to finance</option>
+      <option>Send to the board</option>
+      <option>Keep to myself</option>
+    </select>
+    <label class="mw-toggle">
+      <input type="checkbox" checked />
+      <div class="mw-toggle-track"></div>
+      <span class="mw-toggle-label">Notify the team</span>
+    </label>
+  </div>
+
+  <div class="preview-actions mw-mb-5">
+    <button type="button" class="mw-btn mw-btn-primary">Publish</button>
+    <button type="button" class="mw-btn mw-btn-secondary">Save draft</button>
+    <button type="button" class="mw-btn mw-btn-outline">Discard</button>
+    <button type="button" class="mw-btn mw-btn-ghost">Cancel</button>
+  </div>
+
+  <div class="preview-status">
+    <span class="mw-spinner-border mw-spinner-sm"></span>
+    <span>
+      <strong>Syncing with the finance sheet</strong>
+      <small>The two provisional figures update when it finishes.</small>
+    </span>
+  </div>
+
+  <div class="mw-tags">
+    <span class="mw-tags-item">
+      <i class="fas fa-tag mw-tags-icon"></i>
+      Q3
+    </span>
+    <span class="mw-tags-item">finance</span>
+    <span class="mw-tags-item">internal</span>
+  </div>
+</div>

package/src/partials/utilities-container.html

@@ -350,6 +350,44 @@
   </div>
 </div>
 
+<h3 class="mw-mb-4 mw-mt-6">Glow</h3>
+<p class="mw-text-muted mw-text-measure">
+  The other half of the lighting model: elevation says how far a surface floats
+  above the page, a glow says it is the thing giving off the light. Two layers
+  like elevation, and both without an offset - light does not fall downwards,
+  which is the whole difference between this and a coloured shadow. For the one
+  element on a screen that has to be looked at first, and for nothing else. Bare
+  <code>mw-glow</code> is the primary one.
+</p>
+<div class="mw-grid-3 mw-gap-6">
+  <div class="mw-card mw-card-simple mw-glow-primary">
+    <h4 class="mw-text-medium mw-mb-1">primary</h4>
+    <p class="mw-text-muted mw-text-sm mw-mb-0">The brand, and the default.</p>
+  </div>
+  <div class="mw-card mw-card-simple mw-glow-secondary">
+    <h4 class="mw-text-medium mw-mb-1">secondary</h4>
+    <p class="mw-text-muted mw-text-sm mw-mb-0">The second brand tone.</p>
+  </div>
+  <div class="mw-card mw-card-simple mw-glow-info">
+    <h4 class="mw-text-medium mw-mb-1">info</h4>
+    <p class="mw-text-muted mw-text-sm mw-mb-0">Something worth reading.</p>
+  </div>
+  <div class="mw-card mw-card-simple mw-glow-success">
+    <h4 class="mw-text-medium mw-mb-1">success</h4>
+    <p class="mw-text-muted mw-text-sm mw-mb-0">It worked - say so once.</p>
+  </div>
+  <div class="mw-card mw-card-simple mw-glow-warning">
+    <h4 class="mw-text-medium mw-mb-1">warning</h4>
+    <p class="mw-text-muted mw-text-sm mw-mb-0">Check this before going on.</p>
+  </div>
+  <div class="mw-card mw-card-simple mw-glow-danger">
+    <h4 class="mw-text-medium mw-mb-1">danger</h4>
+    <p class="mw-text-muted mw-text-sm mw-mb-0">
+      The one that cannot be undone.
+    </p>
+  </div>
+</div>
+
 <h3 class="mw-mb-4 mw-mt-6">Responsive Display</h3>
 <p class="mw-text-muted mw-text-measure">
   Mobile-first and min-width, like everything else here.
@@ -426,7 +464,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 +482,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 +503,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/abstracts/_functions.scss

@@ -27,10 +27,16 @@
   @return map.get(v.$breakpoints, $key);
 }
 
+// What --mw-radius-scale cannot take away, shared by both functions below: a
+// page at scale 0 is meant to read as square, not as cut out of sheet metal.
+// The smallest step the scale already has, so the hardest setting lands on it
+// rather than off the end.
+$_radius-floor: map.get(v.$radius, 'xs');
+
 // 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.
+// the corner arc follows. 'none' and 'full' pass through: an explicit 0 stays
+// 0, and a circle has to stay a circle.
 @function radius($key) {
   $value: map.get(v.$radius, $key);
 
@@ -38,7 +44,29 @@
     @return $value;
   }
 
-  @return calc(#{$value} * var(--mw-radius-scale, 1));
+  @return max(#{$_radius-floor}, calc(#{$value} * var(--mw-radius-scale, 1)));
+}
+
+// The sharp pair of the surface signature, squared against the scale so the two
+// halves of the silhouette keep their relationship. Linear, a page turned up to
+// Round holds an 8.5px corner against a 34px arc and the pair stops reading as
+// one shape; squared, the sharp side opens up with it.
+@function radius-sharp() {
+  $scale: var(--mw-radius-scale, 1);
+
+  @return max(
+    #{$_radius-floor},
+    calc(#{map.get(v.$radius, 'sm')} * #{$scale} * #{$scale})
+  );
+}
+
+// For the animations that run on their own clock rather than off a state change
+// - spinners, shimmers, the pulses. The duration tokens carry --mw-motion-scale
+// already, but these name their own timing, and a motion setting that leaves
+// the one thing on screen that is permanently moving at its old speed is not a
+// motion setting. prefers-reduced-motion still overrides the result outright.
+@function motion($duration) {
+  @return calc(#{$duration} * var(--mw-motion-scale, 1));
 }
 
 // Function to get a z-index value from the z-index map

package/src/scss/abstracts/_mixins.scss

@@ -2,17 +2,14 @@
 @use 'variables' as v;
 @use 'functions' as *;
 
-// `media-down` stops 0.02px short, or both ranges match at exactly 768px - an
-// iPad in portrait, where mw-hide-mobile and mw-hide-desktop would both hide.
-// 0.02 and not 1, because a viewport can be fractional (zoom, scaled display).
 @mixin media-up($breakpoint) {
-  @media (min-width: map.get(v.$breakpoints, $breakpoint)) {
+  @media (width >= #{map.get(v.$breakpoints, $breakpoint)}) {
     @content;
   }
 }
 
 @mixin media-down($breakpoint) {
-  @media (max-width: map.get(v.$breakpoints, $breakpoint) - 0.02px) {
+  @media (width < #{map.get(v.$breakpoints, $breakpoint)}) {
     @content;
   }
 }
@@ -231,7 +228,7 @@
 // the top arc where a fill already owns that corner.
 @mixin surface($border-width: 1px, $corners: 'both') {
   position: relative;
-  border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
+  border-radius: radius-sharp() radius('xl') radius-sharp() radius('xl');
 
   &::after {
     @include corner-accent($border-width, $corners);
@@ -245,27 +242,80 @@
     border-radius: radius('md');
 
     &::after {
-      display: none;
+      @include corner-mark($border-width);
     }
   }
 }
 
+// Shared by both corner marks, which are meant to read as the same gesture at
+// two volumes: how far the arc runs along the horizontal against the vertical,
+// and where it stops being opaque. A percentage and not a length because the
+// mask is an ellipse - see corner-accent() for what that costs.
+$_corner-stretch: 1.5;
+$_corner-opaque: 55%;
+
+// What is left of the signature once the silhouette is switched off: the same
+// arc, on one corner, thinner and over a shorter run. The two-corner shape is
+// the loud half and mw-corners-even exists to turn it off - but a surface with
+// nothing left of it could have come from any framework, and this is the mark
+// that says otherwise. Deliberately quiet enough to read as a detail.
+//
+// Built from radius('md') because that is what the even box is drawn at, and
+// it follows --mw-radius-scale down to a square, where the arc becomes a
+// bracket in the corner rather than disappearing.
+@mixin corner-mark($border-width: 1px) {
+  $r: max(0px, calc(#{radius('md')} - #{$border-width}));
+
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border: 1.5px solid var(--mw-corner-accent);
+  border-radius: $r;
+  $reach: max(18px, calc(#{radius('md')} * 2.2));
+
+  mask-image: radial-gradient(
+    ellipse calc(#{$reach} * #{$_corner-stretch}) #{$reach} at 100% 0,
+    #000 $_corner-opaque,
+    transparent 100%
+  );
+}
+
 // The arc alone, for a variant that redraws it without restating the shape
 @mixin corner-accent($border-width: 1px, $corners: 'both') {
   // 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}));
+  $sharp: max(0px, calc(#{radius-sharp()} - #{$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: calc(#{$round} * 1.8);
-  $top: radial-gradient(circle $reach at 100% 0, #000 $round, transparent 100%);
+  //
+  // The floor is what keeps the mark alive at --mw-radius-scale: 0. The reach
+  // is derived from the radius, so a squared-off page took it to a zero-width
+  // circle and the accent vanished on every surface at once - the one setting
+  // where the framework has least else left to recognise it by. At zero radius
+  // there is no curve to trace and the 22px run reads as a bracket instead.
+  $reach: max(22px, calc(#{$round} * 1.8));
+  // An ellipse and not a circle: with equal reach on both axes the arc reads as
+  // a quarter circle, and the mark looks like a corner radius someone forgot to
+  // finish. Half again as far along the horizontal gives it a direction - it
+  // sits on the top edge and turns down, rather than cutting the corner.
+  //
+  // The stop is a percentage here where the circle could take a length: on an
+  // ellipse a length would be measured along one axis only and the fade would
+  // start at different points on the two. The default sits where $round fell.
+  $reach-x: calc(#{$reach} * #{$_corner-stretch});
+  $top: radial-gradient(
+    ellipse $reach-x $reach at 100% 0,
+    #000 $_corner-opaque,
+    transparent 100%
+  );
   $bottom: radial-gradient(
-    circle $reach at 0 100%,
-    #000 $round,
+    ellipse $reach-x $reach at 0 100%,
+    #000 $_corner-opaque,
     transparent 100%
   );
 

package/src/scss/abstracts/_variables.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @use 'sass:string';
 
 $mw-theme-mode: 'switchable' !default; // 'dark', 'light', or 'switchable'
@@ -162,17 +163,28 @@ $focus-halo-opacity: 28% !default;
   );
 }
 
-// Darker, fully opaque variant of a token
+// Darker by a share of the color's own lightness, hue and chroma kept. OKLch and
+// not `color-mix(..., black)`: mixing toward black in HSL takes the saturation
+// down with the lightness, so one $amount reads as a different step on every hue
+// - the yellow goes grey while the blue only dims. Here the six status colors
+// move by the same perceived amount.
 @function shade($name, $amount) {
+  $factor: math.div(100% - $amount, 100%);
+
   @return string.unquote(
-    'color-mix(in hsl, var(--mw-#{$name}), black #{$amount})'
+    'oklch(from var(--mw-#{$name}) calc(l * #{$factor}) c h)'
   );
 }
 
-// Lighter, fully opaque variant of a token
+// The other direction, toward white. Chroma is pulled back by the same share it
+// is lightened by, because a color lifted at full chroma reads as neon rather
+// than as a tint of itself - which is what the HSL mix did implicitly.
 @function tint($name, $amount) {
+  $lift: math.div($amount, 100%);
+  $rest: math.div(100% - $amount, 100%);
+
   @return string.unquote(
-    'color-mix(in hsl, var(--mw-#{$name}), white #{$amount})'
+    'oklch(from var(--mw-#{$name}) calc(l + (1 - l) * #{$lift}) calc(c * #{$rest}) h)'
   );
 }
 
@@ -183,8 +195,10 @@ $focus-halo-opacity: 28% !default;
   );
 }
 
-// Darkened straight toward black, $amount being how much of the color survives.
-// shade() washes out the saturation on the way, which a surface must not do.
+// Darkened straight toward black, $amount being how much of the color *survives*
+// - not how far its lightness moves, which is what shade() above scales. The two
+// part company at the deep end: at 14% shade() lands near L 0.05, where the hue
+// is clipped out of gamut, while this keeps the channel ratios and stays blue.
 @function deepen($name, $amount) {
   @return string.unquote(
     'color-mix(in srgb, var(--mw-#{$name}) #{$amount}, black)'
@@ -223,11 +237,16 @@ $focus-halo-opacity: 28% !default;
 
 // Near is the contact shadow that pins the box down, far the ambient spread that
 // says how high it floats. One layer alone reads as a blur, the pair as light.
-// Theme-prefixed tokens, so the ramp is declared once per theme.
-@function elevation($theme, $y-near, $blur-near, $y-far, $blur-far) {
+//
+// Built on the theme-resolved shadow tokens rather than a per-theme pair: the two
+// themes only ever differed in the colour of those two layers, never in the
+// geometry, so the ramp is one set of five and the theme reaches it through
+// --mw-shadow-near/-far. That also makes .mw-shadows-flat a single-selector
+// override again - it is no longer re-declared further down the tree.
+@function elevation($y-near, $blur-near, $y-far, $blur-far) {
   @return string.unquote(
-    '0 #{$y-near} #{$blur-near} var(--mw-#{$theme}-shadow-near),' +
-      ' 0 #{$y-far} #{$blur-far} var(--mw-#{$theme}-shadow-far)'
+    '0 #{$y-near} #{$blur-near} var(--mw-shadow-near),' +
+      ' 0 #{$y-far} #{$blur-far} var(--mw-shadow-far)'
   );
 }
 
@@ -307,6 +326,10 @@ $semantic-colors: (
   danger: var(--mw-danger-color),
 );
 
+// The theme keys that are not colors. light-dark() only takes <color>, so these
+// keep the alias-per-theme route while everything else resolves in one line.
+$theme-non-colors: ('hero-image-filter');
+
 // Dark theme colors. Emitted as --mw-dark-<key>, hence the prefixed references.
 $dark-theme-colors: (
   'page-background': $dark-background,
@@ -317,17 +340,11 @@ $dark-theme-colors: (
   'footer-background': surface('dark-page-background', $footer-surface-dark),
   'border': surface('dark-page-background', 1.35),
   'shadow': fade('dark-text-color', 30%),
-  // A component names a level instead of inventing another `0 5px 9px`
   'shadow-near': alpha(
       surface('dark-page-background', $shadow-cast-dark),
       $shadow-near-dark
     ),
   'shadow-far': fade('dark-text-color', $shadow-far-dark),
-  'elevation-1': elevation('dark', 1px, 2px, 1px, 4px),
-  'elevation-2': elevation('dark', 2px, 4px, 5px, 12px),
-  'elevation-3': elevation('dark', 3px, 6px, 10px, 24px),
-  'elevation-4': elevation('dark', 6px, 12px, 18px, 40px),
-  'elevation-5': elevation('dark', 10px, 20px, 30px, 64px),
   'text-color': $dark-text-color,
   'text-muted-color': muted(0.7),
   // Derived, so overriding a root color yields a readable dark variant for free
@@ -355,11 +372,6 @@ $light-theme-colors: (
   'shadow': fade('light-text-color', 30%),
   'shadow-near': fade('light-text-color', $shadow-near-light),
   'shadow-far': fade('light-text-color', $shadow-far-light),
-  'elevation-1': elevation('light', 1px, 2px, 1px, 4px),
-  'elevation-2': elevation('light', 2px, 4px, 5px, 12px),
-  'elevation-3': elevation('light', 3px, 6px, 10px, 24px),
-  'elevation-4': elevation('light', 6px, 12px, 18px, 40px),
-  'elevation-5': elevation('light', 10px, 20px, 30px, 64px),
   'text-color': $light-text-color,
   'text-muted-color': muted(0.5),
   // Other direction: a color too light to read on paper is deepened
@@ -377,6 +389,17 @@ $light-theme-colors: (
   'corner-accent-hover': token('light-primary-text-color'),
 );
 
+// The elevation ramp, shared by both themes - see elevation(). A component names
+// a level instead of inventing another `0 5px 9px`.
+// Emitted as --mw-<key>.
+$elevations: (
+  'elevation-1': elevation(1px, 2px, 1px, 4px),
+  'elevation-2': elevation(2px, 4px, 5px, 12px),
+  'elevation-3': elevation(3px, 6px, 10px, 24px),
+  'elevation-4': elevation(6px, 12px, 18px, 40px),
+  'elevation-5': elevation(10px, 20px, 30px, 64px),
+);
+
 // Emitted as --mw-header-<key>. Built from the primary rather than a theme token,
 // because the bar is dark in both themes - see $header-surface.
 $header-colors: (
@@ -463,6 +486,9 @@ $spacing: (
 // Breakpoints
 // Shared by _cards.scss and _pricing.scss, which have to agree on it
 $mw-card-narrow: 360px !default;
+// The other end of the same axis: at this width a card has the room for the
+// larger title and the roomier padding it used to get from a `md` viewport
+$mw-card-wide: 420px !default;
 
 $breakpoints: (
   'xs': 375px,