maverick-wave 5.24.0 → 5.25.0

package/src/scss/components/_button-bar.scss

@@ -3,7 +3,8 @@
 @layer mw.components {
   .mw-button-bar {
     display: flex;
-    gap: spacing('3');
+    flex-direction: column;
+    gap: spacing('2');
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
@@ -11,17 +12,20 @@
     border-radius: radius('md');
     padding: spacing('2');
 
+    .mw-btn {
+      width: 100%;
+    }
+
     &:hover {
       border-color: var(--mw-border-accent);
     }
 
-    @include media-down('sm') {
-      flex-direction: column;
-      gap: spacing('2');
+    @include media-up('sm') {
+      flex-direction: row;
+      gap: spacing('3');
 
       .mw-btn {
-        width: 100%;
-        min-width: 0;
+        width: auto;
       }
     }
   }

package/src/scss/components/_code.scss

@@ -42,15 +42,15 @@
       white-space: pre-wrap;
       display: block;
       line-height: 1.5;
+      font-size: font-size('3xs');
 
-      @include media-down('sm') {
+      @include media-up('xs') {
         font-size: font-size('2xs');
-        white-space: pre-wrap;
-        word-break: break-word;
       }
 
-      @include media-down('xs') {
-        font-size: font-size('3xs');
+      // Back to the shared `code, pre` size
+      @include media-up('sm') {
+        font-size: font-size('xs');
       }
     }
   }
@@ -80,10 +80,13 @@
     &-filename {
       font-weight: font-weight('medium');
       margin-right: spacing('2');
+      font-size: font-size('2xs');
+      // The header wraps at this width, so the language chip needs its own line
+      margin-bottom: spacing('1');
 
-      @include media-down('sm') {
-        font-size: font-size('2xs');
-        margin-bottom: spacing('1');
+      @include media-up('sm') {
+        font-size: font-size('xs');
+        margin-bottom: spacing('0');
       }
     }
 
@@ -102,19 +105,16 @@
       border: none;
       max-width: 100%;
       overflow-x: auto;
+      font-size: font-size('3xs');
+      padding: spacing('1');
 
-      @include media-down('sm') {
+      @include media-up('xs') {
         font-size: font-size('2xs');
-        padding: spacing('1');
-
-        code {
-          white-space: pre-wrap;
-          word-break: break-word;
-        }
       }
 
-      @include media-down('xs') {
-        font-size: font-size('3xs');
+      @include media-up('sm') {
+        font-size: font-size('xs');
+        padding: spacing('4');
       }
     }
   }
@@ -213,18 +213,6 @@
     overflow-x: auto;
     position: relative;
 
-    // Add horizontal scrolling indicator for small screens
-    @include media-down('sm') {
-      background-position:
-        left center,
-        right center;
-      background-repeat: no-repeat;
-      background-size:
-        20px 100%,
-        20px 100%;
-      background-attachment: local, local;
-    }
-
     & > * {
       max-width: 100%;
     }
@@ -234,14 +222,15 @@
       width: 100%;
 
       pre {
-        white-space: pre;
+        white-space: pre-wrap;
+        word-break: break-word;
         width: 100%;
         overflow-x: auto;
 
-        // For very small screens, allow wrapping
-        @include media-down('xs') {
-          white-space: pre-wrap;
-          word-break: break-word;
+        // From here the box can scroll a long line instead of splitting it
+        @include media-up('xs') {
+          white-space: pre;
+          word-break: normal;
         }
       }
 

package/src/scss/components/_info.scss

@@ -63,7 +63,9 @@
       align-items: flex-start;
       width: 100%;
       max-width: 68ch;
-      margin-inline: auto;
+      // Left, like everything else that carries running text. It used to centre
+      // itself, which only ever matched a page whose headings were centred too.
+      margin-inline: 0;
       padding: spacing('6') spacing('7');
       font-weight: font-weight('normal');
       line-height: 1.7;
@@ -78,6 +80,11 @@
         transform: none;
       }
 
+      // For the page that does centre its blocks
+      &-center {
+        margin-inline: auto;
+      }
+
       strong {
         margin-bottom: spacing('2');
       }

package/src/scss/components/_kanban.scss

@@ -67,15 +67,15 @@
       auto-fit,
       minmax(min(#{$_mw-kanban-lane-min}, 100%), 1fr)
     );
-    gap: spacing('4');
-    padding: spacing('4');
+    // Frame only - how tight the board sits on a phone is a viewport call
+    gap: spacing('3');
+    padding: spacing('3');
     background: var(--mw-kanban-background);
     border-radius: radius('md');
 
-    // Frame only - how tight the board sits on a phone is a viewport call
-    @include media-down('sm') {
-      gap: spacing('3');
-      padding: spacing('3');
+    @include media-up('sm') {
+      gap: spacing('4');
+      padding: spacing('4');
     }
   }
 

package/src/scss/components/_meta-info.scss

@@ -9,13 +9,14 @@
       display: flex;
       flex-wrap: wrap;
       align-items: center;
-      justify-content: flex-end;
-      row-gap: spacing('1');
+      justify-content: flex-start;
+      column-gap: spacing('6');
+      row-gap: spacing('2');
 
-      @include media-down('sm') {
-        justify-content: flex-start;
-        column-gap: spacing('6');
-        row-gap: spacing('2');
+      @include media-up('sm') {
+        justify-content: flex-end;
+        column-gap: normal;
+        row-gap: spacing('1');
       }
     }
 

package/src/scss/components/_tables.scss

@@ -10,7 +10,8 @@
 
     th,
     td {
-      padding: spacing('3') spacing('4');
+      padding: spacing('2') spacing('3');
+      font-size: font-size('xs');
       text-align: left;
       border: 1px solid var(--mw-border);
       color: var(--mw-text-muted-color);
@@ -40,11 +41,12 @@
       }
     }
 
-    @include media-down('sm') {
+    @include media-up('sm') {
       th,
       td {
-        padding: spacing('2') spacing('3');
-        font-size: font-size('xs');
+        padding: spacing('3') spacing('4');
+        // Back to whatever the table is set in - the base size is the phone step
+        font-size: inherit;
       }
     }
   }

package/src/scss/components/_tiles.scss

@@ -20,9 +20,12 @@
       grid-template-columns: repeat(3, 1fr);
     }
 
+    // The page gutter is the container's job, a second inset only narrows the tile
     &-4col {
-      width: 85%;
-      grid-template-columns: repeat(2, 1fr);
+      @include media-up('sm') {
+        width: 85%;
+        grid-template-columns: repeat(2, 1fr);
+      }
 
       @include media-up('md') {
         grid-template-columns: repeat(3, 1fr);
@@ -31,28 +34,12 @@
       @include media-up('lg') {
         grid-template-columns: repeat(4, 1fr);
       }
-
-      @include media-down('sm') {
-        grid-template-columns: 1fr;
-        // Full width from here on - the page gutter is the container's job,
-        // a second inset only narrows the tile
-        width: 100%;
-        padding: spacing('0');
-        gap: spacing('4');
-      }
     }
 
     &-2col {
-      width: 75%;
-      grid-template-columns: repeat(2, 1fr);
-
-      @include media-down('sm') {
-        grid-template-columns: 1fr;
-        // Full width from here on - the page gutter is the container's job,
-        // a second inset only narrows the tile
-        width: 100%;
-        padding: spacing('0');
-        gap: spacing('4');
+      @include media-up('sm') {
+        width: 75%;
+        grid-template-columns: repeat(2, 1fr);
       }
     }
   }
@@ -75,7 +62,7 @@
     container: mw-tile / inline-size;
     background: var(--mw-card-background);
     @include surface;
-    padding: spacing('5');
+    padding: spacing('4');
     box-shadow: var(--mw-elevation-2);
     transition: var(--mw-transition);
     border: 1px solid var(--mw-border);
@@ -84,6 +71,11 @@
     flex-direction: column;
     cursor: pointer;
 
+    // Ahead of the size modifiers below, which take over from 'sm'
+    @include media-up('sm') {
+      padding: spacing('5');
+    }
+
     // Same hover as a card, arc included - a tile is the larger clickable
     // relative of one, and a pair that looks alike has to react alike.
     &::after {
@@ -169,7 +161,9 @@
     }
 
     &-sm {
-      padding: spacing('4');
+      @include media-up('sm') {
+        padding: spacing('4');
+      }
 
       .mw-tile-img {
         width: 80px;
@@ -197,7 +191,9 @@
     }
 
     &-lg {
-      padding: spacing('6');
+      @include media-up('sm') {
+        padding: spacing('6');
+      }
 
       .mw-tile-img {
         width: 120px;
@@ -249,10 +245,4 @@
       margin: spacing('0') auto spacing('2');
     }
   }
-
-  @include media-down('sm') {
-    .mw-tile {
-      padding: spacing('4');
-    }
-  }
 }

package/src/scss/layout/_grid.scss

@@ -51,6 +51,10 @@ $_column-steps-lg: (
   ),
 );
 
+// The breakpoints a grid can be pushed to. Outside the layer blocks for the
+// same reason as the steps above: both read it.
+$_grid-from: ('sm', 'md', 'lg', 'xl');
+
 @layer mw.layout {
   %grid-base {
     display: grid;
@@ -290,6 +294,19 @@ $_column-steps-lg: (
     }
   }
 
+  // Every ramp above turns two-column at `sm`, and 576px is generous for a
+  // column of running text next to a picture. This pushes the whole ramp up:
+  // single column until the breakpoint named, the grid's own steps from there.
+  // A modifier, so it works on all of them - and it has to come after them,
+  // because it carries the same specificity and wins on order alone.
+  @each $breakpoint in $_grid-from {
+    .mw-grid-from-#{$breakpoint} {
+      @include media-down($breakpoint) {
+        @include _single-column;
+      }
+    }
+  }
+
   // A feature card grows outwards - its frame and its label bar reach into the
   // gap, and two rows of them would touch. The card asks for the room, but the
   // grid has to hand it over: written next to the card it would sit in
@@ -350,4 +367,15 @@ $_column-steps-lg: (
       @include _reveal-ramp($steps);
     }
   }
+
+  // Below its breakpoint the grid is one column, so the stagger has to count in
+  // one too - otherwise two cards standing above each other rise on different
+  // beats. Last, so it beats the ramp it corrects at equal specificity.
+  @each $breakpoint in $_grid-from {
+    .mw-grid-from-#{$breakpoint} {
+      @include media-down($breakpoint) {
+        @include _reveal-stagger(1);
+      }
+    }
+  }
 }

