@stackoverflow/stacks 2.0.7 → 2.0.9

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

@@ -142,6 +142,11 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
     --bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.06), 0 2px 6px hsla(0, 0%, 0%, 0.06), 0 3px 8px hsla(0, 0%, 0%, 0.09);
     --bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.09), 0 3px 8px hsla(0, 0%, 0%, 0.09), 0 4px 13px hsla(0, 0%, 0%, 0.13);
     --bs-xl: 0 10px 24px hsla(0, 0%, 0%, 0.05), 0 20px 48px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.1);
+    --translucent-secondary: var(--theme-secondary-custom-translucent, hsla(206, 100%, 40%, 0.15));
+    --translucent-success: hsla(140, 40%, 75%, 0.4);
+    --translucent-warning: hsla(47, 79%, 58%, 0.4);
+    --translucent-error: hsla(358, 62%, 47%, 0.15);
+    --translucent-muted: hsla(210, 8%, 15%, 0.1);
     --focus-ring: var(--theme-secondary-custom-focus-ring, hsla(206, 100%, 40%, 0.15));
     --focus-ring-success: hsla(140, 40%, 75%, 0.4);
     --focus-ring-warning: hsla(47, 79%, 58%, 0.4);
@@ -189,6 +194,7 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
     --theme-secondary-custom-600: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + (var(--theme-base-secondary-color-l) * -.6)));
     --theme-secondary-custom: var(--theme-secondary-custom-400);
     --theme-secondary-custom-focus-ring: hsla(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l), 0.15);
+    --theme-secondary-custom-translucent: hsla(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l), 0.15);
     color: var(--theme-body-font-color, var(--black-600));
 }
 
@@ -269,6 +275,11 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
     --bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.11), 0 2px 6px hsla(0, 0%, 0%, 0.11), 0 3px 8px hsla(0, 0%, 0%, 0.14);
     --bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.14), 0 3px 8px hsla(0, 0%, 0%, 0.14), 0 4px 13px hsla(0, 0%, 0%, 0.18);
     --bs-xl: 0 10px 24px hsla(0, 0%, 0%, 0.1), 0 20px 48px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.15);
+    --translucent-secondary: var(--theme-dark-secondary-custom-translucent, hsla(206, 100%, 40%, 0.25));
+    --translucent-success: hsla(140, 40%, 75%, 0.4);
+    --translucent-warning: hsla(47, 79%, 58%, 0.4);
+    --translucent-error: hsla(358, 62%, 47%, 0.15);
+    --translucent-muted: hsla(210, 8%, 15%, 0.1);
     --focus-ring: var(--theme-dark-secondary-custom-focus-ring, hsla(206, 100%, 40%, 0.25));
     --focus-ring-success: hsla(140, 40%, 75%, 0.4);
     --focus-ring-warning: hsla(47, 79%, 58%, 0.4);
@@ -316,6 +327,7 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
     --theme-dark-secondary-custom-600: hsl(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), calc(var(--theme-dark-secondary-color-l) + ((100% - var(--theme-dark-secondary-color-l)) * .8)));
     --theme-dark-secondary-custom: var(--theme-dark-secondary-custom-400);
     --theme-dark-secondary-custom-focus-ring: hsla(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), var(--theme-dark-secondary-color-l), 0.25);
+    --theme-dark-secondary-custom-translucent: hsla(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), var(--theme-dark-secondary-color-l), 0.25);
     color: var(--theme-body-font-color, var(--black-600));
 }
 
@@ -394,6 +406,11 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
         --bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.11), 0 2px 6px hsla(0, 0%, 0%, 0.11), 0 3px 8px hsla(0, 0%, 0%, 0.14);
         --bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.14), 0 3px 8px hsla(0, 0%, 0%, 0.14), 0 4px 13px hsla(0, 0%, 0%, 0.18);
         --bs-xl: 0 10px 24px hsla(0, 0%, 0%, 0.1), 0 20px 48px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.15);
+        --translucent-secondary: var(--theme-dark-secondary-custom-translucent, hsla(206, 100%, 40%, 0.25));
+        --translucent-success: hsla(140, 40%, 75%, 0.4);
+        --translucent-warning: hsla(47, 79%, 58%, 0.4);
+        --translucent-error: hsla(358, 62%, 47%, 0.15);
+        --translucent-muted: hsla(210, 8%, 15%, 0.1);
         --focus-ring: var(--theme-dark-secondary-custom-focus-ring, hsla(206, 100%, 40%, 0.25));
         --focus-ring-success: hsla(140, 40%, 75%, 0.4);
         --focus-ring-warning: hsla(47, 79%, 58%, 0.4);
@@ -441,6 +458,7 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
         --theme-dark-secondary-custom-600: hsl(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), calc(var(--theme-dark-secondary-color-l) + ((100% - var(--theme-dark-secondary-color-l)) * .8)));
         --theme-dark-secondary-custom: var(--theme-dark-secondary-custom-400);
         --theme-dark-secondary-custom-focus-ring: hsla(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), var(--theme-dark-secondary-color-l), 0.25);
