@stackoverflow/stacks 1.9.4 → 1.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/README.md +4 -3
  2. package/dist/css/stacks.css +89 -107
  3. package/dist/css/stacks.min.css +1 -1
  4. package/dist/js/stacks.js +33 -69
  5. package/lib/atomic/border.less +3 -3
  6. package/lib/atomic/misc.less +4 -4
  7. package/lib/atomic/typography.less +1 -1
  8. package/lib/base/body.less +1 -1
  9. package/lib/base/reset-normalize.less +3 -3
  10. package/lib/components/anchor/anchor.a11y.test.ts +42 -0
  11. package/lib/components/anchor/anchor.less +5 -2
  12. package/lib/components/anchor/anchor.visual.test.ts +53 -0
  13. package/lib/components/avatar/avatar.less +1 -1
  14. package/lib/components/banner/banner.less +10 -17
  15. package/lib/components/block-link/block-link.a11y.test.ts +7 -6
  16. package/lib/components/block-link/block-link.less +1 -1
  17. package/lib/components/block-link/block-link.visual.test.ts +7 -6
  18. package/lib/components/button/button.less +31 -46
  19. package/lib/components/card/card.visual.test.ts +7 -6
  20. package/lib/components/input-fill/input-fill.less +2 -2
  21. package/lib/components/input-icon/input-icon.less +1 -1
  22. package/lib/components/input_textarea/input_textarea.less +2 -2
  23. package/lib/components/link/link.a11y.test.ts +36 -0
  24. package/lib/components/link/link.less +1 -0
  25. package/lib/components/link/link.visual.test.ts +32 -0
  26. package/lib/components/navigation/navigation.less +1 -1
  27. package/lib/components/notice/notice.less +1 -1
  28. package/lib/components/page-title/page-title.less +1 -1
  29. package/lib/components/post-summary/post-summary.less +5 -1
  30. package/lib/components/select/select.less +2 -2
  31. package/lib/components/sidebar-widget/sidebar-widget.less +3 -3
  32. package/lib/components/spinner/spinner.less +1 -1
  33. package/lib/components/table/table.less +3 -3
  34. package/lib/components/toast/toast.test.ts +24 -23
  35. package/lib/components/topbar/topbar.less +6 -6
  36. package/lib/exports/constants-colors.less +19 -31
  37. package/lib/exports/constants-helpers.less +3 -3
  38. package/lib/exports/constants-type.less +5 -3
  39. package/package.json +28 -28
package/lib/exports/constants-colors.less CHANGED
@@ -196,7 +196,7 @@
196
196
  // Links
197
197
  --theme-link-color: var(--theme-secondary-400);
198
198
  --theme-link-color-hover: var(--theme-secondary-350);
199
- --theme-link-color-visited: var(--theme-secondary-500);
199
+ --theme-link-color-visited: var(--theme-secondary-700);
200
200
 
201
201
  // Button Default (Secondary)
202
202
  --theme-button-color: var(--theme-secondary-400);
@@ -648,37 +648,25 @@
648
648
  // Reassemble as a single hsl value
649
649
  --theme-secondary-color: .assemble-color(theme-secondary-color)[];
650
650
 
651
- // Primary Theming
652
- --theme-primary-025: .native-darken-desaturate(theme-primary-color, 17, 82)[];
653
- --theme-primary-050: .native-darken-desaturate(theme-primary-color, 15, 47)[];
654
- --theme-primary-075: .native-darken-desaturate(theme-primary-color, 13, 39)[];
655
- --theme-primary-100: .native-darken-desaturate(theme-primary-color, 11, 32)[];
656
- --theme-primary-150: .native-darken-desaturate(theme-primary-color, 9, 23)[];
657
- --theme-primary-200: .native-darken-desaturate(theme-primary-color, 7, 15)[];
658
- --theme-primary-300: .native-darken-desaturate(theme-primary-color, 5, 7)[];
659
- --theme-primary-350: var(--theme-primary-color);
660
- --theme-primary-400: .native-tint(theme-primary-color, 21)[];
661
- --theme-primary-500: .native-tint(theme-primary-color, 36)[];
662
- --theme-primary-600: .native-tint(theme-primary-color, 51)[];
663
- --theme-primary-700: .native-tint(theme-primary-color, 66)[];
664
- --theme-primary-800: .native-tint(theme-primary-color, 81)[];
665
- --theme-primary-900: .native-tint(theme-primary-color, 96)[];
651
+ .dark-themed-colors-generator(@variant) {
652
+ --theme-@{variant}-025: .native-darken-desaturate(~"theme-@{variant}-color", 31, 73.3)[];
653
+ --theme-@{variant}-050: .native-darken-desaturate(~"theme-@{variant}-color", 15, 47)[];
654
+ --theme-@{variant}-075: .native-darken-desaturate(~"theme-@{variant}-color", 13, 39)[];
655
+ --theme-@{variant}-100: .native-darken-desaturate(~"theme-@{variant}-color", 11, 32)[];
656
+ --theme-@{variant}-150: .native-darken-desaturate(~"theme-@{variant}-color", 9, 23)[];
657
+ --theme-@{variant}-200: .native-darken-desaturate(~"theme-@{variant}-color", 7, 15)[];
658
+ --theme-@{variant}-300: .native-darken-desaturate(~"theme-@{variant}-color", 5, 7)[];
659
+ --theme-@{variant}-350: var(~"--theme-@{variant}-color");
660
+ --theme-@{variant}-400: .native-tint(~"theme-@{variant}-color", 21)[];
661
+ --theme-@{variant}-500: .native-tint(~"theme-@{variant}-color", 36)[];
662
+ --theme-@{variant}-600: .native-tint(~"theme-@{variant}-color", 51)[];
663
+ --theme-@{variant}-700: .native-tint(~"theme-@{variant}-color", 66)[];
664
+ --theme-@{variant}-800: .native-tint(~"theme-@{variant}-color", 81)[];
665
+ --theme-@{variant}-900: .native-tint(~"theme-@{variant}-color", 96)[];
666
+ }
666
667
 
