@stackoverflow/stacks 0.74.0 → 1.0.0-beta.0

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

@@ -13,7 +13,7 @@
     min-width: auto;
     box-shadow: var(--bs-sm);
     width: 100%;
-    z-index: @zi-navigation-fixed;
+    z-index: var(--zi-navigation-fixed);
     background-color: var(--theme-topbar-background-color);
     height: var(--theme-topbar-height);
     display: flex;
@@ -45,7 +45,7 @@
 
     // Wraps the content so the topbar stretches 100% w/ content at some value below that
     .s-topbar--container {
-        width: @s-full; // wmx12; Consumers should use atomic classes to override this
+        width: var(--s-full); // wmx12; Consumers should use atomic classes to override this
         max-width: 100%;
         height: 100%;
         display: flex;
@@ -54,7 +54,7 @@
     }
 
     .s-topbar--logo {
-        padding: 0 @su8;
+        padding: 0 var(--su8);
         height: 100%;
         display: flex;
         align-items: center;
@@ -72,7 +72,7 @@
     .s-topbar--menu-btn {
         display: flex;
         height: 100%;
-        padding: 0 @su16;
+        padding: 0 var(--su16);
         flex-shrink: 0;
         align-items: center;
         justify-content: center;
@@ -83,8 +83,8 @@
             &,
             &:before,
             &:after {
-                width: @su16;
-                height: @su2;
+                width: var(--su-static16);
+                height: var(--su-static2);
                 background-color: var(--theme-topbar-item-color);
                 position: relative;
             }
@@ -156,7 +156,7 @@
     --theme-topbar-search-placeholder: @black-200;
     --theme-topbar-search-border: @black-200;
     --theme-topbar-search-border-focus: @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);
 
     // Search switcher
     --theme-topbar-select-color: @black-700;
@@ -207,14 +207,14 @@
     --theme-topbar-search-placeholder: lighten(@topbar-actual-background, 60% + @topbar-search-lightness-increase);
     --theme-topbar-search-border: lighten(@topbar-actual-background, 20% + @topbar-search-lightness-increase);
     --theme-topbar-search-border-focus: lighten(@topbar-actual-background, 45% + @topbar-search-lightness-increase);
-    --theme-topbar-search-shadow-focus: 0 0 0 @su4 fade(@white, 30%);
+    --theme-topbar-search-shadow-focus: 0 0 0 var(--su-static4) fade(@white, 30%);
 
     // Search switcher
     --theme-topbar-select-color: lighten(@topbar-actual-background, 60% + @topbar-search-lightness-increase);
     --theme-topbar-select-background: lighten(@topbar-actual-background, 10% + @topbar-search-lightness-increase);
 
     // Items
-    --theme-topbar-item-color: @black-025;
+    --theme-topbar-item-color: @black-100;
     --theme-topbar-item-color-hover: @white;
     --theme-topbar-item-background-hover: @black-700;
     --theme-topbar-item-color-current: @white;
@@ -243,8 +243,7 @@
 //  ===========================================================================
 //  $   CONTENT & CTAS
 //  ---------------------------------------------------------------------------
-.s-topbar .s-topbar--content,
-.s-topbar .s-topbar--ctas {
+.s-topbar .s-topbar--content {
     display: flex;
     height: 100%;
     .list-reset;
@@ -252,18 +251,16 @@
     & > li {
         display: inline-flex;
     }
-}
 
-.s-topbar .s-topbar--content {
     overflow-x: auto; // Allow this content to scroll if it gets too long
     @scrollbar-styles(); // Style the scrollbars
     margin-left: auto; // Push this section as far to the right as possible
 
-    .s-topbar--item {
+    .s-topbar--item:not(.s-topbar--item__unset) {
         color: var(--theme-topbar-item-color);
         display: inline-flex;
         align-items: center;
-        padding: 0 (@su12 - @su2);
+        padding: 0 calc(var(--su12) - var(--su2));
         text-decoration: none;
         white-space: nowrap;
         position: relative;
@@ -280,6 +277,7 @@
 
             .s-activity-indicator {
                 top: calc(50% - 18px);
+                box-shadow: 0 0 0 var(--su-static2) var(--theme-topbar-item-background-hover);
             }
         }
 
@@ -291,27 +289,16 @@
             position: absolute;
             top: calc(50% - 14px);
             right: 2px;
-            transition: top @te-smooth 0.15s;
+            transition: top var(--te-smooth) 0.15s;
+            box-shadow: 0 0 0 var(--su-static2)  var(--theme-topbar-background-color);
         }
     }
-}
-
-// CTAs: Sign in, Sign up, etc. on the far right
-.s-topbar .s-topbar--ctas {
-    padding-left: @su4;
-    padding-right: @su8;
-    overflow-x: auto; // Allow this content to scroll if it gets too long
-    @scrollbar-styles(); // Style the scrollbars
-    margin-left: auto; // Push this section as far to the right as possible
-
-    li + li {
-        margin-left: @su4;
-    }
 
-    .s-topbar--item {
+    // provide only layout styling for unset items
+    .s-topbar--item__unset {
         align-self: center;
-        padding-top: @su8;
-        padding-bottom: @su8;
+        padding-top: var(--su8);
+        padding-bottom: var(--su8);
     }
 }
 
@@ -322,10 +309,10 @@
     &:extend(.s-badge);
 
     text-transform: uppercase;
-    font-size: @fs-fine;
+    font-size: var(--fs-fine);
     font-weight: 700;
-    margin-left: @su8;
-    margin-right: @su8;
+    margin-left: var(--su8);
+    margin-right: var(--su8);
     flex-shrink: 0;
 
     .badge-styles(transparent, transparent, var(--theme-topbar-item-color));
@@ -349,8 +336,8 @@
 //  $   SEARCHBAR
 //  ---------------------------------------------------------------------------
 .s-topbar .s-topbar--searchbar {
-    @inputLineHeights: @lh-sm; // Ensure the line heights between the elements match up
-    padding: 0 @su8;
+    @inputLineHeights: var(--lh-sm); // Ensure the line heights between the elements match up
+    padding: 0 var(--su8);
     display: flex;
     align-items: center;
     flex-shrink: 10000; // Force the searchbar to shrink as much as possible if there's no extra space
@@ -393,7 +380,7 @@
 
         &:before,
         &:after {
-            z-index: @zi-active; // Make sure our focus ring is above the search input
+            z-index: var(--zi-active); // Make sure our focus ring is above the search input
         }
     }
 
@@ -409,7 +396,7 @@
         &:focus {
             border-color: var(--theme-topbar-search-border-focus);
             box-shadow: var(--theme-topbar-search-shadow-focus);
-            z-index: @zi-selected;
+            z-index: var(--zi-selected);
         }
     }
 
@@ -425,7 +412,7 @@
         right: 0;
         top: 100%;
         max-width: 100%;
-        padding: @su8 @su12;
+        padding: var(--su8) var(--su12);
         background: var(--theme-topbar-item-background-hover);
 
         &.s-topbar--searchbar__open {

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

@@ -9,11 +9,11 @@
 .s-uploader {
     align-items: center;
     background-color: var(--black-025);
-    border-radius: @br-lg;
+    border-radius: var(--br-lg);
     display: flex;
-    min-height: @su128;
+    min-height: var(--su-static128);
     justify-content: center;
-    padding: @su8 @su16;
+    padding: var(--su8) var(--su16);
     position: relative;
     text-align: center;
 
@@ -30,7 +30,7 @@
         background-color: var(--black-150);
         -webkit-mask-image: var(--s-uploader-background-image);
         mask-image: var(--s-uploader-background-image);
-        border-radius: @br-lg;
+        border-radius: var(--br-lg);
 
         .highcontrast-mode({
             background-color: var(--black-400);
@@ -117,7 +117,7 @@
 
         &:focus:focus-visible + .s-uploader--container {
             background-color: var(--black-050);
-            box-shadow: 0 0 0 @su4 var(--focus-ring);
+            box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
         }
     }
 
@@ -128,9 +128,9 @@
 
     .s-uploader--preview-thumbnail {
         background-color: var(--white);
-        border-radius: @br-sm;
+        border-radius: var(--br-sm);
         box-shadow: var(--bs-md);
-        max-height: @su128;
+        max-height: var(--su-static128);
         max-width: 100%;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -144,7 +144,7 @@
         }
 
         &:not(img) {
-            padding: @su16;
+            padding: var(--su16);
         }
     }
 
@@ -155,19 +155,19 @@
         &.has-multiple {
             display: block;
             height: auto;
-            padding: @su8 @su2;
+            padding: var(--su8) var(--su2);
             width: 100%;
 
             .s-uploader--preview {
                 align-items: center;
                 display: flex;
-                padding: @su6 0;
+                padding: var(--su6) 0;
                 width: 100%;
 
                 &:after {
                     content: attr(data-filename);
                     display: block;
-                    margin-left: @su12;
+                    margin-left: var(--su12);
                     max-width: 100%;
                     overflow: hidden;
                     text-overflow: ellipsis;
@@ -177,9 +177,9 @@
 
             .s-uploader--preview-thumbnail {
                 color: transparent;
-                height: @su32;
+                height: var(--su-static32);
                 flex-shrink: 0;
-                width: @su32;
+                width: var(--su-static32);
 
                 &:is(img) {
                     object-fit: cover;
@@ -196,15 +196,15 @@
 
     .s-uploader--previews-heading {
         color: var(--black-900);
-        font-size: @fs-body2;
+        font-size: var(--fs-body2);
         font-weight: 600;
-        padding-bottom: @su8;
+        padding-bottom: var(--su8);
     }
 
     .s-uploader--reset {
         position: absolute;
-        right: @su8;
-        top: @su8;
-        z-index: @zi-active;
+        right: var(--su8);
+        top: var(--su8);
+        z-index: var(--zi-active);
     }
 }

package/lib/css/components/{_stacks-user-cards.less → user-cards.less}

@@ -13,11 +13,11 @@
 .s-user-card {
     display: grid;
     grid-template-columns: auto 1fr;
-    column-gap: @su8;
-    row-gap: @su4;
+    column-gap: var(--su8);
+    row-gap: var(--su4);
     align-items: center;
     line-height: 1;
-    padding: @su8;
+    padding: var(--su8);
 
     //  ===========================================================================
     //  $   STYLE VARIATIONS
@@ -27,7 +27,7 @@
     //  ---------------------------------------------------------------------------
     &.s-user-card__highlighted {
         background-color: var(--theme-secondary-050);
-        border-radius: @br-md;
+        border-radius: var(--br-md);
 
         .s-user-card--type {
             color: var(--black-700);
@@ -40,7 +40,7 @@
         align-items: start;
 
         .s-user-card--link {
-            font-size: @fs-body2;
+            font-size: var(--fs-body2);
         }
     }
 
@@ -55,7 +55,7 @@
     &.s-user-card__small {
         display: flex;
         align-items: center;
-        gap: @su4;
+        gap: var(--su4);
         padding: 0;
 
         .s-user-card--info {
@@ -69,7 +69,7 @@
     &.s-user-card__minimal {
         display: flex;
         align-items: center;
-        gap: @su4;
+        gap: var(--su4);
         padding: 0;
 
         .s-user-card--time {
@@ -92,7 +92,7 @@
 
     .s-user-card--type {
         grid-column: ~"1 / 3";
-        font-size: @fs-caption;
+        font-size: var(--fs-caption);
         color: var(--theme-primary-400);
 
         a {
@@ -108,7 +108,7 @@
     grid-column: ~"1 / 3";
     grid-row: ~"1 / 2";
     color: var(--black-500);
-    font-size: @fs-caption;
+    font-size: var(--fs-caption);
 }
 
 //  $   USER INFO CONTAINER
@@ -118,7 +118,7 @@
 .s-user-card--info {
     display: flex;
     flex-direction: column;
-    gap: @su4;
+    gap: var(--su4);
 }
 
 //  $   USER LINK
@@ -126,7 +126,7 @@
 //  ---------------------------------------------------------------------------
 .s-user-card--link {
     min-width: 0; // Allow things to wrap
-    font-size: @fs-caption;
+    font-size: var(--fs-caption);
     align-items: center;
     flex-wrap: wrap;
     overflow-wrap: break-word;
@@ -139,10 +139,10 @@
     .list-reset;
     display: flex;
     align-items: center;
-    gap: @su6;
+    gap: var(--su6);
 
     li {
-        font-size: @fs-caption;
+        font-size: var(--fs-caption);
     }
 }
 
@@ -155,7 +155,7 @@
 //  ---------------------------------------------------------------------------
 .s-user-card--location,
 .s-user-card--role {
-    font-size: @fs-caption;
+    font-size: var(--fs-caption);
     color: var(--black-500);
 }
 

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

@@ -9,7 +9,7 @@
 //  This file only sets the colors for the "current color" highlight when the
 //  widget is used for navigation. This is the only part of the widget that is
 //  dynamically configurable; the rest can be served in the static part of Stacks
-//  and is in _stacks-widget-static.less.
+//  and is in widget-static.less.
 
 .s-sidebarwidget--item {
     &,

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;