@stackoverflow/stacks 0.69.1 → 0.73.0

package/lib/css/components/_stacks-link-previews.less

@@ -10,7 +10,7 @@
 //  $   BASE STYLE
 //  ----------------------------------------------------------------------------
 .s-link-preview {
-    border: 1px solid var(--black-100);
+    border: 1px solid var(--bc-medium);
     border-radius: @br-sm;
     text-align: left;
     box-shadow: var(--bs-sm);
@@ -21,7 +21,7 @@
     background: var(--black-025);
     border-top-left-radius: @br-sm;
     border-top-right-radius: @br-sm;
-    border-bottom: 1px solid var(--black-100);
+    border-bottom: 1px solid var(--bc-medium);
     padding: @su12 @su8;
 }
 
@@ -37,22 +37,25 @@
 }
 
 a.s-link-preview--title {
-    #stacks-internals #load-config();
     text-decoration: none;
-    color: @link-color;
+    color: var(--theme-link-color);
     cursor: pointer;
 
     &.s-link__visited:visited {
-        color: @link-color-visited;
+        color: var(--theme-link-color);
         text-decoration: none;
+
+        .highcontrast-mode({ text-decoration: underline; });
     }
 
     &:hover,
     &.s-link__visited:hover,
     &:active,
     &.s-link__visited:active {
-        color: @link-color-hover;
+        color: var(--theme-link-color-hover);
         text-decoration: none;
+
+        .highcontrast-mode({ text-decoration: underline; });
     }
 }
 
