@nuvoui/core 1.3.4 → 1.4.0

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

@@ -1,7 +1,8 @@
 @use "sass:map";
 @use "sass:meta";
-@use "../abstracts/config" as VAR;
-@use "../abstracts/functions" as FN;
+@use "../config/feature-flags" as config-flags;
+@use "../config/breakpoints" as config-breakpoint;
+@use "../functions/feature-flags" as fn-flags;
 
 // Backdrop Filter Utilities
 // Provides utility classes and mixins for backdrop-filter effects.
@@ -12,303 +13,303 @@
 
 // Blur values
 $backdrop-blur-values: (
-  "none": 0,
-  "sm": 2px,
-  "md": 4px,
-  "lg": 8px,
-  "xl": 16px,
-  "2xl": 32px,
+    "none": 0,
+    "sm": 2px,
+    "md": 4px,
+    "lg": 8px,
+    "xl": 16px,
+    "2xl": 32px,
 );
 
 // 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
 @mixin backdrop-filter($value) {
-  backdrop-filter: $value;
+    backdrop-filter: $value;
 }
 
 // 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);
+    --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) {
-    --backdrop-blur: blur(#{map.get($backdrop-blur-values, $value)});
-  } @else {
-    --backdrop-blur: blur(#{$value});
-  }
+    @if map.has-key($backdrop-blur-values, $value) {
+        --backdrop-blur: blur(#{map.get($backdrop-blur-values, $value)});
+    } @else {
+        --backdrop-blur: blur(#{$value});
+    }
 }
 
 @mixin backdrop-brightness($value) {
-  @if map.has-key($backdrop-brightness-values, $value) {
-    --backdrop-brightness: brightness(#{map.get($backdrop-brightness-values, $value)});
-  } @else {
-    --backdrop-brightness: brightness(#{$value});
-  }
+    @if map.has-key($backdrop-brightness-values, $value) {
+        --backdrop-brightness: brightness(#{map.get($backdrop-brightness-values, $value)});
+    } @else {
+        --backdrop-brightness: brightness(#{$value});
+    }
 }
 
 @mixin backdrop-contrast($value) {
-  @if map.has-key($backdrop-contrast-values, $value) {
-    --backdrop-contrast: contrast(#{map.get($backdrop-contrast-values, $value)});
-  } @else {
-    --backdrop-contrast: contrast(#{$value});
-  }
+    @if map.has-key($backdrop-contrast-values, $value) {
+        --backdrop-contrast: contrast(#{map.get($backdrop-contrast-values, $value)});
+    } @else {
+        --backdrop-contrast: contrast(#{$value});
+    }
 }
 
 @mixin backdrop-grayscale($value) {
-  @if map.has-key($backdrop-grayscale-values, $value) {
-    --backdrop-grayscale: grayscale(#{map.get($backdrop-grayscale-values, $value)});
-  } @else {
-    --backdrop-grayscale: grayscale(#{$value});
-  }
+    @if map.has-key($backdrop-grayscale-values, $value) {
+        --backdrop-grayscale: grayscale(#{map.get($backdrop-grayscale-values, $value)});
+    } @else {
+        --backdrop-grayscale: grayscale(#{$value});
+    }
 }
 
 @mixin backdrop-hue-rotate($value) {
-  @if map.has-key($backdrop-hue-rotate-values, $value) {
-    --backdrop-hue-rotate: hue-rotate(#{map.get($backdrop-hue-rotate-values, $value)});
-  } @else {
-    --backdrop-hue-rotate: hue-rotate(#{$value});
-  }
+    @if map.has-key($backdrop-hue-rotate-values, $value) {
+        --backdrop-hue-rotate: hue-rotate(#{map.get($backdrop-hue-rotate-values, $value)});
+    } @else {
+        --backdrop-hue-rotate: hue-rotate(#{$value});
+    }
 }
 
 @mixin backdrop-invert($value) {
-  @if map.has-key($backdrop-invert-values, $value) {
-    --backdrop-invert: invert(#{map.get($backdrop-invert-values, $value)});
-  } @else {
-    --backdrop-invert: invert(#{$value});
-  }
+    @if map.has-key($backdrop-invert-values, $value) {
+        --backdrop-invert: invert(#{map.get($backdrop-invert-values, $value)});
+    } @else {
+        --backdrop-invert: invert(#{$value});
+    }
 }
 
 @mixin backdrop-saturate($value) {
-  @if map.has-key($backdrop-saturate-values, $value) {
-    --backdrop-saturate: saturate(#{map.get($backdrop-saturate-values, $value)});
-  } @else {
-    --backdrop-saturate: saturate(#{$value});
-  }
+    @if map.has-key($backdrop-saturate-values, $value) {
+        --backdrop-saturate: saturate(#{map.get($backdrop-saturate-values, $value)});
+    } @else {
+        --backdrop-saturate: saturate(#{$value});
+    }
 }
 
 @mixin backdrop-sepia($value) {
-  @if map.has-key($backdrop-sepia-values, $value) {
-    --backdrop-sepia: sepia(#{map.get($backdrop-sepia-values, $value)});
-  } @else {
-    --backdrop-sepia: sepia(#{$value});
-  }
+    @if map.has-key($backdrop-sepia-values, $value) {
+        --backdrop-sepia: sepia(#{map.get($backdrop-sepia-values, $value)});
+    } @else {
+        --backdrop-sepia: sepia(#{$value});
+    }
 }
 
 // Preset backdrop effects
 @mixin backdrop-frosted {
-  backdrop-filter: #{map.get($backdrop-filter-presets, "frosted")};
+    backdrop-filter: #{map.get($backdrop-filter-presets, "frosted")};
 }
 
 @mixin backdrop-glass {
-  backdrop-filter: #{map.get($backdrop-filter-presets, "glass")};
+    backdrop-filter: #{map.get($backdrop-filter-presets, "glass")};
 }
 
 @mixin backdrop-dark-glass {
-  backdrop-filter: #{map.get($backdrop-filter-presets, "dark-glass")};
+    backdrop-filter: #{map.get($backdrop-filter-presets, "dark-glass")};
 }
 
 @mixin backdrop-crystal {
-  backdrop-filter: #{map.get($backdrop-filter-presets, "crystal")};
+    backdrop-filter: #{map.get($backdrop-filter-presets, "crystal")};
 }
 
 @mixin backdrop-matte {
-  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;
+    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;
-  }
-
-  // Blur utilities
-  @each $key, $value in $backdrop-blur-values {
-    #{VAR.$parent-selector} .backdrop-blur-#{$key}#{$suffix} {
-      @include backdrop-blur($key);
+    $suffix: if($breakpoint, "\\@#{$breakpoint}", "");
+
+    // Base layer class
+    #{config-flags.$parent-selector} .backdrop-layer#{$suffix} {
+        @include backdrop-layer;
     }
-  }
 
-  // Brightness utilities
-  @each $key, $value in $backdrop-brightness-values {
-    #{VAR.$parent-selector} .backdrop-brightness-#{$key}#{$suffix} {
-      @include backdrop-brightness($key);
+    // Basic backdrop utilities
+    #{config-flags.$parent-selector} .backdrop-none#{$suffix} {
+        @include backdrop-none;
     }
-  }
 
-  // Contrast utilities
-  @each $key, $value in $backdrop-contrast-values {
-    #{VAR.$parent-selector} .backdrop-contrast-#{$key}#{$suffix} {
-      @include backdrop-contrast($key);
+    // Blur utilities
+    @each $key, $value in $backdrop-blur-values {
+        #{config-flags.$parent-selector} .backdrop-blur-#{$key}#{$suffix} {
+            @include backdrop-blur($key);
+        }
     }
-  }
 
-  // Grayscale utilities
-  @each $key, $value in $backdrop-grayscale-values {
-    #{VAR.$parent-selector} .backdrop-grayscale-#{$key}#{$suffix} {
-      @include backdrop-grayscale($key);
+    // Brightness utilities
+    @each $key, $value in $backdrop-brightness-values {
+        #{config-flags.$parent-selector} .backdrop-brightness-#{$key}#{$suffix} {
+            @include backdrop-brightness($key);
+        }
     }
-  }
 
-  // Saturate utilities
-  @each $key, $value in $backdrop-saturate-values {
-    #{VAR.$parent-selector} .backdrop-saturate-#{$key}#{$suffix} {
-      @include backdrop-saturate($key);
+    // Contrast utilities
+    @each $key, $value in $backdrop-contrast-values {
+        #{config-flags.$parent-selector} .backdrop-contrast-#{$key}#{$suffix} {
+            @include backdrop-contrast($key);
+        }
     }
-  }
 
-  // Sepia utilities
-  @each $key, $value in $backdrop-sepia-values {
-    #{VAR.$parent-selector} .backdrop-sepia-#{$key}#{$suffix} {
-      @include backdrop-sepia($key);
+    // Grayscale utilities
+    @each $key, $value in $backdrop-grayscale-values {
+        #{config-flags.$parent-selector} .backdrop-grayscale-#{$key}#{$suffix} {
+            @include backdrop-grayscale($key);
+        }
     }
-  }
 
-  // Hue-rotate utilities
-  @each $key, $value in $backdrop-hue-rotate-values {
-    #{VAR.$parent-selector} .backdrop-hue-#{$key}#{$suffix} {
-      @include backdrop-hue-rotate($key);
+    // Saturate utilities
+    @each $key, $value in $backdrop-saturate-values {
+        #{config-flags.$parent-selector} .backdrop-saturate-#{$key}#{$suffix} {
+            @include backdrop-saturate($key);
+        }
     }
-  }
 
-  // Invert utilities
-  @each $key, $value in $backdrop-invert-values {
-    #{VAR.$parent-selector} .backdrop-invert-#{$key}#{$suffix} {
-      @include backdrop-invert($key);
+    // Sepia utilities
+    @each $key, $value in $backdrop-sepia-values {
+        #{config-flags.$parent-selector} .backdrop-sepia-#{$key}#{$suffix} {
+            @include backdrop-sepia($key);
+        }
+    }
+
+    // Hue-rotate utilities
+    @each $key, $value in $backdrop-hue-rotate-values {
+        #{config-flags.$parent-selector} .backdrop-hue-#{$key}#{$suffix} {
+            @include backdrop-hue-rotate($key);
+        }
+    }
+
+    // Invert utilities
+    @each $key, $value in $backdrop-invert-values {
+        #{config-flags.$parent-selector} .backdrop-invert-#{$key}#{$suffix} {
+            @include backdrop-invert($key);
+        }
+    }
+
+    // Preset utilities (these override the CSS variables approach)
+    #{config-flags.$parent-selector} .backdrop-frosted#{$suffix} {
+        @include backdrop-frosted;
+    }
+    #{config-flags.$parent-selector} .backdrop-glass#{$suffix} {
+        @include backdrop-glass;
+    }
+    #{config-flags.$parent-selector} .backdrop-dark-glass#{$suffix} {
+        @include backdrop-dark-glass;
+    }
+    #{config-flags.$parent-selector} .backdrop-crystal#{$suffix} {
+        @include backdrop-crystal;
+    }
+    #{config-flags.$parent-selector} .backdrop-matte#{$suffix} {
+        @include backdrop-matte;
     }
-  }
-
-  // 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;
-  }
 }
 
-@if FN.feature-enabled("backdrops") {
-  // Generate base utilities
-  @include generate-backdrop-filter-utilities;
+@if fn-flags.feature-enabled("backdrops") {
+    // Generate base utilities
+    @include generate-backdrop-filter-utilities;
 
-  // Generate responsive variants
-  @each $breakpoint, $width in VAR.$breakpoints {
-    @media (min-width: #{$width}) {
-      @include generate-backdrop-filter-utilities($breakpoint);
+    // Generate responsive variants
+    @each $breakpoint, $width in config-breakpoint.$breakpoints {
+        @media (min-width: #{$width}) {
+            @include generate-backdrop-filter-utilities($breakpoint);
+        }
     }
-  }
 }