@nuvoui/core 1.1.3 → 1.1.5

package/src/styles/mixins-map.scss

@@ -4,8 +4,6 @@
 @use 'layouts/container' as *;
 @use 'layouts/flex' as *;
 @use 'layouts/grid' as *;
-@use 'themes/dark' as *;
-@use 'themes/light' as *;
 @use 'themes/theme' as *;
 @use 'utilities/animations' as *;
 @use 'utilities/borders' as *;
@@ -50,12 +48,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' {
@@ -86,16 +78,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' {
@@ -124,12 +130,12 @@
           @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 == '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 == 'd-none' {
           @include d-none;
         } @else if $mixin-str == 'd-block' {
@@ -266,31 +272,36 @@
           @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 grid-cols(str.unquote($value));
-        } @else if str.index($mixin-str, 'grid-rows(') == 1 {
+          @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-rows(str.unquote($value));
-        } @else if str.index($mixin-str, 'grid-auto-fit(') == 1 {
+          @include rows(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;
@@ -306,16 +317,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;
@@ -336,11 +347,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, 'generate-theme-colors(') == 1 {
+        } @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 generate-theme-colors(str.unquote($value));
+          @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;
@@ -611,12 +632,6 @@
     } @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' {
@@ -647,16 +662,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' {
@@ -685,12 +714,12 @@
           @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 == '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 == 'd-none' {
           @include d-none;
         } @else if $mixin-str == 'd-block' {
@@ -827,31 +856,36 @@
           @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 grid-cols(str.unquote($value));
-        } @else if str.index($mixin-str, 'grid-rows(') == 1 {
+          @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-rows(str.unquote($value));
-        } @else if str.index($mixin-str, 'grid-auto-fit(') == 1 {
+          @include rows(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;
@@ -867,16 +901,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;
@@ -897,11 +931,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, 'generate-theme-colors(') == 1 {
+        } @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 generate-theme-colors(str.unquote($value));
+          @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;

package/src/styles/themes/_theme.scss

@@ -1,135 +1,84 @@
 // _theme.scss
 @use 'sass:color';
 @use 'sass:map';
+@use '../utilities/colors' as *;
 @use '../utilities/variables' as *;
 
 
-// Color variations percentage
-$color-variations: (
-  'lighter': 15%,
-  'light': 10%,
-  'dark': -10%,
-  'darker': -15%
-);
+ 
 
-$opacity-levels: (
-  '10': 0.1,
-  '25': 0.25,
-  '50': 0.5,
-  '75': 0.75
-);
+// Generate scales for primitives
+$colors-primitives: ();
 
-
-@function theme-color($color-name, $variant: 'base') {
-  @return var(--#{$color-name}#{if($variant == 'base', '', '-' + $variant)});
+@each $name, $color in $color-primitives {
+    $colors-primitives: map.set($colors-primitives, $name, create-color-scale($color));
 }
 
-@mixin generate-theme-colors($theme) {
-  @each $name, $color in $colors {
-    // Base color
-    --#{$name}: #{$color};
-    
-    // Variations
-    @each $variant, $percentage in $color-variations {
-      --#{$name}-#{$variant}: #{if($theme == 'light',
-        color.scale($color, $lightness: $percentage),
-        color.scale($color, $lightness: $percentage * -1)
-      )};
-    }
-    
-    // Opacity variations
-    @each $level, $opacity in $opacity-levels {
-      --#{$name}-#{$level}: #{rgba($color, $opacity)};
+:root {
+  @each $color-name, $scale in $colors {
+    --#{$color-name}: #{color.adjust(map.get($scale, 500), $alpha: 1)};
+    @each $shade, $value in $scale {
+      --#{$color-name}-#{$shade}: #{color.adjust($value, $alpha: 1)};
     }
-    
-    // State variations
-    --#{$name}-hover: var(--#{$name}-#{if($theme == 'light', 'dark', 'light')});
-    --#{$name}-active: var(--#{$name}-#{if($theme == 'light', 'darker', 'lighter')});
-    --#{$name}-disabled: var(--#{$name}-50);
-  }
-
-   // Background & Border
-   @if $theme == 'light' {
-    --bg-primary: var(--light);
-    --bg-secondary: #{color.scale(map.get($colors, 'light'), $lightness: -5%)};
-    --bg-tertiary: #{color.scale(map.get($colors, 'light'), $lightness: -10%)};
-    --border-color: #{rgba(map.get($colors, 'dark'), 0.1)};
-    --border-color-dark: #{rgba(map.get($colors, 'dark'), 0.2)};
-  } @else {
-    --bg-primary: var(--dark);
-    --bg-secondary: #{color.scale(map.get($colors, 'dark'), $lightness: 5%)};
-    --bg-tertiary: #{color.scale(map.get($colors, 'dark'), $lightness: 10%)};
-    --border-color: #{rgba(map.get($colors, 'light'), 0.07)};
-    --border-color-dark: #{rgba(map.get($colors, 'light'), 0.15)};
   }
 
-    
-  // Text Colors
-  @if $theme == 'light' {
-    --text-primary: var(--dark);
-    --text-secondary: #{rgba(map.get($colors, 'dark'), 0.7)};
-    --text-tertiary: #{rgba(map.get($colors, 'dark'), 0.5)};
-    --text-disabled: #{rgba(map.get($colors, 'dark'), 0.3)};
-    --text-inverse: var(--light);
-  } @else {
-    --text-primary: var(--light);
-    --text-secondary: #{rgba(map.get($colors, 'light'), 0.7)};
-    --text-tertiary: #{rgba(map.get($colors, 'light'), 0.5)};
-    --text-disabled: #{rgba(map.get($colors, 'light'), 0.3)};
-    --text-inverse: var(--dark);
+  @each $color-name, $scale in $colors-primitives {
+    --#{$color-name}: #{color.adjust(map.get($scale, 500), $alpha: 1)};
+    @each $shade, $value in $scale {
+      --#{$color-name}-#{$shade}: #{color.adjust($value, $alpha: 1)};
+    }
   }
 
-
-  // Link Colors
+  --background: #{map.get($light-theme, 'background')};
+  --foreground: #{map.get($light-theme, 'foreground')};
+  --surface: #{map.get($light-theme, 'surface')};
+  --border: var(--primary-600);
+  --text-primary: var(--gray-900);
+  --text-secondary: var(--gray-600);
+  --button-bg-color: var(--primary);
+  --button-bg-color-hover: var(--primary-600);
+  --button-text-color: var(--gray-100);
   --link-color: var(--primary);
-  --link-hover-color: #{color.scale(map.get($colors, 'primary'), $lightness: if($theme == 'light', -10%, 10%))};
-  --link-active-color: #{color.scale(map.get($colors, 'primary'), $lightness: if($theme == 'light', -20%, 20%))};
-  --link-visited-color: #{color.scale(map.get($colors, 'primary'), $saturation: -20%)};
+  --link-hover-color: var(--primary-600);
+}
 
-  // Navigation
-  --nav-bg: var(--bg-primary);
-  --nav-hover: var(--bg-secondary);
-  --nav-active: var(--bg-tertiary);
-  --nav-text: var(--text-primary);
-  --nav-text-hover: var(--primary);
-  --nav-border: var(--border-color);
+[data-theme="dark"] {
+  --background: #{map.get($dark-theme, 'background')};
+  --foreground: #{map.get($dark-theme, 'foreground')};
+  --surface: #{map.get($dark-theme, 'surface')};
+  --border: var(--primary-400);
+  --text-primary: var(--gray-100);
+  --text-secondary: var(--gray-400);
+  --button-bg-color: var(--primary);
+  --button-bg-color-hover: var(--primary-400);
+  --button-text-color: var(--gray-200);
+  --link-color: var(--primary);
+  --link-hover-color: var(--primary-400);
+}
 
-  // Tooltip
-  --tooltip-bg: var(--dark);
-  --tooltip-text: var(--light);
-  --tooltip-shadow-color: rgb(0 0 0 / 40%);
-  --microtip-transition-duration: 0.518s;
-  --microtip-transition-delay: .2s;
-  --microtip-transition-easing: cubic-bezier(0.16, 1, 0.9, 1);
-  --microtip-font-size: 0.875rem;
-  --microtip-font-weight: 300;
-  --microtip-text-transform: none;
+// --font-family-heading: var(--font-family-base);
+// --text-primary: #{map.get($colors, 'dark')};
+// --link-color: #{map.get($colors, 'primary')};
+// --link-hover-color: #{color.scale(map.get($colors, 'primary'), $lightness: -10%)};
 
-  // Shadow
-  // --shadow-color: #{if($theme == 'light', '0,0,0', '255,255,255')};
-  // --shadow-opacity: #{if($theme == 'light', 0.1, 0.5)};
-}
+// --nav-bg: #{map.get($colors, 'light')};
+// // --nav-hover: #{color.scale(map.get($colors, 'light'), $lightness: -10%)};
+// --nav-hover: white;
+// --nav-text: #{map.get($colors, 'dark')};
 
-/**
-.btn-primary {
-  background-color: theme-color('primary');
-  
-  &:hover {
-    background-color: theme-color('primary', 'hover');
-  }
-  
-  &:disabled {
-    background-color: theme-color('primary', 'disabled');
-  }
-}
+//   // Link Colors
+//   --link-color: var(--primary);
+//   --link-hover-color: #{color.scale(map.get($colors, 'primary'), $lightness: if($theme == 'light', -10%, 10%))};
+//   --link-active-color: #{color.scale(map.get($colors, 'primary'), $lightness: if($theme == 'light', -20%, 20%))};
+//   --link-visited-color: #{color.scale(map.get($colors, 'primary'), $saturation: -20%)};
 
-.form-input {
-  border-color: var(--border-color);
-  color: var(--text-primary);
-  
-  &:focus {
-    border-color: theme-color('primary');
-    box-shadow: 0 0 0 4px theme-color('primary', '25');
-  }
-}
- */
+//   // Tooltip
+//   --tooltip-bg: var(--dark);
+//   --tooltip-text: var(--light);
+//   --tooltip-shadow-color: rgb(0 0 0 / 40%);
+//   --microtip-transition-duration: 0.518s;
+//   --microtip-transition-delay: .2s;
+//   --microtip-transition-easing: cubic-bezier(0.16, 1, 0.9, 1);
+//   --microtip-font-size: 0.875rem;
+//   --microtip-font-weight: 300;
+//   --microtip-text-transform: none;

package/src/styles/utilities/_borders.scss

@@ -14,14 +14,10 @@
     .border-#{$i} { @include border($i); }
 }
 
-@each $color-name, $color-value in $colors {
-    .border-#{$color-name} { border-color: $color-value; }
-}
-
 .rounded { @include rounded(0.25rem); }
 .square { @include rounded(0) }
 .pill { @include rounded(9999px); }
-
+  
 // Responsive Position Classes
 @each $breakpoint, $width in $breakpoints {
     @media (min-width: $width) {