@@ -89,7 +92,7 @@ a.s-link-preview--title {
     background: var(--black-025);
     border-bottom-left-radius: @br-sm;
     border-bottom-right-radius: @br-sm;
-    border-top: 1px solid var(--black-100);
+    border-top: 1px solid var(--bc-medium);
     padding: @su12;
     font-size: @fs-caption;
 

package/lib/css/components/_stacks-links.less

@@ -16,23 +16,24 @@
 
 a,
 .s-link {
-    #stacks-internals #load-config();
     text-decoration: none;
-    color: @link-color;
+    color: var(--theme-link-color);
     cursor: pointer;
     user-select: auto;
 
+    .highcontrast-mode({
+        text-decoration: underline;
+    });
+
     &.s-link__visited:visited {
-        color: @link-color-visited;
-        text-decoration: none;
+        color: var(--theme-link-color-visited);
     }
 
     &:hover,
     &.s-link__visited:hover,
     &:active,
     &.s-link__visited:active {
-        color: @link-color-hover;
-        text-decoration: none;
+        color: var(--theme-link-color-hover);
     }
 
     &.s-link__grayscale {
@@ -93,6 +94,25 @@ a,
     &.s-link__underlined {
         text-decoration: underline !important;
     }
+
+    &.s-link__dropdown {
+        position: relative;
+        padding-right: 0.9em;
+
+        &:after {
+            content: "";
+            position: absolute;
+            z-index: @zi-active;
+            top: calc(50% - 2px);
+            right: 0;
+            border-style: solid;
+            border-width: @su4;
+            border-top-width: @su4;
+            border-bottom-width: 0;
+            border-color: currentColor transparent;
+            pointer-events: none;
+        }
+    }
 }
 
 button.s-link {
@@ -103,6 +123,7 @@ button.s-link {
     padding: 0;
     line-height: inherit;
     user-select: auto;
+    font-family: inherit;
 
     &:focus {
         outline: none;
@@ -139,8 +160,7 @@ button.s-link {
             text-decoration: underline;
         }
     }
-    #stacks-internals #load-config();
-    .colorize-all(default, @link-color, @link-color-hover);
+    .colorize-all(default, var(--theme-link-color), var(--theme-link-color-hover));
     .colorize-all(grayscale, var(--black-700), var(--black-600));
     .colorize-all(inherit, inherit, inherit);
     .colorize-all(muted, var(--black-500), var(--black-400));
@@ -160,6 +180,7 @@ button.s-link {
     border-radius: 0;
     text-align: left;
     line-height: inherit;
+    font-family: inherit;
 
     &:hover,
     &:active {
@@ -177,7 +198,6 @@ button.s-link {
             background-color: var(--black-025);
         });
 
-        #stacks-internals #load-config();
         &.s-block-link__right {
             box-shadow: inset -3px 0 0 var(--theme-primary-color);
         }

package/lib/css/components/_stacks-menu.less

@@ -24,20 +24,20 @@
     .s-menu--divider {
         margin: @su8 0;
         height: 1px;
-        background-color: var(--black-075);
+        background-color: var(--bc-light);
 
         .dark-mode({
-            background-color: var(--black-025);
+            background-color: var(--bc-lightest);
         });
     }
 
     .s-menu--label {
         cursor: pointer;
         padding: @su12;
-        border-top: 1px solid var(--black-075);
+        border-top: 1px solid var(--bc-light);
 
         .dark-mode({
-            border-top-color: var(--black-025);
+            border-top-color: var(--bc-lightest);
         });
 
         &.is-disabled {

package/lib/css/components/_stacks-modals.less

@@ -51,7 +51,7 @@
     padding: @su24;
     border-radius: @br-lg;
     background-color: var(--white);
-    box-shadow: @bs-lg;
+    box-shadow: var(--bs-lg);
     opacity: 0;
     backface-visibility: hidden;
     transform: translate3d(0, 30%, 0) scale3d(0.6, 0.6, 0.6);

package/lib/css/components/_stacks-navigation.less

@@ -26,6 +26,7 @@
         display: flex;
         align-items: center;
         padding: @su6 @su12;
+        position: relative;
 
         // Reset some things for when the navigation item is also a button
         border: none;
@@ -36,12 +37,18 @@
         user-select: auto;
         border-radius: 1000px;
         margin: @su2;
+        white-space: nowrap;
         color: var(--black-600);
 
         &:hover,
         &:active {
             background: var(--black-075);
             color: var(--black-600);
+
+            .highcontrast-mode({
+                background: var(--black-600);
+                color: var(--black-100);
+            });
         }
 
         @focus-styles();
@@ -49,6 +56,32 @@
         &.is-selected {
             background: var(--theme-primary-color);
             color: var(--white);
+
+            &:hover,
+            &:active {
+                background: var(--theme-primary-600);
+                color: var(--white);
+            }
+
+            .highcontrast-mode({ text-decoration: none; });
+        }
+
+        &.s-navigation--item__dropdown {
+            padding-right: 2em;
+
+            &:after {
+                content: "";
+                position: absolute;
+                z-index: @zi-active;
+                top: calc(50% - 2px);
+                right: 0.9em;
+                border-style: solid;
+                border-width: @su4;
+                border-top-width: @su4;
+                border-bottom-width: 0;
+                border-color: currentColor transparent;
+                pointer-events: none;
+            }
         }
     }
 
@@ -66,6 +99,7 @@
 
         .s-navigation--item {
             margin: 0;
+            white-space: normal;
         }
     }
 
@@ -88,6 +122,11 @@
         &.is-selected {
             background: var(--black-050);
             color: var(--black-800);
+
+            .highcontrast-mode({
+                background: var(--black-800);
+                color: var(--black-050);
+            });
         }
     }
 
@@ -98,6 +137,10 @@
         .s-navigation--item {
             padding: @su4 @su12;
             font-size: @fs-caption;
+
+            &.s-navigation--item__dropdown {
+                padding-right: 2em;
+            }
         }
     }
 }

package/lib/css/components/_stacks-notices.less

@@ -75,10 +75,23 @@
     border-color: var(--green-200);
     background-color: var(--green-050);
 
+    // Bump up the border contrast in high contrast mode
+    .highcontrast-mode({
+        background-color: var(--green-200);
+        border-color: var(--green-400);
+    });
+
     &.s-notice__important,
     &.s-banner__important {
         background-color: var(--green-400);
         color: var(--black-900);
+
+        // Bump up the text in high contrast
+        .highcontrast-mode({
+            background-color: var(--green-500);
+            color: var(--white);
+            border-color: transparent;
+        });
     }
 
     // Improve the presentation of buttons
@@ -101,10 +114,23 @@
     border-color: var(--yellow-300);
     background-color: var(--yellow-050);
 
+    // Bump up the border contrast in high contrast mode
+    .highcontrast-mode({
+        background-color: var(--yellow-200);
+        border-color: var(--yellow-700);
+    });
+
     &.s-notice__important,
     &.s-banner__important {
         background-color: var(--yellow-400);
         color: var(--black-900);
+
+        // Bump up the text in high contrast
+        .highcontrast-mode({
+            background-color: var(--yellow-500);
+            color: var(--white);
+            border-color: transparent;
+        });
     }
 
     // Improve the presentation of buttons
@@ -131,6 +157,17 @@
     border-color: var(--red-200);
     background-color: var(--red-050);
 
+    // Bump up the border contrast in high contrast mode
+    .highcontrast-mode({
+        background-color: var(--red-200);
+        border-color: var(--red-500);
+
+        &.s-notice__important,
+        &.s-banner__important {
+            background-color: var(--red-500);
+        }
+    });
+
     &.s-notice__important,
     &.s-banner__important {
         background-color: var(--red-400);
@@ -161,9 +198,9 @@
 .s-notice__success,
 .s-notice__warning,
 .s-notice__danger {
-    .dark-mode({
-        border-color: transparent;
-    });
+    .dark-mode({ border-color: transparent; });
+    .highcontrast-mode({ border-color: currentColor; });
+
 }
 
 //  ============================================================================

package/lib/css/components/_stacks-page-titles.less

@@ -17,7 +17,7 @@
     align-items: flex-end;
     width: 100%;
     padding-bottom: @su16;
-    border-bottom: 1px solid var(--black-100);
+    border-bottom: 1px solid var(--bc-medium);
 
     #stacks-internals #screen-md({
         flex-direction: column;

package/lib/css/components/_stacks-pagination.less

@@ -25,13 +25,15 @@
     padding: 0 @su8;
     background-color: transparent;
     border-radius: @br-sm;
-    border: 1px solid var(--black-100);
+    border: 1px solid var(--bc-medium);
     font-size: @fs-body1;
     line-height: @lh-xl;
     color: var(--fc-medium);
 
+    .highcontrast-mode({ text-decoration: none; });
+
     &:hover {
-        border-color: var(--black-200);
+        border-color: var(--bc-darker);
         background-color: var(--black-100);
         color: var(--fc-dark);
     }

package/lib/css/components/_stacks-popovers.less

@@ -22,7 +22,7 @@
     padding: @su12;
     z-index: @zi-popovers;
     border-radius: @br-md;
-    border: 1px solid var(--black-100);
+    border: 1px solid var(--bc-medium);
     background-color: var(--white);
     box-shadow: var(--bs-md);
     color: var(--fc-dark);
@@ -30,9 +30,13 @@
     min-width: 12rem;
     width: 100%;
 
+    // Guard against popovers being in a container with white-space: nowrap
+    // Without this, the content pops *out* of the popover.
+    white-space: normal; 
+
     .dark-mode({
         background-color: var(--black-075);
-        border-color: transparent;
+        border-color: var(--bc-light);
         box-shadow: var(--bs-lg);
     });
 
@@ -53,7 +57,11 @@
 
         &:after {
             bottom: 1px;
-            box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.07), 2px 2px 2px -1px rgba(0, 0, 0, 0.1);
+            box-shadow: 2px 2px 5px 0 hsla(0, 0, 0, 0.07), 2px 2px 2px -1px hsla(0, 0, 0, 0.1);
+
+            .highcontrast-mode({
+                box-shadow: 1px 1px 0 0 var(--bc-medium);
+            });
         }
     }
 
@@ -65,7 +73,11 @@
 
         &:after {
             top: 1px;
-            box-shadow: -1px -1px 1px 0 rgba(0, 0, 0, 0.12);
+            box-shadow: -1px -1px 1px 0 hsla(0, 0, 0, 0.12);
+
+            .highcontrast-mode({
+                box-shadow: -1px -1px 0 0 var(--bc-medium);
+            });
         }
     }
 
