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

package/lib/exports/mixins.less

@@ -268,6 +268,77 @@
     }
 }
 
+/**
+ * Generate base and responsive atomic sizing classes.
+ *
+ * Usage example:
+ * .generate-sizing('.m', margin, true);
+ * .generate-sizing('.ml', margin-left, true, percent);
+ * .generate-sizing('.mx'; margin-left, margin-right; true);
+ * .generate-sizing('.pr', padding-right);
+ *
+ * @param {string} prefix - What prefix to generate (e.g. `.m`, `.pr`, etc).
+ * @param {string|list} properties - What CSS properties to generate (e.g. `margin`, `margin-right, margin-left`, etc).
+ * @param {list} values - List of values to generate classes for.
+ * @param {string} [type='px'] - What set of values to generate. Options: `px` | `percent`.
+ * @param {boolean} [responsive=false] - Whether to generate responsive variants.
+ * @param {boolean} [negative=false] - Whether to generate negative value classes.
+ */
+.generate-sizing(@prefix, @properties, @values, @type: 'px', @responsive: false, @negative: false) {
+    #stacks-internals #build-classes(
+        @prefix,
+        {
+            .template(@value) {
+                each(@properties, #(@prop) {
+                    & when (@type = 'px') and (@negative = false) {
+                        @{prop}: var(~"--su@{value}") !important;
+                    }
+                    & when (@type = 'px') and (@negative = true) {
+                        @{prop}: var(~"--sun@{value}") !important;
+                    }
+                    & when (@type = 'percent') and (@negative = false) {
+                        @{prop}: ~"@{value}% !important";
+                    }
+                    & when (@type = 'percent') and (@negative = true) {
+                        @{prop}: ~"-@{value}% !important";
+                    }
+                });
+            }
+        },
+        @values,
+        @responsive
+    );
+}
+
+
+/**
+ * Generate atomic sizing classes using predefined SU (spacing unit) values.
+ *
+ * Generates 12 utility classes (numbered 1-12) that map to specific SU values:
+ * 128, 256, 344, 448, 512, 640, 768, 848, 960, 1024, 1120, 1280.
+ *
+ * Usage example:
+ * .generate-su-sizing('.ws', width);
+ * .generate-su-sizing('.hs', height);
+ * .generate-su-sizing('.wmn', min-width);
+ *
+ * @param {string} prefix - Class prefix to generate (e.g. `.ws`, `.hs`, `.wmn`).
+ * @param {string} property - CSS property to set (e.g. `width`, `height`, `min-width`).
+ */
+.generate-su-sizing(@prefix, @property) {
+    @su-values: 128, 256, 344, 448, 512, 640, 768, 848, 960, 1024, 1120, 1280;
+    #stacks-internals #build-classes(
+        @prefix,
+        {
+            .template(@value) {
+                @su-value: extract(@su-values, @value);
+                @{property}: var(~"--su@{su-value}") !important;
+            }
+        },
+        1 2 3 4 5 6 7 8 9 10 11 12
+    );
+}
+
 //  =============================================================================
 //  --  WEBKIT AUTOFILL
 //  -----------------------------------------------------------------------------

package/lib/stacks-static.less

@@ -63,10 +63,13 @@
 @import "atomic/flex.less";
 @import "atomic/gap.less";
 @import "atomic/grid.less";
+@import "atomic/height.less";
+@import "atomic/positioning.less";
 @import "atomic/spacing.less";
+@import "atomic/sizing.less";
 @import "atomic/typography.less";
 @import "atomic/misc.less";
-@import "atomic/width-height.less";
+@import "atomic/width.less";
 
 /* stylelint-disable */
 #stacks-internals #screen-lg({

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@stackoverflow/stacks",
     "description": "Stack Overflow’s CSS and Design Pattern Library. Stacks is an atomic CSS library with classes and components for rapidly building Stack Overflow.",
