@stackoverflow/stacks 2.0.0-rc.0 → 2.0.0-rc.2

package/lib/exports/color-sets.less

@@ -1,76 +1,87 @@
 /* stylelint-disable property-no-unknown */
 
+// For colors to render properly, you *cannot* have inline comments following a color value
+// The color *and comments* will be passed as the value for the given key and
+// it will fail silently in Stacks' build but might break consumer's builds
+//
+// For example, the value of this:
+//  default: hsl(0, 0%, 100%); // test comment
+// Will render as this:
+//  hsl(0, 0%, 100%); // test comment
+//
+// tl;dr: don't put inline after values in this file
+
 // White
 .set-white() {
-    default: hsl(0, 0%, 100%); // matches .set-black()[050]
+    default: hsl(0, 0%, 100%);
 }
 .set-white-dark() {
-    default: hsl(220, 3%, 15%); // matches .set-black-dark()[050]
+    default: hsl(210, 3%, 15%);
 }
 .set-white-hc() {
-    default: hsl(0, 0%, 100%); // matches .set-black-hc()[050]
+    default: hsl(0, 0%, 100%);
 }
 .set-white-hc-dark() {
-    default: hsl(0, 0%, 0%); // matches .set-black-dark-hc()[050]
+    default: hsl(0, 0%, 0%);
 }
 
 // Black
 .set-black() {
-    050: hsl(0, 0%, 100%); // renders as white
+    050: hsl(0, 0%, 100%);
     100: hsl(210, 8%, 98%);
     150: hsl(210, 8%, 95%);
     200: hsl(210, 8%, 90%);
     225: hsl(210, 8%, 85%);
     250: hsl(210, 8%, 80%);
-    300: hsl(213, 9%, 75%);
-    350: hsl(212, 8%, 68%);
-    400: hsl(210, 8%, 45%);
+    300: hsl(210, 9%, 75%);
+    350: hsl(210, 8%, 68%);
+    400: hsl(210, 8%, 42%);
     500: hsl(210, 8%, 25%);
     600: hsl(210, 8%, 5%);
-    default: hsl(0, 8%, 5%); // black, no stop // TODO verify the value w/ design
+    default: hsl(210, 8%, 5%);
 }
 .set-black-dark() {
-    050: hsl(220, 3%, 15%);
-    100: hsl(220, 3%, 18%);
-    150: hsl(230, 4%, 21%);
-    200: hsl(233, 4%, 27%);
-    225: hsl(233, 4%, 30%);
-    250: hsl(235, 5%, 36%);
-    300: hsl(233, 4%, 47%);
-    350: hsl(219, 10%, 60%);
-    400: hsl(220, 10%, 74%);
-    500: hsl(220, 10%, 83%);
-    600: hsl(180, 11%, 98%);
-    default: hsl(0, 0%, 100%); // white, no stop // TODO verify the value w/ design
+    050: hsl(210, 3%, 15%);
+    100: hsl(210, 3%, 18%);
+    150: hsl(210, 4%, 21%);
+    200: hsl(210, 4%, 27%);
+    225: hsl(210, 4%, 30%);
+    250: hsl(210, 5%, 36%);
+    300: hsl(210, 4%, 47%);
+    350: hsl(210, 8%, 70%);
+    400: hsl(210, 8%, 80%);
+    500: hsl(210, 8%, 90%);
+    600: hsl(210, 11%, 98%);
+    default: hsl(0, 0%, 100%);
 }
 .set-black-hc() {
-    050: hsl(0, 0%, 100%); // renders as white
+    050: hsl(0, 0%, 100%);
     100: hsl(210, 8%, 98%);
     150: hsl(210, 8%, 95%);
     200: hsl(210, 8%, 90%);
     225: hsl(210, 8%, 85%);
     250: hsl(210, 8%, 80%);
-    300: hsl(213, 9%, 75%);
+    300: hsl(210, 9%, 75%);
     350: hsl(210, 8%, 45%);
-    400: hsl(210, 8%, 45%);
+    400: hsl(212, 8%, 35%);
     500: hsl(210, 8%, 25%);
     600: hsl(210, 8%, 5%);
-    default: hsl(0, 8%, 5%); // black, no stop // TODO verify the value w/ design
+    default: hsl(210, 8%, 5%);
 }
 
 .set-black-hc-dark() {
-    050: hsl(220, 3%, 15%);
-    100: hsl(220, 3%, 18%);
-    150: hsl(230, 4%, 21%);
-    200: hsl(233, 4%, 27%);
-    225: hsl(233, 4%, 30%);
-    250: hsl(235, 5%, 36%);
-    300: hsl(233, 4%, 47%);
-    350: hsl(220, 10%, 74%);
-    400: hsl(220, 10%, 74%);
-    500: hsl(220, 10%, 83%);
-    600: hsl(180, 11%, 98%);
-    default: hsl(0, 0%, 100%); // white, no stop // TODO verify the value w/ design
+    050: hsl(210, 3%, 15%);
+    100: hsl(210, 3%, 18%);
+    150: hsl(210, 4%, 21%);
+    200: hsl(210, 4%, 27%);
+    225: hsl(210, 4%, 30%);
+    250: hsl(210, 5%, 36%);
+    300: hsl(210, 4%, 47%);
+    350: hsl(210, 10%, 74%);
+    400: hsl(210, 8%, 80%);
+    500: hsl(210, 8%, 90%);
+    600: hsl(210, 11%, 98%);
+    default: hsl(0, 0%, 100%);
 }
 
 // Orange
