@stackoverflow/stacks 0.74.0 → 1.0.0-beta.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;
@@ -34,14 +34,95 @@
             width: 100%;
         }
     }
+
+    &.s-post-summary__legacy {
+        padding-left: 0; // Since stats have padding, we don't need it on the parent
+
+        #stacks-internals #screen-md({
+            padding-left: var(--su16);
+        });
+
+        .s-post-summary--stats {
+            width: auto;
+            flex-direction: row;
+            align-items: center;
+            gap: var(--su2);
+
+            .s-post-summary--stats-item {
+                min-width: var(--su64);
+                height: var(--su48);
+                flex-direction: column;
+                gap: 0;
+                font-size: var(--fs-caption);
+
+                &.s-post-summary--stats-item__emphasized {
+                    color: inherit;
+                }
+
+                &.has-accepted-answer .svg-icon {
+                    display: none;
+                }
+
+                .s-post-summary--stats-item-number {
+                    font-weight: normal;
+                    font-size: var(--fs-body3);
+                }
+
+                &.is-deleted,
+                &.is-published,
+                &.is-draft,
+                &.is-review,
+                &.is-closed,
+                &.is-archived,
+                &.is-pinned {
+                    display: none;
+                }
+            }
+
+            #stacks-internals #screen-md({
+                flex-direction: row;
+                align-items: center;
+                gap: var(--su8);
+
+                .s-post-summary--stats-item {
+                    min-width: auto;
+                    height: auto;
+                    flex-direction: row;
+                    gap: 3px; // HTML spacing
+
+                    .s-post-summary--stats-item-number {
+                        font-size: inherit;
+                    }
+
+                    &.s-post-summary--stats-item__emphasized {
+                        color: var(--fc-dark);
+                    }
+
+                    &.has-accepted-answer .svg-icon {
+                        display: block;
+                    }
+
+                    &.is-deleted,
+                    &.is-published,
+                    &.is-draft,
+                    &.is-review,
+                    &.is-closed,
+                    &.is-archived,
+                    &.is-pinned {
+                        display: block;
+                    }
+                }
+            });
+        }
+    }
 }
 
 //  [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;
@@ -49,35 +130,34 @@
 }
 
 .s-post-summary--stats {
-    --s-post-summary-stats-gap: @su6; // Replace with gap property as soon as browser support makes sense.
-    margin-right: @su8;
-    margin-bottom: -@su2;
-    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 {
         display: inline-flex;
+        gap: 0.3em;
         align-items: center;
         justify-content: center;
-        margin-right: var(--s-post-summary-stats-gap);
-        margin-bottom: var(--s-post-summary-stats-gap);
         white-space: nowrap;
         border: 1px solid transparent;
 
-        .svg-icon {
-            margin-right: @su4;
-        }
-
         &.s-post-summary--stats-item__emphasized {
             color: var(--fc-dark);
         }
 
+        .s-post-summary--stats-item-number {
+            font-weight: 500;
+        }
+
         &.has-answers,
         &.has-bounty,
         &.is-deleted,
@@ -85,9 +165,10 @@
         &.is-draft,
         &.is-review,
         &.is-closed,
-        &.is-archived {
-            border-radius: @br-sm;
-            padding: @su2 @su4;
+        &.is-archived,
+        &.is-pinned {
+            border-radius: var(--br-sm);
+            padding: var(--su2) var(--su4);
         }
 
         &.has-answers {
@@ -150,6 +231,11 @@
             background-color: var(--black-100);
             border-color: var(--black-600);
         }
+
+        &.is-pinned {
+            color: var(--white);
+            background-color: var(--black-700);
+        }
     }
 
     #stacks-internals #screen-md({
@@ -165,41 +251,58 @@
 
     .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: @su6;
-        overflow-wrap: break-word;
-        word-wrap: break-word;
-        padding-right: @su24;
+        margin-bottom: 0.3846rem;
+        padding-right: var(--su24);
+        line-height: var(--lh-md);
+        font-weight: normal;
+        .break-word;
 
         .iconShield {
-            color: var(--black-600);
-            vertical-align: baseline;
+            color: var(--fc-light);
+        }
+
+        .svg-icon {
+            vertical-align: text-bottom; // Optical alignment
             position: relative;
-            bottom: -@su2;
+            top: -1px;
+        }
 
-            #stacks-internals #screen-sm({
-                vertical-align: text-bottom;
-                bottom: 0;
-            });
+        a {
+            .break-word;
+
+            color: var(--theme-post-title-color);
+            font-family: var(--theme-post-title-font-family);
+
+            &:visited {
+                color: var(--theme-post-title-color-visited);
+            }
+
+            &:hover,
+            &:active {
+                color: var(--theme-post-title-color-hover);
+            }
         }
     }
 
     .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;
+        .break-word;
 
         &.s-post-summary--content-excerpt__sm {
             .v-truncate1;
@@ -216,28 +319,21 @@
 }
 
 .s-post-summary--meta {
-    --s-post-summary-tags-gap: @su4;  // Replace with gap property as soon as browser support makes sense.
-
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
-    margin-bottom: calc(-1 * var(--s-post-summary-tags-gap));
+    column-gap: var(--su6);
+    row-gap: var(--su8);
 
     .s-post-summary--meta-tags {
         display: flex;
         flex-wrap: wrap;
-        margin-right: var(--s-post-summary-tags-gap);
-
-        & > * {
-            margin-right: var(--s-post-summary-tags-gap);
-            margin-bottom: var(--s-post-summary-tags-gap);
-        }
+        gap: var(--su4);
     }
 
     .s-user-card {
         flex-wrap: wrap;
-        margin-bottom: var(--s-post-summary-tags-gap);
         margin-left: auto;
         justify-content: flex-end;
     }
@@ -245,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 {
@@ -259,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({
@@ -272,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;
     }
 }
@@ -306,17 +402,16 @@
         filter: grayscale(100%);
     }
 
-    .s-post-summary--content-title {
-        &, & .s-link {
-            color: var(--black-600);
+    .s-post-summary--content-title a {
+        color: var(--black-600);
 
-            &:hover {
-                color: var(--black-500);
-            }
+        &:hover,
+        &:active {
+            color: var(--black-500);
+        }
 
-            &:visited {
-                color: var(--black-700);
-            }
+        &:visited {
+            color: var(--black-700);
         }
     }
 

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);
     }
 }