maverick-wave 4.4.2 → 4.5.1

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "maverick-wave",
-  "version": "4.4.2",
+  "version": "4.5.1",
   "config": {
-    "version_short": "4.4"
+    "version_short": "4.5"
   },
   "description": "A lightweight, modern CSS framework for building responsive websites with elegance and speed.",
   "main": "src/js/main.js",

package/src/partials/colors-container.html

@@ -156,7 +156,7 @@
   Every brand and status colour comes in two tokens.
   <code>--mw-primary-color</code> is the exact colour, for anything it
   <strong>fills</strong> - buttons, badges, bars - with
-  <code>--mw-accent-text-color</code> on top.
+  <code>--mw-primary-accent-text-color</code> on top.
   <code>--mw-primary-text-color</code> is the same colour as ink
   <strong>on</strong> a theme surface: text, icons, focus rings, accent borders.
   A colour picked to carry a label is by definition too dark or too light to be
@@ -191,6 +191,40 @@
   </div>
 </div>
 
+<h3 class="mw-section-subtitle">Label Ink Per Colour</h3>
+
+<p class="mw-text-muted mw-mb-6">
+  <code>--mw-accent-text-color</code> is the label on every solid coloured
+  surface, and one value for all six only holds while the whole palette sits on
+  the same side of the lightness scale. A neon green primary next to a deep blue
+  secondary needs a dark label on the one and a light label on the other, so
+  every colour carries its own override:
+  <code>--mw-primary-accent-text-color</code>,
+  <code>--mw-secondary-accent-text-color</code> and the same for
+  <code>success</code>, <code>warning</code>, <code>danger</code> and
+  <code>info</code>. Each one defaults to <code>--mw-accent-text-color</code>,
+  so nothing changes until you set one.
+</p>
+
+<pre class="mw-code-block mw-mb-6"><code>:root {
+  --mw-primary-color: #39ff14;
+  /* the shared label stays light for the rest of the palette ... */
+  --mw-accent-text-color: #f2f6fc;
+  /* ... only the neon primary gets a dark one */
+  --mw-primary-accent-text-color: #0b0f0a;
+}</code></pre>
+
+<p class="mw-text-muted mw-mb-6">
+  Everything that fills a surface with that colour follows: buttons and mini
+  buttons, the burger button, table and panel headers, card badges and ribbons,
+  segmented and tab items, stepper dots, calendar selection, timeline dates,
+  accordion headers and progress labels. The burger button switches to
+  <code>--mw-secondary-accent-text-color</code> while the drawer is open,
+  because its surface does the same - override
+  <code>--mw-header-burgerbutton-color</code> and
+  <code>--mw-header-burgerbutton-open-color</code> to break out of that.
+</p>
+
 <p class="mw-text-muted">
   Tinted surfaces follow one rule as well:
   <code>--mw-*-background</code> is 20% of the colour,
@@ -199,7 +233,7 @@
   which is what makes an alert, badge or tag readable in either theme.
 </p>
 
-<p class="mw-text-muted">
+<p class="mw-text-muted mw-mb-6">
   The surfaces work the same way. Card, footer and border scale the page
   background's OKLch lightness and chroma by one factor and keep the hue, so a
   tinted page hands its tint down instead of graying out. A card always steps
@@ -208,3 +242,22 @@
   is also why the dark page background is not near-black: the surfaces below it
   need somewhere to go.
 </p>
+
+<p class="mw-text-muted mw-mb-6">
+  Each factor is an SCSS knob, so how far a card sits from the page is one
+  number per theme. Below 1 steps toward black, above 1 toward white - read
+  <code>0.85</code> as "the card sits at 85% of the page's lightness". Move both
+  card knobs toward 1 for a flat, borderless look, push them apart for cards
+  that read as raised panels. Keep the footer further out than the card in the
+  dark theme and on the other side in the light one, or the band under the page
+  stops reading as chrome.
+</p>
+
+<pre
+  class="mw-code-block mw-mb-6"
+><code>@use 'maverick-wave/src/scss/main' with (
+  $card-surface-dark: 0.85,   // card, dark theme
+  $card-surface-light: 1.05,  // card, light theme
+  $footer-surface-dark: 0.75, // footer and header chrome
+  $footer-surface-light: 0.95
+);</code></pre>

package/src/partials/get-started-container.html

