maverick-wave 3.0.0

package/src/partials/timelines-container.html

@@ -0,0 +1,196 @@
+<h3 class="mw-section-subtitle">Timelines</h3>
+
+<h4 class="mw-mb-2">Big Timeline</h4>
+<p class="mw-text-muted">
+  You can use every card within the timeline content wrapper.
+</p>
+<div class="mw-timeline-big mw-my-6">
+  <div class="mw-timeline-big-step active">
+    <div class="mw-timeline-big-date-container">
+      <div class="mw-timeline-big-date-main">01/2023 – Present</div>
+    </div>
+    <div class="mw-timeline-big-content">
+      <div class="mw-card mw-card-content">
+        <div class="mw-card-body">
+          <h3 class="mw-card-title">Lead Developer</h3>
+          <p class="mw-card-subtitle">Innovatech Inc • San Francisco</p>
+          <p class="mw-card-text">
+            Overseeing cross-functional development teams, defining technical
+            strategy, and aligning product roadmaps with business goals. Driving
+            innovation and delivering high-impact features.
+          </p>
+          <div class="mw-card-footer">
+            <button type="button" class="mw-btn mw-btn-link">
+              View Details
+            </button>
+          </div>
+        </div>
+      </div>
+      <div class="mw-timeline-big-event">
+        <span class="mw-timeline-big-event-date">05/2023</span>
+        <span class="mw-timeline-big-event-title">
+          AWS Certified Solutions Architect – Professional
+        </span>
+      </div>
+    </div>
+  </div>
+
+  <div class="mw-timeline-big-step">
+    <div class="mw-timeline-big-date-container">
+      <div class="mw-timeline-big-date-main">08/2021 – 12/2022</div>
+      <div class="mw-timeline-big-date-sub">(1 year 4 months)</div>
+    </div>
+    <div class="mw-timeline-big-content">
+      <div class="mw-card mw-card-content">
+        <div class="mw-card-body">
+          <h3 class="mw-card-title">Senior Developer</h3>
+          <p class="mw-card-subtitle">Innovatech Inc • San Francisco</p>
+          <p class="mw-card-text">
+            Led technical design, mentored junior developers, and spearheaded
+            code reviews. Improved CI/CD pipelines and introduced best practices
+            for scalable frontend architecture.
+          </p>
+          <div class="mw-card-footer">
+            <button type="button" class="mw-btn mw-btn-link">
+              View Details
+            </button>
+          </div>
+        </div>
+      </div>
+      <div class="mw-timeline-big-event">
+        <span class="mw-timeline-big-event-date">02/2022</span>
+        <span class="mw-timeline-big-event-title">
+          Speaker at JSWorld Conference: "Scaling Vue.js"
+        </span>
+      </div>
+      <div class="mw-timeline-big-event">
+        <span class="mw-timeline-big-event-date">11/2021</span>
+        <span class="mw-timeline-big-event-title">
+          Certified Kubernetes Administrator (CKA) | CNCF
+        </span>
+      </div>
+    </div>
+  </div>
+
+  <div class="mw-timeline-big-step">
+    <div class="mw-timeline-big-date-container">
+      <div class="mw-timeline-big-date-main">06/2020 – 07/2021</div>
+      <div class="mw-timeline-big-date-sub">(1 year 1 month)</div>
+    </div>
+    <div class="mw-timeline-big-content">
+      <div class="mw-card mw-card-content">
+        <div class="mw-card-body">
+          <h3 class="mw-card-title">Mid-Level Developer</h3>
+          <p class="mw-card-subtitle">DevSolutions LLC • Remote</p>
+          <p class="mw-card-text">
+            Took ownership of feature development, optimized application
+            performance, and integrated RESTful APIs. Collaborated closely with
+            designers and backend engineers.
+          </p>
+          <div class="mw-card-footer">
+            <button type="button" class="mw-btn mw-btn-link">
+              View Details
+            </button>
+          </div>
+        </div>
+      </div>
+      <div class="mw-timeline-big-event">
+        <span class="mw-timeline-big-event-date">10/2020</span>
+        <span class="mw-timeline-big-event-title">
+          MongoDB Certified Developer Associate
+        </span>
+      </div>
+    </div>
+  </div>
+
+  <div class="mw-timeline-big-step">
+    <div class="mw-timeline-big-date-container">
+      <div class="mw-timeline-big-date-main">02/2018 – 05/2020</div>
+      <div class="mw-timeline-big-date-sub">(2 year 3 months)</div>
+    </div>
+    <div class="mw-timeline-big-content">
+      <div class="mw-card mw-card-content">
+        <div class="mw-card-body">
+          <h3 class="mw-card-title">Junior Developer</h3>
+          <p class="mw-card-subtitle">StartupXYZ • Berlin</p>
+          <p class="mw-card-text">
+            Contributed to UI components, fixed bugs, and wrote unit tests in a
+            collaborative Agile team. Gained hands-on experience with HTML, CSS,
+            and JavaScript.
+          </p>
+          <div class="mw-card-footer">
+            <button type="button" class="mw-btn mw-btn-link">
+              View Details
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<h4 class="mw-mb-2">Simple Timeline</h4>
+<p class="mw-text-muted">
+  Here you can also use every card within the timeline content wrapper.
+</p>
+
+<div class="mw-timeline-simple mw-my-5">
+  <div class="mw-timeline-simple-step active">
+    <div class="mw-timeline-simple-date">2023-11-10</div>
+    <div class="mw-timeline-simple-content">
+      <div class="mw-card mw-card-simple">
+        <h4 class="mw-mb-2">Website Launch</h4>
+        <p>
+          Deployed the initial version of our public website with responsive
+          design, SEO optimizations, and analytics integration.
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <div class="mw-timeline-simple-step">
+    <div class="mw-timeline-simple-date">2024-03-22</div>
+    <div class="mw-timeline-simple-content">
+      <div class="mw-card mw-card-simple">
+        <h4 class="mw-mb-2">v1.1 Release</h4>
+        <p>
+          Rolled out version 1.1 featuring performance improvements, a dark mode
+          toggle, and enhanced accessibility support.
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <div class="mw-timeline-simple-step">
+    <div class="mw-timeline-simple-date">2024-06-15</div>
+    <div class="mw-timeline-simple-content">
+      <div class="mw-card mw-card-simple">
+        <h4 class="mw-mb-2">DevCon 2024</h4>
+        <p>
+          Spoke at DevCon 2024 about “Scalable CSS Architecture” and
+          demonstrated our timeline component to 500+ attendees.
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <div class="mw-timeline-simple-step">
+    <div class="mw-timeline-simple-date">2024-10-05</div>
+    <div class="mw-timeline-simple-content">
+      <div class="mw-card mw-card-simple">
+        <h4 class="mw-mb-2">Hackathon Champion</h4>
+        <p>
+          Led a cross-functional team to victory in the annual internal
+          hackathon with a productivity plugin prototype.
+        </p>
+      </div>
+      <div class="mw-card mw-card-simple">
+        <h4 class="mw-mb-2">Hackathon Champion</h4>
+        <p>
+          Led a cross-functional team to victory in the annual internal
+          hackathon with a productivity plugin prototype.
+        </p>
+      </div>
+    </div>
+  </div>
+</div>