package/src/scss/layout/_header.scss

@@ -529,16 +529,19 @@
     }
   }
 
-  // Profile button - avatar plus the signed-in name
+  // Profile button - a round avatar until there is room for the signed-in name
+  // beside it
   .mw-profile-btn {
     display: inline-flex;
     align-items: center;
+    justify-content: center;
     gap: spacing('3');
     height: 40px;
-    padding: spacing('0') spacing('4') spacing('0') spacing('1');
+    width: 40px;
+    padding: spacing('0');
     background: transparent;
     border: 1px solid var(--mw-header-border);
-    border-radius: radius('2xl');
+    border-radius: radius('full');
     color: var(--mw-header-text-color);
     cursor: pointer;
     transition: var(--mw-transition);
@@ -583,14 +586,18 @@
       font-size: font-size('xl');
     }
 
-    @include media-down('md') {
-      padding: spacing('0');
-      width: 40px;
-      justify-content: center;
-      border-radius: radius('full');
+    .mw-profile-btn-name {
+      display: none;
+    }
+
+    @include media-up('md') {
+      width: auto;
+      justify-content: normal;
+      padding: spacing('0') spacing('4') spacing('0') spacing('1');
+      border-radius: radius('2xl');
 
       .mw-profile-btn-name {
-        display: none;
+        display: inline;
       }
     }
   }

