@stackoverflow/stacks 3.0.0-beta.14 → 3.0.0-beta.16

package/lib/atomic/flex.less

@@ -1,25 +1,4 @@
-//
-//  STACK OVERFLOW
-//  FLEXBOX HELPERS
-//
-//  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/
-//
-//  TABLE OF CONTENTS
-//  • VARIABLES
-//  • MIXINS
-//  • FLEX ELEMENTS
-//  • FLEX SPACING
-//  • MODIFICATIONS
-//  • ATOMIC
-//  • DEPRECATED
-//
-//  ============================================================================
-//  --  STACKS FLEX LAYOUT MIXINS
-//  ============================================================================
-//  --  FIXED COLUMN WIDTHS
-//  ----------------------------------------------------------------------------
+@import (reference) "../base/internal.less";
 
 #stacks-internals() {
     #flex-builder-settings() {
@@ -321,19 +300,15 @@
 .ac-start { align-content: flex-start !important; }
 .ac-stretch { align-content: stretch !important; }
 
-//  --  ALIGN ITEMS
-//      Defines the default behavior for how child items align along
-//      the parent's cross axis. Think of it the cross-axis for
-//      justify-content.
-//  ----------------------------------------------------------------------------
+// Align items
 #stacks-internals #build-classes(
-    responsive,
     '.ai',
     {
         .template(@value) when (@value=start), (@value=end) { align-items: ~"flex-@{value}" !important; }
         .template(@value) when (default()) { align-items: @value !important; };
     },
-    baseline center end start stretch
+    baseline center end start stretch,
+    true
 );
 
 //  --  CENTER ITEMS
@@ -345,18 +320,15 @@
     .ai-center;
 }
 
-//  --  ALIGN SELF
-//      Allows child containers to re-align themselves regardless
-//      of the parent's main axis direction.
-//  ----------------------------------------------------------------------------
+// Align self
 #stacks-internals #build-classes(
-    responsive,
     '.as',
     {
         .template(@value) when (@value=start), (@value=end) { align-self: ~"flex-@{value}" !important; }
         .template(@value) when (default()) { align-self: @value !important; };
     },
     auto baseline center end start stretch
+    true
 );
 
 //  --  FLEX

package/lib/atomic/height.less

@@ -0,0 +1,22 @@
+@import (reference) "../base/internal.less";
+@import (reference) "../exports/mixins.less";
+
+// `height` properties
+.generate-sizing('.h', height, 0 1 2 4 6 8 12 16 24 32 48 64 96 128, 'px');
+.generate-su-sizing('.hs', height); // Static sizing units
+#stacks-internals #responsify('.h100', { height: 100% !important; });
+#stacks-internals #responsify('.h-auto', { height: auto !important; });
+#stacks-internals #responsify('.h-screen', { height: 100vh !important; });
+
+// `min-height` properties
+.generate-sizing('.hmn', min-height, 0, 'px', false, true);
+.generate-su-sizing('.hmn', min-height); // Static sizing units
+#stacks-internals #responsify('.hmn100', { min-height: 100% !important; });
+#stacks-internals #responsify('.hmn-initial', { min-height: initial !important; });
+#stacks-internals #responsify('.hmn-screen', { min-height: 100vh !important; });
+
+// `max-height` properties
+.generate-su-sizing('.hmx', max-height); // Static sizing units
+#stacks-internals #responsify('.hmx100', { max-height: 100% !important; });
+#stacks-internals #responsify('.hmx-initial', { max-height: initial !important; });
+#stacks-internals #responsify('.hmx-screen', { max-height: 100vh !important; });

package/lib/atomic/positioning.less