667
- // Secondary Theming
668
- --theme-secondary-025: .native-darken-desaturate(theme-secondary-color, 17, 82)[];
669
- --theme-secondary-050: .native-darken-desaturate(theme-secondary-color, 15, 47)[];
670
- --theme-secondary-075: .native-darken-desaturate(theme-secondary-color, 13, 39)[];
671
- --theme-secondary-100: .native-darken-desaturate(theme-secondary-color, 11, 32)[];
672
- --theme-secondary-150: .native-darken-desaturate(theme-secondary-color, 9, 23)[];
673
- --theme-secondary-200: .native-darken-desaturate(theme-secondary-color, 7, 15)[];
674
- --theme-secondary-300: .native-darken-desaturate(theme-secondary-color, 5, 7)[];
675
- --theme-secondary-350: var(--theme-secondary-color);
676
- --theme-secondary-400: .native-tint(theme-secondary-color, 21)[];
677
- --theme-secondary-500: .native-tint(theme-secondary-color, 36)[];
678
- --theme-secondary-600: .native-tint(theme-secondary-color, 51)[];
679
- --theme-secondary-700: .native-tint(theme-secondary-color, 66)[];
680
- --theme-secondary-800: .native-tint(theme-secondary-color, 81)[];
681
- --theme-secondary-900: .native-tint(theme-secondary-color, 96)[];
668
+ .dark-themed-colors-generator(primary);
669
+ .dark-themed-colors-generator(secondary);
682
670
 
683
671
  // Fades
684
672
  --focus-ring: .native-fade(theme-secondary-color, 25)[];
