Use CSS variables for spacing (#873)

* Replace (nearly) all `@su` less variables with CSS variables

* Add a comment explaining `--su1`

Addresses https://github.com/StackExchange/Stacks/pull/873/files#r824834866

* Be explicit in calling out static spacing units

Co-authored-by: Aaron Shekey <[email protected]>

Author: dancormier

docs/_data/atomics.json

@@ -26,7 +26,7 @@
     },
     {
       "class": "bs-ring",
-      "output": "box-shadow: 0 0 0 @su4 var(--focus-ring);",
+      "output": "box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);",
       "hover": true,
       "focus": true
     }
@@ -1120,7 +1120,7 @@
     },
     {
       "class": "outline-ring",
-      "output": "outline: solid @su4 var(--focus-ring);",
+      "output": "outline: solid var(--su-static4) var(--focus-ring);",
       "define": "<p class='mb0'>Adds an outline that mimics our button focus styling.</p>",
       "focus": true
     }

docs/assets/less/stacks-documentation.less

@@ -14,8 +14,8 @@
 @import "../../../lib/css/stacks.less"; //  These are actual styles used in SO projects
 
 .stacks-section {
-    margin-top: @su48;
-    margin-bottom: @su48;
+    margin-top: var(--su48);
+    margin-bottom: var(--su48);
 }
 
 .stacks-header {
@@ -180,16 +180,16 @@
 //  --  Section Title
 .stacks-h2 {
     font-size: var(--fs-headline1);
-    padding-top: @su64 + @su24; // Hack for #anchor positioning
-    margin-top: -@su64 + -@su24; // Hack for #anchor positioning
+    padding-top: calc(var(--su96) - var(--su8)); // Hack for #anchor positioning
+    margin-top: calc((var(--su96) - var(--su8)) * -1); // Hack for #anchor positioning
 }
 
 //  --  Sub-section Title
 .stacks-h3 {
     font-size: var(--fs-subheading);
     color: var(--fc-medium);
-    padding-top: @su64 + @su24; // Hack for #anchor positioning
-    margin-top: -@su64 + -@su24; // Hack for #anchor positioning
+    padding-top: calc(var(--su96) - var(--su8)); // Hack for #anchor positioning
+    margin-top: calc((var(--su96) - var(--su8)) * -1); // Hack for #anchor positioning
 }
 
 .stacks-h4 {
@@ -219,7 +219,7 @@
 //  --   Code Tag
 //  ----------------------------------------------------------------------------
 .stacks-code {
-    padding: 3px 5px @su2 @su4;
+    padding: 3px 5px var(--su2) var(--su4);
     border-radius: var(--br-sm);
     background-color: var(--black-075);
     font-size: var(--fs-caption);
@@ -247,7 +247,7 @@
 //  $   CODE STYLES
 //  ----------------------------------------------------------------------------
 .stacks-preview {
-    margin-bottom: @su48;
+    margin-bottom: var(--su48);
     border-radius: var(--br-md);
     box-shadow: var(--bs-sm);
 
@@ -272,7 +272,7 @@
 
 //  Preview area
 .stacks-preview--example {
-    padding: @su16;
+    padding: var(--su16);
     border-bottom-left-radius: var(--br-md);
     border-bottom-right-radius: var(--br-md);
     border: 1px solid var(--bc-medium);
@@ -300,7 +300,7 @@
 
 //  --   Preview Area
 .stacks-icon-preview {
-    padding: @su8;
+    padding: var(--su8);
     min-height: 4em;
     border-top-left-radius: var(--br-sm);
     border-top-right-radius: var(--br-sm);
@@ -319,7 +319,7 @@
 //  ----------------------------------------------------------------------------
 
 .stacks-flex-example--item {
-    padding: @su8;
+    padding: var(--su8);
     border: 1px solid var(--bc-medium);
     background-color: var(--black-075);
     font-family: var(--ff-mono);
@@ -331,8 +331,8 @@
 //  $   COLORS
 //  ----------------------------------------------------------------------------
 .stacks-swatch {
-    width: @su32;
-    height: @su32;
+    width: var(--su-static32);
+    height: var(--su-static32);
 }
 
 //  ============================================================================
@@ -401,17 +401,17 @@
 .stacks-theme-button {
     color: var(--black-300);
     position: relative;
-    padding-right: @su24 !important;
+    padding-right: var(--su-static24) !important;
 
     &:after {
         content: "";
         position: absolute;
         z-index: var(--zi-active);
-        top: calc(50% - 2px);
-        right: @su12 - @su2;
+        top: calc(50% - var(--su-static2));
+        right: calc(var(--su-static12) - var(--su-static2));
         border-style: solid;
-        border-width: @su4;
-        border-top-width: @su4;
+        border-width: var(--su-static4);
+        border-top-width: var(--su-static4);
         border-bottom-width: 0;
         border-color: currentColor transparent;
         pointer-events: none;

docs/product/components/banners.html

@@ -9,8 +9,8 @@
 <!-- Override stacks classes for demos -->
 <style>
 .s-banner[aria-hidden=false] {
-    -webkit-transform: translate3d(0, 63px, 0);
-    transform: translate3d(0, 63px, 0);
+    -webkit-transform: translate3d(0, calc(var(--su64) - var(--su1)), 0);
+    transform: translate3d(0, calc(var(--su64) - var(--su1)), 0);
 }
 .s-banner[aria-hidden=false].is-pinned {
     -webkit-transform: translate3d(0, 0, 0);

lib/css/atomic/_stacks-borders.less

@@ -46,34 +46,34 @@
 //  ----------------------------------------------------------------------------
 //  $$  All Sides
 #stacks-internals #responsify('.baw0', { border-width: 0 !important; });
-.baw1 { border-width: (@su2 / 2) !important; }
-.baw2 { border-width: @su2 !important; }
-.baw3 { border-width: @su4 !important; }
+.baw1 { border-width: var(--su-static1) !important; }
+.baw2 { border-width: var(--su-static2) !important; }
+.baw3 { border-width: var(--su-static4) !important; }
 
 //  $$  Top Border
 #stacks-internals #responsify('.btw0', { border-top-width: 0 !important; });
-.btw1 { border-top-width: (@su2 / 2) !important; }
-.btw2 { border-top-width: @su2 !important; }
-.btw3 { border-top-width: @su4 !important; }
+.btw1 { border-top-width: var(--su-static1) !important; }
+.btw2 { border-top-width: var(--su-static2) !important; }
+.btw3 { border-top-width: var(--su-static4) !important; }
 
 //  $$  Right Border
 #stacks-internals #responsify('.brw0', { border-right-width: 0 !important; });
-.brw1 { border-right-width: (@su2 / 2) !important; }
-.brw2 { border-right-width: @su2 !important; }
-.brw3 { border-right-width: @su4 !important; }
+.brw1 { border-right-width: var(--su-static1) !important; }
+.brw2 { border-right-width: var(--su-static2) !important; }
+.brw3 { border-right-width: var(--su-static4) !important; }
 
 //  $$  Bottom Border
 #stacks-internals #responsify('.bbw0', { border-bottom-width: 0 !important; });
-.bbw1 { border-bottom-width: (@su2 / 2) !important; }
-.bbw2 { border-bottom-width: @su2 !important; }
-.bbw3 { border-bottom-width: @su4 !important; }
+.bbw1 { border-bottom-width: var(--su-static1) !important; }
+.bbw2 { border-bottom-width: var(--su-static2) !important; }
+.bbw3 { border-bottom-width: var(--su-static4) !important; }
 
 //  $$  Left Border
 #stacks-internals #responsify('.blw0', { border-left-width: 0 !important; });
 .blw0 { border-left-width: 0 !important; }
-.blw1 { border-left-width: (@su2 / 2) !important; }
-.blw2 { border-left-width: @su2 !important; }
-.blw3 { border-left-width: @su4 !important; }
+.blw1 { border-left-width: var(--su-static1) !important; }
+.blw2 { border-left-width: var(--su-static2) !important; }
+.blw3 { border-left-width: var(--su-static4) !important; }
 
 //  $$  Y-Axis Border
 .byw0 { .btw0; .bbw0; }

lib/css/atomic/_stacks-flex.less

@@ -196,6 +196,7 @@
 //  $   FLEX SPACING
 //      Insert spaces or gutters in between flex items
 //  ----------------------------------------------------------------------------
+// TODO: Make this play nice with spacing units… or yeet this in the age of gap
 .gs2 { #stacks-internals #flex-builder-helpers .gutter-spacing(@su2); }
 .gs4 { #stacks-internals #flex-builder-helpers .gutter-spacing(@su4); }
 .gs6 { #stacks-internals #flex-builder-helpers .gutter-spacing(@su6); }

lib/css/atomic/_stacks-grid.less

@@ -21,17 +21,17 @@
 //      into its own section and documentation
 //  ----------------------------------------------------------------------------
 #stacks-internals #responsify('.g0', { gap: 0 });
-#stacks-internals #responsify('.g1', { gap: @su1 });
-#stacks-internals #responsify('.g2', { gap: @su2 });
-#stacks-internals #responsify('.g4', { gap: @su4; });
-#stacks-internals #responsify('.g6', { gap: @su6; });
-#stacks-internals #responsify('.g8', { gap: @su8; });
-#stacks-internals #responsify('.g12', { gap: @su12; });
-#stacks-internals #responsify('.g16', { gap: @su16; });
-#stacks-internals #responsify('.g24', { gap: @su24; });
-#stacks-internals #responsify('.g32', { gap: @su32; });
-#stacks-internals #responsify('.g48', { gap: @su48; });
-#stacks-internals #responsify('.g64', { gap: @su64; });
+#stacks-internals #responsify('.g1', { gap: var(--su1) });
+#stacks-internals #responsify('.g2', { gap: var(--su2) });
+#stacks-internals #responsify('.g4', { gap: var(--su4); });
+#stacks-internals #responsify('.g6', { gap: var(--su6); });
+#stacks-internals #responsify('.g8', { gap: var(--su8); });
+#stacks-internals #responsify('.g12', { gap: var(--su12); });
+#stacks-internals #responsify('.g16', { gap: var(--su16); });
+#stacks-internals #responsify('.g24', { gap: var(--su24); });
+#stacks-internals #responsify('.g32', { gap: var(--su32); });
+#stacks-internals #responsify('.g48', { gap: var(--su48); });
+#stacks-internals #responsify('.g64', { gap: var(--su64); });
 
 //  ============================================================================
 //  $   GRID FLOW

lib/css/atomic/_stacks-misc.less

@@ -267,7 +267,7 @@
 //  $  OUTLINE
 //  ----------------------------------------------------------------------------
 .outline-none { outline: 0 !important; }
-.outline-ring { outline: solid @su4 var(--focus-ring); }
+.outline-ring { outline: solid var(--su-static4) var(--focus-ring); }
 
 .f\:outline-ring {
     &:focus,
@@ -293,7 +293,7 @@
 .bs-lg { box-shadow: var(--bs-lg) !important; }
 .h\:bs-lg:hover { .bs-lg; }
 .bs-xl { box-shadow: var(--bs-xl) !important; }
-.bs-ring { box-shadow: 0 0 0 @su4 var(--focus-ring); }
+.bs-ring { box-shadow: 0 0 0 var(--su-static4) var(--focus-ring); }
 .h\:bs-ring:hover { .bs-ring; }
 .f\:bs-ring {
     &:focus,
@@ -303,12 +303,12 @@
 }
 
 //  --  Added hover styles for box-shadow
-.bs-sm.bs-hover:hover { box-shadow: 0 @su2 @su8 @black-050 !important; }
-.bs-md.bs-hover:hover { box-shadow: 0 @su4 @su8 @black-100 !important; }
-.bs-lg.bs-hover:hover { box-shadow: 0 @su4 @su12 fade(@black-300, 70%) !important; }
-.bs-i-sm.bs-hover:hover { box-shadow: inset 0 (@su2/2) @su8 0 fade(@black-200, 75%) !important; }
-.bs-i-md.bs-hover:hover { box-shadow: inset 0 (@su2/2) @su8 0 fade(@black-350, 80%) !important; }
-.bs-i-lg.bs-hover:hover { box-shadow: inset 0 (@su2/2) @su12 0 @black-350 !important; }
+.bs-sm.bs-hover:hover { box-shadow: 0 var(--su-static2) var(--su-static8) @black-050 !important; }
+.bs-md.bs-hover:hover { box-shadow: 0 var(--su-static4) var(--su-static8) @black-100 !important; }
+.bs-lg.bs-hover:hover { box-shadow: 0 var(--su-static4) var(--su-static12) fade(@black-300, 70%) !important; }
+.bs-i-sm.bs-hover:hover { box-shadow: inset 0 var(--su-static1) var(--su-static8) 0 fade(@black-200, 75%) !important; }
+.bs-i-md.bs-hover:hover { box-shadow: inset 0 var(--su-static1) var(--su-static8) 0 fade(@black-350, 80%) !important; }
+.bs-i-lg.bs-hover:hover { box-shadow: inset 0 var(--su-static1) var(--su-static12) 0 @black-350 !important; }
 
 //  ============================================================================
 //  $  TRANSITIONS