maverick-wave 3.1.0 → 3.1.2

package/src/scss/components/_spinners.scss

@@ -1,6 +1,6 @@
 @use '../abstracts' as *;
 
-$_size-default: 4rem;
+$_size-default: 4.5rem;
 $_size-sm: 2.5rem;
 $_size-lg: 7.5rem;
 
@@ -12,7 +12,7 @@ $_size-lg: 7.5rem;
   &-border {
     width: $_size-default;
     height: $_size-default;
-    border: 0.4rem solid var(--mw-gray-background);
+    border: 0.5rem solid var(--mw-gray-background);
     border-radius: radius('full');
     border-top-color: var(--mw-primary-color);
     animation: mw-spin 1.2s linear infinite;
@@ -28,7 +28,7 @@ $_size-lg: 7.5rem;
     &.mw-spinner-lg {
       width: $_size-lg;
       height: $_size-lg;
-      border-width: 0.6rem;
+      border-width: 0.7rem;
       animation: mw-spin 1s linear infinite;
     }
 
@@ -54,7 +54,7 @@ $_size-lg: 7.5rem;
       background: var(--mw-primary-color);
       border-radius: radius('full');
       display: inline-block;
-      margin: spacing('0') 0.2rem;
+      margin: spacing('0') spacing('2');
       animation: mw-bounce 1.4s infinite ease-in-out both;
 
       &:nth-child(1) {
@@ -74,7 +74,7 @@ $_size-lg: 7.5rem;
       > div {
         width: 0.75rem;
         height: 0.75rem;
-        margin: spacing('0') 0.1rem;
+        margin: spacing('0') spacing('1');
       }
     }
 
@@ -85,7 +85,7 @@ $_size-lg: 7.5rem;
       > div {
         width: 1.5rem;
         height: 1.5rem;
-        margin: spacing('0') 0.3rem;
+        margin: spacing('0') spacing('3');
       }
     }
 
@@ -110,7 +110,7 @@ $_size-lg: 7.5rem;
       width: $_size-default;
       height: $_size-default;
       border-radius: radius('full');
-      border: 0.4rem solid var(--mw-primary-color);
+      border: 0.5rem solid var(--mw-primary-color);
       border-color: var(--mw-primary-color) transparent var(--mw-primary-color)
         transparent;
       animation: mw-spin 1.5s linear infinite;
@@ -135,7 +135,7 @@ $_size-lg: 7.5rem;
       &:after {
         width: $_size-lg;
         height: $_size-lg;
-        border-width: 0.5rem;
+        border-width: 0.7rem;
       }
     }
 

package/src/scss/components/_stepper.scss

@@ -1,7 +1,7 @@
 @use 'sass:math';
 @use '../abstracts' as *;
 
