@stackoverflow/stacks 1.6.5 → 1.6.7

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

@@ -4,21 +4,25 @@
     --_ai-fc: @white;
 
     // CONTEXTUAL STYLES
-    .highcontrast-mode({ --_ai-fc: var(--white); });
+    .highcontrast-mode({
+        --_ai-fc: var(--white);
+    });
 
     // VARIANTS
+    &&__danger {
+        --_ai-bg: var(--red-500);
+        --_ai-focus-ring: var(--focus-ring-error);
+    }
+
     &&__success {
         --_ai-bg: var(--green-500);
         --_ai-focus-ring: var(--focus-ring-success);
     }
+
     &&__warning {
         --_ai-bg: var(--yellow-600);
         --_ai-focus-ring: var(--focus-ring-warning);
     }
-    &&__danger {
-        --_ai-bg: var(--red-500);
-        --_ai-focus-ring: var(--focus-ring-error);
-    }
 
     background-color: var(--_ai-bg);
     box-shadow: 0 0 0 var(--su-static4) var(--_ai-focus-ring);

package/lib/css/components/avatars.less

@@ -7,13 +7,13 @@
 
     // CONTEXTUAL STYLES
     .highcontrast-mode({
-        background-color: var(--black);
-        box-shadow: 0 0 0 1px var(--black);
-        color: var(--white);
-
         .s-avatar--letter {
             color: var(--white);
         }
+
+        background-color: var(--black);
+        box-shadow: 0 0 0 1px var(--black);
+        color: var(--white);
     });
 
     // MODIFIERS
@@ -22,36 +22,43 @@
     &&__48 {
         --_av-br: var(--br-md);
     }
+
     &&__96,
     &&__128 {
         --_av-br: calc(var(--br-lg) + var(--br-sm));
         --_av-scale-badge: 3;
     }
+
     &&__24 {
         --_av-size: var(--su-static24);
         --_av-fs-letter: var(--su-static16);
         --_av-scale-badge: 1.1;
     }
+
     &&__32 {
         --_av-size: var(--su-static32);
         --_av-fs-letter: calc(var(--su-static24) - var(--su-static2));
         --_av-scale-badge: 1.3;
     }
+
     &&__48 {
         --_av-size: var(--su-static48);
         --_av-fs-letter: calc(var(--su-static32) + var(--su-static2));
         --_av-scale-badge: 1.6;
     }
+
     &&__64 {
         --_av-size: var(--su-static64);
         --_av-br: var(--br-lg);
         --_av-fs-letter: calc(var(--su-static48) - var(--su-static4));
         --_av-scale-badge: 2.4;
     }
+
     &&__96 {
         --_av-size: var(--su-static96);
         --_av-fs-letter: calc(var(--su-static64) + var(--su-static2));
     }
+
     &&__128 {
         --_av-size: var(--su-static128);
         --_av-fs-letter: calc(var(--su-static96) - var(--su-static8));
@@ -65,15 +72,17 @@
         -webkit-transform: scale(var(--_av-scale-badge));
         transform: scale(var(--_av-scale-badge));
     }
+
     & &--image {
         border-radius: var(--_av-br);
         display: block;
         height: var(--_av-size);
         width: var(--_av-size);
     }
+
     & &--letter {
-        display: block; // Make sure we're treating the letter as a block-level element
         color: @white; // Force a light appearance of text rendering
+        display: block; // Make sure we're treating the letter as a block-level element
         font-size: var(--_av-fs-letter); // Force a font size so the avatar text doesn't get smaller as the window resizes
         font-weight: bold;
         line-height: 1.4; // Guards against some line-height trolling from the parent

package/lib/css/components/award-bling.less

@@ -5,9 +5,11 @@
     &&__gold {
         --_ab-before-bg: var(--gold);
     }
+
     &&__silver {
         --_ab-before-bg: var(--silver);
     }
+
     &&__bronze {
         --_ab-before-bg: var(--bronze);
     }

package/lib/css/components/badges.less

@@ -35,11 +35,13 @@
         --_ba-as: flex-start;
         --_ba-fs: var(--fs-fine);
     }
