Add 4 new @modular-spacing steps (#6 to #9) and modify 2 existing ste…

…ps (#3 and #4) (#503)

* Add 4 extra @modular-spacing steps
* Add rounding to modular spacing calculations.

core/src/scss/utilities/functions/modular-scale/_calculate-modular-spacing.scss

@@ -9,16 +9,16 @@
 //
 // The default value for $step is 0, which returns a multiplier value of 1, i.e., calculate-modular-spacing(0, 'xs') = $su-modular-spacing-base at XS breakpoint
 //
-// $step - Integers from -4 to 5 including 0
+// $step - Integers from -4 to 9 including 0
 // $breakpoint - One of `xs`, `sm`, `md`, `lg`, `xl`, `2xl`
 //
 // Style guide: Functions.ModularScale.calculate-modular-spacing
 //
 @function calculate-modular-spacing($step: 0, $breakpoint: 'xl') {
-  @if ($step >= -4 and $step <= 5) {
-    @return get-modular-spacing-base($breakpoint) * get-modular-spacing-multiplier($step);
+  @if ($step >= -4 and $step <= 9) {
+    @return round(get-modular-spacing-base($breakpoint) * get-modular-spacing-multiplier($step) * 100) / 100;
   }
   @else {
-    @error '$step should be an integer between -4 and 5';
+    @error '$step should be an integer between -4 and 9';
   }
 }

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

@@ -12,7 +12,7 @@
 // Style guide: Functions.ModularScale.get-modular-spacing-multiplier
 //
 @function get-modular-spacing-multiplier($step: 0) {
-  @if ($step >= -4 and $step <= 5) {
+  @if ($step >= -4 and $step <= 9) {
     @return map-get($su-modular-spacing-multiplier, $step);
   }
 }

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

@@ -16,7 +16,8 @@
 // - `@include modular-spacing('margin', 0 -4 1 2)`
 //
 // $type - String: Spacing type, either 'padding' or 'margin'.
-// $steps - List (1 to 4 values): Either integer (from -4 to 5 including 0) or null. Follows the shorthand notation of padding/margin. Use null to skip a side.
+// $steps - List (1 to 4 values): Either integer (from -4 to 9 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.
 //
 // Style guide: Mixins.Modular.modular-spacing
@@ -34,14 +35,12 @@
     // Initialize $previous_base.
     $previous-base: null;
 
-    // If $i is not 1, replace $previous_base with modular-spacing base value
-    // for previous breakpoint.
+    // If $i is not 1, replace $previous_base with modular-spacing base value for previous breakpoint.
     @if $i != 1 {
       $previous-base: get-modular-spacing-base(nth($bp-list, $i - 1));
     }
 
-    // Only write media query if $i = 1 or if $current_base is different from
-    // $previous_base.
+    // Only write media query if $i = 1 or if $current_base is different from $previous_base.
     @if $current-base != $previous-base {
       $key: nth($bp-list, $i);
 

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

@@ -49,19 +49,23 @@ $modular-spacing-base: $su-modular-spacing-base !default;
 // $su-modular-spacing-multiplier
 //
 // The multiplier between each modular spacing steps. These numbers are fine-tuned manually and do not follow a modular scale ratio.
-// Step 0 correspond to a multiplier of 1.
+// Step 0 correspond to a multiplier of 1. There are currently 14 integer steps from -4 to 9.
 //
 // Markup: $su-modular-spacing-multiplier: (
-//    -4: .16666667,
-//    -3: .33333333,
-//    -2: .5,
-//    -1: .6666667,
-//     0: 1,
-//     1: 1.4444444,
-//     2: 2,
-//     3: 2.5,
-//     4: 4,
-//     5: 6
+// -4: 0.16666667,
+// -3: 0.33333333,
+// -2: 0.5,
+// -1: 0.6666667,
+// 0: 1,
+// 1: 1.4444444,
+// 2: 2,
+// 3: 2.5,
+// 4: 3.2,
+// 5: 4,
+// 6: 5,
+// 7: 6,
+// 8: 7,
+// 9: 9
 //) !default;
 //
 // Styleguide: Variables.Core.Modularspacing.su-modular-spacing-multiplier
@@ -70,13 +74,17 @@ $su-modular-spacing-multiplier: (
   -4: 0.16666667,
   -3: 0.33333333,
   -2: 0.5,
-  -1: 0.6666667,
+  -1: 0.66666667,
   0: 1,
-  1: 1.4444444,
+  1: 1.44444444,
   2: 2,
   3: 2.5,
-  4: 4,
-  5: 6
+  4: 3.2,
+  5: 4,
+  6: 5,
+  7: 6,
+  8: 7,
+  9: 9
 ) !default;
 
 //