@stackoverflow/stacks 0.75.0 → 1.0.0

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

@@ -16,7 +16,7 @@
     justify-content: space-between;
     align-items: flex-end;
     width: 100%;
-    padding-bottom: @su16;
+    padding-bottom: var(--su16);
     border-bottom: 1px solid var(--bc-medium);
 
     #stacks-internals #screen-md({
@@ -27,34 +27,34 @@
     .s-page-title--header {
         margin: 0;
         margin-bottom: 0;
-        font-size: @fs-headline1;
+        font-size: var(--fs-headline1);
         color: var(--fc-dark);
-        line-height: @lh-sm;
+        line-height: var(--lh-sm);
         font-weight: normal;
     }
 
     .s-page-title--description {
         color: var(--fc-light);
-        margin-top: @su4;
+        margin-top: var(--su4);
         margin-bottom: 0;
-        font-size: @fs-body2;
+        font-size: var(--fs-body2);
     }
 
     .s-page-title--actions {
-        margin-left: @su8;
+        margin-left: var(--su8);
         flex-shrink: 0;
 
         #stacks-internals #screen-md({
-            margin-top: @su8;
+            margin-top: var(--su8);
             margin-left: 0;
         });
     }
 
     .s-breadcrumbs {
-        margin-bottom: @su8;
+        margin-bottom: var(--su8);
 
         #stacks-internals #screen-sm({
-            margin-bottom: @su2;
+            margin-bottom: var(--su2);
         });
     }
 }

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

