@stackoverflow/stacks 2.1.1 → 2.3.0

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

@@ -10,6 +10,7 @@ import {
     IconSearch,
     IconStackExchange,
 } from "@stackoverflow/stacks-icons/icons";
+import { html } from "@open-wc/testing";
 
 const base64Image =
     "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATwAAAE8CAMAAABq2/00AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABhQTFRF/3IA/////44y/8OS/+fU//Xs/6tn/9e2EhvbMQAABH9JREFUeNrs3e1y2ygAhWELJHH/d7zuJpN1XAnxoe408Ly/6xnnHXEOIEwfDwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/gbAGEhrZl2VloY20PIk8tAzZbfkXA7eeuHyysVfdFMsXiY66ptiWF8Re05BdxF7HkBV7PUNW7FVx4E7sVSwrDjBw2+pC7NWwHtkTe3ULM7En9v6O2ONF7Ik9sSf2IPbEntgTexB7t8feTsynniD2Oh6tXex1hFoUe02kaxVi72JMZs+Rib0LLdkXFGLvaECWjkOxdxVmUex1rB6S2Kss2lcytSH2LnVkakPsXQ7E8xwTe5fuMrUh9vKj8CP4xN7lNOXc3mnwib1M2X7Z28VeS93mg0/sFZTG6WCMVSE51fqsYL4s9jpqQ+yV1caxErHXUxtir6c2xF5HbYRF7LXXhtjrqQ2x11MbYu9tLG4VtSH2empD7BUNxpPaSGKvPPh2sdcxX45i78baEHs18+X32hB7NfPl99oQex21MVHsxViaR8W1MU3s/XpMSvWF0tqYJfY+BmMq01dcG+scP6/6enTK9BW+1J0j9l5aYN0rP5BzM0XsbSUnAlpqY4LYezexFeRSbpslH3uDXdF64OG6est258PohXE8BK+7o6g29rJTQsPt1F3qK9qdTwMP2Wz2X1Vv0UvdbeQ53nl2Xesr2Z0Pww7Zs5lsafWW1MY+6JDNxv5/+kLb5/fXfzLirRdhKSGnr6A2tkGvJoxLGZnqva6NkAbdgA+pUN9a+QuWYYPu+98ee/W1/PJgoMG7lek7nW3UHiEdbKpcqu+kO2L9b4aG0rcWjt5jfWf2Z7kCeE891XtSG/O86A5d+tbZj1h0VW+c/ja90FG9uxMCFdWb/+SkZ1Oaq/d1vjzvXfvF+tLp+aiZT5S1Vm90lrFj02B3bW1d9X7T92u+7Aq9qk2D+Fob/v/Myu7YostC76xe9K966evfr5+7ekuXHVy1V6+R275pEMd3kPbGB+Syeod/8D7Sf41NBvPdMf7a4uXpaTGY0zd+4r0vDlKtwdPqHf/BOzzf8zQYqvRtcz54mXfUNUVyUL0T7AhcrBbKY/C36p1geVEy1y00+F3fBA9eKFxnlRXJa/XOcKxnqeF6Pv1VvTPc7RuXai6K5LN6Z9hQSUsb2Rh86pviUultaScTg/sMD15YeqmcT8/bFx1Foi/umk9P3hcMfqTenrabBT5j8DGTwHivwelOCTwNrnfJm/Ol2U0GZ74WdE+dBn9+Z/z2J9UZ7IjB7dZv8gPl9RRJIq89BiN57QZ38trn04G8k62E6xjcHuQ1D+JEXrvBnbz2+XQgr30+/SCveT69ktceg4m8doOBvDG/CXnkkTezvOXPQB555JFHHnnkkUceeeSRRx555JFHHnnkkWcnmTzyyCOPPPLII4888sgjjzzfhDzyyCOPPPL+9Ff+eyCPPPLII4888sgjjzzyyCOPPPLII4888sgDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPy//CPAAPiZOI3BPDFQAAAAAElFTkSuQmCC";
