@stackoverflow/stacks 2.4.0 → 2.5.1

package/lib/components/tag/tag.less

@@ -1,16 +1,12 @@
 .s-tag {
-    // Border color (bg color used as fallback
+    // Base
     --_ta-bc: var(--theme-tag-border-color, var(--_ta-bg));
+    --_ta-bg: var(--theme-tag-background-color, var(--black-150));
+    --_ta-fc: var(--theme-tag-color, var(--black-500));
+    // Hover
     --_ta-bc-hover: var(--theme-tag-hover-border-color, var(--_ta-bg-hover));
-    --_ta-bc-selected: var(--theme-tag-selected-border-color, var(--_ta-bg-selected));
-    // Background color
-    --_ta-bg: var(--theme-tag-background-color, var(--theme-secondary-100));
-    --_ta-bg-hover: var(--theme-tag-hover-background-color, var(--theme-secondary-200));
-    --_ta-bg-selected: var(--theme-tag-selected-background-color, var(--theme-secondary-300));
-    // Color
-    --_ta-fc: var(--theme-tag-color, var(--theme-secondary-500));
-    --_ta-fc-hover: var(--theme-tag-hover-color, var(--theme-secondary-600));
-    --_ta-fc-selected: var(--theme-tag-selected-color, var(--theme-secondary-600));
+    --_ta-bg-hover: var(--theme-tag-hover-background-color, var(--black-200));
+    --_ta-fc-hover: var(--theme-tag-hover-color, var(--black-600));
     // Other
     --_ta-br: var(--br-sm);
     --_ta-fs: var(--fs-caption);
@@ -22,27 +18,11 @@
 
     // CONTEXTUAL STYLES
     .highcontrast-mode({
-        --_ta-bc: currentColor;
-        --_ta-bg-selected: var(--theme-secondary-400);
-
-        text-decoration: none;
-    });
-
-    // STATES
-    &.is-selected {
-        &,
-        a&,
-        a&:active,
-        a&:hover {
-            .highcontrast-mode({
-                --_ta-fc-selected: var(--white);
-            });
-
-            background-color: var(--_ta-bg-selected);
-            border-color: var(--_ta-bc-selected);
-            color: var(--_ta-fc-selected);
+        &:not(&__moderator):not(&__required) {
+            --_ta-bc: var(--theme-tag-border-color, var(--black-300));
+            --_ta-bc-hover: var(--theme-tag-hover-border-color, var(--black-300));
         }
-    }
+    });
 
     // MODIFIERS
     // Sizes
@@ -102,49 +82,25 @@
         --_ta-before-icon: url("data:image/svg+xml;,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3.52 7.38 1.58 9.26A12.38 12.38 0 0 1 0 7s2.63-5.14 7.05-5.14c.66 0 1.28.12 1.86.32L7.44 3.6a3.48 3.48 0 0 0-3.92 3.78ZM5.3 9.99c.5.28 1.1.44 1.71.44 1.94 0 3.5-1.53 3.5-3.43 0-.62-.17-1.21-.47-1.72L8.7 6.6a1.73 1.73 0 0 1-2.08 2.07L5.29 10Zm6.23-6.19A12.7 12.7 0 0 1 14 7s-2.63 5.14-6.95 5.14A6.1 6.1 0 0 1 4 11.3L2.27 13l-1.4-1.36L11.9 1l1.23 1.2-1.6 1.6Z'/%3E%3C/svg%3E");
     }
 
