@stackoverflow/stacks 0.75.0 → 0.76.0

package/lib/css/exports/_stacks-constants-helpers.less

@@ -1,139 +1,139 @@
-//
-//  STACK OVERFLOW
-//  CONSTANTS -- 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/
-//
-//  These are helper variables to quickly set values.
-//  These SHOULD NOT be reset.
-//
-//  Table of Contents
-//  • z-index (zi-)
-//  • border-radius (br-)
-//  • box-shadow (bs-)
-//  • spacing units (su-)
-//  • transition easings (te-)
-//
-//  ============================================================================
-//  $   Z-INDEX (zi-)
-//      Used for a bird's eye view of components dependent on the z-axis.
-//      Try to avoid customizing these.
-//  ----------------------------------------------------------------------------
-@zi-hide:               -1;     //  Hide something all the elements
-@zi-base:               0;      //  Reset to 0
-@zi-selected:           25;     //  Pop above siblings
-@zi-active:             30;     //  Pop above selected siblings
-@zi-dropdown:           1000;   //  Dropdowns
-@zi-popovers:           2000;   //  Popovers, Popups, Autocompletes
-@zi-tooltips:           3000;   //  Tooltips
-@zi-banners:            4000;   //  Banners
-@zi-navigation:         5000;   //  Navigation Bars
-@zi-navigation-fixed:   5050;   //  Fixed navigation bars
-@zi-modals:             9000;   //  Modals
-@zi-modals-background:  @zi-modals - 50;
-
-//  ============================================================================
-//  $   RESPONSIVE BREAKPOINTS
-//  ----------------------------------------------------------------------------
-@breakpoint-lg: 1264px;
-@breakpoint-md: 980px;
-@breakpoint-sm: 640px;
-
-//  ============================================================================
-//  $   BORDER RADIUS (br-)
-//  ----------------------------------------------------------------------------
-@br-sm:                 3px;
-@br-md:                 5px;
-@br-lg:                 7px;
-@br-circle:             50%;
-
-//  ============================================================================
-//  $  SPACING UNITS (su-)
-//  ----------------------------------------------------------------------------
-@su1:                   1px;
-@su2:                   2px;
-@su4:                   4px;
-@su6:                   6px;
-@su8:                   8px;
-@su12:                  12px;
-@su16:                  16px;
-@su24:                  24px;
-@su32:                  32px;
-@su48:                  48px;
-@su64:                  64px;
-@su96:                  96px;
-@su128:                 128px;
-
-
-//  ============================================================================
-//  $  SIZING UNITS (su-)
-//  ----------------------------------------------------------------------------
-@s-full: 97.2307692rem; // Based on a pixel size of 1264px;
-@s-step: (@s-full / 12);
-
-// TODO These helpers allow us to create our own timing functions with
-// cubic-bezier ~ but perhaps the default timing functions are acceptable?
-
-//  ============================================================================
-//  $   TRANSITION EASINGS (te-)
-//  ----------------------------------------------------------------------------
-@te-smooth-slow:        cubic-bezier(0.25, 0.46, 0.45, 0.94);       // easeOutQuad
-@te-smooth:             cubic-bezier(0.165, 0.84, 0.44, 1);         // easeOutQuart
-@te-smooth-quick:       cubic-bezier(0.19, 1, 0.22, 1);             // easeOutExpo
-@te-back-out:           cubic-bezier(0.175, 0.885, 0.32, 1.275);    // easeOutBack
-@te-back-in-out:        cubic-bezier(0.68, -0.55, 0.265, 1.55);     // easeInOutBack
-@te-ease-in:            cubic-bezier(0.47, 0, 0.745, 0.715);        // easeIn
-@te-ease-in-out:        cubic-bezier(0.445, 0.05, 0.55, 0.95);      // easeInOut
-@te-ease-out:           cubic-bezier(0.39, 0.575, 0.565, 1);        // easeOut
-
-@default-transition-duration:       0.1s;
-@transition-time:                   @default-transition-duration;
-
-
-//  ============================================================================
-//  $   SCROLLBAR STYLING
-//  ----------------------------------------------------------------------------
-@scrollbar-styles: {
-    &::-webkit-scrollbar {
-        width: @su12 - @su2;
-        height: @su12 - @su2;
-        background-color: transparent;
-    }
-
-    &::-webkit-scrollbar-track {
-        border-radius: @su12 - @su2;
-        background-color: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        border-radius: @su12 - @su2;
-        background-color: var(--scrollbar);
-    }
-
-    &::-webkit-scrollbar-corner {
-        background-color: transparent;
-        border-color: transparent;
-    }
-
-    scrollbar-color: var(--scrollbar) transparent;
-}
-
-//  ============================================================================
-//  $   FOCUS STYLING
-//  ----------------------------------------------------------------------------
-@focus-styles: {
-    // Hide focus styles if they're not needed, for example,
-    // when an element receives focus via the mouse.
-    &:focus:not(:focus-visible) {
-        outline: none;
-        box-shadow: none;
-    }
-
-    // Show focus styles on keyboard focus.
-    &:focus-visible {
-        outline: none;
-        box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
-    }
-}
+//
+//  STACK OVERFLOW
+//  CONSTANTS -- 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/
+//
+//  These are helper variables to quickly set values.
+//  These SHOULD NOT be reset.
+//
+//  Table of Contents
+//  • z-index (zi-)
+//  • border-radius (br-)
+//  • box-shadow (bs-)
+//  • spacing units (su-)
+//  • transition easings (te-)
+//
+//  ============================================================================
+//  $   Z-INDEX (zi-)
+//      Used for a bird's eye view of components dependent on the z-axis.
+//      Try to avoid customizing these.
+//  ----------------------------------------------------------------------------
+@zi-hide:               -1;     //  Hide something all the elements
+@zi-base:               0;      //  Reset to 0
+@zi-selected:           25;     //  Pop above siblings
+@zi-active:             30;     //  Pop above selected siblings
+@zi-dropdown:           1000;   //  Dropdowns
+@zi-popovers:           2000;   //  Popovers, Popups, Autocompletes
+@zi-tooltips:           3000;   //  Tooltips
+@zi-banners:            4000;   //  Banners
+@zi-navigation:         5000;   //  Navigation Bars
+@zi-navigation-fixed:   5050;   //  Fixed navigation bars
+@zi-modals:             9000;   //  Modals
+@zi-modals-background:  @zi-modals - 50;
+
+//  ============================================================================
+//  $   RESPONSIVE BREAKPOINTS
+//  ----------------------------------------------------------------------------
+@breakpoint-lg: 1264px;
+@breakpoint-md: 980px;
+@breakpoint-sm: 640px;
+
+//  ============================================================================
+//  $   BORDER RADIUS (br-)
+//  ----------------------------------------------------------------------------
+@br-sm:                 3px;
+@br-md:                 5px;
+@br-lg:                 7px;
+@br-circle:             50%;
+
+//  ============================================================================
+//  $  SPACING UNITS (su-)
+//  ----------------------------------------------------------------------------
+@su1:                   1px;
+@su2:                   2px;
+@su4:                   4px;
+@su6:                   6px;
+@su8:                   8px;
+@su12:                  12px;
+@su16:                  16px;
+@su24:                  24px;
+@su32:                  32px;
+@su48:                  48px;
+@su64:                  64px;
+@su96:                  96px;
+@su128:                 128px;
+
+
+//  ============================================================================
+//  $  SIZING UNITS (su-)
+//  ----------------------------------------------------------------------------
+@s-full: 97.2307692rem; // Based on a pixel size of 1264px;
+@s-step: (@s-full / 12);
+
+// TODO These helpers allow us to create our own timing functions with
+// cubic-bezier ~ but perhaps the default timing functions are acceptable?
+
+//  ============================================================================
+//  $   TRANSITION EASINGS (te-)
+//  ----------------------------------------------------------------------------
+@te-smooth-slow:        cubic-bezier(0.25, 0.46, 0.45, 0.94);       // easeOutQuad
+@te-smooth:             cubic-bezier(0.165, 0.84, 0.44, 1);         // easeOutQuart
+@te-smooth-quick:       cubic-bezier(0.19, 1, 0.22, 1);             // easeOutExpo
+@te-back-out:           cubic-bezier(0.175, 0.885, 0.32, 1.275);    // easeOutBack
+@te-back-in-out:        cubic-bezier(0.68, -0.55, 0.265, 1.55);     // easeInOutBack
+@te-ease-in:            cubic-bezier(0.47, 0, 0.745, 0.715);        // easeIn
+@te-ease-in-out:        cubic-bezier(0.445, 0.05, 0.55, 0.95);      // easeInOut
+@te-ease-out:           cubic-bezier(0.39, 0.575, 0.565, 1);        // easeOut
+
+@default-transition-duration:       0.1s;
+@transition-time:                   @default-transition-duration;
+
+
+//  ============================================================================
+//  $   SCROLLBAR STYLING
+//  ----------------------------------------------------------------------------
+@scrollbar-styles: {
+    &::-webkit-scrollbar {
+        width: @su12 - @su2;
+        height: @su12 - @su2;
+        background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-track {
+        border-radius: @su12 - @su2;
+        background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        border-radius: @su12 - @su2;
+        background-color: var(--scrollbar);
+    }
+
+    &::-webkit-scrollbar-corner {
+        background-color: transparent;
+        border-color: transparent;
+    }
+
+    scrollbar-color: var(--scrollbar) transparent;
+}
+
+//  ============================================================================
+//  $   FOCUS STYLING
+//  ----------------------------------------------------------------------------
+@focus-styles: {
+    // Hide focus styles if they're not needed, for example,
+    // when an element receives focus via the mouse.
+    &:focus:not(:focus-visible) {
+        outline: none;
+        box-shadow: none;
+    }
+
+    // Show focus styles on keyboard focus.
+    &:focus-visible {
+        outline: none;
+        box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
+    }
+}

package/lib/css/exports/_stacks-constants-type.less

@@ -1,91 +1,152 @@
-//
-//  STACK OVERFLOW
-//  CONSTANTS -- TYPOGRAPHY
-//
-//  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/
-//
-//  These are the Stacks type variables. These should be used in place of
-//  hard-coded values within CSS declarations.
-//
-//
-//  ============================================================================
-//  $   FONT FAMILY (ff-)
-//  ----------------------------------------------------------------------------
-@ff-sans:
-    -apple-system, BlinkMacSystemFont, // San Francisco on macOS and iOS
-    "Segoe UI", // Windows
-    "Liberation Sans", // Linux
-    sans-serif; // The final fallback for rendering in sans-serif.
-@ff-serif: Georgia, Cambria, "Times New Roman", Times, serif;
-@ff-mono:
-    ui-monospace, // San Francisco Mono on macOS and iOS
-    "Cascadia Mono", "Segoe UI Mono", // Newer Windows monospace fonts that are optionally installed. Most likely to be rendered in Consolas
-    "Liberation Mono", // Linux
-    Menlo, Monaco, Consolas, // A few sensible system font choices
-    monospace; // The final fallback for rendering in monospace.
-
-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:           11px;
-@fs-caption:        12px;
-@fs-body1:          13px;
-
-//  Relative to the root element
-@fs-body2:               1.153846154rem;
-@fs-body3:               1.307692308rem;
-@fs-subheading:          1.461538462rem;
-@fs-title:               1.615384615rem;
-@fs-headline1:           2.076923077rem;
-@fs-headline2:           2.615384615rem;
-@fs-display1:            3.307692308rem;
-@fs-display2:            4.230769231rem;
-@fs-display3:            5.307692308rem;
-@fs-display4:            7.615384615rem;
-
-//  Relative to the parent
-@fs-body2-relative:      1.153846154em;
-@fs-body3-relative:      1.307692308em;
-@fs-subheading-relative: 1.461538462em;
-@fs-title-relative:      1.615384615em;
-@fs-headline1-relative:  2.076923077em;
-@fs-headline2-relative:  2.615384615em;
-@fs-display1-relative:   3.307692308em;
-@fs-display2-relative:   4.230769231em;
-@fs-display3-relative:   5.307692308em;
-@fs-display4-relative:   7.615384615em;
-
-@fs-base: 13px;
-
-
-//  ============================================================================
-//  $   LINE HEIGHT (lh-)
-//  ----------------------------------------------------------------------------
-// Need to remove the unit off the font-size to make line-height unitless
-// FIXME this shouldn't be public.
-@_stacks-internals-lh-unit:   unit(@fs-base);
-
-// Now the various line-height variables
-@lh-xs:    1;
-@lh-sm:    ((@_stacks-internals-lh-unit + 2) / @_stacks-internals-lh-unit);
-@lh-md:    ((@_stacks-internals-lh-unit + 4) / @_stacks-internals-lh-unit);
-@lh-lg:    ((@_stacks-internals-lh-unit + 8) / @_stacks-internals-lh-unit);
-@lh-xl:    ((@_stacks-internals-lh-unit + 12) / @_stacks-internals-lh-unit);
-@lh-xxl:   2;
-
-@lh-base: @lh-md;
-
-//      Holdover line-heights from production. These are NOT to be used and
-//      need to be deprecated.
-//  ----------------------------------------------------------------------------
-@lh-6:      ((@_stacks-internals-lh-unit + 6) / @_stacks-internals-lh-unit);
+//
+//  STACK OVERFLOW
+//  CONSTANTS -- TYPOGRAPHY
+//
+//  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/
+//
+//  These are the Stacks type variables. These should be used in place of
+//  hard-coded values within CSS declarations.
+//
+//
+//  ============================================================================
+//  $   FONT FAMILY (ff-)
+//  ----------------------------------------------------------------------------
+
+// Add Segoe UI Adjusted as a font family, and adjust its baseline
+@font-face {
+    font-family: "Segoe UI Adjusted";
+    src: local(Segoe UI);
+    ascent-override: 95%;
+}
+
+// Segoe UI is variable, but only in Windows 11, so add all the variants
+@font-face {
+    font-family: "Segoe UI Adjusted";
+    src: local(Segoe UI Italic);
+    ascent-override: 95%;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "Segoe UI Adjusted";
+    src: local(Segoe UI Semibold);
+    ascent-override: 95%;
+    font-weight: 600;
+}
+
+@font-face {
+    font-family: "Segoe UI Adjusted";
+    src: local(Segoe UI Semibold Italic);
+    ascent-override: 95%;
+    font-style: italic;
+    font-weight: 600;
+}
+
+@font-face {
+    font-family: "Segoe UI Adjusted";
+    src: local(Segoe UI Bold);
+    ascent-override: 90%;
+    font-weight: 700;
+}
+
+@font-face {
+    font-family: "Segoe UI Adjusted";
+    src: local(Segoe UI Bold Italic);
+    ascent-override: 95%;
+    font-style: italic;
+    font-weight: 700;
+}
+
+@font-face {
+    font-family: "Segoe UI Adjusted";
+    src: local(Segoe UI Black);
+    ascent-override: 95%;
+    font-weight: 800;
+}
+
+@font-face {
+    font-family: "Segoe UI Adjusted";
+    src: local(Segoe UI Black Italic);
+    ascent-override: 95%;
+    font-style: italic;
+    font-weight: 800;
+}
+
+@ff-sans:
+    -apple-system, BlinkMacSystemFont, // San Francisco on macOS and iOS
+    "Segoe UI Adjusted", "Segoe UI", // Windows
+    "Liberation Sans", // Linux
+    sans-serif; // The final fallback for rendering in sans-serif.
+@ff-serif: Georgia, Cambria, "Times New Roman", Times, serif;
+@ff-mono:
+    ui-monospace, // San Francisco Mono on macOS and iOS
+    "Cascadia Mono", "Segoe UI Mono", // Newer Windows monospace fonts that are optionally installed. Most likely to be rendered in Consolas
+    "Liberation Mono", // Linux
+    Menlo, Monaco, Consolas, // A few sensible system font choices
+    monospace; // The final fallback for rendering in monospace.
+
+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:           11px;
+@fs-caption:        12px;
+@fs-body1:          13px;
+
+//  Relative to the root element
+@fs-body2:               1.153846154rem;
+@fs-body3:               1.307692308rem;
+@fs-subheading:          1.461538462rem;
+@fs-title:               1.615384615rem;
+@fs-headline1:           2.076923077rem;
+@fs-headline2:           2.615384615rem;
+@fs-display1:            3.307692308rem;
+@fs-display2:            4.230769231rem;
+@fs-display3:            5.307692308rem;
+@fs-display4:            7.615384615rem;
+
+//  Relative to the parent
+@fs-body2-relative:      1.153846154em;
+@fs-body3-relative:      1.307692308em;
+@fs-subheading-relative: 1.461538462em;
+@fs-title-relative:      1.615384615em;
+@fs-headline1-relative:  2.076923077em;
+@fs-headline2-relative:  2.615384615em;
+@fs-display1-relative:   3.307692308em;
+@fs-display2-relative:   4.230769231em;
+@fs-display3-relative:   5.307692308em;
+@fs-display4-relative:   7.615384615em;
+
+@fs-base: 13px;
+
+
+//  ============================================================================
+//  $   LINE HEIGHT (lh-)
+//  ----------------------------------------------------------------------------
+// Need to remove the unit off the font-size to make line-height unitless
+// FIXME this shouldn't be public.
+@_stacks-internals-lh-unit:   unit(@fs-base);
+
+// Now the various line-height variables
+@lh-xs:    1;
+@lh-sm:    ((@_stacks-internals-lh-unit + 2) / @_stacks-internals-lh-unit);
+@lh-md:    ((@_stacks-internals-lh-unit + 4) / @_stacks-internals-lh-unit);
+@lh-lg:    ((@_stacks-internals-lh-unit + 8) / @_stacks-internals-lh-unit);
+@lh-xl:    ((@_stacks-internals-lh-unit + 12) / @_stacks-internals-lh-unit);
+@lh-xxl:   2;
+
+@lh-base: @lh-md;
+
+//      Holdover line-heights from production. These are NOT to be used and
+//      need to be deprecated.
+//  ----------------------------------------------------------------------------
+@lh-6:      ((@_stacks-internals-lh-unit + 6) / @_stacks-internals-lh-unit);

package/lib/css/exports/_stacks-exports.less

@@ -1,15 +1,15 @@
-//
-//  STACK OVERFLOW
-//  VARIABLES
-//
-//  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/
-//
-//  Wherein we establish a bunch of values to make our lives a lot easier.
-//
-//  ============================================================================
-@import "_stacks-constants-type.less";            // Type styles, sizes, and line-heights
-@import "_stacks-constants-helpers.less";         // Border radius, z-index, spacing, transitions, etc
-@import "_stacks-constants-colors.less";          // Colors
-@import "_stacks-mixins.less";
+//
+//  STACK OVERFLOW
+//  VARIABLES
+//
+//  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/
+//
+//  Wherein we establish a bunch of values to make our lives a lot easier.
+//
+//  ============================================================================
+@import "_stacks-constants-type.less";            // Type styles, sizes, and line-heights
+@import "_stacks-constants-helpers.less";         // Border radius, z-index, spacing, transitions, etc
+@import "_stacks-constants-colors.less";          // Colors
+@import "_stacks-mixins.less";