@stackoverflow/stacks 0.75.0 → 1.0.0

package/lib/css/atomic/{_stacks-borders.less → 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; }
@@ -121,35 +121,35 @@
 //      br-lg:  Large step:   7px border radius
 //  ----------------------------------------------------------------------------
 //  $$  All Sides
-.bar-sm { border-radius: @br-sm !important; }
-.bar-md { border-radius: @br-md !important; }
-.bar-lg { border-radius: @br-lg !important; }
+.bar-sm { border-radius: var(--br-sm) !important; }
+.bar-md { border-radius: var(--br-md) !important; }
+.bar-lg { border-radius: var(--br-lg) !important; }
 .bar-circle { border-radius: 100% !important; }
 .bar-pill { border-radius: 1000px !important; }
 
 //  $$  Top Left Corner
 .btlr0 { border-top-left-radius: 0 !important; }
-.btlr-sm { border-top-left-radius: @br-sm !important; }
-.btlr-md { border-top-left-radius: @br-md !important; }
-.btlr-lg { border-top-left-radius: @br-lg !important; }
+.btlr-sm { border-top-left-radius: var(--br-sm) !important; }
+.btlr-md { border-top-left-radius: var(--br-md) !important; }
+.btlr-lg { border-top-left-radius: var(--br-lg) !important; }
 
 //  $$  Top Right Corner
 .btrr0 { border-top-right-radius: 0 !important; }
-.btrr-sm { border-top-right-radius: @br-sm !important; }
-.btrr-md { border-top-right-radius: @br-md !important; }
-.btrr-lg { border-top-right-radius: @br-lg !important; }
+.btrr-sm { border-top-right-radius: var(--br-sm) !important; }
+.btrr-md { border-top-right-radius: var(--br-md) !important; }
+.btrr-lg { border-top-right-radius: var(--br-lg) !important; }
 
 //  $$  Bottom Left Corner
 .bblr0 { border-bottom-left-radius: 0 !important; }
-.bblr-sm { border-bottom-left-radius: @br-sm !important; }
-.bblr-md { border-bottom-left-radius: @br-md !important; }
-.bblr-lg { border-bottom-left-radius: @br-lg !important; }
+.bblr-sm { border-bottom-left-radius: var(--br-sm) !important; }
+.bblr-md { border-bottom-left-radius: var(--br-md) !important; }
+.bblr-lg { border-bottom-left-radius: var(--br-lg) !important; }
 
 //  $$  Bottom Right Corner
 .bbrr0 { border-bottom-right-radius: 0 !important; }
-.bbrr-sm { border-bottom-right-radius: @br-sm !important; }
-.bbrr-md { border-bottom-right-radius: @br-md !important; }
-.bbrr-lg { border-bottom-right-radius: @br-lg !important; }
+.bbrr-sm { border-bottom-right-radius: var(--br-sm) !important; }
+.bbrr-md { border-bottom-right-radius: var(--br-md) !important; }
+.bbrr-lg { border-bottom-right-radius: var(--br-lg) !important; }
 
 //  $$  Top Corners
 .btr0 { .btlr0; .btrr0; }

package/lib/css/atomic/{_stacks-flex.less → flex.less}

@@ -103,7 +103,7 @@
             @itemWidth: (@count * 100% / @num);
 
             > .flex--item@{count} {
-                margin: (@spacing / 2);
+                margin: calc(~"@{spacing}" / 2);
             }
 
             //  ------------------------------------------------------------------------
