maverick-wave 3.3.0 → 3.3.2

package/src/scss/components/_tables.scss

@@ -17,7 +17,7 @@
 
   th {
     font-weight: font-weight('medium');
-    color: var(--mw-primary-text-color);
+    color: var(--mw-accent-text-color);
     background: var(--mw-primary-color);
     user-select: none;
   }
@@ -127,3 +127,44 @@
     background: var(--mw-primary-background-hover);
   }
 }
+
+// Quiet header for data-heavy views
+.mw-table-subtle {
+  th {
+    background: color-mix(
+      in srgb,
+      var(--mw-gray-color) 20%,
+      var(--mw-card-background)
+    );
+    color: var(--mw-text-color);
+    border-bottom: 2px solid var(--mw-border-accent);
+  }
+}
+
+// Header stays visible while the body scrolls
+.mw-table-sticky-head {
+  th {
+    position: sticky;
+    top: spacing('0');
+    z-index: z-index('lift');
+    box-shadow:
+      inset 0 1px 0 var(--mw-border),
+      inset 0 -1px 0 var(--mw-border);
+  }
+}
+
+.mw-table-responsive-scroll {
+  @extend .mw-table-responsive;
+  --mw-table-scroll-height: 400px;
+  max-height: var(--mw-table-scroll-height);
+  overflow-y: auto;
+
+  .mw-table {
+    margin-top: spacing('0');
+  }
+
+  // Rows get shorter on small screens
+  @include media-down('sm') {
+    --mw-table-scroll-height: 260px;
+  }
+}

package/src/scss/components/_tabs.scss