+
     &&__xs {
         --_ba-lh: 1.5;
         --_ba-px: var(--su2);
         --_ba-wmn: calc(var(--su-static16) + var(--su-static2));
     }
+
     &&__sm {
         --_ba-lh: 1.8;
         --_ba-px: var(--su4);
@@ -52,16 +54,21 @@
     &&__bronze {
         --_ba-fc: var(--black-700);
 
-        .highcontrast-mode({ --_ba-fc: var(--black-900); });
+        .highcontrast-mode({
+            --_ba-fc: var(--black-900);
+        });
     }
+
     &&__gold {
         --_ba-bc: var(--gold-darker);
         --_ba-bg: var(--gold-lighter);
     }
+
     &&__silver {
         --_ba-bc: var(--silver-darker);
         --_ba-bg: var(--silver-lighter);
     }
+
     &&__bronze {
         --_ba-bc: var(--bronze-darker);
         --_ba-bg: var(--bronze-lighter);
@@ -74,28 +81,35 @@
         --_ba-bc: transparent;
         --_ba-fc: var(--white);
     }
+
     &&__rep,
     &&__rep-down,
     &&__votes:not(&__answered) {
         --_ba-bg: var(--white);
     }
+
     &&__answered {
         --_ba-bg: var(--green-400);
     }
+
     &&__bounty {
         --_ba-bg: var(--blue-600);
     }
+
     &&__important {
         --_ba-bg: var(--red-600);
     }
+
     &&__rep {
         --_ba-bc: var(--green-400);
         --_ba-fc: var(--green-500);
     }
+
     &&__rep-down {
         --_ba-bc: var(--red-400);
         --_ba-fc: var(--red-500);
     }
+
     &&__votes:not(&__answered) {
         --_ba-bc: var(--black-150);
         --_ba-fc: var(--black-700);
@@ -107,6 +121,7 @@
         --_ba-bg: var(--theme-primary-075);
         --_ba-fc: var(--theme-primary-800);
     }
+
     &&__moderator {
         --_ba-bc: var(--theme-secondary-200);
         --_ba-bg: var(--theme-secondary-075);
@@ -125,6 +140,7 @@
             --_ba-before-mt: 0;
             --_ba-before-w: calc(var(--su-static8) - var(--su-static1)); // 7px
         }
+
         &.s-badge__sm {
             --_ba-g: var(--su-static2);
             --_ba-before-h: calc(var(--su-static12) - var(--su-static1)); // 11px
@@ -147,6 +163,7 @@
             mask-size: contain;
         }
     }
+
     &&__staff {
         // Staff badges are always "Stack Overflow Orange"
         --_ba-bc: var(--orange-300);
@@ -161,6 +178,7 @@
             --_ba-bc: transparent;
         }
     }
+
     &&__danger {
         --_ba-bc: var(--red-600);
         --_ba-bg: var(--red-100);
@@ -170,7 +188,9 @@
             --_ba-bg: var(--red-500);
             --_ba-fc: @white;
 
-            .highcontrast-mode({ --_ba-fc: var(--white); });
+            .highcontrast-mode({
+                --_ba-fc: var(--white);
+            });
         }
     }
     &&__info {
@@ -178,11 +198,13 @@
         --_ba-bg: var(--blue-100);
         --_ba-fc: var(--blue-900);
     }
+
     &&__warning {
         --_ba-bc: var(--yellow-600);
         --_ba-bg: var(--yellow-100);
         --_ba-fc: var(--yellow-900);
     }
+
     &&__muted {
         --_ba-bc: var(--black-600);
         --_ba-bg: var(--black-100);
@@ -197,8 +219,8 @@
     // CHILD ELEMENTS
     &--image, // Included with no base class to account for usage in .s-progress__badge
     & &--image {
-        display: inline-flex;
         align-self: center;
+        display: inline-flex;
         margin-right: var(--su1);
         margin-left: calc((var(--su4) + var(--su1)) * -1);
     }

package/lib/css/components/breadcrumbs.less

@@ -8,6 +8,15 @@
     });
 
     // CHILD ELEMENTS