-    "version": "3.0.0-beta.15",
+    "version": "3.0.0-beta.16",
     "files": [
         "dist",
         "lib",

package/lib/atomic/width-height.less

@@ -1,194 +0,0 @@
-//
-//  STACK OVERFLOW
-//  WIDTH & HEIGHT
-//
-//  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/
-//
-//  • WIDTH
-//      • PERCENTAGE
-//      • STATIC
-//  • MAX-WIDTH
-//  • MIN-WIDTH
-//  • HEIGHT
-//      • PERCENTAGE
-//      • STATIC
-//  • MAX-HEIGHT
-//  • MIN-HEIGHT
-//
-//  ============================================================================
-//  $  WIDTH
-//  ----------------------------------------------------------------------------
-//  $$  PERCENTAGE AND VIEWPORT UNITS
-.w0 { width: 0 !important; }
-.w10 { width: 10% !important; }
-.w20 { width: 20% !important; }
-#stacks-internals #responsify('.w25', { width: 25% !important; });
-.w30 { width: 30% !important; }
-#stacks-internals #responsify('.w33', { width: 33.33333% !important; });
-.w40 { width: 40% !important; }
-#stacks-internals #responsify('.w50', { width: 50% !important; });
-.w60 { width: 60% !important; }
-#stacks-internals #responsify('.w66', { width: 66.66667% !important; });
-.w70 { width: 70% !important; }
-#stacks-internals #responsify('.w75', { width: 75% !important; });
-.w80 { width: 80% !important; }
-.w90 { width: 90% !important; }
-#stacks-internals #responsify('.w100', { width: 100% !important; });
-#stacks-internals #responsify('.w-auto', { width: auto !important; });
-#stacks-internals #responsify('.w-screen', { width: 100vw !important; });
-
-//  $$  STATIC
-.ws0,
-.w0 { width: 0 !important; }
-.ws1 { width: var(--s-step) !important; }
-.ws2 { width: calc(var(--s-step) * 2) !important; }
-.ws3 { width: calc(var(--s-step) * 3) !important; }
-.ws4 { width: calc(var(--s-step) * 4) !important; }
-.ws5 { width: calc(var(--s-step) * 5) !important; }
-.ws6 { width: calc(var(--s-step) * 6) !important; }
-.ws7 { width: calc(var(--s-step) * 7) !important; }
-.ws8 { width: calc(var(--s-step) * 8) !important; }
-.ws9 { width: calc(var(--s-step) * 9) !important; }
-.ws10 { width: calc(var(--s-step) * 10) !important; }
-.ws11 { width: calc(var(--s-step) * 11) !important; }
-.ws12 { width: var(--s-full) !important; }
-
-//  $$  SPACING UNITS
-.w2 { width: var(--su-static2) !important; }
-.w4 { width: var(--su-static4) !important; }
-.w6 { width: var(--su-static6) !important; }
-.w8 { width: var(--su-static8) !important; }
-.w12 { width: var(--su-static12) !important; }
-.w16 { width: var(--su-static16) !important; }
-.w24 { width: var(--su-static24) !important; }
-.w32 { width: var(--su-static32) !important; }
-.w48 { width: var(--su-static48) !important; }
-.w64 { width: var(--su-static64) !important; }
-.w96 { width: var(--su-static96) !important; }
-.w128 { width: var(--su-static128) !important; }
-
-//  ============================================================================
-//  $  MAX-WIDTH
-//  ----------------------------------------------------------------------------
-.wmx0 { max-width: 0 !important; }
-.wmx1 { max-width: var(--s-step) !important; }
-.wmx2 { max-width: calc(var(--s-step) * 2) !important; }
-.wmx25 { max-width: 25% !important; }
-.wmx3 { max-width: calc(var(--s-step) * 3) !important; }
-.wmx4 { max-width: calc(var(--s-step) * 4) !important; }
-.wmx5 { max-width: calc(var(--s-step) * 5) !important; }
-.wmx50 { max-width: 50% !important; }
-.wmx6 { max-width: calc(var(--s-step) * 6) !important; }
-.wmx7 { max-width: calc(var(--s-step) * 7) !important; }
-.wmx75 { max-width: 75% !important; }
-.wmx8 { max-width: calc(var(--s-step) * 8) !important; }
-.wmx9 { max-width: calc(var(--s-step) * 9) !important; }
-.wmx10 { max-width: calc(var(--s-step) * 10) !important; }
-.wmx11 { max-width: calc(var(--s-step) * 11) !important; }
-.wmx12 { max-width: var(--s-full) !important; }
-#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; });
-
-//  ============================================================================
-//  $  MIN-WIDTH
-//  ----------------------------------------------------------------------------
-.wmn0 { min-width: 0 !important; }
-.wmn1 { min-width: var(--s-step) !important; }
-.wmn2 { min-width: calc(var(--s-step) * 2) !important; }
-.wmn25 { min-width: 25% !important; }
-.wmn3 { min-width: calc(var(--s-step) * 3) !important; }
-.wmn4 { min-width: calc(var(--s-step) * 4) !important; }
-.wmn5 { min-width: calc(var(--s-step) * 5) !important; }
-.wmn50 { min-width: 50% !important; }
-.wmn6 { min-width: calc(var(--s-step) * 6) !important; }
-.wmn7 { min-width: calc(var(--s-step) * 7) !important; }
-.wmn75 { min-width: 75% !important; }
-.wmn8 { min-width: calc(var(--s-step) * 8) !important; }
-.wmn9 { min-width: calc(var(--s-step) * 9) !important; }
-.wmn10 { min-width: calc(var(--s-step) * 10) !important; }
-.wmn11 { min-width: calc(var(--s-step) * 11) !important; }
-.wmn12 { min-width: var(--s-full) !important; }
-#stacks-internals #responsify('.wmn100', { min-width: 100% !important; });
-#stacks-internals #responsify('.wmn-initial', { min-width: initial !important; });
-
-//  ============================================================================
-//  $  HEIGHT
-//  ----------------------------------------------------------------------------
-//  $$  PERCENTAGE AND VIEWPORT UNITS
-.h0 { height: 0 !important; }
-#stacks-internals #responsify('.h100', { height: 100% !important; });
-#stacks-internals #responsify('.h-auto', { height: auto !important; });
-#stacks-internals #responsify('.h-screen', { height: 100vh !important; });
-
-//  $$  STATIC
-.hs0,
-.h0 { height: 0 !important; }
-.hs1 { height: var(--s-step) !important; }
-.hs2 { height: calc(var(--s-step) * 2) !important; }
-.hs3 { height: calc(var(--s-step) * 3) !important; }
-.hs4 { height: calc(var(--s-step) * 4) !important; }
-.hs5 { height: calc(var(--s-step) * 5) !important; }
-.hs6 { height: calc(var(--s-step) * 6) !important; }
-.hs7 { height: calc(var(--s-step) * 7) !important; }
-.hs8 { height: calc(var(--s-step) * 8) !important; }
-.hs9 { height: calc(var(--s-step) * 9) !important; }
-.hs10 { height: calc(var(--s-step) * 10) !important; }
-.hs11 { height: calc(var(--s-step) * 11) !important; }
-.hs12 { height: var(--s-full) !important; }
-
-//  $$  SPACING UNITS
-.h2 { height: var(--su-static2) !important; }
-.h4 { height: var(--su-static4) !important; }
-.h6 { height: var(--su-static6) !important; }
-.h8 { height: var(--su-static8) !important; }
-.h12 { height: var(--su-static12) !important; }
-.h16 { height: var(--su-static16) !important; }
-.h24 { height: var(--su-static24) !important; }
-.h32 { height: var(--su-static32) !important; }
-.h48 { height: var(--su-static48) !important; }
-.h64 { height: var(--su-static64) !important; }
-.h96 { height: var(--su-static96) !important; }
-.h128 { height: var(--su-static128) !important; }
-
-//  ============================================================================
-//  $  MAX-HEIGHT
-//  ----------------------------------------------------------------------------
-.hmx0 { max-height: 0 !important; }
-.hmx1 { max-height: var(--s-step) !important; }
-.hmx2 { max-height: calc(var(--s-step) * 2) !important; }
-.hmx3 { max-height: calc(var(--s-step) * 3) !important; }
-.hmx4 { max-height: calc(var(--s-step) * 4) !important; }
-.hmx5 { max-height: calc(var(--s-step) * 5) !important; }
-.hmx6 { max-height: calc(var(--s-step) * 6) !important; }
-.hmx7 { max-height: calc(var(--s-step) * 7) !important; }
-.hmx8 { max-height: calc(var(--s-step) * 8) !important; }
-.hmx9 { max-height: calc(var(--s-step) * 9) !important; }
-.hmx10 { max-height: calc(var(--s-step) * 10) !important; }
-.hmx11 { max-height: calc(var(--s-step) * 11) !important; }
-.hmx12 { max-height: var(--s-full) !important; }
-#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; });
-
-//  ============================================================================
-//  $  MIN-HEIGHT
-//  ----------------------------------------------------------------------------
-.hmn0 { min-height: 0 !important; }
-.hmn1 { min-height: var(--s-step) !important; }
-.hmn2 { min-height: calc(var(--s-step) * 2) !important; }
-.hmn3 { min-height: calc(var(--s-step) * 3) !important; }
-.hmn4 { min-height: calc(var(--s-step) * 4) !important; }
-.hmn5 { min-height: calc(var(--s-step) * 5) !important; }
-.hmn6 { min-height: calc(var(--s-step) * 6) !important; }
-.hmn7 { min-height: calc(var(--s-step) * 7) !important; }
-.hmn8 { min-height: calc(var(--s-step) * 8) !important; }
-.hmn9 { min-height: calc(var(--s-step) * 9) !important; }
-.hmn10 { min-height: calc(var(--s-step) * 10) !important; }
-.hmn11 { min-height: calc(var(--s-step) * 11) !important; }
-.hmn12 { min-height: var(--s-full) !important; }
-#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; });

package/lib/exports/spacing-mixins.less

@@ -1,67 +0,0 @@
-/**
- * Generate base and responsive atomic spacing classes.
- *
- * Usage example:
- * .generate-spacing('.m', margin, true);
- * .generate-spacing('.ml', margin-left, true, percent);
- * .generate-spacing('.mx'; margin-left, margin-right; true);
- * .generate-spacing('.pr', padding-right);
- *
- * @prefix - (required) What prefix to generate (e.g. `.m`, `.pr`, etc).
- * @properties - (required) What CSS properties to generate (e.g. `margin`, `margin-right, margin-left`, etc).
- * @includeNegative: bool - Boolean to include generation of negative value classes.
- * @type: px | percent - What set of value to generate.
- */
-.generate-spacing(@prefix, @properties, @includeNegative: false, @type: px) {
-  & when (@type = px) {
-      #stacks-internals #build-classes(
-          responsive,
-          @prefix,
-          { .template(@value) {
-            each(@properties, #(@prop) {
-                @{prop}: var(~"--su@{value}") !important;
-            })
-          } },
-          0 1 2 4 6 8 12 16 24 32 48 64 96 128
-      );
-
-      & when (@includeNegative = true) {
-        #stacks-internals #build-classes(
-            responsive,
-            ~"@{prefix}n",
-            { .template(@value) {
-              each(@properties, #(@prop) {
-                  @{prop}: calc(var(~"--su@{value}") * -1) !important;
-              })
-            } },
-            1 2 4 6 8 12 16 24 32 48 64 96 128
-        );
-    }
-  }
-
-  & when (@type = percent) {
-      #stacks-internals #build-classes(
-          responsive,
-          @prefix,
-          { .template(@value) {
-            each(@properties, #(@prop) {
-                @{prop}: @value !important;
-            })
-          } },
-          50% 100%
-      );
-
-      & when (@includeNegative = true) {
-        #stacks-internals #build-classes(
-            responsive,
-            ~"@{prefix}n",
-            { .template(@value) {
-              each(@properties, #(@prop) {
-                  @{prop}: -@value !important;
-              })
-            } },
-            50% 100%
-        );
-    }
-  }
-}