@@ -77,6 +77,12 @@
      label - set it opposite your primary. */
   --mw-accent-text-color: #f2fafa;
 
+  /* Per color override of that label, for a palette that does not sit on
+     one side of the lightness scale - a neon primary needs a dark label
+     while the rest of the palette keeps the light one. Same token for
+     secondary, success, warning, danger and info. */
+  --mw-primary-accent-text-color: #0b0f0a;
+
   /* Page backgrounds. Card, footer and border are derived from them, so
      these two are usually all you set. */
   --mw-dark-page-background: #172127;
@@ -135,7 +141,15 @@
   $dark-background: #172127,
   $light-background: #f2f6f7,
   $dark-text-color: #e8eef0,
-  $light-text-color: #172127
+  $light-text-color: #172127,
+
+  // How far card and footer sit from the page background. Below 1 steps
+  // toward black, above 1 toward white - 0.85 means the card sits at 85%
+  // of the page's lightness.
+  $card-surface-dark: 0.85,
+  $card-surface-light: 1.05,
+  $footer-surface-dark: 0.75,
+  $footer-surface-light: 0.95
 );
 
 // Your additional styles

package/src/partials/item-lists-container.html

@@ -343,7 +343,7 @@
 <div class="mw-grid-4-lg">
   <div>
     <h4 class="mw-mb-3">Small Height</h4>
-    <div class="mw-item-list-scroll-sm mw-mb-4">
+    <div class="mw-item-list-scroll mw-item-list-scroll-sm mw-mb-4">
       <div>Quick Action 1</div>
       <div>Quick Action 2</div>
       <div>Quick Action 3</div>
@@ -370,7 +370,7 @@
   </div>
   <div>
     <h4 class="mw-mb-3">Large Height</h4>
-    <div class="mw-item-list-scroll-lg mw-mb-4">
+    <div class="mw-item-list-scroll mw-item-list-scroll-lg mw-mb-4">
       <div>Quick Action 1</div>
       <div>Quick Action 2</div>
       <div>Quick Action 3</div>
@@ -389,7 +389,7 @@
   </div>
   <div>
     <h4 class="mw-mb-3">Xtra Large Height</h4>
-    <div class="mw-item-list-scroll-xl mw-mb-4">
+    <div class="mw-item-list-scroll mw-item-list-scroll-xl mw-mb-4">
       <div>Quick Action 1</div>
       <div>Quick Action 2</div>
       <div>Quick Action 3</div>

package/src/scss/abstracts/_variables.scss

@@ -55,6 +55,30 @@ $ink-lightness-light: 0.7 !default;
 // the palette instead of being a stock #888. 0% is a true gray.
 $muted-tint: 23% !default;
 
+// The surface stack - how far card and footer sit from the page background.
+// Each one scales the page's OKLch lightness *and* chroma by its factor and
+// keeps the hue, so the whole stack stays in one color family no matter how
+// tinted the page is.
+//
+// Below 1 steps toward black, above 1 toward white. Read them as "the card is
+// at 85% of the page's lightness": lower the dark factor or raise the light one
+// for more separation between a card and the page, move both toward 1 for a
+// flatter look.
+//
+// A card always steps *away* from the text color - down in the dark theme, up
+// in the light one - so content sits on the cleaner of the two surfaces. That is
+// also the one thing to watch when retuning: a near-black $dark-background
+// leaves nothing underneath, and a card at 0.6 of almost nothing is still
+// almost nothing. Keep the dark page around OKLch lightness 0.24 if you want
+// 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.
+$footer-surface-dark: 0.75 !default;
+$footer-surface-light: 0.95 !default;
+
 // ---------------------------------------------------------------------------
 // Derivation helpers
 //
@@ -143,7 +167,8 @@ $muted-tint: 23% !default;
 // A brand color has two jobs, and they need two tokens:
 //   --mw-primary-color        the exact brand tone, for anything it *fills* -
 //                             buttons, badges, bars, filled surfaces. The label
-//                             on top is --mw-accent-text-color.
+//                             on top is --mw-primary-accent-text-color, which
+//                             falls back to the shared --mw-accent-text-color.
 //   --mw-primary-text-color   the same color as ink on a theme surface - text,
 //                             icons, focus rings, accent borders. Lives in the
 //                             theme maps below, because a color chosen to carry