package/src/partials/typography-container.html

@@ -0,0 +1,66 @@
+<h3 class="mw-section-subtitle">Typography</h3>
+
+<div class="mw-grid-2-lg">
+  <div>
+    <div>
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      <h3>Heading 3</h3>
+      <h4>Heading 4</h4>
+      <h5>Heading 5</h5>
+      <h6>Heading 6</h6>
+    </div>
+    <blockquote>
+      This is a stylish quote with decorative quotation marks.
+    </blockquote>
+  </div>
+
+  <div class="mw-grid-stack mw-gap-2">
+    <p>
+      This is a standard paragraph with default styling. MaverickWave CSS
+      framework uses clean typography with good readability as a foundation for
+      all text elements.
+    </p>
+
+    <p class="mw-text-muted">
+      Secondary text uses a slightly muted color for less emphasis, perfect for
+      supporting content, captions, or metadata.
+    </p>
+
+    <p>
+      <strong>Bold text</strong> and <em>italic text</em> are supported as well,
+      allowing for proper content hierarchy and emphasis.
+    </p>
+
+    <p class="mw-text-light">This is a light text.</p>
+
+    <p class="mw-text-primary">
+      Text can be colored using utility classes to highlight important
+      information or match your brand.
+    </p>
+
+    <p class="mw-text-secondary">
+      Text can be colored using utility classes to highlight important
+      information or match your brand.
+    </p>
+
+    <p class="mw-text-danger">Very important error text!</p>
+
+    <p class="mw-text-color-dark">
+      This always remains the text color of the dark theme.
+    </p>
+
+    <p class="mw-text-color-light">
+      This always remains the text color of the light theme.
+    </p>
+
+    <p>
+      <span class="mw-text-xs">Extra Small Text</span><br />
+      <span class="mw-text-sm">Small Text</span><br />
+      <span class="mw-text-base">Base Text</span><br />
+      <span class="mw-text-md">Medium Text</span><br />
+      <span class="mw-text-lg">Large Text</span><br />
+      <span class="mw-text-xl">Extra Large Text</span>
+    </p>
+  </div>
+</div>

