@stackoverflow/stacks 0.76.0 → 1.0.1

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

@@ -70,12 +70,12 @@
     align-items: center;
     justify-content: center;
     min-width: 0;
-    padding-left: @su4;
-    padding-right: @su4;
+    padding-left: var(--su4);
+    padding-right: var(--su4);
     border-style: solid;
     border-width: 1px;
-    border-radius: @br-sm;
-    font-size: @fs-caption;
+    border-radius: var(--br-sm);
+    font-size: var(--fs-caption);
     line-height: 1.846153846;
     text-decoration: none;
     vertical-align: middle;
@@ -91,26 +91,26 @@
 
     //  -- SIZES
     &.s-tag__xs {
-        font-size: @fs-fine;
+        font-size: var(--fs-fine);
         line-height: 1.4;
-        padding-left: @su2;
-        padding-right: @su2;
+        padding-left: var(--su2);
+        padding-right: var(--su2);
     }
     &.s-tag__sm {
-        font-size: @fs-caption;
+        font-size: var(--fs-caption);
         line-height: 1.5;
     }
     &.s-tag__md {
-        padding-left: @su6;
-        padding-right: @su6;
-        font-size: @fs-body2;
+        padding-left: var(--su6);
+        padding-right: var(--su6);
+        font-size: var(--fs-body2);
         line-height: 1.733333333;
     }
     &.s-tag__lg {
-        padding-left: @su6;
-        padding-right: @su6;
-        border-radius: @br-sm + 1;
-        font-size: @fs-subheading;
+        padding-left: var(--su6);
+        padding-right: var(--su6);
+        border-radius: calc(var(--br-sm) + 1px);
+        font-size: var(--fs-subheading);
         line-height: 1.684210526;
     }
 }
@@ -127,11 +127,11 @@ a.s-tag:not(.is-selected) {
     align-content: center;
     align-self: center;
     justify-content: center;
-    width: @su16;
-    height: @su16;
-    margin-left: @su4;
-    padding: (@su2 / 2);
-    border-radius: @br-sm;
+    width: var(--su-static16);
+    height: var(--su-static16);
+    margin-left: var(--su4);
+    padding: var(--su1);
+    border-radius: var(--br-sm);
     cursor: pointer;
 
     &:hover {
@@ -145,9 +145,9 @@ a.s-tag:not(.is-selected) {
 .s-tag--sponsor {
     display: inline-flex;
     align-self: center;
-    margin: -(@su2 + 1) @su4 -(@su2) -(@su2);
-    max-width: 18px;
-    border-radius: @br-sm - 1;
+    margin: calc(var(--su1) * -1) var(--su4) calc(var(--su2) * -1) calc(var(--su2) * -1);
+    max-width: calc(var(--su-static16) + var(--su-static2));
+    border-radius: calc(var(--br-sm) - 1px);
 
     .svg-icon,
     img {
@@ -212,7 +212,7 @@ a.s-tag__muted:not(.is-selected) {
         display: block;
         width: 14px;
         height: 14px;
-        margin-right: @su2;
+        margin-right: var(--su2);
         background-color: currentColor;
         position: absolute;
         left: 4px;

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

@@ -69,11 +69,11 @@
         }
 
         &:focus + .s-toggle-switch--indicator {
-            box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
+            box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
         }
 
         &:checked:focus + .s-toggle-switch--indicator {
-            box-shadow: 0 0 0 @su4 var(--focus-ring-success);
+            box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-success);
         }
     }
 
@@ -97,7 +97,7 @@
             padding: 0.5em 0.7em;
             border-radius: 1000px;
             color: var(--black-500);
-            font-size: @fs-body1;
+            font-size: var(--fs-body1);
             font-weight: 400;
             line-height: 1;
             text-align: center;
@@ -133,11 +133,11 @@
             }
 
             &:focus + label.s-toggle-switch--label-off {
-                box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
+                box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
             }
 
             &:focus + label:not(.s-toggle-switch--label-off) {
-                box-shadow: 0 0 0 @su4 var(--focus-ring-success);
+                box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-success);
             }
         }
     }

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,7 +207,7 @@
     --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);
@@ -260,7 +260,7 @@
         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;
@@ -277,6 +277,7 @@
 
             .s-activity-indicator {
                 top: calc(50% - 18px);
+                box-shadow: 0 0 0 var(--su-static2) var(--theme-topbar-item-background-hover);
             }
         }
 
@@ -288,15 +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);
         }
     }
 
     // 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);
     }
 }
 
@@ -307,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));
@@ -334,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
@@ -378,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
         }
     }
 
@@ -394,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);
         }
     }
 
@@ -410,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 {
     &,