@@ -138,12 +138,12 @@
         .gutter-spacing(@spacing) {
             #stacks-internals #flex-builder-settings();
 
-            margin: -(@spacing / 2);
+            margin: calc(~"@{spacing}" / 2 * -1);
 
             //  --  FLUID ITEMS
             > .d-flex,
             > .flex--item {
-                margin: (@spacing / 2);
+                margin: calc(~"@{spacing}" / 2);
             }
 
             //  --  FIXED WIDTH ITEMS
@@ -196,16 +196,17 @@
 //  $   FLEX SPACING
 //      Insert spaces or gutters in between flex items
 //  ----------------------------------------------------------------------------
-.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); }
-.gs8 { #stacks-internals #flex-builder-helpers .gutter-spacing(@su8); }
-.gs12 { #stacks-internals #flex-builder-helpers .gutter-spacing(@su12); }
-.gs16 { #stacks-internals #flex-builder-helpers .gutter-spacing(@su16); }
-.gs24 { #stacks-internals #flex-builder-helpers .gutter-spacing(@su24); }
-.gs32 { #stacks-internals #flex-builder-helpers .gutter-spacing(@su32); }
-.gs48 { #stacks-internals #flex-builder-helpers .gutter-spacing(@su48); }
-.gs64 { #stacks-internals #flex-builder-helpers .gutter-spacing(@su64); }
+// TODO: Make this play nice with spacing units… or yeet this in the age of gap
+.gs2 { #stacks-internals #flex-builder-helpers .gutter-spacing(var(--su2)); }
+.gs4 { #stacks-internals #flex-builder-helpers .gutter-spacing(var(--su4)); }
+.gs6 { #stacks-internals #flex-builder-helpers .gutter-spacing(var(--su6)); }
+.gs8 { #stacks-internals #flex-builder-helpers .gutter-spacing(var(--su8)); }
+.gs12 { #stacks-internals #flex-builder-helpers .gutter-spacing(var(--su12)); }
+.gs16 { #stacks-internals #flex-builder-helpers .gutter-spacing(var(--su16)); }
+.gs24 { #stacks-internals #flex-builder-helpers .gutter-spacing(var(--su24)); }
+.gs32 { #stacks-internals #flex-builder-helpers .gutter-spacing(var(--su32)); }
+.gs48 { #stacks-internals #flex-builder-helpers .gutter-spacing(var(--su48)); }
+.gs64 { #stacks-internals #flex-builder-helpers .gutter-spacing(var(--su64)); }
 
 //  On rows, remove top and bottom margins
 .gsx {

package/lib/css/atomic/{_stacks-grid.less → 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
@@ -55,6 +55,7 @@
 #stacks-internals #responsify('.grid__10', { grid-template-columns: repeat(10, minmax(0, 1fr)); });
 #stacks-internals #responsify('.grid__11', { grid-template-columns: repeat(11, minmax(0, 1fr)); });
 #stacks-internals #responsify('.grid__12', { grid-template-columns: repeat(12, minmax(0, 1fr)); });
+#stacks-internals #responsify('.grid__auto', { grid-template-columns: auto 1fr; });
 
 //  ============================================================================
 //  $   COLUMN SPANS

package/lib/css/atomic/{_stacks-misc.less → misc.less}

@@ -250,24 +250,24 @@
 //  ============================================================================
 //  $  Z-INDEX
 //  ----------------------------------------------------------------------------
-.z-hide { z-index: @zi-hide !important; }
-.z-base { z-index: @zi-base !important; }
-.z-active { z-index: @zi-active !important; }
-.z-selected { z-index: @zi-selected !important; }
-.z-dropdown { z-index: @zi-dropdown !important; }
-.z-popover { z-index: @zi-popovers !important; }
-.z-tooltip { z-index: @zi-tooltips !important; }
-.z-banner { z-index: @zi-banners !important; }
-.z-nav { z-index: @zi-navigation !important; }
-.z-nav-fixed { z-index: @zi-navigation-fixed !important; }
-.z-modal { z-index: @zi-modals !important; }
-.z-modal-bg { z-index: @zi-modals-background !important; }
+.z-hide { z-index: var(--zi-hide) !important; }
+.z-base { z-index: var(--zi-base) !important; }
+.z-active { z-index: var(--zi-active) !important; }
+.z-selected { z-index: var(--zi-selected) !important; }
+.z-dropdown { z-index: var(--zi-dropdown) !important; }
+.z-popover { z-index: var(--zi-popovers) !important; }
+.z-tooltip { z-index: var(--zi-tooltips) !important; }
+.z-banner { z-index: var(--zi-banners) !important; }
+.z-nav { z-index: var(--zi-navigation) !important; }
+.z-nav-fixed { z-index: var(--zi-navigation-fixed) !important; }
+.z-modal { z-index: var(--zi-modals) !important; }
+.z-modal-bg { z-index: var(--zi-modals-background) !important; }
 
 //  ============================================================================
 //  $  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
@@ -316,9 +316,9 @@
 
 // -- Provide a sensible default
 .t {
-    transition-duration: @transition-time;
+    transition-duration: var(--transition-time);
     transition-property: all;
-    transition-timing-function: @te-ease-in;
+    transition-timing-function: var(--te-ease-in);
     transition-delay: 0s;
 }
 

package/lib/css/atomic/spacing.less

@@ -0,0 +1,314 @@
+//
+//  STACK OVERFLOW
+//  SPACING
+//
+//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
+//  Stack Overflow. For documentation of all these classes and how to contribute,
+//  visit https://stackoverflow.design/
+//
+//  • SPACING UNIT CSS VARIABLES
+//  • MARGIN
+//  • PADDING
+//  • POSITIONING
+//
+//  ============================================================================
+//  $   SPACING UNITS CSS VARIABLES
+//  ----------------------------------------------------------------------------
+body {
+    --su-base: 1;
+    --su-static1: 1px;
+    --su-static2: 2px;
+    --su-static4: 4px;
+    --su-static6: 6px;
+    --su-static8: 8px;
+    --su-static12: 12px;
+    --su-static16: 16px;
+    --su-static24: 24px;
+    --su-static32: 32px;
+    --su-static48: 48px;
+    --su-static64: 64px;
+    --su-static96: 96px;
+    --su-static128: 128px;
+
+    // This ensures `--su1` never drops below 1px by setting the clamp MIN value to `--su-static1` (1px).
+    --su1: clamp(var(--su-static1), calc(var(--su-static1) * var(--su-base)), calc(var(--su-static1) * var(--su-base)));
+    --su2: calc(var(--su-static2) * var(--su-base));
+    --su4: calc(var(--su-static4) * var(--su-base));
+    --su6: calc(var(--su-static6) * var(--su-base));
+    --su8: calc(var(--su-static8) * var(--su-base));
+    --su12: calc(var(--su-static12) * var(--su-base));
+    --su16: calc(var(--su-static16) * var(--su-base));
+    --su24: calc(var(--su-static24) * var(--su-base));
+    --su32: calc(var(--su-static32) * var(--su-base));
+    --su48: calc(var(--su-static48) * var(--su-base));
+    --su64: calc(var(--su-static64) * var(--su-base));
+    --su96: calc(var(--su-static96) * var(--su-base));
+    --su128: calc(var(--su-static128) * var(--su-base));
+}
+
+//  ============================================================================
+//  $   MARGIN
+//  ----------------------------------------------------------------------------
+//  $$ 0 margin
+.m0 { margin: 0 !important; }
+.mt0 { margin-top: 0 !important; }
+.mr0 { margin-right: 0 !important; }
+.mb0 { margin-bottom: 0 !important; }
+.ml0 { margin-left: 0 !important; }
+.mx0 { margin-left: 0 !important; margin-right: 0 !important; }
+.my0 { margin-top: 0 !important; margin-bottom: 0 !important; }
+
+//  $$ auto margin
+.m-auto { margin: auto !important; }
+.mt-auto { margin-top: auto !important; }
+.mr-auto { margin-right: auto !important; }
+.mb-auto { margin-bottom: auto !important; }
+.ml-auto { margin-left: auto !important; }
+.mx-auto { margin-left: auto !important; margin-right: auto !important; }
+.my-auto { margin-top: auto !important; margin-bottom: auto !important; }
+
+// $$ Margin
+#stacks-internals #build-classes(
+    responsive,
+    '.m',
+    { .template(@value) { margin: var(~"--su@{value}") !important; } },
+    1 2 4 6 8 12 16 24 32 48 64 96 128
+);
+
+// $$ Margin negative
+#stacks-internals #build-classes(
+    responsive,
+    '.mn',
+    { .template(@value) { margin: calc(var(~"--su@{value}") * -1) !important; } },
+    1 2 4 6 8 12 16 24 32 48 64 96 128
+);
+
+// $$ Top margin
+#stacks-internals #build-classes(
+    responsive,
+    '.mt',
+    { .template(@value) { margin-top: var(~"--su@{value}") !important; } },
+    1 2 4 6 8 12 16 24 32 48 64 96 128
+);
+
+// $$ Top margin negative
+#stacks-internals #build-classes(
+    responsive,
+    '.mtn',
+    { .template(@value) { margin-top: calc(var(~"--su@{value}") * -1) !important; } },
+    1 2 4 6 8 12 16 24 32 48 64 96 128
+);
+
+// $$ Right margin
+#stacks-internals #build-classes(
+    responsive,
+    '.mr',
+    { .template(@value) { margin-right: var(~"--su@{value}") !important; } },
+    1 2 4 6 8 12 16 24 32 48 64 96 128
+);
+
+// $$ Right margin negative
+#stacks-internals #build-classes(
+    responsive,
+    '.mrn',
+    { .template(@value) { margin-right: calc(var(~"--su@{value}") * -1) !important; } },
+    1 2 4 6 8 12 16 24 32 48 64 96 128
+);
+
+// $$ Bottom margin
+#stacks-internals #build-classes(
+    responsive,
+    '.mb',
+    { .template(@value) { margin-bottom: var(~"--su@{value}") !important; } },
+    1 2 4 6 8 12 16 24 32 48 64 96 128
+);
+
+// $$ Bottom margin negative
+#stacks-internals #build-classes(
+    responsive,
+    '.mbn',
+    { .template(@value) { margin-bottom: calc(var(~"--su@{value}") * -1) !important; } },
+    1 2 4 6 8 12 16 24 32 48 64 96 128
+);
+
+// $$ Left margin
+#stacks-internals #build-classes(
+    responsive,
+    '.ml',
+    { .template(@value) { margin-left: var(~"--su@{value}") !important; } },
+    1 2 4 6 8 12 16 24 32 48 64 96 128
+);
+
+// $$ Left margin negative
+#stacks-internals #build-classes(
+    responsive,
+    '.mln',
+    { .template(@value) { margin-left: calc(var(~"--su@{value}") * -1) !important; } },
+    1 2 4 6 8 12 16 24 32 48 64 96 128
+);
+
+#stacks-internals #build-classes(
+    '.mx', { .template(@value) { margin-left: var(~"--su@{value}") !important; margin-right: var(~"--su@{value}") !important; } },
+    1 2 4 6 8 12 16 24 32 48 64 96 128
+);
+
+#stacks-internals #build-classes(
+    '.my', { .template(@value) { margin-top: var(~"--su@{value}") !important; margin-bottom: var(~"--su@{value}") !important; } },
+    1 2 4 6 8 12 16 24 32 48 64 96 128
+);
+
+//  ============================================================================
+//  $   PADDING
+//  ----------------------------------------------------------------------------
+
+//  $$ 0 padding
+.p0 { padding: 0 !important; }
+.pt0 { padding-top: 0 !important; }
+.pr0 { padding-right: 0 !important; }
+.pb0 { padding-bottom: 0 !important; }
+.pl0 { padding-left: 0 !important; }
+.px0 { padding-left: 0 !important; padding-right: 0 !important; }
+.py0 { padding-top: 0 !important; padding-bottom: 0 !important; }
+
+#stacks-internals #build-classes(
+    responsive,
+    '.p', { .template(@value) { padding: var(~"--su@{value}") !important; } },
+    1 2 4 6 8 12 16 24 32 48 64 96 128
+);
+
+//  $$  Top Padding
+#stacks-internals #build-classes(
+    responsive,
+    '.pt', { .template(@value) { padding-top: var(~"--su@{value}") !important; } },
+    1 2 4 6 8 12 16 24 32 48 64 96 128
+);
+
+//  $$  Right Padding
+#stacks-internals #build-classes(
+    responsive,
+    '.pr', { .template(@value) { padding-right: var(~"--su@{value}") !important; } },
+    1 2 4 6 8 12 16 24 32 48 64 96 128
+);
+
+//  $$  Bottom Padding
+#stacks-internals #build-classes(
+    responsive,
+    '.pb', { .template(@value) { padding-bottom: var(~"--su@{value}") !important; } },
+    1 2 4 6 8 12 16 24 32 48 64 96 128
+);
+
+//  $$  Left Padding
+#stacks-internals #build-classes(
+    responsive,
+    '.pl', { .template(@value) { padding-left: var(~"--su@{value}") !important; } },
+    1 2 4 6 8 12 16 24 32 48 64 96 128
+);
+
+//  $$  X-Axis Padding
+#stacks-internals #build-classes(
+    '.px', { .template(@value) { padding-left: var(~"--su@{value}") !important; padding-right: var(~"--su@{value}") !important; } },
+    1 2 4 6 8 12 16 24 32 48 64 96 128
+);
+
+//  $$  Y-Axis Padding
+#stacks-internals #build-classes(
+    '.py', { .template(@value) { padding-top: var(~"--su@{value}") !important; padding-bottom: var(~"--su@{value}") !important; } },
+    1 2 4 6 8 12 16 24 32 48 64 96 128
+);
+
+//  ============================================================================
+//  $   POSITIONING
+//  ----------------------------------------------------------------------------
+
+//  $$ Top
+#stacks-internals #build-classes(
+    responsive,
+    '.t', { .template(@value) { top: var(~"--su@{value}") !important; } },
+    1 2 4 6 8 12 16 24 32 48 64 96 128
+);
+
+//  $$ Top 0, percent
+#stacks-internals #build-classes(
+    '.t', { .template(@value) { top: @value !important; } },
+    0 50% -50% 100% -100%
+);
+
+//  $$ Top negative
+#stacks-internals #build-classes(
+    responsive,
+    '.tn', { .template(@value) { top: calc(var(~"--su@{value}") * -1) !important; } },
+    1 2 4 6 8 12 16 24 32 48 64 96 128
+);
+
+//  $$ Right
+#stacks-internals #build-classes(
+    responsive,
+    '.r', { .template(@value) { right: var(~"--su@{value}") !important; } },
+    1 2 4 6 8 12 16 24 32 48 64 96 128
+);
+
+//  $$ Right 0, percent
+#stacks-internals #build-classes(
+    '.r', { .template(@value) { right: @value !important; } },
+    0 50% -50% 100% -100%
+);
+
+//  $$ Right negative
+#stacks-internals #build-classes(
+    responsive,
+    '.rn', { .template(@value) { right: calc(var(~"--su@{value}") * -1) !important; } },
+    1 2 4 6 8 12 16 24 32 48 64 96 128
+);
+
+//  $$ Bottom
+#stacks-internals #build-classes(
+    responsive,
+    '.b', { .template(@value) { bottom: var(~"--su@{value}") !important; } },
+    1 2 4 6 8 12 16 24 32 48 64 96 128
+);
+
+//  $$ Bottom 0, percent
+#stacks-internals #build-classes(
+    '.b', { .template(@value) { bottom: @value !important; } },
+    0 50% -50% 100% -100%
+);
+
+//  $$ Bottom negative
+#stacks-internals #build-classes(
+    responsive,
+    '.bn', { .template(@value) { bottom: calc(var(~"--su@{value}") * -1) !important; } },
+    1 2 4 6 8 12 16 24 32 48 64 96 128
+);
+
+//  $$ Left
+#stacks-internals #build-classes(
+    responsive,
+    '.l', { .template(@value) { left: var(~"--su@{value}") !important; } },
+    1 2 4 6 8 12 16 24 32 48 64 96 128
+);
+
+//  $$ Left 0, percent
+#stacks-internals #build-classes(
+    '.l', { .template(@value) { left: @value !important; } },
+    0 50% -50% 100% -100%
+);
+
+//  $$ Left negative
+#stacks-internals #build-classes(
+    responsive,
+    '.ln', { .template(@value) { left: calc(var(~"--su@{value}") * -1) !important; } },
+    1 2 4 6 8 12 16 24 32 48 64 96 128
+);
+
+//  $$ Inset
+#stacks-internals #build-classes(
+    responsive,
+    '.i', { .template(@value) { inset: var(~"--su@{value}") !important; } },
+    1 2 4 6 8 12 16 24 32 48 64 96 128
+);
+
+//  $$ Inset 0
+#stacks-internals #build-classes(
+    '.i', { .template(@value) { inset: @value !important; } },
+    0
+);