@@ -15,19 +15,19 @@
 .s-pagination {
     display: flex;
     flex-wrap: wrap;
-    margin-left: -@su2;
-    margin-right: -@su2;
+    margin-left: calc(var(--su2) * -1);
+    margin-right: calc(var(--su2) * -1);
 }
 
 .s-pagination--item {
-    margin-left: @su2;
-    margin-right: @su2;
-    padding: 0 @su8;
+    margin-left: var(--su2);
+    margin-right: var(--su2);
+    padding: 0 var(--su8);
     background-color: transparent;
-    border-radius: @br-sm;
+    border-radius: var(--br-sm);
     border: 1px solid var(--bc-medium);
-    font-size: @fs-body1;
-    line-height: @lh-xl;
+    font-size: var(--fs-body1);
+    line-height: var(--lh-xl);
     color: var(--fc-medium);
 
     .highcontrast-mode({ text-decoration: none; });

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

@@ -19,14 +19,14 @@
     display: none;
     position: absolute;
     max-width: 24rem;
-    padding: @su12;
-    z-index: @zi-popovers;
-    border-radius: @br-md;
+    padding: var(--su12);
+    z-index: var(--zi-popovers);
+    border-radius: var(--br-md);
     border: 1px solid var(--bc-medium);
     background-color: var(--white);
     box-shadow: var(--bs-md);
     color: var(--fc-dark);
-    font-size: @fs-body1;
+    font-size: var(--fs-body1);
     min-width: 12rem;
     width: 100%;
 
@@ -53,7 +53,7 @@
     .s-popover--arrow__bc,
     .s-popover--arrow__bl,
     .s-popover--arrow__br {
-        bottom: -@su6;
+        bottom: calc(var(--su6) * -1);
 
         &:after {
             bottom: 1px;
@@ -69,7 +69,7 @@
     .s-popover--arrow__tc,
     .s-popover--arrow__tl,
     .s-popover--arrow__tr {
-        top: -@su6;
+        top: calc(var(--su6) * -1);
 
         &:after {
             top: 1px;
@@ -85,7 +85,7 @@
     .s-popover--arrow__rc,
     .s-popover--arrow__rt,
     .s-popover--arrow__rb {
-        right: -@su6;
+        right: calc(var(--su6) * -1);
 
         &:after {
             right: 1px;
@@ -101,7 +101,7 @@
     .s-popover--arrow__lc,
     .s-popover--arrow__lt,
     .s-popover--arrow__lb {
-        left: -@su6;
+        left: calc(var(--su6) * -1);
 
         &:after {
             left: 1px;
@@ -115,22 +115,22 @@
 
     .s-popover--arrow__tc,
     .s-popover--arrow__bc {
-        left: calc(50% - @su6);
+        left: calc(50% - var(--su6));
     }
 
     .s-popover--arrow__lc,
     .s-popover--arrow__rc {
-        top: calc(50% - @su6);
+        top: calc(50% - var(--su6));
     }
 
     .s-popover--arrow__tr,
     .s-popover--arrow__br {
-        right: @su12;
+        right: var(--su12);
     }
 
     .s-popover--arrow__rb,
     .s-popover--arrow__lb {
-        bottom: @su12;
+        bottom: var(--su12);
     }
 }
 
@@ -140,9 +140,9 @@
 
 .s-popover--close {
     float: right; // Use floats for title wrapping
-    top: -@su8; // Compensate for s-popover's padding
-    right: -@su8; // Compensate for s-popover's padding
-    padding: @su8 !important;
+    top: calc(var(--su8) * -1); // Compensate for s-popover's padding
+    right: calc(var(--su8) * -1); // Compensate for s-popover's padding
+    padding: var(--su8) !important;
 }
 
 //  ============================================================================
@@ -169,8 +169,8 @@
 .s-popover--arrow:after {
     position: absolute;
     display: block;
-    width: @su12;
-    height: @su12;
+    width: var(--su12);
+    height: var(--su12);
     z-index: -1;
 }
 

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

@@ -11,7 +11,7 @@
     position: relative;
     display: flex;
     border-bottom: 1px solid var(--bc-light);
-    padding: @su16;
+    padding: var(--su16);
 
     &:last-child {
         border-bottom-width: 0;
@@ -39,21 +39,21 @@
         padding-left: 0; // Since stats have padding, we don't need it on the parent
 
         #stacks-internals #screen-md({
-            padding-left: @su16;
+            padding-left: var(--su16);
         });
 
         .s-post-summary--stats {
             width: auto;
             flex-direction: row;
             align-items: center;
-            gap: @su2;
+            gap: var(--su2);
 
             .s-post-summary--stats-item {
-                min-width: @su64;
-                height: @su48;
+                min-width: var(--su64);
+                height: var(--su48);
                 flex-direction: column;
                 gap: 0;
-                font-size: @fs-caption;
+                font-size: var(--fs-caption);
 
                 &.s-post-summary--stats-item__emphasized {
                     color: inherit;
@@ -65,7 +65,7 @@
 
                 .s-post-summary--stats-item-number {
                     font-weight: normal;
-                    font-size: @fs-body3;
+                    font-size: var(--fs-body3);
                 }
 
                 &.is-deleted,
@@ -82,7 +82,7 @@
             #stacks-internals #screen-md({
                 flex-direction: row;
                 align-items: center;
-                gap: @su8;
+                gap: var(--su8);
 
                 .s-post-summary--stats-item {
                     min-width: auto;
@@ -120,9 +120,9 @@
 //  [1] To override .s-btn class attributes
 .s-post-summary--content-menu-button {
     position: absolute !important; // [1]
-    top: @su8;
-    right: @su8;
-    padding: @su8 !important; // [1]
+    top: var(--su8);
+    right: var(--su8);
+    padding: var(--su8) !important; // [1]
 
     .svg-icon {
         margin: 0 !important;
@@ -130,16 +130,16 @@
 }
 
 .s-post-summary--stats {
-    gap: @su6;
-    margin-right: @su16;
-    margin-bottom: @su4;
-    width: @su96 + @su12;
+    gap: var(--su6);
+    margin-right: var(--su16);
+    margin-bottom: var(--su4);
+    width: calc(var(--su96) + var(--su12));
     display: flex;
     flex-direction: column;
     flex-shrink: 0;
     flex-wrap: wrap;
     align-items: flex-end;
-    font-size: @fs-body1;
+    font-size: var(--fs-body1);
     color: var(--fc-light);
 
     .s-post-summary--stats-item {
@@ -167,8 +167,8 @@
         &.is-closed,
         &.is-archived,
         &.is-pinned {
-            border-radius: @br-sm;
-            padding: @su2 @su4;
+            border-radius: var(--br-sm);
+            padding: var(--su2) var(--su4);
         }
 
         &.has-answers {
@@ -251,11 +251,11 @@
 
     .s-post-summary--content-title {
         display: block;
-        font-size: @fs-body3;
+        font-size: var(--fs-body3);
         margin-top: -0.15rem; // Optical alignment to compensate for title's containing block
         margin-bottom: 0.3846rem;
-        padding-right: @su24;
-        line-height: @lh-md;
+        padding-right: var(--su24);
+        line-height: var(--lh-md);
         font-weight: normal;
         .break-word;
 
@@ -288,17 +288,17 @@
 
     .s-post-summary--content-type {
         color: var(--fc-medium);
-        margin-bottom: @su4;
+        margin-bottom: var(--su4);
 
         .svg-icon {
-            margin-left: -@su2;
+            margin-left: calc(var(--su2) * -1);
             color: var(--fc-light);
         }
     }
 
     .s-post-summary--content-excerpt {
-        margin-top: -@su2;
-        margin-bottom: @su8;
+        margin-top: calc(var(--su2) * -1);
+        margin-bottom: var(--su8);
         font-family: var(--theme-post-body-font-family);
         color: var(--fc-medium);
         .v-truncate2;
@@ -323,13 +323,13 @@
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
-    column-gap: @su6;
-    row-gap: @su8;
+    column-gap: var(--su6);
+    row-gap: var(--su8);
 
     .s-post-summary--meta-tags {
         display: flex;
         flex-wrap: wrap;
-        gap: @su4;
+        gap: var(--su4);
     }
 
     .s-user-card {
@@ -341,11 +341,11 @@
 
 .s-post-summary--answer {
     position: relative;
-    margin: @su16 1em 0 1em;
-    padding: 0.5em 0 0.5em calc(1em + @su4);
+    margin: var(--su16) 1em 0 1em;
+    padding: 0.5em 0 0.5em calc(1em + var(--su4));
 
     + .s-post-summary--answer {
-        margin-top: @su16;
+        margin-top: var(--su16);
     }
 
     &:before {
@@ -355,8 +355,8 @@
         top: 0;
         bottom: 0;
         left: 0;
-        width: @su4;
-        border-radius: @su8;
+        width: var(--su4);
+        border-radius: var(--su8);
         background: var(--black-150);
 
         .highcontrast-mode({
@@ -368,12 +368,12 @@
         width: auto;
         flex-direction: row;
         align-items: center;
-        margin-bottom: @su4;
+        margin-bottom: var(--su4);
     }
 
     .s-post-summary--answer-excerpt {
         color: var(--black-600);
-        margin-bottom: @su8;
+        margin-bottom: var(--su8);
         .v-truncate4;
     }
 }

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

@@ -18,9 +18,9 @@
 .s-progress,
 .s-progress--bar {
     position: relative;
-    min-height: @su4;
-    min-width: @su6;
-    border-radius: @br-sm;
+    min-height: var(--su-static4);
+    min-width: var(--su-static6);
+    border-radius: var(--br-sm);
 }
 
 //  $$   PROGRESS WRAPPER
@@ -44,12 +44,12 @@
     position: absolute;
     width: 100%;
     height: 100%;
-    border-radius: @br-md;
+    border-radius: var(--br-md);
     border: 1px solid transparent;
-    font-size: @fs-caption;
-    line-height: @lh-xs;
+    font-size: var(--fs-caption);
+    line-height: var(--lh-xs);
     color: var(--fc-dark);
-    z-index: @zi-base + 2;
+    z-index: calc(var(--zi-base) + 2);
 }
 
 //  ===========================================================================
@@ -74,7 +74,7 @@
     .s-progress--label {
         border-color: var(--green-400);
         display: flex;
-        gap: @su4;
+        gap: var(--su4);
         align-items: center;
         justify-content: center;
     }
@@ -88,7 +88,7 @@
 .s-progress__badge,
 .s-progress__badge .s-progress--bar {
     min-height: 2em;
-    border-radius: @br-md;
+    border-radius: var(--br-md);
 }
 
 .s-progress__privilege,
@@ -99,7 +99,7 @@
 .s-progress__badge {
     .s-progress--label {
         display: flex;
-        gap: @su4;
+        gap: var(--su4);
         align-items: center;
         padding-left: 1em;
         padding-right: 1em;
@@ -204,13 +204,13 @@
         display: block;
         width: auto;
         height: auto;
-        font-size: @fs-body1;
+        font-size: var(--fs-body1);
         border: 0;
         border-radius: 0;
-        padding: @su12 @su6 0 @su6;
+        padding: var(--su12) var(--su6) 0 var(--su6);
         text-align: center;
         color: var(--black-300);
-        z-index: @zi-base;
+        z-index: var(--zi-base);
     }
 
     .s-progress--stop {
@@ -220,9 +220,9 @@
         justify-content: center;
         background: var(--black-300);
         border-radius: 100%;
-        width: @su24;
-        height: @su24;
-        z-index: @zi-selected;
+        width: var(--su-static24);
+        height: var(--su-static24);
+        z-index: var(--zi-selected);
         color: @white;
 
         .highcontrast-mode({
@@ -232,10 +232,10 @@
 
     .s-progress--bar {
         position: absolute;
-        top: 9px;
-        height: @su6;
+        top: calc(var(--su-static8) + var(--su-static1));
+        height: var(--su-static6);
         background: var(--black-300);
-        z-index: @zi-base;
+        z-index: var(--zi-base);
         border-radius: 0;
 
         &.s-progress--bar__left {
@@ -256,7 +256,7 @@
 
         .s-progress--stop {
             background: var(--theme-secondary-400);
-            box-shadow: 0 0 0 @su6 var(--focus-ring);
+            box-shadow: 0 0 0 var(--su-static6) var(--focus-ring);
         }
 
         .s-progress--label {
@@ -282,18 +282,17 @@
 .s-progress__circular {
     --s-progress-value: 0;
     @s-progress-circle-circumference: (2 * pi() * 14); // 2πr, r = 14.
-    @s-progress-stroke-width: 4;
 
     background: none;
-    width: @su32;
-    height: @su32;
+    width: var(--su-static32);
+    height: var(--su-static32);
 
     .s-progress-bar {
         // Make everything originate from the top of the circle
         transform: rotate(270deg);
 
         circle {
-            stroke-width: @s-progress-stroke-width;
+            stroke-width: var(--su-static4);
             fill: none;
             stroke-linecap: round;
         }
@@ -315,17 +314,17 @@
     }
 
     &.s-progress__sm {
-        width: 24px;
-        height: 24px;
+        width: var(--su-static24);
+        height: var(--su-static24);
     }
 
     &.s-progress__md {
-        width: 48px;
-        height: 48px;
+        width: var(--su-static48);
+        height: var(--su-static48);
     }
 
     &.s-progress__lg {
-        width: 64px;
-        height: 64px;
+        width: var(--su-static64);
+        height: var(--su-static64);
     }
 }