@stackoverflow/stacks 1.2.0 → 1.3.2

package/lib/css/components/notices.less

@@ -6,206 +6,224 @@
 //  Stack Overflow. For documentation of all these classes and how to contribute,
 //  visit https://stackoverflow.design/
 //
-//  TABLE OF CONTENTS
-//  • BASE STYLE
-//  • LAYOUT TRANSITIONS
-//
-//  ============================================================================
-//  $   BASE STYLES
-//  ----------------------------------------------------------------------------
-//  $$  FILLED, MUTED
-.s-notice {
-    padding: var(--su16);
-    border: 1px solid transparent;
-    border-radius: var(--br-sm);
-    color: var(--fc-medium);
+.construct-notice-component() {
+    background: var(--_bg, var(--black-050));
+    border-color: var(--_bc, var(--bc-medium));
+    border-style: solid;
+    color: var(--_fc, var(--fc-medium));
     font-size: var(--fs-body1);
 
-    .s-toast & {
-        max-width: 44rem;
-        width: 100%;
-        padding-top: var(--su8);
-        padding-bottom: var(--su8);
-        box-shadow: var(--bs-sm);
-        pointer-events: all;
+    code {
+        background: var(--_code-bg, transparent);
     }
 
-    .s-notice--btn {
-        color: var(--fc-dark);
+    & &--btn {
+        color: inherit;
         padding: var(--su8);
-    }
-}
-
-//  ============================================================================
-//  $   VISUAL STYLES
-//  ============================================================================
-//  $$  INFO
-//  ----------------------------------------------------------------------------
-.s-notice__info,
-.s-banner__info {
-    border-color: var(--theme-secondary-150);
-    background-color: var(--theme-secondary-050);
 
-    &.s-notice__important,
-    &.s-banner__important {
-        background-color: var(--theme-secondary-400);
-    }
-
-    // Improve the presentation of buttons
-    .s-notice--btn {
         &:focus,
         &:hover {
-            background-color: var(--theme-secondary-300);
+            background: var(--_btn-focus-bg, var(--black-100));
         }
 
         &:active {
-            background-color: var(--theme-secondary-400);
+            background: var(--_btn-active-bg, var(--black-150));
         }
     }
 
-    code {
-        background-color: var(--theme-secondary-150);
+    &:not(&__important) {
+        .dark-mode({ --_bc: var(--_bg); });
+        .highcontrast-mode({ --_bc: currentColor; });
+        .highcontrast-dark-mode({ --_bc: currentColor; });
     }
-}
 
-//  $$  SUCCESS
-//  ----------------------------------------------------------------------------
-.s-notice__success,
-.s-banner__success {
-    border-color: var(--green-200);
-    background-color: var(--green-050);
-
-    // Bump up the border contrast in high contrast mode
-    .highcontrast-mode({
-        background-color: var(--green-200);
-        border-color: var(--green-400);
-    });
-
-    &.s-notice__important,
-    &.s-banner__important {
-        background-color: var(--green-400);
-        color: var(--black-900);
-
-        // Bump up the text in high contrast
+    &__important {
+        --_bc: var(--_bg);
+        --_bg: var(--black-700);
+        --_fc: var(--white);
+        --_btn-focus-bg: var(--black-800);
+        --_btn-active-bg: var(--black-900);
+
+        .highcontrast-mode({ --_bc: var(--_bg); });
+    }
+
+    &__danger {
+        --_bc: var(--red-200);
+        --_bg: var(--red-050);
+        --_btn-focus-bg: var(--red-100);
+        --_btn-active-bg: var(--red-200);
+    }
+    &__danger:not(&__important) {
         .highcontrast-mode({
-            background-color: var(--green-500);
-            color: var(--white);
-            border-color: transparent;
+            --_bg: var(--red-200);
         });
     }
-
-    // Improve the presentation of buttons
-    .s-notice--btn {
-        &:focus,
-        &:hover {
-            background-color: var(--green-100);
-        }
-
-        &:active {
-            background-color: var(--green-200);
-        }
+    &__danger&__important {
+        --_bc: var(--_bg);
+        --_bg: var(--red-500);
+        --_btn-focus-bg: var(--red-600);
+        --_btn-active-bg: var(--red-700);
+
+        .dark-mode({
+            --_bg: var(--red-400);
+            --_fc: var(--black-900);
+        });
+        .highcontrast-dark-mode({
+            --_bg: var(--red-500);
+            --_fc: var(--white);
+        });
     }
-}
 
-//  $$  WARNING
-//  ----------------------------------------------------------------------------
-.s-notice__warning,
-.s-banner__warning {
-    border-color: var(--yellow-300);
-    background-color: var(--yellow-050);
-
-    // Bump up the border contrast in high contrast mode
-    .highcontrast-mode({
-        background-color: var(--yellow-200);
-        border-color: var(--yellow-700);
-    });
-
-    &.s-notice__important,
-    &.s-banner__important {
-        background-color: var(--yellow-400);
-        color: var(--black-900);
-
-        // Bump up the text in high contrast
+    &__info {
+        --_bc: var(--theme-secondary-150);
+        --_bg: var(--theme-secondary-050);
+        --_btn-focus-bg: var(--theme-secondary-100);
+        --_btn-active-bg: var(--theme-secondary-150);
+        --_code-bg: var(--theme-secondary-150);
+    }
+    &__info:not(&__important) {
         .highcontrast-mode({
-            background-color: var(--yellow-500);
-            color: var(--white);
-            border-color: transparent;
+            --_bg: var(--theme-secondary-100);
+        });
+        .highcontrast-dark-mode({
+            --_bg: var(--theme-secondary-100);
+        });
+    }
+    &__info&__important {
+        --_bc: var(--_bg);
+        --_bg: var(--theme-secondary-400);
+        --_btn-focus-bg: var(--theme-secondary-500);
+        --_btn-active-bg: var(--theme-secondary-600);
+
+        .dark-mode({
+            --_bg: var(--theme-secondary-300);
+            --_fc: var(--black-900);
+        });
+        .highcontrast-dark-mode({
+            --_bg: var(--theme-secondary-400);
+            --_fc: var(--white);
         });
     }
 
-    // Improve the presentation of buttons
-    .s-notice--btn {
-        &:focus,
-        &:hover {
-            background-color: var(--yellow-200);
-        }
-
-        &:active {
-            background-color: var(--yellow-300);
-        }
+    &__success {
+        --_bc: var(--green-200);
+        --_bg: var(--green-050);
+        --_btn-focus-bg: var(--green-100);
+        --_btn-active-bg: var(--green-200);
+    }
+    &__success:not(&__important) {
+        .highcontrast-mode({
+            --_bg: var(--green-200);
+        });
+    }
+    &__success&__important {
+        --_bc: var(--_bg);
+        --_bg: var(--green-400);
+        --_fc: var(--black-900);
+        --_btn-focus-bg: var(--green-500);
+        --_btn-active-bg: var(--green-600);
+
+        .dark-mode({
+            --_bg: var(--green-500);
+            --_fc: var(--white);
+        });
+        .highcontrast-mode({
+            --_bg: var(--green-500);
+            --_fc: var(--white);
+        });
     }
 
-    code {
-        background-color: var(--yellow-200);
+    &__warning {
+        --_bc: var(--yellow-300);
+        --_bg: var(--yellow-050);
+        --_btn-focus-bg: var(--yellow-200);
+        --_btn-active-bg: var(--yellow-300);
+        --_code-bg: var(--yellow-200);
+    }
+    &__warning:not(&__important) {
+        .highcontrast-mode({
+            --_bg: var(--yellow-200);
+        });
+    }
+    &__warning&__important {
+        --_bc: var(--_bg);
+        --_bg: var(--yellow-400);
+        --_btn-focus-bg: var(--yellow-500);
+        --_btn-active-bg: var(--yellow-600);
+        --_fc: var(--black-900);
+
+        .dark-mode({
+            --_bg: var(--yellow-600);
+            --_fc: var(--white);
+        });
+        .highcontrast-mode({
+            --_bg: var(--yellow-700);
+            --_fc: var(--white);
+        });
     }
 }
 
-//  $$  DANGER
-//  ----------------------------------------------------------------------------
-.s-notice__danger,
-.s-banner__danger {
-    border-color: var(--red-200);
-    background-color: var(--red-050);
-
-    // Bump up the border contrast in high contrast mode
-    .highcontrast-mode({
-        background-color: var(--red-200);
-        border-color: var(--red-500);
-
-        &.s-notice__important,
-        &.s-banner__important {
-            background-color: var(--red-500);
-        }
-    });
-
-    &.s-notice__important,
-    &.s-banner__important {
-        background-color: var(--red-400);
+// Banner
+// TODO deprecate .s-banner (by turning it into a modifier on .s-notice)
+// This would reduce the amount of CSS we ship to the client and simplify our codebase
+.s-banner {
+    .construct-notice-component();
+    --_x-offset: 0;
+    //      When we use .s-banner, we need to adjust the padding-top on
+    //      the body tag. This class correctly adjusts the body padding ONLY if
+    //      the notice is one line. If it wraps to multiple lines, more classes or
+    //      (ideally) JS will need to be used to determine the notice's height
+    //      at the time of render. The padding value is determined like so:
+    //
+    //      50px (top bar) + 44px (notice height) - 1px (bottom border)
+    //
+    //      The borders subtraction are necessary to neatly tuck everything together.
+    //  ----------------------------------------------------------------------------
+    &__body-pt {
+        padding-top: 93px;
     }
-
-    // Improve the presentation of buttons
-    .s-notice--btn {
-        &:focus,
-        &:hover {
-            background-color: var(--red-100);
-        }
-
-        &:active {
-            background-color: var(--red-200);
-        }
+    //  If you want to put the banner above the topbar
+    &.is-pinned {
+        z-index: calc(var(--zi-navigation-fixed) + 1);
+    }
+    // If you want to hide and reveal the banner
+    &[aria-hidden="true"] {
+        --_x-offset: -50px; // TODO convert to su vars
+        visibility: hidden;
+        opacity: 0;
+    }
+    &[aria-hidden="false"] {
+        --_x-offset: 49px; // TODO convert to su vars
+        visibility: visible;
+        opacity: 1;
+    }
+    // When we want to keep hero content capped
+    .s-banner--container {
+        position: relative;
+        width: 100%;
+        max-width: calc(var(--s-step) * 10);
+        margin: 0 auto;
     }
-}
 
-//  $$  IMPORTANT
-//  ----------------------------------------------------------------------------
-.s-notice__important {
-    border-color: transparent;
-    background-color: var(--black-700);
-    color: var(--white);
+    border-width: var(--su-static1) 0;
+    inset: 0 0 auto 0;
+    padding: var(--su12);
+    position: fixed;
+    width: 100%;
+    z-index: calc(var(--zi-navigation-fixed) - 1); // Tuck below topbar
+    -webkit-transform: translate3d(0, var(--_x-offset), 0);
+    transform: translate3d(0, var(--_x-offset), 0);
 }
 
-.s-notice__info,
-.s-notice__success,
-.s-notice__warning,
-.s-notice__danger {
-    .dark-mode({ border-color: transparent; });
-    .highcontrast-mode({ border-color: currentColor; });
-
+// Notice
+.s-notice {
+    .construct-notice-component();
+    border-radius: var(--br-sm);
+    border-width: var(--su-static1);
+    padding: var(--su16);
 }
 
-//  ============================================================================
-//  $   TOASTS
-//  ----------------------------------------------------------------------------
+// Toast
 .s-toast {
     visibility: hidden;
     position: fixed;
@@ -230,4 +248,13 @@
     @media (prefers-reduced-motion) {
         transform: none;
     }
+
+    .s-notice {
+        max-width: 44rem;
+        width: 100%;
+        padding-top: var(--su8);
+        padding-bottom: var(--su8);
+        box-shadow: var(--bs-sm);
+        pointer-events: all;
+    }
 }

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

@@ -34,87 +34,6 @@
             width: 100%;
         }
     }
-
-    &.s-post-summary__legacy {
-        padding-left: 0; // Since stats have padding, we don't need it on the parent
-
-        #stacks-internals #screen-md({
-            padding-left: var(--su16);
-        });
-
-        .s-post-summary--stats {
-            width: auto;
-            flex-direction: row;
-            align-items: center;
-            gap: var(--su2);
-
-            .s-post-summary--stats-item {
-                min-width: var(--su64);
-                height: var(--su48);
-                flex-direction: column;
-                gap: 0;
-                font-size: var(--fs-caption);
-
-                &.s-post-summary--stats-item__emphasized {
-                    color: inherit;
-                }
-
-                &.has-accepted-answer .svg-icon {
-                    display: none;
-                }
-
-                .s-post-summary--stats-item-number {
-                    font-weight: normal;
-                    font-size: var(--fs-body3);
-                }
-
-                &.is-deleted,
-                &.is-published,
-                &.is-draft,
-                &.is-review,
-                &.is-closed,
-                &.is-archived,
-                &.is-pinned {
-                    display: none;
-                }
-            }
-
-            #stacks-internals #screen-md({
-                flex-direction: row;
-                align-items: center;
-                gap: var(--su8);
-
-                .s-post-summary--stats-item {
-                    min-width: auto;
-                    height: auto;
-                    flex-direction: row;
-                    gap: 3px; // HTML spacing
-
-                    .s-post-summary--stats-item-number {
-                        font-size: inherit;
-                    }
-
-                    &.s-post-summary--stats-item__emphasized {
-                        color: var(--fc-dark);
-                    }
-
-                    &.has-accepted-answer .svg-icon {
-                        display: block;
-                    }
-
-                    &.is-deleted,
-                    &.is-published,
-                    &.is-draft,
-                    &.is-review,
-                    &.is-closed,
-                    &.is-archived,
-                    &.is-pinned {
-                        display: block;
-                    }
-                }
-            });
-        }
-    }
 }
 
 //  [1] To override .s-btn class attributes
@@ -181,17 +100,13 @@
         }
 
         &.has-answers {
-            color: var(--green-600);
-            border: 1px solid var(--green-600);
+            color: var(--green-700);
+            border: 1px solid var(--green-700);
 
             &.has-accepted-answer {
-                color: @white;
-                background-color: var(--green-500);
-                border-color: var(--green-500);
-
-                .highcontrast-mode({
-                    color: var(--white);
-                });
+                color: var(--white);
+                background-color: var(--green-700);
+                border-color: var(--green-700);
             }
         }
 
@@ -202,15 +117,15 @@
         }
 
         &.is-warm {
-            color: var(--orange-800);
+            color: var(--yellow-800);
         }
 
         &.is-hot {
-            color: var(--orange-600);
+            color: var(--orange-800);
         }
 
         &.is-supernova {
-            color: var(--orange-400);
+            color: var(--red-800);
         }
 
         &.is-published {
@@ -390,39 +305,107 @@
 
 .s-post-summary__watched {
     background-color: var(--yellow-050);
-}
 
-.s-post-summary__deleted {
-    background-color: var(--red-050);
+    .s-post-summary--content-title > a {
+        color: var(--blue-700);
 
-    .is-deleted {
-        color: @white;
-        background-color: var(--red-500);
+        &:hover,
+        &:active{
+            color: var(--blue-700);
+        }
+        &:visited {
+            color: var(--blue-800);
+        }
+    }
+
+    .s-post-summary--stats {
+        color: var(--black-500);
+    }
+
+    .s-user-card {
+        .s-user-card--link {
+            color: var(--blue-700);
+        }
+
+        .s-user-card--rep,
+        .s-user-card--time {
+            color: var(--black-600);
+        }
     }
 }
 
-.s-post-summary__ignored,
 .s-post-summary__deleted {
-    .s-post-summary--content > *:not(.s-post-summary--content-menu-button) {
-        opacity: 0.6;
-    }
+    background-color: var(--red-025);
 
-    // TODO DEPRECATED remove `:not(.is-deleted)`
-    .s-post-summary--stats-item:not(.s-badge):not(.is-deleted) {
-        opacity: 0.6;
-        filter: grayscale(100%);
+    .s-badge__filled {
+        color: var(--white);
+
+        .dark-mode({
+            background-color: var(--red-800)
+        });
     }
 
-    .s-post-summary--content-title a {
-        color: var(--black-600);
+    .is-deleted {
+        color: var(--white);
+        background-color: var(--red-600);
+    }
 
+    .s-post-summary--meta-tags > .s-tag {
+        &,
         &:hover,
-        &:active {
+        &:active,
+        &:focus {
+            background-color: var(--black-075);
+        }
+
+    }
+}
+
+.s-post-summary__ignored {
+
+    .s-post-summary--stats {
+        color: var(--black-500);
+
+        .s-post-summary--stats-item {
+
+            &.has-answers {
+                color: var(--black-600);
+                border: 1px solid var(--black-075);
+                background-color: var(--black-075);
+
+                .has-accepted-answer {
+                    color: var(--black-600);
+                    background-color: var(--black-075);
+                    border-color: var(--black-075);
+                }
+            }
+        }
+
+        .s-post-summary--stats-item__emphasized {
             color: var(--black-500);
         }
+    }
+
+    .s-post-summary--meta-tags > .s-tag {
+        &,
+        &:hover,
+        &:active,
+        &:focus {
+            background-color: var(--black-050);
+        }
+    }
+}
+
+.s-post-summary__ignored,
+.s-post-summary__deleted {
+
+    .s-post-summary--content-title > a {
+        color: var(--black-500);
 
+        &:hover,
+        &:active,
         &:visited {
-            color: var(--black-700);
+            color: var(--black-500);
         }
     }
 
@@ -430,7 +413,27 @@
         color: var(--black-500);
     }
 
-    .s-post-summary--meta {
-        filter: grayscale(100%);
+    .s-post-summary--meta > *:not(.s-post-summary--meta-tags) {
+        color: var(--black-600);
     }
-}
+
+    .s-post-summary--meta-tags > .s-tag {
+        &,
+        &:hover,
+        &:active,
+        &:focus {
+            color: var(--black-600);
+        }
+    }
+
+    .s-user-card {
+        .s-user-card--link {
+            color: var(--black-500);
+        }
+
+        .s-user-card--rep,
+        .s-user-card--time {
+            color: var(--black-500);
+        }
+    }
+}

package/lib/css/components/progress-bars.less

@@ -209,7 +209,7 @@
         border-radius: 0;
         padding: var(--su12) var(--su6) 0 var(--su6);
         text-align: center;
-        color: var(--black-300);
+        color: var(--black-500);
         z-index: var(--zi-base);
     }