@@ -7,7 +7,7 @@
 
   &-nav {
     display: flex;
-    border-bottom: 1px solid var(--mw-primary-color-hover);
+    border-bottom: 1px solid var(--mw-border-accent);
     margin-bottom: spacing('3');
     overflow-x: auto;
 
@@ -65,7 +65,7 @@
     .mw-tabs-nav {
       flex-direction: column;
       border-bottom: none;
-      border-right: 1px solid var(--mw-primary-color-hover);
+      border-right: 1px solid var(--mw-border-accent);
       margin-bottom: spacing('0');
       margin-right: spacing('3');
       min-width: 160px;
@@ -74,7 +74,7 @@
       @include media-down('sm') {
         flex-direction: row;
         border-right: none;
-        border-bottom: 1px solid var(--mw-primary-color-hover);
+        border-bottom: 1px solid var(--mw-border-accent);
         margin-right: spacing('0');
         margin-bottom: spacing('4');
         width: 100%;
@@ -126,12 +126,12 @@
       border-radius: radius('xl');
       padding: spacing('4') spacing('5');
       line-height: 0.9;
-      border: 1px solid var(--mw-primary-color-hover);
+      border: 1px solid var(--mw-border-accent);
       background: var(--mw-card-background);
 
       &.active {
         background: var(--mw-primary-color);
-        color: var(--mw-primary-text-color);
+        color: var(--mw-accent-text-color);
       }
     }
   }

package/src/scss/components/_tags.scss

@@ -1,13 +1,24 @@
 @use '../abstracts' as *;
 
+// Colour variants
+$_mw-tag-colors: (
+  'primary': '',
+  'secondary': '',
+  'success': 'info-',
+  'warning': 'info-',
+  'danger': 'info-',
+  'info': 'info-',
+);
+
+// Container for tag *lists* - carries the colour for all its items
 .mw-tags {
   display: flex;
   flex-wrap: wrap;
   gap: spacing('2');
 }
 
-// Tag item
-.mw-tags-item {
+// Visual base, shared by the list item and the standalone tag
+%mw-tag-base {
   display: inline-flex;
   align-items: center;
   background: var(--mw-primary-background);
@@ -23,6 +34,11 @@
   &:hover {
     background: var(--mw-primary-background-hover);
   }
+}
+
+// Tag item - inside a `.mw-tags` container
+.mw-tags-item {
+  @extend %mw-tag-base;
 
   // Removable tag styling
   &.mw-tags-removable {
@@ -30,6 +46,11 @@
   }
 }
 
+// Standalone tag - carries its colour directly, no container needed
+.mw-tag {
+  @extend %mw-tag-base;
+}
+
 // Remove button - pure CSS
 .mw-tags-remove {
   flex-shrink: 0;
@@ -49,41 +70,36 @@
   font-size: 0.9rem;
 }
 
-// Color variants
-.mw-tags-primary .mw-tags-item {
-  background-color: var(--mw-primary-background);
-  border-color: var(--mw-primary-color);
-  &:hover {
-    background: var(--mw-primary-background-hover);
-  }
-}
+// Color variants - generated for the list form and the standalone form
+@each $name, $infix in $_mw-tag-colors {
+  .mw-tags-#{$name} .mw-tags-item,
+  .mw-tag-#{$name} {
+    background-color: var(--mw-#{$name}-#{$infix}background);
+    border-color: var(--mw-#{$name}-color);
 
-.mw-tags-secondary .mw-tags-item {
-  background-color: var(--mw-secondary-background);
-  border-color: var(--mw-secondary-color);
-  &:hover {
-    background: var(--mw-secondary-background-hover);
+    &:hover {
+      background: var(--mw-#{$name}-#{$infix}background-hover);
+    }
   }
 }
 
-.mw-tags-success .mw-tags-item {
-  background-color: var(--mw-success-info-background);
-  border-color: var(--mw-success-color);
-  &:hover {
-    background: var(--mw-success-info-background-hover);
-  }
-}
+// Neutral variant for "draft" / "done" states.
+.mw-tags-muted .mw-tags-item,
+.mw-tag-muted {
+  background-color: var(--mw-gray-background);
+  border-color: var(--mw-border);
+  color: var(--mw-text-muted-color);
 
-.mw-tags-info .mw-tags-item {
-  background-color: var(--mw-info-info-background);
-  border-color: var(--mw-info-color);
   &:hover {
-    background: var(--mw-info-info-background-hover);
+    background-color: var(--mw-gray-background);
+    border-color: var(--mw-text-muted-color);
+    color: var(--mw-text-color);
   }
 }
 
 // Size variants
-.mw-tags-lg .mw-tags-item {
+.mw-tags-lg .mw-tags-item,
+.mw-tag-lg {
   font-size: font-size('sm');
   padding: spacing('1') spacing('3');
 

package/src/scss/components/_tiles.scss

@@ -67,9 +67,9 @@
   cursor: pointer;
 
   &:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 9px 21px var(--mw-shadow);
-    border-color: var(--mw-primary-color-hover);
+    transform: translateY(-2px);
+    box-shadow: 0 7px 15px var(--mw-shadow);
+    border-color: var(--mw-border-accent);
   }
 
   // Tile image

package/src/scss/components/_timelines.scss

@@ -187,7 +187,7 @@ $_simple-date-width: 110px;
 
     .mw-timeline-big-date-main,
     .mw-timeline-big-date-sub {
-      color: var(--mw-primary-text-color);
+      color: var(--mw-accent-text-color);
     }
   }
 
@@ -308,7 +308,7 @@ $_simple-date-width: 110px;
   // Active step
   &-step.active &-date {
     background: var(--mw-primary-color);
-    color: var(--mw-primary-text-color);
+    color: var(--mw-accent-text-color);
     transform: scale(1.1);
     animation: mw-pulse-ring-simple 2s infinite;
   }

package/src/scss/components/_toasts.scss

@@ -0,0 +1,92 @@
+@use '../abstracts' as *;
+
+// Fixed, stacked container for `mw-alert`
+.mw-toast-stack {
+  position: fixed;
+  z-index: z-index('alert');
+  display: flex;
+  flex-direction: column;
+  gap: spacing('3');
+  width: min(380px, calc(100vw - #{2 * spacing('5')}));
+  max-height: calc(100vh - #{2 * spacing('5')});
+  overflow-y: auto;
+  pointer-events: none;
+
+  > * {
+    pointer-events: auto;
+    margin-bottom: spacing('0');
+    animation: mw-toast-in 0.3s ease;
+  }
+
+  // Default position
+  top: spacing('5');
+  right: spacing('5');
+
+  // Positions
+  &-top-right {
+    top: spacing('5');
+    right: spacing('5');
+    bottom: auto;
+    left: auto;
+  }
+
+  &-top-center {
+    top: spacing('5');
+    left: 50%;
+    right: auto;
+    bottom: auto;
+    transform: translateX(-50%);
+  }
+
+  &-bottom-right {
+    bottom: spacing('5');
+    right: spacing('5');
+    top: auto;
+    left: auto;
+    flex-direction: column-reverse;
+
+    > * {
+      animation-name: mw-toast-in-up;
+    }
+  }
+
+  // On phones the stack spans the full width at the top
+  @include media-down('sm') {
+    left: spacing('5');
+    right: spacing('5');
+    width: auto;
+    transform: none;
+
+    &-bottom-right {
+      top: auto;
+    }
+  }
+}
+
+@keyframes mw-toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(-12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes mw-toast-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mw-toast-stack > * {
+    animation: none;
+  }
+}

package/src/scss/form-elements/_form.scss

@@ -4,7 +4,6 @@
   display: flex;
   flex-direction: column;
   gap: spacing('4');
-  padding: spacing('1');
   width: 100%;
 
   &-inline {
@@ -16,10 +15,19 @@
   &-group {
     display: flex;
     flex-direction: column;
-    padding: spacing('2');
-    gap: spacing('1');
+    padding: spacing('4');
+    gap: spacing('2');
     border-radius: radius('sm');
     border: 2px solid var(--mw-border);
+
+    // Explicit hook for the heading, mirrors mw-modal-title
+    &-title {
+      font-size: font-size('md');
+      font-weight: font-weight('bold');
+      color: var(--mw-text-color);
+      line-height: 1.2;
+      margin: spacing('0') spacing('0') spacing('1') spacing('0');
+    }
   }
 
   label {

package/src/scss/form-elements/_input.scss

@@ -42,6 +42,30 @@
     font-size: font-size('sm');
   }
 
+  // Numeric input for money and other figures - the entry counterpart to the
+  // `mw-text-numeric` utility, so a value looks the same while being typed and
+  // once it is rendered into a table.
+  //
+  // Pair it with `type="text" inputmode="decimal"`, not `type="number"`:
+  // number inputs change their value on scroll, and they reject a comma as
+  // decimal separator in most locales, which silently empties `.value` for
+  // anyone typing "1234,50".
+  &-numeric {
+    text-align: right;
+    font-variant-numeric: tabular-nums lining-nums;
+    font-feature-settings: 'tnum', 'lnum';
+
+    // Suppress the native spinners if a `type="number"` slips through - their
+    // step of 1 is meaningless for an amount and the arrows are tiny.
+    appearance: textfield;
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      appearance: none;
+      margin: 0;
+    }
+  }
+
   // Date / time inputs — style the native picker indicator
   &[type='date'],
   &[type='time'],

package/src/scss/form-elements/_toggle.scss

@@ -69,7 +69,7 @@ $_knob-travel-lg: calc(
       left: $_knob-offset;
       width: $_knob-size;
       height: $_knob-size;
-      background: var(--mw-white-color);
+      background: var(--mw-accent-text-color);
       border-radius: radius('full');
       transition: transform 0.25s ease;
       box-shadow: 0 1px 4px var(--mw-shadow);

package/src/scss/layout/_footer.scss

@@ -5,7 +5,7 @@
   background: var(--mw-footer-background);
   padding: spacing('5') spacing('0');
   margin-top: spacing('6');
-  border-top: 1px solid var(--mw-primary-color-hover);
+  border-top: 1px solid var(--mw-border-accent);
 
   &-top {
     display: grid;
@@ -105,14 +105,14 @@
       color: var(--mw-text-color);
       font-size: font-size('xl');
       transition: var(--mw-transition);
-      border: 1px solid var(--mw-primary-color-hover);
+      border: 1px solid var(--mw-border-accent);
       box-shadow: 0 3px 10px var(--mw-shadow);
       text-decoration: none;
 
       &:hover {
         background: var(--mw-primary-color);
-        color: var(--mw-primary-text-color);
-        transform: translateY(-3px);
+        color: var(--mw-accent-text-color);
+        transform: translateY(-2px);
         border-color: var(--mw-primary-color);
       }
     }