feat(size and space): update spacing unit ramp (#685)

dialpad · Sep 20, 2022 · 782f0c2 · 782f0c2
1 parent e586900
commit 782f0c2
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 45 deletions.
diff --git a/lib/build/less/utilities/internals.less b/lib/build/less/utilities/internals.less
@@ -476,4 +476,29 @@
     //  Iterate our loop until we hit our grid column total
     #d-internals #build-flex-columns(@num, @count + 1);
   }
+
+    //  ========================================================================
+    //  $   SPACING CLASSES
+    //  ------------------------------------------------------------------------
+    #spacing-classes(@BU, @prefix, @suffix: '') {
+      @stop-100: ~"@{prefix}-100@{suffix}";
+      @stop-200: ~"@{prefix}-200@{suffix}";
+      @stop-300: ~"@{prefix}-300@{suffix}";
+      @stop-400: ~"@{prefix}-400@{suffix}";
+      @stop-500: ~"@{prefix}-500@{suffix}";
+      @stop-600: ~"@{prefix}-600@{suffix}";
+      @stop-700: ~"@{prefix}-700@{suffix}";
+      @stop-800: ~"@{prefix}-800@{suffix}";
+
+      body {
+        --@{stop-100}:       calc(@BU / pow(2, 3));
+        --@{stop-200}:       calc(@BU / pow(2, 2));
+        --@{stop-300}:       calc(@BU / pow(2, 1));
+        --@{stop-400}:       @BU;
+        --@{stop-500}:       calc(@BU * pow(2, 1));
+        --@{stop-600}:       calc(@BU * pow(2, 2));
+        --@{stop-700}:       calc(@BU * pow(2, 3));
+        --@{stop-800}:       calc(@BU * pow(2, 4));
+      }
+    }
 }
diff --git a/lib/build/less/variables/sizes.less b/lib/build/less/variables/sizes.less
@@ -73,3 +73,9 @@
         height: @icon-size24;
     }
 }
+
+#d-internals #spacing-classes(0.8rem, 'size');
+#d-internals #spacing-classes(1.6rem, 'size', '-16');
+#d-internals #spacing-classes(3.2rem, 'size', '-32');
+#d-internals #spacing-classes(6.4rem, 'size', '-64');
+#d-internals #spacing-classes(12.8rem, 'size', '-128');
diff --git a/lib/build/less/variables/spacing.less b/lib/build/less/variables/spacing.less
@@ -28,48 +28,8 @@
 @su114:                         11.4rem;    // 114px
 @su128:                         12.8rem;    // 128px
 
-@spacing-units: {
-    su0:    @su0;
-    su1:    @su1;
-    su2:    @su2;
-    su4:    @su4;
-    su6:    @su6;
-    su8:    @su8;
-    su12:   @su12;
-    su16:   @su16;
-    su24:   @su24;
-    su32:   @su32;
-    su48:   @su48;
-    su64:   @su64;
-    su72:   @su72;
-    su84:   @su84;
-    su96:   @su96;
-    su102:  @su102;
-    su114:  @su114;
-    su128:  @su128;
-
-    sun1:   -(@su1);
-    sun2:   -(@su2);
-    sun4:   -(@su4);
-    sun6:   -(@su6);
-    sun8:   -(@su8);
-    sun12:  -(@su12);
-    sun16:  -(@su16);
-    sun24:  -(@su24);
-    sun32:  -(@su32);
-    sun48:  -(@su48);
-    sun64:  -(@su64);
-    sun72:  -(@su72);
-    sun84:  -(@su84);
-    sun96:  -(@su96);
-    sun102: -(@su102);
-    sun114: -(@su114);
-    sun128: -(@su128);
-}
-
-body {
-    //  Spacing units
-    each(@spacing-units, {
-        --@{key}: @value;
-    });
-}
+#d-internals #spacing-classes(0.8rem, 'space');
+#d-internals #spacing-classes(1.6rem, 'space', '-16');
+#d-internals #spacing-classes(3.2rem, 'space', '-32');
+#d-internals #spacing-classes(6.4rem, 'space', '-64');
+#d-internals #spacing-classes(12.8rem, 'space', '-128');