@stackoverflow/stacks 1.0.0 → 1.2.0

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

@@ -1,108 +1,108 @@
-//
-//  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-)
-//  • transition easings (te-)
-//
-body {
-    // Z-Index
-    --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-background:  8050;   //  Modals background
-    --zi-modals:             9000;   //  Modals
-
-    // Border Radius
-    --br-sm:                 3px;
-    --br-md:                 5px;
-    --br-lg:                 7px;
-    --br-circle:             50%;
-
-    // Transition easings
-    --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:                   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;
-
-//  ============================================================================
-//  $   SCROLLBAR STYLING
-//  ----------------------------------------------------------------------------
-@scrollbar-styles: {
-    &::-webkit-scrollbar {
-        width: calc(var(--su-static12) - var(--su-static2));
-        height: calc(var(--su-static12) - var(--su-static2));
-        background-color: transparent;
-    }
-
-    &::-webkit-scrollbar-track {
-        border-radius: calc(var(--su-static12) - var(--su-static2));
-        background-color: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        border-radius: calc(var(--su-static12) - var(--su-static2));
-        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 var(--su-static4) 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-)
+//  • transition easings (te-)
+//
+body {
+    // Z-Index
+    --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-background:  8050;   //  Modals background
+    --zi-modals:             9000;   //  Modals
+
+    // Border Radius
+    --br-sm:                 3px;
+    --br-md:                 5px;
+    --br-lg:                 7px;
+    --br-circle:             50%;
+
+    // Transition easings
+    --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:                   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;
+
+//  ============================================================================
+//  $   SCROLLBAR STYLING
+//  ----------------------------------------------------------------------------
+@scrollbar-styles: {
+    &::-webkit-scrollbar {
+        width: calc(var(--su-static12) - var(--su-static2));
+        height: calc(var(--su-static12) - var(--su-static2));
+        background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-track {
+        border-radius: calc(var(--su-static12) - var(--su-static2));
+        background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        border-radius: calc(var(--su-static12) - var(--su-static2));
+        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 var(--su-static4) var(--focus-ring-muted);
+    }
+}

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

@@ -1,153 +1,153 @@
-//
-//  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;
-}
-
-// TODO remove font-family Less variables. Keeping them here for now for comments.
-@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.
-
-html,
-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. Find a way to use unitless `--fs-base`.
-    --stacks-internals-lh-unit: 13;
-
-    // Now the various line-height variables
-    --lh-xs:    1;
-    --lh-sm:    calc((var(--stacks-internals-lh-unit) + 2) / var(--stacks-internals-lh-unit));
-    --lh-md:    calc((var(--stacks-internals-lh-unit) + 4) / var(--stacks-internals-lh-unit));
-    --lh-lg:    calc((var(--stacks-internals-lh-unit) + 8) / var(--stacks-internals-lh-unit));
-    --lh-xl:    calc((var(--stacks-internals-lh-unit) + 12) / var(--stacks-internals-lh-unit));
-    --lh-xxl:   2;
-
-    --lh-base: var(--lh-md);
-
-    //      Holdover line-heights from production. These are NOT to be used and
-    //      need to be deprecated.
-    //  ----------------------------------------------------------------------------
-    --lh-6:      ((var(--stacks-internals-lh-unit) + 6) / var(--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;
+}
+
+// TODO remove font-family Less variables. Keeping them here for now for comments.
+@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.
+
+html,
+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. Find a way to use unitless `--fs-base`.
+    --stacks-internals-lh-unit: 13;
+
+    // Now the various line-height variables
+    --lh-xs:    1;
+    --lh-sm:    calc((var(--stacks-internals-lh-unit) + 2) / var(--stacks-internals-lh-unit));
+    --lh-md:    calc((var(--stacks-internals-lh-unit) + 4) / var(--stacks-internals-lh-unit));
+    --lh-lg:    calc((var(--stacks-internals-lh-unit) + 8) / var(--stacks-internals-lh-unit));
+    --lh-xl:    calc((var(--stacks-internals-lh-unit) + 12) / var(--stacks-internals-lh-unit));
+    --lh-xxl:   2;
+
+    --lh-base: var(--lh-md);
+
+    //      Holdover line-heights from production. These are NOT to be used and
+    //      need to be deprecated.
+    //  ----------------------------------------------------------------------------
+    --lh-6:      ((var(--stacks-internals-lh-unit) + 6) / var(--stacks-internals-lh-unit));
+}

package/lib/css/exports/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 "constants-type.less";            // Type styles, sizes, and line-heights
-@import "constants-helpers.less";         // Border radius, z-index, spacing, transitions, etc
-@import "constants-colors.less";          // Colors
-@import "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 "constants-type.less";            // Type styles, sizes, and line-heights
+@import "constants-helpers.less";         // Border radius, z-index, spacing, transitions, etc
+@import "constants-colors.less";          // Colors
+@import "mixins.less";