@stackoverflow/stacks 0.74.0 → 1.0.0-beta.0

package/lib/css/exports/{_stacks-constants-colors.less → constants-colors.less}

@@ -1,4 +1,4 @@
-@import (reference) "./_stacks-mixins.less";
+@import (reference) "./mixins.less";
 
 //
 //  STACK OVERFLOW
@@ -145,12 +145,6 @@
 @bronze-lighter: hsl(@bronze-h, 40%, 92%);
 @bronze-darker: hsl(@bronze-h, 31%, 52%);
 
-//  $  SHADOWS
-//  ----------------------------------------------------------------------------
-@bs-sm: 0 1px 2px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.05), 0 2px 8px hsla(0, 0%, 0%, 0.05);
-@bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.06), 0 2px 6px hsla(0, 0%, 0%, 0.06), 0 3px 8px hsla(0, 0%, 0%, 0.09);
-@bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.09), 0 3px 8px hsla(0, 0%, 0%, 0.09), 0 4px 13px hsla(0, 0%, 0%, 0.13);
-
 //  $  SCROLLBARS
 //  ----------------------------------------------------------------------------
 @scrollbar: hsla(0, 0%, 0%, 0.2);
@@ -197,7 +191,7 @@
 
 .component-colors {
     --theme-body-font-color: var(--black-800);
-
+    --theme-background-color: var(--white);
     // Links
     --theme-link-color: var(--theme-secondary-400);
     --theme-link-color-hover: var(--theme-secondary-350);
@@ -247,7 +241,7 @@
     --theme-tag-hover-border-color: transparent;
 
     // Topbar
-    --theme-topbar-height: @su48;
+    --theme-topbar-height: var(--su-static48);
     --theme-topbar-background-color: var(--black-025);
 
     // Topbar Search input
@@ -256,7 +250,7 @@
     --theme-topbar-search-placeholder: var(--black-200);
     --theme-topbar-search-border: var(--black-200);
     --theme-topbar-search-border-focus: var(--blue-300);
-    --theme-topbar-search-shadow-focus: 0 0 0 @su4 var(--focus-ring);
+    --theme-topbar-search-shadow-focus: 0 0 0 var(--su-static4) var(--focus-ring);
 
     // Topbar Search switcher
     --theme-topbar-select-color: var(--black-700);
@@ -271,6 +265,13 @@
 
     // Topbar themed border accent
     --theme-topbar-accent-border: 3px solid var(--theme-primary-color);
+
+    // Post summary
+    --theme-post-title-color: var(--theme-link-color);
+    --theme-post-title-color-hover: var(--theme-link-color-hover);
+    --theme-post-title-color-visited: var(--theme-link-color-visited);
+    --theme-post-title-font-family: var(--theme-body-font-family);
+    --theme-post-body-font-family: var(--theme-body-font-family);
 }
 
 //  --  Light mode
@@ -409,9 +410,10 @@
     --focus-ring-muted: hsla(@black-h, @black-s, 15%, 10%);
 
     // Shadows
-    --bs-sm: @bs-sm;
-    --bs-md: @bs-md;
-    --bs-lg: @bs-lg;
+    --bs-sm: 0 1px 2px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.05), 0 2px 8px hsla(0, 0%, 0%, 0.05);
+    --bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.06), 0 2px 6px hsla(0, 0%, 0%, 0.06), 0 3px 8px hsla(0, 0%, 0%, 0.09);
+    --bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.09), 0 3px 8px hsla(0, 0%, 0%, 0.09), 0 4px 13px hsla(0, 0%, 0%, 0.13);
+    --bs-xl: 0 10px 24px hsla(0, 0%, 0%, 0.05), 0 20px 48px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.1);
 
     // Scrollbars
     --scrollbar: hsla(0, 0, 0, 0.2);
@@ -472,9 +474,6 @@
 
     // Fades
     --focus-ring: .native-fade(theme-secondary-color, 15)[];
-
-    // TODO
-    --theme-body-font-color: var(--black-800);
 }
 
 //  --  Dark mode
@@ -610,7 +609,8 @@
     --bs-sm: 0 1px 2px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.1), 0 2px 8px hsla(0, 0%, 0%, 0.1);
     --bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.11), 0 2px 6px hsla(0, 0%, 0%, 0.11), 0 3px 8px hsla(0, 0%, 0%, 0.14);
     --bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.14), 0 3px 8px hsla(0, 0%, 0%, 0.14), 0 4px 13px hsla(0, 0%, 0%, 0.18);
