maverick-wave 4.27.0 → 5.0.0

package/src/scss/base/_typography.scss

@@ -1,190 +1,192 @@
 @use 'sass:meta';
 @use '../abstracts' as *;
 
-:root {
-  --mw-font-family-base: #{meta.inspect($font-family-base)};
-  --mw-font-family-heading: #{meta.inspect($font-family-heading)};
-  --mw-font-family-mono: #{meta.inspect($font-family-mono)};
-}
-
-// Base font settings
-body {
-  font-family: var(--mw-font-family-base);
-  line-height: 1.5;
-  color: var(--mw-text-color);
-}
-
-// Headings
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: var(--mw-font-family-heading);
-  line-height: 1.2;
-  margin-bottom: spacing('4');
-  font-weight: font-weight('bold');
-  text-wrap: balance;
-  overflow-wrap: break-word;
-}
+@layer mw.base {
+  :root {
+    --mw-font-family-base: #{meta.inspect($font-family-base)};
+    --mw-font-family-heading: #{meta.inspect($font-family-heading)};
+    --mw-font-family-mono: #{meta.inspect($font-family-mono)};
+  }
 
-// Tracking
-h1 {
-  letter-spacing: -0.025em;
-}
+  // Base font settings
+  body {
+    font-family: var(--mw-font-family-base);
+    line-height: 1.5;
+    color: var(--mw-text-color);
+  }
 
-h2 {
-  letter-spacing: -0.02em;
-}
+  // Headings
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--mw-font-family-heading);
+    line-height: 1.2;
+    margin-bottom: spacing('4');
+    font-weight: font-weight('bold');
+    text-wrap: balance;
+    overflow-wrap: break-word;
+  }
 
-h3,
-h4 {
-  letter-spacing: -0.01em;
-}
+  // Tracking
+  h1 {
+    letter-spacing: -0.025em;
+  }
 
