@stackoverflow/stacks 2.0.3 → 2.0.5

package/lib/atomic/v1/__snapshots__/border.less.test.ts.snap

@@ -1,13 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`atomic: border v1 > should output all v1 atomic css classes for colors 1`] = `
-"@media (prefers-color-scheme: dark) {
-}
-
-@media (prefers-color-scheme: dark) {
-}
-
-.bc-white-legacy-1 {
+".bc-white-legacy-1 {
     border-color: var(--black-legacy-500) !important;
 }
 

package/lib/atomic/v1/__snapshots__/color.less.test.ts.snap

@@ -1,13 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`atomic: color v1 > should output all v1 atomic css classes for colors 1`] = `
-"@media (prefers-color-scheme: dark) {
-}
-
-@media (prefers-color-scheme: dark) {
-}
-
-.fc-black-legacy-900,
+".fc-black-legacy-900,
 .h\\\\:fc-black-legacy-900:hover,
 .f\\\\:fc-black-legacy-900:focus,
 .f\\\\:fc-black-legacy-900:focus-within {

package/lib/atomic/v1/__snapshots__/typography.less.test.ts.snap

@@ -1,13 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`atomic: border v1 > should output all v1 atomic css classes for colors 1`] = `
-"@media (prefers-color-scheme: dark) {
-}
-
-@media (prefers-color-scheme: dark) {
-}
-
-.fc-dark-legacy {
+".fc-dark-legacy {
     color: var(--fc-dark-legacy) !important;
 }
 

package/lib/components/anchor/anchor.less

@@ -26,9 +26,9 @@
     }
 
     &&__grayscale {
-        --_an-a-fc: var(--black-400);
-        --_an-a-fc-hover: var(--black-500);
-        --_an-a-fc-visited: var(--black-600);
+        --_an-a-fc: var(--black-500);
+        --_an-a-fc-hover: var(--black-600);
+        --_an-a-fc-visited: var(--black-400);
     }
 
     &&__inherit {

package/lib/components/link/link.less

@@ -67,8 +67,8 @@ a,
 
         &__grayscale {
             --_li-fc: var(--black-500);
-            --_li-fc-hover: var(--black-400);
-            --_li-fc-visited: var(--black-600);
+            --_li-fc-hover: var(--black-600);
+            --_li-fc-visited: var(--black-400);
         }
 
         &__inherit {

package/lib/components/modal/modal.a11y.test.ts

@@ -0,0 +1,42 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/test-utils";
+import { IconClearSm } from "@stackoverflow/stacks-icons/icons";
+import "../../index";
+
+describe("modal", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: `s-modal`,
+        variants: ["danger"],
+        modifiers: {
+            primary: ["celebration"],
+            secondary: ["full"],
+        },
+        children: {
+            default: `
+                <div class="s-modal--dialog" role="document">
+                    <h1 class="s-modal--header" id="modal-title">Modal header</h1>
+                    <p class="s-modal--body" id="modal-description">Modal body. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
+                    <div class="d-flex gx8 s-modal--footer">
+                        <button class="s-btn s-btn__filled" type="button">Confirm</button>
+                        <button class="s-btn s-btn__muted" type="button">Cancel</button>
+                    </div>
+                    <button class="s-modal--close s-btn s-btn__muted" type="button" aria-label="Close">
+                        ${IconClearSm}
+                    </button>
+                </div>
+            `,
+        },
+        tag: "aside",
+        attributes: {
+            "id": "example-modal",
+            "tabindex": "-1",
+            "aria-hidden": "false",
+            "aria-labelledby": "modal-title",
+            "class": "ps-relative p32",
+        },
+        template: ({ component, testid }) => html`
+            <div class="m8 ws6" data-testid="${testid}">${component}</div>
+        `,
+    });
+});

package/lib/components/modal/modal.less

@@ -9,6 +9,14 @@
     --_mo-header-fc: var(--fc-dark);
 
     // CONTEXTUAL STYLES
+    .dark-mode({
+        --_mo-dialog-bg: var(--black-225);
+    });
+
+    .highcontrast-dark-mode({
+        --_mo-dialog-bg: var(--black-200);
+    });
+
     &[aria-hidden="false"] {
         &,
         .s-modal--dialog {
@@ -22,7 +30,6 @@
 
     // MODIFIERS
     &&__celebration {
-        --_mo-close-t: var(--su48);
         --_mo-dialog-pt: var(--su64);
 
         .s-modal--dialog {
@@ -61,10 +68,6 @@
     }
 
     & &--dialog {
-        .dark-mode({
-            --_mo-dialog-bg: var(--black-225);
-        });
-
         padding: var(--_mo-dialog-pt) var(--su24) var(--su24);
 
         @scrollbar-styles();

package/lib/components/modal/modal.visual.test.ts

@@ -0,0 +1,42 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/test-utils";
+import { IconClearSm } from "@stackoverflow/stacks-icons/icons";
+import "../../index";
+
+describe("modal", () => {
+    runComponentTests({
+        type: "visual",
+        baseClass: `s-modal`,
+        variants: ["danger"],
+        modifiers: {
+            primary: ["celebration"],
+            secondary: ["full"],
+        },
+        children: {
+            default: `
+                <div class="s-modal--dialog" role="document">
+                    <h1 class="s-modal--header" id="modal-title">Modal header</h1>
+                    <p class="s-modal--body" id="modal-description">Modal body. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
+                    <div class="d-flex gx8 s-modal--footer">
+                        <button class="s-btn s-btn__filled" type="button">Confirm</button>
+                        <button class="s-btn s-btn__muted" type="button">Cancel</button>
+                    </div>
+                    <button class="s-modal--close s-btn s-btn__muted" type="button" aria-label="Close">
+                        ${IconClearSm}
+                    </button>
+                </div>
+            `,
+        },
+        tag: "aside",
+        attributes: {
+            "id": "example-modal",
+            "tabindex": "-1",
+            "aria-hidden": "false",
+            "aria-labelledby": "modal-title",
+            "class": "ps-relative p32",
+        },
+        template: ({ component, testid }) => html`
+            <div class="m8 ws6" data-testid="${testid}">${component}</div>
+        `,
+    });
+});

package/lib/exports/__snapshots__/color-mixins.less.test.ts.snap

@@ -320,12 +320,12 @@ body .themed {
     --red-400: hsl(0, 60%, 49%);
     --red-500: hsl(0, 65%, 37%);
     --red-600: hsl(0, 65%, 22%);
-    --yellow-100: hsl(43, 80%, 96%);
-    --yellow-200: hsl(43, 80%, 88%);
+    --yellow-100: hsl(43, 85%, 95%);
+    --yellow-200: hsl(43, 85%, 88%);
     --yellow-300: hsl(43, 85%, 72%);
     --yellow-400: hsl(43, 85%, 50%);
     --yellow-500: hsl(43, 85%, 33%);
-    --yellow-600: hsl(43, 84%, 18%);
+    --yellow-600: hsl(43, 85%, 18%);
     --purple-100: hsl(237, 83%, 98%);
     --purple-200: hsl(237, 78%, 93%);
     --purple-300: hsl(237, 60%, 83%);

package/lib/exports/__snapshots__/color.less.test.ts.snap

@@ -108,12 +108,12 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
     --red-400: hsl(0, 60%, 49%);
     --red-500: hsl(0, 65%, 37%);
     --red-600: hsl(0, 65%, 22%);
-    --yellow-100: hsl(43, 80%, 96%);
-    --yellow-200: hsl(43, 80%, 88%);
+    --yellow-100: hsl(43, 85%, 95%);
+    --yellow-200: hsl(43, 85%, 88%);
     --yellow-300: hsl(43, 85%, 72%);
     --yellow-400: hsl(43, 85%, 50%);
     --yellow-500: hsl(43, 85%, 33%);
-    --yellow-600: hsl(43, 84%, 18%);
+    --yellow-600: hsl(43, 85%, 18%);
     --purple-100: hsl(237, 83%, 98%);
     --purple-200: hsl(237, 78%, 93%);
     --purple-300: hsl(237, 60%, 83%);
@@ -485,8 +485,8 @@ body.theme-highcontrast.theme-system .theme-light__forced {
     --red-400: hsl(0, 65%, 37%);
     --red-500: hsl(0, 65%, 22%);
     --red-600: hsl(0, 65%, 22%);
-    --yellow-100: hsl(41, 80%, 96%);
-    --yellow-200: hsl(41, 80%, 96%);
+    --yellow-100: hsl(41, 85%, 95%);
+    --yellow-200: hsl(41, 85%, 95%);
     --yellow-300: hsl(43, 85%, 50%);
     --yellow-400: hsl(43, 85%, 50%);
     --yellow-500: hsl(48, 85%, 18%);

package/lib/exports/color-sets.less

@@ -222,12 +222,12 @@
 
 // Yellow
 .set-yellow() {
-    100: hsl(43, 80%, 96%);
-    200: hsl(43, 80%, 88%);
+    100: hsl(43, 85%, 95%);
+    200: hsl(43, 85%, 88%);
     300: hsl(43, 85%, 72%);
     400: hsl(43, 85%, 50%);
     500: hsl(43, 85%, 33%);
-    600: hsl(43, 84%, 18%);
+    600: hsl(43, 85%, 18%);
 }
 .set-yellow-dark() {
     100: hsl(43, 50%, 17%);
@@ -238,8 +238,8 @@
     600: hsl(43, 90%, 91%);
 }
 .set-yellow-hc() {
-    100: hsl(41, 80%, 96%);
-    200: hsl(41, 80%, 96%);
+    100: hsl(41, 85%, 95%);
+    200: hsl(41, 85%, 95%);
     300: hsl(43, 85%, 50%);
     400: hsl(43, 85%, 50%);
     500: hsl(48, 85%, 18%);

package/lib/test/test-utils.ts

@@ -3,13 +3,13 @@ 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 registerAPCACheck from "apca-check";
 
 const customConformanceThresholdFn = (fontSize: string): number | null => {
     return parseFloat(fontSize) >= 32 ? 45 : 60;
 };
 
-registerAxeAPCA("custom", customConformanceThresholdFn);
+registerAPCACheck("custom", customConformanceThresholdFn);
 
 const colorThemes = ["dark", "light"];
 const baseThemes = ["", "highcontrast"];

package/package.json

@@ -5,7 +5,7 @@
         "type": "git",
         "url": "https://github.com/StackExchange/Stacks.git"
     },
-    "version": "2.0.3",
+    "version": "2.0.5",
     "files": [
         "dist",
         "lib"
@@ -46,30 +46,30 @@
         "@11ty/eleventy": "^2.0.1",
         "@highlightjs/cdn-assets": "^11.9.0",
         "@open-wc/testing": "^3.2.0",
-        "@rollup/plugin-commonjs": "^25.0.4",
-        "@rollup/plugin-replace": "^5.0.4",
+        "@rollup/plugin-commonjs": "^25.0.7",
+        "@rollup/plugin-replace": "^5.0.5",
         "@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.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",
+        "@types/cssbeautify": "^0.3.4",
+        "@types/less": "^3.0.5",
+        "@typescript-eslint/eslint-plugin": "^6.9.0",
+        "@typescript-eslint/parser": "^6.9.0",
+        "@web/dev-server-esbuild": "^0.4.3",
+        "@web/dev-server-rollup": "^0.5.4",
+        "@web/test-runner": "^0.17.2",
+        "@web/test-runner-playwright": "^0.10.2",
         "@web/test-runner-visual-regression": "^0.8.2",
-        "axe-apca": "^0.0.3",
-        "concurrently": "^8.2.1",
+        "apca-check": "^0.1.0",
+        "concurrently": "^8.2.2",
         "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.50.0",
+        "eslint": "^8.52.0",
         "eslint-config-prettier": "^9.0.0",
         "eslint-plugin-no-unsanitized": "^4.0.2",
         "jquery": "^3.7.1",
@@ -81,16 +81,16 @@
         "postcss-loader": "^7.3.3",
         "prettier": "^3.0.3",
         "rollup-plugin-postcss": "^4.0.2",
-        "stylelint": "^15.10.3",
+        "stylelint": "^15.11.0",
         "stylelint-config-recommended": "^13.0.0",
         "stylelint-config-standard": "^34.0.0",
         "terser-webpack-plugin": "^5.3.9",
         "ts-loader": "^9.5.0",
         "typescript": "^5.2.2",
-        "vitest": "^0.33.0",
-        "webpack": "^5.88.2",
+        "vitest": "^0.34.6",
+        "webpack": "^5.89.0",
         "webpack-cli": "^5.1.4",
-        "webpack-merge": "^5.9.0"
+        "webpack-merge": "^5.10.0"
     },
     "browserslist": [
         "last 2 versions",