feat(layout): update spacing scale (#458)

carbon-design-system · Mar 29, 2019 · 360c9eb · 360c9eb
1 parent 1d45594
commit 360c9eb
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 12 deletions.
diff --git a/packages/layout/examples/preview/index.html b/packages/layout/examples/preview/index.html
@@ -37,7 +37,6 @@ <h2>Spacing scale</h2>
     <div>
       <h3>Fixed</h3>
       <ol class="spacing-scale">
-        <li class="fixed-spacing-scale-0"></li>
         <li class="fixed-spacing-scale-1"></li>
         <li class="fixed-spacing-scale-2"></li>
         <li class="fixed-spacing-scale-3"></li>
@@ -47,17 +46,15 @@ <h3>Fixed</h3>
         <li class="fixed-spacing-scale-7"></li>
         <li class="fixed-spacing-scale-8"></li>
         <li class="fixed-spacing-scale-9"></li>
-        <li class="fixed-spacing-scale-10"></li>
-        <li class="fixed-spacing-scale-11"></li>
       </ol>
     </div>
     <div>
       <h3>Fluid</h3>
       <ol class="spacing-scale">
-        <li class="fluid-spacing-scale-0"></li>
         <li class="fluid-spacing-scale-1"></li>
         <li class="fluid-spacing-scale-2"></li>
         <li class="fluid-spacing-scale-3"></li>
+        <li class="fluid-spacing-scale-4"></li>
       </ol>
     </div>
   </article>

diff --git a/packages/layout/examples/preview/styles.scss b/packages/layout/examples/preview/styles.scss
@@ -33,24 +33,24 @@ body {
   padding: 0;
 }
 
-@each $step in $carbon--fixed-spacing-scale {
-  $index: index($carbon--fixed-spacing-scale, $step) - 1;
+@each $spacer in $carbon--spacing {
+  $index: index($carbon--spacing, $spacer);
 
   .fixed-spacing-scale-#{$index} {
-    width: carbon--spacing($index);
-    height: carbon--spacing($index);
+    width: $spacer;
+    height: $spacer;
     background-color: black;
     margin-right: carbon--mini-units(3);
     margin-bottom: carbon--mini-units(3);
   }
 }
 
-@each $step in $carbon--fluid-spacing-scale {
-  $index: index($carbon--fluid-spacing-scale, $step) - 1;
+@each $spacer in $carbon--fluid-spacing {
+  $index: index($carbon--fluid-spacing, $spacer);
 
   .fluid-spacing-scale-#{$index} {
-    width: carbon--spacing($index, true);
-    height: carbon--spacing($index, true);
+    width: $spacer;
+    height: $spacer;
     background-color: black;
     margin-right: carbon--mini-units(3);
     margin-bottom: carbon--mini-units(3);

diff --git a/packages/layout/scss/_spacing.scss b/packages/layout/scss/_spacing.scss
@@ -17,6 +17,18 @@ $carbon--spacing-07: carbon--mini-units(4) !default;
 $carbon--spacing-08: carbon--mini-units(5) !default;
 $carbon--spacing-09: carbon--mini-units(6) !default;
 
+$carbon--spacing: (
+  $carbon--spacing-01,
+  $carbon--spacing-02,
+  $carbon--spacing-03,
+  $carbon--spacing-04,
+  $carbon--spacing-05,
+  $carbon--spacing-06,
+  $carbon--spacing-07,
+  $carbon--spacing-08,
+  $carbon--spacing-09
+) !default;
+
 $spacing-01: $carbon--spacing-01 !default;
 $spacing-02: $carbon--spacing-02 !default;
 $spacing-03: $carbon--spacing-03 !default;
@@ -35,6 +47,16 @@ $carbon--layout-05: carbon--mini-units(8) !default;
 $carbon--layout-06: carbon--mini-units(12) !default;
 $carbon--layout-07: carbon--mini-units(20) !default;
 
+$carbon--layout: (
+  $carbon--layout-01,
+  $carbon--layout-02,
+  $carbon--layout-03,
+  $carbon--layout-04,
+  $carbon--layout-05,
+  $carbon--layout-06,
+  $carbon--layout-07
+) !default;
+
 $layout-01: $carbon--layout-01 !default;
 $layout-02: $carbon--layout-02 !default;
 $layout-03: $carbon--layout-03 !default;
@@ -49,6 +71,13 @@ $carbon--fluid-spacing-02: 2vw;
 $carbon--fluid-spacing-03: 5vw;
 $carbon--fluid-spacing-04: 10vw;
 
+$carbon--fluid-spacing: (
+  $carbon--fluid-spacing-01,
+  $carbon--fluid-spacing-02,
+  $carbon--fluid-spacing-03,
+  $carbon--fluid-spacing-04
+) !default;
+
 $fluid-spacing-01: $carbon--fluid-spacing-01 !default;
 $fluid-spacing-02: $carbon--fluid-spacing-02 !default;
 $fluid-spacing-03: $carbon--fluid-spacing-03 !default;