-// ===== Horizontal Stepper =====
+// Horizontal
 .mw-stepper {
   display: flex;
   align-items: flex-start;
@@ -31,8 +31,8 @@
 
   // Step circle with number or icon
   &-indicator {
-    width: spacing('7');
-    height: spacing('7');
+    width: 28px;
+    height: 28px;
     border-radius: radius('full');
     border: 2px solid var(--mw-border);
     background: var(--mw-card-background);
@@ -63,7 +63,7 @@
     font-size: font-size('xs');
     color: var(--mw-text-muted-color);
     text-align: center;
-    line-height: 1.3;
+    line-height: 1.2;
     transition: color 0.3s ease;
 
     &.mw-active {
@@ -83,7 +83,7 @@
   }
 }
 
-// ===== Vertical Stepper =====
+// Vertical
 .mw-stepper-vertical {
   display: flex;
   flex-direction: column;
@@ -124,6 +124,7 @@
   // Content area next to the indicator
   .mw-stepper-content {
     flex: 1;
+    margin-left: spacing('1');
 
     &-title {
       font-size: font-size('base');

package/src/scss/components/_tables.scss

@@ -9,7 +9,7 @@
 
   th,
   td {
-    padding: spacing('2') spacing('3');
+    padding: spacing('2');
     text-align: left;
     border: 1px solid var(--mw-border);
     color: var(--mw-text-muted-color);
@@ -19,6 +19,7 @@
     font-weight: font-weight('medium');
     color: var(--mw-primary-text-color);
     background: var(--mw-primary-color);
+    user-select: none;
   }
 
   // Zebra striping
@@ -36,7 +37,7 @@
   @include media-down('sm') {
     th,
     td {
-      padding: spacing('1') spacing('3');
+      padding: spacing('1') spacing('2');
       font-size: font-size('xs');
     }
   }
@@ -69,6 +70,7 @@
       margin-bottom: spacing('3');
       box-shadow: 0 5px 7px var(--mw-shadow);
       background: var(--mw-card-background);
+      cursor: text;
     }
 
     // Style each cell as a row in the card

package/src/scss/components/_tabs.scss

@@ -21,7 +21,7 @@
   }
 
   &-nav-item {
-    padding: spacing('3');
+    padding: spacing('3') spacing('4');
     cursor: pointer;
     font-weight: font-weight('medium');
     color: var(--mw-text-muted-color);
@@ -41,6 +41,7 @@
 
   &-content {
     flex: 1;
+    margin-top: spacing('1');
   }
 
   &-panel {
@@ -48,7 +49,7 @@
 
     &.active {
       display: block;
-      animation: fadeIn 1.4s ease;
+      animation: fadeIn 1.1s ease;
     }
   }
 
@@ -109,7 +110,7 @@
 
       @include media-down('sm') {
         width: 100%;
-        margin-top: spacing('4');
+        margin-top: spacing('3');
       }
     }
   }
@@ -118,12 +119,12 @@
   &-pills {
     .mw-tabs-nav {
       border-bottom: none;
-      gap: spacing('2');
+      gap: spacing('3');
     }
 
     .mw-tabs-nav-item {
-      border-radius: radius('2xl');
-      height: 40px;
+      border-radius: radius('xl');
+      padding: spacing('4') spacing('5');
       line-height: 0.9;
       border: 1px solid var(--mw-primary-color-hover);
       background: var(--mw-card-background);

package/src/scss/components/_tags.scss

@@ -34,12 +34,19 @@
 .mw-tags-remove {
   flex-shrink: 0;
   margin-left: spacing('3');
+
+  i,
+  fa-icon,
+  svg {
+    font-size: 0.7rem !important;
+  }
 }
 
 .mw-tags-icon {
   display: inline-flex;
-  margin-right: spacing('1');
-  font-size: 1.1em;
+  margin-left: spacing('1');
+  margin-right: spacing('2');
+  font-size: 0.9rem;
 }
 
 // Color variants
@@ -87,7 +94,7 @@
     i,
     fa-icon,
     svg {
-      font-size: 0.8rem !important;
+      font-size: 0.9rem !important;
     }
   }
 }

package/src/scss/components/_techstack-bucket.scss

@@ -3,7 +3,7 @@
 .mw-techstack {
   display: flex;
   flex-wrap: wrap;
-  gap: spacing('3');
+  gap: spacing('4');
 
   // Base item
   &-item {
@@ -20,8 +20,8 @@
     min-height: 50px;
 
     .mw-techstack-logo {
-      width: 35px;
-      height: 35px;
+      width: 32px;
+      height: 32px;
     }
 
     .mw-techstack-name {
@@ -50,8 +50,8 @@
   // Small variant
   &-item-sm {
     padding: spacing('1') spacing('2');
-    min-width: 30px;
-    min-height: 30px;
+    min-width: 32px;
+    min-height: 32px;
     border-radius: radius('sm');
 
     .mw-techstack-logo {
@@ -105,6 +105,7 @@
 .mw-techstack-bucket {
   display: flex;
   flex-wrap: wrap;
+  justify-content: center;
   gap: spacing('1');
   padding: spacing('3');
   position: relative;
@@ -112,16 +113,16 @@
   border-left: 2px solid var(--mw-dark-border);
   border-right: 2px solid var(--mw-dark-border);
   border-bottom: 4px solid var(--mw-dark-border);
-  border-top: 2px dashed transparent;
+  border-top: 2px solid transparent;
   border-radius: radius('none') radius('none') radius('xl') radius('xl');
 
   &::before {
     content: '';
     position: absolute;
-    top: -1px;
-    left: 0;
-    right: 0;
-    height: 1px;
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    height: 2px;
     background: linear-gradient(
       90deg,
       var(--mw-dark-border) 0%,
@@ -135,7 +136,7 @@
   &-dashed {
     background: transparent;
     border: 2px dashed var(--mw-border);
-    border-radius: radius('lg');
+    border-radius: radius('xl');
     border-top: 2px dashed var(--mw-border);
 
     &::before {

package/src/scss/components/_theme-toggle.scss

@@ -3,6 +3,7 @@
 
 .mw-theme-toggle {
   position: relative;
+  top: 1px;
   width: 60px;
   height: 30px;
   border-radius: radius('lg');
@@ -12,14 +13,14 @@
   display: flex;
   align-items: center;
   transition: var(--mw-transition);
-  margin: spacing('1') spacing('4') spacing('0') spacing('4');
+  margin-right: spacing('5');
   @include media-down('lg') {
-    margin: spacing('1') spacing('2') spacing('0') spacing('4');
+    margin-right: spacing('6');
   }
 
   &-slider {
     position: absolute;
-    left: spacing('1');
+    left: 3px;
     width: 20px;
     height: 20px;
     border-radius: radius('full');

package/src/scss/components/_tiles.scss

@@ -4,9 +4,9 @@
 .mw-tiles {
   width: 80%;
   margin: spacing('0') auto;
-  padding: spacing('1');
+  padding: spacing('3');
   display: grid;
-  gap: spacing('5');
+  gap: spacing('6');
   grid-template-columns: repeat(3, 1fr); // Base 3 columns
 
   @include media-down('lg') {
@@ -56,7 +56,7 @@
 .mw-tile {
   background: var(--mw-card-background);
   border-radius: radius('sm') radius('xl') radius('sm') radius('xl');
-  padding: spacing('4');
+  padding: spacing('5');
   box-shadow: 0 5px 10px var(--mw-shadow);
   transition: var(--mw-transition);
   border: 1px solid var(--mw-border);
@@ -138,7 +138,7 @@
 
   // Size variants
   &-sm {
-    padding: spacing('3');
+    padding: spacing('4');
 
     .mw-tile-img {
       width: 80px;
@@ -166,7 +166,7 @@
   }
 
   &-lg {
-    padding: spacing('5');
+    padding: spacing('6');
 
     .mw-tile-img {
       width: 120px;