@@ -185,4 +186,31 @@ describe("topbar", () => {
         children: topbars,
         variants: ["dark variant", "light variant"], // `variant` added to make file labeling clearer
     });
+
+    // Custom theme variables
+    runVisualTests({
+        baseClass: "s-topbar",
+        children: {
+            themed: topbars.default,
+        },
+        template: ({ component, testid }) => html`
+            <div data-testid="${testid}">
+                <style type="text/css">
+                    .s-topbar {
+                        --theme-topbar-accent-border: red;
+                        --theme-topbar-background-color: green;
+                        --theme-topbar-bottom-border: blue;
+                        --theme-topbar-height: 80px;
+                        --theme-topbar-item-color: yellow;
+                        --theme-topbar-search-background: pink;
+                        --theme-topbar-search-border: purple;
+                        --theme-topbar-search-placeholder: white;
+                        --theme-topbar-select-background: lightblue;
+                        --theme-topbar-select-color: magenta;
+                    }
+                </style>
+                ${component}
+            </div>
+        `,
+    });
 });

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

@@ -249,12 +249,12 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
     --yellow-400: hsl(43, 90%, 75%);
     --yellow-500: hsl(43, 90%, 82%);
     --yellow-600: hsl(43, 90%, 91%);
-    --purple-100: hsl(237, 43%, 37%);
-    --purple-200: hsl(237, 51%, 52%);
-    --purple-300: hsl(237, 63%, 62%);
-    --purple-400: hsl(237, 89%, 83%);
-    --purple-500: hsl(237, 89%, 89%);
-    --purple-600: hsl(237, 89%, 94%);
+    --purple-100: hsl(237, 26%, 23%);
+    --purple-200: hsl(237, 26%, 44%);
+    --purple-300: hsl(237, 26%, 56%);
+    --purple-400: hsl(237, 98%, 87%);
+    --purple-500: hsl(237, 98%, 92%);
+    --purple-600: hsl(237, 98%, 96%);
     --gold-100: hsl(45, 29%, 24%);
     --gold-200: hsl(45, 47%, 37%);
     --gold-300: hsl(45, 92%, 62%);
@@ -382,12 +382,12 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
         --yellow-400: hsl(43, 90%, 75%);
         --yellow-500: hsl(43, 90%, 82%);
         --yellow-600: hsl(43, 90%, 91%);
-        --purple-100: hsl(237, 43%, 37%);
-        --purple-200: hsl(237, 51%, 52%);
-        --purple-300: hsl(237, 63%, 62%);
-        --purple-400: hsl(237, 89%, 83%);
-        --purple-500: hsl(237, 89%, 89%);
-        --purple-600: hsl(237, 89%, 94%);
+        --purple-100: hsl(237, 26%, 23%);
+        --purple-200: hsl(237, 26%, 44%);
+        --purple-300: hsl(237, 26%, 56%);
+        --purple-400: hsl(237, 98%, 87%);
+        --purple-500: hsl(237, 98%, 92%);
+        --purple-600: hsl(237, 98%, 96%);
         --gold-100: hsl(45, 29%, 24%);
         --gold-200: hsl(45, 47%, 37%);
         --gold-300: hsl(45, 92%, 62%);
@@ -630,12 +630,12 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
     --yellow-400: hsl(43, 75%, 75%);
     --yellow-500: hsl(48, 74%, 91%);
     --yellow-600: hsl(44, 74%, 91%);
-    --purple-100: hsl(237, 24%, 23%);
-    --purple-200: hsl(237, 24%, 23%);
-    --purple-300: hsl(237, 60%, 82%);
-    --purple-400: hsl(237, 60%, 82%);
-    --purple-500: hsl(237, 62%, 96%);
-    --purple-600: hsl(237, 62%, 96%);
+    --purple-100: hsl(237, 26%, 23%);
+    --purple-200: hsl(237, 26%, 23%);
+    --purple-300: hsl(237, 98%, 87%);
+    --purple-400: hsl(237, 98%, 87%);
+    --purple-500: hsl(237, 98%, 96%);
+    --purple-600: hsl(237, 98%, 96%);
     --gold-100: hsl(45, 22%, 25%);
     --gold-200: hsl(45, 22%, 25%);
     --gold-300: hsl(45, 92%, 62%);