package/src/scss/layout/_home.scss

@@ -5,11 +5,17 @@
     justify-items: center;
     align-items: center;
     text-align: center;
+    // The hero container runs the full width of the screen (see _main.scss), so
+    // the content has to produce the container width itself - otherwise it
+    // starts at a different edge than the header and every section below it.
+    // The gutter is already inside the token, hence no inline padding here.
+    width: var(--mw-container-width);
+    margin-inline: auto;
 
     &-content {
-      padding: spacing('9') spacing('4');
+      padding: spacing('9') spacing('0');
       @include media-up('sm') {
-        padding: spacing('6');
+        padding-block: spacing('6');
       }
 
       &-fade {
@@ -28,6 +34,19 @@
     }
   }
 
+  // A hero that points somewhere instead of sitting in the middle: the signet,
+  // the headline and the buttons all start at the edge the rest of the page
+  // starts at. Centred is still the default - a hero is short enough for it,
+  // which is exactly what a section head is not.
+  .mw-home-start {
+    justify-items: start;
+    text-align: left;
+
+    .mw-home-text {
+      margin-inline: 0;
+    }
+  }
+
   @keyframes fadeIn {
     from {
       opacity: 0;

package/src/scss/layout/_main.scss

@@ -13,19 +13,19 @@
     counter-reset: mw-section-head;
   }
 
-  // Set in from the container it sits in, and giving that back a step at a time
-  // as the screen shrinks. For a column of full-width cards, which at 1200px
-  // leaves more empty card than content.
+  // Takes the full container on a phone and steps inwards as the screen grows.
+  // For a column of full-width cards, which at 1200px leaves more empty card
+  // than content.
   .mw-container-narrow {
-    width: 80%;
+    width: 100%;
     margin-inline: auto;
 
-    @include media-down('lg') {
+    @include media-up('md') {
       width: 90%;
     }
 
-    @include media-down('md') {
-      width: 100%;
+    @include media-up('lg') {
+      width: 80%;
     }
   }
 

package/src/scss/layout/_page-header.scss

@@ -34,11 +34,11 @@
       flex-wrap: wrap;
       align-items: center;
       gap: spacing('3');
-      margin-left: auto;
+      width: 100%;
 
-      @include media-down('sm') {
-        width: 100%;
-        margin-left: spacing('0');
+      @include media-up('sm') {
+        width: auto;
+        margin-left: auto;
       }
     }
 

package/src/scss/layout/_section.scss

@@ -113,11 +113,9 @@
   // levels read as a hierarchy rather than as two of the same thing.
   .mw-section-subtitle {
     font-size: fluid('xl', '2xl', $to: 'sm');
-    // One step above the demo gap of spacing('6'), and that step is the whole
-    // margin the boundary between two components has over the one between two
-    // demos - the heading leans toward what it names, not toward what came
-    // before it.
-    margin: spacing('8') spacing('0') spacing('4') spacing('0');
+    // The section boundary is 56px on a phone, so the component boundary sits
+    // with it or the two stop being distinguishable
+    margin: spacing('6') spacing('0') spacing('4') spacing('0');
     position: relative;
 
     &::after {
@@ -201,11 +199,13 @@
     }
   }
 
-  @include media-down('sm') {
-    // The section boundary steps down to 56px on a phone, so the component
-    // boundary steps with it or the two stop being distinguishable
+  @include media-up('sm') {
+    // One step above the demo gap of spacing('6'), and that step is the whole
+    // margin the boundary between two components has over the one between two
+    // demos - the heading leans toward what it names, not toward what came
+    // before it.
     .mw-section-subtitle {
-      margin-top: spacing('6');
+      margin-top: spacing('8');
     }
   }
 

package/src/scss/main-lean.scss

@@ -0,0 +1,16 @@
+// The same framework without the 48 components: tokens, reset, typography,
+// grid, container, section, header, footer and every utility. Add the
+// components the page actually uses next to it, each one its own file:
+//
+//   @use 'maverick-wave/src/scss/main-lean' with ($primary-color: #1b1b1d);
+//   @use 'maverick-wave/src/scss/components/buttons';
+//   @use 'maverick-wave/src/scss/components/cards';
+//
+// The configuration goes on this file, not on the component imports - they
+// read the tokens it forwards. A landing page that uses eight components lands
+// around a third of the full build; the components carry the rest.
+@forward 'abstracts/variables';
+
+@use 'base';
+@use 'layout';
+@use 'utilities';

package/src/scss/utilities/_index.scss

@@ -4,6 +4,7 @@
 @forward 'display';
 @forward 'elevation';
 @forward 'flex';
+@forward 'print';
 @forward 'reveal';
 @forward 'spacing';
 @forward 'text';

package/src/scss/utilities/_print.scss

@@ -0,0 +1,107 @@
+@use '../abstracts' as *;
+
+// Last layer on purpose: these rules have to win against the components they
+// flatten, and a media query adds no specificity of its own.
+@layer mw.utilities {
+  // Hidden on screen, shown on paper. Before the print block and not after it:
+  // both rules have the same specificity, so the later one would win in print
+  // too and the note would never appear.
+  .mw-print-only {
+    display: none;
+  }
+
+  @media print {
+    // Paper is white and ink is black, whatever the screen was told to be. The
+    // tokens are redeclared on .mw-theme-light too - that copy sits further
+    // down the tree and would otherwise shadow the one on :root.
+    :root,
+    .mw-theme-light {
+      --mw-page-background: #fff;
+      --mw-card-background: #fff;
+      --mw-footer-background: #fff;
+      --mw-text-color: #000;
+      --mw-text-muted-color: #333;
+      --mw-border: #999;
+      --mw-border-accent: #666;
+
+      // No toner for depth that paper cannot show anyway. Level 0 is not in the
+      // list: it is flat by definition and nothing reads it as a variable.
+      --mw-elevation-1: none;
+      --mw-elevation-2: none;
+      --mw-elevation-3: none;
+      --mw-elevation-4: none;
+      --mw-elevation-5: none;
+    }
+
+    body {
+      background: #fff;
+      color: #000;
+    }
+
+    // Chrome that is fixed on screen would print on the first page and cover
+    // what is underneath, and navigation is useless on paper either way.
+    .mw-header,
+    .mw-announcement:not(.mw-announcement-static),
+    .mw-section-nav,
+    .mw-scroll-hint,
+    .mw-menu-btn,
+    .mw-theme-toggle,
+    .mw-skip-link,
+    .mw-toast-stack,
+    .mw-hide-print {
+      display: none;
+    }
+
+    // The counterpart: a note that only makes sense on the printed page
+    .mw-print-only {
+      display: revert;
+    }
+
+    // A surface without its tone still needs an edge to be a surface
+    .mw-card,
+    .mw-panel,
+    .mw-tile,
+    .mw-alert,
+    .mw-info {
+      border: 1px solid #999;
+      background: #fff;
+    }
+
+    // Anything that is one thing should not be torn across two pages
+    .mw-card,
+    .mw-panel,
+    .mw-tile,
+    .mw-section-head,
+    .mw-leader-row,
+    .mw-item-list-item,
+    tr,
+    figure,
+    blockquote {
+      break-inside: avoid;
+    }
+
+    // A heading at the foot of a page belongs to the next one
+    h1,
+    h2,
+    h3,
+    .mw-section-head-title,
+    .mw-section-subtitle {
+      break-after: avoid;
+    }
+
+    // Screen rhythm is scroll distance; on paper it is wasted sheets
+    .mw-section {
+      padding-block: spacing('6');
+    }
+
+    // A link is only worth printing when its target comes with it. Internal
+    // anchors and mail links stay quiet - the first says nothing on paper, the
+    // second already shows the address as its text.
+    .mw-prose a[href^='http']::after,
+    .mw-disclaimer a[href^='http']::after {
+      content: ' (' attr(href) ')';
+      font-size: font-size('xs');
+      word-break: break-all;
+    }
+  }
+}