-
+    --bs-xl: 0 10px 24px hsla(0, 0%, 0%, 0.1), 0 20px 48px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.15);
+    
     // Scrollbars
     --scrollbar: hsla(0, 0%, 100%, 0.2);
 
@@ -670,9 +670,6 @@
 
     // Fades
     --focus-ring: .native-fade(theme-secondary-color, 25)[];
-
-    // TODO
-    --theme-body-font-color: var(--black-800);
 }
 
 // rules shared between .theme-dark and .theme-system w/ prefers-color-scheme: dark
@@ -681,12 +678,10 @@
 
     &,
     & .themed {
+        color: var(--theme-body-font-color);
         .generate-themed-variables(theme-dark);
         // add in the themed "native mixins", making sure to scope to the child .themed elements so they don't use the parent's values
         .dark-themed-colors();
-    }
-
-    & .themed {
         &:extend(.component-colors);
     }
 }
@@ -825,6 +820,7 @@
     --bs-sm: none;
     --bs-md: none;
     --bs-lg: none;
+    --bs-xl: none;
 
     // Scrollbars
     --scrollbar: var(--black);
@@ -980,6 +976,7 @@
     --bs-sm: none;
     --bs-md: none;
     --bs-lg: none;
+    --bs-xl: none;
 
     // Scrollbars
     --scrollbar: var(--black);
@@ -1048,9 +1045,6 @@
 }
 
 // place component-colors on the body directly (instead of :root) so consumers can use the --theme-* variables
-body {
-    &:extend(.component-colors);
-}
 
 // Light mode
 body:not(.theme-dark),
@@ -1060,12 +1054,10 @@ body.theme-system .theme-light__forced {
 
     &,
     & .themed {
+        color: var(--theme-body-font-color);
         .generate-themed-variables(theme-light);
         // add in the themed "native mixins", making sure to scope to the child .themed elements so they don't use the parent's values
         .light-themed-colors();
-    }
-
-    & .themed {
         &:extend(.component-colors);
     }
 }

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

@@ -0,0 +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);
+    }
+}

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

@@ -0,0 +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));
+}

package/lib/css/exports/{_stacks-exports.less → exports.less}

@@ -9,7 +9,7 @@
 //  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";
+@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";

package/lib/css/exports/{_stacks-mixins.less → mixins.less}

@@ -19,6 +19,22 @@
     &:after { clear: both; }
 }
 
+//  ============================================================================
+//  --  LIGHTMODE
+//      .light-mode-forced ensures light color scheme is used in .theme-light__forced
+//
+//      .light-mode-forced({ color: var(--black-900) });
+//
+//  ---------------------------------------------------------------------------
+
+.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
@@ -39,7 +55,8 @@
     }
 
     body.theme-dark &,
-    .theme-dark__forced & {
+    .theme-dark__forced &,
+    body.theme-system .theme-dark__forced & {
         @rules();
     }
 }

package/lib/css/stacks-dynamic.less

@@ -15,22 +15,21 @@
 //      via variables.
 //  ----------------------------------------------------------------------------
 //  --  SET BASIC STYLES FOR BODY
-@import "base/_stacks-body.less";
+@import "base/body.less";
 
 //  --  COMPONENTS
-@import "components/_stacks-banners.less";
-@import "components/_stacks-buttons.less";
-@import "components/_stacks-links.less";
-@import "components/_stacks-link-previews.less";
-@import "components/_stacks-notices.less";
-@import "components/_stacks-tags.less";
-@import "components/_stacks-pagination.less";
-@import "components/_stacks-widget-dynamic.less";
+@import "components/banners.less";
+@import "components/buttons.less";
+@import "components/links.less";
+@import "components/link-previews.less";
+@import "components/notices.less";
+@import "components/tags.less";
+@import "components/pagination.less";
+@import "components/widget-dynamic.less";
 
 //  --  LESS CONSTANTS AND MIXINS
-@import "exports/_stacks-exports.less";
+@import "exports/exports.less";
 
 //  --  CONFIG
-@import "base/_stacks-configuration-static.less";
-@import "base/_stacks-configuration-dynamic.less";
-@import "base/_stacks-internals.less";
+@import "base/configuration-static.less";
+@import "base/internals.less";

