@stackoverflow/stacks 0.70.0 → 0.73.1

package/lib/css/atomic/_stacks-misc.less

@@ -11,7 +11,6 @@
 //  ----------------------------------------------------------------------------
 
 #stacks-internals #responsify('.d-block', { display: block !important; });
-@media print { .print\:d-block { display: block !important; } }
 #stacks-internals #responsify('.d-flex', { display: flex !important; });
 #stacks-internals #responsify('.d-inline-flex', { display: inline-flex !important; });
 #stacks-internals #responsify('.d-grid', { display: grid !important; });
@@ -21,7 +20,6 @@
 .d-table { display: table !important; }
 .d-table-cell { display: table-cell !important; }
 #stacks-internals #responsify('.d-none', { display: none !important; });
-@media print { .print\:d-none { display: none !important; } }
 .d-unset { display: unset !important; }
 
 //  ============================================================================
@@ -336,3 +334,9 @@
 // -- Delays
 .t-delay { transition-delay: 0.25s !important; }
 .t-delay-unset { transition-delay: 0s !important; }
+
+//  ============================================================================
+//  $  TABLE LAYOUT
+//  ----------------------------------------------------------------------------
+.tl-fixed { table-layout: fixed !important; }
+.tl-auto { table-layout: auto !important; }

package/lib/css/atomic/_stacks-typography.less

@@ -63,7 +63,7 @@ p {
     &.has-border {
         width: 100%;
         padding: @su4 0;
-        border-top: 1px solid var(--black-100);
+        border-top: 1px solid var(--bc-medium);
     }
 }
 