@@ -77,7 +89,11 @@
 
         &:after {
             right: 1px;
-            box-shadow: 2px -2px 5px 0 rgba(0, 0, 0, 0.07), 2px -2px 2px -1px rgba(0, 0, 0, 0.1);
+            box-shadow: 2px -2px 5px 0 hsla(0, 0, 0, 0.07), 2px -2px 2px -1px hsla(0, 0, 0, 0.1);
+
+            .highcontrast-mode({
+                box-shadow: 1px -1px 0 0 var(--bc-medium);
+            });
         }
     }
 
@@ -89,7 +105,11 @@
 
         &:after {
             left: 1px;
-            box-shadow: -2px 2px 5px 0 rgba(0, 0, 0, 0.07), -2px 2px 2px -1px rgba(0, 0, 0, 0.1);
+            box-shadow: -2px 2px 5px 0 hsla(0, 0, 0, 0.07), -2px 2px 2px -1px hsla(0, 0, 0, 0.1);
+
+            .highcontrast-mode({
+                box-shadow: -1px 1px 0 0 var(--bc-medium);
+            });
         }
     }
 

package/lib/css/components/_stacks-post-summary.less

@@ -10,7 +10,7 @@
 .s-post-summary {
     position: relative;
     display: flex;
-    border-bottom: 1px solid var(--black-075);
+    border-bottom: 1px solid var(--bc-light);
     padding: @su16;
 
     &:last-child {
@@ -70,7 +70,14 @@
         border: 1px solid transparent;
 
         &.has-answers,
-        &.has-bounty {
+        &.has-bounty,
+        &.is-watched,
+        &.is-ignored,
+        &.is-deleted,
+        &.is-published,
+        &.is-draft,
+        &.is-review,
+        &.is-rejected {
             border-radius: @br-sm;
             padding: @su2 @su4;
         }
@@ -82,6 +89,10 @@
             &.has-accepted-answer {
                 color: @white;
                 background-color: var(--green-500);
+
+                .highcontrast-mode({
+                    color: var(--white);
+                });
             }
         }
 
@@ -101,6 +112,26 @@
         &.is-supernova {
             color: var(--orange-400);
         }
+
+        &.is-published {
+            color: var(--black-800);
+            background-color: var(--black-050);
+        }
+
+        &.is-draft {
+            color: var(--white);
+            background-color: var(--blue-700);
+        }
+
+        &.is-review {
+            color: var(--white);
+            background-color: var(--yellow-700);
+        }
+
+        &.is-rejected {
+            color: var(--white);
+            background-color: var(--red-600);
+        }
     }
 
     #stacks-internals #screen-md({
@@ -116,7 +147,7 @@
 
     .s-post-summary--content-title {
         display: inline-block;
-        font-size: @fs-subheading;
+        font-size: @fs-body3;
         margin-bottom: @su6;
         overflow-wrap: break-word;
         word-wrap: break-word;
@@ -175,5 +206,92 @@
     .s-user-card {
         flex-wrap: wrap;
         margin-bottom: var(--s-post-summary-tags-gap);
+        margin-left: auto;
+    }
+}
+
+.s-post-summary--answer {
+    position: relative;
+    margin: @su16 1em 0 1em;
+    padding: 0.5em 0 0.5em calc(1em + @su4);
+
+    + .s-post-summary--answer {
+        margin-top: @su16;
+    }
+
+    &:before {
+        content: "";
+        display: block;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        width: @su4;
+        border-radius: @su8;
+        background: var(--black-150);
+
+        .highcontrast-mode({
+            background: var(--black-600);
+        });
+    }
+
+    .s-post-summary--stats {
+        width: auto;
+        flex-direction: row;
+        align-items: center;
+        margin-bottom: @su4;
+    }
+
+    .s-post-summary--answer-excerpt {
+        color: var(--black-600);
+        margin-bottom: @su8;
+        .v-truncate4;
+    }
+}
+
+.s-post-summary__watched .is-watched {
+    color: var(--white);
+    background-color: var(--yellow-600);
+}
+
+.s-post-summary__ignored .is-ignored {
+    color: var(--white);
+    background-color: var(--black-600);
+}
+
+.s-post-summary__deleted .is-deleted {
+    color: @white;
+    background-color: var(--red-500);
+}
+
+.s-post-summary__ignored,
+.s-post-summary__deleted {
+    .s-post-summary--content {
+        opacity: 0.7;
+    }
+
+    .s-post-summary--stats-item:not(.is-ignored):not(.is-deleted) {
+        opacity: 0.7;
+        filter: grayscale(100%);
+    }
+
+    .s-post-summary--content-title {
+        color: var(--black-600);
+
+        &:hover {
+            color: var(--black-500);
+        }
+
+        &:visited {
+            color: var(--black-700);
+        }
+    }
+
+    .s-post-summary--content-excerpt {
+        color: var(--black-500);
+    }
+
+    .s-post-summary--meta {
+        filter: grayscale(100%);
     }
 }

package/lib/css/components/_stacks-progress-bars.less

@@ -37,7 +37,6 @@
     background-color: var(--green-400);
 }
 
