@stackoverflow/stacks 3.0.0-beta.2 → 3.0.0-beta.20

package/lib/exports/color-sets.less

@@ -11,7 +11,8 @@
 //
 // tl;dr: don't put inline after values in this file
 
-// TODO SPARK update default values for white and black sets
+// Colors are based on the variables in Figma: https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=610-18798&p=f&vars=1&var-set-id=1713-5190&m=dev
+
 // White
 .set-white() {
     default: hsv(0, 0%, 100%);
@@ -30,14 +31,14 @@
 .set-black() {
     050: hsv(0, 0%, 100%);
     100: hsv(30, 1%, 97%);
-    150: hsv(30, 1%, 94%);
-    200: hsv(220, 2%, 89%);
-    225: hsv(220, 2%, 86%);
-    250: hsv(220, 4%, 82%);
-    300: hsv(220, 5%, 69%);
-    350: hsv(220, 6%, 55%);
-    400: hsv(220, 7%, 45%);
-    500: hsv(220, 8%, 30%);
+    150: hsv(40, 1%, 94%);
+    200: hsv(216, 2%, 89%);
+    225: hsv(225, 2%, 86%);
+    250: hsv(218, 4%, 82%);
+    300: hsv(218, 5%, 69%);
+    350: hsv(218, 6%, 55%);
+    400: hsv(225, 7%, 45%);
+    500: hsv(223, 9%, 30%);
     600: hsv(345, 13%, 13%);
     default: hsv(0, 0%, 0%);
 }
@@ -51,21 +52,21 @@
     300: hsv(0, 0%, 55%);
     350: hsv(0, 0%, 65%);
     400: hsv(30, 5%, 85%);
-    500: hsv(30, 4%, 95%);
+    500: hsv(27, 4%, 95%);
     600: hsv(0, 0%, 100%);
     default: hsv(0, 0%, 100%);
 }
 .set-black-hc() {
     050: hsv(0, 0%, 100%);
     100: hsv(30, 1%, 97%);
-    150: hsv(30, 1%, 94%);
-    200: hsv(210, 2%, 89%);
-    225: hsv(220, 2%, 86%);
-    250: hsv(220, 4%, 82%);
+    150: hsv(40, 1%, 94%);
+    200: hsv(216, 2%, 89%);
+    225: hsv(225, 2%, 86%);
+    250: hsv(218, 4%, 82%);
     300: hsv(229, 7%, 61%);
-    350: hsv(220, 7%, 36%);
-    400: hsv(204, 6%, 35%);
-    500: hsv(220, 8%, 30%);
+    350: hsv(214, 8%, 36%);
+    400: hsv(204, 6%, 33.5%);
+    500: hsv(223, 9%, 29.5%);
     600: hsv(345, 13%, 13%);
     default: hsv(0, 0%, 0%);
 }
@@ -79,14 +80,14 @@
     300: hsv(0, 0%, 55%);
     350: hsv(0, 0%, 65%);
     400: hsv(30, 5%, 85%);