package/src/partials/utilities-container.html

@@ -0,0 +1,85 @@
+<h3 class="mw-section-subtitle">Utilities</h3>
+
+<div class="mw-grid-3-lg">
+  <div>
+    <h3 class="mw-mb-4">Spacing Utilities</h3>
+    <div class="mw-card mw-card-simple mw-mb-0">No margin bottom</div>
+    <div class="mw-card mw-card-simple mw-mb-2">Small margin bottom</div>
+    <div class="mw-card mw-card-simple mw-mb-4">Medium margin bottom</div>
+    <div class="mw-card mw-card-simple mw-mb-6">Large margin bottom</div>
+
+    <div class="mw-card mw-card-simple mw-p-2">Small padding</div>
+    <div class="mw-card mw-card-simple mw-p-4 mw-mt-4">Medium padding</div>
+    <div class="mw-card mw-card-simple mw-p-6 mw-mt-4">Large padding</div>
+  </div>
+
+  <div>
+    <h3 class="mw-mb-4">Display & Flex Utilities</h3>
+
+    <div class="mw-card mw-card-simple mw-mb-4">
+      <h4 class="mw-mb-2">Flex Row</h4>
+      <div class="mw-d-flex mw-justify-between mw-gap-3">
+        <div class="mw-card mw-card-simple mw-p-2">Item 1</div>
+        <div class="mw-card mw-card-simple mw-p-2">Item 2</div>
+        <div class="mw-card mw-card-simple mw-p-2">Item 3</div>
+      </div>
+    </div>
+
+    <div class="mw-card mw-card-simple mw-mb-4">
+      <h4 class="mw-mb-2">Flex Column</h4>
+      <div class="mw-d-flex mw-flex-column mw-gap-3">
+        <div class="mw-card mw-card-simple mw-p-2">Item 1</div>
+        <div class="mw-card mw-card-simple mw-p-2">Item 2</div>
+        <div class="mw-card mw-card-simple mw-p-2">Item 3</div>
+      </div>
+    </div>
+
+    <div class="mw-card mw-card-simple">
+      <h4 class="mw-mb-2">Alignment</h4>
+      <div
+        class="mw-d-flex mw-justify-center mw-items-center mw-gap-3"
+        style="height: 90px"
+      >
+        <div class="mw-card mw-card-simple mw-p-2">Centered</div>
+        <div class="mw-card mw-card-simple mw-p-2">Centered</div>
+      </div>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="mw-mb-4">Gap Utilities</h3>
+    <div class="mw-card mw-card-simple">
+      <h4 class="mw-mb-3">Different Gap Sizes (from 0 - 10)</h4>
+
+      <div class="mw-mb-4">
+        <p class="mw-mb-2">Small gap (gap-2)</p>
+        <div class="mw-d-flex mw-gap-2 mw-flex-wrap">
+          <div class="mw-card mw-card-simple">Item</div>
+          <div class="mw-card mw-card-simple">Item</div>
+          <div class="mw-card mw-card-simple">Item</div>
+          <div class="mw-card mw-card-simple">Item</div>
+        </div>
+      </div>
+
+      <div class="mw-mb-4">
+        <p class="mw-mb-2">Medium gap (gap-4)</p>
+        <div class="mw-d-flex mw-gap-4 mw-flex-wrap">
+          <div class="mw-card mw-card-simple">Item</div>
+          <div class="mw-card mw-card-simple">Item</div>
+          <div class="mw-card mw-card-simple">Item</div>
+          <div class="mw-card mw-card-simple">Item</div>
+        </div>
+      </div>
+
+      <div>
+        <p class="mw-mb-2">Large gap (gap-7)</p>
+        <div class="mw-d-flex mw-gap-7 mw-flex-wrap">
+          <div class="mw-card mw-card-simple">Item</div>
+          <div class="mw-card mw-card-simple">Item</div>
+          <div class="mw-card mw-card-simple">Item</div>
+          <div class="mw-card mw-card-simple">Item</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/src/scss/abstracts/_functions.scss

