@stackoverflow/stacks 0.76.0 → 1.0.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);
     }
 }

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

@@ -29,7 +29,7 @@
     }
 
     code {
-        font-size: @fs-body1;
+        font-size: var(--fs-body1);
         font-family: var(--ff-mono);
     }
 
@@ -102,31 +102,31 @@
     }
 
     h1 {
-        font-size: @fs-headline1;
+        font-size: var(--fs-headline1);
         margin-bottom: 0.6em;
     }
 
     h2 {
-        font-size: @fs-title;
+        font-size: var(--fs-title);
         margin-bottom: 0.7em;
     }
 
     h3 {
-        font-size: @fs-subheading;
+        font-size: var(--fs-subheading);
         margin-bottom: 0.74em;
     }
 
     h4 {
-        font-size: @fs-body3;
+        font-size: var(--fs-body3);
         margin-bottom: 1em;
     }
 
     h5 {
-        font-size: @fs-body2;
+        font-size: var(--fs-body2);
     }
 
     h6 {
-        font-size: @fs-body1;
+        font-size: var(--fs-body1);
     }
 
     img,
@@ -322,8 +322,8 @@
             top: 0;
             bottom: 0;
             left: 0;
-            width: @su4;
-            border-radius: @su8;
+            width: var(--su4);
+            border-radius: var(--su-static8);
             background: var(--black-150);
 
             .highcontrast-mode({
@@ -352,10 +352,10 @@
     // ----------------------------------------------------------------------------
     .spoiler {
         background: var(--black-050);
-        border-radius: @br-md;
+        border-radius: var(--br-md);
         color: var(--black-800);
         cursor: pointer;
-        min-height: @su48; // TODO: Let's find a solution that doesn't have a magic number
+        min-height: var(--su-static48); // TODO: Let's find a solution that doesn't have a magic number
 
         > * {
             visibility: hidden; // hidden elements don't respond to mouse events, but still retain their space
@@ -381,7 +381,7 @@
             background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' fill='rgb(132, 141, 149)' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 17A8 8 0 119 1a8 8 0 010 16zM8 4v6h2V4H8zm0 8v2h2v-2H8z'%3E%3C/path%3E%3C/svg%3E");
             background-repeat: no-repeat;
             background-position: center right;
-            font-size: @fs-body1;
+            font-size: var(--fs-body1);
             color: var(--black-500);
             padding-right: 22px;
             position: absolute;
@@ -404,13 +404,13 @@
         margin: 0 0.1em;
         padding: 0.1em 0.6em;
         font-family: var(--ff-sans);
-        font-size: @fs-fine;
+        font-size: var(--fs-fine);
         line-height: var(--s-prose-line-height);
         color: var(--black-800);
         text-shadow: 0 1px 0 var(--white);
         background-color: var(--black-075);
         border: 1px solid var(--black-300);
-        border-radius: @br-sm;
+        border-radius: var(--br-sm);
         box-shadow: 0 1px 1px hsla(210, 8%, 5%, 0.15), inset 0 1px 0 0 @white;
         overflow-wrap: break-word;
 
@@ -425,10 +425,10 @@
     //  $ CODE STYLES
     // ----------------------------------------------------------------------------
     *:not(.s-code-block) > code {
-        padding: @su2 @su4;
+        padding: var(--su2) var(--su4);
         color: var(--black-800);
         background-color: var(--black-075);
-        border-radius: @br-sm;
+        border-radius: var(--br-sm);
     }
 
     // When contained within a link, we want the code to be link-colored
@@ -442,15 +442,15 @@
     }
 
     pre:not(.s-code-block) {
-        padding: @su12;
+        padding: var(--su12);
         color: var(--highlight-color);
         width: auto;
         max-height: 600px;
         overflow: auto;
-        font-size: @fs-body1;
-        line-height: @lh-md;
+        font-size: var(--fs-body1);
+        line-height: var(--lh-md);
         background-color: var(--highlight-bg);
-        border-radius: @br-md;
+        border-radius: var(--br-md);
 
         // Reset the code element when contained within a <pre>
         code {
@@ -463,41 +463,41 @@
     }
 
     &.s-prose__xs {
-        font-size: @fs-caption;
-        line-height: @lh-sm;
+        font-size: var(--fs-caption);
+        line-height: var(--lh-sm);
     }
 
     &.s-prose__sm {
-        font-size: @fs-body1;
-        line-height: @lh-md;
+        font-size: var(--fs-body1);
+        line-height: var(--lh-md);
     }
 
     &.s-prose__md {
-        font-size: @fs-body3;
-        line-height: @lh-xl;
+        font-size: var(--fs-body3);
+        line-height: var(--lh-xl);
     }
 
     &.s-prose__xs,
     &.s-prose__sm,
     &.s-prose__md {
         h1 {
-            font-size: @fs-headline1-relative;
+            font-size: var(--fs-headline1-relative);
         }
 
         h2 {
-            font-size: @fs-title-relative;
+            font-size: var(--fs-title-relative);
         }
 
         h3 {
-            font-size: @fs-subheading-relative;
+            font-size: var(--fs-subheading-relative);
         }
 
         h4 {
-            font-size: @fs-body3-relative;
+            font-size: var(--fs-body3-relative);
         }
 
         h5 {
-            font-size: @fs-body2-relative;
+            font-size: var(--fs-body2-relative);
         }
     }
 }

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

@@ -15,8 +15,8 @@
 
 .s-spinner {
     position: relative;
-    width: @su24;
-    height: @su24;
+    width: var(--su-static24);
+    height: var(--su-static24);
     text-align: left; // When within a parent that has text-align: center, the spinner's entire container spins, not just the spinner. Let's force text-align left so things spin internally.
 
     &:before,
@@ -26,7 +26,7 @@
         width: 100%;
         height: 100%;
         border: 3px solid currentColor;
-        border-radius: @br-circle;
+        border-radius: var(--br-circle);
     }
     &:before {
         opacity: 0.25;
@@ -40,8 +40,8 @@
     }
 
     &.s-spinner__xs {
-        width: @su12;
-        height: @su12;
+        width: var(--su-static12);
+        height: var(--su-static12);
         &:before,
         &:after {
             border-width: 1px;
@@ -49,29 +49,29 @@
     }
 
     &.s-spinner__sm {
-        width: @su16;
-        height: @su16;
+        width: var(--su-static16);
+        height: var(--su-static16);
         &:before,
         &:after {
-            border-width: @su2;
+            border-width: var(--su-static2);
         }
     }
 
     &.s-spinner__md {
-        width: @su32;
-        height: @su32;
+        width: var(--su-static32);
+        height: var(--su-static32);
         &:before,
         &:after {
-            border-width: @su4;
+            border-width: var(--su-static4);
         }
     }
 
     &.s-spinner__lg {
-        width: @su48;
-        height: @su48;
+        width: var(--su-static48);
+        height: var(--su-static48);
         &:before,
         &:after {
-            border-width: @su6;
+            border-width: var(--su-static6);
         }
     }
 

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

@@ -40,11 +40,11 @@
     max-width: 100%;
     border-collapse: collapse;
     border-spacing: 0;
-    font-size: @fs-body1;
+    font-size: var(--fs-body1);
 
     th,
     td {
-        padding: @su8;
+        padding: var(--su8);
         border-top: 1px solid var(--bc-medium);
         border-left: 1px solid var(--bc-medium);
         border-right: 1px solid var(--bc-medium);
@@ -53,7 +53,7 @@
         text-align: left;
 
         &.s-table--bulk {
-            width: @su32 - @su2;
+            width: calc(var(--su32) - var(--su2));
         }
 
         .s-checkbox {
@@ -71,7 +71,7 @@
         vertical-align: bottom;
         white-space: nowrap;
         background-color: var(--black-025);
-        line-height: @lh-sm;
+        line-height: var(--lh-sm);
     }
 
     //  When in a table body, don't make it bold.
@@ -87,7 +87,7 @@
 
     //  If two table bodies are next to each other, visually separate them
     tbody + tbody {
-        border-top: @su2 solid var(--bc-medium);
+        border-top: var(--su-static2) solid var(--bc-medium);
     }
 }
 
@@ -181,14 +181,14 @@
     &.s-table__sm {
         th,
         td {
-            padding: @su4;
+            padding: var(--su4);
         }
     }
     //  --  LARGE
     &.s-table__lg {
         th,
         td {
-            padding: @su12;
+            padding: var(--su12);
         }
     }
 
@@ -215,7 +215,7 @@
         //  to achieve the same effect a 2px gray border achieves.
         tbody + tbody {
             border-color: transparent;
-            border-width: @su12;
+            border-width: var(--su-static12);
         }
     }
 
@@ -268,8 +268,8 @@
     .s-table--totals {
         th,
         td {
-            padding-top: @su12;
-            font-size: @fs-subheading;
+            padding-top: var(--su12);
+            font-size: var(--fs-subheading);
             font-weight: bold;
         }
     }