maverick-wave 4.4.2 → 4.5.1

package/src/scss/components/_lists.scss

@@ -1,5 +1,51 @@
 @use '../abstracts' as *;
 
+// One scrollbar look for every scrollable list. Was copy-pasted per variant
+// before, which is how the checkbox list ended up with track and thumb in the
+// same color - an invisible scrollbar.
+@mixin _list-scrollbar {
+  scrollbar-gutter: stable; // Prevent layout shift
+
+  &::-webkit-scrollbar {
+    width: 7px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var(--mw-primary-background);
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--mw-text-muted-color);
+    border-radius: 3px;
+
+    &:hover {
+      background: var(--mw-primary-color);
+    }
+  }
+
+  // Modern Firefox scrollbar - needs both thumb and track, a single value
+  // makes the whole declaration invalid
+  scrollbar-width: thin;
+  scrollbar-color: var(--mw-text-muted-color) var(--mw-gray-background);
+}
+
+// Checkbox box and checkmark sizes - shape-drawing values, so px instead of
+// spacing() keys. The checkmark has to scale with the box: compact used to be
+// an 8px box (4px of usable space inside the 2px border) holding a 5.6px
+// checkmark, so the mark broke out of its own box.
+$_checkbox-box-compact: 12px;
+$_checkbox-box-default: 14px;
+$_checkbox-box-large: 16px;
+$_check-compact-w: 5px;
+$_check-compact-h: 3px;
+$_check-default-w: 6px;
+$_check-default-h: 3px;
+$_check-large-w: 7px;
+$_check-large-h: 4px;
+// Nudges the box down onto the first text line when a header is present
+$_checkbox-box-offset: 3px;
+
 // Base list styles
 .mw-list {
   margin: spacing('4') spacing('0');
@@ -82,15 +128,18 @@
 
 // Dot lists
 .mw-list-dot {
-  padding-left: spacing('3');
-  list-style: disc inside;
+  // outside keeps a wrapping line flush with the text instead of letting it
+  // run back underneath the bullet - the padding makes room for the marker
+  padding-left: spacing('6');
+  list-style: disc outside;
 
   li {
     padding-left: spacing('1');
     margin-bottom: spacing('1');
 
+    // ::marker only takes color, content and font properties - positioning
+    // it has no effect
     &::marker {
-      left: spacing('0');
       color: var(--mw-primary-text-color);
     }
   }
@@ -102,14 +151,18 @@
   padding-left: spacing('3');
 
   li {
-    padding-left: spacing('1');
+    position: relative;
+    padding-left: spacing('6');
     margin-bottom: spacing('1');
-  }
 
-  li::before {
-    content: '✓';
-    color: var(--mw-primary-text-color);
-    padding-right: spacing('4');
+    // Taken out of the flow so a wrapping line keeps its indent instead of
+    // running back underneath the checkmark
+    &::before {
+      content: '✓';
+      position: absolute;
+      left: 0;
+      color: var(--mw-primary-text-color);
+    }
   }
 }
 
@@ -162,7 +215,10 @@
     padding: spacing('3');
     background: var(--mw-card-background);
     border: 1px solid transparent;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transition:
+      background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+      border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+      transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     overflow: hidden;
 
     &::before {
@@ -176,11 +232,13 @@
       transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     }
 
+    // The card carries its own background and radius, so moving the whole
+    // thing reads the same as growing the padding did - and runs on the
+    // compositor instead of relaying out the item on every hover
     &:hover {
-      padding-left: spacing('4');
       background: var(--mw-primary-background-hover);
       border-color: var(--mw-primary-text-color);
-      transform: translateX(4px);
+      transform: translateX(8px);
 
       &::before {
         width: 4px;
@@ -189,10 +247,8 @@
   }
 }
 
-// Secondary variant
+// Secondary variant - additive, sits alongside mw-item-list-slide
 .mw-item-list-slide-secondary {
-  @extend .mw-item-list-slide;
-
   > * {
     &::before {
       background: var(--mw-secondary-text-color);
@@ -217,9 +273,24 @@
   > * {
     padding: spacing('3');
     border-bottom: 1px solid var(--mw-border);
-    transition: all 0.2s ease;
+    transition:
+      background 0.2s ease,
+      padding-left 0.2s ease;
     position: relative;
 
+    // Always present at zero width so it can grow on hover - creating it
+    // inside :hover means it snaps in with no transition
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 0;
+      background: var(--mw-primary-text-color);
+      transition: width 0.2s ease;
+    }
+
     &:last-child {
       border-bottom: none;
     }
@@ -229,13 +300,7 @@
       padding-left: spacing('4');
 
       &::before {
-        content: '';
-        position: absolute;
-        left: 0;
-        top: 0;
-        bottom: 0;
         width: 3px;
-        background: var(--mw-primary-text-color);
       }
     }
 
@@ -247,18 +312,21 @@
         padding-left: spacing('4');
 
         &::before {
-          display: none;
+          width: 0;
         }
       }
     }
   }
 
