@stackoverflow/stacks 0.72.0 → 0.73.0

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

@@ -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,22 +74,12 @@
 
     // 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-300);
-    @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);

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

@@ -167,6 +167,7 @@
         margin-top: 0;
     }
 }
+
 .s-badge__staff {
     // Staff badges are always "Stack Overflow Orange"
     .badge-styles(var(--orange-300), var(--orange-100), var(--orange-900));

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

@@ -690,6 +690,11 @@ fieldset {
     border-radius: @br-sm + 1;
 }
 
+.s-textarea__md {
+    padding-top: 0.72em;
+    padding-bottom: 0.72em;
+}
+
 .s-input__lg,
 .s-textarea__lg,
 .s-select__lg > select {

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

@@ -30,6 +30,10 @@
     min-width: 12rem;
     width: 100%;
 
+    // Guard against popovers being in a container with white-space: nowrap
+    // Without this, the content pops *out* of the popover.
+    white-space: normal; 
+
     .dark-mode({
         background-color: var(--black-075);
         border-color: var(--bc-light);

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

@@ -70,7 +70,14 @@
         border: 1px solid transparent;
 
         &.has-answers,
-        &.has-bounty {
+        &.has-bounty,
+        &.is-watched,
+        &.is-ignored,
+        &.is-deleted,
+        &.is-published,
+        &.is-draft,
+        &.is-review,
+        &.is-rejected {
             border-radius: @br-sm;
             padding: @su2 @su4;
         }
@@ -105,6 +112,26 @@
         &.is-supernova {
             color: var(--orange-400);
         }
+
+        &.is-published {
+            color: var(--black-800);
+            background-color: var(--black-050);
+        }
+
+        &.is-draft {
+            color: var(--white);
+            background-color: var(--blue-700);
+        }
+
+        &.is-review {
+            color: var(--white);
+            background-color: var(--yellow-700);
+        }
+
+        &.is-rejected {
+            color: var(--white);
+            background-color: var(--red-600);
+        }
     }
 
     #stacks-internals #screen-md({
@@ -120,7 +147,7 @@
 
     .s-post-summary--content-title {
         display: inline-block;
-        font-size: @fs-subheading;
+        font-size: @fs-body3;
         margin-bottom: @su6;
         overflow-wrap: break-word;
         word-wrap: break-word;
@@ -221,3 +248,50 @@
         .v-truncate4;
     }
 }
+
+.s-post-summary__watched .is-watched {
+    color: var(--white);
+    background-color: var(--yellow-600);
+}
+
+.s-post-summary__ignored .is-ignored {
+    color: var(--white);
+    background-color: var(--black-600);
+}
+
+.s-post-summary__deleted .is-deleted {
+    color: @white;
+    background-color: var(--red-500);
+}
+
+.s-post-summary__ignored,
+.s-post-summary__deleted {
+    .s-post-summary--content {
+        opacity: 0.7;
+    }
+
+    .s-post-summary--stats-item:not(.is-ignored):not(.is-deleted) {
+        opacity: 0.7;
+        filter: grayscale(100%);
+    }
+
+    .s-post-summary--content-title {
+        color: var(--black-600);
+
+        &:hover {
+            color: var(--black-500);
+        }
+
+        &:visited {
+            color: var(--black-700);
+        }
+    }
+
+    .s-post-summary--content-excerpt {
+        color: var(--black-500);
+    }
+
+    .s-post-summary--meta {
+        filter: grayscale(100%);
+    }
+}

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

@@ -37,7 +37,6 @@
     background-color: var(--green-400);
 }
 
-
 //  $$   LABEL
 //       For when there's descriptive, label copy within the progress bar
 //  ----------------------------------------------------------------------------
@@ -53,7 +52,6 @@
     z-index: @zi-base + 2;
 }
 
-
 //  ===========================================================================
 //  $   VARIATION PROGRESS BACKGROUNDS
 //  ---------------------------------------------------------------------------
@@ -75,10 +73,13 @@
     }
     .s-progress--label {
         border-color: var(--green-400);
+        display: flex;
+        gap: @su4;
+        align-items: center;
+        justify-content: center;
     }
 }
 
-
 //  ===========================================================================
 //  $   BADGE PROGRESS BARS
 //  ===========================================================================
@@ -95,6 +96,20 @@
     background-color: transparent;
 }
 
+.s-progress__badge {
+    .s-progress--label {
+        display: flex;
+        gap: @su4;
+        align-items: center;
+        padding-left: 1em;
+        padding-right: 1em;
+
+        .s-badge--label {
+            text-align: center;
+            flex-grow: 1;
+        }
+    }
+}
 
 //  $$  GOLD
 //  ---------------------------------------------------------------------------

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

