@stackoverflow/stacks 2.0.0 → 2.0.2

package/lib/exports/color-sets.less

@@ -102,20 +102,20 @@
     600: hsl(27, 80%, 93%);
 }
 .set-orange-hc() {
-    100: hsl(22, 85%, 97%);
-    200: hsl(22, 85%, 97%);
+    100: hsl(23, 87%, 97%);
+    200: hsl(23, 87%, 97%);
     300: hsl(27, 90%, 55%);
     400: hsl(27, 90%, 55%);
     500: hsl(27, 80%, 28%);
     600: hsl(27, 80%, 28%);
 }
 .set-orange-hc-dark() {
-    100: hsl(27, 29%, 19%);
-    200: hsl(27, 29%, 19%);
-    300: hsl(27, 80%, 64%);
+    100: hsl(27, 30%, 19%);
+    200: hsl(27, 30%, 19%);
+    300: hsl(27, 80%, 72%);
     400: hsl(27, 80%, 72%);
-    500: hsl(27, 79%, 89%);
-    600: hsl(27, 80%, 93%);
+    500: hsl(28, 78%, 93%);
+    600: hsl(28, 78%, 93%);
 }
 
 // Blue
@@ -144,12 +144,12 @@
     600: hsl(210, 80%, 23%);
 }
 .set-blue-hc-dark() {
-    100: hsl(209, 29%, 19%);
-    200: hsl(209, 29%, 19%);
+    100: hsl(209, 30%, 19%);
+    200: hsl(209, 30%, 19%);
     300: hsl(210, 80%, 72%);
     400: hsl(210, 80%, 75%);
-    500: hsl(209, 79%, 87%);
-    600: hsl(210, 80%, 93%);
+    500: hsl(210, 78%, 93%);
+    600: hsl(210, 78%, 93%);
 }
 
 // Green
@@ -174,26 +174,26 @@
     200: hsl(147, 36%, 95%);
     300: hsl(148, 70%, 31%);
     400: hsl(148, 75%, 22%);
-    500: hsl(147, 74%, 15%);
-    600: hsl(147, 74%, 15%);
+    500: hsl(146, 74%, 15%);
+    600: hsl(146, 74%, 15%);
 }
 .set-green-hc-dark() {
-    100: hsl(147, 29%, 19%);
-    200: hsl(147, 29%, 19%);
+    100: hsl(147, 30%, 19%);
+    200: hsl(147, 30%, 19%);
     300: hsl(148, 40%, 62%);
     400: hsl(148, 40%, 68%);
-    500: hsl(148, 39%, 87%);
-    600: hsl(148, 40%, 93%);
+    500: hsl(150, 39%, 93%);
+    600: hsl(150, 39%, 93%);
 }
 
 // Red
 .set-red() {
     100: hsl(0, 72%, 96%);
     200: hsl(0, 70%, 93%);
-    300: hsl(0, 65%, 76%);
+    300: hsl(0, 66%, 80%);
     400: hsl(0, 60%, 49%);
     500: hsl(0, 65%, 37%);
-    600: hsl(0, 65%, 24%);
+    600: hsl(0, 65%, 22%);
 }
 .set-red-dark() {
     100: hsl(358, 29%, 19%);
@@ -204,20 +204,20 @@
     600: hsl(0, 73%, 95%);
 }
 .set-red-hc() {
-    100: hsl(0, 79%, 96%);
-    200: hsl(0, 79%, 96%);
+    100: hsl(0, 80%, 96%);
+    200: hsl(0, 80%, 96%);
     300: hsl(0, 60%, 49%);
     400: hsl(0, 65%, 37%);
-    500: hsl(0, 66%, 24%);
-    600: hsl(0, 66%, 24%);
+    500: hsl(0, 65%, 22%);
+    600: hsl(0, 65%, 22%);
 }
 .set-red-hc-dark() {
-    100: hsl(358, 29%, 19%);
-    200: hsl(358, 29%, 19%);
+    100: hsl(358, 30%, 19%);
+    200: hsl(358, 30%, 19%);
     300: hsl(0, 75%, 77%);
     400: hsl(0, 73%, 80%);
-    500: hsl(0, 70%, 92%);
-    600: hsl(0, 73%, 95%);
+    500: hsl(0, 76%, 95%);
+    600: hsl(0, 76%, 95%);
 }
 
 // Yellow
