maverick-wave 3.0.0

package/src/scss/base/_base.scss

@@ -0,0 +1,165 @@
+@use 'sass:map';
+@use '../abstracts' as *;
+
+// CSS Variables for theming and overriding
+:root {
+  // Base colors
+  --mw-primary-color: #{map.get($base-colors, 'primary-color')};
+  --mw-primary-color-hover: #{map.get($base-colors, 'primary-color-hover')};
+  --mw-primary-background: #{map.get($base-colors, 'primary-background')};
+  --mw-primary-background-hover: #{map.get(
+      $base-colors,
+      'primary-background-hover'
+    )};
+  --mw-primary-info-background: #{map.get(
+      $base-colors,
+      'primary-info-background'
+    )};
+  --mw-primary-text-color: #{map.get($base-colors, 'primary-text-color')};
+  --mw-secondary-color: #{map.get($base-colors, 'secondary-color')};
+  --mw-secondary-color-hover: #{map.get($base-colors, 'secondary-color-hover')};
+  --mw-secondary-background: #{map.get($base-colors, 'secondary-background')};
+  --mw-secondary-background-hover: #{map.get(
+      $base-colors,
+      'secondary-background-hover'
+    )};
+  --mw-secondary-info-background: #{map.get(
+      $base-colors,
+      'secondary-info-background'
+    )};
+  --mw-secondary-text-color: #{map.get($base-colors, 'secondary-text-color')};
+  --mw-white-color: #{map.get($base-colors, 'white-color')};
+  --mw-gray-color: #{map.get($base-colors, 'gray-color')};
+  --mw-gray-background: #{map.get($base-colors, 'gray-background')};
+  --mw-section-alternate-pattern: #{map.get(
+      $base-colors,
+      'section-alternate-pattern'
+    )};
+
+  // form
+  --mw-form-elements-background: #{map.get(
+      $base-colors,
+      'form-elements-background'
+    )};
+  --mw-form-elements-color: #{map.get($base-colors, 'form-elements-color')};
+
+  // Status colors
+  --mw-success-color: #{map.get($status-colors, 'success-color')};
+  --mw-success-info-background: #{map.get(
+      $status-colors,
+      'success-info-background'
+    )};
+  --mw-success-info-background-hover: #{map.get(
+      $status-colors,
+      'success-info-background-hover'
+    )};
+  --mw-warning-color: #{map.get($status-colors, 'warning-color')};
+  --mw-warning-info-background: #{map.get(
+      $status-colors,
+      'warning-info-background'
+    )};
+  --mw-danger-color: #{map.get($status-colors, 'danger-color')};
+  --mw-danger-info-background: #{map.get(
+      $status-colors,
+      'danger-info-background'
+    )};
+  --mw-info-color: #{map.get($status-colors, 'info-color')};
+  --mw-info-info-background: #{map.get($status-colors, 'info-info-background')};
+  --mw-info-info-background-hover: #{map.get(
+      $status-colors,
+      'info-info-background-hover'
+    )};
+
+  // Header/navbar colors (they are fixed, but you can change them separately)
+  --mw-header-background: #{map.get($dark-theme-colors, 'footer-background')};
+  --mw-header-navbar-list-color: #{map.get(
+      $dark-theme-colors,
+      'text-muted-color'
+    )};
+  --mw-header-navbar-list-active-color: #{map.get(
+      $base-colors,
+      'primary-color'
+    )};
+  --mw-header-burgerbutton-color: #{map.get($dark-theme-colors, 'text-color')};
+  --mw-header-border: #{map.get($base-colors, 'primary-color-hover')};
+
+  // Dark theme colors
+  --mw-dark-page-background: #{map.get($dark-theme-colors, 'page-background')};
+  --mw-dark-hero-overlay-background: #{map.get(
+      $dark-theme-colors,
+      'hero-overlay-background'
+    )};
+  --mw-dark-card-background: #{map.get($dark-theme-colors, 'card-background')};
+  --mw-dark-footer-background: #{map.get(
+      $dark-theme-colors,
+      'footer-background'
+    )};
+  --mw-dark-border: #{map.get($dark-theme-colors, 'border')};
+  --mw-dark-shadow: #{map.get($dark-theme-colors, 'shadow')};
+  --mw-dark-text-color: #{map.get($dark-theme-colors, 'text-color')};
+  --mw-dark-text-muted-color: #{map.get($dark-theme-colors, 'text-muted-color')};
+
+  // Light theme colors
+  --mw-light-page-background: #{map.get($light-theme-colors, 'page-background')};
+  --mw-light-hero-overlay-background: #{map.get(
+      $light-theme-colors,
+      'hero-overlay-background'
+    )};
+  --mw-light-card-background: #{map.get($light-theme-colors, 'card-background')};
+  --mw-light-footer-background: #{map.get(
+      $light-theme-colors,
+      'footer-background'
+    )};
+  --mw-light-border: #{map.get($light-theme-colors, 'border')};
+  --mw-light-shadow: #{map.get($light-theme-colors, 'shadow')};
+  --mw-light-text-color: #{map.get($light-theme-colors, 'text-color')};
+  --mw-light-text-muted-color: #{map.get(
+      $light-theme-colors,
+      'text-muted-color'
+    )};
+
+  // Transitions
+  --mw-transition: #{$transition-default};
+
+  // theme for theme-toggle
+  --mw-internal-theme-mode: #{$mw-theme-mode};
+
+  // hero background image
+  --mw-hero-background: #{$mw-hero-image};
+
+  @if $mw-theme-mode == 'dark' or $mw-theme-mode == 'switchable' {
+    // Dark theme variables
+    --mw-page-background: var(--mw-dark-page-background);
+    --mw-hero-overlay-background: var(--mw-dark-hero-overlay-background);
+    --mw-card-background: var(--mw-dark-card-background);
+    --mw-footer-background: var(--mw-dark-footer-background);
+    --mw-border: var(--mw-dark-border);
+    --mw-shadow: var(--mw-dark-shadow);
+    --mw-text-color: var(--mw-dark-text-color);
+    --mw-text-muted-color: var(--mw-dark-text-muted-color);
+  } @else {
+    // Light theme variables
+    --mw-page-background: var(--mw-light-page-background);
+    --mw-hero-overlay-background: var(--mw-light-hero-overlay-background);
+    --mw-card-background: var(--mw-light-card-background);
+    --mw-footer-background: var(--mw-light-footer-background);
+    --mw-border: var(--mw-light-border);
+    --mw-shadow: var(--mw-light-shadow);
+    --mw-text-color: var(--mw-light-text-color);
+    --mw-text-muted-color: var(--mw-light-text-muted-color);
+  }
+}
+
+@if $mw-theme-mode == 'switchable' {
+  .mw-theme-light {
+    // Light theme variables for switching
+    --mw-page-background: var(--mw-light-page-background);
+    --mw-hero-overlay-background: var(--mw-light-hero-overlay-background);
+    --mw-card-background: var(--mw-light-card-background);
+    --mw-footer-background: var(--mw-light-footer-background);
+    --mw-border: var(--mw-light-border);
+    --mw-shadow: var(--mw-light-shadow);
+    --mw-text-color: var(--mw-light-text-color);
+    --mw-text-muted-color: var(--mw-light-text-muted-color);
+  }
+}