-    500: hsv(30, 4%, 95%);
+    500: hsv(27, 4%, 95%);
     600: hsv(0, 0%, 100%);
     default: hsv(0, 0%, 100%);
 }
 
 // Orange
 .set-orange() {
-    100: hsv(22, 5%, 100%);
+    100: hsv(23, 5%, 100%);
     200: hsv(22, 26%, 100%);
     300: hsv(22, 65%, 96%);
     400: hsv(22, 92%, 91%);
@@ -94,33 +95,33 @@
     600: hsv(22, 95%, 44%);
 }
 .set-orange-dark() {
-    100: hsl(22, 80%, 25%);
-    200: hsl(22, 75%, 45%);
-    300: hsl(22, 47%, 78%);
-    400: hsl(22, 40%, 90%);
-    500: hsl(22, 30%, 99%);
-    600: hsl(22, 20%, 98%);
+    100: hsv(21, 80%, 25%);
+    200: hsv(22, 76%, 45%);
+    300: hsv(22, 47%, 78%);
+    400: hsv(22, 40%, 90%);
+    500: hsv(22, 30%, 99%);
+    600: hsv(22, 20%, 98%);
 }
 .set-orange-hc() {
-    100: hsv(22, 5%, 100%);
-    200: hsv(22, 5%, 100%);
+    100: hsv(23, 5%, 100%);
+    200: hsv(23, 5%, 100%);
     300: hsv(22, 92%, 91%);
     400: hsv(22, 98%, 59%);
-    500: hsv(22, 95%, 44%);
-    600: hsv(22, 95%, 44%);
+    500: hsv(22, 95%, 43%);
+    600: hsv(22, 95%, 43%);
 }
 .set-orange-hc-dark() {
-    100: hsv(22, 80%, 25%);
-    200: hsv(22, 80%, 25%);
-    300: hsv(22, 76%, 60%);
-    400: hsv(22, 40%, 90%);
+    100: hsv(21, 80%, 25%);
+    200: hsv(21, 80%, 25%);
+    300: hsv(22, 35%, 87%);
+    400: hsv(22, 30%, 99%);
     500: hsv(22, 20%, 98%);
     600: hsv(22, 20%, 98%);
 }
 
 // Blue
 .set-blue() {
-    100: hsv(226, 6%, 100%);
+    100: hsv(225, 6%, 100%);
     200: hsv(226, 20%, 98%);
     300: hsv(226, 45%, 97%);
     400: hsv(226, 67%, 95%);
@@ -128,41 +129,41 @@
     600: hsv(226, 85%, 40%);
 }
 .set-blue-dark() {
-    100: hsv(220, 55%, 30%);
+    100: hsv(220, 56%, 30%);
     200: hsv(220, 50%, 60%);
-    300: hsv(226, 45%, 88%);
-    400: hsv(226, 35%, 100%);
+    300: hsv(220, 45%, 88%);
+    400: hsv(220, 35%, 100%);
     500: hsv(220, 20%, 100%);
-    600: hsv(220, 10%, 100%);
+    600: hsv(221, 10%, 100%);
 }
 .set-blue-hc() {
-    100: hsv(226, 6%, 100%);
-    200: hsv(226, 6%, 100%);
+    100: hsv(225, 6%, 100%);
+    200: hsv(225, 6%, 100%);
     300: hsv(226, 67%, 95%);
     400: hsv(226, 80%, 70%);
     500: hsv(226, 85%, 40%);
     600: hsv(226, 85%, 40%);
 }
 .set-blue-hc-dark() {
-    100: hsv(220, 55%, 30%);
-    200: hsv(220, 55%, 30%);
-    300: hsv(220, 50%, 60%);
-    400: hsv(220, 35%, 100%);
-    500: hsv(220, 10%, 100%);
-    600: hsv(220, 10%, 100%);
+    100: hsv(220, 56%, 30%);
+    200: hsv(220, 56%, 30%);
+    300: hsv(220, 35%, 100%);
+    400: hsv(220, 20%, 100%);
+    500: hsv(221, 10%, 100%);
+    600: hsv(221, 10%, 100%);
 }
 
 // Green
 .set-green() {
-    100: hsv(82, 6%, 98%);
-    200: hsv(82, 30%, 95%);
-    300: hsv(82, 50%, 80%);
+    100: hsv(84, 6%, 98%);
+    200: hsv(82, 30%, 90%);
+    300: hsv(82, 46%, 75%);
     400: hsv(82, 80%, 60%);
     500: hsv(82, 90%, 45%);
     600: hsv(82, 95%, 30%);
 }
 .set-green-dark() {
-    100: hsv(82, 80%, 22%);
+    100: hsv(81, 80%, 22%);
     200: hsv(82, 55%, 45%);
     300: hsv(82, 44%, 70%);
     400: hsv(82, 40%, 90%);
@@ -170,18 +171,18 @@
     600: hsv(82, 20%, 100%);
 }
 .set-green-hc() {
-    100: hsv(82, 6%, 98%);
-    200: hsv(82, 6%, 98%);
+    100: hsv(84, 6%, 98%);
+    200: hsv(84, 6%, 98%);
     300: hsv(82, 80%, 63%);
     400: hsv(82, 93%, 38%);
     500: hsv(82, 95%, 30%);
     600: hsv(82, 95%, 30%);
 }
 .set-green-hc-dark() {
-    100: hsv(82, 80%, 22%);
-    200: hsv(82, 80%, 22%);
-    300: hsv(82, 55%, 45%);
-    400: hsv(82, 44%, 70%);
+    100: hsv(81, 80%, 22%);
+    200: hsv(81, 80%, 22%);
+    300: hsv(82, 40%, 90%);
+    400: hsv(82, 30%, 90%);
     500: hsv(82, 20%, 100%);
     600: hsv(82, 20%, 100%);
 }
