282: Fix modular-spacing mixins and variables (#290)

* 282: modular-margin mixin

* 282: modular margin and padding mixins with the vertical and horizontal variants; switch out values in _card.scss

core/scss/components/card/_card--horizontal.scss

@@ -38,12 +38,10 @@
   }
 
   // Modular padding.
-  > img,
-  .su-card__contents {
-    @include modular-margin();
-  }
-
   img {
+    @include modular-spacing(2, 'padding-left');
+    @include modular-spacing(2, 'padding-top');
+    @include modular-spacing(2, 'padding-bottom');
     -ms-grid-row: 1;
     -ms-grid-column: 1;
   }
@@ -53,6 +51,7 @@
     -ms-grid-column: 1;
 
     @include grid-media('sm') {
+      @include padding(null null null 0);
       -ms-grid-row: 1;
       -ms-grid-column: 2;
     }

core/scss/components/card/_card.scss

@@ -25,11 +25,11 @@
 
 // Card contents spacing.
 .su-card__contents {
-  @include modular-margin;
+  @include modular-spacing(2);
 
-  // Ensure no bottom margins on last item.
+  // Ensure no bottom padding on last item.
   *:last-child {
-    @include margin(null null 0);
+    @include padding(null null 0);
   }
 
   // TODO: Refactor this to a mixin when typo headings available.

core/scss/core/flex-grid/_flex-grid.scss

@@ -38,27 +38,28 @@
 
   &--row-gap {
     > * {
-      @include grid-media('2xl') {
-        @include margin(0 0 map-get($modular-spacing, '2xl') 0);
+      @include margin(0 0 map-get($grid-gutters, 'xs') 0);
+
+      @include grid-media('sm') {
+        @include margin(0 0 map-get($grid-gutters, 'sm') 0);
       }
 
-      @include grid-media('xl') {
-        @include margin(0 0 map-get($modular-spacing, 'xl') 0);
+      @include grid-media('md') {
+        @include margin(0 0 map-get($grid-gutters, 'md') 0);
       }
 
       @include grid-media('lg') {
-        @include margin(0 0 map-get($modular-spacing, 'lg') 0);
+        @include margin(0 0 map-get($grid-gutters, 'lg') 0);
       }
 
-      @include grid-media('md') {
-        @include margin(0 0 map-get($modular-spacing, 'md') 0);
+      @include grid-media('xl') {
+        @include margin(0 0 map-get($grid-gutters, 'xl') 0);
       }
 
-      @include grid-media('sm') {
-        @include margin(0 0 map-get($modular-spacing, 'sm') 0);
+      @include grid-media('2xl') {
+        @include margin(0 0 map-get($grid-gutters, '2xl') 0);
       }
 
-      @include margin(0 0 map-get($modular-spacing, 'xs') 0);
     }
   }
 

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

@@ -0,0 +1,23 @@
+@charset "UTF-8";
+
+//
+// calculate-modular-spacing($step, $breakpoint)
+//
+// Calculates the modular spacing value at a step(integer) on the scale at a certain breakpoint.
+//
+// The modular spacing value is calculated by multiplying the modular spacing base value at the requested breakpoint and the multiplier at the requested step of the scale.
+//
+// The default value for $step is 0, which returns a multiplier value of 1, i.e., calculate-modular-spacing(0, 'xs') = $modular-spacing-base at XS breakpoint
+//
+// $step - Integers from -4 to 5 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);
+  } @else {
+    @error '$step should be an integer between -4 and 5';
+  }
+}

core/scss/utilities/functions/modular-scale/_get-modular-spacing-base.scss

@@ -0,0 +1,19 @@
+@charset "UTF-8";
+
+//
+// get-modular-spacing-base($breakpoint)
+//
+// Get a value out of the modular-spacing-base map
+// Returns the pixel value of the $modular-spacing-base variable at a breakpoint.
+//
+// $breakpoint - One of `xs`, `sm`, `md`, `lg`, `xl`, `2xl`
+//
+// Style guide: Functions.ModularScale.get-modular-spacing-base
+//
+@function get-modular-spacing-base($breakpoint: 'xs') {
+  $base: map-get($modular-spacing-base, $breakpoint);
+  @if $base == null {
+    @warn 'Non-existent key in get-modular-spacing-base: $breakpoint';
+  }
+  @return $base;
+}

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

@@ -0,0 +1,18 @@
+@charset "UTF-8";
+
+//
+// get-modular-spacing-multiplier($step)
+//
+// Get a value out of the modular-spacing-multiplier map.
+// Returns the value of the $modular-spacing-multiplier variable at a step(integer) on the scale.
+// The default for $step is 0, which returns a multiplier value of 1.
+//
+// $step - Integers from -4 to 5 including 0
+//
+// Style guide: Functions.ModularScale.get-modular-spacing-multiplier
+//
+@function get-modular-spacing-multiplier($step: 0) {
+  @if ($step >= -4 and $step <= 5) {
+    @return map_get($modular-spacing-multiplier, $step);
+  }
+}