package/src/scss/base/_index.scss

@@ -0,0 +1,3 @@
+@forward 'reset';
+@forward 'base';
+@forward 'typography';

package/src/scss/base/_reset.scss

@@ -0,0 +1,75 @@
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+  min-width: 360px;
+  scroll-padding-top: 70px;
+}
+
+body {
+  font-family: var(--mw-font-family-base);
+  background: var(--mw-page-background);
+  color: var(--mw-text-color);
+  line-height: 1.6;
+
+  &:has(.mw-modal-open) {
+    overflow: hidden;
+    height: 100vh;
+  }
+}
+
+a {
+  text-decoration: none;
+  color: var(--mw-text-muted-color);
+  transition: var(--mw-transition);
+}
+
+ul {
+  list-style: none;
+}
+
+hr {
+  margin: 15px 0;
+  color: var(--mw-text-muted-color);
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+input,
+textarea {
+  font-family: inherit;
+}
+
+table,
+th,
+td {
+  border: 1px solid var(--mw-border);
+  border-collapse: collapse;
+  padding: 3px 8px;
+  text-align: left;
+  tr:nth-child(even) {
+    background: var(--mw-gray-background);
+  }
+}
+
+th {
+  background: var(--mw-primary-color);
+  color: var(--mw-primary-text-color);
+}

package/src/scss/base/_typography.scss

@@ -0,0 +1,230 @@
+@use '../abstracts' as *;
+
+// System Font Stacks
+$font-family-base:
+  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
+  Cantarell, 'Helvetica Neue', sans-serif;
+
+$font-family-heading:
+  system-ui,
+  -apple-system,
+  BlinkMacSystemFont,
+  'Segoe UI',
+  Roboto,
+  'Helvetica Neue',
+  Arial,
+  sans-serif;
+
+$font-family-mono:
+  SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+  monospace;
+
+:root {
+  --mw-font-family-base: #{$font-family-base};
+  --mw-font-family-heading: #{$font-family-heading};
+  --mw-font-family-mono: #{$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');
+}
+
+h1 {
+  font-size: font-size('5xl');
+
+  @include media-down('sm') {
+    font-size: font-size('3xl');
+  }
+}
+
+h2 {
+  font-size: font-size('4xl');
+
+  @include media-down('sm') {
+    font-size: font-size('2xl');
+  }
+}
+
+h3 {
+  font-size: font-size('xl');
+
+  &.mw-accent {
+    color: var(--mw-primary-color);
+  }
+}
+
+h4 {
+  font-size: font-size('lg');
+}
+
+h5 {
+  font-size: font-size('md');
+  font-weight: font-weight('medium');
+}
+
+h6 {
+  font-size: font-size('sm');
+  font-weight: font-weight('medium');
+}
+
+// Paragraphs
+p {
+  margin-bottom: spacing('3');
+}
+
+// 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: 6px;
+}
+
+code {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+blockquote {
+  color: var(--mw-secondary-color);
+  font-style: italic;
+  position: relative;
+  padding: spacing('4');
+  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;
+    }
+  }
+
+  &::before,
+  &::after {
+    font-family: Georgia, serif;
+    font-size: font-size('5xl');
+    position: absolute;
+    opacity: 0.4;
+    line-height: 1;
+  }
+
+  &::before {
+    content: '"';
+    top: spacing('-2');
+    left: spacing('1');
+  }
+
+  &::after {
+    content: '"';
+    bottom: spacing('-5');
+    right: spacing('2');
+  }
+}
+
+// Text utilities
+.mw-text {
+  &-center {
+    text-align: center;
+  }
+
+  &-left {
+    text-align: left;
+  }
+
+  &-right {
+    text-align: right;
+  }
+
+  &-primary {
+    color: var(--mw-primary-color);
+  }
+
+  &-secondary {
+    color: var(--mw-secondary-color);
+  }
+
+  &-danger {
+    color: var(--mw-danger-color);
+  }
+
+  &-muted {
+    color: var(--mw-text-muted-color);
+  }
+
+  &-bold {
+    font-weight: font-weight('bold');
+  }
+
+  &-medium {
+    font-weight: font-weight('medium');
+  }
+
+  &-normal {
+    font-weight: font-weight('normal');
+  }
+
+  &-light {
+    font-weight: font-weight('light');
+  }
+
+  &-italic {
+    font-style: italic;
+  }
+
+  &-color-dark {
+    color: var(--mw-dark-text-color);
+  }
+
+  &-color-light {
+    color: var(--mw-light-text-color);
+  }
+
+  @each $name, $size in $font-sizes {
+    &-#{$name} {
+      font-size: $size;
+    }
+  }
+}
+
+// Line height utilities
+.mw-leading {
+  &-tight {
+    line-height: 1.2;
+  }
+
+  &-normal {
+    line-height: 1.5;
+  }
+
+  &-loose {
+    line-height: 1.8;
+  }
+}