-  // Nested compact lists styling
+  // Nested compact lists styling - only the left rule, the full border comes
+  // from the outer rule and would frame the nested list a second time
   .mw-item-list-compact {
     margin-top: spacing('2');
     margin-left: spacing('2');
+    border: none;
     border-left: 2px solid var(--mw-border);
     border-radius: 0;
+    background: transparent;
 
     > * {
       padding: spacing('2');
@@ -286,7 +354,11 @@
   > * {
     padding: spacing('4');
     border-bottom: 1px solid var(--mw-border);
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    transition:
+      background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+      padding-left 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+      color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+      transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -303,7 +375,7 @@
 
     &:active {
       background: var(--mw-primary-color);
-      color: var(--mw-accent-text-color);
+      color: var(--mw-primary-accent-text-color);
       transform: scale(0.98);
     }
   }
@@ -318,37 +390,14 @@
   border: 1px solid var(--mw-border);
   border-radius: radius('md');
   background: var(--mw-card-background);
-  scrollbar-gutter: stable; // Prevent layout shift
-
-  // Custom scrollbar styling
-  &::-webkit-scrollbar {
-    width: 7px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: var(--mw-primary-background);
-    border-radius: 3px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: var(--mw-text-muted-color);
-    border-radius: 3px;
-    opacity: 0.6;
-
-    &:hover {
-      background: var(--mw-primary-color);
-      opacity: 1;
-    }
-  }
-
-  // Modern Firefox scrollbar
-  scrollbar-width: thin;
-  scrollbar-color: var(--mw-text-muted-color) var(--mw-gray-background);
+  @include _list-scrollbar;
 
   > * {
     padding: spacing('3');
     border-bottom: 1px solid var(--mw-border);
-    transition: all 0.2s ease;
+    transition:
+      background 0.2s ease,
+      color 0.2s ease;
 
     &:last-child {
       border-bottom: none;
@@ -361,24 +410,23 @@
 
     &:active {
       background: var(--mw-primary-color);
-      color: var(--mw-accent-text-color);
+      color: var(--mw-primary-accent-text-color);
     }
   }
 }
 
-// Height variants
+// Height modifiers - additive, put them alongside mw-item-list-scroll.
+// Extending duplicated the whole scroll block three times over for what is
+// one declaration each.
 .mw-item-list-scroll-sm {
-  @extend .mw-item-list-scroll;
   max-height: 200px;
 }
 
 .mw-item-list-scroll-lg {
-  @extend .mw-item-list-scroll;
   max-height: 400px;
 }
 
 .mw-item-list-scroll-xl {
-  @extend .mw-item-list-scroll;
   max-height: 500px;
 }
 
@@ -398,7 +446,11 @@
     border-bottom: 1px solid var(--mw-border);
     border-left: 3px solid transparent;
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition:
+      background 0.2s ease,
+      color 0.2s ease,
+      transform 0.2s ease,
+      border-left-color 0.2s ease;
     user-select: none;
 
     &:last-child {
@@ -411,63 +463,35 @@
 
     &:active {
       background: var(--mw-primary-color);
-      color: var(--mw-accent-text-color);
+      color: var(--mw-primary-accent-text-color);
       transform: scale(0.98);
     }
 
+    // Only the deltas to the .mw-checkbox in form-elements. The hidden input,
+    // the box chrome and the checked, focus-visible, disabled and color states
+    // all come from there - copying them here used to shadow disabled and the
+    // size variants, because the nesting gave the copy a higher specificity.
     .mw-checkbox {
       display: flex;
-      align-items: center;
       gap: spacing('3');
       flex: 1;
 
-      // Hide native checkbox
-      input[type='checkbox'] {
-        position: absolute;
-        opacity: 0;
-        width: 0;
-        height: 0;
-        margin: spacing('0');
-      }
-
-      // Visual checkbox (the label)
+      // A list checkbox is smaller than a standalone one. Size is a list
+      // concern here - the -compact and -large list modifiers drive it, not
+      // mw-checkbox-sm/-lg, which sit on the wrong element to reach this.
       .mw-checkbox-box {
-        position: relative;
-        flex-shrink: 0;
-        width: 14px;
-        height: 14px;
-        border: 2px solid var(--mw-border);
-        border-radius: radius('sm');
-        background: var(--mw-form-elements-background);
-        transition: var(--mw-transition);
-        margin-top: 3px;
-        cursor: pointer;
-        display: block;
-
-        &::after {
-          content: '';
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          width: spacing('2');
-          height: spacing('1');
-          border-left: 2px solid var(--mw-primary-color);
-          border-bottom: 2px solid var(--mw-primary-color);
-          transform: translate(-50%, -60%) rotate(-45deg) scale(0);
-          transform-origin: center;
-          transition: var(--mw-transition);
-        }
-      }
-
-      // Checked state
-      input[type='checkbox']:checked + .mw-checkbox-box {
-        border-color: var(--mw-primary-color);
+        width: $_checkbox-box-default;
+        height: $_checkbox-box-default;
+        margin-top: $_checkbox-box-offset;
 
         &::after {
-          transform: translate(-50%, -60%) rotate(-45deg) scale(1);
+          width: $_check-default-w;
+          height: $_check-default-h;
         }
       }
 
+      // Header plus description stacked next to the box - a list-only
+      // extension, the form element carries a single label
       .mw-checkbox-content {
         display: flex;
         flex-direction: column;
@@ -530,9 +554,14 @@
         gap: spacing('1');
 
         .mw-checkbox-box {
-          width: spacing('3');
-          height: spacing('3');
+          width: $_checkbox-box-compact;
+          height: $_checkbox-box-compact;
           margin-top: spacing('1');
+
+          &::after {
+            width: $_check-compact-w;
+            height: $_check-compact-h;
+          }
         }
 
         .mw-checkbox-content {
@@ -571,9 +600,14 @@
         gap: spacing('3');
 
         .mw-checkbox-box {
-          width: spacing('5');
-          height: spacing('5');
+          width: $_checkbox-box-large;
+          height: $_checkbox-box-large;
           margin-top: spacing('1');
+
+          &::after {
+            width: $_check-large-w;
+            height: $_check-large-h;
+          }
         }
 
         .mw-checkbox-content {
@@ -604,10 +638,9 @@
   }
 }
 
-// Color variants for checkbox lists
+// Color variants for checkbox lists - additive, sits alongside
+// mw-item-list-checkbox
 .mw-item-list-checkbox-secondary {
-  @extend .mw-item-list-checkbox;
-
   > * {
     &:hover {
       background: var(--mw-secondary-background-hover);
@@ -615,7 +648,7 @@
 
     &:active {
       background: var(--mw-secondary-color);
-      color: var(--mw-accent-text-color);
+      color: var(--mw-secondary-accent-text-color);
     }
 
     &.mw-selected {
@@ -630,29 +663,5 @@
   @extend .mw-item-list-checkbox;
   max-height: 300px;
   overflow-y: auto;
-  scrollbar-gutter: stable;
-
-  // Same scrollbar styling as scroll lists
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: var(--mw-text-muted-color);
-    border-radius: 3px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: var(--mw-text-muted-color);
-    border-radius: 3px;
-    opacity: 0.6;
-
-    &:hover {
-      background: var(--mw-primary-color);
-      opacity: 1;
-    }
-  }
-
-  scrollbar-width: thin;
-  scrollbar-color: var(--mw-text-muted-color);
+  @include _list-scrollbar;
 }

package/src/scss/components/_modals.scss

@@ -111,7 +111,7 @@
 
   &:hover {
     background: var(--mw-primary-color-hover);
-    color: var(--mw-accent-text-color);
+    color: var(--mw-primary-accent-text-color);
   }
 }
 

package/src/scss/components/_panels.scss

@@ -52,14 +52,14 @@
   &-primary {
     .mw-panel-header {
       background: var(--mw-primary-color);
-      color: var(--mw-accent-text-color);
+      color: var(--mw-primary-accent-text-color);
     }
   }
 
   &-secondary {
     .mw-panel-header {
       background: var(--mw-secondary-color);
-      color: var(--mw-accent-text-color);
+      color: var(--mw-secondary-accent-text-color);
     }
   }
 

package/src/scss/components/_progress.scss

@@ -65,6 +65,11 @@ $_mw-progress-colors: (
   }
 
   &-fill {
+    // The label sits *inside* the fill, so its ink follows whichever color
+    // variant is on the element - preset to the default fill, re-pointed by
+    // the variants at the bottom of the file
+    --mw-progress-ink: var(--mw-secondary-accent-text-color);
+
     height: 100%;
     background: var(--mw-secondary-color);
     border-radius: radius('sm');
@@ -96,7 +101,7 @@ $_mw-progress-colors: (
       padding-left: spacing('6');
       font-size: font-size('xs');
       font-weight: font-weight('medium');
-      color: var(--mw-accent-text-color);
+      color: var(--mw-progress-ink);
     }
   }
 }
@@ -104,5 +109,6 @@ $_mw-progress-colors: (
 @each $name, $col in $_mw-progress-colors {
   .mw-progress-#{$name} {
     background: #{$col};
+    --mw-progress-ink: var(--mw-#{$name}-accent-text-color);
   }
 }

package/src/scss/components/_segmented.scss

@@ -60,7 +60,7 @@
   &.active {
     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);
   }
 }
 
@@ -70,6 +70,7 @@
   &.active {
     background: var(--mw-secondary-color);
     border-color: var(--mw-secondary-text-color);
+    color: var(--mw-secondary-accent-text-color);
   }
 }
 

package/src/scss/components/_stepper.scss

@@ -49,13 +49,13 @@
     &.mw-active {
       border-color: var(--mw-primary-color);
       background: var(--mw-primary-color);
-      color: var(--mw-accent-text-color);
+      color: var(--mw-primary-accent-text-color);
     }
 
     &.mw-done {
       border-color: var(--mw-success-color);
       background: var(--mw-success-color);
-      color: var(--mw-accent-text-color);
+      color: var(--mw-success-accent-text-color);
     }
   }
 

package/src/scss/components/_tables.scss

@@ -17,7 +17,7 @@
 
   th {
     font-weight: font-weight('medium');
-    color: var(--mw-accent-text-color);
+    color: var(--mw-primary-accent-text-color);
     background: var(--mw-primary-color);
     user-select: none;
   }

package/src/scss/components/_tabs.scss

@@ -146,7 +146,7 @@
       &.mw-active,
       &.active {
         background: var(--mw-primary-color);
-        color: var(--mw-accent-text-color);
+        color: var(--mw-primary-accent-text-color);
       }
     }
   }

