diff --git a/packages/layout/examples/preview/index.html b/packages/layout/examples/preview/index.html
index c44b9a81..a0be87cc 100644
--- a/packages/layout/examples/preview/index.html
+++ b/packages/layout/examples/preview/index.html
@@ -37,7 +37,6 @@
Spacing scale
Fixed
-
@@ -47,17 +46,15 @@ Fixed
-
-
diff --git a/packages/layout/examples/preview/styles.scss b/packages/layout/examples/preview/styles.scss
index c9f1ce06..a5637064 100644
--- 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
index ebd216dc..1f97cf70 100644
--- 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;