-
 //  $$   LABEL
 //       For when there's descriptive, label copy within the progress bar
 //  ----------------------------------------------------------------------------
@@ -53,7 +52,6 @@
     z-index: @zi-base + 2;
 }
 
-
 //  ===========================================================================
 //  $   VARIATION PROGRESS BACKGROUNDS
 //  ---------------------------------------------------------------------------
@@ -68,13 +66,20 @@
 .s-progress__privilege {
     .s-progress--bar {
         background-color: var(--green-050);
+
+        .highcontrast-mode({
+            background-color: var(--green-200);
+        });
     }
     .s-progress--label {
         border-color: var(--green-400);
+        display: flex;
+        gap: @su4;
+        align-items: center;
+        justify-content: center;
     }
 }
 
-
 //  ===========================================================================
 //  $   BADGE PROGRESS BARS
 //  ===========================================================================
@@ -91,6 +96,20 @@
     background-color: transparent;
 }
 
+.s-progress__badge {
+    .s-progress--label {
+        display: flex;
+        gap: @su4;
+        align-items: center;
+        padding-left: 1em;
+        padding-right: 1em;
+
+        .s-badge--label {
+            text-align: center;
+            flex-grow: 1;
+        }
+    }
+}
 
 //  $$  GOLD
 //  ---------------------------------------------------------------------------
@@ -190,7 +209,7 @@
         border-radius: 0;
         padding: @su12 @su6 0 @su6;
         text-align: center;
-        color: var(--black-200);
+        color: var(--black-300);
         z-index: @zi-base;
     }
 
@@ -199,19 +218,23 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        background: var(--black-200);
+        background: var(--black-300);
         border-radius: 100%;
         width: @su24;
         height: @su24;
         z-index: @zi-selected;
         color: @white;
+
+        .highcontrast-mode({
+            color: var(--white);
+        });
     }
 
     .s-progress--bar {
         position: absolute;
         top: 9px;
         height: @su6;
-        background: var(--black-200);
+        background: var(--black-300);
         z-index: @zi-base;
         border-radius: 0;