maverick-wave 4.28.0 → 5.0.0

package/src/scss/components/_gallery.scss

@@ -1,163 +1,161 @@
 @use '../abstracts' as *;
 
-.mw-gallery-container {
-  max-width: 1100px;
-  margin: spacing('1') auto;
-}
-
-.mw-gallery {
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  border-radius: radius('md');
-
-  &-track {
-    display: flex;
-    transition: transform var(--mw-duration-zoom) var(--mw-ease-in-out);
-
-    @media (prefers-reduced-motion: reduce) {
-      transition: none;
-    }
+@layer mw.components {
+  .mw-gallery-container {
+    max-width: 1100px;
+    margin: spacing('1') auto;
   }
 
-  &-slide {
+  .mw-gallery {
+    position: relative;
+    overflow: hidden;
     width: 100%;
-    flex-shrink: 0;
-    aspect-ratio: 16 / 9;
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      display: block;
-    }
-  }
-
-  &-navi {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 52px;
-    height: 108px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: spacing('0');
-    border: none;
     border-radius: radius('md');
-    background: rgb(0 0 0 / 40%);
-    color: $fixed-surface-text;
-    font-size: font-size('xl');
-    line-height: 1;
-    cursor: pointer;
-    z-index: z-index('lift');
-    user-select: none;
-    transition: var(--mw-transition);
-    @include tappable;
-
-    &:active {
-      transform: translateY(-50%) scale(0.9);
-      transition-duration: var(--mw-duration-instant);
-    }
 
-    &::before {
-      content: '';
-      position: absolute;
-      inset: -8px;
-      border-radius: inherit;
+    &-track {
+      display: flex;
+      transition: transform var(--mw-duration-zoom) var(--mw-ease-in-out);
     }
 
-    &:hover {
-      background: rgb(0 0 0 / 85%);
+    &-slide {
+      width: 100%;
+      flex-shrink: 0;
+      aspect-ratio: 16 / 9;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+      }
     }
 
-    @include focus-ring;
+    &-navi {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 52px;
+      height: 108px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: spacing('0');
+      border: none;
+      border-radius: radius('md');
+      background: rgb(0 0 0 / 40%);
+      color: $fixed-surface-text;
+      font-size: font-size('xl');
+      line-height: 1;
+      cursor: pointer;
+      z-index: z-index('lift');
+      user-select: none;
+      transition: var(--mw-transition);
+      @include tappable;
+
+      &:active {
+        transform: translateY(-50%) scale(0.9);
+        transition-duration: var(--mw-duration-instant);
+      }
 
-    &-prev {
-      left: spacing('4');
-    }
+      &::before {
+        content: '';
+        position: absolute;
+        inset: -8px;
+        border-radius: inherit;
+      }
 
-    &-next {
-      right: spacing('4');
-    }
-  }
+      &:hover {
+        background: rgb(0 0 0 / 85%);
+      }
 
-  &-desc {
-    text-align: left;
-    padding: spacing('2') spacing('3');
-    margin-top: spacing('2');
-    background: var(--mw-card-background);
-    border-radius: radius('md');
-    border: 1px solid var(--mw-border-accent);
-  }
+      @include focus-ring;
 
-  &-dots {
-    text-align: center;
-    margin-top: spacing('5');
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: spacing('4');
-  }
+      &-prev {
+        left: spacing('4');
+      }
 
-  &-dot {
-    display: inline-block;
-    width: 11px;
-    height: 11px;
-    padding: 0;
-    border: 0;
-    appearance: none;
-    border-radius: radius('full');
-    background: var(--mw-gray-color);
-    cursor: pointer;
-    transition: var(--mw-transition-fast);
-
-    @include tappable;
-    @include focus-ring;
-
-    &.mw-active {
-      transform: scale(1.5);
-      background: var(--mw-primary-color);
+      &-next {
+        right: spacing('4');
+      }
     }
-  }
-}
 
-@include media-down('md') {
-  .mw-gallery {
     &-desc {
-      font-size: font-size('sm');
+      text-align: left;
+      padding: spacing('2') spacing('3');
+      margin-top: spacing('2');
+      background: var(--mw-card-background);
+      border-radius: radius('md');
+      border: 1px solid var(--mw-border-accent);
+    }
+
+    &-dots {
+      text-align: center;
+      margin-top: spacing('5');
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: spacing('4');
     }
+
     &-dot {
-      width: 10px;
-      height: 10px;
+      display: inline-block;
+      width: 11px;
+      height: 11px;
+      padding: 0;
+      border: 0;
+      appearance: none;
+      border-radius: radius('full');
+      background: var(--mw-gray-color);
+      cursor: pointer;
+      transition: var(--mw-transition-fast);
+
+      @include tappable;
+      @include focus-ring;
+
       &.mw-active {
-        transform: scale(1.4);
+        transform: scale(1.5);
+        background: var(--mw-primary-color);
       }
     }
   }
-}
 
-@include media-down('sm') {
-  .mw-gallery {
-    &-slide {
-      aspect-ratio: 4 / 3;
-    }
-    &-navi {
-      width: 46px;
-      height: 88px;
-    }
-    &-desc {
-      font-size: font-size('xs');
-    }
-    &-dots {
-      gap: spacing('2');
-      margin-top: spacing('4');
+  @include media-down('md') {
+    .mw-gallery {
+      &-desc {
+        font-size: font-size('sm');
+      }
+      &-dot {
+        width: 10px;
+        height: 10px;
+        &.mw-active {
+          transform: scale(1.4);
+        }
+      }
     }
-    &-dot {
-      width: 9px;
-      height: 9px;
-      &.mw-active {
-        transform: scale(1.3);
+  }
+
+  @include media-down('sm') {
+    .mw-gallery {
+      &-slide {
+        aspect-ratio: 4 / 3;
+      }
+      &-navi {
+        width: 46px;
+        height: 88px;
+      }
+      &-desc {
+        font-size: font-size('xs');
+      }
+      &-dots {
+        gap: spacing('2');
+        margin-top: spacing('4');
+      }
+      &-dot {
+        width: 9px;
+        height: 9px;
+        &.mw-active {
+          transform: scale(1.3);
+        }
       }
     }
   }

package/src/scss/components/_info.scss

@@ -1,202 +1,186 @@
 @use '../abstracts' as *;
 
-$_mw-info-colors: (
-  primary: var(--mw-primary-color),
-  secondary: var(--mw-secondary-color),
-  info: var(--mw-info-color),
-  success: var(--mw-success-color),
-  warning: var(--mw-warning-color),
-  danger: var(--mw-danger-color),
-);
-
-.mw-info {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: spacing('3') spacing('5');
-  margin: spacing('1');
-  font-size: font-size('base');
-  font-weight: font-weight('medium');
-  color: var(--mw-text-color);
-  background: var(--mw-card-background);
-  border: 1px solid var(--mw-border);
-  border-radius: radius('md');
-  transition:
-    transform var(--mw-duration-base) var(--mw-ease-out),
-    box-shadow var(--mw-duration-base) var(--mw-ease-out);
-  cursor: default;
-  text-decoration: none;
-
-  &:hover {
-    box-shadow: var(--mw-elevation-3);
-  }
-
-  @include hover {
-    transform: translateY(-2px);
-  }
-
-  // Interactive variant
-  &-clickable {
-    cursor: pointer;
-    @include tappable;
-
-    &:active {
-      transform: scale(0.98);
-      transition-duration: var(--mw-duration-instant);
-    }
-  }
-
-  // Size variants
-  &-sm {
-    padding: spacing('1') spacing('3');
-    font-size: font-size('sm');
-    font-weight: font-weight('normal');
-  }
-  &-lg {
-    padding: spacing('4') spacing('6');
-    font-size: font-size('lg');
-    font-weight: font-weight('medium');
-  }
-  &-xl {
-    padding: spacing('5') spacing('8');
-    font-size: font-size('xl');
+@layer mw.components {
+  .mw-info {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: spacing('3') spacing('5');
+    margin: spacing('1');
+    font-size: font-size('base');
     font-weight: font-weight('medium');
-  }
-
-  // Block variant: the same framed surface, carrying a paragraph instead of a
-  // value. The base is built for a short figure - it centres its content in a
-  // narrow column, sets it in medium weight and lifts on hover, which turns
-  // running text into a ragged stack that twitches under the pointer. This
-  // reads as a note instead: ranged left up to a measure, body weight, body
-  // leading, and it stays put.
-  //
-  //   <div class="mw-info mw-info-primary mw-info-block">
-  //     <strong>Why greyscale?</strong>
-  //     <span>Because the frame is not the stage ...</span>
-  //   </div>
-  &-block {
-    display: flex;
-    align-items: flex-start;
-    width: 100%;
-    max-width: 68ch;
-    margin-inline: auto;
-    padding: spacing('6') spacing('7');
-    font-weight: font-weight('normal');
-    line-height: 1.7;
-    text-align: left;
-    text-wrap: pretty;
+    color: var(--mw-text-color);
+    background: var(--mw-card-background);
+    border: 1px solid var(--mw-border);
+    border-radius: radius('md');
+    transition:
+      transform var(--mw-duration-base) var(--mw-ease-out),
+      box-shadow var(--mw-duration-base) var(--mw-ease-out);
+    cursor: default;
+    text-decoration: none;
 
     &:hover {
-      box-shadow: none;
+      box-shadow: var(--mw-elevation-3);
     }
 
     @include hover {
-      transform: none;
+      transform: translateY(-2px);
     }
 
-    strong {
-      margin-bottom: spacing('2');
-    }
-  }
+    // Interactive variant
+    &-clickable {
+      cursor: pointer;
+      @include tappable;
 
-  // counter variant: big number + small label
-  &-counter {
-    min-width: spacing('12');
-    .mw-info-value {
-      font-size: font-size('4xl');
-      font-weight: font-weight('bold');
-      line-height: 1.4;
+      &:active {
+        transform: scale(0.98);
+        transition-duration: var(--mw-duration-instant);
+      }
     }
-    .mw-info-label {
+
+    &-sm {
+      padding: spacing('1') spacing('3');
       font-size: font-size('sm');
+      font-weight: font-weight('normal');
+    }
+    &-lg {
+      padding: spacing('4') spacing('6');
+      font-size: font-size('lg');
+      font-weight: font-weight('medium');
+    }
+    &-xl {
+      padding: spacing('5') spacing('8');
+      font-size: font-size('xl');
       font-weight: font-weight('medium');
-      opacity: 0.7;
-      text-align: center;
     }
-  }
-}
 
-// When the figure is actually interactive it should say so
-a.mw-info,
-button.mw-info {
-  cursor: pointer;
+    // The same surface carrying a paragraph instead of a figure. The base centres
+    // a short value and lifts on hover, which turns running text into a ragged
+    // stack that twitches under the pointer - this stays put and reads as a note.
+    &-block {
+      display: flex;
+      align-items: flex-start;
+      width: 100%;
+      max-width: 68ch;
+      margin-inline: auto;
+      padding: spacing('6') spacing('7');
+      font-weight: font-weight('normal');
+      line-height: 1.7;
+      text-align: left;
+      text-wrap: pretty;
+
+      &:hover {
+        box-shadow: none;
+      }
+
+      @include hover {
+        transform: none;
+      }
+
+      strong {
+        margin-bottom: spacing('2');
+      }
+    }
 
-  @include focus-ring;
-}
+    // counter variant: big number + small label
+    &-counter {
+      min-width: spacing('12');
+      .mw-info-value {
+        font-size: font-size('4xl');
+        font-weight: font-weight('bold');
+        line-height: 1.4;
+      }
+      .mw-info-label {
+        font-size: font-size('sm');
+        font-weight: font-weight('medium');
+        opacity: 0.7;
+        text-align: center;
+      }
+    }
+  }
+
+  // When the figure is actually interactive it should say so
+  a.mw-info,
+  button.mw-info {
+    cursor: pointer;
 
-// Info like mini-buttons
-.mw-info-mini {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  border-radius: radius('full');
-  background: var(--mw-gray-color);
-  color: $fixed-surface-text;
-  border: none;
-  padding: 0;
-  line-height: 1;
-  font-weight: bold;
-  cursor: default;
-  box-sizing: border-box;
-
-  i,
-  fa-icon,
-  svg,
-  [class*='fa-'],
-  [class*='fas-'] {
-    font-size: 0.7rem;
+    @include focus-ring;
   }
 
-  &-sm {
-    width: 16px;
-    height: 16px;
+  // Info like mini-buttons
+  .mw-info-mini {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border-radius: radius('full');
+    background: var(--mw-gray-color);
+    color: $fixed-surface-text;
+    border: none;
+    padding: 0;
+    line-height: 1;
+    font-weight: bold;
+    cursor: default;
+    box-sizing: border-box;
+
     i,
     fa-icon,
     svg,
     [class*='fa-'],
     [class*='fas-'] {
-      font-size: 0.55rem;
+      font-size: 0.7rem;
     }
-  }
 
-  &-lg {
-    width: 24px;
-    height: 24px;
-    i,
-    fa-icon,
-    svg,
-    [class*='fa-'],
-    [class*='fas-'] {
-      font-size: 0.8rem;
+    &-sm {
+      width: 16px;
+      height: 16px;
+      i,
+      fa-icon,
+      svg,
+      [class*='fa-'],
+      [class*='fas-'] {
+        font-size: 0.55rem;
+      }
     }
-  }
 
-  &-xl {
-    width: 32px;
-    height: 32px;
-    i,
-    fa-icon,
-    svg,
-    [class*='fa-'],
-    [class*='fas-'] {
-      font-size: 1rem;
+    &-lg {
+      width: 24px;
+      height: 24px;
+      i,
+      fa-icon,
+      svg,
+      [class*='fa-'],
+      [class*='fas-'] {
+        font-size: 0.8rem;
+      }
     }
-  }
-}
 
-// Generate color modifiers
-@each $name, $col in $_mw-info-colors {
-  .mw-info-#{$name} {
-    background: var(--mw-#{$name}-info-background);
-    border-color: var(--mw-#{$name}-text-color);
-    border-left: 6px solid var(--mw-#{$name}-text-color);
+    &-xl {
+      width: 32px;
+      height: 32px;
+      i,
+      fa-icon,
+      svg,
+      [class*='fa-'],
+      [class*='fas-'] {
+        font-size: 1rem;
+      }
+    }
   }
 
-  .mw-info-mini-#{$name} {
-    background: #{$col};
-    color: var(--mw-#{$name}-accent-text-color);
+  // Generate color modifiers
+  @each $name, $col in $semantic-colors {
+    .mw-info-#{$name} {
+      background: var(--mw-#{$name}-info-background);
+      border-color: var(--mw-#{$name}-text-color);
+      border-left: 6px solid var(--mw-#{$name}-text-color);
+    }
+
+    .mw-info-mini-#{$name} {
+      background: #{$col};
+      color: var(--mw-#{$name}-accent-text-color);
+    }
   }
 }