-    // moderator overrides other muted and required, required overrides muted
+    // moderator overrides other required
     &&__moderator {
-        .highcontrast-mode({
-            --_ta-bg-selected: var(--orange-500);
-        });
-
         --_ta-bc: var(--orange-300);
         --_ta-bg: var(--orange-100);
-        --_ta-fc: var(--orange-600);
+        --_ta-fc: var(--orange-500);
         --_ta-bc-hover: var(--orange-300);
         --_ta-bg-hover: var(--orange-200);
         --_ta-fc-hover: var(--orange-600);
-        --_ta-bc-selected: var(--orange-400);
-        --_ta-bg-selected: var(--orange-300);
-        --_ta-fc-selected: var(--orange-600); // Currently APCA Lc 49 😔
-    }
-
-    &&__muted:not(&__moderator):not(&__required) {
-        --_ta-bg: var(--black-150);
-        --_ta-fc: var(--black-400);
-        --_ta-bg-hover: var(--black-200);
-        --_ta-fc-hover: var(--black-500);
-        --_ta-bg-selected: var(--black-225);
-        --_ta-fc-selected: var(--black-600);
-
-        .highcontrast-mode({ --_ta-bc: currentColor; }); // Specificity has bit us, so we need this override
     }
 
     &&__required:not(&__moderator) {
-        // TODO *eventually* remove the custom theme overrides once we can reconcile Meta theming needs
-        // Border color
-        --_ta-bc: var(--theme-tag-required-border-color, var(--_ta-bg));
-        --_ta-bc-hover: var(--theme-tag-required-hover-border-color, var(--_ta-bg-hover));
-        --_ta-bc-selected: var(--theme-tag-required-selected-border-color, var(--_ta-bg-selected));
-        // Background color
-        --_ta-bg: var(--theme-tag-required-background-color, var(--theme-secondary-500));
-        --_ta-bg-hover: var(--theme-tag-required-hover-background-color, var(--theme-secondary-400));
-        --_ta-bg-selected: var(--theme-tag-required-selected-background-color, var(--theme-secondary-600));
-        // Color
-        --_ta-fc: var(--theme-tag-required-color, var(--white));
-        --_ta-fc-hover: var(--theme-tag-required-hover-color, var(--white));
-        --_ta-fc-selected: var(--theme-tag-required-selected-color, var(--white));
+        --_ta-bc: var(--theme-tag-required-border-color, var(--theme-tag-border-color, var(--black-400)));
+        --_ta-bg: var(--theme-tag-required-background-color, var(--theme-tag-background-color, var(--black-150)));
+        --_ta-fc: var(--theme-tag-required-color, var(--theme-tag-color, var(--black-500)));
+        --_ta-bc-hover: var(--theme-tag-required-hover-border-color, var(--theme-tag-hover-border-color, var(--black-600)));
+        --_ta-bg-hover: var(--theme-tag-required-hover-background-color, var(--theme-tag-hover-background-color, var(--black-200)));
+        --_ta-fc-hover: var(--theme-tag-required-hover-color, var(--theme-tag-hover-color, var(--black-600)));
     }
+
     &__watched, // TODO: remove all single `&` watched styles once core no longer requires them
     &&__watched {
         --_ta-before-icon: url("data:image/svg+xml;,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M7.05 1C2.63 1 0 6.5 0 6.5S2.63 12 7.05 12C11.38 12 14 6.5 14 6.5S11.37 1 7.05 1ZM7 10.17A3.59 3.59 0 0 1 3.5 6.5 3.6 3.6 0 0 1 7 2.83c1.94 0 3.5 1.65 3.5 3.67A3.57 3.57 0 0 1 7 10.17Zm0-1.84c.97 0 1.75-.81 1.75-1.83S7.97 4.67 7 4.67s-1.75.81-1.75 1.83S6.03 8.33 7 8.33Z'/%3E%3C/svg%3E");
@@ -197,13 +153,9 @@
     }
 
     // INTERACTION