@@ -0,0 +1,34 @@
+@import (reference) "../base/internal.less";
+@import (reference) "../exports/mixins.less";
+
+@px-values: 0 1 2 4 6 8 12 16 24 32 48 64 96 128;
+@px-values-negative: 1 2 4 6 8 12 16 24 32 48 64 96 128;
+@percent-values: 50 100;
+
+// POSITIONING
+// Inset
+.generate-sizing('.i', inset, @px-values, 'px');
+
+//  Top
+.generate-sizing('.t', top, @px-values, 'px', true);
+.generate-sizing('.tn', top, @px-values-negative, 'px', true, true);
+.generate-sizing('.t', top, @percent-values, 'percent', true);
+.generate-sizing('.tn', top, @percent-values, 'percent', true, true);
+
+// Right
+.generate-sizing('.r', right, @px-values, 'px', true);
+.generate-sizing('.rn', right, @px-values-negative, 'px', true, true);
+.generate-sizing('.r', right, @percent-values, 'percent', true);
+.generate-sizing('.rn', right, @percent-values, 'percent', true, true);
+
+// Bottom
+.generate-sizing('.b', bottom, @px-values, 'px', true);
+.generate-sizing('.bn', bottom, @px-values-negative, 'px', true, true);
+.generate-sizing('.b', bottom, @percent-values, 'percent', true);
+.generate-sizing('.bn', bottom, @percent-values, 'percent', true, true);
+
+// Left
+.generate-sizing('.l', left, @px-values, 'px', true);
+.generate-sizing('.ln', left, @px-values-negative, 'px', true, true);
+.generate-sizing('.l', left, @percent-values, 'percent', true);
+.generate-sizing('.ln', left, @percent-values, 'percent', true, true);

package/lib/atomic/sizing.less

@@ -0,0 +1,76 @@
+@import (reference) "../base/internal.less";
+
+// SIZING UNITS CSS CUSTOM PROPERTIES
+body {
+    --su0: 0;
+    --su1: clamp(1px, 0.063rem, 0.063rem); // This ensures `--su1` never drops below 1px by setting the clamp MIN value to `--su-static1` (1px).
+    --su2: 0.125rem;
+    --su4: 0.25rem;
+    --su6: 0.375rem;
+    --su8: 0.5rem;
+    --su12: 0.75rem;
+    --su16: 1rem;
+    --su24: 1.5rem;
+    --su32: 2rem;
+    --su48: 3rem;
+    --su64: 4rem;
+    --su96: 6rem;
+    --su128: 8rem;
+    --su256: 16rem;
+    --su344: 21.5rem;
+    --su448: 28rem;
+    --su512: 32rem;
+    --su640: 40rem;
+    --su768: 48rem;
+    --su848: 53rem;
+    --su960: 60rem;
+    --su1024: 64rem;
+    --su1120: 70rem;
+    --su1280: 80rem;
+    --su-max: var(--su1280);
+    --s-full: 79rem; // Legacy sizing units for Stacks v2
+    --s-step: calc(var(--s-full) / 12); // Legacy sizing units for Stacks v2
+
+    // Negative sizing
+    // This is a common subset sizing units for negative values
+    --sun1: calc(var(--su1) * -1);
+    --sun2: calc(var(--su2) * -1);
+    --sun4: calc(var(--su4) * -1);
+    --sun6: calc(var(--su6) * -1);
+    --sun8: calc(var(--su8) * -1);
+    --sun12: calc(var(--su12) * -1);
+    --sun16: calc(var(--su16) * -1);
+    --sun24: calc(var(--su24) * -1);
+    --sun32: calc(var(--su32) * -1);
+    --sun48: calc(var(--su48) * -1);
+    --sun64: calc(var(--su64) * -1);
+    --sun96: calc(var(--su96) * -1);
+    --sun128: calc(var(--su128) * -1);
+
+    // Static (aka px) sizing units
+    --su-static0: 0px;
+    --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;
+    --su-static256: 256px;
+    --su-static344: 344px;
+    --su-static448: 448px;
+    --su-static512: 512px;
+    --su-static640: 640px;
+    --su-static768: 768px;
+    --su-static848: 848px;
+    --su-static960: 960px;
+    --su-static1024: 1024px;
+    --su-static1120: 1120px;
+    --su-static1280: 1280px;
+}

package/lib/atomic/spacing.less

@@ -1,98 +1,58 @@
 @import (reference) "../base/internal.less";
-@import (reference) "../exports/spacing-mixins.less";
+@import (reference) "../exports/mixins.less";
 
