maverick-wave 3.3.0 → 3.3.2

package/src/scss/components/_avatars.scss

@@ -23,6 +23,8 @@ $_mw-avatar-colors: (
   height: 96px;
   flex-shrink: 0; // Prevents the avatar from shrinking
   flex-grow: 0; // Prevents the avatar from growing
+  // Scales with the avatar size; only takes effect on the initials variant
+  font-size: font-size('3xl');
 
   img {
     width: 100%;
@@ -36,24 +38,29 @@ $_mw-avatar-colors: (
     width: 32px;
     height: 32px;
     border-width: 2px;
+    // Small enough that wide pairs like "MW" still clear the circle
+    font-size: font-size('2xs');
   }
 
   &-sm {
     width: 64px;
     height: 64px;
     border-width: 2px;
+    font-size: font-size('xl');
   }
 
   &-lg {
     width: 144px;
     height: 144px;
     border-width: 5px;
+    font-size: font-size('5xl');
   }
 
   &-xl {
     width: 250px;
     height: 250px;
     border-width: 7px;
+    font-size: font-size('6xl');
   }
 
   // Square
@@ -61,6 +68,21 @@ $_mw-avatar-colors: (
     border-radius: radius('sm');
   }
 
+  // Initials — for users without a picture. Centers its text content and puts
+  // the color on the background, so it stays combinable with the color
+  // variants below, which keep working on the border.
+  &-initials {
+    align-items: center;
+    justify-content: center;
+    background: var(--mw-primary-color);
+    color: var(--mw-accent-text-color);
+    font-weight: font-weight('bold');
+    line-height: 1;
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+    user-select: none;
+  }
+
   // Groups
   &-group {
     display: flex;
@@ -75,7 +97,7 @@ $_mw-avatar-colors: (
       transition: transform 0.3s ease;
 
       &:hover {
-        transform: translateY(-5px);
+        transform: translateY(-3px);
         z-index: z-index('lift');
       }
 
@@ -120,4 +142,9 @@ $_mw-avatar-colors: (
   .mw-avatar-#{$name} {
     border-color: #{$col};
   }
+
+  // On an initials avatar the same variant also tints the surface
+  .mw-avatar-initials.mw-avatar-#{$name} {
+    background: #{$col};
+  }
 }

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-primary-text-color);
+      color: var(--mw-accent-text-color);
       display: flex;
       align-items: center;
       justify-content: center;

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

@@ -12,7 +12,7 @@
   padding: spacing('2');
 
   &:hover {
-    border-color: var(--mw-primary-color-hover);
+    border-color: var(--mw-border-accent);
   }
 
   @include media-down('sm') {
@@ -49,7 +49,7 @@
       [class*='mw-btn-link']
     ) {
     background: var(--mw-primary-color);
-    color: var(--mw-primary-text-color);
+    color: var(--mw-accent-text-color);
 
     &:hover:not(:disabled) {
       background: var(--mw-primary-color-hover);
@@ -63,7 +63,7 @@
       [class*='mw-btn-link']
     ) {
     background: var(--mw-secondary-color);
-    color: var(--mw-primary-text-color);
+    color: var(--mw-accent-text-color);
 
     &:hover:not(:disabled) {
       background: var(--mw-secondary-color-hover);
@@ -82,7 +82,7 @@
 
     &:hover:not(:disabled) {
       background: var(--mw-primary-color);
-      color: var(--mw-primary-text-color);
+      color: var(--mw-accent-text-color);
     }
   }
 }
@@ -100,14 +100,14 @@
 
     &:hover:not(:disabled) {
       background: var(--mw-primary-color);
-      color: var(--mw-primary-text-color);
+      color: var(--mw-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-primary-text-color);
+    color: var(--mw-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-primary-text-color);
+  color: var(--mw-accent-text-color);
   &:hover:not(:disabled) {
     background: var(--mw-primary-color-hover);
   }
@@ -43,7 +43,7 @@
 }
 .mw-btn-secondary {
   background: var(--mw-secondary-color);
-  color: var(--mw-primary-text-color);
+  color: var(--mw-accent-text-color);
   &:hover:not(:disabled) {
     background: var(--mw-secondary-color-hover);
   }
@@ -52,17 +52,40 @@
     border: 1px solid var(--mw-secondary-color);
   }
 }
+// Semantic variants for destructive / confirming actions
+.mw-btn-danger {
+  background: var(--mw-danger-color);
+  color: var(--mw-accent-text-color);
+  &:hover:not(:disabled) {
+    background: var(--mw-danger-color-hover);
+  }
+  &.active:not(:disabled) {
+    background: var(--mw-danger-color-hover);
+    border: 1px solid var(--mw-danger-color);
+  }
+}
+.mw-btn-success {
+  background: var(--mw-success-color);
+  color: var(--mw-accent-text-color);
+  &:hover:not(:disabled) {
+    background: var(--mw-success-color-hover);
+  }
+  &.active:not(:disabled) {
+    background: var(--mw-success-color-hover);
+    border: 1px solid var(--mw-success-color);
+  }
+}
 .mw-btn-outline {
   background: transparent;
   border-color: var(--mw-primary-color);
   color: var(--mw-primary-color);
   &:hover:not(:disabled) {
     background: var(--mw-primary-color);
-    color: var(--mw-primary-text-color);
+    color: var(--mw-accent-text-color);
   }
   &.active:not(:disabled) {
     background: var(--mw-primary-color);
-    color: var(--mw-primary-text-color);
+    color: var(--mw-accent-text-color);
   }
 }
 .mw-btn-link {
@@ -103,7 +126,7 @@
   height: 18px;
   border-radius: radius('full');
   background: var(--mw-gray-color);
-  color: var(--mw-white-color);
+  color: var(--mw-accent-text-color);
   border: none;
   opacity: 0.8;
   padding: 0;
@@ -131,34 +154,34 @@
   &:hover:not(:disabled) {
     opacity: 1;
     background: var(--mw-primary-color);
-    color: var(--mw-white-color);
+    color: var(--mw-accent-text-color);
   }
 }
 
 .mw-btn-mini-primary {
   &:hover:not(:disabled) {
     background: var(--mw-primary-color);
-    color: var(--mw-white-color);
+    color: var(--mw-accent-text-color);
   }
 }
 
 .mw-btn-mini-secondary {
   &:hover:not(:disabled) {
     background: var(--mw-secondary-color);
-    color: var(--mw-white-color);
+    color: var(--mw-accent-text-color);
   }
 }
 
 .mw-btn-mini-danger {
   &:hover:not(:disabled) {
     background: var(--mw-danger-color);
-    color: var(--mw-white-color);
+    color: var(--mw-accent-text-color);
   }
 }
 
 .mw-btn-mini-success {
   &:hover:not(:disabled) {
     background: var(--mw-success-color);
-    color: var(--mw-white-color);
+    color: var(--mw-accent-text-color);
   }
 }

package/src/scss/components/_cards.scss

@@ -26,9 +26,9 @@ $_mw-card-addon-colors: (
   }
 
   &: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);
   }
 
   &-badge {
@@ -37,7 +37,7 @@ $_mw-card-addon-colors: (
     right: spacing('4');
     padding: spacing('1') spacing('4');
     font-size: font-size('xs');
-    color: var(--mw-primary-text-color);
+    color: var(--mw-accent-text-color);
     background: var(--mw-primary-color);
     border-radius: radius('md');
     white-space: nowrap;
@@ -54,7 +54,7 @@ $_mw-card-addon-colors: (
     right: -35px;
     padding: spacing('1') spacing('4');
     font-size: font-size('xs');
-    color: var(--mw-primary-text-color);
+    color: var(--mw-accent-text-color);
     background: var(--mw-primary-color);
     white-space: nowrap;
     width: 220px;
@@ -81,7 +81,7 @@ $_mw-card-addon-colors: (
     overflow: hidden;
     top: 0;
     left: 0;
-    margin-top: spacing('-4');
+    margin-top: -1 * spacing('5');
     flex-shrink: 0;
 
     img {
@@ -239,7 +239,7 @@ $_mw-card-addon-colors: (
       height: 38px;
       border-radius: radius('full');
       background: var(--mw-primary-color);
-      color: var(--mw-primary-text-color);
+      color: var(--mw-accent-text-color);
       display: flex;
       align-items: center;
       justify-content: center;

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

@@ -6,7 +6,7 @@
   justify-content: center;
   background: var(--mw-card-background);
   border-radius: radius('md');
-  border: 3px dashed var(--mw-primary-color-hover);
+  border: 3px dashed var(--mw-border-accent);
   overflow: hidden;
   position: relative;
   transition: var(--mw-transition);
@@ -51,16 +51,16 @@
   }
 
   &:hover {
-    transform: translateY(-5px);
+    transform: translateY(-3px);
     border-style: solid;
 
     .mw-coming-soon-icon {
-      color: var(--mw-primary-text-color);
+      color: var(--mw-accent-text-color);
       transform: rotate(27deg);
     }
 
     .mw-coming-soon-text {
-      color: var(--mw-primary-text-color);
+      color: var(--mw-accent-text-color);
       transform: scale(1.05);
     }
 

package/src/scss/components/_gallery.scss

@@ -69,7 +69,7 @@
     margin-top: spacing('2');
     background: var(--mw-card-background);
     border-radius: radius('md');
-    border: 1px solid var(--mw-primary-color-hover);
+    border: 1px solid var(--mw-border-accent);
   }
 
   &-dots {
@@ -86,7 +86,7 @@
     width: 11px;
     height: 11px;
     border-radius: 50%;
-    background: var(--mw-gray-background);
+    background: var(--mw-gray-color);
     cursor: pointer;
     transition: transform 0.4s ease;
 

package/src/scss/components/_index.scss

@@ -31,3 +31,4 @@
 @forward 'theme-toggle';
 @forward 'tiles';
 @forward 'timelines';
+@forward 'toasts';

package/src/scss/components/_info.scss

@@ -26,13 +26,19 @@ $_mw-info-colors: (
     transform 0.3s ease,
     box-shadow 0.3s ease;
   cursor: default;
+  text-decoration: none;
 
   &:hover {
     transform: translateY(-2px);
     box-shadow: -1px 6px 9px var(--mw-shadow);
   }
 
-  // size variants
+  // Interactive variant
+  &-clickable {
+    cursor: pointer;
+  }
+
+  // Size variants
   &-sm {
     padding: spacing('1') spacing('3');
     font-size: font-size('sm');
@@ -66,6 +72,17 @@ $_mw-info-colors: (
   }
 }
 
+// When the figure is actually interactive it should say so
+a.mw-info,
+button.mw-info {
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 2px solid var(--mw-primary-color);
+    outline-offset: 2px;
+  }
+}
+
 // Info like mini-buttons
 .mw-info-mini {
   display: inline-flex;
@@ -75,7 +92,7 @@ $_mw-info-colors: (
   height: 20px;
   border-radius: radius('full');
   background: var(--mw-gray-color);
-  color: var(--mw-white-color);
+  color: var(--mw-accent-text-color);
   border: none;
   padding: 0;
   line-height: 1;
@@ -138,6 +155,6 @@ $_mw-info-colors: (
 
   .mw-info-mini-#{$name} {
     background: #{$col};
-    color: var(--mw-primary-text-color, #fff);
+    color: var(--mw-accent-text-color);
   }
 }

package/src/scss/components/_lists.scss

@@ -224,8 +224,7 @@
     }
 
     &:hover {
-      background: var(--mw-primary-color-hover);
-      color: var(--mw-primary-text-color);
+      background: var(--mw-primary-background-hover);
       padding-left: spacing('4');
 
       &::before {
@@ -244,7 +243,6 @@
       padding-bottom: spacing('1');
 
       &:hover {
-        color: var(--mw-text-color);
         padding-left: spacing('4');
 
         &::before {
@@ -266,7 +264,7 @@
       font-size: font-size('sm');
 
       &:hover {
-        background: var(--mw-primary-color-hover);
+        background: var(--mw-primary-background-hover);
         padding-left: spacing('4');
         border-left: 3px solid var(--mw-primary-color);
       }
@@ -298,13 +296,13 @@
     }
 
     &:hover {
-      background: var(--mw-primary-color-hover);
-      color: var(--mw-primary-text-color);
+      background: var(--mw-primary-background-hover);
       padding-left: spacing('5');
     }
 
     &:active {
       background: var(--mw-primary-color);
+      color: var(--mw-accent-text-color);
       transform: scale(0.98);
     }
   }
@@ -327,7 +325,7 @@
   }
 
   &::-webkit-scrollbar-track {
-    background: var(--mw-primary-color-hover);
+    background: var(--mw-primary-background);
     border-radius: 3px;
   }
 
@@ -356,12 +354,13 @@
     }
 
     &:hover {
-      background: var(--mw-primary-color-hover);
+      background: var(--mw-primary-background-hover);
       cursor: pointer;
     }
 
     &:active {
       background: var(--mw-primary-color);
+      color: var(--mw-accent-text-color);
     }
   }
 }
@@ -406,11 +405,12 @@
     }
 
     &:hover {
-      background: var(--mw-primary-color-hover);
+      background: var(--mw-primary-background-hover);
     }
 
     &:active {
       background: var(--mw-primary-color);
+      color: var(--mw-accent-text-color);
       transform: scale(0.98);
     }
 
@@ -609,11 +609,12 @@
 
   > * {
     &:hover {
-      background: var(--mw-secondary-color-hover);
+      background: var(--mw-secondary-background-hover);
     }
 
     &:active {
       background: var(--mw-secondary-color);
+      color: var(--mw-accent-text-color);
     }
 
     &.mw-selected {

package/src/scss/components/_modals.scss

@@ -7,7 +7,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: var(--mw-gray-background);
+  background: var(--mw-overlay-background);
   backdrop-filter: blur(2px);
   z-index: z-index('modal')-10;
   display: none;
@@ -31,7 +31,7 @@
   box-shadow: 0 25px 50px var(--mw-shadow);
   max-width: 550px;
   width: 100%;
-  max-height: 75vh;
+  max-height: 85dvh;
   display: flex;
   flex-direction: column;
   z-index: z-index('modal');
@@ -42,22 +42,22 @@
 
   &.mw-modal-sm {
     max-width: 370px;
-    max-height: 70vh;
+    max-height: 80dvh;
   }
   &.mw-modal-lg {
     max-width: 680px;
-    max-height: 80vh;
+    max-height: 90dvh;
   }
   &.mw-modal-xl {
     max-width: 900px;
-    max-height: 85vh;
+    max-height: 92dvh;
   }
 }
 
 // Modal sections
 .mw-modal-header {
   padding: spacing('3') spacing('5');
-  border-bottom: 1px solid var(--mw-primary-color-hover);
+  border-bottom: 1px solid var(--mw-border-accent);
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -72,6 +72,12 @@
   }
 }
 
+// Explicit hook for the heading
+.mw-modal-title {
+  margin: spacing('0');
+  line-height: 1.2;
+}
+
 .mw-modal-body {
   padding: spacing('4') spacing('5');
   overflow-y: auto;
@@ -80,7 +86,7 @@
 
 .mw-modal-footer {
   padding: spacing('3') spacing('5');
-  border-top: 1px solid var(--mw-primary-color-hover);
+  border-top: 1px solid var(--mw-border-accent);
   display: flex;
   gap: spacing('2');
   justify-content: flex-end;
@@ -101,6 +107,7 @@
 
   &:hover {
     background: var(--mw-primary-color-hover);
+    color: var(--mw-accent-text-color);
   }
 }
 

package/src/scss/components/_pagination.scss

@@ -12,17 +12,17 @@
     justify-content: space-between;
     padding: spacing('3');
     background: var(--mw-primary-color);
-    color: var(--mw-primary-text-color);
+    color: var(--mw-accent-text-color);
   }
 
   &-nav {
     background: none;
-    color: var(--mw-primary-text-color);
+    color: var(--mw-accent-text-color);
     cursor: pointer;
     padding: spacing('2') spacing('4');
     margin: spacing('0') spacing('5');
     border-radius: radius('sm');
-    border: 1px solid var(--mw-primary-text-color);
+    border: 1px solid var(--mw-accent-text-color);
     display: flex;
     align-items: center;
     justify-content: center;

package/src/scss/components/_panels.scss

@@ -12,7 +12,7 @@
 
   &-header {
     padding: spacing('4') spacing('5');
-    border-bottom: 1px solid var(--mw-primary-color-hover);
+    border-bottom: 1px solid var(--mw-border-accent);
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -42,7 +42,7 @@
 
   &-footer {
     padding: spacing('4') spacing('5');
-    border-top: 1px solid var(--mw-primary-color-hover);
+    border-top: 1px solid var(--mw-border-accent);
     display: flex;
     justify-content: flex-end;
     gap: spacing('3');
@@ -52,14 +52,14 @@
   &-primary {
     .mw-panel-header {
       background: var(--mw-primary-color);
-      color: var(--mw-primary-text-color);
+      color: var(--mw-accent-text-color);
     }
   }
 
   &-secondary {
     .mw-panel-header {
       background: var(--mw-secondary-color);
-      color: var(--mw-primary-text-color);
+      color: var(--mw-accent-text-color);
     }
   }
 

package/src/scss/components/_progress.scss

@@ -96,7 +96,7 @@ $_mw-progress-colors: (
       padding-left: spacing('6');
       font-size: font-size('xs');
       font-weight: font-weight('medium');
-      color: var(--mw-primary-text-color);
+      color: var(--mw-accent-text-color);
     }
   }
 }

package/src/scss/components/_ratings.scss

@@ -31,7 +31,7 @@
   }
 
   &-icon {
-    color: var(--mw-gray-background);
+    color: var(--mw-gray-color);
     transition: color var(--mw-transition);
     pointer-events: none;
   }

package/src/scss/components/_spinners.scss

@@ -12,7 +12,7 @@ $_size-lg: 7.5rem;
   &-border {
     width: $_size-default;
     height: $_size-default;
-    border: 0.5rem solid var(--mw-gray-background);
+    border: 0.5rem solid var(--mw-border);
     border-radius: radius('full');
     border-top-color: var(--mw-primary-color);
     animation: mw-spin 1.2s linear infinite;
@@ -167,7 +167,7 @@ $_size-lg: 7.5rem;
     left: spacing('0');
     right: spacing('0');
     bottom: spacing('0');
-    background: var(--mw-gray-background);
+    background: var(--mw-overlay-background);
     backdrop-filter: blur(2px);
     display: flex;
     height: 100%;

package/src/scss/components/_stepper.scss

@@ -44,17 +44,18 @@
     font-weight: font-weight('bold');
     transition: var(--mw-transition);
     flex-shrink: 0;
+    user-select: none;
 
     &.mw-active {
       border-color: var(--mw-primary-color);
       background: var(--mw-primary-color);
-      color: var(--mw-primary-text-color);
+      color: var(--mw-accent-text-color);
     }
 
     &.mw-done {
       border-color: var(--mw-success-color);
       background: var(--mw-success-color);
-      color: var(--mw-primary-text-color);
+      color: var(--mw-accent-text-color);
     }
   }