maverick-wave 4.9.0 → 4.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "maverick-wave",
-  "version": "4.9.0",
+  "version": "4.9.2",
   "config": {
     "version_short": "4.9"
   },
@@ -24,7 +24,7 @@
   "bugs": {
     "url": "https://github.com/m1well/maverick-wave/issues"
   },
-  "homepage": "https://maverickwave.m1well.com/",
+  "homepage": "https://maverick-wave.m1well.com/",
   "author": "m1well",
   "license": "MIT",
   "keywords": [

package/src/scss/abstracts/_variables.scss

@@ -4,6 +4,14 @@ $mw-theme-mode: 'switchable' !default; // 'dark', 'light', or 'switchable'
 
 $mw-hero-image: url('https://images.unsplash.com/photo-1591638462868-19cfad9c49d1?q=80&w=1300&auto=format&fit=crop') !default;
 
+// Ink on the hero image. The photo behind it is the same picture in both themes,
+// so the text on top cannot follow the theme: --mw-text-color would go dark the
+// moment the light theme is on, over a photo that stayed exactly as dark as it
+// was. Fixed to the light end of the palette instead, because a hero image is
+// usually the dark one. Set it to var(--mw-light-text-color) for a bright photo,
+// or to any color of your own.
+$mw-hero-text-color: var(--mw-dark-text-color) !default;
+
 // ---------------------------------------------------------------------------
 // Root colors
 //
@@ -73,12 +81,28 @@ $muted-tint: 23% !default;
 // room for a low card factor.
 $card-surface-dark: 0.85 !default;
 $card-surface-light: 1.05 !default;
-// Footer and header chrome. In the dark theme they step further out than the
-// card, in the light theme they step the other way, so the band under the page
-// reads as chrome and not as another card.
+// The footer band. In the dark theme it steps further out than the card, in the
+// light theme it steps the other way, so the band under the page reads as chrome
+// and not as another card. The header is not part of this - see below.
 $footer-surface-dark: 0.75 !default;
 $footer-surface-light: 0.95 !default;
 
+// The header bar. It stays dark in both themes, so it cannot be part of the
+// surface stack above: a project that only ever shows the light theme would be
+// styling its header through a dark page color it never configured, and the bar
+// would keep the framework default no matter what the palette says.
+//
+// It is built from the primary color instead - the one token every palette has
+// to set - darkened straight toward black, which is the ramp every color tool
+// shows as a color's shades. Kept well past the bottom of that ramp on purpose:
+// this deep the brand hue is a tint on near-black rather than a color of its
+// own, which is what keeps the bar reading as chrome behind the page.
+//
+// Lower it for a darker bar. The ink on the bar is near-white, so going far up
+// means overriding --mw-header-text-color and
+// --mw-header-navbar-list-active-color with it.
+$header-surface: 16% !default;
+
 // ---------------------------------------------------------------------------
 // Derivation helpers
 //
@@ -123,6 +147,17 @@ $footer-surface-light: 0.95 !default;
   );
 }
 
+// Darkened straight toward black in sRGB - the ramp a color tool prints as a
+// color's shades, where $amount is how much of the color survives. shade()
+// cannot stand in for it: mixing in hsl scales saturation along with lightness
+// and hands back a washed-out tone, which is what a hover state wants and what
+// a surface meant to still read as the brand color does not.
+@function deepen($name, $amount) {
+  @return string.unquote(
+    'color-mix(in srgb, var(--mw-#{$name}) #{$amount}, black)'
+  );
+}
+
 // The two ink variants. They clamp lightness in OKLch and keep hue and chroma,
 // which is what makes them palette-agnostic: the same expression lifts a very
 // dark color, deepens a very light one and leaves everything in between alone.
