@stackoverflow/stacks 3.0.0-beta.23 → 3.0.0-beta.25

package/lib/components/uploader/uploader.less

@@ -82,7 +82,7 @@
         display: flex;
         flex-direction: column;
         justify-content: center;
-        min-height: var(--su-static128);
+        min-height: var(--su128);
         padding: var(--su8) var(--su16);
         position: relative;
         text-align: center;
@@ -114,7 +114,7 @@
 
     & &--preview-thumbnail {
         .highcontrast-mode({
-            border: var(--su-static1) solid var(--black);
+            border: var(--su1) solid var(--black);
         });
 
         &:is(img) {
@@ -129,7 +129,7 @@
         background-color: var(--white);
         border-radius: var(--br-md);
         box-shadow: var(--bs-md);
-        max-height: var(--su-static128);
+        max-height: var(--su128);
         max-width: 100%;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -171,9 +171,9 @@
                 }
 
                 color: transparent;
-                height: var(--su-static32);
+                height: var(--su32);
                 flex-shrink: 0;
-                width: var(--su-static32);
+                width: var(--su32);
             }
         }
 

package/lib/components/user-card/user-card.less

@@ -8,10 +8,17 @@
     --_uc-username-p: unset;
     --_uc-username-bl: unset;
     --_uc-username-bg: unset;
-    --_uc-username-fc: unset;
+    --_uc-username-fc: var(--black-600);
     --_uc-username-d: unset;
     --_uc-username-ai: unset;
 
+    // CONTEXTUAL STYLES
+    .highcontrast-mode({
+        a[href] {
+            text-decoration: underline;
+        }
+    });
+
     // VARIANTS
     // SIZES
     &&__lg {
@@ -24,7 +31,7 @@
         }
 
         .s-user-card--group:has(> .s-user-card--rep) {
-            margin-top: calc(var(--su2) * -1);
+            margin-top: var(--sun2);
         }
 
         --_uc-ai: flex-start;
@@ -37,6 +44,10 @@
     }
 
     // CHILD ELEMENTS
+    a {
+        text-decoration: none;
+    }
+
     & &--bio {
         .truncation(3);
         color: var(--black-400);
@@ -82,7 +93,7 @@
     }
 
     &--username__op {
-        --_uc-username-p: calc(var(--su4) - var(--su1)) var(--su4) calc(var(--su4) - var(--su1)) var(--su4);
+        --_uc-username-p: var(--su3) var(--su4) var(--su3) var(--su4);
         --_uc-username-bg: var(--blue-100);
         --_uc-username-bl: var(--su4) solid var(--blue-300);
         --_uc-username-d: flex;

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(--su4) + var(--su6)); // 10px
     --br-circle:             50%;
     --br-pill:               1000px;
     // TODO SHINE Retaining legacy border radius for backward compatibility