+    & &--divider {
+        .highcontrast-mode({
+            color: var(--fc-light);
+        });
+
+        margin-left: var(--_br-divider-px);
+        margin-right: var(--_br-divider-px);
+    }
+
     & &--item {
         align-items: center;
         display: flex;
@@ -15,12 +24,7 @@
         margin-bottom: var(--su2);
         margin-top: var(--su2);
     }
-    & &--divider {
-        .highcontrast-mode({ color: var(--fc-light); });
 
-        margin-left: var(--_br-divider-px);
-        margin-right: var(--_br-divider-px);
-    }
     & &--link {
         color: var(--_br-link-fc);
 

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

@@ -45,11 +45,13 @@
                 border-radius: 0;
             }
         }
+
         &:last-child:not(:only-child) {
             .s-btn:not(:last-child) {
                 border-radius: 0;
             }
         }
+
         &:first-child:not(:only-child) {
             .s-btn:not(:first-child) {
                 border-radius: 0;
@@ -64,6 +66,7 @@
         &:active {
             z-index: var(--zi-active);
         }
+
         &.is-selected,
         &--radio:checked + .s-btn {
             z-index: var(--zi-selected); // When the button is active or selected, it should pop above its siblings

package/lib/css/components/buttons.less

@@ -25,6 +25,7 @@
     --_bu-filled-bg: var(--theme-button-filled-background-color);
     --_bu-filled-bg-active: var(--theme-button-filled-active-background-color);
     --_bu-filled-bg-selected: var(--theme-button-filled-selected-background-color);
+    --_bu-filled-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0, 100%, 0.7);
     --_bu-filled-fc: var(--theme-button-filled-color);
     --_bu-filled-fc-active: var(--theme-button-filled-hover-color); // Note: hover color used here intentionally
     --_bu-filled-fc-hover: var(--theme-button-filled-hover-color);
@@ -44,7 +45,9 @@
     // CONTEXTUAL STYLES
     .dark-mode({
         --_bu-bs: none;
+        --_bu-filled-bs: var(--_bu-bs);
     });
+
     .highcontrast-mode({
         --_bu-bc: currentColor;
         --_bu-filled-bc: var(--_bu-bc);
@@ -57,24 +60,29 @@
     &[disabled],
     &[aria-disabled="true"] {
         --_bu-bs: none !important;
+        --_bu-filled-bs: var(--_bu-bs);
         opacity: var(--_o-disabled-static);
         pointer-events: none;
         text-decoration: none;
     }
+
     button &,
     button[type="submit"] &,
     button[type="reset"] & {
         -webkit-appearance: button; // [1]
     }
+
     &.grid {
         display: flex; // Override &&__danger buttons having inline-block by default
     }
+
     &.is-loading {
         .svg-icon:first-child {
             margin-left: -23px;
             opacity: 0; // [2]
         }
     }
+
     &.is-selected,
     .s-btn-group.s-btn-group--radio &--radio:checked + & {
         background-color: var(--_bu-bg-selected);
@@ -84,6 +92,7 @@
         .s-btn--number {
             color: var(--_bu-number-fc-selected);
         }
+
         &.s-btn__filled { // this needs to live here to adapt to radio button-group
             border-color: var(--_bu-filled-bc-selected);
             background-color: var(--_bu-filled-bg-selected);
@@ -104,6 +113,7 @@
             }
         }
     }
+
     &.is-selected:not(:focus),
     .s-btn-group.s-btn-group--radio &--radio:checked:not(:focus) + & {
         box-shadow: none;
@@ -111,12 +121,12 @@
 
     // MODIFIERS
     &&__filled {
-        --_bu-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0, 100%, 0.7);
-
         border-color: var(--_bu-filled-bc);
         background-color: var(--_bu-filled-bg);
+        box-shadow: var(--_bu-filled-bs);
         color: var(--_bu-filled-fc);
     }
+
     &&__outlined {
         border-color: var(--_bu-outlined-bc);
         background-color: var(--_bu-outlined-bg);
@@ -132,10 +142,12 @@
 
         outline: initial;
     }
+
     &&__link {
         --_bu-baw: 0;
         --_bu-br: 0;
         --_bu-bs: none;
+        --_bu-filled-bs: var(--_bu-bs);
         --_bu-focus-ring: none;
         --_bu-p: 0;
 
@@ -147,6 +159,7 @@
         &[aria-disabled="true"] {
             --_bu-bg: none;
         }
+
         &.s-btn__dropdown {
             padding-right: 0.9em;
         }
@@ -156,6 +169,7 @@
         font: inherit;
         text-align: inherit;
     }
+
     &&__unset {
         &,
         &:hover,
@@ -165,6 +179,7 @@
             --_bu-bg: none;
             --_bu-br: 0;
             --_bu-bs: none;
+            --_bu-filled-bs: var(--_bu-bs);
             --_bu-fc: unset;
             --_bu-focus-ring: none;
             --_bu-p: 0;
@@ -192,6 +207,7 @@
 
         padding-right: calc(var(--_bu-p) * 2.5);
     }
+
     &&__icon {
         .svg-icon {
             vertical-align: baseline;
@@ -207,9 +223,11 @@
         --_bu-fs: var(--fs-fine);
         --_bu-p: 0.6em;
     }
+
     &&__sm {
         --_bu-fs: var(--fs-caption);
     }
+
     &&__md {
         --_bu-br: calc(var(--br-sm) + var(--su-static1));
         --_bu-fs: var(--fs-body3);
@@ -223,11 +241,11 @@
             --_bu-filled-bc: transparent;
         });
     }
+
     &&__danger {
         --_bu-bg-active: var(--red-100);
         --_bu-bg-hover: var(--red-050);
         --_bu-bg-selected: var(--red-200);
-        --_bu-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.4);
         --_bu-fc: var(--red-600);
         --_bu-fc-active: var(--_bu-fc);
         --_bu-fc-hover: var(--red-700);
@@ -239,6 +257,7 @@
         --_bu-filled-bg-active: var(--red-700);
         --_bu-filled-bg-hover: var(--red-600);
         --_bu-filled-bg-selected: var(--red-800);
+        --_bu-filled-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.4);
         --_bu-filled-fc: var(--white);
         --_bu-filled-fc-active: var(--_bu-filled-fc);
         --_bu-filled-fc-hover: var(--_bu-filled-fc);
@@ -257,6 +276,7 @@
                 --_bu-number-fc: var(--white);
                 --_bu-number-fc-selected: var(--black);
             });