@@ -252,7 +287,6 @@ $status-colors: (
 // Dark theme colors. Emitted as --mw-dark-<key>, hence the prefixed references.
 $dark-theme-colors: (
   'page-background': $dark-background,
-  'hero-overlay-background': fade('dark-page-background', 10%),
   // The surface stack - the card and footer factors and the reasoning behind
   // them live with the derivation knobs above, so a project can retune the
   // stack from one place instead of editing this map. The rule between the
@@ -282,7 +316,6 @@ $dark-theme-colors: (
 // Light theme colors. Emitted as --mw-light-<key>.
 $light-theme-colors: (
   'page-background': $light-background,
-  'hero-overlay-background': fade('light-page-background', 10%),
   'card-background': surface('light-page-background', $card-surface-light),
   'footer-background': surface('light-page-background', $footer-surface-light),
   'border': surface('light-page-background', 0.8),
@@ -300,21 +333,22 @@ $light-theme-colors: (
   'border-accent': fade('light-primary-text-color', 70%),
 );
 
-// Header/navbar colors. They stay dark in both themes but can be retuned on
-// their own, hence the dark-* references. Emitted as --mw-header-<key>.
+// Header/navbar colors. The bar is dark in both themes, so every tone here is
+// built from the primary color rather than from a theme token: the header is the
+// one piece of chrome a light-only project would otherwise be styling through
+// dark-theme values it never set. Emitted as --mw-header-<key>, and each one is
+// still overridable on its own.
 $header-colors: (
-  'background': token('dark-footer-background'),
-  'text-color': token('dark-text-color'),
-  'navbar-list-color': token('dark-text-muted-color'),
-  // Primary carries the navigation, secondary stays a signal. The bar is dark in
-  // both themes, so the active item takes the dark ink tone in both.
-  'navbar-list-active-color': token('dark-primary-text-color'),
+  'background': deepen('primary-color', $header-surface),
+  'text-color': tint('primary-color', 92%),
+  'navbar-list-color': fade('header-text-color', 70%),
+  'navbar-list-active-color': tint('primary-color', 35%),
   // The burger sits on the primary button surface, and on the secondary one
   // while the drawer is open, so it takes the label ink of each - not the
   // header text color, which is picked for the dark bar behind it.
   'burgerbutton-color': token('primary-accent-text-color'),
   'burgerbutton-open-color': token('secondary-accent-text-color'),
-  'border': token('dark-border-accent'),
+  'border': fade('header-navbar-list-active-color', 40%),
 );
 // Drives the bar height, the anchor scroll offset and the mobile drawer padding.
 // 59px is the intrinsic height: 42px logo + 2 × spacing('3') + 1px border.

package/src/scss/base/_base.scss

@@ -42,8 +42,9 @@ $_active-prefix: 'dark';
   // theme for theme-toggle
   --mw-internal-theme-mode: #{$mw-theme-mode};
 
-  // hero background image
+  // hero background image and the ink that sits on it
   --mw-hero-background: #{$mw-hero-image};
+  --mw-hero-text-color: #{$mw-hero-text-color};
 
   // header height
   --mw-header-height: #{$header-height};

package/src/scss/layout/_main.scss

@@ -27,22 +27,20 @@
       background-position: center;
       background-image: var(--mw-hero-background);
 
-      // the “overlay”
-      &::before {
-        content: '';
-        position: absolute;
-        inset: 0;
-        background: var(--mw-hero-overlay-background);
-        backdrop-filter: blur(5px);
-        opacity: 0.3;
-        z-index: z-index('lift');
-        pointer-events: none;
-      }
+      // The image does not change with the theme, so neither does the ink on
+      // it - see $mw-hero-text-color. Set on the container so a hero without
+      // .mw-home still gets it.
+      color: var(--mw-hero-text-color);
 
-      // your actual content should sit above the overlay
-      > * {
-        position: relative;
-        z-index: z-index('card');
+      // ...except for anything that paints its own surface. A card inside the
+      // hero is still a card on --mw-card-background and takes the theme's ink,
+      // or its text would be light on a light card in the light theme.
+      .mw-card,
+      .mw-panel,
+      .mw-modal,
+      .mw-tile,
+      .mw-calendar:not(.mw-calendar-plain) {
+        color: var(--mw-text-color);
       }
 
       // The header is fixed, so it floats over the hero and centering against