@nuvoui/core 1.2.4 → 1.2.6

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

@@ -0,0 +1,297 @@
+@use "sass:map";
+@use "sass:meta";
+@use "../abstracts/config" as VAR;
+@use "../abstracts/functions" as FN;
+
+/**
+ * Backdrop Filter Utilities
+ *
+ * Provides utility classes and mixins for backdrop-filter effects.
+ * All utilities come with responsive variants.
+ *
+ * Usage:
+ * <div class="backdrop-blur-md">Blurred backdrop</div>
+ * <div class="backdrop-blur-lg@md">Blurred backdrop on medium screens and up</div>
+ */
+
+// Blur values
+$backdrop-blur-values: (
+  "none": 0,
+  "sm": 4px,
+  "md": 8px,
+  "lg": 12px,
+  "xl": 24px,
+  "2xl": 40px,
+);
+
+// Brightness values
+$backdrop-brightness-values: (
+  "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%,
+);
+
+// Grayscale values
+$backdrop-grayscale-values: (
+  "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%,
+);
+
+// Sepia values
+$backdrop-sepia-values: (
+  "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,
+);
+
+// Invert values
+$backdrop-invert-values: (
+  "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%),
+);
+
+// Base backdrop-filter
+@mixin backdrop-filter($value) {
+  backdrop-filter: $value;
+}
+
+// Specific filter mixins
+@mixin backdrop-blur($value) {
+  @if map.has-key($backdrop-blur-values, $value) {
+    @include backdrop-filter(blur(map.get($backdrop-blur-values, $value)));
+  } @else {
+    @include backdrop-filter(blur($value));
+  }
+}
+
+@mixin backdrop-brightness($value) {
+  @if map.has-key($backdrop-brightness-values, $value) {
+    @include backdrop-filter(brightness(map.get($backdrop-brightness-values, $value)));
+  } @else {
+    @include backdrop-filter(brightness($value));
+  }
+}
+
+@mixin backdrop-contrast($value) {
+  @if map.has-key($backdrop-contrast-values, $value) {
+    @include backdrop-filter(contrast(map.get($backdrop-contrast-values, $value)));
+  } @else {
+    @include backdrop-filter(contrast($value));
+  }
+}
+
+@mixin backdrop-grayscale($value) {
+  @if map.has-key($backdrop-grayscale-values, $value) {
+    @include backdrop-filter(grayscale(map.get($backdrop-grayscale-values, $value)));
+  } @else {
+    @include backdrop-filter(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)));
+  } @else {
+    @include backdrop-filter(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)));
+  } @else {
+    @include backdrop-filter(invert($value));
+  }
+}
+
+@mixin backdrop-saturate($value) {
+  @if map.has-key($backdrop-saturate-values, $value) {
+    @include backdrop-filter(saturate(map.get($backdrop-saturate-values, $value)));
+  } @else {
+    @include backdrop-filter(saturate($value));
+  }
+}
+
+@mixin backdrop-sepia($value) {
+  @if map.has-key($backdrop-sepia-values, $value) {
+    @include backdrop-filter(sepia(map.get($backdrop-sepia-values, $value)));
+  } @else {
+    @include backdrop-filter(sepia($value));
+  }
+}
+
+// Preset backdrop effects
+@mixin backdrop-frosted {
+  @include backdrop-filter(map.get($backdrop-filter-presets, "frosted"));
+}
+
+@mixin backdrop-glass {
+  @include backdrop-filter(map.get($backdrop-filter-presets, "glass"));
+}
+
+@mixin backdrop-dark-glass {
+  @include backdrop-filter(map.get($backdrop-filter-presets, "dark-glass"));
+}
+
+@mixin backdrop-crystal {
+  @include backdrop-filter(map.get($backdrop-filter-presets, "crystal"));
+}
+
+@mixin backdrop-matte {
+  @include backdrop-filter(map.get($backdrop-filter-presets, "matte"));
+}
+
+// Reset filter
+@mixin backdrop-none {
+  backdrop-filter: none;
+}
+
+// Generate utility classes
+@mixin generate-backdrop-filter-utilities($breakpoint: null) {
+  $suffix: if($breakpoint, "\\@#{$breakpoint}", "");
+
+  // 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);
+    }
+  }
+
+  // Brightness utilities
+  @each $key, $value in $backdrop-brightness-values {
+    #{VAR.$parent-selector} .backdrop-brightness-#{$key}#{$suffix} {
+      @include backdrop-brightness($key);
+    }
+  }
+
+  // Contrast utilities
+  @each $key, $value in $backdrop-contrast-values {
+    #{VAR.$parent-selector} .backdrop-contrast-#{$key}#{$suffix} {
+      @include backdrop-contrast($key);
+    }
+  }
+
+  // Grayscale utilities
+  @each $key, $value in $backdrop-grayscale-values {
+    #{VAR.$parent-selector} .backdrop-grayscale-#{$key}#{$suffix} {
+      @include backdrop-grayscale($key);
+    }
+  }
+
+  // Saturate utilities
+  @each $key, $value in $backdrop-saturate-values {
+    #{VAR.$parent-selector} .backdrop-saturate-#{$key}#{$suffix} {
+      @include backdrop-saturate($key);
+    }
+  }
+
+  // Sepia utilities
+  @each $key, $value in $backdrop-sepia-values {
+    #{VAR.$parent-selector} .backdrop-sepia-#{$key}#{$suffix} {
+      @include backdrop-sepia($key);
+    }
+  }
+
+  // Hue-rotate utilities
+  @each $key, $value in $backdrop-hue-rotate-values {
+    #{VAR.$parent-selector} .backdrop-hue-#{$key}#{$suffix} {
+      @include backdrop-hue-rotate($key);
+    }
+  }
+
+  // Invert utilities
+  @each $key, $value in $backdrop-invert-values {
+    #{VAR.$parent-selector} .backdrop-invert-#{$key}#{$suffix} {
+      @include backdrop-invert($key);
+    }
+  }
+
+  // Preset utilities
+  #{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 VAR.$generate-utility-classes {
+  // 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);
+    }
+  }
+}
+
+// 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