maverick-wave 5.6.0 → 5.8.0

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,25 +70,84 @@
     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 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;
+        }
+      }
     }
+  }
 
-    // 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;
+  // 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.
+  //
+  // Deliberately without `backdrop-filter`, and that omission has to stay. The
+  // filter makes the button a containing block for its own fixed-position
+  // descendants, which drops a [data-tooltip] bubble inside the button instead
+  // of above it; and nested inside the header's own blur it flickers while the
+  // page scrolls. At the tint below there was next to nothing to see through.
+  //
+  // The tint stays heavy on purpose, and that is the other trade-off: a 20%
+  // wash reads as real glass, but the label then rides on whatever is behind
+  // it, and over a light card that contrast is gone. At 88/70 the label keeps
+  // roughly the fill's contrast.
+  //
+  // Hover and active are restated rather than inherited: this sits in
+  // mw.utilities, which outranks every rule in mw.components whatever its
+  // specificity, so the states would otherwise be flattened along with the fill.
+  :root.mw-btn-glass {
+    @each $name in ('primary', 'secondary', 'danger', 'success') {
+      .mw-btn-#{$name} {
+        background: linear-gradient(
+          to bottom,
+          color-mix(in srgb, var(--mw-#{$name}-color) 88%, transparent),
+          color-mix(in srgb, var(--mw-#{$name}-color) 70%, transparent)
+        );
+        border-color: color-mix(
+          in srgb,
+          var(--mw-#{$name}-color) 70%,
+          transparent
+        );
+        box-shadow:
+          inset 0 1px 0 rgb(255 255 255 / 28%),
+          0 1px 3px rgb(0 0 0 / 14%);
+
+        &:hover:not(:disabled),
+        &.mw-active:not(:disabled),
+        &.active:not(:disabled) {
+          background: linear-gradient(
+            to bottom,
+            color-mix(in srgb, var(--mw-#{$name}-color) 97%, transparent),
+            color-mix(in srgb, var(--mw-#{$name}-color) 82%, transparent)
+          );
+          border-color: color-mix(
+            in srgb,
+            var(--mw-#{$name}-color) 85%,
+            transparent
+          );
+        }
+      }
     }
   }