@stackoverflow/stacks 1.3.1 → 1.3.2

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/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-800);
         }
 
         &.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,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):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);
+    }
 
+    .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);
         }
     }
 
@@ -349,12 +414,26 @@
     }
 
     .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);
+    }
+
+    .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/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.2",
   "files": [
     "dist",
     "lib"
@@ -36,10 +36,10 @@
   "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",
     "css-loader": "^6.7.1",
@@ -61,7 +61,7 @@
     "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",
     "webpack": "^5.74.0",