@@ -78,33 +89,33 @@
     100: hsl(23, 85%, 97%);
     200: hsl(27, 85%, 87%);
     300: hsl(27, 85%, 72%);
-    400: hsl(27, 90%, 55%);
-    500: hsl(27, 88%, 43%);
+    400: hsl(27, 80%, 52%);
+    500: hsl(27, 80%, 43%);
     600: hsl(27, 80%, 29%);
 }
 .set-orange-dark() {
     100: hsl(27, 29%, 19%);
     200: hsl(27, 43%, 31%);
     300: hsl(27, 43%, 47%);
-    400: hsl(27, 80%, 64%);
-    500: hsl(27, 80%, 78%);
-    600: hsl(27, 80%, 89%);
+    400: hsl(27, 80%, 80%);
+    500: hsl(27, 80%, 88%);
+    600: hsl(27, 80%, 93%);
 }
 .set-orange-hc() {
     100: hsl(22, 85%, 97%);
     200: hsl(22, 85%, 97%);
     300: hsl(27, 90%, 55%);
     400: hsl(27, 90%, 55%);
-    500: hsl(27, 80%, 29%);
-    600: hsl(27, 80%, 29%);
+    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%);
-    400: hsl(27, 80%, 64%);
+    400: hsl(27, 80%, 80%);
     500: hsl(27, 79%, 89%);
-    600: hsl(27, 79%, 89%);
+    600: hsl(27, 80%, 93%);
 }
 
 // Blue
@@ -112,23 +123,23 @@
     100: hsl(210, 80%, 96%);
     200: hsl(210, 80%, 91%);
     300: hsl(210, 78%, 76%);
-    400: hsl(210, 70%, 48%);
-    500: hsl(210, 75%, 36%);
+    400: hsl(210, 77%, 46%);
+    500: hsl(210, 77%, 36%);
     600: hsl(210, 80%, 23%);
 }
 .set-blue-dark() {
     100: hsl(209, 29%, 19%);
     200: hsl(210, 29%, 35%);
     300: hsl(210, 29%, 50%);
-    400: hsl(210, 81%, 72%);
-    500: hsl(210, 80%, 82%);
-    600: hsl(210, 80%, 90%);
+    400: hsl(210, 80%, 80%);
+    500: hsl(210, 80%, 88%);
+    600: hsl(210, 80%, 93%);
 }
 .set-blue-hc() {
     100: hsl(210, 80%, 96%);
     200: hsl(210, 80%, 96%);
     300: hsl(210, 70%, 48%);
-    400: hsl(210, 70%, 48%);
+    400: hsl(210, 77%, 34%);
     500: hsl(210, 80%, 23%);
     600: hsl(210, 80%, 23%);
 }
@@ -136,9 +147,9 @@
     100: hsl(209, 29%, 19%);
     200: hsl(209, 29%, 19%);
     300: hsl(210, 80%, 72%);
-    400: hsl(210, 80%, 72%);
+    400: hsl(210, 80%, 80%);
     500: hsl(209, 79%, 87%);
-    600: hsl(209, 79%, 87%);
+    600: hsl(210, 80%, 93%);
 }
 
 // Green
@@ -154,15 +165,15 @@
     100: hsl(148, 29%, 19%);
     200: hsl(148, 29%, 27%);
     300: hsl(148, 25%, 40%);
-    400: hsl(148, 40%, 62%);
-    500: hsl(148, 40%, 75%);
-    600: hsl(148, 40%, 87%);
+    400: hsl(148, 40%, 75%);
+    500: hsl(148, 40%, 85%);
+    600: hsl(148, 40%, 93%);
 }
 .set-green-hc() {
     100: hsl(147, 36%, 95%);
     200: hsl(147, 36%, 95%);
     300: hsl(148, 70%, 31%);
-    400: hsl(148, 70%, 31%);
+    400: hsl(148, 75%, 22%);
     500: hsl(147, 74%, 15%);
     600: hsl(147, 74%, 15%);
 }
