@nuvoui/core 1.1.4 → 1.1.6

package/src/styles/mixins-map.scss

@@ -8,8 +8,10 @@
 @use 'utilities/animations' as *;
 @use 'utilities/borders' as *;
 @use 'utilities/colors' as *;
+@use 'utilities/container-queries' as *;
 @use 'utilities/display' as *;
 @use 'utilities/functions' as *;
+@use 'utilities/helpers' as *;
 @use 'utilities/media-queries' as *;
 @use 'utilities/opacity' as *;
 @use 'utilities/position' as *;
@@ -48,12 +50,6 @@
       @include media-up($breakpoint) {
         @if $mixin-str == 'container-base' {
           @include container-base;
-        } @else if $mixin-str == 'container' {
-          @include container;
-        } @else if $mixin-str == 'container-flex' {
-          @include container-flex;
-        } @else if $mixin-str == 'container-grid' {
-          @include container-grid;
         } @else if $mixin-str == 'flex' {
           @include flex;
         } @else if $mixin-str == 'flex-inline' {
@@ -84,16 +80,30 @@
           @include around;
         } @else if $mixin-str == 'evenly' {
           @include evenly;
-        } @else if $mixin-str == 'align-start' {
-          @include align-start;
-        } @else if $mixin-str == 'align-end' {
-          @include align-end;
-        } @else if $mixin-str == 'align-center' {
-          @include align-center;
-        } @else if $mixin-str == 'align-stretch' {
-          @include align-stretch;
-        } @else if $mixin-str == 'align-baseline' {
-          @include align-baseline;
+        } @else if $mixin-str == 'x-start' {
+          @include x-start;
+        } @else if $mixin-str == 'x-end' {
+          @include x-end;
+        } @else if $mixin-str == 'x-center' {
+          @include x-center;
+        } @else if $mixin-str == 'x-stretch' {
+          @include x-stretch;
+        } @else if $mixin-str == 'x-baseline' {
+          @include x-baseline;
+        } @else if $mixin-str == 'x-content-start' {
+          @include x-content-start;
+        } @else if $mixin-str == 'x-content-end' {
+          @include x-content-end;
+        } @else if $mixin-str == 'x-content-center' {
+          @include x-content-center;
+        } @else if $mixin-str == 'x-content-between' {
+          @include x-content-between;
+        } @else if $mixin-str == 'x-content-around' {
+          @include x-content-around;
+        } @else if $mixin-str == 'x-content-evenly' {
+          @include x-content-evenly;
+        } @else if $mixin-str == 'x-content-stretch' {
+          @include x-content-stretch;
         } @else if $mixin-str == 'self-auto' {
           @include self-auto;
         } @else if $mixin-str == 'self-start' {
@@ -104,6 +114,8 @@
           @include self-center;
         } @else if $mixin-str == 'self-stretch' {
           @include self-stretch;
+        } @else if $mixin-str == 'self-baseline' {
+          @include self-baseline;
         } @else if $mixin-str == 'shrink' {
           @include shrink;
         } @else if $mixin-str == 'shrink-0' {
@@ -122,26 +134,30 @@
           @include grid;
         } @else if $mixin-str == 'grid-inline' {
           @include grid-inline;
-        } @else if $mixin-str == 'grid-flow-row' {
-          @include grid-flow-row;
-        } @else if $mixin-str == 'grid-flow-col' {
-          @include grid-flow-col;
-        } @else if $mixin-str == 'grid-flow-dense' {
-          @include grid-flow-dense;
-        } @else if $mixin-str == 'd-none' {
-          @include d-none;
-        } @else if $mixin-str == 'd-block' {
-          @include d-block;
-        } @else if $mixin-str == 'd-inline' {
-          @include d-inline;
-        } @else if $mixin-str == 'd-inline-block' {
-          @include d-inline-block;
+        } @else if $mixin-str == 'flow-in-row' {
+          @include flow-in-row;
+        } @else if $mixin-str == 'flow-in-col' {
+          @include flow-in-col;
+        } @else if $mixin-str == 'flow-dense-items' {
+          @include flow-dense-items;
+        } @else if $mixin-str == 'hide' {
+          @include hide;
+        } @else if $mixin-str == 'block' {
+          @include block;
+        } @else if $mixin-str == 'inline' {
+          @include inline;
+        } @else if $mixin-str == 'inline-block' {
+          @include inline-block;
+        } @else if $mixin-str == 'show' {
+          @include show;
         } @else if $mixin-str == 'd-tbl' {
           @include d-tbl;
         } @else if $mixin-str == 'd-tbl-row' {
           @include d-tbl-row;
         } @else if $mixin-str == 'd-tbl-cell' {
           @include d-tbl-cell;
+        } @else if $mixin-str == 'overflow-hidden' {
+          @include overflow-hidden;
         } @else if $mixin-str == 'touch' {
           @include touch;
         } @else if $mixin-str == 'print' {
@@ -190,22 +206,6 @@
           @include mr-auto;
         } @else if $mixin-str == 'mx-auto' {
           @include mx-auto;
-        } @else if $mixin-str == 'text-xs' {
-          @include text-xs;
-        } @else if $mixin-str == 'text-sm' {
-          @include text-sm;
-        } @else if $mixin-str == 'text-md' {
-          @include text-md;
-        } @else if $mixin-str == 'text-lg' {
-          @include text-lg;
-        } @else if $mixin-str == 'text-xl' {
-          @include text-xl;
-        } @else if $mixin-str == 'text-2xl' {
-          @include text-2xl;
-        } @else if $mixin-str == 'text-3xl' {
-          @include text-3xl;
-        } @else if $mixin-str == 'text-4xl' {
-          @include text-4xl;
         } @else if $mixin-str == 'font-thin' {
           @include font-thin;
         } @else if $mixin-str == 'font-extralight' {
@@ -264,31 +264,41 @@
           @include no-underline;
         } @else if $mixin-str == 'truncate' {
           @include truncate;
+        } @else if str.index($mixin-str, 'container(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include container(str.unquote($value));
         } @else if str.index($mixin-str, 'w-col(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
           @include w-col(str.unquote($value));
-        } @else if str.index($mixin-str, 'grid-cols(') == 1 {
+        } @else if str.index($mixin-str, 'cols(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include cols(str.unquote($value));
+        } @else if str.index($mixin-str, 'rows(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
-          @include grid-cols(str.unquote($value));
-        } @else if str.index($mixin-str, 'grid-rows(') == 1 {
+          @include rows(str.unquote($value));
+        } @else if str.index($mixin-str, 'grid-cols-custom(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
-          @include grid-rows(str.unquote($value));
-        } @else if str.index($mixin-str, 'grid-auto-fit(') == 1 {
+          @include grid-cols-custom(str.unquote($value));
+        } @else if str.index($mixin-str, 'auto-fit(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
-          @include grid-auto-fit(str.unquote($value));
-        } @else if str.index($mixin-str, 'grid-auto-fill(') == 1 {
+          @include auto-fit(str.unquote($value));
+        } @else if str.index($mixin-str, 'auto-fill(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
-          @include grid-auto-fill(str.unquote($value));
+          @include auto-fill(str.unquote($value));
         } @else if str.index($mixin-str, 'justify-items(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
@@ -304,16 +314,16 @@
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
           @include place-items(str.unquote($value));
-        } @else if str.index($mixin-str, 'col-span(') == 1 {
+        } @else if str.index($mixin-str, 'span-col(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
-          @include col-span(str.unquote($value));
-        } @else if str.index($mixin-str, 'row-span(') == 1 {
+          @include span-col(str.unquote($value));
+        } @else if str.index($mixin-str, 'span-row(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
-          @include row-span(str.unquote($value));
+          @include span-row(str.unquote($value));
         } @else if str.index($mixin-str, 'col-start(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
@@ -334,6 +344,21 @@
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
           @include row-end(str.unquote($value));
+        } @else if str.index($mixin-str, 'grid-position(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include grid-position(str.unquote($value));
+        } @else if str.index($mixin-str, 'position-col(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include position-col(str.unquote($value));
+        } @else if str.index($mixin-str, 'position-row(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include position-row(str.unquote($value));
         } @else if str.index($mixin-str, 'generate-bounce-keyframes(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
@@ -369,6 +394,31 @@
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
           @include filter(str.unquote($value));
+        } @else if str.index($mixin-str, 'container-up(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include container-up(str.unquote($value));
+        } @else if str.index($mixin-str, 'container-down(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include container-down(str.unquote($value));
+        } @else if str.index($mixin-str, 'container-between(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include container-between(str.unquote($value));
+        } @else if str.index($mixin-str, 'container-only(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include container-only(str.unquote($value));
+        } @else if str.index($mixin-str, 'container-query(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include container-query(str.unquote($value));
         } @else if str.index($mixin-str, 'media-up(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
@@ -389,11 +439,6 @@
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
           @include media-only(str.unquote($value));
-        } @else if str.index($mixin-str, 'container-query(') == 1 {
-          $start: str.index($mixin-str, '(') + 1;
-          $end: str.length($mixin-str) - 1;
-          $value: str.slice($mixin-str, $start, $end);
-          @include container-query(str.unquote($value));
         } @else if str.index($mixin-str, 'supports(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
@@ -599,17 +644,16 @@
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
           @include gap-y(str.unquote($value));
+        } @else if str.index($mixin-str, 'text-size(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include text-size(str.unquote($value));
         }
       }
     } @else {
         @if $mixin-str == 'container-base' {
           @include container-base;
-        } @else if $mixin-str == 'container' {
-          @include container;
-        } @else if $mixin-str == 'container-flex' {
-          @include container-flex;
-        } @else if $mixin-str == 'container-grid' {
-          @include container-grid;
         } @else if $mixin-str == 'flex' {
           @include flex;
         } @else if $mixin-str == 'flex-inline' {
@@ -640,16 +684,30 @@
           @include around;
         } @else if $mixin-str == 'evenly' {
           @include evenly;
-        } @else if $mixin-str == 'align-start' {
-          @include align-start;
-        } @else if $mixin-str == 'align-end' {
-          @include align-end;
-        } @else if $mixin-str == 'align-center' {
-          @include align-center;
-        } @else if $mixin-str == 'align-stretch' {
-          @include align-stretch;
-        } @else if $mixin-str == 'align-baseline' {
-          @include align-baseline;
+        } @else if $mixin-str == 'x-start' {
+          @include x-start;
+        } @else if $mixin-str == 'x-end' {
+          @include x-end;
+        } @else if $mixin-str == 'x-center' {
+          @include x-center;
+        } @else if $mixin-str == 'x-stretch' {
+          @include x-stretch;
+        } @else if $mixin-str == 'x-baseline' {
+          @include x-baseline;
+        } @else if $mixin-str == 'x-content-start' {
+          @include x-content-start;
+        } @else if $mixin-str == 'x-content-end' {
+          @include x-content-end;
+        } @else if $mixin-str == 'x-content-center' {
+          @include x-content-center;
+        } @else if $mixin-str == 'x-content-between' {
+          @include x-content-between;
+        } @else if $mixin-str == 'x-content-around' {
+          @include x-content-around;
+        } @else if $mixin-str == 'x-content-evenly' {
+          @include x-content-evenly;
+        } @else if $mixin-str == 'x-content-stretch' {
+          @include x-content-stretch;
         } @else if $mixin-str == 'self-auto' {
           @include self-auto;
         } @else if $mixin-str == 'self-start' {
@@ -660,6 +718,8 @@
           @include self-center;
         } @else if $mixin-str == 'self-stretch' {
           @include self-stretch;
+        } @else if $mixin-str == 'self-baseline' {
+          @include self-baseline;
         } @else if $mixin-str == 'shrink' {
           @include shrink;
         } @else if $mixin-str == 'shrink-0' {
@@ -678,26 +738,30 @@
           @include grid;
         } @else if $mixin-str == 'grid-inline' {
           @include grid-inline;
-        } @else if $mixin-str == 'grid-flow-row' {
-          @include grid-flow-row;
-        } @else if $mixin-str == 'grid-flow-col' {
-          @include grid-flow-col;
-        } @else if $mixin-str == 'grid-flow-dense' {
-          @include grid-flow-dense;
-        } @else if $mixin-str == 'd-none' {
-          @include d-none;
-        } @else if $mixin-str == 'd-block' {
-          @include d-block;
-        } @else if $mixin-str == 'd-inline' {
-          @include d-inline;
-        } @else if $mixin-str == 'd-inline-block' {
-          @include d-inline-block;
+        } @else if $mixin-str == 'flow-in-row' {
+          @include flow-in-row;
+        } @else if $mixin-str == 'flow-in-col' {
+          @include flow-in-col;
+        } @else if $mixin-str == 'flow-dense-items' {
+          @include flow-dense-items;
+        } @else if $mixin-str == 'hide' {
+          @include hide;
+        } @else if $mixin-str == 'block' {
+          @include block;
+        } @else if $mixin-str == 'inline' {
+          @include inline;
+        } @else if $mixin-str == 'inline-block' {
+          @include inline-block;
+        } @else if $mixin-str == 'show' {
+          @include show;
         } @else if $mixin-str == 'd-tbl' {
           @include d-tbl;
         } @else if $mixin-str == 'd-tbl-row' {
           @include d-tbl-row;
         } @else if $mixin-str == 'd-tbl-cell' {
           @include d-tbl-cell;
+        } @else if $mixin-str == 'overflow-hidden' {
+          @include overflow-hidden;
         } @else if $mixin-str == 'touch' {
           @include touch;
         } @else if $mixin-str == 'print' {
@@ -746,22 +810,6 @@
           @include mr-auto;
         } @else if $mixin-str == 'mx-auto' {
           @include mx-auto;
-        } @else if $mixin-str == 'text-xs' {
-          @include text-xs;
-        } @else if $mixin-str == 'text-sm' {
-          @include text-sm;
-        } @else if $mixin-str == 'text-md' {
-          @include text-md;
-        } @else if $mixin-str == 'text-lg' {
-          @include text-lg;
-        } @else if $mixin-str == 'text-xl' {
-          @include text-xl;
-        } @else if $mixin-str == 'text-2xl' {
-          @include text-2xl;
-        } @else if $mixin-str == 'text-3xl' {
-          @include text-3xl;
-        } @else if $mixin-str == 'text-4xl' {
-          @include text-4xl;
         } @else if $mixin-str == 'font-thin' {
           @include font-thin;
         } @else if $mixin-str == 'font-extralight' {
@@ -820,31 +868,41 @@
           @include no-underline;
         } @else if $mixin-str == 'truncate' {
           @include truncate;
+        } @else if str.index($mixin-str, 'container(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include container(str.unquote($value));
         } @else if str.index($mixin-str, 'w-col(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
           @include w-col(str.unquote($value));
-        } @else if str.index($mixin-str, 'grid-cols(') == 1 {
+        } @else if str.index($mixin-str, 'cols(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include cols(str.unquote($value));
+        } @else if str.index($mixin-str, 'rows(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
-          @include grid-cols(str.unquote($value));
-        } @else if str.index($mixin-str, 'grid-rows(') == 1 {
+          @include rows(str.unquote($value));
+        } @else if str.index($mixin-str, 'grid-cols-custom(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
-          @include grid-rows(str.unquote($value));
-        } @else if str.index($mixin-str, 'grid-auto-fit(') == 1 {
+          @include grid-cols-custom(str.unquote($value));
+        } @else if str.index($mixin-str, 'auto-fit(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
-          @include grid-auto-fit(str.unquote($value));
-        } @else if str.index($mixin-str, 'grid-auto-fill(') == 1 {
+          @include auto-fit(str.unquote($value));
+        } @else if str.index($mixin-str, 'auto-fill(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
-          @include grid-auto-fill(str.unquote($value));
+          @include auto-fill(str.unquote($value));
         } @else if str.index($mixin-str, 'justify-items(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
@@ -860,16 +918,16 @@
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
           @include place-items(str.unquote($value));
-        } @else if str.index($mixin-str, 'col-span(') == 1 {
+        } @else if str.index($mixin-str, 'span-col(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
-          @include col-span(str.unquote($value));
-        } @else if str.index($mixin-str, 'row-span(') == 1 {
+          @include span-col(str.unquote($value));
+        } @else if str.index($mixin-str, 'span-row(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
-          @include row-span(str.unquote($value));
+          @include span-row(str.unquote($value));
         } @else if str.index($mixin-str, 'col-start(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
@@ -890,6 +948,21 @@
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
           @include row-end(str.unquote($value));
+        } @else if str.index($mixin-str, 'grid-position(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include grid-position(str.unquote($value));
+        } @else if str.index($mixin-str, 'position-col(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include position-col(str.unquote($value));
+        } @else if str.index($mixin-str, 'position-row(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include position-row(str.unquote($value));
         } @else if str.index($mixin-str, 'generate-bounce-keyframes(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
@@ -925,6 +998,31 @@
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
           @include filter(str.unquote($value));
+        } @else if str.index($mixin-str, 'container-up(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include container-up(str.unquote($value));
+        } @else if str.index($mixin-str, 'container-down(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include container-down(str.unquote($value));
+        } @else if str.index($mixin-str, 'container-between(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include container-between(str.unquote($value));
+        } @else if str.index($mixin-str, 'container-only(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include container-only(str.unquote($value));
+        } @else if str.index($mixin-str, 'container-query(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include container-query(str.unquote($value));
         } @else if str.index($mixin-str, 'media-up(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
@@ -945,11 +1043,6 @@
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
           @include media-only(str.unquote($value));
-        } @else if str.index($mixin-str, 'container-query(') == 1 {
-          $start: str.index($mixin-str, '(') + 1;
-          $end: str.length($mixin-str) - 1;
-          $value: str.slice($mixin-str, $start, $end);
-          @include container-query(str.unquote($value));
         } @else if str.index($mixin-str, 'supports(') == 1 {
           $start: str.index($mixin-str, '(') + 1;
           $end: str.length($mixin-str) - 1;
@@ -1155,6 +1248,11 @@
           $end: str.length($mixin-str) - 1;
           $value: str.slice($mixin-str, $start, $end);
           @include gap-y(str.unquote($value));
+        } @else if str.index($mixin-str, 'text-size(') == 1 {
+          $start: str.index($mixin-str, '(') + 1;
+          $end: str.length($mixin-str) - 1;
+          $value: str.slice($mixin-str, $start, $end);
+          @include text-size(str.unquote($value));
         } @else {
             @warn "Mixin '#{$mixin}' is not defined.";
         }

package/src/styles/themes/_theme.scss

@@ -5,8 +5,6 @@
 @use '../utilities/variables' as *;
 
 
- 
-
 // Generate scales for primitives
 $colors-primitives: ();
 
@@ -40,6 +38,24 @@ $colors-primitives: ();
   --button-text-color: var(--gray-100);
   --link-color: var(--primary);
   --link-hover-color: var(--primary-600);
+
+
+  &::-webkit-scrollbar {
+    width: 12px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var(--background); // Light background
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #888; // Dark gray thumb
+    border-radius: 6px;
+    border: 3px solid var(--background); // Light background
+  }
+
+  scrollbar-width: thin;
+  scrollbar-color: #888 var(--background); // Dark gray thumb, light background
 }
 
 [data-theme="dark"] {
@@ -54,6 +70,17 @@ $colors-primitives: ();
   --button-text-color: var(--gray-200);
   --link-color: var(--primary);
   --link-hover-color: var(--primary-400);
+
+  &::-webkit-scrollbar-track {
+    background: var(--background);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #555;
+    border: 3px solid var(--background);
+  }
+
+  scrollbar-color: #555 var(--background); 
 }
 
 // --font-family-heading: var(--font-family-base);

