@stackoverflow/stacks 2.0.0-rc.1 → 2.0.0-rc.10

package/lib/test/test-utils.ts

@@ -5,7 +5,11 @@ import type { TemplateResult } from "lit-html";
 import axe from "axe-core";
 import registerAxeAPCA from "./axe-apca";
 
-registerAxeAPCA("bronze");
+const customConformanceThresholdFn = (fontSize: string): number | null => {
+    return parseFloat(fontSize) >= 32 ? 45 : 60;
+};
+
+registerAxeAPCA("custom", customConformanceThresholdFn);
 
 const colorThemes = ["dark", "light"];
 const baseThemes = ["", "highcontrast"];
@@ -325,10 +329,10 @@ const runComponentTest = ({
             axe.configure({
                 rules: [
                     // for non-high contrast, we disable WCAG 2.1 AA (4.5:1)
-                    // and use APCA bronze level instead
+                    // and use a Stacks-specific APCA custom level instead
                     { id: "color-contrast", enabled: false },
                     {
-                        id: "color-contrast-apca-bronze",
+                        id: "color-contrast-apca-custom",
                         enabled: !highcontrast,
                     },
                     // for high contrast, we check against WCAG 2.1 AAA (7:1)

package/package.json

@@ -5,7 +5,7 @@
         "type": "git",
         "url": "https://github.com/StackExchange/Stacks.git"
     },
-    "version": "2.0.0-rc.1",
+    "version": "2.0.0-rc.10",
     "files": [
         "dist",
         "lib"
@@ -39,7 +39,7 @@
     },
     "license": "MIT",
     "dependencies": {
-        "@hotwired/stimulus": "^3.2.1",
+        "@hotwired/stimulus": "^3.2.2",
         "@popperjs/core": "^2.11.8"
     },
     "devDependencies": {
@@ -50,43 +50,43 @@
         "@rollup/plugin-replace": "^5.0.2",
         "@stackoverflow/stacks-editor": "^0.8.8",
         "@stackoverflow/stacks-icons": "^5.5.0",
-        "@testing-library/dom": "^9.3.1",
-        "@testing-library/user-event": "^14.4.3",
+        "@testing-library/dom": "^9.3.3",
+        "@testing-library/user-event": "^14.5.1",
         "@types/cssbeautify": "^0.3.2",
         "@types/less": "^3.0.3",
-        "@typescript-eslint/eslint-plugin": "^6.4.0",
-        "@typescript-eslint/parser": "^6.4.0",
+        "@typescript-eslint/eslint-plugin": "^6.7.0",
+        "@typescript-eslint/parser": "^6.7.2",
         "@web/dev-server-esbuild": "^0.4.1",
         "@web/dev-server-rollup": "^0.5.2",
-        "@web/test-runner": "^0.17.0",
+        "@web/test-runner": "^0.17.1",
         "@web/test-runner-playwright": "^0.10.1",
         "@web/test-runner-visual-regression": "^0.8.2",
         "apca-w3": "^0.1.9",
-        "concurrently": "^8.2.0",
+        "concurrently": "^8.2.1",
         "css-loader": "^6.8.1",
         "cssbeautify": "^0.3.1",
         "cssnano": "^6.0.1",
         "docsearch.js": "^2.6.3",
         "eleventy-plugin-highlightjs": "^1.1.0",
         "eleventy-plugin-nesting-toc": "^1.3.0",
-        "eslint": "^8.45.0",
-        "eslint-config-prettier": "^8.9.0",
+        "eslint": "^8.49.0",
+        "eslint-config-prettier": "^9.0.0",
         "eslint-plugin-no-unsanitized": "^4.0.2",
-        "jquery": "^3.7.0",
+        "jquery": "^3.7.1",
         "less-loader": "^11.1.3",
         "list.js": "^2.3.1",
         "markdown-it": "^13.0.1",
         "mini-css-extract-plugin": "^2.7.6",
         "postcss-less": "^6.0.0",
         "postcss-loader": "^7.3.3",
-        "prettier": "^3.0.1",
+        "prettier": "^3.0.3",
         "rollup-plugin-postcss": "^4.0.2",
-        "stylelint": "^15.10.2",
+        "stylelint": "^15.10.3",
         "stylelint-config-recommended": "^13.0.0",
         "stylelint-config-standard": "^34.0.0",
         "terser-webpack-plugin": "^5.3.9",
         "ts-loader": "^9.4.4",
-        "typescript": "^5.1.6",
+        "typescript": "^5.2.2",
         "vitest": "^0.33.0",
         "webpack": "^5.88.2",
         "webpack-cli": "^5.1.4",

package/lib/exports/theme.less

@@ -1,85 +0,0 @@
-.theme-variables() {
-    --theme-body-font-color: var(--black-600);
-    --theme-background-color: var(--white);
-    // Links
-    --theme-link-color: var(--theme-secondary-400);
-    --theme-link-color-hover: var(--theme-secondary-400); // TODO was 350, now same as base link color
-    --theme-link-color-visited: var(--theme-secondary-500);
-
-    // Button Default (Secondary)
-    --theme-button-color: var(--theme-secondary-400);
-    --theme-button-background-color: transparent;
-    --theme-button-hover-color: var(--theme-secondary-400); // TODO was 500, now same as base button color
-    --theme-button-hover-background-color: var(--theme-secondary-200);
-    --theme-button-active-background-color: var(--theme-secondary-300);
-    --theme-button-selected-color: var(--theme-secondary-600);
-    --theme-button-selected-background-color: var(--theme-secondary-300);
-
-    //  Button Primary
-    --theme-button-primary-color: var(--white);
-    --theme-button-primary-background-color: var(--theme-secondary-400);
-    --theme-button-primary-hover-color: var(--white);
-    --theme-button-primary-hover-background-color: var(--theme-secondary-400);  // TODO was 500, now same as primary button color
-    --theme-button-primary-active-background-color: var(--theme-secondary-500);
-    --theme-button-primary-selected-color: var(--white);
-    --theme-button-primary-selected-background-color: var(--theme-secondary-500);
-    --theme-button-primary-number-color: var(--theme-secondary-600);
-
-    // Button Filled
-    --theme-button-filled-color: var(--theme-secondary-500);
-    --theme-button-filled-background-color: var(--theme-secondary-200);
-    --theme-button-filled-border-color: var(--theme-secondary-400);
-    --theme-button-filled-hover-color: var(--theme-secondary-600);
-    --theme-button-filled-hover-background-color: var(--theme-secondary-300);
-    --theme-button-filled-active-background-color: var(--theme-secondary-300); // TODO was 150, now same as hover bg color
-    --theme-button-filled-active-border-color: var(--theme-secondary-400);
-    --theme-button-filled-selected-color: var(--theme-secondary-600);
-    --theme-button-filled-selected-background-color: var(--theme-secondary-400);
-    --theme-button-filled-selected-border-color: var(--theme-secondary-400); // TODO was 500, now same as selected bg color
-
-    // Button Outline
-    --theme-button-outlined-border-color: var(--theme-secondary-400);
-    --theme-button-outlined-selected-border-color: var(--theme-secondary-400); // TODO now same as unselected border-color above (above was 350)
-
-    // Tags
-    --theme-tag-color: var(--theme-secondary-600);
-    --theme-tag-background-color: var(--theme-secondary-200);
-    --theme-tag-border-color: transparent;
-    --theme-tag-hover-color: var(--theme-secondary-600); // TODO was 900, now same as base tag color
-    --theme-tag-hover-background-color: var(--theme-secondary-300);
-    --theme-tag-hover-border-color: transparent;
-
-    // Topbar
-    --theme-topbar-height: calc(var(--su-static48) + var(--su-static8)); // 56px
-    --theme-topbar-background-color: var(--white);
-
-    // Topbar Search input
-    --theme-topbar-search-color: var(--black-500);
-    --theme-topbar-search-background: var(--white);
-    --theme-topbar-search-placeholder: var(--black-400);
-    --theme-topbar-search-border: var(--black-300);
-    --theme-topbar-search-border-focus: var(--blue-400);
-    --theme-topbar-search-shadow-focus: 0 0 0 var(--su-static4) var(--focus-ring);
-
-    // Topbar Search switcher
-    --theme-topbar-select-color: var(--black-500);
-    --theme-topbar-select-background: var(--black-200);
-
-    // Topbar items
-    --theme-topbar-item-color: var(--black-500);
-    --theme-topbar-item-color-hover: var(--black-600);
-    --theme-topbar-item-background-hover: var(--black-200);
-    --theme-topbar-item-color-current: var(--black);
-    --theme-topbar-item-border-current: var(--theme-primary);
-
-    // Topbar themed border accent
-    --theme-topbar-accent-border: 3px solid var(--theme-primary);
-    --theme-topbar-bottom-border: 1px solid var(--black-225);
-
-    // Post summary
-    --theme-post-title-color: var(--theme-link-color);
-    --theme-post-title-color-hover: var(--theme-link-color-hover);
-    --theme-post-title-color-visited: var(--theme-link-color-visited);
-    --theme-post-title-font-family: var(--theme-body-font-family);
-    --theme-post-body-font-family: var(--theme-body-font-family);
-}