maverick-wave 5.4.0 → 5.6.0

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

@@ -9,7 +9,7 @@
     flex-direction: column;
     gap: spacing('3');
     width: min(380px, calc(100vw - #{2 * spacing('5')}));
-    max-height: calc(100vh - #{2 * spacing('5')});
+    max-height: calc(100dvh - #{2 * spacing('5')});
     overflow-y: auto;
     pointer-events: none;
 

package/src/scss/form-elements/_slider.scss

@@ -38,10 +38,14 @@
       transform: scale(1.1);
     }
 
+    // Same fill and ring as the webkit thumb above - Firefox paints its own
+    // grey thumb unless `background` is set, so leaving it out is not the same
+    // declaration set, it is a different slider.
     &::-moz-range-thumb {
       width: spacing('5');
       height: spacing('5');
-      border: 2px solid var(--fill);
+      background: var(--fill);
+      border: 2px solid var(--mw-border);
       border-radius: radius('full');
       transition:
         transform var(--mw-duration-fast) var(--mw-ease-out),
@@ -55,20 +59,6 @@
       background: transparent;
     }
 
-    // IE
-    &::-ms-fill-lower {
-      background: var(--fill);
-    }
-    &::-ms-fill-upper {
-      background: var(--track);
-    }
-    &::-ms-thumb {
-      width: spacing('5');
-      height: spacing('5');
-      border: 2px solid var(--fill);
-      border-radius: radius('full');
-    }
-
     &-sm {
       height: 6px;
       &::-webkit-slider-thumb {
@@ -79,10 +69,6 @@
         width: spacing('4');
         height: spacing('4');
       }
-      &::-ms-thumb {
-        width: spacing('4');
-        height: spacing('4');
-      }
     }
     &-lg {
       height: 16px;
@@ -95,10 +81,6 @@
         width: spacing('6');
         height: spacing('6');
       }
-      &::-ms-thumb {
-        width: spacing('6');
-        height: spacing('6');
-      }
     }
     &:disabled {
       opacity: 0.3;

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-reveal.scss

@@ -63,6 +63,39 @@
     }
   }
 
+  // Firefox ships no scroll timelines, so there the script toggles these
+  // classes instead (main.js) - the same two positions, triggered instead of
+  // scrubbed. State and transition are separate because the script sets the
+  // state a frame earlier: together they would send the bar sliding away in
+  // front of the reader instead of having it gone already.
+  @media (prefers-reduced-motion: no-preference) {
+    .mw-header-reveal.mw-header-away {
+      top: calc(-1 * var(--mw-header-reveal-offset));
+      opacity: 0;
+    }
+
+    .mw-header-driven {
+      // The shared list plus `top`, which is not in it - writing only `top`
+      // here would drop the header's own colour and shadow transitions.
+      transition:
+        var(--mw-transition),
+        top var(--mw-duration-slow) var(--mw-ease-out);
+    }
+
+    .mw-announcement.mw-announcement-away {
+      transform: translateY(
+        calc(-1 * (var(--mw-header-height) + var(--mw-announcement-height)))
+      );
+      opacity: 0;
+    }
+
+    .mw-announcement-driven {
+      transition:
+        transform var(--mw-duration-slow) var(--mw-ease-out),
+        opacity var(--mw-duration-slow) var(--mw-ease-out);
+    }
+  }
+
   // `top` and not a transform: the off-canvas drawer inside the bar is
   // position: fixed, and a transform on the header would make it the drawer's
   // containing block - at every value, the resting one included.

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/layout/_parallax.scss

@@ -146,6 +146,26 @@
     }
   }
 
+  // Firefox ships no scroll timelines, so there the script writes the progress
+  // and the travel is worked out here (main.js). Keeping the transform in CSS
+  // is what lets every depth variant above - and an inline
+  // `--mw-parallax-depth` - go on working untouched.
+  //
+  // 0 puts the layer at +depth and 1 at -depth, the two ends of the keyframes
+  // below. Declared and not only used, so the frame before the script has
+  // written anything sits at rest instead of nowhere.
+  @media (prefers-reduced-motion: no-preference) {
+    .mw-parallax-driven {
+      --mw-parallax-progress: 0.5;
+
+      transform: translate3d(
+        0,
+        calc(var(--mw-parallax-depth) * (1 - 2 * var(--mw-parallax-progress))),
+        0
+      );
+    }
+  }
+
   @keyframes mw-parallax {
     from {
       transform: translate3d(0, var(--mw-parallax-depth), 0);

package/src/scss/utilities/_index.scss

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

package/src/scss/utilities/_reveal.scss

@@ -36,6 +36,28 @@
     }
   }
 