@@ -194,11 +194,6 @@ p {
 .wb-unset { word-break: unset !important; }
 
 //  --  Overflow Wrap
-//      This property will create a line break only if an entire word cannot be
-//      placed on its own line without overflowing. This was formerly called
-//      word-wrap, which was an unprefixed Microsoft vendor property implemented
-//      by most browsers. Word-wrap is still a supported alias, but can be removed
-//      once we no longer support IE11.
 .ow-normal {
     overflow-wrap: normal !important;
     word-wrap: normal !important;
@@ -224,8 +219,6 @@ p {
     word-wrap: unset !important;
 }
 
-.ww-break-word { word-wrap: break-word !important; }
-
 //  --  Hyphenation
 .hyphens-none { hyphens: none !important; }
 .hyphens-auto {
@@ -235,9 +228,31 @@ p {
 }
 .hyphens-unset { hyphens: unset !important; }
 
+//  --  Break word
+.break-word {
+    word-break: break-word !important;
+    word-wrap: break-word !important;
+    overflow-wrap: break-word !important;
+    -webkit-hyphens: auto !important;
+    -moz-hyphens: auto !important;
+    -ms-hyphens: auto !important;
+    hyphens: auto !important;
+}
+
 //  ============================================================================
 //  $   LISTS
 //  ----------------------------------------------------------------------------
+ul,
+ol {
+    padding: 0;
+    margin-left: 2.8em;
+
+    ul,
+    ol {
+        margin-bottom: 0;
+    }
+}
+
 .list-reset {
     list-style: none;
     margin: 0;

package/lib/css/base/_stacks-configuration-dynamic.less

@@ -74,27 +74,17 @@
 
     // DEPRECATED will be removed in a future release
     //  Tags
-    @tags-border:                                    transparent;
-    @tags-background:                                var(--powder-100);
-    @tags-color:                                     var(--powder-700);
-    @tags-hover-border:                              transparent;
-    @tags-hover-background:                          var(--powder-200);
-    @tags-hover-color:                               var(--powder-800);
-    @tags-selected-border:                           transparent;
-    @tags-selected-background:                       var(--powder-400);
-    @tags-selected-color:                            var(--powder-900);
-
-    @tags-moderator-border:                          var(--red-100);
+    @tags-moderator-border:                          var(--red-200);
     @tags-moderator-background:                      var(--red-050);
-    @tags-moderator-color:                           var(--red-600);
-    @tags-moderator-hover-border:                    var(--red-200);
+    @tags-moderator-color:                           var(--red-800);
+    @tags-moderator-hover-border:                    var(--red-300);
     @tags-moderator-hover-background:                var(--red-100);
-    @tags-moderator-hover-color:                     var(--red-700);
+    @tags-moderator-hover-color:                     var(--red-900);
     @tags-moderator-selected-border:                 var(--red-400);
     @tags-moderator-selected-background:             var(--red-200);
     @tags-moderator-selected-color:                  var(--red-800);
 
-    @tags-required-border:                           var(--black-200);
+    @tags-required-border:                           var(--bc-darker);
     @tags-required-background:                       var(--black-075);
     @tags-required-color:                            var(--black-700);
     @tags-required-hover-border:                     var(--black-300);

package/lib/css/components/_stacks-activity-indicator.less

@@ -13,9 +13,33 @@
 
 .s-activity-indicator {
     display: inline-block;
-    width: @su12;
+    min-width: @su12;
     height: @su12;
+    padding-left: @su4;
+    padding-right: @su4;
+    line-height: 1.1; // Custom line-height to satisfy 1x screens
     background-color: var(--theme-secondary-400);
     box-shadow: 0 0 0 @su4 var(--focus-ring);
-    border-radius: 100%;
+    border-radius: 1000px;
+    font-size: @fs-fine;
+    font-weight: 600;
+    color: @white;
+    text-transform: uppercase;
+
+    .highcontrast-mode({ color: var(--white); });
+}
+
+.s-activity-indicator__success {
+    background-color: var(--green-500);
+    box-shadow: 0 0 0 @su4 var(--focus-ring-success);
+}
+
+.s-activity-indicator__warning {
+    background-color: var(--yellow-600);
+    box-shadow: 0 0 0 @su4 var(--focus-ring-warning);
+}
+
+.s-activity-indicator__danger {
+    background-color: var(--red-500);
+    box-shadow: 0 0 0 @su4 var(--focus-ring-error);
 }

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

@@ -26,6 +26,15 @@
     background-size: 100%;
     vertical-align: bottom; // Make our avatars play more nicely with text next to it.
 
+    .highcontrast-mode({
+        background-color: var(--black);
+        box-shadow: 0 0 0 1px var(--black);
+
+        .s-avatar--letter {
+            color: var(--white);
+        }
+    });
+
     .s-avatar--letter {
         display: block; // Make sure we're treating the letter as a block-level element
         color: @white; // Force a light appearance of text rendering

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

@@ -20,10 +20,6 @@
     border-color: @border;
     background-color: @background;
     color: @color;
-
-    .s-tag--dismiss {
-        background-color: transparent;
-    }
 }
 
 //  ===========================================================================
@@ -46,7 +42,7 @@
     vertical-align: middle;
     white-space: nowrap;
 
-    .badge-styles(var(--black-100), var(--black-050), var(--black-700));
+    .badge-styles(var(--bc-medium), var(--black-050), var(--black-700));
 
     a&:hover {
         text-decoration: none;
@@ -93,6 +89,14 @@
 .s-badge__bronze {
     .badge-styles(var(--bronze-darker), var(--bronze-lighter), var(--black-700));
 }
+.s-badge__gold,
+.s-badge__silver,
+.s-badge__bronze {
+    .highcontrast-mode({
+        border-color: currentColor;
+        color: var(--black-900);
+    });
+}
 
 //  $$  Number Counts
 //  ---------------------------------------------------------------------------
@@ -101,15 +105,19 @@
 }
 .s-badge__votes {
     .badge-styles(var(--black-150), var(--white), var(--black-700));
+
+    .highcontrast-mode({ border-color: currentColor; });
 }
 .s-badge__answered {
     .badge-styles(transparent, var(--green-400), var(--white));
 }
 .s-badge__rep {
     .badge-styles(var(--green-400), var(--white), var(--green-500));
+    .highcontrast-mode({ border-color: currentColor; });
 }
 .s-badge__rep-down {
     .badge-styles(var(--red-400), var(--white), var(--red-500));
+    .highcontrast-mode({ border-color: currentColor; });
 }
 .s-badge__important {
     .badge-styles(transparent, var(--red-600), var(--white));
@@ -119,9 +127,11 @@
 //  ---------------------------------------------------------------------------
 .s-badge__admin {
     .badge-styles(var(--theme-primary-200), var(--theme-primary-075), var(--theme-primary-800));
+    .highcontrast-mode({ border-color: currentColor; });
 }
 .s-badge__moderator {
     .badge-styles(var(--theme-secondary-200), var(--theme-secondary-075), var(--theme-secondary-800));
+    .highcontrast-mode({ border-color: currentColor; });
 
     &:before {
         --s-badge-moderator-icon: url("data:image/svg+xml,%3Csvg width='12' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.528.746c.257-.329.675-.327.93 0l4.42 5.66c.258.329.257.864 0 1.192l-4.42 5.66c-.256.328-.674.327-.93 0l-4.42-5.66c-.257-.329-.256-.865 0-1.192l4.42-5.66z' fill='%23fff'/%3E%3C/svg%3E");
@@ -157,9 +167,11 @@
         margin-top: 0;
     }
 }
+
 .s-badge__staff {
     // Staff badges are always "Stack Overflow Orange"
-    .badge-styles(var(--orange-200), var(--orange-100), var(--orange-900));
+    .badge-styles(var(--orange-300), var(--orange-100), var(--orange-900));
+    .highcontrast-mode({ border-color: currentColor; });
 }
 
 //  $$  Award Count

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

@@ -26,6 +26,8 @@
         margin-right: @su4;
         margin-left: @su4;
 
+        .highcontrast-mode({ color: var(--black-350); });
+
         #stacks-internals #screen-sm({
             margin-right: @su2;
             margin-left: @su2;

package/lib/css/components/_stacks-button-groups.less

@@ -48,6 +48,17 @@
             z-index: @zi-selected;
         }
 
+        .highcontrast-mode({
+            &.is-selected {
+                background-color: var(--black-400);
+                color: var(--white);
+
+                .s-btn--number {
+                    color: var(--black);
+                }
+            }
+        });
+
         &:active {
             z-index: @zi-active;
         }

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

@@ -34,6 +34,14 @@
         cursor: pointer;
         user-select: none;
 
+        .highcontrast-mode({
+            border-color: currentColor;
+
+            &:not(.s-btn__link):not(.s-btn__unset) {
+                text-decoration: none;
+            }
+        });
+
         button &,
         button[type="submit"] &,
         button[type="reset"] & {
@@ -150,6 +158,8 @@
             font-size: @fs-caption;
             line-height: @lh-xs;
             background-color: currentColor;
+
+            .highcontrast-mode({ opacity: 0.8; });
         }
 
         .s-btn--number {
@@ -159,7 +169,8 @@
 
     .s-btn__primary:not(.is-selected) .s-btn--number,
     .s-btn__danger.s-btn__filled:not(.is-selected) .s-btn--number {
-        .dark-mode({ color: @black; });
+        .dark-mode({ color: var(--white); });
+        .highcontrast-mode({ color: var(--black); });
     }
 
     //  ============================================================================
@@ -201,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);
@@ -216,6 +233,12 @@
         #stacks-internals #load-config();
         color: @button-muted-color;
 
+        .highcontrast-mode({
+            &.s-btn__filled {
+                border-color: transparent;
+            }
+        });
+
         &:hover,
         &:focus,
         &:active {
@@ -258,6 +281,16 @@
 
             .dark-mode({ box-shadow: none; });
 
+            .highcontrast-mode({
+                background-color: var(--black-400);
+                border-color: transparent;
+                color: var(--white);
+
+                .s-btn--number {
+                    color: var(--black);
+                }
+            });
+
             &:hover,
             &:focus,
             &:active {
@@ -272,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 {
@@ -279,6 +313,14 @@
                 background-color: @button-muted-filled-selected-background-color;
                 box-shadow: none;
 
+                .highcontrast-mode({
+                    background-color: var(--black-700);
+
+                    .s-btn--number {
+                        color: var(--black);
+                    }
+                });
+
                 &:focus {
                     box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
                 }
@@ -293,6 +335,12 @@
         #stacks-internals #load-config();
         color: @button-danger-color;
 
+        .highcontrast-mode({
+            &.s-btn__filled {
+                border-color: transparent;
+            }
+        });
+
         &:hover,
         &:focus,
         &:active {
@@ -306,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 {
@@ -335,6 +384,18 @@
 
             .dark-mode({ box-shadow: none; });
 
+            .highcontrast-mode({
+                color: var(--white);
+
+                &:focus {
+                    box-shadow: 0 0 0 @su4 var(--focus-ring-error);
+                }
+
+                .s-btn--number {
+                    color: var(--black);
+                }
+            });
+
             &:hover,
             &:focus,
             &:active {
@@ -359,6 +420,11 @@
                 &:focus {
                     box-shadow: 0 0 0 @su4 var(--focus-ring-error);
                 }
+                .highcontrast-mode({
+                    .s-btn--number {
+                        color: var(--black);
+                    }
+                });
             }
 
             .s-btn--number {
@@ -375,7 +441,19 @@
         background-color: var(--theme-button-primary-background-color);
         box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
 
-        .dark-mode({ box-shadow: none; });
+        .dark-mode({
+            box-shadow: none;
+
+            &:not(.is-selected) {
+                color: var(--black);
+            }
+        });
+        .highcontrast-mode({
+            &:not(.is-selected) {
+                border-color: transparent;
+                color: var(--white);
+            }
+        });
 
         &:hover,
         &:focus,
@@ -389,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);
@@ -403,22 +487,25 @@
     //  $   MISC STYLES
     //  ============================================================================
     .s-btn__google {
-        border-color: var(--black-100);
+        border-color: var(--bc-medium);
         background-color: var(--white);
         color: var(--black-700);
 
         &:hover,
         &:focus {
-            border-color: var(--black-150);
+            border-color: var(--bc-darker);
             background-color: var(--black-025);
             color: var(--black-800);
         }
 
         &:active {
-            border-color: var(--black-200);
             background-color: var(--black-050);
             color: var(--black-900);
         }
+
+        &:focus {
+            box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
+        }
     }
 
     .s-btn__facebook {
@@ -426,6 +513,8 @@
         background-color: #385499;
         color: #fff;
 
+        .highcontrast-mode({ border-color: transparent; });
+
         &:hover,
         &:focus {
             background-color: darken(#385499, 5%);
@@ -442,6 +531,8 @@
         background-color: var(--black-750);
         color: var(--white);
 
+        .highcontrast-mode({ border-color: transparent; });
+
         &:hover,
         &:focus {
             background-color: var(--black-800);
@@ -452,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;
@@ -469,10 +565,6 @@
         user-select: auto;
     }
 
-    .s-btn__unset:focus {
-        color: unset;
-    }
-
     .s-btn__link {
         display: inline;
         padding: 0;
@@ -491,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

@@ -15,7 +15,7 @@
 //  ----------------------------------------------------------------------------
 .s-card {
     padding: @su12;
-    border: 1px solid var(--black-100);
+    border: 1px solid var(--bc-medium);
     border-radius: @br-sm;
     background-color: var(--white);
 
@@ -24,25 +24,21 @@
     }
 }
 
-//  ============================================================================
-//  $   LINKED CARDS
-//  ----------------------------------------------------------------------------
-a.s-card:not(.s-card__muted) {
-    &:hover,
-    &:focus,
-    &:active {
-        border-color: var(--black-200);
-    }
-}
-
 //  ============================================================================
 //  $   MODIFIERS
 //  ----------------------------------------------------------------------------
 .s-card__muted {
-    border-color: var(--black-075);
+    border-color: var(--bc-light);
 
     //  Dim only the first child card content
     > * {
         opacity: 0.65;
     }
 }
+
+//  ============================================================================
+//  $   LINKED CARDS
+//  ----------------------------------------------------------------------------
+a.s-card {
+    text-decoration: none !important;
+}

package/lib/css/components/_stacks-code-blocks.less

@@ -115,7 +115,7 @@ pre.s-code-block .s-code-block--line-numbers {
     text-align: right;
     border-width: 0;
     border-style: solid;
-    border-color: var(--black-100);
+    border-color: var(--bc-medium);
     border-right-width: 1px;
     margin: -@su12;
     margin-right: @su12;