+        --theme-dark-secondary-custom-translucent: hsla(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), var(--theme-dark-secondary-color-l), 0.25);
         color: var(--theme-body-font-color, var(--black-600));
     }
 }
@@ -519,6 +537,11 @@ body.theme-highcontrast.theme-system .theme-light__forced {
     --bs-md: none;
     --bs-lg: none;
     --bs-xl: none;
+    --translucent-secondary: hsla(206, 100%, 40%, 0.9);
+    --translucent-success: hsla(140, 40%, 40%, 0.9);
+    --translucent-warning: hsla(47, 76%, 46%, 0.9);
+    --translucent-error: hsla(358, 62%, 47%, 0.9);
+    --translucent-muted: hsla(210, 8%, 55%, 0.95);
     --focus-ring: hsla(206, 100%, 40%, 0.9);
     --focus-ring-success: hsla(140, 40%, 40%, 0.9);
     --focus-ring-warning: hsla(47, 76%, 46%, 0.9);
@@ -627,6 +650,11 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
     --bs-md: none;
     --bs-lg: none;
     --bs-xl: none;
+    --translucent-secondary: hsla(206, 100%, 40%, 0.9);
+    --translucent-success: hsla(140, 40%, 40%, 0.9);
+    --translucent-warning: hsla(47, 76%, 46%, 0.9);
+    --translucent-error: hsla(358, 62%, 47%, 0.9);
+    --translucent-muted: hsla(210, 8%, 55%, 0.95);
     --focus-ring: hsla(206, 100%, 40%, 0.9);
     --focus-ring-success: hsla(140, 40%, 40%, 0.9);
     --focus-ring-warning: hsla(47, 76%, 46%, 0.9);
@@ -735,6 +763,11 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
         --bs-md: none;
         --bs-lg: none;
         --bs-xl: none;
+        --translucent-secondary: hsla(206, 100%, 40%, 0.9);
+        --translucent-success: hsla(140, 40%, 40%, 0.9);
+        --translucent-warning: hsla(47, 76%, 46%, 0.9);
+        --translucent-error: hsla(358, 62%, 47%, 0.9);
+        --translucent-muted: hsla(210, 8%, 55%, 0.95);
         --focus-ring: hsla(206, 100%, 40%, 0.9);
         --focus-ring-success: hsla(140, 40%, 40%, 0.9);
         --focus-ring-warning: hsla(47, 76%, 46%, 0.9);

package/lib/exports/color-mixins.less

@@ -228,6 +228,7 @@
 
         & when (@tier = secondary) {
             @{varBase}-focus-ring: ~"hsla(@{focusRingHSLVars}, 0.15)";
+            @{varBase}-translucent: ~"hsla(@{focusRingHSLVars}, 0.15)";
         }
     }
 
@@ -244,6 +245,7 @@
 
         & when (@tier = secondary) {
             @{varBaseDark}-focus-ring: ~"hsla(@{focusRingHSLVars}, 0.25)";
+            @{varBaseDark}-translucent: ~"hsla(@{focusRingHSLVars}, 0.25)";
         }
     }
 }

package/lib/exports/color-sets.less

@@ -430,6 +430,29 @@
     warning: var(--yellow-500);
 }
 