-    a&:not(.is-selected) {
+    a& {
         &:hover,
         &:active {
-            .highcontrast-mode({
-                border-color: currentColor;
-            });
-
             background-color: var(--_ta-bg-hover);
             border-color: var(--_ta-bc-hover);
             color: var(--_ta-fc-hover);
@@ -225,6 +177,7 @@
 
     align-items: center;
     display: inline-flex;
+    font-weight: 700;
     justify-content: center;
     min-width: 0;
     text-decoration: none;

package/lib/exports/color-sets.less

@@ -506,10 +506,10 @@
     comment: hsl(0, 0%, 60%);
     deletion: var(--red-500);
     keyword:var(--blue-400);
-    literal: hsl(27, 85%, 61.5%);
-    namespace: hsl(27, 85%, 61.5%);
+    literal: hsl(27, 95%, 65%);
+    namespace: hsl(27, 95%, 65%);
     punctuation: hsl(0, 0%, 80%);
-    symbol: hsl(306, 43%, 69%);
+    symbol: hsl(306, 50%, 75%);
     variable: hsl(65.5, 39%, 57.5%);
 }
 .set-highlight-hc() {
@@ -524,7 +524,7 @@
     namespace: hsl(16, 94%, 31%);
     punctuation: var(--black-500);
     symbol: hsl(309, 45%, 31%);
-    variable: hsl(88, 100%, 19%);
+    variable: hsl(88, 100%, 18%);
 }
 .set-highlight-hc-dark() {
     addition: var(--green-500);

package/package.json

@@ -5,10 +5,11 @@
         "type": "git",
         "url": "https://github.com/StackExchange/Stacks.git"
     },
-    "version": "2.4.0",
+    "version": "2.5.1",
     "files": [
         "dist",
-        "lib"
+        "lib",
+        "!lib/**/*.test.*"
     ],
     "main": "./dist/js/stacks.js",
     "types": "./dist/index.d.ts",
@@ -47,15 +48,15 @@
         "@open-wc/testing": "^4.0.0",
         "@rollup/plugin-commonjs": "^25.0.7",
         "@rollup/plugin-replace": "^5.0.5",
-        "@stackoverflow/stacks-editor": "^0.10.5",
+        "@stackoverflow/stacks-editor": "^0.10.6",
         "@stackoverflow/stacks-icons": "^6.0.2",
-        "@testing-library/dom": "^9.3.4",
+        "@testing-library/dom": "^10.0.0",
         "@testing-library/user-event": "^14.5.2",
         "@types/cssbeautify": "^0.3.5",
         "@types/less": "^3.0.6",
         "@types/mocha": "^10.0.6",
-        "@typescript-eslint/eslint-plugin": "^7.6.0",
-        "@typescript-eslint/parser": "^7.6.0",
+        "@typescript-eslint/eslint-plugin": "^7.7.1",
+        "@typescript-eslint/parser": "^7.7.1",
         "@web/dev-server-esbuild": "^1.0.2",
         "@web/dev-server-rollup": "^0.6.1",
         "@web/test-runner": "^0.18.1",
@@ -64,7 +65,7 @@
         "apca-check": "^0.1.0",
         "colorjs.io": "^0.5.0",
         "concurrently": "^8.2.2",
-        "css-loader": "^6.10.0",
+        "css-loader": "^7.1.1",
         "cssbeautify": "^0.3.1",
         "cssnano": "^6.1.2",
         "docsearch.js": "^2.6.3",
@@ -77,7 +78,7 @@
         "less-loader": "^12.2.0",
         "list.js": "^2.3.1",
         "markdown-it": "^14.1.0",
-        "mini-css-extract-plugin": "^2.8.1",
+        "mini-css-extract-plugin": "^2.9.0",
         "postcss-less": "^6.0.0",
         "postcss-loader": "^8.1.1",
         "prettier": "^3.2.5",
@@ -88,7 +89,7 @@
         "terser-webpack-plugin": "^5.3.10",
         "ts-loader": "^9.5.1",
         "typescript": "^5.4.5",
-        "vitest": "^1.5.0",
+        "vitest": "^1.5.2",
         "webpack": "^5.91.0",
         "webpack-cli": "^5.1.4",
         "webpack-merge": "^5.10.0"