Different way of setting up modular spacing

core/src/scss/utilities/functions/_map-deep-get.scss

@@ -0,0 +1,12 @@
+/// Map deep get
+/// @author Hugo Giraudel
+/// @access public
+/// @param {Map} $map - Map
+/// @param {Arglist} $keys - Key chain
+/// @return {*} - Desired value
+@function map-deep-get($map, $keys...) {
+  @each $key in $keys {
+    $map: map-get($map, $key);
+  }
+  @return $map;
+}

core/src/scss/utilities/functions/index.scss

@@ -8,6 +8,7 @@
 'breakpoint/index',
 'color',
 'flex/index',
+'map-deep-get',
 'modular-scale/index',
 'string/index',
 'type-checks/index';

core/src/scss/utilities/functions/modular-scale/_get-modular-spacing-value.scss

@@ -0,0 +1,21 @@
+@charset "UTF-8";
+
+///
+/// Get a value out of the $su-modular-spacing-map
+///
+/// @name get-modular-spacing-value
+///
+/// @param {Integer} $step - Integers from -4 to 10 including 0
+/// @param {device} $device - `mobile`, `tablet` or `desktop`
+///
+/// @group mixin
+@function get-modular-spacing-value($step: 0, $device: 'desktop') {
+  $value: map-deep-get($su-modular-spacing-map, $step, $device);
+  @if ($step < -4 and $step > 10) {
+    @warn 'Modular spacing step value must be an integer between -4 and 10.';
+  }
+  @if $value == null {
+    @warn 'Could not find this spacing value in the $su-modular-spacing-map. Check the parameters.';
+  }
+  @return $value;
+}

core/src/scss/utilities/functions/modular-scale/index.scss

@@ -7,4 +7,5 @@
 @import
 'get-modular-spacing-base',
 'get-modular-spacing-multiplier',
+'get-modular-spacing-value',
 'calculate-modular-spacing';

core/src/scss/utilities/mixins/breakpoint/_grid-media-device.scss

@@ -0,0 +1,20 @@
+@charset "UTF-8";
+
+///
+/// A helper to quickly generate a media query
+///
+/// @name su-grid-media-device
+///
+/// @param {key code} $breakpoint - The breakpoint shortcode - 'mobile', 'tablet' or 'desktop'
+///
+/// @group mixin
+@mixin grid-media-device($breakpoint: 'tablet') {
+  @if $breakpoint == 'mobile' {
+    @content;
+  }
+  @else {
+    @media #{map-get($su-grid-device, $breakpoint)} {
+      @content;
+    }
+  }
+}

core/src/scss/utilities/mixins/breakpoint/index.scss

@@ -6,6 +6,7 @@
 
 @import
 'grid-media-between',
+'grid-media-device',
 'grid-media-max',
 'grid-media-min',
 'grid-media-only',

core/src/scss/utilities/mixins/modular-scale/_modular-spacing-new.scss

@@ -0,0 +1,75 @@
+@charset "UTF-8";
+
+///
+/// Modular Spacing New
+/// Mixins for modular scaling, a unitless system for returning font sizes or spacing (padding or margin) values.
+/// Our modular spacing system does not use the Bourbon modular-scale mixin. Instead we use a manual scale defined in variables/core/_modular-spacing.scss for finetuning.
+/// A mixin for adding spacing (margin or padding) between elements or between an
+/// element and the edge of its container. The amount of spacing is returned
+/// using a unitless scaling system with a curated scale.
+/// Please see core/scss/utilities/variables/core/_modular-spacing.scss for
+/// variable maps.
+///
+/// @name modular-spacing-new
+///
+/// @example scss
+///   @include modular-spacing-new('padding', 2 null);
+///   @include modular-spacing-new('margin', 0 -4 1 2);
+///
+/// @param {list} $steps - List (1 to 4 values): Either integer (from -4 to 10 including 0) or null. Follows the shorthand notation of padding/margin. Use null to skip a side. A value of 0 returns the modular spacing base value for that breakpoint.
+///
+/// @group mixin
+@mixin modular-spacing-new($type: 'padding', $steps: 0, $grid: $su-grid-device) {
+  @each $key, $breakpoint in $grid {
+    @include grid-media-device($key) {
+      @if length($steps) == 1 {
+        #{$type}: get-modular-spacing-value($steps, $key);
+      }
+      @else if length($steps) == 2 {
+        @if nth($steps, 1) != null {
+          #{$type}-top: get-modular-spacing-value(nth($steps, 1), $key);
+          #{$type}-bottom: get-modular-spacing-value(nth($steps, 1), $key);
+        }
+
+        @if nth($steps, 2) != null {
+          #{$type}-left: get-modular-spacing-value(nth($steps, 2), $key);
+          #{$type}-right: get-modular-spacing-value(nth($steps, 2), $key);
+        }
+      }
+      @else if length($steps) == 3 {
+        @if nth($steps, 1) != null {
+          #{$type}-top: get-modular-spacing-value(nth($steps, 1), $key);
+        }
+
+        @if nth($steps, 2) != null {
+          #{$type}-right: get-modular-spacing-value(nth($steps, 2), $key);
+          #{$type}-left: get-modular-spacing-value(nth($steps, 2), $key);
+        }
+
+        @if nth($steps, 3) != null {
+          #{$type}-bottom: get-modular-spacing-value(nth($steps, 3), $key);
+        }
+      }
+      @else if length($steps) == 4 {
+        @if nth($steps, 1) != null {
+          #{$type}-top: get-modular-spacing-value(nth($steps, 1), $key);
+        }
+
+        @if nth($steps, 2) != null {
+          #{$type}-right: get-modular-spacing-value(nth($steps, 2), $key);
+        }
+
+        @if nth($steps, 3) != null {
+          #{$type}-bottom: get-modular-spacing-value(nth($steps, 3), $key);
+        }
+
+        @if nth($steps, 4) != null {
+          #{$type}-left: get-modular-spacing-value(nth($steps, 4), $key);
+        }
+      }
+      @else if length($steps) > 4 or length($steps) == 0 {
+        @error '$steps should have 1 to 4 values';
+      }
+    }
+  }
+}

