maverick-wave 4.28.0 → 5.0.0

package/src/scss/components/_code.scss

@@ -1,267 +1,263 @@
 @use '../abstracts' as *;
 
-code,
-pre {
-  font-family: var(--mw-font-family-mono);
-  font-size: font-size('xs');
-  border-radius: radius('sm');
-}
-
-code {
-  color: var(--mw-text-muted-color);
-  padding: spacing('1') spacing('2');
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-// Inline code - a token in a sentence, a class name in a table cell - gets a
-// surface of its own so it reads as a quoted thing rather than as prose that
-// changed font halfway through. Only outside a `pre`: the block already paints
-// one, and a second box inside it is just a box inside a box.
-:not(pre) > code {
-  padding: 0.15em 0.4em;
-  border-radius: radius('xs');
-  background: var(--mw-surface-muted);
-  color: var(--mw-text-color);
-  // Mono faces run visibly larger than the body face at the same nominal size.
-  // `em` rather than a step off the scale, so it follows whatever it is set in -
-  // a paragraph, a table cell, a heading.
-  font-size: 0.88em;
-}
-
-pre {
-  color: var(--mw-text-color);
-  padding: spacing('4');
-  overflow-x: auto;
-  border: none;
+@layer mw.components {
+  code,
+  pre {
+    font-family: var(--mw-font-family-mono);
+    font-size: font-size('xs');
+    border-radius: radius('sm');
+  }
 
   code {
-    color: inherit;
-    padding: spacing('0');
+    color: var(--mw-text-muted-color);
+    padding: spacing('1') spacing('2');
     white-space: pre-wrap;
-    display: block;
-    line-height: 1.5;
-
-    @include media-down('sm') {
-      font-size: font-size('2xs');
-      white-space: pre-wrap;
-      word-break: break-word;
-    }
-
-    @include media-down('xs') {
-      font-size: font-size('3xs');
-    }
+    word-break: break-word;
   }
-}
 
-// Code block with filename
-.mw-code-block {
-  border-radius: radius('sm');
-  overflow: hidden;
-  border: 1px solid var(--mw-border);
-  width: 100%;
+  // Inline code - a token in a sentence, a class name in a table cell - gets a
+  // surface of its own so it reads as a quoted thing rather than as prose that
+  // changed font halfway through. Only outside a `pre`: the block already paints
+  // one, and a second box inside it is just a box inside a box.
+  :not(pre) > code {
+    padding: 0.15em 0.4em;
+    border-radius: radius('xs');
+    background: var(--mw-surface-muted);
+    color: var(--mw-text-color);
+    // Mono faces run visibly larger than the body face at the same nominal size.
+    // `em` rather than a step off the scale, so it follows whatever it is set in -
+    // a paragraph, a table cell, a heading.
+    font-size: 0.88em;
+  }
 
-  &-header {
-    padding: spacing('2') spacing('4');
-    border-bottom: 1px solid var(--mw-border);
-    font-family: var(--mw-font-family-mono);
-    font-size: font-size('xs');
-    color: var(--mw-text-muted-color);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
+  pre {
+    color: var(--mw-text-color);
+    padding: spacing('4');
+    overflow-x: auto;
+    border: none;
 
-    @include media-down('sm') {
-      padding: spacing('2');
-    }
-  }
+    code {
+      color: inherit;
+      padding: spacing('0');
+      white-space: pre-wrap;
+      display: block;
+      line-height: 1.5;
 
-  &-filename {
-    font-weight: font-weight('medium');
-    margin-right: spacing('2');
+      @include media-down('sm') {
+        font-size: font-size('2xs');
+        white-space: pre-wrap;
+        word-break: break-word;
+      }
 
-    @include media-down('sm') {
-      font-size: font-size('2xs');
-      margin-bottom: spacing('1');
+      @include media-down('xs') {
+        font-size: font-size('3xs');
+      }
     }
   }
 
-  &-language {
-    font-size: font-size('xs');
-    padding: spacing('1');
+  .mw-code-block {
     border-radius: radius('sm');
+    overflow: hidden;
+    border: 1px solid var(--mw-border);
+    width: 100%;
 
-    @include media-down('sm') {
-      font-size: font-size('2xs');
+    &-header {
+      padding: spacing('2');
+      border-bottom: 1px solid var(--mw-border);
+      font-family: var(--mw-font-family-mono);
+      font-size: font-size('xs');
+      color: var(--mw-text-muted-color);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-wrap: wrap;
+
+      @include media-up('sm') {
+        padding: spacing('2') spacing('4');
+      }
     }
-  }
 
-  pre {
-    margin: spacing('0');
-    border: none;
-    max-width: 100%;
-    overflow-x: auto;
+    &-filename {
+      font-weight: font-weight('medium');
+      margin-right: spacing('2');
 
-    @include media-down('sm') {
+      @include media-down('sm') {
+        font-size: font-size('2xs');
+        margin-bottom: spacing('1');
+      }
+    }
+
+    &-language {
       font-size: font-size('2xs');
       padding: spacing('1');
+      border-radius: radius('sm');
 
-      code {
-        white-space: pre-wrap;
-        word-break: break-word;
+      @include media-up('sm') {
+        font-size: font-size('xs');
       }
     }
 
-    @include media-down('xs') {
-      font-size: font-size('3xs');
+    pre {
+      margin: spacing('0');
+      border: none;
+      max-width: 100%;
+      overflow-x: auto;
+
+      @include media-down('sm') {
+        font-size: font-size('2xs');
+        padding: spacing('1');
+
+        code {
+          white-space: pre-wrap;
+          word-break: break-word;
+        }
+      }
+
+      @include media-down('xs') {
+        font-size: font-size('3xs');
+      }
     }
   }
-}
 
-// Terminal
-.mw-terminal {
-  background: #232323; // fix color
-  color: #f2f3f4; // fix color
-  border-radius: radius('sm');
-  padding: spacing('4');
-  margin: spacing('1');
-  font-family: var(--mw-font-family-mono);
-  font-size: font-size('xs');
-  line-height: 1.5;
-  overflow: auto;
-  max-width: 100%;
-
-  @include media-down('sm') {
-    font-size: font-size('2xs');
+  .mw-terminal {
+    background: #232323;
+    color: #f2f3f4;
+    border-radius: radius('sm');
     padding: spacing('1');
-  }
-
-  @include media-down('xs') {
+    margin: spacing('1');
+    font-family: var(--mw-font-family-mono);
     font-size: font-size('3xs');
-  }
-
-  &-line {
-    display: block;
-    word-break: break-word;
+    line-height: 1.5;
+    overflow: auto;
+    max-width: 100%;
 
-    &::before {
-      content: '$ ';
-      color: #6bdd6b;
-      font-weight: font-weight('medium');
+    @include media-up('xs') {
+      font-size: font-size('2xs');
     }
 
-    &.mw-terminal-output::before {
-      content: '';
+    @include media-up('sm') {
+      font-size: font-size('xs');
+      padding: spacing('4');
     }
-  }
-}
 
-// Syntax highlighting
-.mw-code-keyword {
-  color: #bd63d9;
-}
-
-.mw-code-string {
-  color: #98c379;
-}
-
-.mw-code-comment {
-  color: #7f848e;
-  font-style: italic;
-}
-
-.mw-code-function {
-  color: #489bde;
-}
+    &-line {
+      display: block;
+      word-break: break-word;
 
-.mw-code-number {
-  color: #d19a66;
-}
+      &::before {
+        content: '$ ';
+        color: #6bdd6b;
+        font-weight: font-weight('medium');
+      }
 
-.mw-code-operator {
-  color: #56b6c2;
-}
+      &.mw-terminal-output::before {
+        content: '';
+      }
+    }
+  }
 
-// Light theme adjustments
-.mw-theme-light {
   .mw-code-keyword {
-    color: #9d1a9a;
+    color: #bd63d9;
   }
 
   .mw-code-string {
-    color: #43a342;
+    color: #98c379;
   }
 
   .mw-code-comment {
-    color: #a0a1a7;
+    color: #7f848e;
+    font-style: italic;
   }
 
   .mw-code-function {
-    color: #4078f2;
+    color: #489bde;
   }
 
   .mw-code-number {
-    color: #89610c;
+    color: #d19a66;
   }
 
   .mw-code-operator {
-    color: #0184bc;
+    color: #56b6c2;
   }
-}
 
-// Responsive container
-.mw-code-container {
-  width: 100%;
-  max-width: 100%;
-  overflow-x: auto;
-  position: relative;
-
-  // Add horizontal scrolling indicator for small screens
-  @include media-down('sm') {
-    background-position:
-      left center,
-      right center;
-    background-repeat: no-repeat;
-    background-size:
-      20px 100%,
-      20px 100%;
-    background-attachment: local, local;
-  }
+  .mw-theme-light {
+    .mw-code-keyword {
+      color: #9d1a9a;
+    }
 
-  // Children should not be wider than the container
-  & > * {
-    max-width: 100%;
+    .mw-code-string {
+      color: #43a342;
+    }
+
+    .mw-code-comment {
+      color: #a0a1a7;
+    }
+
+    .mw-code-function {
+      color: #4078f2;
+    }
+
+    .mw-code-number {
+      color: #89610c;
+    }
+
+    .mw-code-operator {
+      color: #0184bc;
+    }
   }
 
-  .mw-code-block {
-    margin: spacing('0');
+  .mw-code-container {
     width: 100%;
+    max-width: 100%;
+    overflow-x: auto;
+    position: relative;
 
-    pre {
-      white-space: pre;
-      width: 100%;
-      overflow-x: auto;
+    // Add horizontal scrolling indicator for small screens
+    @include media-down('sm') {
+      background-position:
+        left center,
+        right center;
+      background-repeat: no-repeat;
+      background-size:
+        20px 100%,
+        20px 100%;
+      background-attachment: local, local;
+    }
 
-      // For very small screens, allow wrapping
-      @include media-down('xs') {
-        white-space: pre-wrap;
-        word-break: break-word;
-      }
+    & > * {
+      max-width: 100%;
     }
 
-    // Add horizontal scrolling for code that can't wrap nicely
-    &.mw-code-nowrap {
+    .mw-code-block {
+      margin: spacing('0');
+      width: 100%;
+
       pre {
         white-space: pre;
-        code {
+        width: 100%;
+        overflow-x: auto;
+
+        // For very small screens, allow wrapping
+        @include media-down('xs') {
+          white-space: pre-wrap;
+          word-break: break-word;
+        }
+      }
+
+      // Add horizontal scrolling for code that can't wrap nicely
+      &.mw-code-nowrap {
+        pre {
           white-space: pre;
+          code {
+            white-space: pre;
+          }
         }
       }
     }
-  }
 
-  .mw-terminal {
-    width: 100%;
+    .mw-terminal {
+      width: 100%;
+    }
   }
 }

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

@@ -1,95 +1,97 @@
 @use '../abstracts' as *;
 
-.mw-coming-soon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--mw-card-background);
-  border-radius: radius('md');
-  border: 3px dashed var(--mw-border-accent);
-  overflow: hidden;
-  position: relative;
-  transition: var(--mw-transition);
-  padding: spacing('12') spacing('0');
-
-  &-icon {
-    margin-right: spacing('7');
-    font-size: font-size('3xl');
-    transition: var(--mw-transition);
-    position: relative;
-    z-index: z-index('lift');
-    color: var(--mw-text-muted-color);
-  }
-
-  &-text {
-    font-size: font-size('3xl');
-    font-weight: font-weight('bold');
-    color: var(--mw-text-muted-color);
-    text-transform: uppercase;
-    letter-spacing: spacing('3');
+@layer mw.components {
+  .mw-coming-soon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--mw-card-background);
+    border-radius: radius('md');
+    border: 3px dashed var(--mw-border-accent);
+    overflow: hidden;
     position: relative;
-    z-index: z-index('lift');
     transition: var(--mw-transition);
-    text-align: center;
-  }
+    padding: spacing('12') spacing('0');
 
-  &::before {
-    content: '';
-    position: absolute;
-    top: spacing('0');
-    left: spacing('0');
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(
-      125deg,
-      var(--mw-primary-color) 40%,
-      var(--mw-secondary-color) 100%
-    );
-    opacity: 0;
-    z-index: z-index('lift');
-    transition: opacity var(--mw-duration-slower) var(--mw-ease-out);
-  }
-
-  @include hover {
-    transform: translateY(-3px);
-  }
+    &-icon {
+      margin-right: spacing('7');
+      font-size: font-size('3xl');
+      transition: var(--mw-transition);
+      position: relative;
+      z-index: z-index('lift');
+      color: var(--mw-text-muted-color);
+    }
 
-  &:hover {
-    border-style: solid;
+    &-text {
+      font-size: font-size('3xl');
+      font-weight: font-weight('bold');
+      color: var(--mw-text-muted-color);
+      text-transform: uppercase;
+      letter-spacing: spacing('3');
+      position: relative;
+      z-index: z-index('lift');
+      transition: var(--mw-transition);
+      text-align: center;
+    }
 
-    .mw-coming-soon-icon {
-      color: var(--mw-primary-accent-text-color);
-      transform: rotate(27deg);
+    &::before {
+      content: '';
+      position: absolute;
+      top: spacing('0');
+      left: spacing('0');
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(
+        125deg,
+        var(--mw-primary-color) 40%,
+        var(--mw-secondary-color) 100%
+      );
+      opacity: 0;
+      z-index: z-index('lift');
+      transition: opacity var(--mw-duration-slower) var(--mw-ease-out);
     }
 
-    .mw-coming-soon-text {
-      color: var(--mw-primary-accent-text-color);
-      transform: scale(1.05);
+    @include hover {
+      transform: translateY(-3px);
     }
 
-    &::before {
-      opacity: 0.9;
+    &:hover {
+      border-style: solid;
+
+      .mw-coming-soon-icon {
+        color: var(--mw-primary-accent-text-color);
+        transform: rotate(27deg);
+      }
+
+      .mw-coming-soon-text {
+        color: var(--mw-primary-accent-text-color);
+        transform: scale(1.05);
+      }
+
+      &::before {
+        opacity: 0.9;
+      }
     }
-  }
 
-  // Add responsive adjustments
-  @include media-down('md') {
-    min-height: 150px;
+    // Add responsive adjustments
+    @include media-down('md') {
+      min-height: 150px;
 
-    &-text,
-    &-icon {
-      font-size: font-size('xl');
+      &-text,
+      &-icon {
+        font-size: font-size('xl');
+      }
     }
-  }
 
-  @include media-down('sm') {
-    min-height: 120px;
+    @include media-down('sm') {
+      min-height: 120px;
 
-    &-text,
-    &-icon {
-      margin-right: spacing('5');
-      letter-spacing: spacing('2');
-      font-size: font-size('lg');
+      &-text,
+      &-icon {
+        margin-right: spacing('5');
+        letter-spacing: spacing('2');
+        font-size: font-size('lg');
+      }
     }
   }
 }