✨ feat(shadows.scss): Add util classes for drop shadows

internal/_config.scss

@@ -273,6 +273,33 @@ $default-config: (
         '90': 0.9,
         '100': 1,
     ),
+    shadows: (
+        'none': (
+            --cirrus-shadow: 0 0 #000,
+        ),
+        $xs: (
+            --cirrus-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05),
+        ),
+        $sm: (
+            --cirrus-shadow: (0 1px 3px 0 rgba(0, 0, 0, 0.1),
+            0 1px 2px 0 rgba(0, 0, 0, 0.06)),
+        ),
+        $md: (
+            --cirrus-shadow: (0 4px 6px -1px rgba(0, 0, 0, 0.1),
+            0 2px 4px -1px rgba(0, 0, 0, 0.06)),
+        ),
+        $lg: (
+            --cirrus-shadow: (0 10px 15px -3px rgba(0, 0, 0, 0.1),
+            0 4px 6px -2px rgba(0, 0, 0, 0.05)),
+        ),
+        $xl: (
+            --cirrus-shadow: (0 20px 25px -5px rgba(0, 0, 0, 0.1),
+            0 10px 10px -5px rgba(0, 0, 0, 0.04)),
+        ),
+        'inset': (
+            --cirrus-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06),
+        ),
+    ),
     widths: (
         10: 10%,
         20: 20%,
@@ -325,4 +352,5 @@ $heights: map.get($default-config, heights);
 $widths: map.get($default-config, widths);
 
 $opacities: map.get($default-config, opacity);
+$shadows: map.get($default-config, shadows);
 $z-indexes: map.get($default-config, z-index);

internal/_size.scss

@@ -110,11 +110,13 @@ $breakpoint-pairs: (
 }
 
 /* Variant of mixin that takes in mapping of class name to value */
-@mixin generate-classes-for-viewport-with-map($class-value-pairs, $property, $prefix: 'u-', $generate-viewports: 'true') {
+@mixin generate-classes-for-viewport-with-map($class-value-pairs, $property, $prefix: 'u-', $generate-viewports: 'true', $include-important: true) {
+
+    $suffix: if($include-important == true, '!important', '');
 
     @each $class, $value in $class-value-pairs {
         .#{$prefix}#{$class} {
-            #{$property}: $value !important;
+            #{$property}: $value#{$suffix};
         }
     }
 
@@ -123,7 +125,7 @@ $breakpoint-pairs: (
             @each $class, $value in $class-value-pairs {
                 @include screen-above($limit) {
                     .#{$prefix}#{$class}-#{$suffix} {
-                        #{$property}: $value !important;
+                        #{$property}: $value#{$suffix};
                     }
                 }
             }

src/core/utils/misc.scss

@@ -81,7 +81,3 @@ $text-directions: (justify, left, right, center);
 .u-no-outline {
     outline: 0px !important;
 }
-
-.u-shadow {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13), 0 1px 2px 0 rgba(0, 0, 0, 0.07) !important;
-}

src/core/utils/shadows.scss

@@ -0,0 +1,11 @@
+// Utility classes for shadows
+@import '../../../internal/_functions';
+@import '../../../internal/_mixins';
+@import '../../../internal/_config';
+
+@each $class, $property-map in $shadows {
+    .u-shadow-#{$class} {
+        @include explode-properties($property-map);
+        box-shadow: var(--cirrus-shadow);
+    }
+}