@@ -26,7 +26,7 @@
         background-color: transparent;
 
         &:hover {
-            color: @white; // We want this color to remain fixed regardless of dark mode
+            color: @background;
             background-color: @color;
 
             .highcontrast-mode({
@@ -82,12 +82,12 @@
     vertical-align: middle;
     white-space: nowrap;
 
-    .s-tag-styles(@tags-border, @tags-background, @tags-color);
+    .s-tag-styles(var(--theme-tag-border-color), var(--theme-tag-background-color), var(--theme-tag-color));
 
     .highcontrast-mode({ text-decoration: none; });
 
     &.is-selected {
-        .s-tag-selected-styles(@tags-selected-border, @tags-selected-background, @tags-selected-color);
+        .s-tag-selected-styles(transparent, var(--theme-secondary-200), var(--theme-secondary-900));
     }
 
     //  -- SIZES
@@ -118,7 +118,7 @@
 
 a.s-tag:not(.is-selected) {
     #stacks-internals #load-config();
-    .s-tag-hover-styles(@tags-hover-border, @tags-hover-background, @tags-hover-color);
+    .s-tag-hover-styles(var(--theme-tag-hover-border-color), var(--theme-tag-hover-background-color), var(--theme-tag-hover-color));
 }
 
 //  $$  DISMISS ICON
@@ -207,18 +207,3 @@ a.s-tag__muted:not(.is-selected) {
     #stacks-internals #load-config();
     .s-tag-hover-styles(@tags-muted-hover-border, @tags-muted-hover-background, @tags-muted-hover-color);
 }
-
-//  $$  Themed Tag
-//  ---------------------------------------------------------------------------
-.s-tag__themed {
-    #stacks-internals #load-config();
-    .s-tag-styles(var(--theme-primary-300), var(--theme-primary-050), var(--theme-primary-700));
-
-    &.is-selected {
-        .s-tag-selected-styles(transparent, var(--theme-primary-200), var(--theme-primary-900));
-    }
-}
-a.s-tag__themed:not(.is-selected) {
-    #stacks-internals #load-config();
-    .s-tag-hover-styles(var(--theme-primary-400), var(--theme-primary-100), var(--theme-primary-900));
-}

package/lib/css/exports/_stacks-constants-colors.less

@@ -236,6 +236,14 @@
     --theme-button-outlined-border-color: var(--theme-secondary-300);
     --theme-button-outlined-selected-border-color: var(--theme-secondary-400);
 
+    // Tags
+    --theme-tag-color: var(--theme-secondary-800);
+    --theme-tag-background-color: var(--theme-secondary-075);
+    --theme-tag-border-color: transparent;
+    --theme-tag-hover-color: var(--theme-secondary-900);
+    --theme-tag-hover-background-color: var(--theme-secondary-100);
+    --theme-tag-hover-border-color: transparent;
+
     // Topbar
     --theme-topbar-height: @su48;
     --theme-topbar-background-color: var(--black-025);

package/lib/css/exports/_stacks-constants-helpers.less

@@ -52,6 +52,7 @@
 //  ============================================================================
 //  $  SPACING UNITS (su-)
 //  ----------------------------------------------------------------------------
+@su1:                   1px;
 @su2:                   2px;
 @su4:                   4px;
 @su6:                   6px;

package/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "https://github.com/StackExchange/Stacks.git"
   },
-  "version": "0.72.0",
+  "version": "0.73.0",
   "files": [
     "dist",
     "lib"
@@ -19,15 +19,15 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@popperjs/core": "^2.10.2",
+    "@popperjs/core": "^2.11.0",
     "stimulus": "^2.0.0"
   },
   "devDependencies": {
     "@11ty/eleventy": "^0.12.1",
     "@highlightjs/cdn-assets": "^11.3.1",
     "@stackoverflow/stacks-editor": "^0.4.1",
-    "@stackoverflow/stacks-icons": "^2.25.0",
-    "backstopjs": "^6.0.1",
+    "@stackoverflow/stacks-icons": "^2.25.1",
+    "backstopjs": "^6.0.4",
     "docsearch.js": "^2.6.3",
     "eleventy-plugin-highlightjs": "^0.3.0",
     "eleventy-plugin-markdown-shortcode": "^1.1.0",
@@ -46,9 +46,12 @@
     "grunt-ts": "^6.0.0-beta.22",
     "jquery": "^3.6.0",
     "list.js": "^2.3.1",
-    "stylelint": "^13.13.1",
-    "stylelint-config-standard": "^22.0.0",
-    "typescript": "^4.5.2"
+    "postcss-less": "^5.0.0",
+    "stylelint": "^14.2.0",
+    "stylelint-config-recommended-less": "^1.0.1",
+    "stylelint-config-standard": "^24.0.0",
+    "stylelint-less": "^1.0.1",
+    "typescript": "^4.5.4"
   },
   "browserslist": [
     "last 2 versions",