@@ -170,9 +181,9 @@
     100: hsl(147, 29%, 19%);
     200: hsl(147, 29%, 19%);
     300: hsl(148, 40%, 62%);
-    400: hsl(148, 40%, 62%);
+    400: hsl(148, 40%, 75%);
     500: hsl(148, 39%, 87%);
-    600: hsl(148, 39%, 87%);
+    600: hsl(148, 40%, 93%);
 }
 
 // Red
@@ -188,15 +199,15 @@
     100: hsl(358, 29%, 19%);
     200: hsl(0, 29%, 37%);
     300: hsl(0, 34%, 54%);
-    400: hsl(0, 75%, 77%);
-    500: hsl(0, 69%, 85%);
-    600: hsl(0, 69%, 93%);
+    400: hsl(0, 73%, 85%);
+    500: hsl(0, 73%, 91%);
+    600: hsl(0, 73%, 95%);
 }
 .set-red-hc() {
     100: hsl(0, 79%, 96%);
     200: hsl(0, 79%, 96%);
     300: hsl(0, 60%, 49%);
-    400: hsl(0, 60%, 49%);
+    400: hsl(0, 65%, 37%);
     500: hsl(0, 66%, 24%);
     600: hsl(0, 66%, 24%);
 }
@@ -204,9 +215,9 @@
     100: hsl(358, 29%, 19%);
     200: hsl(358, 29%, 19%);
     300: hsl(0, 75%, 77%);
-    400: hsl(0, 75%, 77%);
+    400: hsl(0, 73%, 85%);
     500: hsl(0, 70%, 92%);
-    600: hsl(0, 70%, 92%);
+    600: hsl(0, 73%, 95%);
 }
 
 // Yellow
@@ -222,9 +233,9 @@
     100: hsl(43, 29%, 17%);
     200: hsl(43, 29%, 25%);
     300: hsl(43, 29%, 40%);
-    400: hsl(43, 59%, 64%);
-    500: hsl(43, 65%, 70%);
-    600: hsl(43, 65%, 85%);
+    400: hsl(43, 75%, 75%);
+    500: hsl(43, 75%, 85%);
+    600: hsl(43, 75%, 91%);
 }
 .set-yellow-hc() {
     100: hsl(41, 80%, 96%);
@@ -238,9 +249,43 @@
     100: hsl(43, 29%, 17%);
     200: hsl(43, 29%, 17%);
     300: hsl(43, 59%, 64%);
-    400: hsl(43, 59%, 64%);
+    400: hsl(43, 75%, 75%);
     500: hsl(48, 74%, 91%);
-    600: hsl(48, 74%, 91%);
+    600: hsl(43, 75%, 91%);
+}
+
+// Purple
+.set-purple() {
+    100: hsl(237, 80%, 96%);
+    200: hsl(237, 77%, 92%);
+    300: hsl(237, 60%, 83%);
+    400: hsl(237, 55%, 57%);
+    500: hsl(237, 50%, 45%);
+    600: hsl(237, 50%, 32%);
+}
+.set-purple-dark() {
+    100: hsl(237, 25%, 24%);
+    200: hsl(237, 27%, 38%);
+    300: hsl(237, 32%, 56%);
+    400: hsl(237, 58%, 86%);
+    500: hsl(237, 60%, 91%);
+    600: hsl(237, 65%, 96%);
+}
+.set-purple-hc() {
+    100: hsl(237, 80%, 96%);
+    200: hsl(237, 80%, 96%);
+    300: hsl(237, 55%, 57%);
+    400: hsl(237, 55%, 57%);
+    500: hsl(237, 50%, 32%);
+    600: hsl(237, 50%, 32%);
+}
+.set-purple-hc-dark() {
+    100: hsl(237, 25%, 24%);
+    200: hsl(237, 25%, 24%);
+    300: hsl(237, 58%, 86%);
+    400: hsl(237, 58%, 86%);
+    500: hsl(237, 65%, 96%);
+    600: hsl(237, 65%, 96%);
 }
 
 // gold
@@ -284,7 +329,7 @@
 }
 .set-silver-hc() {
     100: hsl(0, 0%, 95%);
-    200: hsl(0, 0%, 84%);
+    200: hsl(0, 0%, 95%);
     300: hsl(210, 5%, 68%);
     400: hsl(216, 2%, 40%);
 }
