maverick-wave 3.10.0 → 4.0.0

package/src/scss/abstracts/_variables.scss

@@ -95,6 +95,10 @@ $base-colors: (
   'gray-color': $gray-color,
   // Subtle neutral surface: zebra rows, disabled fields, tracks, skeletons
   'gray-background': fade('gray-color', 20%),
+  // Same surface under the name people reach for when they want a slightly
+  // set-off area *inside* a card - hint block, framed paragraph, form summary.
+  // An alias on purpose: one tone, two names, so nobody invents a third.
+  'surface-muted': token('gray-background'),
   // Heavy scrim behind modals and blocking spinners
   'overlay-background': fade('gray-color', 60%),
   'section-alternate-pattern': fade('gray-color', 45%),
@@ -128,7 +132,7 @@ $dark-theme-colors: (
   'page-background': $dark-background,
   'hero-overlay-background': fade('dark-page-background', 30%),
   'card-background': tint('dark-page-background', 5%),
-  'footer-background': tint('dark-page-background', 3%),
+  'footer-background': shade('dark-page-background', 30%),
   'border': tint('dark-page-background', 16%),
   'shadow': fade('dark-text-color', 30%),
   'text-color': $dark-text-color,
@@ -140,7 +144,7 @@ $light-theme-colors: (
   'page-background': $light-background,
   'hero-overlay-background': fade('light-page-background', 30%),
   'card-background': tint('light-page-background', 40%),
-  'footer-background': shade('light-page-background', 2%),
+  'footer-background': shade('light-page-background', 8%),
   'border': shade('light-page-background', 15%),
   'shadow': fade('light-text-color', 30%),
   'text-color': $light-text-color,

package/src/scss/base/_base.scss

@@ -48,6 +48,16 @@ $_active-prefix: 'dark';
   // header height
   --mw-header-height: #{$header-height};
 
+  // Layout knobs. A good default is not enough here: what reads as generous on
+  // a landing page costs visible content in an application with a sticky
+  // header. Same framework, two different right answers.
+  --mw-container-width: min(1200px, 89%);
+  // Below 'sm' the percentage turns into wasted margin - 89% of a 375px screen
+  // leaves 41px of nothing on a card that has to fit amount, status and two
+  // labels into one row. A fixed gutter uses the width instead.
+  --mw-container-width-sm: calc(100% - #{spacing('5')} * 2);
+  --mw-section-padding-block: #{spacing('7')};
+
   // Active theme — aliases onto the dark or light set above
   @each $name, $value in $_active-theme {
     --mw-#{$name}: var(--mw-#{$_active-prefix}-#{$name});
@@ -62,3 +72,14 @@ $_active-prefix: 'dark';
     }
   }
 }
+
+// Anything that draws its own surface re-points the cover colour of a scroll
+// hint, so a tab bar or a wide table inside a card fades into the card and not
+// into the page behind it. Inherited, so nesting keeps working.
+.mw-card,
+.mw-panel,
+.mw-modal,
+.mw-tile,
+.mw-calendar:not(.mw-calendar-plain) {
+  --mw-scroll-hint-cover: var(--mw-card-background);
+}

package/src/scss/components/_accordions.scss

@@ -42,6 +42,7 @@
       transform: rotate(0deg);
     }
 
+    &.mw-active,
     &.active {
       background: var(--mw-primary-color);
       color: var(--mw-accent-text-color);
@@ -67,6 +68,7 @@
       }
     }
 
