@stackoverflow/stacks 1.3.1 → 1.3.4

package/lib/css/atomic/borders.less

@@ -302,6 +302,7 @@
 
 //  $$  RED
 //  ----------------------------------------------------------------------------
+.bc-red-025 { border-color: var(--red-025) !important; }
 .bc-red-050 { border-color: var(--red-050) !important; }
 .bc-red-1, // Deprecated
 .bc-red-100 { border-color: var(--red-100) !important; }

package/lib/css/atomic/colors.less

@@ -71,6 +71,7 @@
     .color(black-075);
     .color(black-025);
     .color(green-025);
+    .color(red-025);
     .color(theme-primary-350);
     .color(theme-primary-150);
     .color(theme-primary-075);

package/lib/css/components/links.less

@@ -190,6 +190,8 @@ button.s-link {
     @focus-styles();
 
     &.is-selected {
+        --_block-bs: inset var(--_block-bs-offset-x, 3px) 0 0 var(--theme-primary-color);
+
         color: var(--black-800);
         font-weight: bold;
         background-color: var(--black-050);
@@ -199,11 +201,21 @@ button.s-link {
         });
 
         &.s-block-link__right {
-            box-shadow: inset -3px 0 0 var(--theme-primary-color);
+            --_block-bs-offset-x: -3px;
         }
 
-        &.s-block-link__left {
-            box-shadow: inset 3px 0 0 var(--theme-primary-color);
+        &.s-block-link__left,
+        &.s-block-link__right {
+            box-shadow: var(--_block-bs);
+
+            &:focus:not(:focus-visible),
+            &:focus-visible {
+                outline: none;
+            }
+
+            &:focus-visible {
+                box-shadow: var(--_block-bs), 0 0 0 var(--su-static4) var(--focus-ring-muted);
+            }
         }
     }
 

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

@@ -100,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);
             }
         }
 
@@ -121,15 +117,15 @@
         }
 
         &.is-warm {
-            color: var(--orange-800);
+            color: var(--yellow-900);
         }
 
         &.is-hot {
-            color: var(--orange-600);
+            color: var(--orange-800);
         }
 
         &.is-supernova {
-            color: var(--orange-400);
+            color: var(--red-800);
         }
 
         &.is-published {
@@ -309,38 +305,95 @@
 
 .s-post-summary__watched {
     background-color: var(--yellow-050);
-}
 
-.s-post-summary__deleted {
-    background-color: var(--red-050);
+    .s-post-summary--stats {
+        color: var(--black-500);
+    }
 
-    .is-deleted {
-        color: @white;
-        background-color: var(--red-500);
+    .s-user-card {
+        .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):not(.s-post-summary--meta) {
-        opacity: calc(var(--_o-disabled-static) * 1.2); // 0.5 * 1.2 = 0.6
-    }
-    // TODO DEPRECATED remove `:not(.is-deleted)`
-    .s-post-summary--stats-item:not(.s-badge):not(.is-deleted) {
-        opacity: calc(var(--_o-disabled-static) * 1.2); // 0.5 * 1.2 = 0.6
-        filter: grayscale(100%);
+    background-color: var(--red-025);
+
+    .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);
+    }
 
+    // TODO: remove rule for `a` once Core replaces `.post-tag` with `.s-tag`
+    .s-post-summary--meta-tags > a,
+    .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);
         }
+    }
 
+    // TODO: remove rule for `a` once Core replaces `.post-tag` with `.s-tag`
+    .s-post-summary--meta-tags > a,
+    .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);
         }
     }
 
@@ -349,12 +402,28 @@
     }
 
     .s-post-summary--meta > *:not(.s-post-summary--meta-tags) {
-        opacity: calc(var(--_o-disabled-static) * 1.2); // 0.5 * 1.2 = 0.6
-        filter: grayscale(100%);
+        color: var(--black-600);
+    }
+
+    // TODO: remove rule for `a` once Core replaces `.post-tag` with `.s-tag`
+    .s-post-summary--meta-tags > a,
+    .s-post-summary--meta-tags > .s-tag {
+        &,
+        &:hover,
+        &:active,
+        &:focus {
+            color: var(--black-600);
+        }
     }
 
