@stackoverflow/stacks 0.71.0 → 0.72.0

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

@@ -34,7 +34,13 @@
         cursor: pointer;
         user-select: none;
 
-        .highcontrast-mode({ border-color: currentColor; });
+        .highcontrast-mode({
+            border-color: currentColor;
+
+            &:not(.s-btn__link):not(.s-btn__unset) {
+                text-decoration: none;
+            }
+        });
 
         button &,
         button[type="submit"] &,
@@ -206,6 +212,12 @@
             box-shadow: none;
         }
 
+        &:focus {
+            .highcontrast-mode({
+                box-shadow: 0 0 0 @su4 var(--focus-ring);
+            });
+        }
+
         &.is-selected {
             color: var(--theme-button-filled-selected-color);
             background-color: var(--theme-button-filled-selected-background-color);
@@ -293,6 +305,7 @@
 
             &:focus {
                 box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
+                .highcontrast-mode({ box-shadow: 0 0 0 @su4 var(--focus-ring-muted); });
             }
 
             &.is-selected {
@@ -341,6 +354,7 @@
 
         &:focus {
             box-shadow: 0 0 0 @su4 var(--focus-ring-error);
+            .highcontrast-mode({ box-shadow: 0 0 0 @su4 var(--focus-ring-error); });
         }
 
         &.is-selected {
@@ -373,6 +387,10 @@
             .highcontrast-mode({
                 color: var(--white);
 
+                &:focus {
+                    box-shadow: 0 0 0 @su4 var(--focus-ring-error);
+                }
+
                 .s-btn--number {
                     color: var(--black);
                 }
@@ -437,7 +455,6 @@
             }
         });
 
-
         &:hover,
         &:focus,
         &:active {
@@ -450,6 +467,12 @@
             box-shadow: none;
         }
 
+        &:focus {
+            .highcontrast-mode({
+                box-shadow: 0 0 0 @su4 var(--focus-ring);
+            });
+        }
+
         &.is-selected {
             color: var(--theme-button-primary-selected-color);
             background-color: var(--theme-button-primary-selected-background-color);
@@ -476,10 +499,13 @@
         }
 
         &:active {
-            border-color: var(--bc-darkest);
             background-color: var(--black-050);
             color: var(--black-900);
         }
+
+        &:focus {
+            box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
+        }
     }
 
     .s-btn__facebook {
@@ -517,11 +543,16 @@
             background-color: var(--black-900);
             color: var(--white);
         }
+
+        &:focus {
+            box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
+        }
     }
 
     .s-btn__unset,
     .s-btn__unset:hover,
-    .s-btn__unset:active {
+    .s-btn__unset:active,
+    .s-btn__unset:focus {
         padding: 0;
         border: none;
         outline: none;
@@ -534,10 +565,6 @@
         user-select: auto;
     }
 
-    .s-btn__unset:focus {
-        color: unset;
-    }
-
     .s-btn__link {
         display: inline;
         padding: 0;
@@ -556,6 +583,15 @@
         &:focus,
         &[disabled] {
             background: none;
+            box-shadow: none;
+        }
+
+        &.s-btn__dropdown {
+            padding-right: 0.9em;
+
+            &:after {
+                right: 0;
+            }
         }
     }
 

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

@@ -24,17 +24,6 @@
     }
 }
 
-//  ============================================================================
-//  $   LINKED CARDS
-//  ----------------------------------------------------------------------------
-a.s-card:not(.s-card__muted) {
-    &:hover,
-    &:focus,
-    &:active {
-        border-color: var(--bc-darker);
-    }
-}
-
 //  ============================================================================
 //  $   MODIFIERS
 //  ----------------------------------------------------------------------------
@@ -46,3 +35,10 @@ a.s-card:not(.s-card__muted) {
         opacity: 0.65;
     }
 }
+
+//  ============================================================================
+//  $   LINKED CARDS
+//  ----------------------------------------------------------------------------
+a.s-card {
+    text-decoration: none !important;
+}

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

@@ -378,6 +378,11 @@ fieldset {
             background-color: var(--theme-secondary-400);
             background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='%23fff'/%3E%3C/svg%3E");
 
+            .highcontrast-dark-mode({
+                border-color: var(--blue-700) !important;
+                background-color: var(--blue-300);
+            });
+
             &:focus {
                 border-color: var(--theme-secondary-400);
             }
@@ -400,6 +405,11 @@ fieldset {
             border-color: var(--theme-secondary-400);
             border-width: 0.30769231em;
             background-color: @white; // This should always be white regardless of dark mode
+
+            .highcontrast-dark-mode({
+                border-color: var(--blue-300);
+                outline: 1px solid var(--black);
+            });
         }
 
         &:focus {

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

@@ -44,6 +44,8 @@ a.s-link-preview--title {
     &.s-link__visited:visited {
         color: var(--theme-link-color);
         text-decoration: none;
+
+        .highcontrast-mode({ text-decoration: underline; });
     }
 
     &:hover,
@@ -52,6 +54,8 @@ a.s-link-preview--title {
     &.s-link__visited:active {
         color: var(--theme-link-color-hover);
         text-decoration: none;
+
+        .highcontrast-mode({ text-decoration: underline; });
     }
 }
 

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

@@ -21,9 +21,12 @@ a,
     cursor: pointer;
     user-select: auto;
 
+    .highcontrast-mode({
+        text-decoration: underline;
+    });
+
     &.s-link__visited:visited {
         color: var(--theme-link-color-visited);
-        text-decoration: none;
     }
 
     &:hover,
@@ -31,7 +34,6 @@ a,
     &:active,
     &.s-link__visited:active {
         color: var(--theme-link-color-hover);
-        text-decoration: none;
     }
 
     &.s-link__grayscale {
@@ -92,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 {
@@ -102,6 +123,7 @@ button.s-link {
     padding: 0;
     line-height: inherit;
     user-select: auto;
+    font-family: inherit;
 
     &:focus {
         outline: none;
@@ -158,6 +180,7 @@ button.s-link {
     border-radius: 0;
     text-align: left;
     line-height: inherit;
+    font-family: inherit;
 
     &:hover,
     &:active {

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

@@ -56,6 +56,14 @@
         &.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 {

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

@@ -30,6 +30,8 @@
     line-height: @lh-xl;
     color: var(--fc-medium);
 
+    .highcontrast-mode({ text-decoration: none; });
+
     &:hover {
         border-color: var(--bc-darker);
         background-color: var(--black-100);

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

@@ -182,3 +182,42 @@
         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;
+    }
+}

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

@@ -322,8 +322,8 @@
             top: 0;
             bottom: 0;
             left: 0;
-            width: 4px;
-            border-radius: 8px;
+            width: @su4;
+            border-radius: @su8;
             background: var(--black-150);
 
             .highcontrast-mode({
@@ -431,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-tags.less

@@ -84,6 +84,8 @@
 
     .s-tag-styles(@tags-border, @tags-background, @tags-color);
 
+    .highcontrast-mode({ text-decoration: none; });
+
     &.is-selected {
         .s-tag-selected-styles(@tags-selected-border, @tags-selected-background, @tags-selected-color);
     }