@@ -426,12 +471,12 @@
 }
 .set-highlight-dark() {
     addition: var(--green-500);
-    attribute: hsl(207, 41.5%, 67%);
+    attribute: var(--blue-400);
     bg: hsl(0, 2%, 11%);
     color: var(--black);
     comment: hsl(0, 0%, 60%);
     deletion: var(--red-500);
-    keyword: hsl(208, 41.5%, 67%);
+    keyword:var(--blue-400);
     literal: hsl(27, 85%, 61.5%);
     namespace: hsl(27, 85%, 61.5%);
     punctuation: hsl(0, 0%, 80%);
@@ -491,6 +536,7 @@
     green: .set-green();
     red: .set-red();
     yellow: .set-yellow();
+    purple: .set-purple();
     gold: .set-gold();
     silver: .set-silver();
     bronze: .set-bronze();
@@ -504,6 +550,7 @@
     green: .set-green-dark();
     red: .set-red-dark();
     yellow: .set-yellow-dark();
+    purple: .set-purple-dark();
     gold: .set-gold-dark();
     silver: .set-silver-dark();
     bronze: .set-bronze-dark();
@@ -517,6 +564,7 @@
     green: .set-green-hc();
     red: .set-red-hc();
     yellow: .set-yellow-hc();
+    purple: .set-purple-hc();
     gold: .set-gold-hc();
     silver: .set-silver-hc();
     bronze: .set-bronze-hc();
@@ -530,6 +578,7 @@
     green: .set-green-hc-dark();
     red: .set-red-hc-dark();
     yellow: .set-yellow-hc-dark();
+    purple: .set-purple-hc-dark();
     gold: .set-gold-hc-dark();
     silver: .set-silver-hc-dark();
     bronze: .set-bronze-hc-dark();
@@ -610,11 +659,11 @@
 }
 
 .theme-light-default() {
-    primary: .set-orange()[400]; // orange-400 (light)
-    secondary: .set-blue()[400]; // blue-400 (light)
+    primary: .set-orange()[400];
+    secondary: .set-blue()[400];
 }
 
 .theme-dark-default() {
-    primary: .set-orange-dark()[400]; // orange-400 (dark)
-    secondary: .set-blue-dark()[400]; // blue-400 (dark)
+    primary: .set-orange-dark()[400];
+    secondary: .set-blue-dark()[400];
 }

package/lib/exports/theme.less

@@ -9,7 +9,7 @@
     // 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-color: var(--theme-secondary-500);
     --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);
@@ -19,8 +19,8 @@
     --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-hover-background-color: var(--theme-secondary-500);
+    --theme-button-primary-active-background-color: var(--theme-secondary-600);
     --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);

package/lib/input-utils.less

@@ -28,7 +28,7 @@
     }
 
     .has-warning & {
-        --_@{prefix}-bc: var(--yellow-600);
+        --_@{prefix}-bc: var(--yellow-500);
         --_@{prefix}-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-warning);
         @warning();
     }

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

@@ -32,3 +32,22 @@ axe.configure({
     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/src/axe-apca.test.ts

@@ -13,6 +13,82 @@ const runAxe = async (el: HTMLElement): Promise<AxeResults> => {
 };
 
 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");
@@ -44,7 +120,7 @@ describe("axe-apca", () => {
         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;"
+                    style="background: white; color: gray; font-size: 12px; font-weight: 400;"
                 >
                     Some copy
                 </p>`

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

@@ -12,6 +12,13 @@ type Color = {
     toHexString: () => string;
 };
 
+type ConformanceLevel = "bronze" | "silver" | "custom";
+
+type ConformanceThresholdFn = (
+    fontSize: string,
+    fontWeight: string
+) => number | null;
+
 declare module "axe-core" {
     const commons: {
         color: {
@@ -89,10 +96,7 @@ const getAPCABronzeThreshold = (fontSize: string): number | null => {
 
 const generateColorContrastAPCAConformanceCheck = (
     conformanceLevel: string,
-    conformanceThresholdFn: (
-        fontSize: string,
-        fontWeight: string
-    ) => number | null
+    conformanceThresholdFn: ConformanceThresholdFn
 ): Check => ({
     id: `color-contrast-apca-${conformanceLevel}-conformance`,
     metadata: {
@@ -188,15 +192,19 @@ const colorContrastAPCABronzeConformanceCheck =
 const colorContrastAPCASilverRule = generateColorContrastAPCARule("silver");
 const colorContrastAPCABronzeRule = generateColorContrastAPCARule("bronze");
 
-const registerAxeAPCA = (conformanceLevel: "bronze" | "silver") => {
+const registerAxeAPCA = (
+    conformanceLevel: ConformanceLevel,
+    customConformanceThresholdFn?: ConformanceThresholdFn
+) => {
     axe.configure({
         rules: [generateColorContrastAPCARule(conformanceLevel)],
         checks: [
             generateColorContrastAPCAConformanceCheck(
                 conformanceLevel,
-                conformanceLevel === "bronze"
-                    ? getAPCABronzeThreshold
-                    : getAPCASilverPlusThreshold
+                customConformanceThresholdFn ||
+                    (conformanceLevel === "silver"
+                        ? getAPCASilverPlusThreshold
+                        : getAPCABronzeThreshold)
             ),
         ],
     });

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)