@@ -745,12 +745,12 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
         --yellow-400: hsl(43, 75%, 75%);
         --yellow-500: hsl(48, 74%, 91%);
         --yellow-600: hsl(44, 74%, 91%);
-        --purple-100: hsl(237, 24%, 23%);
-        --purple-200: hsl(237, 24%, 23%);
-        --purple-300: hsl(237, 60%, 82%);
-        --purple-400: hsl(237, 60%, 82%);
-        --purple-500: hsl(237, 62%, 96%);
-        --purple-600: hsl(237, 62%, 96%);
+        --purple-100: hsl(237, 26%, 23%);
+        --purple-200: hsl(237, 26%, 23%);
+        --purple-300: hsl(237, 98%, 87%);
+        --purple-400: hsl(237, 98%, 87%);
+        --purple-500: hsl(237, 98%, 96%);
+        --purple-600: hsl(237, 98%, 96%);
         --gold-100: hsl(45, 22%, 25%);
         --gold-200: hsl(45, 22%, 25%);
         --gold-300: hsl(45, 92%, 62%);

package/lib/exports/color-sets.less

@@ -264,12 +264,12 @@
     600: hsl(237, 50%, 32%);
 }
 .set-purple-dark() {
-    100: hsl(237, 43%, 37%);
-    200: hsl(237, 51%, 52%);
-    300: hsl(237, 63%, 62%);
-    400: hsl(237, 89%, 83%);
-    500: hsl(237, 89%, 89%);
-    600: hsl(237, 89%, 94%);
+    100: hsl(237, 26%, 23%);
+    200: hsl(237, 26%, 44%);
+    300: hsl(237, 26%, 56%);
+    400: hsl(237, 98%, 87%);
+    500: hsl(237, 98%, 92%);
+    600: hsl(237, 98%, 96%);
 }
 .set-purple-hc() {
     100: hsl(237, 83%, 98%);
@@ -280,12 +280,12 @@
     600: hsl(237, 50%, 32%);
 }
 .set-purple-hc-dark() {
-    100: hsl(237, 24%, 23%);
-    200: hsl(237, 24%, 23%);
-    300: hsl(237, 60%, 82%);
-    400: hsl(237, 60%, 82%);
-    500: hsl(237, 62%, 96%);
-    600: hsl(237, 62%, 96%);
+    100: hsl(237, 26%, 23%);
+    200: hsl(237, 26%, 23%);
+    300: hsl(237, 98%, 87%);
+    400: hsl(237, 98%, 87%);
+    500: hsl(237, 98%, 96%);
+    600: hsl(237, 98%, 96%);
 }
 
 // gold

package/lib/exports/spacing-mixins.less

@@ -0,0 +1,67 @@
+/**
+ * Generate base and responsive atomic spacing classes.
+ *
+ * Usage example:
+ * .generate-spacing('.m', margin, true);
+ * .generate-spacing('.ml', margin-left, true, percent);
+ * .generate-spacing('.mx'; margin-left, margin-right; true);
+ * .generate-spacing('.pr', padding-right);
+ *
+ * @prefix - (required) What prefix to generate (e.g. `.m`, `.pr`, etc).
+ * @properties - (required) What CSS properties to generate (e.g. `margin`, `margin-right, margin-left`, etc).
+ * @includeNegative: bool - Boolean to include generation of negative value classes.
+ * @type: px | percent - What set of value to generate.
+ */
+.generate-spacing(@prefix, @properties, @includeNegative: false, @type: px) {
+  & when (@type = px) {
+      #stacks-internals #build-classes(
+          responsive,
+          @prefix,
+          { .template(@value) {
+            each(@properties, #(@prop) {
+                @{prop}: var(~"--su@{value}") !important;
+            })
+          } },
+          0 1 2 4 6 8 12 16 24 32 48 64 96 128
+      );
+
+      & when (@includeNegative = true) {
+        #stacks-internals #build-classes(
+            responsive,
+            ~"@{prefix}n",
+            { .template(@value) {
+              each(@properties, #(@prop) {
+                  @{prop}: calc(var(~"--su@{value}") * -1) !important;
+              })
+            } },
+            1 2 4 6 8 12 16 24 32 48 64 96 128
+        );
+    }
+  }
+
+  & when (@type = percent) {
+      #stacks-internals #build-classes(
+          responsive,
+          @prefix,
+          { .template(@value) {
+            each(@properties, #(@prop) {
+                @{prop}: @value !important;
+            })
+          } },
+          50% 100%
+      );
+
+      & when (@includeNegative = true) {
+        #stacks-internals #build-classes(
+            responsive,
+            ~"@{prefix}n",
+            { .template(@value) {
+              each(@properties, #(@prop) {
+                  @{prop}: -@value !important;
+              })
+            } },
+            50% 100%
+        );
+    }
+  }
+}

