maverick-wave 4.28.0 → 5.0.0

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

@@ -1,177 +1,164 @@
+@use 'sass:map';
 @use '../abstracts' as *;
 
-$_mw-toggle-colors: (
-  primary: var(--mw-primary-color),
-  secondary: var(--mw-secondary-color),
-  success: var(--mw-success-color),
-  warning: var(--mw-warning-color),
-  danger: var(--mw-danger-color),
-);
-
-// Track dimensions
-$_track-w: 42px;
-$_track-h: 22px;
-$_knob-size: 16px;
-$_knob-offset: 3px;
-$_knob-travel: calc(#{$_track-w} - #{$_knob-size} - #{$_knob-offset * 2});
-
-$_track-w-sm: 34px;
-$_track-h-sm: 18px;
-$_knob-size-sm: 12px;
-$_knob-travel-sm: calc(
-  #{$_track-w-sm} - #{$_knob-size-sm} - #{$_knob-offset * 2}
-);
-
-$_track-w-lg: 56px;
-$_track-h-lg: 30px;
-$_knob-size-lg: 22px;
-$_knob-offset-lg: 4px;
-$_knob-travel-lg: calc(
-  #{$_track-w-lg} - #{$_knob-size-lg} - #{$_knob-offset-lg * 2}
-);
-
-.mw-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: spacing('2');
-  min-height: 1.5rem;
-  cursor: pointer;
-  user-select: none;
-  position: relative;
-
-  // Hide native checkbox
-  input[type='checkbox'] {
-    position: absolute;
-    opacity: 0;
-    width: 0;
-    height: 0;
-    margin: spacing('0');
-  }
-
-  // The switch track
-  .mw-toggle-track {
-    --toggle-fill: var(--mw-primary-color);
-
+@layer mw.forms {
+  $_track-w: 42px;
+  $_track-h: 22px;
+  $_knob-size: 16px;
+  $_knob-offset: 3px;
+  $_knob-travel: calc(#{$_track-w} - #{$_knob-size} - #{$_knob-offset * 2});
+
+  $_track-w-sm: 34px;
+  $_track-h-sm: 18px;
+  $_knob-size-sm: 12px;
+  $_knob-travel-sm: calc(
+    #{$_track-w-sm} - #{$_knob-size-sm} - #{$_knob-offset * 2}
+  );
+
+  $_track-w-lg: 56px;
+  $_track-h-lg: 30px;
+  $_knob-size-lg: 22px;
+  $_knob-offset-lg: 4px;
+  $_knob-travel-lg: calc(
+    #{$_track-w-lg} - #{$_knob-size-lg} - #{$_knob-offset-lg * 2}
+  );
+
+  .mw-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: spacing('2');
+    min-height: 1.5rem;
+    cursor: pointer;
+    user-select: none;
     position: relative;
-    width: $_track-w;
-    height: $_track-h;
-    background: var(--mw-border);
-    border-radius: radius('lg');
-    transition:
-      background var(--mw-duration-base) var(--mw-ease-out),
-      box-shadow var(--mw-duration-base) var(--mw-ease-out);
-    flex-shrink: 0;
-
-    // The sliding knob
-    &::after {
-      content: '';
+
+    input[type='checkbox'] {
       position: absolute;
-      top: $_knob-offset;
-      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 var(--mw-duration-base) var(--mw-ease-out);
-      box-shadow: var(--mw-elevation-1);
+      opacity: 0;
+      width: 0;
+      height: 0;
+      margin: spacing('0');
     }
-  }
 
-  input[type='checkbox']:checked + .mw-toggle-track {
-    background: var(--toggle-fill);
+    .mw-toggle-track {
+      --toggle-fill: var(--mw-primary-color);
+
+      position: relative;
+      width: $_track-w;
+      height: $_track-h;
+      background: var(--mw-border);
+      border-radius: radius('lg');
+      transition:
+        background var(--mw-duration-base) var(--mw-ease-out),
+        box-shadow var(--mw-duration-base) var(--mw-ease-out);
+      flex-shrink: 0;
 
-    &::after {
-      transform: translateX($_knob-travel);
+      &::after {
+        content: '';
+        position: absolute;
+        top: $_knob-offset;
+        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 var(--mw-duration-base) var(--mw-ease-out);
+        box-shadow: var(--mw-elevation-1);
+      }
     }
-  }
 
-  input[type='checkbox']:focus-visible + .mw-toggle-track {
-    @include focus-halo;
-  }
-
-  .mw-toggle-label {
-    font-size: font-size('base');
-    color: var(--mw-text-color);
-    line-height: 1.3;
-  }
-
-  // Size variants
-  &-sm {
-    .mw-toggle-track {
-      width: $_track-w-sm;
-      height: $_track-h-sm;
+    input[type='checkbox']:checked + .mw-toggle-track {
+      background: var(--toggle-fill);
 
       &::after {
-        width: $_knob-size-sm;
-        height: $_knob-size-sm;
+        transform: translateX($_knob-travel);
       }
     }
 
-    input[type='checkbox']:checked + .mw-toggle-track::after {
-      transform: translateX($_knob-travel-sm);
+    input[type='checkbox']:focus-visible + .mw-toggle-track {
+      @include focus-halo;
     }
 
     .mw-toggle-label {
-      font-size: font-size('sm');
+      font-size: font-size('base');
+      color: var(--mw-text-color);
+      line-height: 1.3;
     }
-  }
 
-  &-lg {
-    .mw-toggle-track {
-      width: $_track-w-lg;
-      height: $_track-h-lg;
+    &-sm {
+      .mw-toggle-track {
+        width: $_track-w-sm;
+        height: $_track-h-sm;
 
-      &::after {
-        top: $_knob-offset-lg;
-        left: $_knob-offset-lg;
-        width: $_knob-size-lg;
-        height: $_knob-size-lg;
+        &::after {
+          width: $_knob-size-sm;
+          height: $_knob-size-sm;
+        }
       }
-    }
 
-    input[type='checkbox']:checked + .mw-toggle-track::after {
-      transform: translateX($_knob-travel-lg);
-    }
+      input[type='checkbox']:checked + .mw-toggle-track::after {
+        transform: translateX($_knob-travel-sm);
+      }
 
-    .mw-toggle-label {
-      font-size: font-size('md');
+      .mw-toggle-label {
+        font-size: font-size('sm');
+      }
     }
-  }
 
-  // Color variants
-  @each $name, $col in $_mw-toggle-colors {
-    &-#{$name} .mw-toggle-track {
-      --toggle-fill: #{$col};
+    &-lg {
+      .mw-toggle-track {
+        width: $_track-w-lg;
+        height: $_track-h-lg;
+
+        &::after {
+          top: $_knob-offset-lg;
+          left: $_knob-offset-lg;
+          width: $_knob-size-lg;
+          height: $_knob-size-lg;
+        }
+      }
+
+      input[type='checkbox']:checked + .mw-toggle-track::after {
+        transform: translateX($_knob-travel-lg);
+      }
+
+      .mw-toggle-label {
+        font-size: font-size('md');
+      }
     }
-  }
 
-  // Disabled
-  &-disabled {
-    cursor: not-allowed;
-    opacity: 0.45;
+    @each $name, $col in map.remove($semantic-colors, 'info') {
+      &-#{$name} .mw-toggle-track {
+        --toggle-fill: #{$col};
+      }
+    }
 
-    input[type='checkbox'] {
+    &-disabled {
       cursor: not-allowed;
+      opacity: 0.45;
+
+      input[type='checkbox'] {
+        cursor: not-allowed;
+      }
     }
   }
-}
-
-// Group layout
-.mw-toggle-group {
-  display: flex;
-  flex-direction: column;
-  gap: spacing('3');
 
-  &-inline {
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: spacing('2') spacing('6');
+  .mw-toggle-group {
+    display: flex;
+    flex-direction: column;
+    gap: spacing('3');
 
-    @include media-down('sm') {
+    &-inline {
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: center;
       gap: spacing('2') spacing('4');
+
+      @include media-up('sm') {
+        gap: spacing('2') spacing('6');
+      }
     }
   }
 }

package/src/scss/layout/_footer.scss

@@ -1,220 +1,221 @@
 @use 'sass:map';
 @use '../abstracts' as *;
 
-.mw-footer {
-  background: var(--mw-footer-background);
-  padding: spacing('7') spacing('0');
-  border-top: 1px solid var(--mw-border-accent);
-
-  &-top {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: spacing('6');
-    margin-bottom: spacing('6');
-
-    @include media-down('lg') {
-      grid-template-columns: repeat(2, 1fr);
-    }
+@layer mw.layout {
+  .mw-footer {
+    background: var(--mw-footer-background);
+    padding: spacing('7') spacing('0');
+    border-top: 1px solid var(--mw-border-accent);
 
-    @include media-down('sm') {
+    &-top {
+      display: grid;
       grid-template-columns: 1fr;
-    }
-  }
-
-  &-column {
-    h3 {
-      font-size: font-size('lg');
-      margin-bottom: spacing('4');
-      color: var(--mw-primary-text-color);
-    }
-
-    p {
-      color: var(--mw-text-muted-color);
-      margin-bottom: spacing('3');
-    }
-
-    ul {
-      padding: spacing('0');
-      margin: spacing('0');
-
-      li {
-        margin-bottom: spacing('2');
-
-        a {
-          display: inline-block;
-          position: relative;
-          color: var(--mw-text-muted-color);
-          text-decoration: none;
-          padding-bottom: 2px;
-
-          // subtle default underline via box‐shadow
-          &::after {
-            content: '';
-            position: absolute;
-            left: 0;
-            bottom: 1px;
-            width: 100%;
-            height: 1px;
-            background: currentColor;
-            opacity: 0.4;
-            transform: scaleX(1);
-            transform-origin: left;
-            transition:
-              transform var(--mw-duration-fast) var(--mw-ease-out),
-              opacity var(--mw-duration-fast) var(--mw-ease-out);
-          }
+      gap: spacing('6');
+      margin-bottom: spacing('6');
 
-          &:hover {
-            color: var(--mw-primary-text-color);
-
-            &::after {
-              opacity: 1;
-              height: 2px;
-              transform: scaleX(1.1);
-            }
-          }
-        }
+      @include media-up('sm') {
+        grid-template-columns: repeat(2, 1fr);
       }
-    }
-  }
 
-  .mw-social-links {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-    column-gap: spacing('8');
-    row-gap: spacing('4');
-    margin: spacing('6') auto;
-
-    // Modifier for more elements
-    &.mod-wrap {
-      width: 510px;
-      max-width: 100%;
+      @include media-up('lg') {
+        grid-template-columns: repeat(4, 1fr);
+      }
     }
 
-    a {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 48px;
-      height: 48px;
-      border-radius: radius('full');
-      background: var(--mw-card-background);
-      color: var(--mw-text-color);
-      font-size: font-size('xl');
-      transition: var(--mw-transition);
-      border: 1px solid var(--mw-border-accent);
-      box-shadow: var(--mw-elevation-3);
-      text-decoration: none;
-
-      &:hover {
-        background: var(--mw-primary-color);
-        color: var(--mw-primary-accent-text-color);
-        border-color: var(--mw-primary-color);
+    &-column {
+      h3 {
+        font-size: font-size('lg');
+        margin-bottom: spacing('4');
+        color: var(--mw-primary-text-color);
       }
 
-      @include hover {
-        transform: translateY(-2px);
+      p {
+        color: var(--mw-text-muted-color);
+        margin-bottom: spacing('3');
       }
 
-      &:active {
-        transform: scale(0.92);
-        transition-duration: var(--mw-duration-instant);
-      }
-    }
-  }
+      ul {
+        padding: spacing('0');
+        margin: spacing('0');
 
-  .mw-disclaimer {
-    text-align: center;
-    color: var(--mw-text-muted-color);
-    font-size: font-size('sm');
-    width: min(85%, 700px);
-    margin: spacing('0') auto spacing('3') auto;
-    line-height: 1.4;
-  }
+        li {
+          margin-bottom: spacing('2');
 
-  .mw-copyright {
-    text-align: center;
-    color: var(--mw-text-muted-color);
-    font-size: font-size('sm');
-    padding-top: spacing('4');
-    margin: spacing('7') auto spacing('1') auto;
-    width: 100%;
-    border-top: 1px solid var(--mw-border-accent);
-  }
+          a {
+            display: inline-block;
+            position: relative;
+            color: var(--mw-text-muted-color);
+            text-decoration: none;
+            padding-bottom: 2px;
 
-  .mw-last-updated {
-    text-align: center;
-    color: var(--mw-text-muted-color);
-    font-size: font-size('xs');
-    padding-top: spacing('0');
-    margin: spacing('1') auto;
-  }
+            // subtle default underline via box‐shadow
+            &::after {
+              content: '';
+              position: absolute;
+              left: 0;
+              bottom: 1px;
+              width: 100%;
+              height: 1px;
+              background: currentColor;
+              opacity: 0.4;
+              transform: scaleX(1);
+              transform-origin: left;
+              transition:
+                transform var(--mw-duration-fast) var(--mw-ease-out),
+                opacity var(--mw-duration-fast) var(--mw-ease-out);
+            }
 
-  @include media-down('lg') {
-    .mw-social-links {
-      &.mod-wrap {
-        width: 420px;
+            &:hover {
+              color: var(--mw-primary-text-color);
+
+              &::after {
+                opacity: 1;
+                height: 2px;
+                transform: scaleX(1.1);
+              }
+            }
+          }
+        }
       }
     }
-  }
 
-  @include media-down('md') {
     .mw-social-links {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      align-items: center;
       column-gap: spacing('6');
       row-gap: spacing('3');
+      margin: spacing('6') auto;
 
       &.mod-wrap {
         width: 330px;
+        max-width: 100%;
       }
 
       a {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         width: 40px;
         height: 40px;
+        border-radius: radius('full');
+        background: var(--mw-card-background);
+        color: var(--mw-text-color);
         font-size: font-size('md');
-      }
-    }
-  }
+        transition: var(--mw-transition);
+        border: 1px solid var(--mw-border-accent);
+        box-shadow: var(--mw-elevation-3);
+        text-decoration: none;
+
+        &:hover {
+          background: var(--mw-primary-color);
+          color: var(--mw-primary-accent-text-color);
+          border-color: var(--mw-primary-color);
+        }
 
-  @include media-down('sm') {
-    &-column {
-      h3 {
-        font-size: font-size('md');
-        margin-bottom: spacing('3');
-      }
+        @include hover {
+          transform: translateY(-2px);
+        }
 
-      p {
-        margin-bottom: spacing('2');
+        &:active {
+          transform: scale(0.92);
+          transition-duration: var(--mw-duration-instant);
+        }
       }
     }
 
-    .mw-social-links {
-      gap: spacing('3');
-
-      &.mod-wrap {
-        column-gap: spacing('6');
-        row-gap: spacing('3');
-        max-width: 100%;
-        padding: spacing('0') spacing('4');
-      }
+    .mw-disclaimer {
+      text-align: center;
+      color: var(--mw-text-muted-color);
+      font-size: font-size('sm');
+      width: min(85%, 700px);
+      margin: spacing('0') auto spacing('3') auto;
+      line-height: 1.4;
     }
 
-    // A second 15% inset inside a container that already keeps a gutter only
-    // narrows the line to no purpose
-    .mw-disclaimer {
+    .mw-copyright {
+      text-align: center;
+      color: var(--mw-text-muted-color);
+      font-size: font-size('sm');
+      padding-top: spacing('4');
+      margin: spacing('7') auto spacing('1') auto;
       width: 100%;
-      font-size: font-size('xs');
+      border-top: 1px solid var(--mw-border-accent);
     }
 
-    .mw-copyright {
-      margin-top: spacing('5');
+    .mw-last-updated {
+      text-align: center;
+      color: var(--mw-text-muted-color);
       font-size: font-size('xs');
+      padding-top: spacing('0');
+      margin: spacing('1') auto;
     }
 
-    .mw-last-updated {
-      font-size: font-size('2xs');
+    @include media-up('md') {
+      .mw-social-links {
+        column-gap: spacing('8');
+        row-gap: spacing('4');
+
+        &.mod-wrap {
+          width: 420px;
+        }
+
+        a {
+          width: 48px;
+          height: 48px;
+          font-size: font-size('xl');
+        }
+      }
+    }
+
+    @include media-up('lg') {
+      .mw-social-links {
+        &.mod-wrap {
+          width: 510px;
+        }
+      }
+    }
+
+    @include media-down('sm') {
+      &-column {
+        h3 {
+          font-size: font-size('md');
+          margin-bottom: spacing('3');
+        }
+
+        p {
+          margin-bottom: spacing('2');
+        }
+      }
+
+      .mw-social-links {
+        gap: spacing('3');
+
+        &.mod-wrap {
+          column-gap: spacing('6');
+          row-gap: spacing('3');
+          max-width: 100%;
+          padding: spacing('0') spacing('4');
+        }
+      }
+
+      // A second 15% inset inside a container that already keeps a gutter only
+      // narrows the line to no purpose
+      .mw-disclaimer {
+        width: 100%;
+        font-size: font-size('xs');
+      }
+
+      .mw-copyright {
+        margin-top: spacing('5');
+        font-size: font-size('xs');
+      }
+
+      .mw-last-updated {
+        font-size: font-size('2xs');
+      }
     }
   }
 }