package/src/scss/components/_theme-toggle.scss

@@ -29,7 +29,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--mw-accent-text-color);
+    color: var(--mw-secondary-accent-text-color);
     font-size: font-size('md');
   }
 

package/src/scss/components/_timelines.scss

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

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

@@ -69,6 +69,8 @@ $_knob-travel-lg: calc(
       left: $_knob-offset;
       width: $_knob-size;
       height: $_knob-size;
+      // The shared token, not a per-color one: the knob has to read on the
+      // fill *and* on the empty track, so it cannot follow the fill color
       background: var(--mw-accent-text-color);
       border-radius: radius('full');
       transition: transform 0.25s ease;

package/src/scss/layout/_footer.scss

@@ -111,7 +111,7 @@
 
       &:hover {
         background: var(--mw-primary-color);
-        color: var(--mw-accent-text-color);
+        color: var(--mw-primary-accent-text-color);
         transform: translateY(-2px);
         border-color: var(--mw-primary-color);
       }

package/src/scss/layout/_header.scss

@@ -60,7 +60,7 @@
   // Login button styling
   .mw-login-btn {
     background: var(--mw-primary-color);
-    color: var(--mw-accent-text-color);
+    color: var(--mw-primary-accent-text-color);
     border: none;
     border-radius: radius('md');
     font-size: font-size('md');
@@ -124,6 +124,11 @@
       background: var(--mw-secondary-color);
       z-index: z-index('header') + 10;
 
+      // The surface under the burger switches to secondary, so its ink has to
+      // switch with it. Set on the button, so the bar and both pseudo-elements
+      // pick it up.
+      --mw-header-burgerbutton-color: var(--mw-header-burgerbutton-open-color);
+
       &:hover {
         background: var(--mw-secondary-color-hover);
       }

package/src/scss/layout/_section.scss

@@ -73,7 +73,7 @@
 
   &:hover:not(:disabled) {
     background: var(--mw-primary-color);
-    color: var(--mw-accent-text-color);
+    color: var(--mw-primary-accent-text-color);
   }
 
   &:focus-visible {