-// SPACING UNITS CSS CUSTOM PROPERTIES
-body {
-    --su-base: 1;
-    --su-static0: 0px;
-    --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;
-
-    --su0: var(--su-static0);
-    // 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));
-}
+@px-values: 0 1 2 4 6 8 12 16 24 32 48 64 96 128;
+@px-values-negative: 1 2 4 6 8 12 16 24 32 48 64 96 128;
+@percent-values: 50 100;
 
 // MARGIN
-//  Margin
 .m-auto { margin: auto !important; }
-.generate-spacing('.m', margin, true);
-.generate-spacing('.m', margin, true, percent);
+.generate-sizing('.m', margin, @px-values, 'px', true);
+.generate-sizing('.mn', margin, @px-values-negative, 'px', true, true);
+.generate-sizing('.m', margin, @percent-values, 'percent', true);
+.generate-sizing('.mn', margin, @percent-values, 'percent', true, true);
 
 //  Margin top
 .mt-auto { margin-top: auto !important; }
-.generate-spacing('.mt', margin-top, true);
-.generate-spacing('.mt', margin-top, true, percent);
+.generate-sizing('.mt', margin-top, @px-values, 'px', true);
+.generate-sizing('.mtn', margin-top, @px-values-negative, 'px', true, true);
+.generate-sizing('.mt', margin-top, @percent-values, 'percent', true);
+.generate-sizing('.mtn', margin-top, @percent-values, 'percent', true, true);
 
 //  Margin right
 .mr-auto { margin-right: auto !important; }
-.generate-spacing('.mr', margin-right, true);
-.generate-spacing('.mr', margin-right, true, percent);
+.generate-sizing('.mr', margin-right, @px-values, 'px', true);
+.generate-sizing('.mrn', margin-right, @px-values-negative, 'px', true, true);
+.generate-sizing('.mr', margin-right, @percent-values, 'percent', true);
+.generate-sizing('.mrn', margin-right, @percent-values, 'percent', true, true);
 
 //  Margin bottom
 .mb-auto { margin-bottom: auto !important; }
-.generate-spacing('.mb', margin-bottom, true);
-.generate-spacing('.mb', margin-bottom, true, percent);
+.generate-sizing('.mb', margin-bottom, @px-values, 'px', true);
+.generate-sizing('.mbn', margin-bottom, @px-values-negative, 'px', true, true);
+.generate-sizing('.mb', margin-bottom, @percent-values, 'percent', true);
+.generate-sizing('.mbn', margin-bottom, @percent-values, 'percent', true, true);
 
 //  Margin left
 .ml-auto { margin-left: auto !important; }
-.generate-spacing('.ml', margin-left, true);
-.generate-spacing('.ml', margin-left, true, percent);
+.generate-sizing('.ml', margin-left, @px-values, 'px', true);
+.generate-sizing('.mln', margin-left, @px-values-negative, 'px', true, true);
+.generate-sizing('.ml', margin-left, @percent-values, 'percent', true);
+.generate-sizing('.mln', margin-left, @percent-values, 'percent', true, true);
 
 //  Margin x-axis, y-axis
 .mx-auto { margin-left: auto !important; margin-right: auto !important; }
 .my-auto { margin-top: auto !important; margin-bottom: auto !important; }
-.generate-spacing('.mx'; margin-left, margin-right; true);
-.generate-spacing('.my'; margin-top, margin-bottom; true);
+.generate-sizing('.mx'; margin-left, margin-right; @px-values; 'px'; true);
+.generate-sizing('.mxn'; margin-left, margin-right; @px-values-negative; 'px'; true; true);
+.generate-sizing('.my'; margin-top, margin-bottom; @px-values; 'px'; true);
+.generate-sizing('.myn'; margin-top, margin-bottom; @px-values-negative; 'px'; true; true);
 
 // PADDING