@@ -193,7 +194,7 @@
     300: hsv(0, 50%, 90%);
     400: hsv(0, 75%, 75%);
     500: hsv(0, 90%, 55%);
-    600: hsv(0, 95%, 35%);
+    600: hsv(0, 96%, 35%);
 }
 .set-red-dark() {
     100: hsv(0, 71%, 20%);
@@ -208,8 +209,8 @@
     200: hsv(0, 6%, 99%);
     300: hsv(0, 75%, 75%);
     400: hsv(0, 90%, 55%);
-    500: hsv(0, 95%, 35%);
-    600: hsv(0, 95%, 35%);
+    500: hsv(0, 96%, 35%);
+    600: hsv(0, 96%, 35%);
 }
 .set-red-hc-dark() {
     100: hsv(0, 71%, 20%);
@@ -223,7 +224,7 @@
 // Yellow
 .set-yellow() {
     100: hsv(48, 8%, 99%);
-    200: hsv(48, 20%, 96%);
+    200: hsv(48, 36%, 96%);
     300: hsv(48, 94%, 93%);
     400: hsv(48, 100%, 67%);
     500: hsv(48, 100%, 50%);
@@ -234,13 +235,13 @@
     200: hsv(48, 75%, 35%);
     300: hsv(48, 55%, 65%);
     400: hsv(48, 45%, 90%);
-    500: hsv(48, 30%, 99%);
+    500: hsv(48, 30%, 89%);
     600: hsv(48, 10%, 100%);
 }
 .set-yellow-hc() {
     100: hsv(48, 8%, 99%);
     200: hsv(48, 8%, 99%);
-    300: hsv(48, 80%, 80%);
+    300: hsv(48, 100%, 67%); 
     400: hsv(48, 100%, 42%);
     500: hsv(48, 100%, 30%);
     600: hsv(48, 100%, 30%);
@@ -248,8 +249,8 @@
 .set-yellow-hc-dark() {
     100: hsv(48, 80%, 20%);
     200: hsv(48, 80%, 20%);
-    300: hsv(48, 75%, 35%);
-    400: hsv(48, 45%, 90%);
+    300: hsv(48, 45%, 90%);
+    400: hsv(48, 30%, 89%);
     500: hsv(48, 10%, 100%);
     600: hsv(48, 10%, 100%);
 }
@@ -282,17 +283,17 @@
 .set-purple-hc-dark() {
     100: hsv(252, 70%, 30%);
     200: hsv(252, 70%, 30%);
-    300: hsv(252, 65%, 50%);
-    400: hsv(252, 45%, 70%);
+    300: hsv(252, 33%, 97%);
+    400: hsv(252, 20%, 98%);
     500: hsv(252, 10%, 99%);
     600: hsv(252, 10%, 99%);
 }
 
 .set-pink() {
-    100: hsv(293, 6%, 99%);
+    100: hsv(296, 6%, 99%);
     200: hsv(293, 25%, 95%);
     300: hsv(293, 45%, 95%);
-    400: hsv(293, 68%, 91%);
+    400: hsv(292, 68%, 91%);
     500: hsv(293, 80%, 70%);
     600: hsv(293, 90%, 45%);
 }
@@ -302,23 +303,23 @@
     300: hsv(293, 35%, 78%);
     400: hsv(293, 25%, 98%);
     500: hsv(293, 18%, 99%);
-    600: hsv(293, 10%, 99%);
+    600: hsv(295, 10%, 99%);
 }
 .set-pink-hc() {
-    100: hsv(293, 6%, 99%);
-    200: hsv(293, 6%, 99%);
-    300: hsv(293, 90%, 91%);
-    400: hsv(293, 80%, 60%);
+    100: hsv(296, 6%, 99%);
+    200: hsv(296, 6%, 99%);
+    300: hsv(292, 68%, 91%);
+    400: hsv(293, 80%, 62%);
     500: hsv(293, 90%, 45%);
     600: hsv(293, 90%, 45%);
 }
 .set-pink-hc-dark() {
     100: hsv(293, 80%, 20%);
     200: hsv(293, 80%, 20%);
-    300: hsv(293, 65%, 40%);
-    400: hsv(293, 30%, 80%);
-    500: hsv(293, 10%, 99%);
-    600: hsv(293, 10%, 99%);
+    300: hsv(293, 25%, 98%);
+    400: hsv(293, 18%, 99%);
+    500: hsv(295, 10%, 99%);
+    600: hsv(295, 10%, 99%);
 }
 
 // Retaining legacy metallic colors for backward compatibility

package/lib/exports/constants-helpers.less

@@ -31,7 +31,7 @@ body {
     --zi-modals:             9000;   //  Modals
 
     // Border Radius
-    --br-md:                 calc(var(--su-static4) + var(--su-static6)); // 10px;
+    --br-md:                 calc(var(--su-static4) + var(--su-static6)); // 10px
     --br-circle:             50%;
     --br-pill:               1000px;
     // TODO SHINE Retaining legacy border radius for backward compatibility
@@ -50,18 +50,14 @@ body {
 
     --default-transition-duration:       0.1s;
     --transition-time:                   var(--default-transition-duration);
-
-    // Sizing
-    --s-full: 97.2307692rem; // Based on a pixel size of 1264px;
-    --s-step: calc(var(--s-full) / 12);
 }
 
 //  ============================================================================
 //  $   RESPONSIVE BREAKPOINTS
 //  ----------------------------------------------------------------------------
-@breakpoint-lg: 1264px;
-@breakpoint-md: 980px;
-@breakpoint-sm: 640px;
+@breakpoint-lg: 92.25rem; // 1476px
+@breakpoint-md: 71.875rem; // 1150px
+@breakpoint-sm: 48.75rem; // 780px
 
 //  ============================================================================
 //  $   SCROLLBAR STYLING

package/lib/exports/constants-type.less

@@ -88,48 +88,30 @@
     Menlo, Monaco, Consolas, // A few sensible system font choices
     monospace; // The final fallback for rendering in monospace.
 
-html,
+html {
+    font-size: 100%;
+}
+
 body {
     --ff-sans: @ff-sans;
     --ff-serif: @ff-serif;
     --ff-mono: @ff-mono;
     --theme-body-font-family: var(--ff-sans);
 
-    //  ============================================================================
-    //  $   FONT SIZES (fs-)
-    //      Base font-size is 13px.
-    //  ----------------------------------------------------------------------------
-    --fs-fine:           12px;
-    --fs-caption:        13px;
-    --fs-body1:          14px;
-
-    //  Relative to the root element
-    --fs-body2:               1.143rem; // 16px
-    --fs-body3:               1.286rem; // 18px
-    --fs-subheading:          1.429rem; // 20px
-    --fs-title:               1.571rem; // 22px
-    --fs-headline1:           2rem;     // 28px
-    --fs-headline2:           2.571rem; // 36px
-    --fs-display1:            3.286rem; // 46px
-    --fs-display2:            4.143rem; // 58px
-    --fs-display3:            5.143rem; // 72px
-    --fs-display4:            7.143rem; // 100px
-
-    //  Relative to the parent
-    --fs-body2-relative:      1.143rem; // 16px
-    --fs-body3-relative:      1.286rem; // 18px
-    --fs-subheading-relative: 1.429rem; // 20px
-    --fs-title-relative:      1.571rem; // 22px
-    --fs-headline1-relative:  2rem;     // 28px
-    --fs-headline2-relative:  2.571rem; // 36px
-    --fs-display1-relative:   3.286rem; // 46px
-    --fs-display2-relative:   4.143rem; // 58px
-    --fs-display3-relative:   5.143rem; // 72px
-    --fs-display4-relative:   7.143rem; // 100px
-
-    // this value is not using spacing units because the calc involved results
-    // in unexpected sizing. I'm not sure why, honestly.
-    --fs-base: 14px;
+    // All rem values are relative to the font size applied to <html> (16px by default).
+    --fs-fine:          0.75rem;    // 12px
+    --fs-caption:       0.8125rem;  // 13px
+    --fs-body1:         0.875rem;   // 14px (base font size applied to <body>)
+    --fs-body2:         1rem;       // 16px
+    --fs-body3:         1.125rem;   // 18px
+    --fs-subheading:    1.25rem;    // 20px
+    --fs-title:         1.375rem;   // 22px
+    --fs-headline1:     1.75rem;    // 28px
+    --fs-headline2:     2.25rem;    // 36px
+    --fs-display1:      2.875rem;   // 46px
+    --fs-display2:      3.625rem;   // 58px
+    --fs-display3:      4.5rem;     // 72px
+    --fs-display4:      6.25rem;    // 100px
 
     //  ============================================================================
     //  $   LINE HEIGHT (lh-)

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

@@ -9,17 +9,16 @@
 @import "components/activity-indicator/activity-indicator.less";
 @import "components/anchor/anchor.less";
 @import "components/avatar/avatar.less";
-@import "components/award-bling/award-bling.less";
 @import "components/badge/badge.less";
 @import "components/banner/banner.less";
+@import "components/bling/bling.less";
 @import "components/block-link/block-link.less";
 @import "components/breadcrumbs/breadcrumbs.less";
 @import "components/button/button.less";
 @import "components/button-group/button-group.less";
 @import "components/card/card.less";
-@import "components/check-control/check-control.less";
-@import "components/check-group/check-group.less";
 @import "components/checkbox_radio/checkbox_radio.less";
+@import "components/form-group/form-group.less";
 @import "components/code-block/code-block.less";
 @import "components/description/description.less";
 @import "components/empty-state/empty-state.less";
@@ -43,7 +42,6 @@
 @import "components/prose/prose.less";
 @import "components/select/select.less";
 @import "components/sidebar-widget/sidebar-widget.less";
-@import "components/skeleton/skeleton.less";
 @import "components/spinner/spinner.less";
 @import "components/table/table.less";
 @import "components/table-container/table-container.less";
@@ -53,6 +51,7 @@
 @import "components/topbar/topbar.less";
 @import "components/uploader/uploader.less";
 @import "components/user-card/user-card.less";
+@import "components/vote/vote.less";
 
 // LESS CONSTANTS AND MIXINS
 @import "exports/exports.less";
@@ -63,10 +62,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/lib/tsconfig.json

@@ -5,7 +5,7 @@
         "lib": ["dom", "es6", "dom.iterable", "scripthost"],
         "outDir": "../dist",
         "sourceMap": true,
-        "moduleResolution": "node",
+        "moduleResolution": "bundler",
         "skipLibCheck": true,
         "declaration": true,
         "allowSyntheticDefaultImports": true,

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.2",
+    "version": "3.0.0-beta.20",
     "files": [
         "dist",
         "lib",