@@ -248,10 +248,10 @@
 .set-yellow-hc-dark() {
     100: hsl(43, 29%, 17%);
     200: hsl(43, 29%, 17%);
-    300: hsl(43, 59%, 64%);
+    300: hsl(43, 75%, 75%);
     400: hsl(43, 75%, 75%);
     500: hsl(48, 74%, 91%);
-    600: hsl(43, 75%, 91%);
+    600: hsl(44, 74%, 91%);
 }
 
 // Purple
@@ -264,8 +264,8 @@
     600: hsl(237, 50%, 32%);
 }
 .set-purple-dark() {
-    100: hsl(238, 24%, 23%);
-    200: hsl(238, 27%, 34%);
+    100: hsl(237, 24%, 23%);
+    200: hsl(237, 27%, 34%);
     300: hsl(237, 32%, 56%);
     400: hsl(237, 60%, 82%);
     500: hsl(237, 60%, 88%);
@@ -273,7 +273,7 @@
 }
 .set-purple-hc() {
     100: hsl(237, 83%, 98%);
-    200: hsl(237, 80%, 96%);
+    200: hsl(237, 83%, 98%);
     300: hsl(237, 55%, 57%);
     400: hsl(237, 55%, 57%);
     500: hsl(237, 50%, 32%);
@@ -282,10 +282,10 @@
 .set-purple-hc-dark() {
     100: hsl(237, 24%, 23%);
     200: hsl(237, 24%, 23%);
-    300: hsl(237, 58%, 86%);
+    300: hsl(237, 60%, 82%);
     400: hsl(237, 60%, 82%);
-    500: hsl(237, 65%, 96%);
-    600: hsl(237, 65%, 96%);
+    500: hsl(237, 62%, 96%);
+    600: hsl(237, 62%, 96%);
 }
 
 // gold
@@ -331,12 +331,12 @@
     100: hsl(0, 0%, 95%);
     200: hsl(0, 0%, 95%);
     300: hsl(210, 5%, 68%);
-    400: hsl(216, 2%, 40%);
+    400: hsl(210, 2%, 40%);
 }
 .set-silver-hc-dark() {
     100: hsl(220, 2%, 26%);
     200: hsl(220, 2%, 26%);
-    300: hsl(216, 4%, 69%);
+    300: hsl(220, 4%, 69%);
     400: hsl(214, 8%, 83%);
 }
 
@@ -360,8 +360,8 @@
     400: hsl(28, 43%, 39%);
 }
 .set-bronze-hc-dark() {
-    100: hsl(28, 13%, 27%);
-    200: hsl(28, 13%, 27%);
+    100: hsl(27, 13%, 27%);
+    200: hsl(27, 13%, 27%);
     300: hsl(28, 58%, 67%);
     400: hsl(28, 59%, 83%);
 }

package/lib/test/test-utils.ts

@@ -3,7 +3,7 @@ import { screen } from "@testing-library/dom";
 import { visualDiff } from "@web/test-runner-visual-regression";
 import type { TemplateResult } from "lit-html";
 import axe from "axe-core";
-import registerAxeAPCA from "./axe-apca";
+import registerAxeAPCA from "axe-apca";
 
 const customConformanceThresholdFn = (fontSize: string): number | null => {
     return parseFloat(fontSize) >= 32 ? 45 : 60;

package/package.json

@@ -5,7 +5,7 @@
         "type": "git",
         "url": "https://github.com/StackExchange/Stacks.git"
     },