@@ -173,6 +198,18 @@ $base-colors: (
   // it has to stay readable on a dark surface no matter how the palette or the
   // active theme is retuned.
   'accent-text-color': $accent-text-color,
+  // Per-color override of that label. One accent text color only works while
+  // the whole palette sits on the same side of the lightness scale - a neon
+  // green primary next to a deep blue secondary needs a dark label on the one
+  // and a light label on the other. Defaults to the shared token, so nothing
+  // changes until a project sets one:
+  //   :root { --mw-primary-accent-text-color: #000; }
+  // Every component that fills a surface with one of the six colors reads the
+  // matching token, so a button, a table header, a panel header, a badge and
+  // the burger button all follow the same override. The status colors carry
+  // the same token, see $status-colors.
+  'primary-accent-text-color': token('accent-text-color'),
+  'secondary-accent-text-color': token('accent-text-color'),
   'gray-color': $gray-color,
   // Subtle neutral surface: zebra rows, disabled fields, tracks, skeletons
   'gray-background': fade('gray-color', 20%),
@@ -194,30 +231,37 @@ $status-colors: (
   'success-color-hover': shade('success-color', $hover-shift),
   'success-info-background': fade('success-color', 30%),
   'success-info-background-hover': fade('success-color', 50%),
+  'success-accent-text-color': token('accent-text-color'),
   'warning-color': $warning-color,
   'warning-color-hover': shade('warning-color', $hover-shift),
   'warning-info-background': fade('warning-color', 30%),
   'warning-info-background-hover': fade('warning-color', 50%),
+  'warning-accent-text-color': token('accent-text-color'),
   'danger-color': $danger-color,
   'danger-color-hover': shade('danger-color', $hover-shift),
   'danger-info-background': fade('danger-color', 30%),
   'danger-info-background-hover': fade('danger-color', 50%),
+  'danger-accent-text-color': token('accent-text-color'),
   'info-color': $info-color,
   'info-color-hover': shade('info-color', $hover-shift),
   'info-info-background': fade('info-color', 30%),
   'info-info-background-hover': fade('info-color', 50%),
+  'info-accent-text-color': token('accent-text-color'),
 );
 
 // 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', 30%),
-  // The surface stack. A card steps *away* from the text color - down here, up
-  // in the light theme - so content sits on the cleaner of the two surfaces.
-  // Footer and header chrome step further out, the rule steps back the other way.
-  'card-background': surface('dark-page-background', 0.8),
-  'footer-background': surface('dark-page-background', 0.75),
-  'border': surface('dark-page-background', 1.5),
+  // 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
+  // surfaces keeps its own factor: it runs against the card - lighter than a
+  // dark page, darker than a light one - or it disappears into what it
+  // separates, and that is not a per-project decision.
+  'card-background': surface('dark-page-background', $card-surface-dark),
+  'footer-background': surface('dark-page-background', $footer-surface-dark),
+  'border': surface('dark-page-background', 1.35),
   'shadow': fade('dark-text-color', 30%),
   'text-color': $dark-text-color,
   'text-muted-color': muted(0.7),
@@ -239,9 +283,9 @@ $dark-theme-colors: (
 $light-theme-colors: (
   'page-background': $light-background,
   'hero-overlay-background': fade('light-page-background', 30%),
-  'card-background': surface('light-page-background', 1.05),
-  'footer-background': surface('light-page-background', 0.95),
-  'border': surface('light-page-background', 0.85),
+  '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),
   'shadow': fade('light-text-color', 30%),
   'text-color': $light-text-color,
   'text-muted-color': muted(0.5),
@@ -265,7 +309,11 @@ $header-colors: (
   // 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'),
-  'burgerbutton-color': token('dark-text-color'),
+  // 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'),
 );
 // Drives the bar height, the anchor scroll offset and the mobile drawer padding.

package/src/scss/base/_reset.scss

@@ -73,7 +73,7 @@ td {
 
 th {
   background: var(--mw-primary-color);
-  color: var(--mw-accent-text-color);
+  color: var(--mw-primary-accent-text-color);
 }
 
 tbody tr:nth-child(even) {

package/src/scss/components/_accordions.scss

@@ -45,7 +45,7 @@
     &.mw-active,
     &.active {
       background: var(--mw-primary-color);
-      color: var(--mw-accent-text-color);
+      color: var(--mw-primary-accent-text-color);
 
       .mw-accordion-icon {
         transform: rotate(180deg);

package/src/scss/components/_avatars.scss

@@ -75,7 +75,7 @@ $_mw-avatar-colors: (
     align-items: center;
     justify-content: center;
     background: var(--mw-primary-color);
-    color: var(--mw-accent-text-color);
+    color: var(--mw-primary-accent-text-color);
     font-weight: font-weight('bold');
     line-height: 1;
     text-transform: uppercase;

package/src/scss/components/_blog-post.scss

@@ -63,7 +63,7 @@
       height: 60px;
       border-radius: radius('full');
       background: var(--mw-primary-color);
-      color: var(--mw-accent-text-color);
+      color: var(--mw-primary-accent-text-color);
       display: flex;
       align-items: center;
       justify-content: center;

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

@@ -55,7 +55,7 @@
       [class*='mw-btn-link']
     ) {
     background: var(--mw-primary-color);
-    color: var(--mw-accent-text-color);
+    color: var(--mw-primary-accent-text-color);
 
     &:hover:not(:disabled) {
       background: var(--mw-primary-color-hover);
@@ -69,7 +69,7 @@
       [class*='mw-btn-link']
     ) {
     background: var(--mw-secondary-color);
-    color: var(--mw-accent-text-color);
+    color: var(--mw-secondary-accent-text-color);
 
     &:hover:not(:disabled) {
       background: var(--mw-secondary-color-hover);
@@ -88,7 +88,7 @@
 
     &:hover:not(:disabled) {
       background: var(--mw-primary-color);
-      color: var(--mw-accent-text-color);
+      color: var(--mw-primary-accent-text-color);
     }
   }
 }
@@ -106,14 +106,14 @@
 
     &:hover:not(:disabled) {
       background: var(--mw-primary-color);
-      color: var(--mw-accent-text-color);
+      color: var(--mw-primary-accent-text-color);
     }
   }
 
   // Middle button(s) get primary style
   .mw-btn:not(:first-child):not(:last-child):not([class*='mw-btn-']) {
     background: var(--mw-primary-color);
-    color: var(--mw-accent-text-color);
+    color: var(--mw-primary-accent-text-color);
 
     &:hover:not(:disabled) {
       background: var(--mw-primary-color-hover);

package/src/scss/components/_buttons.scss

@@ -32,7 +32,7 @@
 // Color variants
 .mw-btn-primary {
   background: var(--mw-primary-color);
-  color: var(--mw-accent-text-color);
+  color: var(--mw-primary-accent-text-color);
   &:hover:not(:disabled) {
     background: var(--mw-primary-color-hover);
   }
@@ -44,7 +44,7 @@
 }
 .mw-btn-secondary {
   background: var(--mw-secondary-color);
-  color: var(--mw-accent-text-color);
+  color: var(--mw-secondary-accent-text-color);
   &:hover:not(:disabled) {
     background: var(--mw-secondary-color-hover);
   }
@@ -57,7 +57,7 @@
 // Semantic variants for destructive / confirming actions
 .mw-btn-danger {
   background: var(--mw-danger-color);
-  color: var(--mw-accent-text-color);
+  color: var(--mw-danger-accent-text-color);
   &:hover:not(:disabled) {
     background: var(--mw-danger-color-hover);
   }
@@ -69,7 +69,7 @@
 }
 .mw-btn-success {
   background: var(--mw-success-color);
-  color: var(--mw-accent-text-color);
+  color: var(--mw-success-accent-text-color);
   &:hover:not(:disabled) {
     background: var(--mw-success-color-hover);
   }
@@ -85,12 +85,12 @@
   color: var(--mw-primary-text-color);
   &:hover:not(:disabled) {
     background: var(--mw-primary-color);
-    color: var(--mw-accent-text-color);
+    color: var(--mw-primary-accent-text-color);
   }
   &.mw-active:not(:disabled),
   &.active:not(:disabled) {
     background: var(--mw-primary-color);
-    color: var(--mw-accent-text-color);
+    color: var(--mw-primary-accent-text-color);
   }
 }
 .mw-btn-link {
@@ -231,34 +231,34 @@
 
   &:hover:not(:disabled) {
     background: var(--mw-primary-color);
-    color: var(--mw-accent-text-color);
+    color: var(--mw-primary-accent-text-color);
   }
 }
 
 .mw-btn-mini-primary {
   &:hover:not(:disabled) {
     background: var(--mw-primary-color);
-    color: var(--mw-accent-text-color);
+    color: var(--mw-primary-accent-text-color);
   }
 }
 
 .mw-btn-mini-secondary {
   &:hover:not(:disabled) {
     background: var(--mw-secondary-color);
-    color: var(--mw-accent-text-color);
+    color: var(--mw-secondary-accent-text-color);
   }
 }
 
 .mw-btn-mini-danger {
   &:hover:not(:disabled) {
     background: var(--mw-danger-color);
-    color: var(--mw-accent-text-color);
+    color: var(--mw-danger-accent-text-color);
   }
 }
 
 .mw-btn-mini-success {
   &:hover:not(:disabled) {
     background: var(--mw-success-color);
-    color: var(--mw-accent-text-color);
+    color: var(--mw-success-accent-text-color);
   }
 }

package/src/scss/components/_calendar.scss

@@ -141,7 +141,7 @@ $_mw-calendar-dot-tones: (
 .mw-calendar-day.mw-selected {
   background: var(--mw-primary-color);
   border-color: var(--mw-primary-text-color);
-  color: var(--mw-accent-text-color);
+  color: var(--mw-primary-accent-text-color);
   opacity: 1;
 }
 
@@ -191,7 +191,7 @@ $_mw-calendar-dot-tones: (
 // Only the untoned dot would drown in the selected fill. An inline
 // --mw-calendar-dot on the dot itself still wins over this.
 .mw-calendar-day.mw-selected .mw-calendar-dot:not([class*='mw-calendar-dot-']) {
-  --mw-calendar-dot: var(--mw-accent-text-color);
+  --mw-calendar-dot: var(--mw-primary-accent-text-color);
 }
 
 // Compact month - date picker density

package/src/scss/components/_cards.scss

@@ -62,7 +62,7 @@ $_mw-card-addon-colors: (
     right: spacing('4');
     padding: spacing('1') spacing('4');
     font-size: font-size('xs');
-    color: var(--mw-accent-text-color);
+    color: var(--mw-card-addon-text-color, var(--mw-primary-accent-text-color));
     background: var(--mw-card-addon-color, var(--mw-primary-color));
     border-radius: radius('md');
     white-space: nowrap;
@@ -79,7 +79,7 @@ $_mw-card-addon-colors: (
     right: -35px;
     padding: spacing('1') spacing('4');
     font-size: font-size('xs');
-    color: var(--mw-accent-text-color);
+    color: var(--mw-card-addon-text-color, var(--mw-primary-accent-text-color));
     background: var(--mw-card-addon-color, var(--mw-primary-color));
     white-space: nowrap;
     width: 220px;
@@ -231,7 +231,7 @@ $_mw-card-addon-colors: (
       height: 38px;
       border-radius: radius('full');
       background: var(--mw-primary-color);
-      color: var(--mw-accent-text-color);
+      color: var(--mw-primary-accent-text-color);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -291,6 +291,7 @@ $_mw-card-addon-colors: (
 @each $name, $col in $_mw-card-addon-colors {
   .mw-card-addon-#{$name} {
     --mw-card-addon-color: #{$col};
+    --mw-card-addon-text-color: var(--mw-#{$name}-accent-text-color);
   }
 }
 

package/src/scss/components/_coming-soon.scss

@@ -55,12 +55,12 @@
     border-style: solid;
 
     .mw-coming-soon-icon {
-      color: var(--mw-accent-text-color);
+      color: var(--mw-primary-accent-text-color);
       transform: rotate(27deg);
     }
 
     .mw-coming-soon-text {
-      color: var(--mw-accent-text-color);
+      color: var(--mw-primary-accent-text-color);
       transform: scale(1.05);
     }
 

package/src/scss/components/_info.scss

@@ -155,6 +155,6 @@ button.mw-info {
 
   .mw-info-mini-#{$name} {
     background: #{$col};
-    color: var(--mw-accent-text-color);
+    color: var(--mw-#{$name}-accent-text-color);
   }
 }

package/src/scss/components/_kanban.scss

@@ -222,7 +222,7 @@ $_mw-kanban-ribbon-clearance-compact: 58px;
   &:hover:not(:disabled) {
     background: var(--mw-primary-color);
     border-color: var(--mw-primary-text-color);
-    color: var(--mw-accent-text-color);
+    color: var(--mw-primary-accent-text-color);
   }
 
   &:focus-visible {