From eaeb6a7d328edb2382ff3753d42cfe23d147114f Mon Sep 17 00:00:00 2001
From: Shawn Allen <shawn.allen@github.com>
Date: Thu, 24 Jan 2019 14:37:48 -0800
Subject: [PATCH] feat(primer-support): refactor spacer variables

This refactors our spacer variables so that $spacer-n variables are the
"source of truth", $spacers is a list of the $spacer-n values, and the
new $spacer-map variable makes it easier to loop over the spacing scale
with:

@each $scale, $size in $spacer-map { ... }
---
 .../primer-support/lib/variables/layout.scss  | 44 ++++++++++++-------
 1 file changed, 29 insertions(+), 15 deletions(-)

diff --git a/modules/primer-support/lib/variables/layout.scss b/modules/primer-support/lib/variables/layout.scss
index 4aed8d7b..c5862947 100644
--- a/modules/primer-support/lib/variables/layout.scss
+++ b/modules/primer-support/lib/variables/layout.scss
@@ -11,24 +11,38 @@
 //    5 => 32px
 //    6 => 40px
 $spacer: 8px !default;
+
+// Our spacing scale
+$spacer-0: 0 !default;                  // 0
+$spacer-1: round($spacer / 2) !default; // 4px
+$spacer-2: $spacer !default;            // 8px
+$spacer-3: $spacer * 2 !default;        // 16px
+$spacer-4: $spacer * 3 !default;        // 24px
+$spacer-5: $spacer * 4 !default;        // 32px
+$spacer-6: $spacer * 5 !default;        // 40px
+
+// The list of spacer values
 $spacers: (
-  0,
-  round($spacer / 2),
-  $spacer,
-  $spacer * 2,
-  $spacer * 3,
-  $spacer * 4,
-  $spacer * 5
+  $spacer-0,
+  $spacer-1,
+  $spacer-2,
+  $spacer-3,
+  $spacer-4,
+  $spacer-5,
+  $spacer-6,
 ) !default;
 
-// Aliases for easy use
-$spacer-0: nth($spacers, 1) !default; // 0
-$spacer-1: nth($spacers, 2) !default; // 4px
-$spacer-2: nth($spacers, 3) !default; // 8px
-$spacer-3: nth($spacers, 4) !default; // 16px
-$spacer-4: nth($spacers, 5) !default; // 24px
-$spacer-5: nth($spacers, 6) !default; // 32px
-$spacer-6: nth($spacers, 7) !default; // 40px
+// And the map of spacers, for easier looping:
+// @each $scale, $length in $spacer-map { ... }
+$spacer-map: (
+  0: $spacer-0,
+  1: $spacer-1,
+  2: $spacer-2,
+  3: $spacer-3,
+  4: $spacer-4,
+  5: $spacer-5,
+  6: $spacer-6,
+) !default;
 
 // Em spacer variables
 $em-spacer-1: 0.0625em !default; // 1/16