+// translucent utility colors (HC set represents both light and dark HC modes)
+.set-translucent() {
+    secondary: var(--theme-secondary-custom-translucent, hsla(206, 100%, 40%, 0.15));
+    success: hsla(140, 40%, 75%, 0.4);
+    warning: hsla(47, 79%, 58%, 0.4);
+    error: hsla(358, 62%, 47%, 0.15);
+    muted: hsla(210, 8%, 15%, 0.1);
+}
+.set-translucent-dark() {
+    secondary: var(--theme-dark-secondary-custom-translucent, hsla(206, 100%, 40%, 0.25));
+    success: hsla(140, 40%, 75%, 0.4);
+    warning: hsla(47, 79%, 58%, 0.4);
+    error: hsla(358, 62%, 47%, 0.15);
+    muted: hsla(210, 8%, 15%, 0.1);
+}
+.set-translucent-hc() {
+    secondary: hsla(206, 100%, 40%, 0.9);
+    success: hsla(140, 40%, 40%, 0.9);
+    warning: hsla(47, 76%, 46%, 0.9);
+    error: hsla(358, 62%, 47%, 0.9);
+    muted: hsla(210, 8%, 55%, 0.95);
+}
+
 // focus (sets represents both light and dark mode)
 .set-focus() {
     default: var(--theme-secondary-custom-focus-ring, hsla(206, 100%, 40%, 0.15));
@@ -607,6 +630,7 @@
 .sets-utility() {
     bc: .set-bc();
     bs: .set-bs();
+    translucent: .set-translucent();
     focus-ring: .set-focus();
     highlight: .set-highlight();
     scrollbar: .set-scrollbar();
@@ -615,6 +639,7 @@
 .sets-utility-dark() {
     bc: .set-bc();
     bs: .set-bs-dark();
+    translucent: .set-translucent-dark();
     focus-ring: .set-focus-dark();
     highlight: .set-highlight-dark();
     scrollbar: .set-scrollbar-dark();
@@ -623,6 +648,7 @@
 .sets-utility-hc() {
     bc: .set-bc-hc();
     bs: .set-bs-hc();
+    translucent: .set-translucent-hc();
     focus-ring: .set-focus-hc();
     highlight: .set-highlight-hc();
     scrollbar: .set-scrollbar-hc();
@@ -631,6 +657,7 @@
 .sets-utility-dark-hc() {
     bc: .set-bc-hc();
     bs: .set-bs-hc-dark();
+    translucent: .set-translucent-hc();
     focus-ring: .set-focus-hc();
     highlight: .set-highlight-hc-dark();
     scrollbar: .set-scrollbar-hc-dark();

package/lib/tsconfig.json

@@ -10,8 +10,8 @@
         "declaration": true,
         "allowSyntheticDefaultImports": true,
         "paths": {
-            "@open-wc/testing": ["./test/open-wc-testing-patch.d.ts"]
-        }
+            "@open-wc/testing": ["./test/open-wc-testing-patch.d.ts"],
+        },
     },
-    "include": ["**/*.ts"]
+    "include": ["**/*.ts"],
 }

package/package.json

@@ -5,7 +5,7 @@
         "type": "git",
         "url": "https://github.com/StackExchange/Stacks.git"
     },
-    "version": "2.0.7",
+    "version": "2.0.9",
     "files": [
         "dist",
         "lib"
@@ -50,46 +50,46 @@
         "@rollup/plugin-replace": "^5.0.5",
         "@stackoverflow/stacks-editor": "^0.9.1",
         "@stackoverflow/stacks-icons": "^6.0.0",
-        "@testing-library/dom": "^9.3.3",
-        "@testing-library/user-event": "^14.5.1",
+        "@testing-library/dom": "^9.3.4",
+        "@testing-library/user-event": "^14.5.2",
         "@types/cssbeautify": "^0.3.5",
-        "@types/less": "^3.0.5",
-        "@types/mocha": "^10.0.4",
-        "@typescript-eslint/eslint-plugin": "^6.10.0",
-        "@typescript-eslint/parser": "^6.9.1",
-        "@web/dev-server-esbuild": "^1.0.0",
-        "@web/dev-server-rollup": "^0.6.0",
+        "@types/less": "^3.0.6",
+        "@types/mocha": "^10.0.6",
+        "@typescript-eslint/eslint-plugin": "^6.19.0",
+        "@typescript-eslint/parser": "^6.19.0",
+        "@web/dev-server-esbuild": "^1.0.1",
+        "@web/dev-server-rollup": "^0.6.1",
         "@web/test-runner": "^0.18.0",
         "@web/test-runner-playwright": "^0.11.0",
         "@web/test-runner-visual-regression": "^0.9.0",
         "apca-check": "^0.1.0",
         "colorjs.io": "^0.4.5",
         "concurrently": "^8.2.2",
-        "css-loader": "^6.8.1",
+        "css-loader": "^6.9.1",
         "cssbeautify": "^0.3.1",
-        "cssnano": "^6.0.1",
+        "cssnano": "^6.0.3",
         "docsearch.js": "^2.6.3",
         "eleventy-plugin-highlightjs": "^1.1.0",
         "eleventy-plugin-nesting-toc": "^1.3.0",
-        "eslint": "^8.53.0",
-        "eslint-config-prettier": "^9.0.0",
+        "eslint": "^8.56.0",
+        "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-no-unsanitized": "^4.0.2",
         "jquery": "^3.7.1",
-        "less-loader": "^11.1.3",
+        "less-loader": "^12.1.0",
         "list.js": "^2.3.1",
-        "markdown-it": "^13.0.2",
-        "mini-css-extract-plugin": "^2.7.6",
+        "markdown-it": "^14.0.0",
+        "mini-css-extract-plugin": "^2.7.7",
         "postcss-less": "^6.0.0",
-        "postcss-loader": "^7.3.3",
-        "prettier": "^3.1.0",
+        "postcss-loader": "^8.0.0",
+        "prettier": "^3.2.4",
         "rollup-plugin-postcss": "^4.0.2",
-        "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.34.6",
+        "stylelint": "^16.2.0",
+        "stylelint-config-recommended": "^14.0.0",
+        "stylelint-config-standard": "^36.0.0",
+        "terser-webpack-plugin": "^5.3.10",
+        "ts-loader": "^9.5.1",
+        "typescript": "^5.3.3",
+        "vitest": "^1.2.1",
         "webpack": "^5.89.0",
         "webpack-cli": "^5.1.4",
         "webpack-merge": "^5.10.0"