maverick-wave 3.3.0 → 3.3.2

package/src/scss/layout/_header.scss

@@ -47,7 +47,7 @@
   // Login button styling
   .mw-login-btn {
     background: var(--mw-primary-color);
-    color: var(--mw-primary-text-color);
+    color: var(--mw-accent-text-color);
     border: none;
     border-radius: radius('md');
     font-size: font-size('md');
@@ -66,7 +66,9 @@
     }
 
     &:disabled {
-      color: var(--mw-text-muted-color);
+      // Same treatment as every other disabled button — a theme-bound text
+      // color would go dark on this always-primary surface in light mode
+      opacity: 0.6;
       cursor: not-allowed;
     }
   }
@@ -107,9 +109,6 @@
 
     &.open {
       background: var(--mw-secondary-color);
-      position: fixed;
-      top: 14px;
-      right: 6%;
       z-index: z-index('header') + 10;
 
       &:hover {
@@ -136,7 +135,7 @@
   .mw-menu-btn-burger {
     width: 18px;
     height: 2px;
-    background: var(--mw-primary-text-color);
+    background: var(--mw-header-burgerbutton-color);
     border-radius: 1px;
     position: relative;
     transition: all 0.3s ease;
@@ -148,7 +147,7 @@
       left: 0;
       width: 18px;
       height: 2px;
-      background: var(--mw-primary-text-color);
+      background: var(--mw-header-burgerbutton-color);
       border-radius: 1px;
       transition: all 0.3s ease;
     }
@@ -163,56 +162,144 @@
   }
 }
 