core/src/scss/utilities/mixins/modular-scale/_modular-spacing.scss

@@ -13,7 +13,6 @@
 /// @name modular-spacing
 ///
 /// @example scss
-///   @include modular-spacing(3);
 ///   @include modular-spacing('padding', 2 null);
 ///   @include modular-spacing('margin', 0 -4 1 2);
 ///

core/src/scss/utilities/mixins/modular-scale/index.scss

@@ -6,5 +6,6 @@
 
 @import
 'modular-spacing',
+'modular-spacing-new',
 'modular-typography-base',
 'modular-typography';

core/src/scss/utilities/variables/core/_breakpoints.scss

@@ -130,4 +130,4 @@ $su-breakpoint-2xl: 'only screen and (min-width: #{$su-screen-2xl})' !default;
 /// @name $su-breakpoint-2xl-only
 ///
 /// @group variable
-$su-breakpoint-2xl-only: $su-breakpoint-2xl;
+$su-breakpoint-2xl-only: $su-breakpoint-2xl;

core/src/scss/utilities/variables/core/_grid.scss

@@ -38,6 +38,18 @@ $su-grid-media: (
   '2xl': $su-breakpoint-2xl
 ) !default;
 
+///
+/// A sass map of device sized keyed with the breakpoint shortcode.
+///
+/// @name $su-grid-device
+///
+/// @group variable
+$su-grid-device: (
+    'mobile': $su-breakpoint-xs,
+    'tablet': $su-breakpoint-md,
+    'desktop': $su-breakpoint-2xl
+) !default;
+
 ///
 /// A sass map of single breakpoint spans keyed with the breakpoint shortcode.
 ///

core/src/scss/utilities/variables/core/_modular-spacing.scss

@@ -46,3 +46,27 @@ $su-modular-spacing-multiplier: (
   8: 7,
   9: 9
 ) !default;
+
+///
+/// The modular spacing values from step -4 to 10 at 3 device width ranges.
+///
+/// @name su-modular-spacing-map
+///
+/// @group variable
+$su-modular-spacing-map: (
+  -4: (mobile: 0.3rem, tablet: 0.3rem, desktop: 0.3rem), // Consider removing
+  -3: (mobile: 0.5rem, tablet: 0.6rem, desktop: 0.6rem), // Consider removing
+  -2: (mobile: 0.8rem, tablet: 0.9rem, desktop: 1rem), // Consider removing
+  -1: (mobile: 1.1rem, tablet: 1.2rem, desktop: 1.3rem), // Consider removing
+  0: (mobile: 1.5rem, tablet: 1.8rem, desktop: 1.9rem),
+  1: (mobile: 2rem, tablet: 2.6rem, desktop: 2.7rem),
+  2: (mobile: 3rem, tablet: 3.6rem, desktop: 3.8rem),
+  3: (mobile: 3.2rem, tablet: 4.5rem, desktop: 4.8rem),
+  4: (mobile: 3.4rem, tablet: 5.8rem, desktop: 6.1rem),
+  5: (mobile: 3.8rem, tablet: 7.2rem, desktop: 7.6rem),
+  6: (mobile: 4.5rem, tablet: 9rem, desktop: 9.5rem),
+  7: (mobile: 5rem, tablet: 10.8rem, desktop: 11.4rem),
+  8: (mobile: 6rem, tablet: 12.6rem, desktop: 13.3rem),
+  9: (mobile: 7rem, tablet: 16.2rem, desktop: 17.1rem),
+  10: (mobile: 8rem, tablet: 21.6rem, desktop: 22.8rem)
+) !default;