-.generate-spacing('.p', padding);
-.generate-spacing('.pt', padding-top);
-.generate-spacing('.pr', padding-right);
-.generate-spacing('.pb', padding-bottom);
-.generate-spacing('.pl', padding-left);
-.generate-spacing('.px'; padding-left, padding-right);
-.generate-spacing('.py'; padding-top, padding-bottom);
-
-// POSITIONING
-// Inset
-.generate-spacing('.i', inset);
-
-//  Top
-.generate-spacing('.t', top, true);
-.generate-spacing('.t', top, true, percent);
-
-// Right
-.generate-spacing('.r', right, true);
-.generate-spacing('.r', right, true, percent);
-
-// Bottom
-.generate-spacing('.b', bottom, true);
-.generate-spacing('.b', bottom, true, percent);
-
-// Left
-.generate-spacing('.l', left, true);
-.generate-spacing('.l', left, true, percent);
+.generate-sizing('.p', padding, @px-values, 'px', true);
+.generate-sizing('.pt', padding-top, @px-values, 'px', true);
+.generate-sizing('.pr', padding-right, @px-values, 'px', true);
+.generate-sizing('.pb', padding-bottom, @px-values, 'px', true);
+.generate-sizing('.pl', padding-left, @px-values, 'px', true);
+.generate-sizing('.px'; padding-left, padding-right; @px-values; 'px'; true);
+.generate-sizing('.py'; padding-top, padding-bottom; @px-values; 'px'; true);

package/lib/atomic/width.less

@@ -0,0 +1,27 @@
+@import (reference) "../base/internal.less";
+@import (reference) "../exports/mixins.less";
+
+// `width` properties
+.generate-sizing('.w', width, 0 1 2 4 6 8 12 16 24 32 48 64 96 128, 'px');
+.generate-su-sizing('.ws', width); // Static sizing units
+.generate-sizing('.w', width, 10 20 30 40 60 70 80 90, 'percent');
+.generate-sizing('.w', width, 25 50 75 100, 'percent', true); // responsive
+#stacks-internals #responsify('.w33', { width: calc(100% / 3) !important; });
+#stacks-internals #responsify('.w66', { width: calc(100% / 3 * 2) !important; });
+#stacks-internals #responsify('.w-auto', { width: auto !important; });
+#stacks-internals #responsify('.w-screen', { width: 100vw !important; });
+
+// `min-width` properties
+.generate-sizing('.wmn', min-width, 0, 'px');
+.generate-su-sizing('.wmn', min-width); // Static sizing units
+.generate-sizing('.wmn', min-width, 25 50 75, 'percent');
+#stacks-internals #responsify('.wmn100', { min-width: 100% !important; });
+#stacks-internals #responsify('.wmn-initial', { min-width: initial !important; });
+#stacks-internals #responsify('.wmn-screen', { min-width: 100vw !important; });
+
+// `max-width` properties
+.generate-su-sizing('.wmx', max-width); // Static sizing units
+.generate-sizing('.wmx', max-width, 25 50 75, 'percent');
+#stacks-internals #responsify('.wmx100', { max-width: 100% !important; });
+#stacks-internals #responsify('.wmx-initial', { max-width: initial !important; });
+#stacks-internals #responsify('.wmx-screen', { max-width: 100vw !important; });

package/lib/base/body.less

@@ -20,20 +20,18 @@ html,
 body {
     color: var(--theme-body-font-color, var(--black-600));
     font-family: var(--theme-body-font-family);
-    font-size: var(--fs-base);
     line-height: var(--lh-base);
 }
 
 body {
+    background-color: var(--theme-background-color, var(--white));
     box-sizing: border-box;
+    font-size: var(--fs-body1);
     min-height: 100%;
-    background-color: var(--theme-background-color, var(--white));
 
     *,
     *:before,
     *:after {
         box-sizing: inherit;
     }
-
-    // TODO SHINE set max width here
 }

package/lib/base/internal.less

@@ -164,12 +164,10 @@
     //  ---------------------------------------------------------------------------
 
 