+    &.mw-active,
     &.active {
       height: auto;
       max-height: 500px;

package/src/scss/components/_alerts.scss

@@ -2,7 +2,6 @@
 
 .mw-alert {
   position: relative;
-  overflow: hidden;
   display: flex;
   align-items: flex-start;
   padding: spacing('4') spacing('5');
@@ -13,13 +12,6 @@
   border: 1px solid var(--mw-border);
   box-shadow: 0 2px 5px var(--mw-shadow);
 
-  &-icon,
-  &-content,
-  .mw-alert-close {
-    position: relative;
-    z-index: z-index('alert') + 5;
-  }
-
   &-icon {
     flex-shrink: 0;
     margin-right: spacing('4');
@@ -83,19 +75,13 @@ $_mw-alert-colors: (
 // Color variants
 @each $name, $col in $_mw-alert-colors {
   .mw-alert-#{$name} {
-    border: 1px solid rgba($col, 0.2);
+    background-image: linear-gradient(
+      var(--mw-#{$name}-info-background),
+      var(--mw-#{$name}-info-background)
+    );
+    border: 1px solid color-mix(in srgb, #{$col} 20%, transparent);
     border-left: 4px solid #{$col};
 
-    // Color layer
-    &::before {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background: var(--mw-#{$name}-info-background);
-      z-index: z-index('alert');
-      pointer-events: none;
-    }
-
     .mw-alert-icon {
       color: #{$col};
     }

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

@@ -35,6 +35,12 @@
   justify-content: flex-end;
 }
 
+// Explicit counterpart to the three above - it matches the default, but nobody
+// should have to look that up to find out
+.mw-button-bar-center {
+  justify-content: center;
+}
+
 .mw-button-bar-between {
   justify-content: space-between;
 

package/src/scss/components/_buttons.scss

@@ -36,6 +36,7 @@
   &:hover:not(:disabled) {
     background: var(--mw-primary-color-hover);
   }
+  &.mw-active:not(:disabled),
   &.active:not(:disabled) {
     background: var(--mw-primary-color-hover);
     border: 1px solid var(--mw-primary-color);
@@ -47,6 +48,7 @@
   &:hover:not(:disabled) {
     background: var(--mw-secondary-color-hover);
   }
+  &.mw-active:not(:disabled),
   &.active:not(:disabled) {
     background: var(--mw-secondary-color-hover);
     border: 1px solid var(--mw-secondary-color);
@@ -59,6 +61,7 @@
   &:hover:not(:disabled) {
     background: var(--mw-danger-color-hover);
   }
+  &.mw-active:not(:disabled),
   &.active:not(:disabled) {
     background: var(--mw-danger-color-hover);
     border: 1px solid var(--mw-danger-color);
@@ -70,6 +73,7 @@
   &:hover:not(:disabled) {
     background: var(--mw-success-color-hover);
   }
+  &.mw-active:not(:disabled),
   &.active:not(:disabled) {
     background: var(--mw-success-color-hover);
     border: 1px solid var(--mw-success-color);
@@ -83,6 +87,7 @@
     background: var(--mw-primary-color);
     color: var(--mw-accent-text-color);
   }
+  &.mw-active:not(:disabled),
   &.active:not(:disabled) {
     background: var(--mw-primary-color);
     color: var(--mw-accent-text-color);
@@ -108,6 +113,36 @@
   }
 }
 
+// A button that brings nothing but its operability - settings tabs, calendar
+// days, the time in a request row, a modal backdrop. Everywhere a <button> is
+// the right element and a button is the wrong look.
+//
+// Not the same as `mw-btn-link`: that one is a button dressed as a link, with
+// its own colour and a min-width. This one has no look at all.
+.mw-btn-plain {
+  display: inline-flex;
+  align-items: center;
+  appearance: none;
+  background: none;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 2px solid var(--mw-primary-color);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+}
+
 // Size modifiers
 .mw-btn-sm {
   padding: spacing('1') spacing('3');
@@ -130,6 +165,38 @@
   }
 }
 
+// A line of text above a row of actions - "This action cannot be undone", what
+// a save applies to, why a button is disabled.
+//
+// It goes *inside* the action row, so no extra wrapper is needed: a full-width
+// flex line pushes the buttons onto the row below. Only rows that actually
+// carry a note start wrapping, so nothing existing changes its behaviour.
+//
+// `mw-form-actions-hint` was the form-only version of this and stays as an
+// alias - the name is wrong the moment the same line sits in a modal.
+.mw-modal-footer,
+.mw-form-actions,
+.mw-panel-footer,
+.mw-card-footer {
+  &:has(.mw-actions-note),
+  &:has(.mw-form-actions-hint) {
+    flex-wrap: wrap;
+    // The column gap between buttons is too tight to double as the gap to the
+    // line above them
+    row-gap: spacing('3');
+  }
+}
+
+.mw-actions-note,
+.mw-form-actions-hint {
+  flex: 1 0 100%;
+  margin: spacing('0');
+  text-align: right;
+  font-size: font-size('sm');
+  color: var(--mw-text-muted-color);
+  text-wrap: pretty;
+}
+
 .mw-btn-mini {
   display: inline-flex;
   align-items: center;

package/src/scss/components/_calendar.scss

@@ -0,0 +1,290 @@
+@use '../abstracts' as *;
+
+// Pixel-precise shape values
+$_mw-calendar-dot-size: 5px;
+$_mw-calendar-dot-gap: 3px;
+$_mw-calendar-cell-height: 38px;
+$_mw-calendar-cell-height-compact: 29px;
+$_mw-calendar-grid-gap: 4px;
+$_mw-calendar-grid-gap-sm: 3px;
+$_mw-calendar-grid-gap-compact: 3px;
+
+$_mw-calendar-dot-tones: (
+  'primary': var(--mw-primary-color),
+  'secondary': var(--mw-secondary-color),
+  'success': var(--mw-success-color),
+  'warning': var(--mw-warning-color),
+  'danger': var(--mw-danger-color),
+  'info': var(--mw-info-color),
+);
+
+// Same silhouette as a card, but without the hover lift
+.mw-calendar {
+  display: block;
+  padding: spacing('5');
+  background: var(--mw-card-background);
+  border: 1px solid var(--mw-border);
+  border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
+  box-shadow: 0 5px 10px var(--mw-shadow);
+}
+
+// Calendar without its own surface - for one that already sits on a card
+.mw-calendar-plain {
+  padding: spacing('0');
+  background: transparent;
+  border: none;
+  box-shadow: none;
+}
+
+.mw-calendar-header {
+  display: flex;
+  align-items: center;
+  gap: spacing('3');
+  margin-bottom: spacing('5');
+}
+
+// Takes the space between the two arrows so the label stays optically centred
+.mw-calendar-title {
+  flex: 1;
+  min-width: 0;
+  text-align: center;
+  font-size: font-size('md');
+  font-weight: font-weight('medium');
+  color: var(--mw-text-color);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// Sits on .mw-btn - this only squares it off around the chevron
+.mw-calendar-nav {
+  padding: spacing('2') spacing('4');
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+// Grid
+.mw-calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  gap: $_mw-calendar-grid-gap;
+}
+
+.mw-calendar-weekday {
+  padding-bottom: spacing('2');
+  text-align: center;
+  font-size: font-size('2xs');
+  font-weight: font-weight('bold');
+  color: var(--mw-text-muted-color);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Saturday and Sunday read like a wall calendar - the label carries the
+// weekend, the cell below only gets a faint tint
+.mw-calendar-weekday.mw-calendar-weekend {
+  color: var(--mw-danger-color);
+}
+
+// A fixed row height instead of an aspect ratio
+.mw-calendar-day {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: $_mw-calendar-cell-height;
+  padding: spacing('1');
+  border: 1px solid transparent;
+  border-radius: radius('sm');
+  background: transparent;
+  color: var(--mw-text-color);
+  font: inherit;
+  font-size: font-size('sm');
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  cursor: pointer;
+  transition: var(--mw-transition);
+}
+
+.mw-calendar-day.mw-calendar-weekend {
+  background: var(--mw-gray-background);
+}
+
+// Days spilling in from the neighbouring month stay readable but clearly step
+// back - leaving them out would make the first and last row look broken
+.mw-calendar-day.mw-calendar-adjacent {
+  color: var(--mw-text-muted-color);
+  opacity: 0.5;
+}
+
+.mw-calendar-day:hover:not(:disabled):not(.mw-selected) {
+  background: var(--mw-primary-background);
+  border-color: var(--mw-border-accent);
+}
+
+.mw-calendar-day:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--mw-primary-background);
+  border-color: var(--mw-primary-color);
+}
+
+// Today gets the outline, the selection gets the fill - both at once would be
+// indistinguishable. Secondary, so it never reads as a selection.
+.mw-calendar-day.mw-calendar-today {
+  border-color: var(--mw-secondary-color);
+  font-weight: font-weight('bold');
+}
+
+.mw-calendar-day.mw-selected {
+  background: var(--mw-primary-color);
+  border-color: var(--mw-primary-color);
+  color: var(--mw-accent-text-color);
+  opacity: 1;
+}
+
+// A day that cannot be picked stays legible
+.mw-calendar-day:disabled {
+  cursor: not-allowed;
+  color: var(--mw-text-muted-color);
+  opacity: 0.4;
+}
+
+// Own element so the dots can be positioned against it
+.mw-calendar-date {
+  line-height: 1;
+}
+
+// Status dots
+.mw-calendar-dots {
+  position: absolute;
+  bottom: 5px;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: $_mw-calendar-dot-gap;
+  pointer-events: none;
+}
+
+// What a dot means belongs to the caller: the same calendar reads "request
+// pending / booked / time offered" in one app and something else entirely on a
+// public booking page. So the colour is a property, settable per cell, and the
+// tone classes below are just named presets for it.
+.mw-calendar-dot {
+  width: $_mw-calendar-dot-size;
+  height: $_mw-calendar-dot-size;
+  border-radius: radius('full');
+  background: var(--mw-calendar-dot, var(--mw-text-muted-color));
+  flex-shrink: 0;
+}
+
+@each $name, $color in $_mw-calendar-dot-tones {
+  .mw-calendar-dot-#{$name} {
+    --mw-calendar-dot: #{$color};
+  }
+}
+
+// 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);
+}
+
+// Compact month - date picker density
+.mw-calendar-compact {
+  padding: spacing('4');
+
+  .mw-calendar-header {
+    margin-bottom: spacing('4');
+  }
+
+  .mw-calendar-title {
+    font-size: font-size('base');
+  }
+
+  .mw-calendar-nav {
+    padding: spacing('1') spacing('3');
+  }
+
+  .mw-calendar-weekday {
+    padding-bottom: spacing('1');
+    font-size: font-size('3xs');
+  }
+
+  // The gap the cells give up here goes straight back into their width
+  .mw-calendar-grid {
+    gap: $_mw-calendar-grid-gap-compact;
+  }
+
+  .mw-calendar-day {
+    min-height: $_mw-calendar-cell-height-compact;
+    font-size: font-size('xs');
+  }
+
+  // Hidden rather than forbidden, so the same markup works in both densities
+  .mw-calendar-dots {
+    display: none;
+  }
+
+  .mw-calendar-legend {
+    margin-top: spacing('4');
+    padding-top: spacing('3');
+  }
+}
+
+// Legend - explains what the dots stand for
+.mw-calendar-legend {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: spacing('3') spacing('5');
+  margin-top: spacing('5');
+  padding-top: spacing('4');
+  border-top: 1px solid var(--mw-border);
+}
+
+.mw-calendar-legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: spacing('1');
+  font-size: font-size('xs');
+  color: var(--mw-text-muted-color);
+}
+
+// The legend dot is a plain .mw-calendar-dot, only outside of a cell
+.mw-calendar-legend-item .mw-calendar-dot {
+  position: static;
+}
+
+@include media-down('sm') {
+  .mw-calendar {
+    padding: spacing('4') spacing('3');
+  }
+
+  .mw-calendar-grid {
+    gap: $_mw-calendar-grid-gap-sm;
+  }
+
+  .mw-calendar-weekday {
+    font-size: font-size('3xs');
+  }
+
+  .mw-calendar-title {
+    font-size: font-size('base');
+  }
+
+  // Four legend entries wrap onto three lines at this width otherwise
+  .mw-calendar-legend {
+    gap: spacing('2') spacing('4');
+    margin-top: spacing('4');
+    padding-top: spacing('3');
+  }
+
+  .mw-calendar-legend-item {
+    font-size: font-size('2xs');
+  }
+}

package/src/scss/components/_content-slider.scss

@@ -69,6 +69,7 @@
       display: block;
     }
 
+    &.mw-active,
     &.active {
       transform: translateX(0);
     }

package/src/scss/components/_index.scss

@@ -5,6 +5,7 @@
 @forward 'buttons';
 @forward 'button-bar';
 @forward 'breadcrumbs';
+@forward 'calendar';
 @forward 'cards';
 @forward 'code';
 @forward 'coming-soon';
@@ -22,6 +23,7 @@
 @forward 'panels';
 @forward 'progress';
 @forward 'ratings';
+@forward 'segmented';
 @forward 'skeleton';
 @forward 'spinners';
 @forward 'stepper';

package/src/scss/components/_kanban.scss

@@ -357,12 +357,8 @@ $_mw-kanban-ribbon-clearance-compact: 58px;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .mw-kanban-card,
-  .mw-kanban-move {
-    transition: none;
-  }
-
-  .mw-kanban-card.mw-kanban-card-in {
+  .mw-kanban-card.mw-kanban-card-in,
+  .mw-kanban-composer.mw-active {
     animation: none;
   }
 }

package/src/scss/components/_modals.scss

@@ -29,7 +29,7 @@
   background: var(--mw-card-background);
   border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
   box-shadow: 0 25px 50px var(--mw-shadow);
-  max-width: 550px;
+  max-width: 520px;
   width: 100%;
   max-height: 85dvh;
   display: flex;
@@ -40,16 +40,20 @@
     transform: scale(1) translateY(0);
   }
 
+  // The four widths grow by a roughly even step (150 / 200 / 240px) so each
+  // size is recognisably a size. Before, default and lg sat 130px apart - the
+  // smallest gap of the four, right in the middle of the scale, which made the
+  // two read as the same modal rendered twice.
   &.mw-modal-sm {
     max-width: 370px;
     max-height: 80dvh;
   }
   &.mw-modal-lg {
-    max-width: 680px;
+    max-width: 720px;
     max-height: 90dvh;
   }
   &.mw-modal-xl {
-    max-width: 900px;
+    max-width: 960px;
     max-height: 92dvh;
   }
 }
@@ -111,7 +115,10 @@
   }
 }
 
-// Backdrop for click-outside-to-close
+// Backdrop for click-outside-to-close.
+// The cursor says it is clickable, so it should also be reachable by keyboard -
+// which means it wants to be a <button>. These four lines clear the browser
+// defaults that come with one; on a <div> they change nothing.
 .mw-modal-backdrop {
   position: absolute;
   top: 0;
@@ -120,4 +127,8 @@
   bottom: 0;
   z-index: z-index('modal')-5;
   cursor: pointer;
+  appearance: none;
+  padding: 0;
+  background: none;
+  border: 0;
 }