@@ -0,0 +1,37 @@
+@use 'sass:map';
+@use 'variables' as v;
+
+// Function to get a color from the colors map
+@function color($key) {
+  @return map.get(v.$base-colors, $key);
+}
+
+// Function to get a font size from the font-sizes map
+@function font-size($key) {
+  @return map.get(v.$font-sizes, $key);
+}
+
+// Function to get a font weight from the font-weights map
+@function font-weight($key) {
+  @return map.get(v.$font-weights, $key);
+}
+
+// Function to get a spacing value from the spacing map
+@function spacing($key) {
+  @return map.get(v.$spacing, $key);
+}
+
+// Function to get a breakpoint from the breakpoints map
+@function breakpoint($key) {
+  @return map.get(v.$breakpoints, $key);
+}
+
+// Function to get a radius value from the radius map
+@function radius($key) {
+  @return map.get(v.$radius, $key);
+}
+
+// Function to get a z-index value from the z-index map
+@function z-index($key) {
+  @return map.get(v.$z-index, $key);
+}

package/src/scss/abstracts/_index.scss

@@ -0,0 +1,3 @@
+@forward 'functions';
+@forward 'mixins';
+@forward 'variables';

package/src/scss/abstracts/_mixins.scss

@@ -0,0 +1,45 @@
+@use 'sass:map';
+@use 'variables' as v;
+
+// Media query mixins
+@mixin media-up($breakpoint) {
+  @media (min-width: map.get(v.$breakpoints, $breakpoint)) {
+    @content;
+  }
+}
+
+@mixin media-down($breakpoint) {
+  @media (max-width: map.get(v.$breakpoints, $breakpoint)) {
+    @content;
+  }
+}
+
+// Flexbox mixins
+@mixin flex(
+  $direction: row,
+  $justify: flex-start,
+  $align: stretch,
+  $wrap: nowrap
+) {
+  display: flex;
+  flex-direction: $direction;
+  justify-content: $justify;
+  align-items: $align;
+  flex-wrap: $wrap;
+}
+
+// Grid mixins
+@mixin grid($columns: 1, $gap: 1rem) {
+  display: grid;
+  grid-template-columns: repeat($columns, 1fr);
+  gap: $gap;
+}
+
+@mixin media-between($min, $max) {
+  $min-width: map.get(v.$breakpoints, $min);
+  $max-width: map.get(v.$breakpoints, $max) - 1px;
+
+  @media (min-width: $min-width) and (max-width: $max-width) {
+    @content;
+  }
+}

package/src/scss/abstracts/_variables.scss