+
             .highcontrast-dark-mode({
                 --_bu-filled-fc: var(--white);
                 --_bu-number-fc: var(--black);
@@ -264,11 +284,11 @@
             });
         }
     }
+
     &&__muted {
         --_bu-bg-active: var(--black-050);
         --_bu-bg-hover: var(--black-025);
         --_bu-bg-selected: var(--black-075);
-        --_bu-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.4);
         --_bu-fc: var(--black-500);
         --_bu-fc-active: var(--_bu-fc);
         --_bu-fc-hover: var(--black-600);
@@ -280,6 +300,7 @@
         --_bu-filled-bg-active: var(--black-200);
         --_bu-filled-bg-hover: var(--black-150);
         --_bu-filled-bg-selected: var(--black-350);
+        --_bu-filled-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.4);
         --_bu-filled-fc: var(--black-700);
         --_bu-filled-fc-active: var(--_bu-filled-fc);
         --_bu-filled-fc-hover: var(--_bu-filled-fc);
@@ -302,6 +323,7 @@
             }
         });
     }
+
     &&__primary {
         --_bu-bg: var(--theme-button-primary-background-color);
         --_bu-bg-active: var(--theme-button-primary-active-background-color);
@@ -325,9 +347,11 @@
             --_bu-number-fc: var(--white);
             --_bu-number-fc-selected: var(--black);
         });
+
         .highcontrast-mode({
             --_bu-bc: transparent;
         });
