@stackoverflow/stacks 0.70.0 → 0.73.1

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 {
@@ -69,8 +69,20 @@
         white-space: nowrap;
         border: 1px solid transparent;
 
+        .svg-icon {
+            vertical-align: text-bottom;
+        }
+
         &.has-answers,
-        &.has-bounty {
+        &.has-bounty,
+        &.is-watched,
+        &.is-ignored,
+        &.is-deleted,
+        &.is-published,
+        &.is-draft,
+        &.is-review,
+        &.is-closed,
+        &.is-archived {
             border-radius: @br-sm;
             padding: @su2 @su4;
         }
@@ -82,6 +94,10 @@
             &.has-accepted-answer {
                 color: @white;
                 background-color: var(--green-500);
+
+                .highcontrast-mode({
+                    color: var(--white);
+                });
             }
         }
 
@@ -101,6 +117,35 @@
         &.is-supernova {
             color: var(--orange-400);
         }
+
+        &.is-published {
+            color: var(--black-800);
+            background-color: var(--black-050);
+        }
+
+        &.is-draft {
+            color: var(--blue-900);
+            background-color: var(--blue-100);
+            border-color: var(--blue-600);
+        }
+
+        &.is-review {
+            color: var(--yellow-900);
+            background-color: var(--yellow-100);
+            border-color: var(--yellow-600);
+        }
+
+        &.is-closed {
+            color: var(--red-900);
+            background-color: var(--red-100);
+            border-color: var(--red-600);
+        }
+
+        &.is-archived {
+            color: var(--black-900);
+            background-color: var(--black-100);
+            border-color: var(--black-600);
+        }
     }
 
     #stacks-internals #screen-md({
@@ -116,7 +161,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;
@@ -178,3 +223,89 @@
         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;
 

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

@@ -46,6 +46,11 @@
         background-color: var(--black-100);
         height: 1px;
         margin-bottom: var(--s-prose-spacing);
+
+        .highcontrast-mode({
+            color: var(--black-500);
+            background-color: var(--black-500);
+        });
     }
 
     li {
@@ -317,9 +322,13 @@
             top: 0;
             bottom: 0;
             left: 0;
-            width: 4px;
-            border-radius: 8px;
+            width: @su4;
+            border-radius: @su8;
             background: var(--black-150);
+
+            .highcontrast-mode({
+                background: var(--black-600);
+            });
         }
 
         blockquote {
@@ -422,6 +431,11 @@
         border-radius: @br-sm;
     }
 
+    // When contained within a link, we want the code to be link-colored
+    *:not(.s-code-block) > a code {
+        color: var(--theme-link-color);
+    }
+
     pre {
         margin-top: 0;
         margin-bottom: calc(var(--s-prose-spacing) + 0.4em); // Increase this spacing for better optical alignment

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

@@ -45,9 +45,9 @@
     th,
     td {
         padding: @su8;
-        border-top: 1px solid var(--black-100);
-        border-left: 1px solid var(--black-100);
-        border-right: 1px solid var(--black-100);
+        border-top: 1px solid var(--bc-medium);
+        border-left: 1px solid var(--bc-medium);
+        border-right: 1px solid var(--bc-medium);
         vertical-align: middle;
         color: var(--fc-medium);
         text-align: left;
@@ -82,12 +82,12 @@
     //  If it's the last row, add a bottom border
     tr:last-of-type td,
     tr:last-of-type th {
-        border-bottom: 1px solid var(--black-100);
+        border-bottom: 1px solid var(--bc-medium);
     }
 
     //  If two table bodies are next to each other, visually separate them
     tbody + tbody {
-        border-top: @su2 solid var(--black-100);
+        border-top: @su2 solid var(--bc-medium);
     }
 }
 
@@ -240,7 +240,7 @@
         }
         thead th {
             border-top-color: transparent;
-            border-bottom-color: var(--black-200);
+            border-bottom-color: var(--bc-darker);
             //  Clear Header Styles
             background-color: transparent;
             text-transform: initial;
@@ -312,6 +312,10 @@
         th:not(.is-enabled),
         td:not(.is-enabled) {
             opacity: 0.3;
+
+            .highcontrast-mode({
+                opacity: 0.8;
+            });
         }
     }
 }

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

