@nuvoui/core 1.2.5 → 1.2.7

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
@@ -103,167 +103,216 @@ $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
-  .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 (these override the CSS variables approach)
+  #{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;
   }
-  
-  // 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; }
 }
 
-@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);
     }
   }
 }
-
-// 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