-    "version": "2.0.0",
+    "version": "2.0.2",
     "files": [
         "dist",
         "lib"
@@ -44,24 +44,24 @@
     },
     "devDependencies": {
         "@11ty/eleventy": "^2.0.1",
-        "@highlightjs/cdn-assets": "^11.8.0",
+        "@highlightjs/cdn-assets": "^11.9.0",
         "@open-wc/testing": "^3.2.0",
         "@rollup/plugin-commonjs": "^25.0.4",
-        "@rollup/plugin-replace": "^5.0.2",
-        "@stackoverflow/stacks-editor": "^0.8.9",
-        "@stackoverflow/stacks-icons": "^5.5.0",
+        "@rollup/plugin-replace": "^5.0.4",
+        "@stackoverflow/stacks-editor": "^0.9.0",
+        "@stackoverflow/stacks-icons": "^6.0.0",
         "@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.7.3",
-        "@typescript-eslint/parser": "^6.7.2",
+        "@typescript-eslint/eslint-plugin": "^6.7.4",
+        "@typescript-eslint/parser": "^6.7.5",
         "@web/dev-server-esbuild": "^0.4.1",
         "@web/dev-server-rollup": "^0.5.2",
         "@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",
+        "axe-apca": "^0.0.3",
         "concurrently": "^8.2.1",
         "css-loader": "^6.8.1",
         "cssbeautify": "^0.3.1",
@@ -75,7 +75,7 @@
         "jquery": "^3.7.1",
         "less-loader": "^11.1.3",
         "list.js": "^2.3.1",
-        "markdown-it": "^13.0.1",
+        "markdown-it": "^13.0.2",
         "mini-css-extract-plugin": "^2.7.6",
         "postcss-less": "^6.0.0",
         "postcss-loader": "^7.3.3",
@@ -85,7 +85,7 @@
         "stylelint-config-recommended": "^13.0.0",
         "stylelint-config-standard": "^34.0.0",
         "terser-webpack-plugin": "^5.3.9",
-        "ts-loader": "^9.4.4",
+        "ts-loader": "^9.5.0",
         "typescript": "^5.2.2",
         "vitest": "^0.33.0",
         "webpack": "^5.88.2",

package/lib/test/axe-apca/README.md

@@ -1,53 +0,0 @@
-# axe-apca
-
-⚠️ *Once this package become more mature and stable it should be extracted in its own repo (e.g. StackExchange/axe-apca) and published as an npm package. This will allow to use the rule/checks in many contexts including our Core codebase.*
-
-This package contains custom axe rules and checks for [APCA](https://readtech.org/) Bronze and Silver+ [conformance levels](https://readtech.org/ARC/tests/visual-readability-contrast/?tn=criterion).
-
-## Usage
-
-### Installation
-
-⚠️ *The following command doesn't work because this package is not published on npm yet.*
-
-```bash
-npm install --save-dev axe-core axe-apca
-```
-
-### Setup
-
-```js
-import axe from "axe-core";
-import { registerAxeAPCA } from 'axe-apca';
-
-registerAxeAPCA('bronze'); // or registerAxeAPCA('silver');
-
- // consider turning off default WCAG 2.1 AA color contrast rules when using APCA
-axe.configure({
-    rules: [{ id: "color-contrast", enabled: false }]
-})
-
- axe.run(document, (err, results) => {
-    if (err) throw err;
-    console.log(results);
-});
-```
-
-### Using custom APCA thresholds
-
-To set custom thresholds for APCA checks, follow these steps:
-
-1. Use `custom` as the first argument when calling `registerAxeAPCA`.
-1. Provide a function as the second argument, optionally accepting `fontSize` and `fontWeight` arguments.
-
-
-```js
-const customConformanceThresholdFn = (fontSize, fontWeight) => {
-    const size = parseFloat(fontSize);
-    const weight = parseFloat(fontWeight);
-
-    return size >= 32 || weight > 700 ? 45 : 60;
-};
-
-registerAxeAPCA('custom', customConformanceThresholdFn);
-```

package/lib/test/axe-apca/index.ts

@@ -1,3 +0,0 @@
-import registerAxeAPCA from "./src/axe-apca";
-
-export default registerAxeAPCA;

package/lib/test/axe-apca/package.wip.json

@@ -1,30 +0,0 @@
-{
-    "name": "axe-apca",
-    "description": "Axe rules to check against APCA bronze and silver+ conformance levels.",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/StackExchange/axe-apca.git"
-    },
-    "version": "0.0.0",
-    "main": "TODO",
-    "types": "TODO",
-    "scripts": {
-        "build": "TODO: transpile ts to js",
-        "test": "web-test-runner"
-    },
-    "license": "MIT",
-    "dependencies": {
-        "apca-w3": "^0.1.9"
-    },
-    "peerDependencies": {
-        "axe-core": "^4.0.0"
-    },
-    "devDependencies": {
-        "@open-wc/testing": "^3.2.0",
-        "@web/dev-server-esbuild": "^0.4.1",
-        "@web/dev-server-rollup": "^0.5.2",
-        "@web/test-runner": "^0.16.1",
-        "@web/test-runner-playwright": "^0.10.1",
-        "typescript": "^5.1.6"
-    }
-}

package/lib/test/axe-apca/src/apca-w3.d.ts

@@ -1,3 +0,0 @@
-declare module "apca-w3" {
-    export function calcAPCA(textColor: string, bgColor: string): number;
-}

package/lib/test/axe-apca/src/axe-apca.test.ts

@@ -1,231 +0,0 @@
-import { html, fixture, expect } from "@open-wc/testing";
-import axe from "axe-core";
-import type { AxeResults } from "axe-core";
-import registerAxeAPCA from "./axe-apca";
-
-const runAxe = async (el: HTMLElement): Promise<AxeResults> => {
-    return new Promise((resolve, reject) => {
-        axe.run(el, (err, results) => {
-            if (err) reject(err);
-            resolve(results);
-        });
-    });
-};
-
-describe("axe-apca", () => {
-    describe("custom conformance level", () => {
-        beforeEach(() => {
-            const customConformanceThresholdFn = (
-                fontSize: string
-            ): number | null => {
-                return parseFloat(fontSize) >= 32 ? 45 : 60;
-            };
-
-            registerAxeAPCA("custom", customConformanceThresholdFn);
-        });
-
-        it("should check for APCA accessibility contrast violations", async () => {
-            const el: HTMLElement = await fixture(
-                html`<p
-                    style="background: white; color: black; font-size: 12px; font-weight: 400;"
-                >
-                    Some copy
-                </p>`
-            );
-
-            const results = await runAxe(el);
-
-            const apcaPasses = results.passes.filter((violation) =>
-                violation.id.includes("color-contrast-apca-custom")
-            );
-
-            await expect(apcaPasses.length).to.equal(1);
-
-            const passNode = apcaPasses[0].nodes[0];
-            expect(passNode.all[0].message).to.include(
-                "Element has sufficient APCA custom level lightness contrast"
-            );
-        });
-
-        it("should detect APCA accessibility contrast violations", async () => {
-            const el: HTMLElement = await fixture(
-                html`<p
-                    style="background: white; color: lightgray; font-size: 12px; font-weight: 400;"
-                >
-                    Some copy
-                </p>`
-            );
-
-            const results = await runAxe(el);
-
-            const apcaViolations = results.violations.filter((violation) =>
-                violation.id.includes("color-contrast-apca-custom")
-            );
-
-            await expect(apcaViolations.length).to.equal(1);
-
-            const violationNode = apcaViolations[0].nodes[0];
-            expect(violationNode.failureSummary).to.include(
-                "Element has insufficient APCA custom level contrast"
-            );
-        });
-
-        it("should check nested nodes", async () => {
-            const el: HTMLElement = await fixture(
-                html`<div style="background: black;">
-                    <h2>Some title</h2>
-                    <p>Some copy</p>
-                    <button style="background: black;">Some button</button>
-                </div>`
-            );
-
-            const results = await runAxe(el);
-
-            const apcaViolations = results.violations.filter((violation) =>
-                violation.id.includes("color-contrast-apca-custom")
-            );
-
-            await expect(apcaViolations[0].nodes.length).to.equal(3);
-        });
-    });
-
-    describe("bronze conformance level", () => {
-        beforeEach(() => {
-            registerAxeAPCA("bronze");
-        });
-
-        it("should check for APCA accessibility contrast violations", async () => {
-            const el: HTMLElement = await fixture(
-                html`<p
-                    style="background: white; color: black; font-size: 12px; font-weight: 400;"
-                >
-                    Some copy
-                </p>`
-            );
-
-            const results = await runAxe(el);
-
-            const apcaPasses = results.passes.filter((violation) =>
-                violation.id.includes("color-contrast-apca-bronze")
-            );
-
-            await expect(apcaPasses.length).to.equal(1);
-
-            const passNode = apcaPasses[0].nodes[0];
-            expect(passNode.all[0].message).to.include(
-                "Element has sufficient APCA bronze level lightness contrast"
-            );
-        });
-
-        it("should detect APCA accessibility contrast violations", async () => {
-            const el: HTMLElement = await fixture(
-                html`<p
-                    style="background: white; color: gray; font-size: 12px; font-weight: 400;"
-                >
-                    Some copy
-                </p>`
-            );
-
-            const results = await runAxe(el);
-
-            const apcaViolations = results.violations.filter((violation) =>
-                violation.id.includes("color-contrast-apca-bronze")
-            );
-
-            await expect(apcaViolations.length).to.equal(1);
-
-            const violationNode = apcaViolations[0].nodes[0];
-            expect(violationNode.failureSummary).to.include(
-                "Element has insufficient APCA bronze level contrast"
-            );
-        });
-
-        it("should check nested nodes", async () => {
-            const el: HTMLElement = await fixture(
-                html`<div style="background: black;">
-                    <h2>Some title</h2>
-                    <p>Some copy</p>
-                    <button style="background: black;">Some button</button>
-                </div>`
-            );
-
-            const results = await runAxe(el);
-
-            const apcaViolations = results.violations.filter((violation) =>
-                violation.id.includes("color-contrast-apca-bronze")
-            );
-
-            await expect(apcaViolations[0].nodes.length).to.equal(3);
-        });
-    });
-
-    describe("silver conformance level", () => {
-        beforeEach(() => {
-            registerAxeAPCA("silver");
-        });
-
-        it("should check for APCA accessibility contrast violations", async () => {
-            const el: HTMLElement = await fixture(
-                html`<p
-                    style="background: white; color: black; font-size: 14px; font-weight: 400;"
-                >
-                    Some copy
-                </p>`
-            );
-
-            const results = await runAxe(el);
-
-            const apcaPasses = results.passes.filter((violation) =>
-                violation.id.includes("color-contrast-apca-silver")
-            );
-
-            await expect(apcaPasses.length).to.equal(1);
-
-            const passNode = apcaPasses[0].nodes[0];
-            expect(passNode.all[0].message).to.include(
-                "Element has sufficient APCA silver level lightness contrast"
-            );
-        });
-
-        it("should detect APCA accessibility contrast violations", async () => {
-            const el: HTMLElement = await fixture(
-                html`<p
-                    style="background: white; color: black; font-size: 12px; font-weight: 400;"
-                >
-                    Some copy
-                </p>`
-            );
-
-            const results = await runAxe(el);
-
-            const apcaViolations = results.violations.filter((violation) =>
-                violation.id.includes("color-contrast-apca-silver")
-            );
-
-            await expect(apcaViolations.length).to.equal(1);
-
-            const violationNode = apcaViolations[0].nodes[0];
-            expect(violationNode.failureSummary).to.include(
-                "Element has insufficient APCA silver level contrast"
-            );
-        });
-
-        it("should check nested nodes", async () => {
-            const el: HTMLElement = await fixture(
-                html`<div style="background: black;">
-                    <h2>Some title</h2>
-                    <p>Some copy</p>
-                    <button style="background: black;">Some button</button>
-                </div>`
-            );
-
-            const results = await runAxe(el);
-
-            const apcaViolations = results.violations.filter((violation) =>
-                violation.id.includes("color-contrast-apca-silver")
-            );
-
-            await expect(apcaViolations[0].nodes.length).to.equal(3);
-        });
-    });
-});