@nuvoui/core 1.2.6 → 1.3.0

package/src/styles/themes/_theme.scss

@@ -1,6 +1,8 @@
 // _theme.scss - CSS variables and utility classes
 @use "sass:color";
 @use "sass:map";
+@use "sass:string";
+@use "sass:list";
 @use "../utilities/colors" as COL;
 @use "../abstracts/config" as VAR;
 
@@ -25,36 +27,20 @@
 
     @each $token in VAR.$theme-tokens {
       --#{$token}: #{map.get(VAR.$light-theme, $token)};
+      --inverted-#{$token}: #{map.get(VAR.$dark-theme, $token)};
+    }
+    @each $color-name, $color-val in VAR.$basic-colors {
+      --#{$color-name}: #{$color-val};
     }
 
-    --button-text-color: #{map.get(VAR.$dark-theme, "text-default")};
-    --inverted-text-color: #{map.get(VAR.$dark-theme, "text-default")};
+    // --button-text-color: #{map.get(VAR.$dark-theme, "text-default")};
+    // --inverted-text-color: #{map.get(VAR.$dark-theme, "text-default")};
 
     // Light theme variables
     --button-bg-color: var(--primary);
     --button-bg-color-hover: var(--primary-600);
     --link-color: var(--primary);
     --link-hover-color: var(--primary-600);
-
-    // #{VAR.$parent-selector} {
-    //   // Scrollbar styling
-    //   &::-webkit-scrollbar {
-    //     width: 12px;
-    //   }
-
-    //   &::-webkit-scrollbar-track {
-    //     background: var(--background);
-    //   }
-
-    //   &::-webkit-scrollbar-thumb {
-    //     background-color: #888;
-    //     border-radius: 6px;
-    //     border: 3px solid var(--background);
-    //   }
-
-    //   scrollbar-width: thin;
-    //   scrollbar-color: #888 var(--background);
-    // }
   }
 
   @if VAR.$enable-dark-mode {
@@ -62,10 +48,10 @@
     [data-theme="dark"] {
       @each $token in VAR.$theme-tokens {
         --#{$token}: #{map.get(VAR.$dark-theme, $token)};
+        --inverted-#{$token}: #{map.get(VAR.$light-theme, $token)};
       }
 
       --button-text-color: #{map.get(VAR.$light-theme, "text-default")};
-      --inverted-text-color: #{map.get(VAR.$light-theme, "text-default")};
       --button-bg-color: var(--primary);
       --button-bg-color-hover: var(--primary-400);
       --link-color: var(--primary);
@@ -184,57 +170,55 @@
     }
   }
 
-  // Semantic color utilities
-  #{VAR.$parent-selector} .bg-page {
-    background-color: var(--background);
-  }
-
-  #{VAR.$parent-selector} .bg-surface {
-    background-color: var(--surface);
-  }
-
-  #{VAR.$parent-selector} .bg-active {
-    background-color: var(--button-bg-color);
-  }
-
-  #{VAR.$parent-selector} .bg-hover {
-    background-color: var(--button-bg-color-hover);
-  }
-
-  #{VAR.$parent-selector} .bg-white,
-  .hover\:bg-white:hover {
-    background-color: white;
-  }
-
-  #{VAR.$parent-selector} .bg-black,
-  .hover\:bg-black:hover {
-    background-color: black;
-  }
-
-  #{VAR.$parent-selector} .text-default {
-    color: var(--text-default);
-  }
+  @each $color-name, $color-val in VAR.$basic-colors {
+    // Base color classes
+    #{VAR.$parent-selector} .text-#{$color-name},
+    #{VAR.$parent-selector} .hover\:text-#{$color-name}:hover,
+    #{VAR.$parent-selector} .group:hover .group-hover\:text-#{$color-name} {
+      color: var(--#{$color-name});
+    }
 
-  #{VAR.$parent-selector} .text-muted {
-    color: var(--text-muted);
-  }
+    #{VAR.$parent-selector} .bg-#{$color-name},
+    #{VAR.$parent-selector} .hover\:bg-#{$color-name}:hover,
+    #{VAR.$parent-selector} .group:hover .group-hover\:bg-#{$color-name} {
+      background-color: var(--#{$color-name});
+    }
 
-  #{VAR.$parent-selector} .text-inverted {
-    color: var(--inverted-text-color);
+    #{VAR.$parent-selector} .border-#{$color-name},
+    #{VAR.$parent-selector} .hover\:border-#{$color-name}:hover,
+    #{VAR.$parent-selector} .group:hover .group-hover\:border-#{$color-name} {
+      border-color: var(--#{$color-name});
+    }
   }
 