@@ -64,18 +64,18 @@ body {
 //  ----------------------------------------------------------------------------
 @scrollbar-styles: {
     &::-webkit-scrollbar {
-        width: calc(var(--su-static12) - var(--su-static2));
-        height: calc(var(--su-static12) - var(--su-static2));
+        width: calc(var(--su12) - var(--su2));
+        height: calc(var(--su12) - var(--su2));
         background-color: transparent;
     }
 
     &::-webkit-scrollbar-track {
-        border-radius: calc(var(--su-static12) - var(--su-static2));
+        border-radius: calc(var(--su12) - var(--su2));
         background-color: transparent;
     }
 
     &::-webkit-scrollbar-thumb {
-        border-radius: calc(var(--su-static12) - var(--su-static2));
+        border-radius: calc(var(--su12) - var(--su2));
         background-color: var(--scrollbar);
     }
 
@@ -101,6 +101,6 @@ body {
     // Show focus styles on keyboard focus.
     &:focus-visible {
         outline: none;
-        box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
+        box-shadow: 0 0 0 var(--su4) var(--focus-ring-muted);
     }
 }

package/lib/exports/mixins.less

@@ -1,52 +1,10 @@
-/* stylelint-disable indentation */
-//
-//  STACK OVERFLOW
-//  MIXINS
-//
-//  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/
-//
-//  ============================================================================
-//  $   Clearfix
-//  -----------------------------------------------------------------------------
-.clearfix() {
-    &:before,
-    &:after {
-        content: "";
-        display: table;
-    }
-    &:after { clear: both; }
-}
-
-//  ============================================================================
-//  --  LIGHTMODE
-//      .light-mode-forced ensures light color scheme is used in .theme-light__forced
-//
-//      .light-mode-forced({ color: var(--black-600) });
-//
-//  ---------------------------------------------------------------------------
-
-.light-mode-forced(@rules) {
-    .theme-light__forced &,
-    body.theme-system .theme-light__forced &,
-    body.theme-dark .theme-light__forced & {
-        @rules();
-    }
-}
-
-//  ===========================================================================
-//  --  DARKMODE
-//      .darkmode renders a dark mode override behind the
-//      prefers-color-scheme: dark media query and .theme-system. It also
-//      renders the same rules outside of the media query with .theme-dark
-//
-//      Usage example:
-//
-//      .dark-mode({ background-color: var(--black-100); });
-//
-//  ---------------------------------------------------------------------------
-
+// COLOR MODE OVERRIDES
+/**
+ * Applies styles rules when dark mode is active.
+ *
+ * Usage example:
+ * .dark-mode({ background-color: var(--black-100); });
+ */
 .dark-mode(@rules) {
     body.theme-system & {
         @media (prefers-color-scheme: dark) {
@@ -61,22 +19,24 @@
     }
 }
 
-//  ===========================================================================
-//  --  HIGHCONTRAST
-//      .highcontrast-mode renders a high contrast mode override for .theme-highcontrast
-//
-//      Usage example:
-//
-//      .highcontrast-mode({ background-color: var(--black-100); });
-//
-//  ---------------------------------------------------------------------------
-
+/**
+ * Applies styles rules when high contrast mode is active.
+ *
+ * Usage example:
+ * .highcontrast-mode({ background-color: var(--black-100); });
+ */
 .highcontrast-mode(@rules) {
     body.theme-highcontrast & {
         @rules();
     }
 }
 
+/**
+ * Applies styles rules when high contrast and dark mode is active.
+ *
+ * Usage example:
+ * .highcontrast-dark-mode({ background-color: var(--black-100); });
+ */
 .highcontrast-dark-mode(@rules) {
     body.theme-highcontrast.theme-system & {
         @media (prefers-color-scheme: dark) {
@@ -88,31 +48,9 @@
     }
 }
 
-//  ===========================================================================
-//  --  FONT FACE
-//      Used to load hosted, custom webfonts. You must provide the font's
-//      full file path in the mixin. All modern browsers the WOFF file format.
-//      Will automatically add various local()s to try using already-installed
-//      fonts before downloading.
-//  ---------------------------------------------------------------------------
-/* stylelint-disable at-rule-descriptor-value-no-unknown */
-.font-face(@family, @path, @weight, @style) {
-    @font-face {
-        font-family: "@{family}";
-        font-style: @style;
-        font-weight: @weight;
-        & when (@style=italic) {
-            #stacks-internals #font-face-src(@family, @path, @weight, " Italic");
-        }
-        & when not (@style=italic) {
-            #stacks-internals #font-face-src(@family, @path, @weight, "");
-        }
-    }
-}
-/* stylelint-enable at-rule-descriptor-value-no-unknown */
-
+// FOCUS STYLES
 /**
- * Focus styles for the given context.
+ * Applies focus styles for the given context.
  *
  * Usage example:
  * .focus-styles(true, true);
@@ -122,152 +60,29 @@
  */
 .focus-styles(@inset: false, @border: false) {
     & when not (@inset) and not (@border) {
-        box-shadow: 0 0 0 var(--su-static2) var(--focus-neutral), 0 0 0 var(--su-static4) var(--focus-theme);
+        box-shadow: 0 0 0 var(--su2) var(--focus-neutral), 0 0 0 var(--su4) var(--focus-theme);
     }
 
     & when not (@inset) and (@border) {
         border-color: var(--focus-neutral) !important;
-        box-shadow: 0 0 0 var(--su-static1) var(--focus-neutral), 0 0 0 calc(var(--su-static4) - var(--su-static1)) var(--focus-theme);
+        box-shadow: 0 0 0 var(--su1) var(--focus-neutral), 0 0 0 var(--su3) var(--focus-theme);
     }
 
     & when (@inset) and not (@border) {
-        box-shadow: inset 0 0 0 var(--su-static2) var(--focus-theme), inset 0 0 0 var(--su-static4) var(--focus-neutral);
+        box-shadow: inset 0 0 0 var(--su2) var(--focus-theme), inset 0 0 0 var(--su4) var(--focus-neutral);
     }
 
     & when (@inset) and (@border) {
         border-color: var(--focus-theme) !important;
-        box-shadow: inset 0 0 0 var(--su-static1) var(--focus-theme), inset 0 0 0 calc(var(--su-static4) - var(--su-static1)) var(--focus-neutral);
+        box-shadow: inset 0 0 0 var(--su1) var(--focus-theme), inset 0 0 0 var(--su3) var(--focus-neutral);
     }
 
     // We include a 2px transparent outline to ensure Windows High Contrast Forced Color Mode
     // includes outlines as expected See https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/
-    outline: var(--su-static2) solid transparent !important;
-}
-
-//  =============================================================================
-//  --  COLORS
-//      The following mixins let us do color math on the browser. They take a
-//      color prefix, and they expect the different values to be stored in
-//      --{prefix}-h, --{prefix}-s and --{prefix}-l
-//  -----------------------------------------------------------------------------
-
-.load-color-variables(@amount) {
-    @amountDecimal: (@amount / 100);
-    @amountPercentage: @amount * 1%;
-    @complementDecimal: 1 - @amountDecimal;
-    @additionDecimal: 1 + @amountDecimal;
-}
-
-.assemble-color(@color-prefix) {
-    @result: hsl(var(~"--@{color-prefix}-h"),
-                 var(~"--@{color-prefix}-s"),
-                 var(~"--@{color-prefix}-l"));
-}
-
-// Increase the lightness of a color in the HSL color space by an absolute amount.
-.native-lighten(@color-prefix, @amount) {
-    .load-color-variables(@amount);
-    @result: hsl(var(~"--@{color-prefix}-h"),
-                 var(~"--@{color-prefix}-s"),
-                 calc(var(~"--@{color-prefix}-l") + @amountPercentage));
-}
-
-// Decrease the lightness and saturation of a color in the HSL color space by absolute amounts.
-.native-darken-desaturate(@color-prefix, @darken-amount, @desaturate-amount) {
-    @darkenAmountPercentage: .load-color-variables(@darken-amount)[@amountPercentage];
-    @desaturateAmountPercentage: .load-color-variables(@desaturate-amount)[@amountPercentage];
-    @result: hsl(var(~"--@{color-prefix}-h"),
-                 calc(var(~"--@{color-prefix}-s") - @desaturateAmountPercentage),
-                 calc(var(~"--@{color-prefix}-l") - @darkenAmountPercentage));
-}
-
-
-// Decrease the lightness of a color in the HSL color space by an absolute amount.
-.native-darken(@color-prefix, @amount) {
-    .load-color-variables(@amount);
-    @result: hsl(var(~"--@{color-prefix}-h"),
-                 var(~"--@{color-prefix}-s"),
-                 calc(var(~"--@{color-prefix}-l") - @amountPercentage));
-}
-
-// Mix color with white in variable proportion
-.native-tint(@color-prefix, @amount) {
-    .load-color-variables(@amount);
-    @ramount: 255 * @amountDecimal;
-    @gamount: 255 * @amountDecimal;
-    @bamount: 255 * @amountDecimal;
-    @result: rgb(calc(@ramount + var(~"--@{color-prefix}-r") * @complementDecimal),
-                 calc(@gamount + var(~"--@{color-prefix}-g") * @complementDecimal),
-                 calc(@bamount + var(~"--@{color-prefix}-b") * @complementDecimal));
-}
-
-// Mix color with black in variable proportion
-.native-shade(@color-prefix, @amount) {
-    .load-color-variables(@amount);
-    @result: rgb(calc(var(~"--@{color-prefix}-r") * @complementDecimal),
-                 calc(var(~"--@{color-prefix}-g") * @complementDecimal),
-                 calc(var(~"--@{color-prefix}-b") * @complementDecimal));
-}
-
-// Set the absolute opacity of a color.
-.native-fade(@color-prefix, @amount) {
-    .load-color-variables(@amount);
-    @result: hsla(var(~"--@{color-prefix}-h"),
-                  var(~"--@{color-prefix}-s"),
-                  var(~"--@{color-prefix}-l"),
-                  @amountDecimal);
-}
-
-//  =============================================================================
-//  --  SIZE STYLES
-//      The following mixins let us generate pseudo-private custom properties
-//      for common sizes. They expect a size (@size), a prefix for the custom
-//      property (@prefix), and an array of comma-separates abbreviated styles
-//      (@styles).
-//  -----------------------------------------------------------------------------
-
-.size-styles(@size, @prefix, @styles, @index: length(@styles)) {
-    & when (@index > 0) {
-        @style: extract(@styles, @index);
-
-              // xs
-        & when (@size = xs) and (@style = fs) {
-            --_@{prefix}-fs: var(--fs-fine);
-        }
-
-        // sm
-        & when (@size = sm) and (@style = fs) {
-            --_@{prefix}-fs: var(--fs-caption);
-        }
-
-        // md
-        & when (@size = md) and (@style = br) {
-            --_@{prefix}-br: calc(var(--br-md) + var(--su-static1));
-            }
-        & when (@size = md) and (@style = fs) {
-            --_@{prefix}-fs: var(--fs-body3);
-        }
-
-        // lg
-        & when (@size = lg) and (@style = br) {
-            --_@{prefix}-br: calc(var(--br-md) + var(--su-static1));
-        }
-        & when (@size = lg) and (@style = fs) {
-                --_@{prefix}-fs: var(--fs-title);
-        }
-
-        // xl
-        & when (@size = xl) and (@style = br) {
-            --_@{prefix}-br: var(--br-md);
-        }
-        & when (@size = xl) and (@style = fs) {
-            --_@{prefix}-fs: var(--fs-headline1);
-        }
-
-        .size-styles(@size, @prefix, @styles, @index: @index - 1);
-    }
+    outline: var(--su2) solid transparent !important;
 }
 
+// SIZING
 /**
  * Generate base and responsive atomic sizing classes.
  *
@@ -310,7 +125,6 @@
     );
 }
 
-
 /**
  * Generate atomic sizing classes using predefined SU (spacing unit) values.
  *
@@ -338,68 +152,3 @@
         1 2 3 4 5 6 7 8 9 10 11 12
     );
 }
-
-//  =============================================================================
-//  --  WEBKIT AUTOFILL
-//  -----------------------------------------------------------------------------
-.webkit-autofill() {
-    &:-webkit-autofill {
-        &:focus {
-            border-color: var(--blue-400);
-            // Since the box shadow is overwritten to show a background, we have to re-add the focus outline
-            -webkit-box-shadow: 0 0 0 1000px var(--blue-200) inset, 0 0 0 var(--su-static4) var(--focus-ring);
-        }
-
-        -webkit-box-shadow: 0 0 0 1000px var(--theme-secondary-200) inset; // This acts as a background color by stretching an inset box shadow across the input
-        -webkit-text-fill-color: var(--black);
-        border-color: var(--blue-400);
-        transition: background-color 0s 50000s; // A hack to infinitely delay background styles that come from the browser.
-    }
-
-    &::-webkit-contacts-auto-fill-button {
-        background-color: var(--black); // In Safari, make the autocomplete button darkmode-aware
-    }
-
-}
-
-//  ===========================================================================
-//  Internals only beyond this point -- helpers for .font-face()
-//  ---------------------------------------------------------------------------
-
-
-#stacks-internals() {
-
-    // Generate all common variants for local names that this font face may have.
-    // The CSS spec (Font Module Level 3, Section 4.3) says to use "only the Postscript
-    // name or the full font name".
-    // For example, given the family "Comic Sans MS", weight 800, italic, we're
-    // trying these local names:
-    //
-    // - Comic Sans MS Extra Bold Italic
-    // - ComicSansMS-ExtraBoldItalic
-    // - Comic Sans MS 800 Italic
-    // - ComicSansMS-800Italic
-    //
-    // For the weight 400 we also include the un-weight-postfixed name ("Comic Sans MS Italic").
-
-    #font-face-src(@family, @path, @weight, @style-postfix) {
-        @index: round(@weight/100);
-        @weight-names: "Thin", "Extra Light", "Light", "Regular", "Medium", "Semi Bold", "Bold", "Extra Bold", "Black";
-        @weight-name: extract(@weight-names, @index);
-        #stacks-internals #font-face-src-postfix(@family, @path, "@{weight-name}", @weight, @style-postfix);
-    }
-
-    #font-face-src-postfix(@family, @path, @postfix-name, @postfix-number, @style-postfix) {
-        @family-nospace: replace(@family, " ", "");
-        @postfix-name-nospace: replace("@{postfix-name}@{style-postfix}", " ", "");
-        @postfix-number-nospace: replace("@{postfix-number}@{style-postfix}", " ", "");
-
-        & when (@postfix-name="Regular") {
-            src: local("@{family} @{postfix-name}@{style-postfix}"), local("@{family-nospace}-@{postfix-name-nospace}"), local("@{family} @{postfix-number}@{style-postfix}"), local("@{family-nospace}-@{postfix-number-nospace}"), local("@{family}@{style-postfix}"), @path format("woff");
-        }
-
-        & when not (@postfix-name="Regular") {
-            src: local("@{family} @{postfix-name}@{style-postfix}"), local("@{family-nospace}-@{postfix-name-nospace}"), local("@{family} @{postfix-number}@{style-postfix}"), local("@{family-nospace}-@{postfix-number-nospace}"), @path format("woff");
-        }
-    }
-}

package/lib/stacks-static.less

@@ -5,14 +5,52 @@
 @import "base/icon.less";
 @import "input-utils.less";
 
-//  --  COMPONENTS
+// LESS CONSTANTS AND MIXINS
+@import "exports/exports.less";
+
+// CUSTOM PROPERTIES
+@import "atomic/sizing.less";
+
+// FOUNDATIONAL CLASSES
+@import "atomic/color.less";
+@import "atomic/typography.less";
+
+// ATOMIC CLASSES
+@import "atomic/backgrounds.less";
+@import "atomic/borders.less";
+@import "atomic/border-radius.less";
+@import "atomic/box-shadow.less";
+@import "atomic/box-sizing.less";
+@import "atomic/current-color.less";
+@import "atomic/cursors.less";
+@import "atomic/display.less";
+@import "atomic/flex.less";
+@import "atomic/floats.less";
+@import "atomic/gap.less";
+@import "atomic/grid.less";
+@import "atomic/height.less";
+@import "atomic/interactivity.less";
+@import "atomic/lists.less";
+@import "atomic/margin.less";
+@import "atomic/object-fit.less";
+@import "atomic/opacity.less";
+@import "atomic/outline.less";
+@import "atomic/overflow.less";
+@import "atomic/padding.less";
+@import "atomic/positioning.less";
+@import "atomic/truncation.less";
+@import "atomic/vertical-alignment.less";
+@import "atomic/visibility.less";
+@import "atomic/width.less";
+@import "atomic/z-index.less";
+
+// COMPONENTS
 @import "components/activity-indicator/activity-indicator.less";
 @import "components/anchor/anchor.less";
 @import "components/avatar/avatar.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";
@@ -53,23 +91,6 @@
 @import "components/user-card/user-card.less";
 @import "components/vote/vote.less";
 
-// LESS CONSTANTS AND MIXINS
-@import "exports/exports.less";
-
-//  --  ATOMIC CLASSES
-@import "atomic/border.less";
-@import "atomic/color.less";
-@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.less";
-
 /* stylelint-disable */
 #stacks-internals #screen-lg({
     #stacks-internals-collect-large();
@@ -93,4 +114,4 @@
 
 // CONFIG
 @import "base/configuration-static.less";
-@import "base/internal.less";
+@import "base/internal.less";

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