-@mixin navbar-open-state {
+// Header bar height: 42px logo + 2 × spacing('3') padding + 1px border.
+// Overridable via --mw-header-height for projects with a taller bar.
+$_header-height: 59px;
+
+// Off-canvas drawer for the collapsed navbar (mobile only)
+@mixin navbar-off-canvas {
+  position: fixed;
+  top: 0;
+  right: 0;
+  --mw-navbar-drawer-width: 250px;
+  width: var(--mw-navbar-drawer-width);
+  height: 100dvh;
+  background: var(--mw-header-background);
+  border-left: 1px solid var(--mw-header-border);
+  box-shadow: -10px 0 30px var(--mw-shadow);
+  z-index: z-index('header') + 3;
+
+  transform: translateX(100%);
+  visibility: hidden;
+  transition:
+    transform 0.3s cubic-bezier(0.32, 0.72, 0, 1),
+    visibility 0.3s;
+
+  .mw-navbar-list {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: spacing('1');
+    height: 100%;
+    overflow-y: auto;
+    // Keeps a rubber-band scroll inside the panel from moving the page
+    overscroll-behavior: contain;
+    padding: calc(
+        var(--mw-header-height, #{$_header-height}) + #{spacing('6')} +
+          env(safe-area-inset-top)
+      )
+      spacing('4') calc(#{spacing('6')} + env(safe-area-inset-bottom));
+  }
+
+  .mw-navbar-item {
+    width: 100%;
+    margin: spacing('0');
+    opacity: 0;
+    transform: translateX(12px);
+  }
+
+  .mw-navbar-link {
+    display: flex;
+    align-items: center;
+    min-height: 48px;
+    width: 100%;
+    padding: spacing('3') spacing('4');
+    border-radius: radius('md');
+    font-size: font-size('md');
+    text-align: left;
+    color: var(--mw-header-text-color);
+
+    // The sliding underline is a hover affordance and has no place on touch
+    &::after {
+      display: none;
+    }
+
+    // Restated here: the plain color above already outranks the base
+    &:hover {
+      color: var(--mw-header-navbar-list-active-color);
+      background: var(--mw-primary-background);
+    }
+
+    &:active {
+      background: var(--mw-primary-background-hover);
+    }
+
+    // Last, so the current page keeps its look while being hovered
+    &.active {
+      color: var(--mw-header-navbar-list-active-color);
+      background: var(--mw-primary-background);
+      box-shadow: inset 3px 0 0 var(--mw-primary-color);
+      font-weight: font-weight('medium');
+    }
+  }
+
   &.open {
-    position: fixed;
-    top: 0;
-    right: 0;
-    width: 80%;
-    max-width: 280px;
-    height: 100dvh;
-    background: var(--mw-header-background);
     transform: translateX(0);
-    transition: transform 0.3s ease;
-    z-index: z-index('header') + 3;
-    border-left: 1px solid var(--mw-header-border);
+    visibility: visible;
 
-    .mw-navbar-list {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      gap: spacing('0');
-      padding-top: 80px;
-      padding-left: spacing('3');
-      padding-right: spacing('3');
-      height: 100%;
-      overflow-y: auto;
+    // Items follow the panel in, slightly staggered
+    .mw-navbar-item {
+      animation: mw-navbar-item-in 0.3s ease forwards;
+
+      @for $i from 1 through 10 {
+        &:nth-child(#{$i}) {
+          animation-delay: 0.1s + $i * 0.035s;
+        }
+      }
     }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition-duration: 0.01ms;
 
     .mw-navbar-item {
-      width: 100%;
-      margin: spacing('0');
+      opacity: 1;
+      transform: none;
+      animation: none;
     }
+  }
+}
 
-    .mw-navbar-link {
-      display: block;
-      padding: spacing('3') spacing('0');
-      border-bottom: 1px solid var(--mw-header-border);
-      width: 100%;
-      text-align: left;
-
-      &::after {
-        display: none;
-      }
+// Page scrim behind the drawer
+@mixin navbar-scrim($navbar-selector) {
+  body:has(#{$navbar-selector}.open) {
+    overflow: hidden;
 
-      &.active {
-        color: var(--mw-header-navbar-list-active-color);
-        font-weight: font-weight('medium');
-      }
+    &::after {
+      content: '';
+      position: fixed;
+      inset: 0;
+      background: var(--mw-overlay-background);
+      backdrop-filter: blur(2px);
+      z-index: z-index('header') - 1;
+      animation: mw-navbar-scrim-in 0.3s ease;
     }
   }
 }
 
+@keyframes mw-navbar-item-in {
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes mw-navbar-scrim-in {
+  from {
+    opacity: 0;
+  }
+}
+
 // Navbar with built-in auto-detection
 .mw-navbar {
   display: flex;
@@ -277,36 +364,37 @@
   // Auto-responsive behavior based on nav item count
   // Default behavior (1-3 items): collapse at md
   @include media-down('md') {
-    .mw-navbar-list {
-      display: none;
-    }
-
-    @include navbar-open-state;
+    @include navbar-off-canvas;
   }
 
   // Medium (4-5 items): collapse at lg
   &.mw-navbar-medium {
     @include media-down('lg') {
-      .mw-navbar-list {
-        display: none;
-      }
-
-      @include navbar-open-state;
+      @include navbar-off-canvas;
     }
   }
 
   // Large (6+ items): collapse at xl
   &.mw-navbar-large {
     @include media-down('xl') {
-      .mw-navbar-list {
-        display: none;
-      }
-
-      @include navbar-open-state;
+      @include navbar-off-canvas;
     }
   }
 }
 
+// Every variant is collapsed at md, so the default selector covers them all
+@include media-down('md') {
+  @include navbar-scrim('.mw-navbar');
+}
+
+@include media-down('lg') {
+  @include navbar-scrim('.mw-navbar-medium');
+}
+
+@include media-down('xl') {
+  @include navbar-scrim('.mw-navbar-large');
+}
+
 // Show burger button based on navbar size
 .mw-navbar {
   // Default (1-3 items): show burger at md
@@ -351,3 +439,75 @@
     transform: translateY(0);
   }
 }
+
+// Profile button - avatar plus the signed-in name
+.mw-profile-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: spacing('3');
+  height: 40px;
+  padding: spacing('0') spacing('4') spacing('0') spacing('1');
+  background: transparent;
+  border: 1px solid var(--mw-header-border);
+  border-radius: radius('2xl');
+  color: var(--mw-header-text-color);
+  cursor: pointer;
+  transition: var(--mw-transition);
+  flex-shrink: 0;
+  max-width: 220px;
+
+  // The avatar brings spacing of its own that would break the pill shape
+  .mw-avatar {
+    margin: spacing('0');
+    box-shadow: none;
+    border-width: 0;
+  }
+
+  &-name {
+    font-size: font-size('sm');
+    font-weight: font-weight('medium');
+    line-height: 1.2;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &:hover:not(:disabled) {
+    background: var(--mw-primary-background-hover);
+    border-color: var(--mw-primary-color);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--mw-primary-color);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  // Icon fallback for projects without initials
+  > i,
+  > svg,
+  > [class*='fa-'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    flex-shrink: 0;
+    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;
+    }
+  }
+}

package/src/scss/layout/_index.scss

@@ -3,4 +3,5 @@
 @forward 'header';
 @forward 'home';
 @forward 'main';
+@forward 'page-header';
 @forward 'section';

package/src/scss/layout/_main.scss

@@ -70,7 +70,7 @@
     left: 50%;
     transform: translateX(-50%) translateY(-10px);
     background: var(--mw-gray-color);
-    color: var(--mw-white-color);
+    color: var(--mw-accent-text-color);
     padding: spacing('1') spacing('2');
     font-size: font-size('xs');
     border-radius: radius('xs');

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

@@ -0,0 +1,48 @@
+@use '../abstracts' as *;
+
+.mw-page-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: spacing('4');
+  margin-bottom: spacing('6');
+  padding-bottom: spacing('4');
+  border-bottom: 1px solid var(--mw-border);
+
+  h1,
+  h2,
+  h3 {
+    margin: spacing('0');
+    font-size: font-size('2xl');
+    line-height: 1.2;
+
+    @include media-down('sm') {
+      font-size: font-size('xl');
+    }
+  }
+
+  p {
+    margin: spacing('1') spacing('0') spacing('0') spacing('0');
+    color: var(--mw-text-muted-color);
+    font-size: font-size('sm');
+  }
+
+  &-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: spacing('3');
+    margin-left: auto;
+
+    @include media-down('sm') {
+      width: 100%;
+      margin-left: spacing('0');
+    }
+  }
+
+  &-plain {
+    padding-bottom: spacing('0');
+    border-bottom: none;
+  }
+}

package/src/scss/layout/_section.scss

@@ -73,7 +73,7 @@
 
   &:hover:not(:disabled) {
     background: var(--mw-primary-color);
-    color: var(--mw-primary-text-color);
+    color: var(--mw-accent-text-color);
   }
 
   &:focus-visible {
@@ -104,20 +104,21 @@
   }
 }
 
-// additional spacing for the whole section
-// Pattern variants for sections
-section {
+// Additional spacing for the whole section
+.mw-section {
   padding: spacing('7') spacing('0');
   position: relative;
+}
 
-  &.mw-section-alternate {
-    --s: 5px; // size
-    --c1: var(--mw-page-background);
-    --c2: var(--mw-section-alternate-pattern);
-    --g: var(--c2) -5% 5%, var(--c1) 0 45%;
-    background:
-      linear-gradient(0deg, #0000 10%, var(--c1) 0 40%, #0000 0),
-      repeating-linear-gradient(-45deg, var(--g)) var(--c1);
-    background-size: var(--s) var(--s);
-  }
+// Pattern variant for sections
+.mw-section-alternate {
+  position: relative;
+  --s: 5px; // size
+  --c1: var(--mw-page-background);
+  --c2: var(--mw-section-alternate-pattern);
+  --g: var(--c2) -5% 5%, var(--c1) 0 45%;
+  background:
+    linear-gradient(0deg, #0000 10%, var(--c1) 0 40%, #0000 0),
+    repeating-linear-gradient(-45deg, var(--g)) var(--c1);
+  background-size: var(--s) var(--s);
 }

package/src/scss/main.scss

@@ -1,3 +1,7 @@
+// Forwarded first so `@use 'main' with (...)` can configure the root colors,
+// $mw-theme-mode and $mw-hero-image before any layer consumes them.
+@forward 'abstracts/variables';
+
 @use 'base';
 @use 'components';
 @use 'form-elements';

package/src/scss/utilities/_flex.scss

@@ -22,6 +22,10 @@
     flex: 1;
   }
 
+  &-grow-1 {
+    flex-grow: 1;
+  }
+
   &-shrink-0 {
     flex-shrink: 0;
   }

package/src/scss/utilities/_index.scss

@@ -1,3 +1,4 @@
 @forward 'display';
 @forward 'flex';
 @forward 'spacing';
+@forward 'text';

package/src/scss/utilities/_text.scss

@@ -0,0 +1,105 @@
+@use '../abstracts' as *;
+
+// Text utilities
+.mw-text {
+  &-center {
+    text-align: center;
+  }
+
+  &-left {
+    text-align: left;
+  }
+
+  &-right {
+    text-align: right;
+  }
+
+  // For money and other figures in tables: right-aligned, fixed-width digits
+  // so decimal places line up across rows, and never wrapped mid-number.
+  // Locale-agnostic - works for 1,204.50 and 1.204,50 alike, because the
+  // alignment comes from the right edge, not from the separator.
+  // `lining-nums` guards against fonts that default to old-style figures.
+  &-numeric {
+    text-align: right;
+    font-variant-numeric: tabular-nums lining-nums;
+    font-feature-settings: 'tnum', 'lnum';
+    white-space: nowrap;
+  }
+
+  &-primary {
+    color: var(--mw-primary-color);
+  }
+
+  &-secondary {
+    color: var(--mw-secondary-color);
+  }
+
+  &-success {
+    color: var(--mw-success-color);
+  }
+
+  &-warning {
+    color: var(--mw-warning-color);
+  }
+
+  &-danger {
+    color: var(--mw-danger-color);
+  }
+
+  &-info {
+    color: var(--mw-info-color);
+  }
+
+  &-muted {
+    color: var(--mw-text-muted-color);
+  }
+
+  &-bold {
+    font-weight: font-weight('bold');
+  }
+
+  &-medium {
+    font-weight: font-weight('medium');
+  }
+
+  &-normal {
+    font-weight: font-weight('normal');
+  }
+
+  &-light {
+    font-weight: font-weight('light');
+  }
+
+  &-italic {
+    font-style: italic;
+  }
+
+  &-color-dark {
+    color: var(--mw-dark-text-color);
+  }
+
+  &-color-light {
+    color: var(--mw-light-text-color);
+  }
+
+  @each $name, $size in $font-sizes {
+    &-#{$name} {
+      font-size: $size;
+    }
+  }
+}
+
+// Line height utilities
+.mw-leading {
+  &-tight {
+    line-height: 1.2;
+  }
+
+  &-normal {
+    line-height: 1.5;
+  }
+
+  &-loose {
+    line-height: 1.8;
+  }
+}