package/lib/exports/constants-helpers.less CHANGED
@@ -31,9 +31,9 @@ body {
31
31
  --zi-modals: 9000; // Modals
32
32
 
33
33
  // Border Radius
34
- --br-sm: 3px;
35
- --br-md: 5px;
36
- --br-lg: 7px;
34
+ --br-sm: calc(var(--su-static4));
35
+ --br-md: calc(var(--su-static6));
36
+ --br-lg: calc(var(--su-static8));
37
37
  --br-circle: 50%;
38
38
 
39
39
  // Transition easings
package/lib/exports/constants-type.less CHANGED
@@ -99,9 +99,9 @@ body {
99
99
  // $ FONT SIZES (fs-)
100
100
  // Base font-size is 13px.
101
101
  // ----------------------------------------------------------------------------
102
- --fs-fine: 11px;
103
- --fs-caption: 12px;
104
- --fs-body1: 13px;
102
+ --fs-fine: calc(var(--su-static12) - var(--su-static1)); // 11px
103
+ --fs-caption: var(--su-static12);
104
+ --fs-body1: calc(var(--su-static12) + var(--su-static1)); // 13px
105
105
 
106
106
  // Relative to the root element
107
107
  --fs-body2: 1.153846154rem;
@@ -127,6 +127,8 @@ body {
127
127
  --fs-display3-relative: 5.307692308em;
128
128
  --fs-display4-relative: 7.615384615em;
129
129
 
130
+ // this value is not using spacing units because the calc involved results
131
+ // in unexpected sizing. I'm not sure why, honestly.
130
132
  --fs-base: 13px;
131
133
 
132
134
  // ============================================================================
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "type": "git",
6
6
  "url": "https://github.com/StackExchange/Stacks.git"
7
7
  },
8
- "version": "1.9.4",
8
+ "version": "1.10.0",
9
9
  "files": [
10
10
  "dist",
11
11
  "lib"
@@ -22,12 +22,12 @@
22
22
  "build:docs": "webpack --mode=production --config ./docs/webpack.config.js && cd ./docs && eleventy",
23
23
  "start:webpack": "webpack --watch --config ./docs/webpack.config.js",
24
24
  "start:eleventy": "cd ./docs && eleventy --serve",
25
- "test": "web-test-runner",
25
+ "test": "npm run test:unit && npm run test:a11y && npm run test:visual",
26
26
  "test:a11y": "web-test-runner --group=a11y",
27
27
  "test:unit": "web-test-runner --group=unit",
28
28
  "test:unit:watch": "web-test-runner --group=unit --watch",
29
- "test:visual": "web-test-runner --group=visual",
30
- "test:visual:update": "web-test-runner --group=visual --update-visual-baseline",
29
+ "test:visual": "pwsh run-test-visual.ps1 npx web-test-runner --group=visual",
30
+ "test:visual:update": "pwsh run-test-visual.ps1 npx web-test-runner --group=visual --update-visual-baseline",
31
31
  "prepublishOnly": "npm run build",
32
32
  "format": "prettier --write ./lib",
33
33
  "lint": "concurrently -n w: npm:lint:*",
@@ -38,52 +38,52 @@
38
38
  "license": "MIT",
39
39
  "dependencies": {
40
40
  "@hotwired/stimulus": "^3.2.1",
41
- "@popperjs/core": "^2.11.7"
41
+ "@popperjs/core": "^2.11.8"
42
42
  },
43
43
  "devDependencies": {
44
44
  "@11ty/eleventy": "^2.0.1",
45
- "@highlightjs/cdn-assets": "^11.7.0",
46
- "@open-wc/testing": "^3.1.8",
47
- "@rollup/plugin-commonjs": "^24.1.0",
45
+ "@highlightjs/cdn-assets": "^11.8.0",
46
+ "@open-wc/testing": "^3.2.0",
47
+ "@rollup/plugin-commonjs": "^25.0.3",
48
48
  "@rollup/plugin-replace": "^5.0.2",
49
49
  "@stackoverflow/stacks-editor": "^0.8.7",
50
- "@stackoverflow/stacks-icons": "^5.3.1",
51
- "@testing-library/dom": "^9.2.0",
50
+ "@stackoverflow/stacks-icons": "^5.4.0",
51
+ "@testing-library/dom": "^9.3.1",
52
52
  "@testing-library/user-event": "^14.4.3",
53
- "@typescript-eslint/eslint-plugin": "^5.59.6",
54
- "@typescript-eslint/parser": "^5.59.6",
53
+ "@typescript-eslint/eslint-plugin": "^5.60.1",
54
+ "@typescript-eslint/parser": "^5.61.0",
55
55
  "@web/dev-server-esbuild": "^0.4.1",
56
56
  "@web/dev-server-rollup": "^0.4.0",
57
57
  "@web/test-runner": "^0.16.1",
58
- "@web/test-runner-playwright": "^0.10.0",
58
+ "@web/test-runner-playwright": "^0.10.1",
59
59
  "@web/test-runner-visual-regression": "^0.8.0",
60
- "concurrently": "^8.0.1",
61
- "css-loader": "^6.7.4",
62
- "cssnano": "^6.0.0",
60
+ "concurrently": "^8.2.0",
61
+ "css-loader": "^6.8.1",
62
+ "cssnano": "^6.0.1",
63
63
  "docsearch.js": "^2.6.3",
64
64
  "eleventy-plugin-highlightjs": "^1.1.0",
65
65
  "eleventy-plugin-nesting-toc": "^1.3.0",
66
- "eslint": "^8.41.0",
66
+ "eslint": "^8.45.0",
67
67
  "eslint-config-prettier": "^8.8.0",
68
68
  "eslint-plugin-no-unsanitized": "^4.0.2",
69
69
  "jquery": "^3.7.0",
70
- "less-loader": "^11.1.0",
70
+ "less-loader": "^11.1.3",
71
71
  "list.js": "^2.3.1",
72
72
  "markdown-it": "^13.0.1",
73
- "mini-css-extract-plugin": "^2.7.5",
73
+ "mini-css-extract-plugin": "^2.7.6",
74
74
  "postcss-less": "^6.0.0",
75
- "postcss-loader": "^7.2.4",
76
- "prettier": "^2.8.8",
75
+ "postcss-loader": "^7.3.3",
76
+ "prettier": "^3.0.0",
77
77
  "rollup-plugin-postcss": "^4.0.2",
78
- "stylelint": "^15.6.2",
78
+ "stylelint": "^15.10.1",
79
79
  "stylelint-config-recommended": "^12.0.0",
80
- "stylelint-config-standard": "^33.0.0",
80
+ "stylelint-config-standard": "^34.0.0",
81
81
  "terser-webpack-plugin": "^5.3.9",
82
- "ts-loader": "^9.4.2",
83
- "typescript": "^5.0.4",
84
- "webpack": "^5.82.0",
85
- "webpack-cli": "^5.1.1",
86
- "webpack-merge": "^5.8.0"
82
+ "ts-loader": "^9.4.3",
83
+ "typescript": "^5.1.6",
84
+ "webpack": "^5.88.1",
85
+ "webpack-cli": "^5.1.4",
86
+ "webpack-merge": "^5.9.0"
87
87
  },
88
88
  "browserslist": [
89
89
  "last 2 versions",