maverick-wave 4.27.0 → 5.0.0

package/src/scss/components/_techstack-bucket.scss

@@ -1,155 +1,156 @@
 @use '../abstracts' as *;
 
-.mw-techstack {
-  display: flex;
-  flex-wrap: wrap;
-  gap: spacing('4');
-
-  // Base item
-  &-item {
-    display: inline-flex;
-    align-items: center;
-    text-decoration: none;
-    background: var(--mw-card-background);
-    border: 1px solid var(--mw-border);
-    border-radius: radius('md');
-    padding: spacing('2');
-    transition: var(--mw-transition-fast);
-    color: var(--mw-text-color);
-    min-width: 50px;
-    min-height: 50px;
-
-    .mw-techstack-logo {
-      width: 32px;
-      height: 32px;
-    }
+@layer mw.components {
+  .mw-techstack {
+    display: flex;
+    flex-wrap: wrap;
+    gap: spacing('4');
+
+    // Base item
+    &-item {
+      display: inline-flex;
+      align-items: center;
+      text-decoration: none;
+      background: var(--mw-card-background);
+      border: 1px solid var(--mw-border);
+      border-radius: radius('md');
+      padding: spacing('2');
+      transition: var(--mw-transition-fast);
+      color: var(--mw-text-color);
+      min-width: 50px;
+      min-height: 50px;
 
-    .mw-techstack-name {
-      font-size: font-size('sm');
-    }
+      .mw-techstack-logo {
+        width: 32px;
+        height: 32px;
+      }
 
-    .mw-techstack-desc {
-      font-size: font-size('xs');
-    }
+      .mw-techstack-name {
+        font-size: font-size('sm');
+      }
+
+      .mw-techstack-desc {
+        font-size: font-size('xs');
+      }
+
+      @include hover {
+        transform: translateY(-2px);
+      }
+
+      &:hover {
+        box-shadow: var(--mw-elevation-3);
+        border-color: var(--mw-primary-text-color);
+
+        .mw-techstack-logo {
+          transform: scale(1.1);
+        }
 
-    @include hover {
-      transform: translateY(-2px);
+        .mw-techstack-name {
+          color: var(--mw-primary-text-color);
+        }
+      }
     }
 
-    &:hover {
-      box-shadow: var(--mw-elevation-3);
-      border-color: var(--mw-primary-text-color);
+    &-item-sm {
+      padding: spacing('1') spacing('2');
+      min-width: 32px;
+      min-height: 32px;
+      border-radius: radius('sm');
 
       .mw-techstack-logo {
-        transform: scale(1.1);
+        width: 18px;
+        height: 18px;
       }
 
-      .mw-techstack-name {
-        color: var(--mw-primary-text-color);
+      .mw-techstack-info {
+        margin-left: spacing('2');
+        margin-right: spacing('1');
       }
-    }
-  }
 
-  // Small variant
-  &-item-sm {
-    padding: spacing('1') spacing('2');
-    min-width: 32px;
-    min-height: 32px;
-    border-radius: radius('sm');
+      .mw-techstack-name {
+        font-size: font-size('xs');
+      }
 
-    .mw-techstack-logo {
-      width: 18px;
-      height: 18px;
+      .mw-techstack-desc {
+        display: none;
+      }
     }
 
-    .mw-techstack-info {
-      margin-left: spacing('2');
-      margin-right: spacing('1');
+    &-logo {
+      object-fit: contain;
+      border-radius: radius('sm');
+      transition: transform var(--mw-duration-fast) var(--mw-ease-out);
+      flex-shrink: 0;
     }
 
-    .mw-techstack-name {
-      font-size: font-size('xs');
+    &-info {
+      display: flex;
+      flex-direction: column;
+      margin-left: spacing('3');
+      margin-right: spacing('2');
+      justify-content: center;
     }
 
-    .mw-techstack-desc {
-      display: none;
+    &-name {
+      font-weight: font-weight('bold');
+      line-height: 1.1;
+      transition: color var(--mw-duration-fast) var(--mw-ease-out);
     }
-  }
 
-  &-logo {
-    object-fit: contain;
-    border-radius: radius('sm');
-    transition: transform var(--mw-duration-fast) var(--mw-ease-out);
-    flex-shrink: 0;
+    &-desc {
+      color: var(--mw-text-muted-color);
+      margin-top: 2px;
+      line-height: 1.1;
+    }
   }
 
-  &-info {
+  // Bucket container
+  .mw-techstack-bucket {
     display: flex;
-    flex-direction: column;
-    margin-left: spacing('3');
-    margin-right: spacing('2');
+    flex-wrap: wrap;
     justify-content: center;
-  }
-
-  &-name {
-    font-weight: font-weight('bold');
-    line-height: 1.1;
-    transition: color var(--mw-duration-fast) var(--mw-ease-out);
-  }
-
-  &-desc {
-    color: var(--mw-text-muted-color);
-    margin-top: 2px;
-    line-height: 1.1;
-  }
-}
+    gap: spacing('1');
+    padding: spacing('3');
+    position: relative;
+    margin-top: spacing('2');
+    border-left: 2px solid var(--mw-dark-border);
+    border-right: 2px solid var(--mw-dark-border);
+    border-bottom: 4px solid var(--mw-dark-border);
+    border-top: 2px solid transparent;
+    border-radius: radius('none') radius('none') radius('xl') radius('xl');
 
-// Bucket container
-.mw-techstack-bucket {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: spacing('1');
-  padding: spacing('3');
-  position: relative;
-  margin-top: spacing('2');
-  border-left: 2px solid var(--mw-dark-border);
-  border-right: 2px solid var(--mw-dark-border);
-  border-bottom: 4px solid var(--mw-dark-border);
-  border-top: 2px solid transparent;
-  border-radius: radius('none') radius('none') radius('xl') radius('xl');
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: -2px;
-    left: -2px;
-    right: -2px;
-    height: 2px;
-    background: linear-gradient(
-      90deg,
-      var(--mw-dark-border) 0%,
-      transparent 25%,
-      transparent 75%,
-      var(--mw-dark-border) 100%
-    );
-  }
+    &::before {
+      content: '';
+      position: absolute;
+      top: -2px;
+      left: -2px;
+      right: -2px;
+      height: 2px;
+      background: linear-gradient(
+        90deg,
+        var(--mw-dark-border) 0%,
+        transparent 25%,
+        transparent 75%,
+        var(--mw-dark-border) 100%
+      );
+    }
 
-  &-narrow {
-    max-width: 14rem;
-    padding: spacing('5') spacing('6');
-    margin-inline: auto;
-  }
+    &-narrow {
+      max-width: 14rem;
+      padding: spacing('5') spacing('6');
+      margin-inline: auto;
+    }
 
-  // Variant dashed - completely closed
-  &-dashed {
-    background: transparent;
-    border: 2px dashed var(--mw-border);
-    border-radius: radius('xl');
-    border-top: 2px dashed var(--mw-border);
+    // Variant dashed - completely closed
+    &-dashed {
+      background: transparent;
+      border: 2px dashed var(--mw-border);
+      border-radius: radius('xl');
+      border-top: 2px dashed var(--mw-border);
 
-    &::before {
-      display: none;
+      &::before {
+        display: none;
+      }
     }
   }
 }

package/src/scss/components/_testimonial.scss

@@ -1,80 +1,82 @@
 @use '../abstracts' as *;
 
-// A voice about the product - a quote card with its source. A figure, because
-// quote and attribution belong together and that is the element that says so:
-//
-// <figure class="mw-testimonial">
-//   <blockquote>...</blockquote>
-//   <figcaption class="mw-testimonial-source">
-//     Name <span class="mw-testimonial-detail">&middot; role or occasion</span>
-//   </figcaption>
-// </figure>
-.mw-testimonial {
-  @include surface;
-  display: flex;
-  flex-direction: column;
-  padding: spacing('5');
-  background: var(--mw-card-background);
-  border: 1px solid var(--mw-border);
-  box-shadow: var(--mw-elevation-2);
+@layer mw.components {
+  // A voice about the product - a quote card with its source. A figure, because
+  // quote and attribution belong together and that is the element that says so:
+  //
+  // <figure class="mw-testimonial">
+  //   <blockquote>...</blockquote>
+  //   <figcaption class="mw-testimonial-source">
+  //     Name <span class="mw-testimonial-detail">&middot; role or occasion</span>
+  //   </figcaption>
+  // </figure>
+  .mw-testimonial {
+    @include surface;
+    display: flex;
+    flex-direction: column;
+    padding: spacing('5');
+    background: var(--mw-card-background);
+    border: 1px solid var(--mw-border);
+    box-shadow: var(--mw-elevation-2);
 
-  // Several of these in a row, each quote on the base blockquote tint, add up
-  // to a solid colored wall nobody reads through. The card already carries the
-  // surface - inside it the quote keeps only the edge and the quotation marks
-  // as its sign.
-  blockquote {
-    background: color-mix(in srgb, var(--mw-secondary-color) 6%, transparent);
-    border-left-color: color-mix(
-      in srgb,
-      var(--mw-secondary-color) 45%,
-      transparent
-    );
-    padding-block: spacing('2');
-    font-size: font-size('base');
-    line-height: 1.6;
+    // Several of these in a row, each quote on the base blockquote tint, add up
+    // to a solid colored wall nobody reads through. The card already carries the
+    // surface - inside it the quote keeps only the edge and the quotation marks
+    // as its sign.
+    blockquote {
+      background: color-mix(in srgb, var(--mw-secondary-color) 6%, transparent);
+      border-left-color: color-mix(
+        in srgb,
+        var(--mw-secondary-color) 45%,
+        transparent
+      );
+      padding-block: spacing('2');
+      font-size: font-size('base');
+      line-height: 1.6;
+    }
   }
-}
 
-// margin-top: auto, so in a grid of equal-height cards every source line sits
-// on its card's bottom edge instead of floating under quotes of random length.
-//
-// A wrapping flex row rather than inline text, so an optional date can sit on
-// the card's right edge: "who" on the left, "when" on the right, and the two
-// do not run into each other. The column gap stands in for the space the
-// inline flow used to leave between name and detail. When the line runs out
-// of room the date drops to a line of its own and stays right-aligned - its
-// auto margin absorbs whatever is left.
-.mw-testimonial-source {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  column-gap: spacing('2');
-  row-gap: spacing('1');
-  margin-top: auto;
-  padding-top: spacing('5');
-  font-size: font-size('sm');
-  font-weight: font-weight('bold');
-  color: var(--mw-primary-text-color);
-}
+  // margin-top: auto, so in a grid of equal-height cards every source line sits
+  // on its card's bottom edge instead of floating under quotes of random length.
+  //
+  // A wrapping flex row rather than inline text, so an optional date can sit on
+  // the card's right edge: "who" on the left, "when" on the right, and the two
+  // do not run into each other. The column gap stands in for the space the
+  // inline flow used to leave between name and detail. When the line runs out
+  // of room the date drops to a line of its own and stays right-aligned - its
+  // auto margin absorbs whatever is left.
+  .mw-testimonial-source {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    column-gap: spacing('2');
+    row-gap: spacing('1');
+    margin-top: auto;
+    padding-top: spacing('5');
+    font-size: font-size('sm');
+    font-weight: font-weight('bold');
+    color: var(--mw-primary-text-color);
+  }
 
-.mw-testimonial-detail {
-  font-weight: font-weight('normal');
-  color: var(--mw-text-muted-color);
-}
+  .mw-testimonial-detail {
+    font-weight: font-weight('normal');
+    color: var(--mw-text-muted-color);
+  }
 
-// When the voice spoke - a <time>, month and year, on the right edge of the
-// source line. Optional on purpose: a dated quote ages, and a wall of voices
-// from three years ago says more about the page than about the product.
-.mw-testimonial-date {
-  margin-left: auto;
-  font-weight: font-weight('normal');
-  color: var(--mw-text-muted-color);
-  white-space: nowrap;
-}
+  // When the voice spoke - a <time>, month and year, on the right edge of the
+  // source line. Optional on purpose: a dated quote ages, and a wall of voices
+  // from three years ago says more about the page than about the product.
+  .mw-testimonial-date {
+    margin-left: auto;
+    font-weight: font-weight('normal');
+    color: var(--mw-text-muted-color);
+    white-space: nowrap;
+  }
 
-// The one voice lifted above the grid - it may speak a size louder.
-.mw-testimonial-featured {
-  blockquote {
-    font-size: font-size('md');
+  // The one voice lifted above the grid - it may speak a size louder.
+  .mw-testimonial-featured {
+    blockquote {
+      font-size: font-size('md');
+    }
   }
 }

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

@@ -1,61 +1,63 @@
 @use 'sass:map';
 @use '../abstracts' as *;
 
-.mw-theme-toggle {
-  position: relative;
-  top: 1px;
-  width: 60px;
-  height: 30px;
-  border-radius: radius('lg');
-  background: var(--mw-dark-footer-background);
-  border: 1px solid var(--mw-header-border);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  transition: var(--mw-transition);
-  margin-right: spacing('5');
-  appearance: none;
-  padding: 0;
-  @include tappable;
-  @include focus-ring;
+@layer mw.components {
+  .mw-theme-toggle {
+    position: relative;
+    top: 1px;
+    width: 60px;
+    height: 30px;
+    border-radius: radius('lg');
+    background: var(--mw-dark-footer-background);
+    border: 1px solid var(--mw-header-border);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    transition: var(--mw-transition);
+    margin-right: spacing('6');
+    appearance: none;
+    padding: 0;
+    @include tappable;
+    @include focus-ring;
 
-  &:active {
-    transform: scale(0.95);
-    transition-duration: var(--mw-duration-instant);
-  }
+    &:active {
+      transform: scale(0.95);
+      transition-duration: var(--mw-duration-instant);
+    }
 
-  @include media-down('lg') {
-    margin-right: spacing('6');
-  }
+    @include media-up('lg') {
+      margin-right: spacing('5');
+    }
 
-  &-slider {
-    position: absolute;
-    left: 3px;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 20px;
-    height: 20px;
-    border-radius: radius('full');
-    background: var(--mw-secondary-color);
-    transition: var(--mw-transition);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--mw-secondary-accent-text-color);
-    font-size: font-size('md');
-  }
+    &-slider {
+      position: absolute;
+      left: 3px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 20px;
+      height: 20px;
+      border-radius: radius('full');
+      background: var(--mw-secondary-color);
+      transition: var(--mw-transition);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--mw-secondary-accent-text-color);
+      font-size: font-size('md');
+    }
 
-  &.mw-active &-slider,
-  &.active &-slider {
-    left: 35px;
-  }
+    &.mw-active &-slider,
+    &.active &-slider {
+      left: 35px;
+    }
 
-  &-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    line-height: 1;
-    font-size: font-size('base');
-    transform: rotate(16deg);
+    &-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
+      font-size: font-size('base');
+      transform: rotate(16deg);
+    }
   }
 }