-    .s-post-summary--meta-tags > a {
-        opacity: calc(var(--_o-disabled-static) * 1.2); // 0.5 * 1.2 = 0.6
-        filter: grayscale(100%);
+    .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/widget-static.less

@@ -93,6 +93,7 @@
     color: var(--black-600);
     font-size: var(--fs-body2);
     font-weight: normal;
+    margin: 0;
 
     &:first-child {
         border-top-left-radius: var(--br-sm);

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

@@ -120,6 +120,7 @@
 @yellow-900: hsl(@yellow-h, 84%, 28%);
 
 // Red
+@red-025: hsl(@red-h, 80%, 98%);
 @red-050: hsl(@red-h, 75%, 97%);
 @red-100: hsl(@red-h, 76%, 90%);
 @red-200: hsl(@red-h, 74%, 83%);
@@ -364,6 +365,7 @@
     --yellow-900: @yellow-900;
 
     // Red
+    --red-025: @red-025;
     --red-050: @red-050;
     --red-100: @red-100;
     --red-200: @red-200;
@@ -564,6 +566,7 @@
     --yellow-900: hsl(@yellow-h, 93%, 83.5%);
 
     // Red
+    --red-025: hsl(@red-h + 3, 10%, 24%);
     --red-050: hsl(@red-h + 3, 30%, 26.5%);
     --red-100: hsl(@red-h + 3, 35%, 33%);
     --red-200: hsl(@red-h + 3, 37%, 38.5%);
@@ -778,6 +781,7 @@
     --yellow-900: hsl(@yellow-h, 100%, 7%);
 
     // Red
+    --red-025: hsl(@red-h, 100%, 97%);
     --red-050: hsl(@red-h, 100%, 94%);
     --red-100: hsl(@red-h, 100%, 92%);
     --red-200: hsl(@red-h, 100%, 89%);
@@ -937,6 +941,7 @@
     --yellow-900: hsl(@yellow-h, 100%, 95%);
 
     // Red
+    --red-025: hsl(@red-h, 100%, 7%);
     --red-050: hsl(@red-h, 100%, 9%);
     --red-100: hsl(@red-h, 100%, 12%);
     --red-200: hsl(@red-h, 100%, 17%);

package/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "https://github.com/StackExchange/Stacks.git"
   },
-  "version": "1.3.1",
+  "version": "1.3.4",
   "files": [
     "dist",
     "lib"
@@ -36,12 +36,12 @@
   "devDependencies": {
     "@11ty/eleventy": "^1.0.2",
     "@highlightjs/cdn-assets": "^11.6.0",
-    "@stackoverflow/stacks-editor": "^0.7.0",
-    "@stackoverflow/stacks-icons": "^3.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.35.1",
-    "@typescript-eslint/parser": "^5.35.1",
+    "@stackoverflow/stacks-editor": "^0.7.1",
+    "@stackoverflow/stacks-icons": "^3.0.5",
+    "@typescript-eslint/eslint-plugin": "^5.36.2",
+    "@typescript-eslint/parser": "^5.36.2",
     "backstopjs": "^6.1.1",
-    "concurrently": "^7.3.0",
+    "concurrently": "^7.4.0",
     "css-loader": "^6.7.1",
     "cssnano": "^5.1.13",
     "docsearch.js": "^2.6.3",
@@ -61,9 +61,9 @@
     "stylelint": "^14.11.0",
     "stylelint-config-recommended": "^9.0.0",
     "stylelint-config-standard": "^28.0.0",
-    "terser-webpack-plugin": "^5.3.5",
+    "terser-webpack-plugin": "^5.3.6",
     "ts-loader": "^9.3.1",
-    "typescript": "^4.8.2",
+    "typescript": "^4.8.3",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0",
     "webpack-merge": "^5.8.0"