package/src/styles/utilities/_borders.scss

@@ -20,13 +20,10 @@
   
 // Responsive Position Classes
 @each $breakpoint, $width in $breakpoints {
-    @media (min-width: $width) {
- 
-        @each $i in 0 1 2 4 8 {
-            .border-#{$i}\@#{$breakpoint} { @include border($i); }
-        }
+    @media (min-width: #{$width}) {
         @each $i in 0 2 3 4 5 10 15 20 25 {
             .rounded-#{$i}\@#{$breakpoint} { @include border($i); }
         }
+        .rounded\@#{$breakpoint} { @include border(0.25rem); }
     }
 }

package/src/styles/utilities/_colors.scss

@@ -42,8 +42,8 @@
 
 
 // Color Relationship Functions
-@function find-text-color($background) {
-    $luminance: luminance($background);
+@function find-text-color($color) {
+    $luminance: luminance($color);
     @return if($luminance > 0.55, #000, #fff);
 }
 
@@ -61,12 +61,12 @@
 }
 
 // Context-Aware Colors
-@mixin adaptive-contrast($background) {
-    background: $background;
-    color: find-text-color($background);
+@mixin adaptive-contrast($color) {
+    background: $color;
+    color: find-text-color($color);
     
     @media (prefers-contrast: more) {
-        $high-contrast: adjust-contrast($background, 20%);
+        $high-contrast: adjust-contrast($color, 20%);
         
         background: $high-contrast;
     }