package/src/scss/components/_accordions.scss

@@ -0,0 +1,91 @@
+@use '../abstracts' as *;
+
+.mw-accordion {
+  border: 1px solid var(--mw-border);
+  border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
+  overflow: hidden;
+  margin: spacing('1');
+
+  &-item {
+    border-bottom: 1px solid var(--mw-primary-color-hover);
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  &-header {
+    padding: spacing('4');
+    background: var(--mw-card-background);
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: var(--mw-transition);
+
+    &:hover {
+      background: var(--mw-primary-background-hover);
+    }
+
+    h3 {
+      margin: spacing('0');
+      font-size: font-size('md');
+      font-weight: font-weight('medium');
+
+      @include media-down('sm') {
+        font-size: font-size('sm');
+      }
+    }
+
+    .mw-accordion-icon {
+      transition: var(--mw-transition);
+      transform: rotate(0deg);
+    }
+
+    &.active {
+      background: var(--mw-primary-color);
+      color: var(--mw-primary-text-color);
+
+      .mw-accordion-icon {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  &-content {
+    height: spacing('0');
+    overflow: hidden;
+    transition: height 0.9s ease;
+    background: var(--mw-card-background);
+    interpolate-size: allow-keywords;
+
+    &-inner {
+      padding: spacing('4');
+      border-top: 1px solid var(--mw-primary-color-hover);
+      @include media-down('sm') {
+        font-size: font-size('sm');
+      }
+    }
+
+    &.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');
+      }
+    }
+  }
+}

package/src/scss/components/_alerts.scss

@@ -0,0 +1,105 @@
+@use '../abstracts' as *;
+
+.mw-alert {
+  position: relative;
+  overflow: hidden;
+
+  display: flex;
+  align-items: flex-start;
+
+  padding: spacing('3') spacing('4');
+  margin-bottom: spacing('4');
+  border-radius: radius('md');
+
+  background: var(--mw-card-background);
+  border: 1px solid var(--mw-border);
+  box-shadow: 0 2px 5px var(--mw-shadow);
+
+  &-icon,
+  &-content,
+  .mw-alert-close {
+    position: relative;
+    z-index: z-index('alert') + 5;
+  }
+
+  &-icon {
+    flex-shrink: 0;
+    margin-right: spacing('3');
+    font-size: font-size('xl');
+    line-height: 1.2;
+    margin-top: spacing('1');
+  }
+
+  &-content {
+    flex: 1;
+    color: var(--mw-text-color);
+  }
+
+  &-title {
+    display: block;
+    font-weight: font-weight('bold');
+    margin-bottom: spacing('1');
+    line-height: 1.3;
+  }
+
+  // Text in body
+  p {
+    margin: 0;
+    line-height: 1.5;
+    font-size: font-size('sm');
+    opacity: 0.9;
+
+    & + p {
+      margin-top: spacing('2');
+    }
+  }
+
+  &-closed {
+    display: none !important;
+  }
+
+  @include media-down('sm') {
+    padding: spacing('2');
+    &-icon {
+      margin-right: spacing('2');
+    }
+  }
+}
+
+// Close button
+.mw-alert-close {
+  flex-shrink: 0;
+  margin-left: spacing('3');
+}
+
+// Color mapping
+$_mw-alert-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),
+);
+
+// Color variants
+@each $name, $col in $_mw-alert-colors {
+  .mw-alert-#{$name} {
+    border: 1px solid rgba($col, 0.2);
+    border-left: 4px solid #{$col};
+
+    // Color layer
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: var(--mw-#{$name}-info-background);
+      z-index: z-index('alert');
+      pointer-events: none;
+    }
+
+    .mw-alert-icon {
+      color: #{$col};
+    }
+  }
+}