package/lib/css/stacks-static.less

@@ -13,48 +13,48 @@
 //      The following items are elements which we DO NOT allow communities
 //      to modify via variables.
 //  ----------------------------------------------------------------------------
-@import "base/_stacks-reset.less";
-@import "base/_stacks-icons.less";
+@import "base/reset.less";
+@import "base/icons.less";
 
 //  --  COMPONENTS
-@import "components/_stacks-activity-indicator.less";
-@import "components/_stacks-avatars.less";
-@import "components/_stacks-badges.less";
-@import "components/_stacks-blank-states.less";
-@import "components/_stacks-breadcrumbs.less";
-@import "components/_stacks-button-groups.less";
-@import "components/_stacks-cards.less";
-@import "components/_stacks-code-blocks.less";
-@import "components/_stacks-collapsible.less";
-@import "components/_stacks-inputs.less";
-@import "components/_stacks-menu.less";
-@import "components/_stacks-modals.less";
-@import "components/_stacks-navigation.less";
-@import "components/_stacks-page-titles.less";
-@import "components/_stacks-popovers.less";
-@import "components/_stacks-post-summary.less";
-@import "components/_stacks-progress-bars.less";
-@import "components/_stacks-prose.less";
-@import "components/_stacks-spinner.less";
-@import "components/_stacks-tables.less";
-@import "components/_stacks-toggle-switches.less";
-@import "components/_stacks-topbar.less";
-@import "components/_stacks-uploader.less";
-@import "components/_stacks-user-cards.less";
-@import "components/_stacks-widget-static.less";
+@import "components/activity-indicator.less";
+@import "components/avatars.less";
+@import "components/badges.less";
+@import "components/blank-states.less";
+@import "components/breadcrumbs.less";
+@import "components/button-groups.less";
+@import "components/cards.less";
+@import "components/code-blocks.less";
+@import "components/collapsible.less";
+@import "components/inputs.less";
+@import "components/menu.less";
+@import "components/modals.less";
+@import "components/navigation.less";
+@import "components/page-titles.less";
+@import "components/popovers.less";
+@import "components/post-summary.less";
+@import "components/progress-bars.less";
+@import "components/prose.less";
+@import "components/spinner.less";
+@import "components/tables.less";
+@import "components/toggle-switches.less";
+@import "components/topbar.less";
+@import "components/uploader.less";
+@import "components/user-cards.less";
+@import "components/widget-static.less";
 
 //  --  LESS CONSTANTS AND MIXINS
-@import "exports/_stacks-exports.less";
+@import "exports/exports.less";
 
 //  --  ATOMIC CLASSES
-@import "atomic/_stacks-borders.less";
-@import "atomic/_stacks-colors.less";
-@import "atomic/_stacks-flex.less";
-@import "atomic/_stacks-grid.less";
-@import "atomic/_stacks-spacing.less";
-@import "atomic/_stacks-typography.less";
-@import "atomic/_stacks-misc.less";
-@import "atomic/_stacks-width-height.less";
+@import "atomic/borders.less";
+@import "atomic/colors.less";
+@import "atomic/flex.less";
+@import "atomic/grid.less";
+@import "atomic/spacing.less";
+@import "atomic/typography.less";
+@import "atomic/misc.less";
+@import "atomic/width-height.less";
 
 /* stylelint-disable */
 #stacks-internals #screen-lg({
@@ -82,5 +82,5 @@
 /* stylelint-enable */
 
 //  --  CONFIG
-@import "base/_stacks-configuration-static.less";
-@import "base/_stacks-internals.less";
+@import "base/configuration-static.less";
+@import "base/internals.less";

package/lib/ts/controllers/index.ts

@@ -0,0 +1,8 @@
+// export all controllers *with helpers* so they can be bulk re-exported by the package entry point
+export { ExpandableController } from './s-expandable-control';
+export { hideModal, ModalController, showModal } from './s-modal';
+export { TabListController } from './s-navigation-tablist';
+export { attachPopover, detachPopover, hidePopover, BasePopoverController, PopoverController, showPopover } from './s-popover';
+export { TableController } from './s-table';
+export { setTooltipHtml, setTooltipText, TooltipController } from './s-tooltip';
+export { UploaderController } from './s-uploader';