maverick-wave 5.7.0 → 5.10.0

package/src/scss/components/_tiles.scss

@@ -57,7 +57,22 @@
     }
   }
 
+  // The tile sizes its type off its own width, not the window's. In
+  // `.mw-tiles-4col` on a wide desktop a tile is a quarter of 85% of the page -
+  // narrower than the same tile alone on a phone, where it used to be the one
+  // getting the small type.
+  //
+  // The cost: `container-type` makes the tile a containing block for its own
+  // fixed-position descendants, and unlike a card the tile clips - so a
+  // [data-tooltip] inside one is now cut off at its edge. Taken knowingly, there
+  // being nothing in a tile's anatomy that wants a tooltip. Drop the two lines
+  // below and the queries fall back to the window.
+  $_mw-tile-wide: 300px;
+  $_mw-tile-narrow: 220px;
+
   .mw-tile {
+    width: 100%;
+    container: mw-tile / inline-size;
     background: var(--mw-card-background);
     @include surface;
     padding: spacing('5');
@@ -116,11 +131,11 @@
       line-height: 1.2;
       text-align: center;
 
-      @include media-up('sm') {
+      @container mw-tile (width >= #{$_mw-tile-narrow}) {
         font-size: font-size('xl');
       }
 
-      @include media-up('md') {
+      @container mw-tile (width >= #{$_mw-tile-wide}) {
         font-size: font-size('2xl');
       }
     }
@@ -166,7 +181,7 @@
         font-size: font-size('md');
         margin-bottom: spacing('2');
 
-        @include media-up('md') {
+        @container mw-tile (width >= #{$_mw-tile-wide}) {
           font-size: font-size('lg');
         }
       }
@@ -194,11 +209,11 @@
         font-size: font-size('xl');
         margin-bottom: spacing('4');
 
-        @include media-up('sm') {
+        @container mw-tile (width >= #{$_mw-tile-narrow}) {
           font-size: font-size('2xl');
         }
 
-        @include media-up('md') {
+        @container mw-tile (width >= #{$_mw-tile-wide}) {
           font-size: font-size('3xl');
         }
       }
@@ -214,20 +229,30 @@
     }
   }
 
-  @include media-down('sm') {
-    .mw-tile {
-      padding: spacing('4');
+  // A cramped tile reads better ranged left whatever the window is doing - a
+  // centred line inside 200px is two words and a gap. Every selector here is a
+  // child: a container cannot answer a query about itself, and the tile *is* the
+  // container - which is also why the padding below stays on the window.
+  @container mw-tile (width < #{$_mw-tile-narrow}) {
+    .mw-tile-header,
+    .mw-tile-body {
       text-align: left;
+    }
 
-      &-img {
-        width: 60px;
-        height: 60px;
-        margin: spacing('0') auto spacing('2');
-      }
+    .mw-tile-body {
+      margin-bottom: spacing('2');
+    }
 
-      &-body {
-        margin-bottom: spacing('2');
-      }
+    .mw-tile-img {
+      width: 60px;
+      height: 60px;
+      margin: spacing('0') auto spacing('2');
+    }
+  }
+
+  @include media-down('sm') {
+    .mw-tile {
+      padding: spacing('4');
     }
   }
 }

package/src/scss/components/_timelines.scss

@@ -57,6 +57,7 @@
     margin: spacing('1') auto;
     padding: spacing('5') 0;
     width: min(100%, 900px);
+    container: mw-timeline / inline-size;
 
     // Center vertical line
     &::before {
@@ -185,7 +186,7 @@
       background: var(--mw-primary-color);
       border-color: var(--mw-primary-text-color);
       transform: scale(1.1);
-      animation: mw-pulse-ring-big 2s infinite;
+      animation: mw-pulse-ring-big motion(2s) infinite;
 
       .mw-timeline-big-date-main,
       .mw-timeline-big-date-sub {
@@ -193,9 +194,10 @@
       }
     }
 
-    @include media-down('sm') {
-      width: 100%;
-
+    // The two-sided layout collapses when the timeline itself runs out of room,
+    // not when the window does - the same timeline in a half-width column had
+    // its content overlapping the centre line on a wide desktop.
+    @container mw-timeline (width < #{breakpoint('sm')}) {
       // Line moves to the left
       &::before {
         left: 0;
@@ -258,6 +260,7 @@
     margin: spacing('1') auto;
     padding: spacing('3') 0;
     width: min(96%, 930px);
+    container: mw-timeline / inline-size;
 
     // Vertical line centered over the date column
     &::before {
@@ -319,12 +322,16 @@
       background: var(--mw-primary-color);
       color: var(--mw-primary-accent-text-color);
       transform: scale(1.1);
-      animation: mw-pulse-ring-simple 2s infinite;
+      animation: mw-pulse-ring-simple motion(2s) infinite;
     }
 
+    // The inset is a page-level call: on a phone the timeline takes the full
+    // width, however wide its column happens to be.
     @include media-down('sm') {
       width: 100%;
+    }
 
+    @container mw-timeline (width < #{breakpoint('sm')}) {
       &::before {
         left: 0;
         transform: none;

package/src/scss/layout/_main.scss

@@ -208,7 +208,7 @@
     letter-spacing: 0.08em;
     text-transform: uppercase;
     text-decoration: none;
-    animation: mw-scroll-hint-float 2.2s var(--mw-ease-in-out) infinite;
+    animation: mw-scroll-hint-float motion(2.2s) var(--mw-ease-in-out) infinite;
     text-shadow: 0 1px 4px rgb(0 0 0 / 65%);
 
     // The arrow carries the meaning, so it gets the size and the label stays quiet

package/src/scss/layout/_parallax.scss

@@ -1,6 +1,15 @@
 @use '../abstracts' as *;
 
 @layer mw.layout {
+  // Registered so a bad value cannot invalidate the calc() and drop the layer
+  // somewhere else. 0.5 and not 0 is the resting point - see the transform
+  // at the bottom of this file.
+  @property --mw-parallax-progress {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 0.5;
+  }
+
   // The image gets its own layer instead of `background-attachment: fixed`: that
   // one is ignored on iOS and sizes against the viewport rather than the block.
   // Here a transform runs on the browser's own scroll timeline - no listener, no
@@ -151,13 +160,9 @@
   // 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.
+  // 0 puts the layer at +depth and 1 at -depth, the two ends of the keyframes.
   @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))),

package/src/scss/utilities/_elevation.scss

@@ -15,4 +15,27 @@
       box-shadow: var(--mw-elevation-#{$level});
     }
   }
+
+  // Light instead of shadow. Elevation says how far a surface floats above the
+  // page; this says it is the thing giving off the light - for the one element on
+  // a screen that has to be looked at first, and for nothing else.
+  //
+  // Two layers like elevation, and for the same reason: the tight one reads as
+  // the edge of the source, the wide one as the air around it. Both are
+  // offsetless, which is what separates a glow from a shadow - light does not
+  // fall downwards. Bare `.mw-glow` rides along on primary, because the brand
+  // colour is what a glow means unless it says otherwise.
+  @each $name, $col in $semantic-colors {
+    $selector: '.mw-glow-#{$name}';
+
+    @if $name == 'primary' {
+      $selector: '.mw-glow, #{$selector}';
+    }
+
+    #{$selector} {
+      box-shadow:
+        0 0 6px color-mix(in srgb, #{$col} 45%, transparent),
+        0 0 26px color-mix(in srgb, #{$col} 28%, transparent);
+    }
+  }
 }

package/src/scss/utilities/_touch-targets.scss

@@ -5,7 +5,7 @@
   // sizes are right under a pointer and too small under a thumb. Coarse *or*
   // narrow, because a tablet in landscape is wide and still finger-operated.
   // Loaded last, so these win without extra specificity.
-  @media (pointer: coarse), (max-width: #{breakpoint('md')}) {
+  @media (pointer: coarse), (width <= #{breakpoint('md')}) {
     // Padding and line-height add up to ~35px, under the 44px a thumb needs. Only
     // the height grows: the padding sets the label's relationship to the edges.
     .mw-btn {

package/src/scss/utilities/_variants.scss

@@ -31,17 +31,30 @@
   // 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 {
+  // One selector, unlike mw-surfaces-flush below: the ramp is no longer declared
+  // per theme, so there is no copy further down the tree to shadow this one. The
+  // theme reaches it through --mw-shadow-near/-far instead - see elevation().
+  :root.mw-shadows-flat {
     --mw-elevation-1: none;
     --mw-elevation-2: none;
     --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, and those *are* re-declared on <body> when the toggle puts
+  // .mw-theme-light there - a value written on :root alone would be shadowed for
+  // the whole body subtree and the switch would do nothing in light mode.
+  :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.
   //
@@ -117,4 +159,71 @@
       letter-spacing: 0.045em;
     }
   }
+
+  // The other axis to --mw-root-font-size, which zooms the whole page: there
+  // the layout is the same layout, larger. This moves the padding inside a
+  // surface and leaves the type alone, so a dense screen reads as well as a
+  // roomy one and only fits more on.
+  //
+  // --mw-section-padding-block is deliberately untouched: section spacing is
+  // its own switch, and both writing it would have the panel print a setup that
+  // contradicts itself. Steps along the spacing scale rather than free values,
+  // because that scale is what every other measure is built from - two of them
+  // down for compact, where the point is to fit more on screen, one up for
+  // roomy, where a second step would only look loose.
+  :root.mw-density-compact {
+    --mw-control-height-sm: 1.5rem;
+    --mw-control-height: 1.75rem;
+    --mw-control-height-lg: 2rem;
+
+    .mw-card-body {
+      padding: spacing('4') spacing('2') spacing('3');
+
+      @container mw-card (width >= #{$mw-card-wide}) {
+        padding: spacing('5') spacing('3') spacing('4');
+      }
+    }
+
+    .mw-panel-header,
+    .mw-panel-body {
+      padding: spacing('2') spacing('3');
+    }
+  }
+
+  :root.mw-density-roomy {
+    --mw-control-height-sm: 2.25rem;
+    --mw-control-height: 2.5rem;
+    --mw-control-height-lg: 2.75rem;
+
+    .mw-card-body {
+      padding: spacing('7') spacing('5') spacing('6');
+
+      @container mw-card (width >= #{$mw-card-wide}) {
+        padding: spacing('8') spacing('6') spacing('7');
+      }
+    }
+
+    .mw-panel-header,
+    .mw-panel-body {
+      padding: spacing('5') spacing('6');
+    }
+  }
+
+  :root.mw-links-underline {
+    .mw-link,
+    .mw-link-muted,
+    .mw-btn-link {
+      // The longhand, because the `text-decoration` shorthand resets
+      // text-decoration-thickness along with it and would drop the 1.5px
+      // link-look() draws the line at.
+      text-decoration-line: underline;
+
+      // The underline was the hover signal and is now the resting state, so the
+      // weight takes over: .mw-link carries no colour change of its own and
+      // would otherwise go completely dead under the pointer.
+      &:hover:not(:disabled) {
+        text-decoration-thickness: 3px;
+      }
+    }
+  }
 }