@stackoverflow/stacks 0.76.0 → 1.0.1

package/lib/css/components/{_stacks-widget-static.less → widget-static.less}

@@ -9,23 +9,22 @@
 //  This file contains almost all the CSS for the sidebar widget. The only exception
 //  is the "current color" highlight when the widget is used for navigation. That
 //  part is configurable and is in the dynamic part of Stacks as
-//  _stacks-widget-dynamic.less.
+//  widget-dynamic.less.
 
+.s-sidebarwidget {
+    --s-sidebarwidget-content-padding: calc(var(--su16) - var(--su1)); // subtract 1px for border
+    --s-sidebarwidget-content-inner-spacing: var(--su12); // the spacing between two adjacent simple items
+    --s-sidebarwidget-content-outer-spacing: var(--su16); // the spacing at the start/end of a group of simple items, as well as between a complex item and its separator line
 
-@s-sidebarwidget-content-padding: @su16 - 1px; // subtract 1px for border
-@s-sidebarwidget-content-inner-spacing: @su12; // the spacing between two adjacent simple items
-@s-sidebarwidget-content-outer-spacing: @su16; // the spacing at the start/end of a group of simple items, as well as between a complex item and its separator line
-
-@s-sidebarwidget-outer-border-color: var(--bc-medium);
-@s-sidebarwidget-content-separator-color: var(--bc-light);
-@s-sidebarwidget-header-background-color: var(--black-025);
+    --s-sidebarwidget-outer-border-color: var(--bc-medium);
+    --s-sidebarwidget-content-separator-color: var(--bc-light);
+    --s-sidebarwidget-header-background-color: var(--black-025);
 
-.s-sidebarwidget {
     position: relative; // so that it's the positioning parent for the :after
-    border: 1px solid @s-sidebarwidget-outer-border-color;
-    border-radius: @br-sm;
+    border: 1px solid var(--s-sidebarwidget-outer-border-color);
+    border-radius: var(--br-sm);
     box-shadow: var(--bs-sm);
-    font-size: @fs-body1;
+    font-size: var(--fs-body1);
     background-color: var(--white);
 
     &:not(.s-anchors) a:not(.button):not(.s-btn):not(.post-tag):not(.s-sidebarwidget--action):not(.s-user-card--link) {
@@ -61,9 +60,10 @@
         top: -1px;
         right: -1px;
         left: -1px;
-        height: 2px + @br-sm; // we need 2px border + 2px border radius to have the correct corner shape
-        border-top: 1px solid @s-sidebarwidget-outer-border-color;
-        border-radius: @br-sm;
+        // TODO: this makes no sense. revisit.
+        height: calc(2px + var(--br-sm)); // we need 2px border + 2px border radius to have the correct corner shape
+        border-top: 1px solid var(--s-sidebarwidget-outer-border-color);
+        border-radius: var(--br-sm);
         pointer-events: none; // if the top item is clickable, then we don't want to prevent clicking the top 2 pixels
 
         // In order to also perfectly recreate the inner corner shape, our pseudo-element needs
@@ -72,14 +72,14 @@
         @supports ((-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)) or (clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%))) or (-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)) {
             -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
             clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
-            border: 1px solid @s-sidebarwidget-outer-border-color;
+            border: 1px solid var(--s-sidebarwidget-outer-border-color);
         }
     }
 }
 
 .s-sidebarwidget--header,
 .s-sidebarwidget--content {
-    border-top: 1px solid @s-sidebarwidget-content-separator-color;
+    border-top: 1px solid var(--s-sidebarwidget-content-separator-color);
 
     &:active {
         outline: none;
@@ -88,23 +88,23 @@
 
 
 .s-sidebarwidget--header {
-    padding: @s-sidebarwidget-content-inner-spacing @s-sidebarwidget-content-padding;
-    background: @s-sidebarwidget-header-background-color;
+    padding: var(--s-sidebarwidget-content-inner-spacing) var(--s-sidebarwidget-content-padding);
+    background: var(--s-sidebarwidget-header-background-color);
     color: var(--black-600);
-    font-size: @fs-body2;
+    font-size: var(--fs-body2);
     font-weight: normal;
 
     &:first-child {
-        border-top-left-radius: @br-sm;
-        border-top-right-radius: @br-sm;
+        border-top-left-radius: var(--br-sm);
+        border-top-right-radius: var(--br-sm);
     }
 
     &.s-sidebarwidget__small-bold-text {
-        font-size: @fs-caption;
+        font-size: var(--fs-caption);
         font-weight: bold;
         .-action {
             font-weight: normal;
-            line-height: 1.3 * @fs-caption;  // line-height should be the same as in the outside element, so the header and action baselines line up
+            line-height: calc(1.3 * var(--fs-caption));  // line-height should be the same as in the outside element, so the header and action baselines line up
         }
     }
 
@@ -114,7 +114,7 @@
             content: '';
             float: left;
             margin-top: ~"calc(1.3em / 2 - 5px)"; // 1.3 is our standard line height
-            margin-right: @su12;
+            margin-right: var(--su12);
             border: 5px solid transparent;
             border-left-color: var(--bc-darker);
             border-right-width: 0;
@@ -131,16 +131,16 @@
 
 .s-sidebarwidget--action {
     float: right;
-    margin: 0 0 @su4 @su8;
+    margin: 0 0 var(--su4) var(--su8);
     color: var(--blue);
-    font-size: @fs-fine;
+    font-size: var(--fs-fine);
     line-height: 1.3 * 15px; // line-height should be the same as in the outside element, so the header and action baselines line up
 }
 
 table.s-sidebarwidget--content.s-sidebarwidget__items {
-    padding: (@s-sidebarwidget-content-outer-spacing - @s-sidebarwidget-content-inner-spacing) (@s-sidebarwidget-content-padding - @s-sidebarwidget-content-inner-spacing);
+    padding: calc(var(--s-sidebarwidget-content-outer-spacing) - var(--s-sidebarwidget-content-inner-spacing)) calc(var(--s-sidebarwidget-content-padding) - var(--s-sidebarwidget-content-inner-spacing));
     border-collapse: separate;
-    border-spacing: @s-sidebarwidget-content-inner-spacing;
+    border-spacing: var(--s-sidebarwidget-content-inner-spacing);
 
     tr.-item {
         display: table-row;
@@ -161,12 +161,12 @@ table.s-sidebarwidget--content.s-sidebarwidget__items {
 
 .s-sidebarwidget--content {
     margin: 0;
-    padding: @s-sidebarwidget-content-outer-spacing @s-sidebarwidget-content-padding;
+    padding: var(--s-sidebarwidget-content-outer-spacing) var(--s-sidebarwidget-content-padding);
 
     &.s-sidebarwidget__items {
         display: block;
         // the items themselves provide part of the spacing, so the content padding needs to account for that
-        padding: (@s-sidebarwidget-content-outer-spacing - @s-sidebarwidget-content-inner-spacing) @s-sidebarwidget-content-padding;
+        padding: calc(var(--s-sidebarwidget-content-outer-spacing) - var(--s-sidebarwidget-content-inner-spacing)) var(--s-sidebarwidget-content-padding);
         &.s-sidebarwidget__block-items .s-sidebarwidget--item {
             .d-block;
         }
@@ -174,7 +174,7 @@ table.s-sidebarwidget--content.s-sidebarwidget__items {
 }
 
 .s-sidebarwidget--item {
-    margin: @s-sidebarwidget-content-inner-spacing 0;
+    margin: var(--s-sidebarwidget-content-inner-spacing) 0;
 
     &,
     & > :first-child {
@@ -188,12 +188,12 @@ table.s-sidebarwidget--content.s-sidebarwidget__items {
                 content: '';
                 position: absolute;
                 left: 0;
-                height: ~"calc(100% +" @s-sidebarwidget-content-inner-spacing ~")";
-                margin-top: -(@s-sidebarwidget-content-inner-spacing / 2);
-                margin-left: -@s-sidebarwidget-content-padding - 1; // the orange selection indicator overlaps with the widget border
+                height: calc(100% + var(--s-sidebarwidget-content-inner-spacing));
+                margin-top: calc(var(--s-sidebarwidget-content-inner-spacing) / 2 * -1);
+                margin-left: calc(var(--s-sidebarwidget-content-padding) * -1 - 1px); // the orange selection indicator overlaps with the widget border
                 border-left-width: 3px;
                 border-left-style: solid;
-                // border-left-color is set in _stacks-widget-dynamic.less
+                // border-left-color is set in widget-dynamic.less
             }
 
             a,
@@ -203,10 +203,11 @@ table.s-sidebarwidget--content.s-sidebarwidget__items {
         }
     }
 }
+
 .s-sidebarwidget--subnav {
     list-style-type: none;
     padding-left: 0;
-    margin-left: @su8;
+    margin-left: var(--su8);
 
     li {
         margin-top: 12px;
@@ -219,7 +220,7 @@ table.s-sidebarwidget--content.s-sidebarwidget__items {
 
         &[aria-current="true"],
         &[aria-current="page"] {
-            // this is given a bullet-arrow in the primary color in _stacks-widget-dynamic.less
+            // this is given a bullet-arrow in the primary color in widget-dynamic.less
             color: var(--black);
             font-weight: bold;
 

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,13 +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);
-@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);
@@ -248,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
@@ -257,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);
@@ -417,10 +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-xl: @bs-xl;
+    --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);
@@ -481,9 +474,6 @@
 
     // Fades
     --focus-ring: .native-fade(theme-secondary-color, 15)[];
-
-    // TODO
-    --theme-body-font-color: var(--black-800);
 }
 
 //  --  Dark mode
@@ -680,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
@@ -691,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);
     }
 }
@@ -1060,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),
@@ -1072,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,21 +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-internals.less";
+@import "base/configuration-static.less";
+@import "base/internals.less";