@stackoverflow/stacks 0.69.1 → 0.73.0

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

@@ -11,9 +11,8 @@
 //  ----------------------------------------------------------------------------
 
 #stacks-internals #responsify('.d-block', { display: block !important; });
-@media print { .print\:d-block { display: block !important; } }
-.d-flex { display: flex !important; }
-.d-inline-flex { display: inline-flex !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; });
 #stacks-internals #responsify('.d-inline-grid', { display: inline-grid !important; });
 #stacks-internals #responsify('.d-inline', { display: inline !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

@@ -21,38 +21,9 @@
     @body-font-color:                                var(--theme-body-font-color);
     @body-type-face:                                 var(--theme-body-font-family);
     @body-background:                                var(--white);
-    @body-site-width:                                1060px;
-
-    //  Links
-    @link-color:                                     var(--theme-secondary-400);
-    @link-color-hover:                               var(--theme-secondary-350);
-    @link-color-visited:                             var(--theme-secondary-500);
-
-    //  Button Default
-    @button-color:                                   var(--theme-secondary-400);
-    @button-background-color:                        transparent;
-    @button-hover-color:                             var(--theme-secondary-500);
-    @button-hover-background-color:                  var(--theme-secondary-050);
-    @button-active-background-color:                 var(--theme-secondary-100);
-    @button-selected-color:                          var(--theme-secondary-900);
-    @button-selected-background-color:               var(--theme-secondary-150);
-
-    //  Button Filled
-    @button-filled-color:                            var(--theme-secondary-700);
-    @button-filled-background-color:                 var(--theme-secondary-050);
-    @button-filled-border-color:                     var(--theme-secondary-350);
-    @button-filled-hover-color:                      var(--theme-secondary-800);
-    @button-filled-hover-background-color:           var(--theme-secondary-100);
-    @button-filled-active-background-color:          var(--theme-secondary-150);
-    @button-filled-active-border-color:              var(--theme-secondary-350);
-    @button-filled-selected-color:                   var(--theme-secondary-900);
-    @button-filled-selected-background-color:        var(--theme-secondary-300);
-    @button-filled-selected-border-color:            var(--theme-secondary-500);
-
-    //  Button Outline
-    @button-outlined-border-color:                   var(--theme-secondary-300);
-    @button-outlined-selected-border-color:          var(--theme-secondary-400);
+    @body-site-width:                                1060px; // DEPRECATED will be removed in a future release
 
+    // DEPRECATED will be removed in a future release
     //  Button Muted
     @button-muted-color:                             var(--black-500);
     @button-muted-hover-color:                       var(--black-600);
@@ -61,10 +32,12 @@
     @button-muted-selected-color:                    var(--black-700);
     @button-muted-selected-background-color:         var(--black-075);
 
+    // DEPRECATED will be removed in a future release
     //  Button Muted Outlined
     @button-muted-outlined-border-color:             var(--black-300);
     @button-muted-outlined-selected-border-color:    var(--black-400);
 
+    // DEPRECATED will be removed in a future release
     //  Button Muted Filled
     @button-muted-filled-color:                      var(--black-700);
     @button-muted-filled-background-color:           var(--black-100);
@@ -74,6 +47,7 @@
     @button-muted-filled-selected-color:             var(--black-800);
     @button-muted-filled-selected-background-color:  var(--black-350);
 
+    // DEPRECATED will be removed in a future release
     //  Button Danger
     @button-danger-color:                            var(--red-600);
     @button-danger-hover-color:                      var(--red-700);
@@ -82,10 +56,12 @@
     @button-danger-selected-color:                   var(--red-900);
     @button-danger-selected-background-color:        var(--red-200);
 
+    // DEPRECATED will be removed in a future release
     //  Button Danger Outlined
     @button-danger-outlined-border-color:            var(--red-500);
     @button-danger-outlined-selected-border-color:   var(--red-600);
 
+    // DEPRECATED will be removed in a future release
     //  Button Danger Filled
     @button-danger-filled-color:                     @white;
     @button-danger-filled-background-color:          var(--red-500);
@@ -96,38 +72,19 @@
     @button-danger-filled-selected-background-color: var(--red-800);
     @button-danger-filled-number-color:              var(--black-900);
 
-    //  Button Primary
-    @button-primary-color:                           @white;
-    @button-primary-background-color:                var(--theme-secondary-400);
-    @button-primary-hover-color:                     @white;
-    @button-primary-hover-background-color:          var(--theme-secondary-500);
-    @button-primary-active-background-color:         var(--theme-secondary-700);
-    @button-primary-selected-color:                  var(--white);
-    @button-primary-selected-background-color:       var(--theme-secondary-700);
-    @button-primary-number-color:                    var(--theme-secondary-900);
-
+    // 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));
@@ -118,10 +126,12 @@
 //  $$  Users
 //  ---------------------------------------------------------------------------
 .s-badge__admin {
-    .badge-styles(transparent, var(--theme-primary-075), var(--theme-primary-800));
+    .badge-styles(var(--theme-primary-200), var(--theme-primary-075), var(--theme-primary-800));
+    .highcontrast-mode({ border-color: currentColor; });
 }
 .s-badge__moderator {
-    .badge-styles(transparent, var(--theme-secondary-075), var(--theme-secondary-800));
+    .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");
@@ -150,16 +160,18 @@
     }
 
     &.s-badge__xs:before {
-        --s-badge-moderator-icon: url("data:image/svg+xml,%3Csvg width='7' height='9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.798.246c.3-.329 1.1-.327 1.399 0l2.579 3.66c.3.329.298.864 0 1.192L4.196 8.75c-.299.329-1.1.327-1.398 0L.224 5.098a.904.904 0 010-1.192L2.798.246z' fill='%23fff'/%3E%3C/svg%3E");
+        --s-badge-moderator-icon: url("data:image/svg+xml,%3Csvg width='7' height='9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 .246c.3-.329.701-.327 1 0L6.776 4c.3.329.298.672 0 1L4 8.75c-.299.329-.702.327-1 0L.224 5c-.284-.324-.285-.675 0-1L3 .246z' fill='%23fff'/%3E%3C/svg%3E");
 
         width: 7px;
         height: 9px;
         margin-top: 0;
     }
 }
+
 .s-badge__staff {
     // Staff badges are always "Stack Overflow Orange"
-    .badge-styles(transparent, 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;
         }