✨ feat(blur.scss): Add blur utility classes with viewport disabled

dist/cirrus-all.css

@@ -14206,6 +14206,36 @@ ul .divider::after {
     bottom: -100% !important;
   }
 }
+.u-blur-none {
+  --cirrus-blur: blur(0);
+  filter: var(--cirrus-blur);
+}
+
+.u-blur-xs {
+  --cirrus-blur: blur(0.25rem);
+  filter: var(--cirrus-blur);
+}
+
+.u-blur-sm {
+  --cirrus-blur: blur(0.5rem);
+  filter: var(--cirrus-blur);
+}
+
+.u-blur-md {
+  --cirrus-blur: blur(1rem);
+  filter: var(--cirrus-blur);
+}
+
+.u-blur-lg {
+  --cirrus-blur: blur(1.5rem);
+  filter: var(--cirrus-blur);
+}
+
+.u-blur-xl {
+  --cirrus-blur: blur(3rem);
+  filter: var(--cirrus-blur);
+}
+
 .u-clear-left {
   clear: left !important;
 }

dist/cirrus-core.css

@@ -12625,6 +12625,36 @@ ul .divider::after {
   bottom: -100% !important;
 }
 
+.u-blur-none {
+  --cirrus-blur: blur(0);
+  filter: var(--cirrus-blur);
+}
+
+.u-blur-xs {
+  --cirrus-blur: blur(0.25rem);
+  filter: var(--cirrus-blur);
+}
+
+.u-blur-sm {
+  --cirrus-blur: blur(0.5rem);
+  filter: var(--cirrus-blur);
+}
+
+.u-blur-md {
+  --cirrus-blur: blur(1rem);
+  filter: var(--cirrus-blur);
+}
+
+.u-blur-lg {
+  --cirrus-blur: blur(1.5rem);
+  filter: var(--cirrus-blur);
+}
+
+.u-blur-xl {
+  --cirrus-blur: blur(3rem);
+  filter: var(--cirrus-blur);
+}
+
 .u-clear-left {
   clear: left !important;
 }

dist/cirrus.css

@@ -12626,6 +12626,36 @@ ul .divider::after {
   bottom: -100% !important;
 }
 
+.u-blur-none {
+  --cirrus-blur: blur(0);
+  filter: var(--cirrus-blur);
+}
+
+.u-blur-xs {
+  --cirrus-blur: blur(0.25rem);
+  filter: var(--cirrus-blur);
+}
+
+.u-blur-sm {
+  --cirrus-blur: blur(0.5rem);
+  filter: var(--cirrus-blur);
+}
+
+.u-blur-md {
+  --cirrus-blur: blur(1rem);
+  filter: var(--cirrus-blur);
+}
+
+.u-blur-lg {
+  --cirrus-blur: blur(1.5rem);
+  filter: var(--cirrus-blur);
+}
+
+.u-blur-xl {
+  --cirrus-blur: blur(3rem);
+  filter: var(--cirrus-blur);
+}
+
 .u-clear-left {
   clear: left !important;
 }

src/builds/core.scss

@@ -19,6 +19,7 @@
 
 // Utilities
 @use "../utils/absolute";
+@use "../utils/blur";
 @use "../utils/clearfix";
 @use "../utils/display";
 @use "../utils/flex";

src/internal/_config.scss

@@ -54,6 +54,7 @@ $default-config: (
             flags.$MIN-WIDTH: false,
             flags.$MAX-WIDTH: false,
             flags.$GRID: true,
+            flags.$BLUR: false,
         ),
     // Extend all existing styles here
     extend:
@@ -112,6 +113,7 @@ $default-config: (
             space-sizes: (),
             tab-sizes: (),
             absolute: (),
+            blur: (),
             flex: (
                 properties: (),
             ),
@@ -611,6 +613,26 @@ $default-config: (
             n50p: -50%,
             n100p: -100%,
         ),
+    blurs: (
+        'none': (
+            --cirrus-blur: blur(0),
+        ),
+        constants.$xs: (
+            --cirrus-blur: blur(0.25rem),
+        ),
+        constants.$sm: (
+            --cirrus-blur: blur(0.5rem),
+        ),
+        constants.$md: (
+            --cirrus-blur: blur(1rem),
+        ),
+        constants.$lg: (
+            --cirrus-blur: blur(1.5rem),
+        ),
+        constants.$xl: (
+            --cirrus-blur: blur(3rem),
+        ),
+    ),
     flex: (
         properties: (
             flex-columns: 12,
@@ -842,6 +864,7 @@ $tag-font-sizes: functions.get-with-extend($all-config, tags, font-sizes);
 
 // UTILS
 $absolute: functions.get-with-extend($all-config, absolute);
+$blurs: functions.get-with-extend($all-config, blurs);
 
 $heights: functions.get-with-extend($all-config, heights);
 $widths: functions.get-with-extend($all-config, widths);

src/internal/_flags.scss

@@ -56,3 +56,4 @@ $GAP: 'GAP';
 $ROUND: 'ROUND';
 $SHADOWS: 'SHADOWS';
 $LETTER-SPACING: 'LETTER-SPACING';
+$BLUR: 'BLUR';

src/utils/blur.scss

@@ -0,0 +1,17 @@
+// Utility classes for shadows
+@use '../internal' as *;
+
+$generate-utility: should-generate-classes($BLUR);
+
+@if $generate-utility {
+    @include generate-styles-with-viewports($generate-viewports: #{get-viewport-flag($BLUR)}) using ($viewport) {
+        $suffix: if($viewport != '', '-#{$viewport}', '');
+
+        @each $class, $property-map in $blurs {
+            .u-blur-#{$class}#{$suffix} {
+                @include explode-properties($property-map);
+                filter: var(--cirrus-blur);
+            }
+        }
+    }
+}