@@ -0,0 +1,222 @@
+@use 'sass:map';
+@use 'sass:color';
+
+$mw-theme-mode: 'switchable' !default; // 'dark', 'light', or 'switchable'
+
+$mw-hero-image: url('https://images.unsplash.com/photo-1591638462868-19cfad9c49d1?q=80&w=1300&auto=format&fit=crop') !default;
+
+$primary-color: #1031bb;
+$secondary-color: #bb3110;
+$success-color: #28a745;
+$warning-color: #d4a310;
+$danger-color: #d72537;
+$info-color: #17a2b8;
+$gray-color: #565656;
+$dark-background: #0b111a;
+$dark-text-color: #d6dbdf;
+$light-background: #d2d1e1;
+$light-text-color: #1a1a1d;
+
+// Base colors that don't change between themes
+$base-colors: (
+  'primary-color': $primary-color,
+  'primary-color-hover': color.adjust(
+      $primary-color,
+      $lightness: -3%,
+      $alpha: -0.3
+    ),
+  'primary-background': color.adjust(
+      $primary-color,
+      $lightness: -8%,
+      $alpha: -0.8
+    ),
+  'primary-background-hover': color.adjust(
+      $primary-color,
+      $lightness: -4%,
+      $alpha: -0.5
+    ),
+  'primary-info-background': color.adjust(
+      $primary-color,
+      $lightness: -1%,
+      $alpha: -0.3
+    ),
+  'primary-text-color': $dark-text-color,
+  'secondary-color': $secondary-color,
+  'secondary-color-hover': color.adjust(
+      $secondary-color,
+      $lightness: -3%,
+      $alpha: -0.4
+    ),
+  'secondary-background': color.adjust(
+      $secondary-color,
+      $lightness: -8%,
+      $alpha: -0.8
+    ),
+  'secondary-background-hover': color.adjust(
+      $secondary-color,
+      $lightness: -3%,
+      $alpha: -0.6
+    ),
+  'secondary-info-background': color.adjust(
+      $secondary-color,
+      $lightness: -8%,
+      $alpha: -0.3
+    ),
+  'secondary-text-color': $dark-text-color,
+  'gray-color': $gray-color,
+  'white-color': $dark-text-color,
+  'gray-background': color.adjust($gray-color, $lightness: +5%, $alpha: -0.4),
+  'section-alternate-pattern': color.adjust($gray-color, $alpha: -0.55),
+  'form-elements-background': color.adjust($light-background, $lightness: +15%),
+  'form-elements-color': color.adjust($light-text-color, $lightness: -2%),
+);
+
+$status-colors: (
+  'success-color': $success-color,
+  'success-info-background': color.adjust(
+      $success-color,
+      $lightness: -9%,
+      $alpha: -0.1
+    ),
+  'success-info-background-hover': color.adjust(
+      $success-color,
+      $lightness: +4%,
+      $alpha: -0.3
+    ),
+  'warning-color': $warning-color,
+  'warning-info-background': color.adjust(
+      $warning-color,
+      $lightness: -9%,
+      $alpha: -0.1
+    ),
+  'danger-color': $danger-color,
+  'danger-info-background': color.adjust(
+      $danger-color,
+      $lightness: -9%,
+      $alpha: -0.1
+    ),
+  'info-color': $info-color,
+  'info-info-background': color.adjust(
+      $info-color,
+      $lightness: -9%,
+      $alpha: -0.1
+    ),
+  'info-info-background-hover': color.adjust(
+      $info-color,
+      $lightness: +4%,
+      $alpha: -0.3
+    ),
+);
+
+// Dark theme colors
+$dark-theme-colors: (
+  'page-background': $dark-background,
+  'hero-overlay-background': color.adjust($dark-background, $alpha: -0.7),
+  'card-background': color.adjust($dark-background, $lightness: +5%),
+  'footer-background': color.adjust($dark-background, $lightness: +3%),
+  'border': color.adjust($dark-background, $lightness: +15%),
+  'shadow': color.adjust($dark-text-color, $alpha: -0.7),
+  'text-color': $dark-text-color,
+  'text-muted-color': color.adjust($dark-text-color, $lightness: -26%),
+);
+
+// Light theme colors
+$light-theme-colors: (
+  'page-background': $light-background,
+  'hero-overlay-background': color.adjust($light-background, $alpha: -0.7),
+  'card-background': color.adjust($light-background, $lightness: +6%),
+  'footer-background': color.adjust($light-background, $lightness: -2%),
+  'border': color.adjust($light-background, $lightness: -13%),
+  'shadow': color.adjust($light-text-color, $alpha: -0.7),
+  'text-color': $light-text-color,
+  'text-muted-color': color.adjust($light-text-color, $lightness: +29%),
+);
+
+// Typography
+$font-family: 'Poppins', sans-serif;
+$font-sizes: (
+  '3xs': 0.6rem,
+  '2xs': 0.7rem,
+  'xs': 0.8rem,
+  'sm': 0.9rem,
+  'base': 1rem,
+  'md': 1.1rem,
+  'lg': 1.3rem,
+  'xl': 1.5rem,
+  '2xl': 1.8rem,
+  '3xl': 2.2rem,
+  '4xl': 2.5rem,
+  '5xl': 3rem,
+  '6xl': 4.4rem,
+);
+$font-weights: (
+  'bold': 700,
+  'medium': 500,
+  'normal': 400,
+  'light': 300,
+);
+
+// Spacing
+$spacing: (
+  '-6': -2.25rem,
+  '-5': -1.75rem,
+  '-4': -1.25rem,
+  '-3': -0.75rem,
+  '-2': -0.5rem,
+  '-1': -0.2rem,
+  '0': 0,
+  '1': 0.2rem,
+  '2': 0.5rem,
+  '3': 0.75rem,
+  '4': 1rem,
+  '5': 1.5rem,
+  '6': 2rem,
+  '7': 2.6rem,
+  '8': 3.3rem,
+  '9': 4.5rem,
+  '10': 6rem,
+  '11': 8.5rem,
+  '12': 11rem,
+);
+
+// Breakpoints
+$breakpoints: (
+  'xs': 375px,
+  // Extra small devices (smaller phones)
+  'sm': 576px,
+  // Small devices (landscape phones)
+  'md': 768px,
+  // Medium devices (tablets)
+  'lg': 992px,
+  // Large devices (desktops)
+  'xl': 1200px,
+  // Extra large devices (large desktops)
+  '2xl': 1400px,
+);
+
+// Border radius
+$radius: (
+  'none': 0,
+  'xs': 2px,
+  'sm': 5px,
+  'md': 10px,
+  'lg': 15px,
+  'xl': 20px,
+  '2xl': 30px,
+  'full': 50%,
+);
+
+// Transitions
+$transition-default: all 0.3s ease;
+
+// Z-index
+$z-index: (
+  'lift': 3,
+  'card': 10,
+  'menu': 30,
+  'header': 100,
+  'spinner': 300,
+  'modal': 500,
+  'tooltip': 700,
+  'alert': 900,
+);