-// Two steps, not one. With the single jump at 576px, everything between there
-// and a tablet kept the full desktop headline - 3rem of h1 across a 690px
-// column is a third of the screen before the first line of copy.
-h1 {
-  font-size: font-size('5xl');
+  h2 {
+    letter-spacing: -0.02em;
+  }
 
-  @include media-down('md') {
-    font-size: font-size('4xl');
+  h3,
+  h4 {
+    letter-spacing: -0.01em;
   }
 
-  @include media-down('sm') {
+  // Two steps, not one. With the single jump at 576px, everything between there
+  // and a tablet kept the full desktop headline - 3rem of h1 across a 690px
+  // column is a third of the screen before the first line of copy.
+  h1 {
     font-size: font-size('3xl');
-  }
-}
 
-h2 {
-  font-size: font-size('4xl');
+    @include media-up('sm') {
+      font-size: font-size('4xl');
+    }
 
-  @include media-down('md') {
-    font-size: font-size('3xl');
+    @include media-up('md') {
+      font-size: font-size('5xl');
+    }
   }
 
-  @include media-down('sm') {
+  h2 {
     font-size: font-size('2xl');
+
+    @include media-up('sm') {
+      font-size: font-size('3xl');
+    }
+
+    @include media-up('md') {
+      font-size: font-size('4xl');
+    }
   }
-}
 
-h3 {
-  font-size: font-size('xl');
+  h3 {
+    font-size: font-size('xl');
 
-  &.mw-accent {
-    color: var(--mw-primary-text-color);
+    &.mw-accent {
+      color: var(--mw-primary-text-color);
+    }
   }
-}
 
-h4 {
-  font-size: font-size('lg');
-}
+  h4 {
+    font-size: font-size('lg');
+  }
 
-h5 {
-  font-size: font-size('md');
-  font-weight: font-weight('medium');
-}
+  h5 {
+    font-size: font-size('md');
+    font-weight: font-weight('medium');
+  }
 
-h6 {
-  font-size: font-size('sm');
-  font-weight: font-weight('medium');
-}
+  h6 {
+    font-size: font-size('sm');
+    font-weight: font-weight('medium');
+  }
 
-// Paragraphs
-p {
-  margin-bottom: spacing('3');
-  text-wrap: pretty;
-}
+  // Paragraphs
+  p {
+    margin-bottom: spacing('3');
+    text-wrap: pretty;
+  }
 
-// Inline text the framework was leaving to the browser. `small` in particular
-// showed up in footers and captions at whatever the UA felt like.
-small {
-  font-size: font-size('sm');
-  color: var(--mw-text-muted-color);
-}
+  // Inline text the framework was leaving to the browser. `small` in particular
+  // showed up in footers and captions at whatever the UA felt like.
+  small {
+    font-size: font-size('sm');
+    color: var(--mw-text-muted-color);
+  }
 
-strong,
-b {
-  font-weight: font-weight('bold');
-}
+  strong,
+  b {
+    font-weight: font-weight('bold');
+  }
 
-// The browser's own is a solid block of background with the text left dark on
-// it - unreadable on a dark page. Tinted with the brand instead, and it keeps
-// the theme's ink.
-mark {
-  background: color-mix(in srgb, var(--mw-warning-color) 35%, transparent);
-  color: inherit;
-  padding: 0.1em 0.25em;
-  border-radius: radius('xs');
-}
+  // The browser's own is a solid block of background with the text left dark on
+  // it - unreadable on a dark page. Tinted with the brand instead, and it keeps
+  // the theme's ink.
+  mark {
+    background: color-mix(in srgb, var(--mw-warning-color) 35%, transparent);
+    color: inherit;
+    padding: 0.1em 0.25em;
+    border-radius: radius('xs');
+  }
 
-// Underlined in the same shape the link buttons use, so an inline link and a
-// `mw-btn-link` do not read as two different things
-abbr[title] {
-  text-decoration: underline dotted;
-  text-underline-offset: 0.2em;
-  cursor: help;
-}
+  // Underlined in the same shape the link buttons use, so an inline link and a
+  // `mw-btn-link` do not read as two different things
+  abbr[title] {
+    text-decoration: underline dotted;
+    text-underline-offset: 0.2em;
+    cursor: help;
+  }
 
-// Code elements
-code,
-pre,
-kbd {
-  font-family: var(--mw-font-family-mono);
-}
+  // Code elements
+  code,
+  pre,
+  kbd {
+    font-family: var(--mw-font-family-mono);
+  }
 
-pre {
-  border: 1px solid var(--mw-border);
-  background: var(--mw-card-background);
-  margin-bottom: spacing('2');
-}
+  pre {
+    border: 1px solid var(--mw-border);
+    background: var(--mw-card-background);
+    margin-bottom: spacing('2');
+  }
 
-code {
-  white-space: pre-wrap;
-  word-break: break-word;
-}
+  code {
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  blockquote {
+    color: var(--mw-secondary-text-color);
+    font-style: italic;
+    position: relative;
+    padding: spacing('4') spacing('8');
+    margin: spacing('2') spacing('1');
+    border-left: 2px solid var(--mw-secondary-background-hover);
+    border-radius: radius('none') radius('sm') radius('sm') radius('none');
+    background: color-mix(
+      in srgb,
+      var(--mw-secondary-background) 85%,
+      transparent
+    );
+
+    &:hover {
+      &::before,
+      &::after {
+        opacity: 0.7;
+      }
+    }
 
-blockquote {
-  color: var(--mw-secondary-text-color);
-  font-style: italic;
-  position: relative;
-  padding: spacing('4') spacing('8');
-  margin: spacing('2') spacing('1');
-  border-left: 2px solid var(--mw-secondary-background-hover);
-  border-radius: radius('none') radius('sm') radius('sm') radius('none');
-  background: color-mix(
-    in srgb,
-    var(--mw-secondary-background) 85%,
-    transparent
-  );
-
-  &:hover {
     &::before,
     &::after {
-      opacity: 0.7;
+      font-family: Georgia, serif;
+      font-size: font-size('5xl');
+      position: absolute;
+      opacity: 0.4;
+      line-height: 1;
     }
-  }
-
-  &::before,
-  &::after {
-    font-family: Georgia, serif;
-    font-size: font-size('5xl');
-    position: absolute;
-    opacity: 0.4;
-    line-height: 1;
-  }
 
-  &::before {
-    content: '"';
-    top: spacing('-1');
-    left: spacing('2');
-  }
+    &::before {
+      content: '"';
+      top: spacing('-1');
+      left: spacing('2');
+    }
 
-  &::after {
-    content: '"';
-    bottom: spacing('-6');
-    right: spacing('4');
+    &::after {
+      content: '"';
+      bottom: spacing('-6');
+      right: spacing('4');
+    }
   }
 }

package/src/scss/components/_accordions.scss

@@ -1,122 +1,122 @@
 @use '../abstracts' as *;
 
-.mw-accordion {
-  border: 1px solid var(--mw-border);
-  @include surface;
-  overflow: hidden;
-  margin: spacing('2');
+@layer mw.components {
+  .mw-accordion {
+    border: 1px solid var(--mw-border);
+    @include surface;
+    overflow: hidden;
+    margin: spacing('2');
 
-  &-item {
-    border-bottom: 1px solid var(--mw-border-accent);
+    &-item {
+      border-bottom: 1px solid var(--mw-border-accent);
 
-    &:last-child {
-      border-bottom: none;
+      &:last-child {
+        border-bottom: none;
+      }
     }
-  }
 
-  // Written for a <button>. The header is the control that opens the panel, and
-  // as a <div> it is not focusable and not reachable by keyboard - on a page of
-  // questions that is every answer on it. The declarations below clear what
-  // comes with a <button>; on a <div> they change nothing, so old markup keeps
-  // working.
-  &-header {
-    appearance: none;
-    border: none;
-    width: 100%;
-    font: inherit;
-    color: inherit;
-    text-align: left;
-
-    // A heading is flow content and not allowed inside a button, so the
-    // question carries its own type here rather than through a nested h3. The
-    // h3 rule further down keeps older markup looking the same.
-    font-size: font-size('md');
-    font-weight: font-weight('medium');
-
-    @include media-down('sm') {
+    // Written for a <button>. The header is the control that opens the panel, and
+    // as a <div> it is not focusable and not reachable by keyboard - on a page of
+    // questions that is every answer on it. The declarations below clear what
+    // comes with a <button>; on a <div> they change nothing, so old markup keeps
+    // working.
+    &-header {
+      appearance: none;
+      border: none;
+      width: 100%;
+      font: inherit;
+      color: inherit;
+      text-align: left;
+
+      // A heading is flow content and not allowed inside a button, so the
+      // question carries its own type here rather than through a nested h3. The
+      // h3 rule further down keeps older markup looking the same.
       font-size: font-size('sm');
-    }
-
-    padding: spacing('4');
-    background: var(--mw-card-background);
-    cursor: pointer;
-    @include tappable;
-    @include focus-ring(-2px);
-
-    // A press has to be felt. On touch it is the only feedback there is - a
-    // finger never hovers - and every clickable surface in the framework owes it.
-    &:active {
-      background: var(--mw-primary-background);
-      transition-duration: var(--mw-duration-instant);
-    }
+      font-weight: font-weight('medium');
 
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    transition: var(--mw-transition);
-
-    &:hover {
-      background: var(--mw-primary-background-hover);
-    }
+      @include media-up('sm') {
+        font-size: font-size('md');
+      }
 
-    // Markup from before the button: the header carries the type now, the
-    // heading only has to stop bringing its own.
-    h3 {
-      margin: spacing('0');
-      font-size: inherit;
-      font-weight: inherit;
-    }
+      padding: spacing('4');
+      background: var(--mw-card-background);
+      cursor: pointer;
+      @include tappable;
+      @include focus-ring(-2px);
+
+      // A press has to be felt. On touch it is the only feedback there is - a
+      // finger never hovers - and every clickable surface in the framework owes it.
+      &:active {
+        background: var(--mw-primary-background);
+        transition-duration: var(--mw-duration-instant);
+      }
 
-    .mw-accordion-icon {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
       transition: var(--mw-transition);
-      transform: rotate(0deg);
-    }
-
-    &.mw-active,
-    &.active {
-      background: var(--mw-primary-color);
-      color: var(--mw-primary-accent-text-color);
 
-      .mw-accordion-icon {
-        transform: rotate(180deg);
+      &:hover {
+        background: var(--mw-primary-background-hover);
       }
-    }
-  }
 
-  &-content {
-    height: spacing('0');
-    overflow: hidden;
-    transition: height var(--mw-duration-slower) var(--mw-ease-out);
-    background: var(--mw-card-background);
-    interpolate-size: allow-keywords;
+      // Markup from before the button: the header carries the type now, the
+      // heading only has to stop bringing its own.
+      h3 {
+        margin: spacing('0');
+        font-size: inherit;
+        font-weight: inherit;
+      }
 
-    &-inner {
-      padding: spacing('4');
-      border-top: 1px solid var(--mw-border-accent);
-      @include media-down('sm') {
-        font-size: font-size('sm');
+      .mw-accordion-icon {
+        transition: var(--mw-transition);
+        transform: rotate(0deg);
       }
-    }
 
-    &.mw-active,
-    &.active {
-      height: auto;
-      max-height: 500px;
-      overflow-y: auto;
+      @include active() {
+        background: var(--mw-primary-color);
+        color: var(--mw-primary-accent-text-color);
 
-      // Scrollbar styling
-      &::-webkit-scrollbar {
-        width: 6px;
+        .mw-accordion-icon {
+          transform: rotate(180deg);
+        }
       }
+    }
 
-      &::-webkit-scrollbar-track {
-        background: var(--mw-card-background);
-        border-radius: radius('sm');
+    &-content {
+      height: spacing('0');
+      overflow: hidden;
+      transition: height var(--mw-duration-slower) var(--mw-ease-out);
+      background: var(--mw-card-background);
+      interpolate-size: allow-keywords;
+
+      &-inner {
+        padding: spacing('4');
+        border-top: 1px solid var(--mw-border-accent);
+        @include media-down('sm') {
+          font-size: font-size('sm');
+        }
       }
 
-      &::-webkit-scrollbar-thumb {
-        background: var(--mw-primary-color-hover);
-        border-radius: radius('sm');
+      @include active() {
+        height: auto;
+        max-height: 500px;
+        overflow-y: auto;
+
+        // Scrollbar styling
+        &::-webkit-scrollbar {
+          width: 6px;
+        }
+
+        &::-webkit-scrollbar-track {
+          background: var(--mw-card-background);
+          border-radius: radius('sm');
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background: var(--mw-primary-color-hover);
+          border-radius: radius('sm');
+        }
       }
     }
   }