package/lib/tsconfig.build.json

@@ -1,4 +1,4 @@
 {
     "extends": "./tsconfig.json",
-    "exclude": ["test/**/*.ts", "**/*.test.ts"]
+    "exclude": ["test/**/*.ts", "**/*.test.ts", "**/*.setup.ts"]
 }

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.1.1",
+    "version": "2.3.0",
     "files": [
         "dist",
         "lib"
@@ -47,40 +47,40 @@
         "@open-wc/testing": "^4.0.0",
         "@rollup/plugin-commonjs": "^25.0.7",
         "@rollup/plugin-replace": "^5.0.5",
-        "@stackoverflow/stacks-editor": "^0.10.0",
-        "@stackoverflow/stacks-icons": "^6.0.0",
+        "@stackoverflow/stacks-editor": "^0.10.2",
+        "@stackoverflow/stacks-icons": "^6.0.1",
         "@testing-library/dom": "^9.3.4",
         "@testing-library/user-event": "^14.5.2",
         "@types/cssbeautify": "^0.3.5",
         "@types/less": "^3.0.6",
         "@types/mocha": "^10.0.6",
-        "@typescript-eslint/eslint-plugin": "^6.20.0",
-        "@typescript-eslint/parser": "^6.21.0",
+        "@typescript-eslint/eslint-plugin": "^7.1.0",
+        "@typescript-eslint/parser": "^7.1.0",
         "@web/dev-server-esbuild": "^1.0.2",
         "@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",
+        "colorjs.io": "^0.5.0",
         "concurrently": "^8.2.2",
         "css-loader": "^6.10.0",
         "cssbeautify": "^0.3.1",
-        "cssnano": "^6.0.3",
+        "cssnano": "^6.0.5",
         "docsearch.js": "^2.6.3",
         "eleventy-plugin-highlightjs": "^1.1.0",
         "eleventy-plugin-nesting-toc": "^1.3.0",
-        "eslint": "^8.56.0",
+        "eslint": "^8.57.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-no-unsanitized": "^4.0.2",
         "jquery": "^3.7.1",
         "less-loader": "^12.2.0",
         "list.js": "^2.3.1",
         "markdown-it": "^14.0.0",
-        "mini-css-extract-plugin": "^2.8.0",
+        "mini-css-extract-plugin": "^2.8.1",
         "postcss-less": "^6.0.0",
-        "postcss-loader": "^8.0.0",
-        "prettier": "^3.2.4",
+        "postcss-loader": "^8.1.1",
+        "prettier": "^3.2.5",
         "rollup-plugin-postcss": "^4.0.2",
         "stylelint": "^16.2.1",
         "stylelint-config-recommended": "^14.0.0",
@@ -88,8 +88,8 @@
         "terser-webpack-plugin": "^5.3.10",
         "ts-loader": "^9.5.1",
         "typescript": "^5.3.3",
-        "vitest": "^1.2.2",
-        "webpack": "^5.90.1",
+        "vitest": "^1.3.1",
+        "webpack": "^5.90.3",
         "webpack-cli": "^5.1.4",
         "webpack-merge": "^5.10.0"
     },