@@ -17,13 +17,21 @@
     background-color: @background;
     color: @color;
 
+    .highcontrast-mode({
+        border-color: currentColor;
+    });
+
     .s-tag--dismiss {
         color: inherit;
         background-color: transparent;
 
         &:hover {
-            color: @white; // We want this color to remain fixed regardless of dark mode
+            color: @background;
             background-color: @color;
+
+            .highcontrast-mode({
+                color: var(--white); // We do not want this color to remain fixed
+            });
         }
     }
 }
@@ -32,6 +40,10 @@
     border-color: @border;
     background-color: @background;
     color: @color;
+
+    .highcontrast-mode({
+        border-color: currentColor;
+    });
 }
 
 .s-tag-hover-styles(@border-hover: transparent, @background-hover: transparent, @color-hover: inherit) {
@@ -41,6 +53,10 @@
         border-color: @border-hover;
         background-color: @background-hover;
         color: @color-hover;
+
+        .highcontrast-mode({
+            border-color: currentColor;
+        });
     }
 }
 
@@ -66,10 +82,12 @@
     vertical-align: middle;
     white-space: nowrap;
 
-    .s-tag-styles(@tags-border, @tags-background, @tags-color);
+    .s-tag-styles(var(--theme-tag-border-color), var(--theme-tag-background-color), var(--theme-tag-color));
+
+    .highcontrast-mode({ text-decoration: none; });
 
     &.is-selected {
-        .s-tag-selected-styles(@tags-selected-border, @tags-selected-background, @tags-selected-color);
+        .s-tag-selected-styles(transparent, var(--theme-secondary-200), var(--theme-secondary-900));
     }
 
     //  -- SIZES
@@ -100,7 +118,7 @@
 
 a.s-tag:not(.is-selected) {
     #stacks-internals #load-config();
-    .s-tag-hover-styles(@tags-hover-border, @tags-hover-background, @tags-hover-color);
+    .s-tag-hover-styles(var(--theme-tag-hover-border-color), var(--theme-tag-hover-background-color), var(--theme-tag-hover-color));
 }
 
 //  $$  DISMISS ICON
@@ -189,18 +207,3 @@ a.s-tag__muted:not(.is-selected) {
     #stacks-internals #load-config();
     .s-tag-hover-styles(@tags-muted-hover-border, @tags-muted-hover-background, @tags-muted-hover-color);
 }
-
-//  $$  Themed Tag
-//  ---------------------------------------------------------------------------
-.s-tag__themed {
-    #stacks-internals #load-config();
-    .s-tag-styles(var(--theme-primary-300), var(--theme-primary-050), var(--theme-primary-700));
-
-    &.is-selected {
-        .s-tag-selected-styles(transparent, var(--theme-primary-200), var(--theme-primary-900));
-    }
-}
-a.s-tag__themed:not(.is-selected) {
-    #stacks-internals #load-config();
-    .s-tag-hover-styles(var(--theme-primary-400), var(--theme-primary-100), var(--theme-primary-900));
-}

package/lib/css/components/_stacks-toggle-switches.less

@@ -49,6 +49,10 @@
                 border-radius: 50%;
                 background: @white;
                 transition: left 0.1s ease;
+
+                .highcontrast-mode({
+                    background: var(--white);
+                });
             }
 
             &:before {
@@ -112,12 +116,20 @@
                 &.s-toggle-switch--label-off {
                     background-color: var(--black-300);
                     color: @white;
+
+                    .highcontrast-mode({
+                        color: var(--white);
+                    });
                 }
 
                 // Color activated options green
                 &:not(.s-toggle-switch--label-off) {
                     background-color: var(--green-400);
                     color: @white;
+
+                    .highcontrast-mode({
+                        color: var(--white);
+                    });
                 }
             }
         }