@nuvoui/core 1.2.5 → 1.2.6

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

@@ -1,6 +1,6 @@
 @use "sass:map";
 @use "sass:meta";
-@use "../abstracts" as *;
+@use "../abstracts/config" as VAR;
 @use "../abstracts/functions" as FN;
 
 /**
@@ -16,86 +16,86 @@
 
 // Blur values
 $backdrop-blur-values: (
-  'none': 0,
-  'sm': 4px,
-  'md': 8px,
-  'lg': 12px,
-  'xl': 24px,
-  '2xl': 40px,
+  "none": 0,
+  "sm": 4px,
+  "md": 8px,
+  "lg": 12px,
+  "xl": 24px,
+  "2xl": 40px,
 );
 
-// Brightness values 
+// Brightness values
 $backdrop-brightness-values: (
-  'none': 100%,
-  '75': 75%,
-  '90': 90%,
-  '110': 110%,
-  '125': 125%,
-  '150': 150%,
+  "none": 100%,
+  "75": 75%,
+  "90": 90%,
+  "110": 110%,
+  "125": 125%,
+  "150": 150%,
 );
 
 // Contrast values
 $backdrop-contrast-values: (
-  'none': 100%,
-  '75': 75%,
-  '90': 90%,
-  '110': 110%,
-  '125': 125%,
-  '150': 150%,
+  "none": 100%,
+  "75": 75%,
+  "90": 90%,
+  "110": 110%,
+  "125": 125%,
+  "150": 150%,
 );
 
 // Grayscale values
 $backdrop-grayscale-values: (
-  'none': 0,
-  '25': 25%,
-  '50': 50%,
-  '75': 75%,
-  '100': 100%,
+  "none": 0,
+  "25": 25%,
+  "50": 50%,
+  "75": 75%,
+  "100": 100%,
 );
 
 // Saturate values
 $backdrop-saturate-values: (
-  'none': 100%,
-  '50': 50%,
-  '75': 75%,
-  '125': 125%,
-  '150': 150%,
-  '200': 200%,
+  "none": 100%,
+  "50": 50%,
+  "75": 75%,
+  "125": 125%,
+  "150": 150%,
+  "200": 200%,
 );
 
 // Sepia values
 $backdrop-sepia-values: (
-  'none': 0,
-  '25': 25%,
-  '50': 50%,
-  '75': 75%,
-  '100': 100%,
+  "none": 0,
+  "25": 25%,
+  "50": 50%,
+  "75": 75%,
+  "100": 100%,
 );
 
 // Hue-rotate values
 $backdrop-hue-rotate-values: (
-  '0': 0deg,
-  '90': 90deg,
-  '180': 180deg,
-  '270': 270deg,
+  "0": 0deg,
+  "90": 90deg,
+  "180": 180deg,
+  "270": 270deg,
 );
 
 // Invert values
 $backdrop-invert-values: (
-  'none': 0,
-  '25': 25%,
-  '50': 50%,
-  '75': 75%,
-  '100': 100%,
+  "none": 0,
+  "25": 25%,
+  "50": 50%,
+  "75": 75%,
+  "100": 100%,
 );
 
 // Common backdrop-filter presets
 $backdrop-filter-presets: (
-  'frosted': blur(8px) saturate(90%) brightness(120%),
-  'glass': blur(8px) saturate(120%) contrast(90%),
-  'dark-glass': blur(8px) saturate(180%) brightness(70%) contrast(90%),
-  'crystal': blur(8px) saturate(150%),
-  'matte': blur(20px) saturate(90%) brightness(90%),
+  "frosted": blur(8px) saturate(90%) brightness(120%),
+  "glass": blur(8px) saturate(120%) contrast(90%),
+  "dark-glass": blur(8px) saturate(180%) brightness(70%) contrast(90%),
+  "crystal": blur(8px) saturate(150%),
+  "matte": blur(20px) saturate(90%) brightness(90%),
 );
 
 // Base backdrop-filter
@@ -170,23 +170,23 @@ $backdrop-filter-presets: (
 
 // Preset backdrop effects
 @mixin backdrop-frosted {
-  @include backdrop-filter(map.get($backdrop-filter-presets, 'frosted'));
+  @include backdrop-filter(map.get($backdrop-filter-presets, "frosted"));
 }
 
 @mixin backdrop-glass {
-  @include backdrop-filter(map.get($backdrop-filter-presets, 'glass'));
+  @include backdrop-filter(map.get($backdrop-filter-presets, "glass"));
 }
 
 @mixin backdrop-dark-glass {
-  @include backdrop-filter(map.get($backdrop-filter-presets, 'dark-glass'));
+  @include backdrop-filter(map.get($backdrop-filter-presets, "dark-glass"));
 }
 
 @mixin backdrop-crystal {
-  @include backdrop-filter(map.get($backdrop-filter-presets, 'crystal'));
+  @include backdrop-filter(map.get($backdrop-filter-presets, "crystal"));
 }
 
 @mixin backdrop-matte {
-  @include backdrop-filter(map.get($backdrop-filter-presets, 'matte'));
+  @include backdrop-filter(map.get($backdrop-filter-presets, "matte"));
 }
 
 // Reset filter
@@ -197,64 +197,92 @@ $backdrop-filter-presets: (
 // Generate utility classes
 @mixin generate-backdrop-filter-utilities($breakpoint: null) {
   $suffix: if($breakpoint, "\\@#{$breakpoint}", "");
-  
+
   // Basic backdrop utilities
-  .backdrop-none#{$suffix} { @include backdrop-none; }
-  
+  #{VAR.$parent-selector} .backdrop-none#{$suffix} {
+    @include backdrop-none;
+  }
+
   // Blur utilities
   @each $key, $value in $backdrop-blur-values {
-    .backdrop-blur-#{$key}#{$suffix} { @include backdrop-blur($key); }
+    #{VAR.$parent-selector} .backdrop-blur-#{$key}#{$suffix} {
+      @include backdrop-blur($key);
+    }
   }
-  
+
   // Brightness utilities
   @each $key, $value in $backdrop-brightness-values {
-    .backdrop-brightness-#{$key}#{$suffix} { @include backdrop-brightness($key); }
+    #{VAR.$parent-selector} .backdrop-brightness-#{$key}#{$suffix} {
+      @include backdrop-brightness($key);
+    }
   }
-  
+
   // Contrast utilities
   @each $key, $value in $backdrop-contrast-values {
-    .backdrop-contrast-#{$key}#{$suffix} { @include backdrop-contrast($key); }
+    #{VAR.$parent-selector} .backdrop-contrast-#{$key}#{$suffix} {
+      @include backdrop-contrast($key);
+    }
   }
-  
+
   // Grayscale utilities
   @each $key, $value in $backdrop-grayscale-values {
-    .backdrop-grayscale-#{$key}#{$suffix} { @include backdrop-grayscale($key); }
+    #{VAR.$parent-selector} .backdrop-grayscale-#{$key}#{$suffix} {
+      @include backdrop-grayscale($key);
+    }
   }
-  
+
   // Saturate utilities
   @each $key, $value in $backdrop-saturate-values {
-    .backdrop-saturate-#{$key}#{$suffix} { @include backdrop-saturate($key); }
+    #{VAR.$parent-selector} .backdrop-saturate-#{$key}#{$suffix} {
+      @include backdrop-saturate($key);
+    }
   }
-  
+
   // Sepia utilities
   @each $key, $value in $backdrop-sepia-values {
-    .backdrop-sepia-#{$key}#{$suffix} { @include backdrop-sepia($key); }
+    #{VAR.$parent-selector} .backdrop-sepia-#{$key}#{$suffix} {
+      @include backdrop-sepia($key);
+    }
   }
-  
+
   // Hue-rotate utilities
   @each $key, $value in $backdrop-hue-rotate-values {
-    .backdrop-hue-#{$key}#{$suffix} { @include backdrop-hue-rotate($key); }
+    #{VAR.$parent-selector} .backdrop-hue-#{$key}#{$suffix} {
+      @include backdrop-hue-rotate($key);
+    }
   }
-  
+
   // Invert utilities
   @each $key, $value in $backdrop-invert-values {
-    .backdrop-invert-#{$key}#{$suffix} { @include backdrop-invert($key); }
+    #{VAR.$parent-selector} .backdrop-invert-#{$key}#{$suffix} {
+      @include backdrop-invert($key);
+    }
   }
-  
+
   // Preset utilities
-  .backdrop-frosted#{$suffix} { @include backdrop-frosted; }
-  .backdrop-glass#{$suffix} { @include backdrop-glass; }
-  .backdrop-dark-glass#{$suffix} { @include backdrop-dark-glass; }
-  .backdrop-crystal#{$suffix} { @include backdrop-crystal; }
-  .backdrop-matte#{$suffix} { @include backdrop-matte; }
+  #{VAR.$parent-selector} .backdrop-frosted#{$suffix} {
+    @include backdrop-frosted;
+  }
+  #{VAR.$parent-selector} .backdrop-glass#{$suffix} {
+    @include backdrop-glass;
+  }
+  #{VAR.$parent-selector} .backdrop-dark-glass#{$suffix} {
+    @include backdrop-dark-glass;
+  }
+  #{VAR.$parent-selector} .backdrop-crystal#{$suffix} {
+    @include backdrop-crystal;
+  }
+  #{VAR.$parent-selector} .backdrop-matte#{$suffix} {
+    @include backdrop-matte;
+  }
 }
 
-@if $generate-utility-classes {
+@if VAR.$generate-utility-classes {
   // Generate base utilities
   @include generate-backdrop-filter-utilities;
-  
+
   // Generate responsive variants
-  @each $breakpoint, $width in $breakpoints {
+  @each $breakpoint, $width in VAR.$breakpoints {
     @media (min-width: #{$width}) {
       @include generate-backdrop-filter-utilities($breakpoint);
     }
@@ -266,4 +294,4 @@ $backdrop-filter-presets: (
 //   $param1: list.nth($params, 1);
 //   @include backdrop-blur($param1);
 // }
-// Add similar entries for all other backdrop filter mixins
+// Add similar entries for all other backdrop filter mixins