-    #build-classes(@class-prefix, @rules, @values) {
-        #stacks-internals #build-classes-with-start-index(@class-prefix, @rules, 1, false, @values);
-    }
-    #build-classes(responsive, @class-prefix, @rules, @values) {
-        #stacks-internals #build-classes-with-start-index(@class-prefix, @rules, 1, true, @values);
+    #build-classes(@class-prefix, @rules, @values, @responsive: false) {
+        #stacks-internals #build-classes-with-start-index(@class-prefix, @rules, 1, @responsive, @values);
     }
+
     #build-classes-with-start-index(@class-prefix, @rules, @start-index, @responsive, @values) when (@start-index <= length(@values)) {
         @val: extract(@values, @start-index);
         & when (isnumber(@val)) {

package/lib/base/reset-normalize.less

@@ -375,7 +375,7 @@ textarea {
 
 [type="search"] {
   -webkit-appearance: textfield; /* 1 */
-  outline-offset: calc(var(--su-static2) * -1); // -2px - /* 2 */
+  outline-offset: var(--sun2);
 }
 
 /**

package/lib/components/avatar/avatar.less

@@ -58,9 +58,9 @@
 
     // CHILD ELEMENTS
     & &--badge {
-        bottom: calc(var(--su-static4) * -1); // -4px
+        bottom: var(--sun4);
         position: absolute;
-        right: calc(var(--su-static4) * -1); // -4px
+        right: var(--sun4);
         -webkit-transform: scale(var(--_av-scale-badge));
         transform: scale(var(--_av-scale-badge));
     }

package/lib/components/badge/badge.less

@@ -38,7 +38,7 @@
         margin: calc(var(--_ba-py) * -1) 0 calc(var(--_ba-py) * -1) calc(var(--_ba-px) * -1);
     }
     & svg {
-        margin: calc(var(--_ba-py) * -1) 0 calc(var(--_ba-py) * -1) calc(var(--su4) * -1);
+        margin: calc(var(--_ba-py) * -1) 0 calc(var(--_ba-py) * -1) var(--sun4);
     }
 
     &:has(.s-bling__rep) {
@@ -98,7 +98,7 @@
 
         &:before {
             height: var(--_ba-before-h);
-            margin-top: calc(var(--su1) * -1);
+            margin-top: var(--sun1);
             width: var(--_ba-before-w);
 
             content: "";

package/lib/components/banner/banner.less

@@ -29,7 +29,7 @@
 
     & &--container { // When we want to keep hero content capped
         margin: 0 auto;
-        max-width: calc(var(--s-step) * 10);
+        max-width: var(--su1024);
         position: relative;
         width: 100%;
     }

package/lib/components/button/button.less

@@ -250,7 +250,7 @@
         clip-path: inset(50%);
         clip: rect(var(--su-static1), var(--su-static1), var(--su-static1), var(--su-static1)); // rect(1px, 1px, 1px, 1px)
         height: var(--su-static1);
-        margin: calc(var(--su-static1) * -1); // -1px
+        margin: var(--sun1);
         overflow-wrap: normal;
         overflow: hidden;
         padding: 0;

package/lib/components/button-group/button-group.less

@@ -17,7 +17,7 @@
     // CHILD ELEMENTS
     form {
         display: flex;
-        margin-right: calc(var(--su-static1) * -1); // -1px
+        margin-right: var(--sun1);
     }
 
     //  --_bu-py values set below to ensure btn-group height matches same-sized button height

package/lib/components/code-block/code-block.less

@@ -95,7 +95,7 @@
             border-width: 0 var(--su-static1) 0 0;
             color: var(--black-350);
             float: left;
-            margin: calc(var(--su12) * -1);
+            margin: var(--sun12);
             margin-right: var(--su12);
             padding: var(--su12);
             padding-right: var(--su6);

package/lib/components/input-icon/input-icon.less

@@ -38,7 +38,7 @@
     color: var(--_ii-fc);
     right: var(--_ii-r);
 
-    margin-top: calc((var(--su-static8) + var(--su-static2)) * -1); // -10px - Half the icon's height at 20px for centering
+    margin-top: calc(var(--sun8) + var(--sun2)); // -10px - Half the icon's height at 20px for centering
     pointer-events: none;
     position: absolute;
     top: 50%;