-  #{VAR.$parent-selector} .text-white,
-  #{VAR.$parent-selector} .hover\:text-white:hover {
-    color: white;
-  }
+  @each $token in VAR.$theme-tokens {
+    $parts: string.split($token, "-");
+    $prefix: list.nth($parts, 1);
 
-  #{VAR.$parent-selector} .text-black,
-  #{VAR.$parent-selector} .hover\:text-black:hover {
-    color: black;
-  }
+    #{VAR.$parent-selector} .#{$token},
+    #{VAR.$parent-selector} .hover\:#{$token}:hover,
+    #{VAR.$parent-selector} .group:hover .group-hover\:#{$token} {
+      @if $prefix == "bg" {
+        background-color: var(--#{$token});
+      } @else if $prefix == "text" {
+        color: var(--#{$token});
+      } @else if $prefix == "border" {
+        border-color: var(--#{$token});
+      }
+    }
 
-  #{VAR.$parent-selector} .text-subtle {
-    color: var(--text-muted);
-    opacity: 0.7;
+    #{VAR.$parent-selector} .inverted-#{$token},
+    #{VAR.$parent-selector} .hover\:inverted-#{$token}:hover,
+    #{VAR.$parent-selector} .group:hover .group-hover\:inverted-#{$token} {
+      @if $prefix == "bg" {
+        background-color: var(--inverted-#{$token});
+      } @else if $prefix == "text" {
+        color: var(--inverted-#{$token});
+      } @else if $prefix == "border" {
+        border-color: var(--inverted-#{$token});
+      } @else if $prefix == "fg" {
+        color: var(--inverted-#{$token});
+      }
+    }
   }
 }

package/src/styles/utilities/_backdrop-filters.scss

@@ -17,11 +17,11 @@
 // Blur values
 $backdrop-blur-values: (
   "none": 0,
-  "sm": 4px,
-  "md": 8px,
-  "lg": 12px,
-  "xl": 24px,
-  "2xl": 40px,
+  "sm": 2px,
+  "md": 4px,
+  "lg": 8px,
+  "xl": 16px,
+  "2xl": 32px,
 );
 
 // Brightness values
@@ -103,101 +103,129 @@ $backdrop-filter-presets: (
   backdrop-filter: $value;
 }
 
-// Specific filter mixins
+// Base layer mixin that initializes the CSS variables
+@mixin backdrop-layer {
+  --backdrop-blur: blur(0);
+  --backdrop-brightness: brightness(100%);
+  --backdrop-contrast: contrast(100%);
+  --backdrop-grayscale: grayscale(0);
+  --backdrop-hue-rotate: hue-rotate(0deg);
+  --backdrop-invert: invert(0);
+  --backdrop-saturate: saturate(100%);
+  --backdrop-sepia: sepia(0);
+
+  backdrop-filter: var(--backdrop-blur) var(--backdrop-brightness) var(--backdrop-contrast) var(--backdrop-grayscale) var(--backdrop-hue-rotate) var(--backdrop-invert) var(--backdrop-saturate) var(--backdrop-sepia);
+}
+
+// Specific filter mixins - now they set CSS variables instead of the backdrop-filter property
 @mixin backdrop-blur($value) {
   @if map.has-key($backdrop-blur-values, $value) {
-    @include backdrop-filter(blur(map.get($backdrop-blur-values, $value)));
+    --backdrop-blur: blur(#{map.get($backdrop-blur-values, $value)});
   } @else {
-    @include backdrop-filter(blur($value));
+    --backdrop-blur: blur(#{$value});
   }
 }
 
 @mixin backdrop-brightness($value) {
   @if map.has-key($backdrop-brightness-values, $value) {
-    @include backdrop-filter(brightness(map.get($backdrop-brightness-values, $value)));
+    --backdrop-brightness: brightness(#{map.get($backdrop-brightness-values, $value)});
   } @else {
-    @include backdrop-filter(brightness($value));
+    --backdrop-brightness: brightness(#{$value});
   }
 }
 
 @mixin backdrop-contrast($value) {
   @if map.has-key($backdrop-contrast-values, $value) {
-    @include backdrop-filter(contrast(map.get($backdrop-contrast-values, $value)));
+    --backdrop-contrast: contrast(#{map.get($backdrop-contrast-values, $value)});
   } @else {
-    @include backdrop-filter(contrast($value));
+    --backdrop-contrast: contrast(#{$value});
   }
 }
 
 @mixin backdrop-grayscale($value) {
   @if map.has-key($backdrop-grayscale-values, $value) {
-    @include backdrop-filter(grayscale(map.get($backdrop-grayscale-values, $value)));
+    --backdrop-grayscale: grayscale(#{map.get($backdrop-grayscale-values, $value)});
   } @else {
-    @include backdrop-filter(grayscale($value));
+    --backdrop-grayscale: grayscale(#{$value});
   }
 }
 
 @mixin backdrop-hue-rotate($value) {
   @if map.has-key($backdrop-hue-rotate-values, $value) {
-    @include backdrop-filter(hue-rotate(map.get($backdrop-hue-rotate-values, $value)));
+    --backdrop-hue-rotate: hue-rotate(#{map.get($backdrop-hue-rotate-values, $value)});
   } @else {
-    @include backdrop-filter(hue-rotate($value));
+    --backdrop-hue-rotate: hue-rotate(#{$value});
   }
 }
 
 @mixin backdrop-invert($value) {
   @if map.has-key($backdrop-invert-values, $value) {
-    @include backdrop-filter(invert(map.get($backdrop-invert-values, $value)));
+    --backdrop-invert: invert(#{map.get($backdrop-invert-values, $value)});
   } @else {
-    @include backdrop-filter(invert($value));
+    --backdrop-invert: invert(#{$value});
   }
 }
 
 @mixin backdrop-saturate($value) {
   @if map.has-key($backdrop-saturate-values, $value) {
-    @include backdrop-filter(saturate(map.get($backdrop-saturate-values, $value)));
+    --backdrop-saturate: saturate(#{map.get($backdrop-saturate-values, $value)});
   } @else {
-    @include backdrop-filter(saturate($value));
+    --backdrop-saturate: saturate(#{$value});
   }
 }
 
 @mixin backdrop-sepia($value) {
   @if map.has-key($backdrop-sepia-values, $value) {
-    @include backdrop-filter(sepia(map.get($backdrop-sepia-values, $value)));
+    --backdrop-sepia: sepia(#{map.get($backdrop-sepia-values, $value)});
   } @else {
-    @include backdrop-filter(sepia($value));
+    --backdrop-sepia: sepia(#{$value});
   }
 }
 
 // Preset backdrop effects
 @mixin backdrop-frosted {
-  @include backdrop-filter(map.get($backdrop-filter-presets, "frosted"));
+  backdrop-filter: #{map.get($backdrop-filter-presets, "frosted")};
 }
 
 @mixin backdrop-glass {
-  @include backdrop-filter(map.get($backdrop-filter-presets, "glass"));
+  backdrop-filter: #{map.get($backdrop-filter-presets, "glass")};
 }
 
 @mixin backdrop-dark-glass {
-  @include backdrop-filter(map.get($backdrop-filter-presets, "dark-glass"));
+  backdrop-filter: #{map.get($backdrop-filter-presets, "dark-glass")};
 }
 
 @mixin backdrop-crystal {
-  @include backdrop-filter(map.get($backdrop-filter-presets, "crystal"));
+  backdrop-filter: #{map.get($backdrop-filter-presets, "crystal")};
 }
 
 @mixin backdrop-matte {
-  @include backdrop-filter(map.get($backdrop-filter-presets, "matte"));
+  backdrop-filter: #{map.get($backdrop-filter-presets, "matte")};
 }
 
 // Reset filter
 @mixin backdrop-none {
   backdrop-filter: none;
+
+  --backdrop-blur: none;
+  --backdrop-brightness: none;
+  --backdrop-contrast: none;
+  --backdrop-grayscale: none;
+  --backdrop-hue-rotate: none;
+  --backdrop-invert: none;
+  --backdrop-saturate: none;
+  --backdrop-sepia: none;
 }
 
 // Generate utility classes
 @mixin generate-backdrop-filter-utilities($breakpoint: null) {
   $suffix: if($breakpoint, "\\@#{$breakpoint}", "");
 
+  // Base layer class
+  #{VAR.$parent-selector} .backdrop-layer#{$suffix} {
+    @include backdrop-layer;
+  }
+
   // Basic backdrop utilities
   #{VAR.$parent-selector} .backdrop-none#{$suffix} {
     @include backdrop-none;
@@ -259,7 +287,7 @@ $backdrop-filter-presets: (
     }
   }
 
-  // Preset utilities
+  // Preset utilities (these override the CSS variables approach)
   #{VAR.$parent-selector} .backdrop-frosted#{$suffix} {
     @include backdrop-frosted;
   }
@@ -288,10 +316,3 @@ $backdrop-filter-presets: (
     }
   }
 }
-
-// Update your mixins-map.scss to include these mixins:
-// @else if str.index($ms, 'backdrop-blur(') == 1 {
-//   $param1: list.nth($params, 1);
-//   @include backdrop-blur($param1);
-// }
-// Add similar entries for all other backdrop filter mixins

package/src/styles/utilities/_borders.scss

@@ -38,7 +38,7 @@ $border-styles: (solid, dashed, dotted, double, none);
 
 // Core Border Mixins - improved to include style and color by default
 // SKIP Documentation
-@mixin border($val, $style: solid, $color: var(--border)) {
+@mixin border($val, $style: solid, $color: var(--border-base)) {
   $val: FN.fix-units($val);
 
   border-width: $val;

package/src/styles/utilities/_display.scss

@@ -51,7 +51,7 @@
  * @description Set display to initial original state.
  */
 @mixin show {
-  display: revert;
+  display: initial;
 }
 
 /**
@@ -120,7 +120,6 @@
 }
 
 @if VAR.$generate-utility-classes {
-  // Base Classes
   #{VAR.$parent-selector} .hide {
     @include hide;
   }

package/src/styles/utilities/_shadows.scss

@@ -64,11 +64,11 @@ $shadow-sizes: (
 */
 @mixin shadow($size: "md", $color: "default") {
   @if not map.has-key($shadow-sizes, $size) {
-    @warn "Shadow size '#{$size}' not found in $shadow-sizes map";
+    @error "Shadow size '#{$size}' not found in $shadow-sizes map";
     $size: "md"; // Fallback to default
   }
   @if not map.has-key(VAR.$shadow-colors, $color) {
-    @warn "Shadow color '#{$color}' not found in VAR.$shadow-colors map";
+    @error "Shadow color '#{$color}' not found in VAR.$shadow-colors map";
     $color: "default"; // Fallback to default
   }
 

package/src/styles/utilities/_transforms.scss

@@ -259,7 +259,7 @@ $origin-values: (
           @include translate-x($value);
         }
 
-        #{VAR.$parent-selector} .translate-x-#{$key}\@#{$breakpoint},
+        #{VAR.$parent-selector} .translate-y-#{$key}\@#{$breakpoint},
         #{VAR.$parent-selector} .hover\:translate-y-#{$key}\@#{$breakpoint}:hover,
         #{VAR.$parent-selector} .group:hover .group-hover\:translate-y-#{$key}\@#{$breakpoint} {
           @include translate-y($value);
@@ -272,7 +272,7 @@ $origin-values: (
           @include translate-x($value);
         }
 
-        #{VAR.$parent-selector} .-translate-x-#{$key}\@#{$breakpoint},
+        #{VAR.$parent-selector} .-translate-y-#{$key}\@#{$breakpoint},
         #{VAR.$parent-selector} .hover\:-translate-y-#{$key}\@#{$breakpoint}:hover,
         #{VAR.$parent-selector} .group:hover .group-hover\:-translate-y-#{$key}\@#{$breakpoint} {
           @include translate-y($value);
@@ -286,6 +286,18 @@ $origin-values: (
         #{VAR.$parent-selector} .group:hover .group-hover\:scale-#{$key}\@#{$breakpoint} {
           @include scale($value);
         }
+
+        #{VAR.$parent-selector} .scale-x-#{$key}\@#{$breakpoint},
+        #{VAR.$parent-selector} .hover\:scale-x-#{$key}\@#{$breakpoint}:hover,
+        #{VAR.$parent-selector} .group:hover .group-hover\:scale-x-#{$key}\@#{$breakpoint} {
+          @include scale-x($value);
+        }
+
+        #{VAR.$parent-selector} .scale-y-#{$key}\@#{$breakpoint},
+        #{VAR.$parent-selector} .hover\:scale-y-#{$key}\@#{$breakpoint}:hover,
+        #{VAR.$parent-selector} .group:hover .group-hover\:scale-y-#{$key}\@#{$breakpoint} {
+          @include scale-y($value);
+        }
       }
 
       // Rotation hover responsive
@@ -305,6 +317,15 @@ $origin-values: (
           @include rotate($value);
         }
       }
+
+      // Add missing origin responsive variants
+      @each $key, $value in $origin-values {
+        #{VAR.$parent-selector} .origin-#{$key}\@#{$breakpoint},
+        #{VAR.$parent-selector} .hover\:origin-#{$key}\@#{$breakpoint}:hover,
+        #{VAR.$parent-selector} .group:hover .group-hover\:origin-#{$key}\@#{$breakpoint} {
+          @include origin($value);
+        }
+      }
     }
   }
 }

package/src/styles/utilities/_z-index.scss

@@ -44,11 +44,11 @@ $z-index-levels: (
   "dropdown": 100,
   "sticky": 200,
   "fixed": 300,
-  "drawer": 400,
-  "modal": 500,
-  "popover": 600,
-  "tooltip": 700,
-  "overlay": 800,
+  "overlay": 400,
+  "drawer": 500,
+  "modal": 600,
+  "popover": 700,
+  "tooltip": 800,
   "toast": 900,
   "max": 9999,
 );