+  // Firefox ships no scroll timelines at all, so there the script drives the
+  // same movement (main.js): `mw-reveal-hidden` while the element waits below
+  // the fold, `mw-reveal-run` once it enters. Both classes are added by the
+  // script and never by the markup - a page without JS keeps everything
+  // visible, which is what the guard above is for.
+  @media (prefers-reduced-motion: no-preference) {
+    .mw-reveal-hidden {
+      opacity: 0;
+      transform: translateY(40px);
+    }
+
+    .mw-reveal-run {
+      // `backwards` for the reason above - a forwards fill would pin the
+      // transform and cost the card its hover lift. The delay comes inline,
+      // from the element's column.
+      animation-name: mw-reveal;
+      animation-duration: var(--mw-duration-slower);
+      animation-timing-function: var(--mw-ease-out);
+      animation-fill-mode: backwards;
+    }
+  }
+
   @keyframes mw-reveal {
     from {
       opacity: 0;

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

package/.impeccable/config.local.json

@@ -1,5 +0,0 @@
-{
-  "hook": {
-    "consent": "accepted"
-  }
-}

package/.impeccable/hook.cache.json

@@ -1,75 +0,0 @@
-{
-  "version": 1,
-  "sessions": {
-    "5682ec58-6688-479f-994f-990ff918c05d": {
-      "updatedAt": 1789084033412,
-      "files": {
-        "/Users/m1well/Dev/workspace/css/maverick-wave/src/scss/layout/_header.scss": {
-          "editCount": 3,
-          "findings": [],
-          "stopBaseline": { "version": 1, "engine": "0.1.5", "counts": {} },
-          "cleanAcked": true
-        },
-        "/Users/m1well/Dev/workspace/css/maverick-wave/src/scss/form-elements/_slider.scss": {
-          "editCount": 1,
-          "findings": [],
-          "stopBaseline": { "version": 1, "engine": "0.1.5", "counts": {} },
-          "cleanAcked": true
-        },
-        "/Users/m1well/Dev/workspace/css/maverick-wave/src/js/main.js": {
-          "editCount": 7,
-          "findings": []
-        },
-        "/Users/m1well/Dev/workspace/css/maverick-wave/index.html": {
-          "editCount": 2,
-          "findings": [
-            "low-contrast:0:3.3:1 (need 4.5:1) — text #7d85a5 on #313746",
-            "pulsing-dot:0:.mw-spinner-dots>div — 16x16px dot with infinite \"mw-bounce\" animation",
-            "dark-glow:0:Colored box-shadow glow (#d1bb21) on dark page"
-          ]
-        },
-        "/Users/m1well/Dev/workspace/css/maverick-wave/src/partials/typography-container.html": {
-          "editCount": 2,
-          "findings": [],
-          "cleanAcked": true
-        },
-        "/Users/m1well/Dev/workspace/css/maverick-wave/src/scss/base/_base.scss": {
-          "editCount": 2,
-          "findings": [],
-          "stopBaseline": { "version": 1, "engine": "0.1.5", "counts": {} },
-          "cleanAcked": true
-        },
-        "/Users/m1well/Dev/workspace/css/maverick-wave/src/scss/layout/_section.scss": {
-          "editCount": 7,
-          "findings": [],
-          "cleanAcked": true
-        },
-        "/Users/m1well/Dev/workspace/css/maverick-wave/src/scss/form-elements/_form.scss": {
-          "editCount": 1,
-          "findings": [],
-          "stopBaseline": { "version": 1, "engine": "0.1.5", "counts": {} },
-          "cleanAcked": true
-        },
-        "/Users/m1well/Dev/workspace/css/maverick-wave/src/scss/components/_alerts.scss": {
-          "editCount": 1,
-          "findings": ["side-tab:83"],
-          "stopBaseline": {
-            "version": 1,
-            "engine": "0.1.5",
-            "counts": {
-              "62d926b4b80efa38e6fbf0fe65f45cf171d9b8a80be0b2ee47ac4cbb6c9498d0": 1
-            }
-          },
-          "cleanAcked": true
-        },
-        "/Users/m1well/Dev/workspace/css/maverick-wave/src/scss/layout/_main.scss": {
-          "editCount": 1,
-          "findings": [],
-          "stopBaseline": { "version": 1, "engine": "0.1.5", "counts": {} },
-          "cleanAcked": true
-        }
-      },
-      "footerShown": true
-    }
-  }
-}