+
         .highcontrast-dark-mode({
             --_bu-bg: var(--theme-secondary-400);
             --_bu-bg-active: var(--theme-secondary-600);
@@ -344,6 +368,7 @@
             --_bu-bc: transparent;
         });
     }
+
     &&__facebook {
         @_fb-brand: #385499;
         --_bu-bc: transparent;
@@ -355,6 +380,7 @@
         --_bu-fc-hover: var(--_bu-fc);
         --_bu-hc-bc: transparent;
     }
+
     &&__google {
         --_bu-bc: var(--bc-medium);
         --_bu-bg: var(--white);
@@ -365,6 +391,7 @@
         --_bu-fc-hover: var(--black-800);
         --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring-muted);
     }
+
     &&__github {
         --_bu-bg: var(--black-750);
         --_bu-bg-active: var(--black);
@@ -386,9 +413,11 @@
         line-height: var(--lh-xs);
         background-color: currentColor;
     }
+
     & &--number {
         color: var(--_bu-number-fc);
     }
+
     &--radio { // This lives alongside a .s-btn element. These styles are the equivelent of `.v-visible-sr`
         border: 0;
         clip-path: inset(50%);
@@ -413,6 +442,7 @@
             background-color: var(--_bu-bg-hover);
             color: var(--_bu-fc-hover);
         }
+
         &:active {
             &.s-btn__filled {
                 background-color: var(--_bu-filled-bg-active);
@@ -423,13 +453,13 @@
             color: var(--_bu-fc-active);
         }
     }
+
     &:focus,
     &--radio:focus + & {
         box-shadow: var(--_bu-focus-ring);
         outline: none;
     }
 
-    // STYLES MODIFIED BY COMPONENT-SPECIFIC CUSTOM PROPERTIES
     background-color: var(--_bu-bg);
     border: var(--_bu-baw) solid var(--_bu-bc);
     border-radius: var(--_bu-br);
@@ -438,7 +468,6 @@
     font-size: var(--_bu-fs);
     padding: var(--_bu-p);
 
-    // STATIC COMPONENT STYLES
     cursor: pointer;
     display: inline-block;
     font-family: inherit;

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

@@ -14,10 +14,12 @@
         .hljs-title {
             color: var(--highlight-literal);
         }
+
         .hljs-bullet,
         .hljs-code {
             color: var(--highlight-punctuation);
         }
+
         .hljs-doctag,
         .hljs-keyword,
         .hljs-meta-keyword,
@@ -28,6 +30,7 @@
         .hljs-selector-tag {
             color: var(--highlight-keyword);
         }
+
         .hljs-name,
         .hljs-number,
         .hljs-quote,
@@ -36,6 +39,7 @@
         .hljs-type {
             color: var(--highlight-namespace);
         }
+
         .hljs-link,
         .hljs-meta-string,
         .hljs-regexp,
@@ -46,33 +50,42 @@
         .hljs-variable {
             color: var(--highlight-variable);
         }
+
         .hljs-addition {
             color: var(--highlight-addition);
         }
+
         .hljs-attr {
             color: var(--highlight-attribute);
         }
+
         .hljs-attribute {
             color: var(--highlight-symbol);
         }
+
         .hljs-comment {
             color: var(--highlight-comment);
         }
+
         .hljs-deletion {
             color: var(--highlight-deletion);
         }
+
         .hljs-emphasis {
             font-style: italic;
         }
+
         .hljs-strong {
             font-weight: bold;
         }
+
         .hljs-subst {
             color: var(--highlight-color);
         }
 
         font-family: inherit;
     }
+
     pre& {
         .s-code-block--line-numbers {
             background-color: var(--_cb-line-numbers-bg);

package/lib/css/components/empty-states.less

@@ -1,12 +1,12 @@
 .s-empty-state {
     // CHILD ELEMENTS
     p {
-        font-size: var(--fs-body1);
-        margin-bottom: var(--su12);
-
         strong {
             color: var(--fc-dark);
         }
+
+        font-size: var(--fs-body1);
+        margin-bottom: var(--su12);
     }
 
     color: var(--fc-light);