@stackoverflow/stacks 1.9.3 → 1.9.5

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.
@@ -54,6 +54,11 @@
54
54
  --_bu-outlined-bc: var(--_bu-bc);
55
55
  --_bu-bc-selected: var(--_bu-bc);
56
56
  --_bu-badge-o: 0.8;
57
+
58
+ &:not(.s-btn__primary):not(.s-btn__muted):not(.s-btn__danger):not(.is-selected):not(.s-btn__link):not(.s-btn__unset) {
59
+ --_bu-bg-hover: var(--theme-secondary-100);
60
+ --_bu-filled-bg-hover: var(--theme-secondary-300);
61
+ }
57
62
  });
58
63
 
59
64
  // STATES
@@ -314,6 +319,7 @@
314
319
  --_bu-outlined-fc-selected: var(--_bu-fc-selected);
315
320
 
316
321
  .highcontrast-mode({
322
+ --_bu-bg-hover: var(--black-100);
317
323
  --_bu-filled-bg: var(--black-400);
318
324
  --_bu-filled-bg-active: var(--black-600);
319
325
  --_bu-filled-bg-hover: var(--black-500);
@@ -2,6 +2,7 @@
2
2
  // --_ps-state-* are custom properties to broadly override colors for a given post summary state
3
3
  --_ps-bb: var(--su1) solid var(--bc-light);
4
4
  --_ps-bg: unset;
5
+ --_ps-o: unset;
5
6
  // Child components
6
7
  --_ps-content-excerpt-fc: var(--_ps-state-fc, var(--fc-medium));
7
8
  --_ps-content-title-a-fc: var(--_ps-state-fc, var(--theme-post-title-color));
@@ -48,6 +49,7 @@
48
49
  // VARIANTS
49
50
  &&__deleted,
50
51
  &&__ignored {
52
+ --_ps-o: 0.75;
51
53
  --_ps-has-answers-bc: var(--black-300);
52
54
  --_ps-has-answers-bg: transparent;
53
55
  --_ps-has-answers-fc: var(--_ps-state-fc);
@@ -58,11 +60,6 @@
58
60
  --_ps-meta-tags-tag-fc: var(--_ps-state-fc);
59
61
  --_ps-state-fc: var(--black-500);
60
62
 
61
- .s-post-summary--content > *:not(.s-post-summary--content-menu-button),
62
- .s-post-summary--stats > *:not(.s-badge__danger) {
63
- opacity: 0.75;
64
- }
65
-
66
63
  .s-post-summary--meta-tags {
67
64
  a, // TODO: remove rule for `a` once Core replaces `.post-tag` with `.s-tag`
68
65
  .post-tag,
@@ -185,6 +182,10 @@
185
182
  }
186
183
 
187
184
  &--content {
185
+ > *:not(.s-post-summary--content-menu-button):not(.s-post-summary--meta):not(.s-popover) {
186
+ opacity: var(--_ps-o);
187
+ }
188
+
188
189
  flex-grow: 1;
189
190
  max-width: 100%;
190
191
  }
@@ -273,7 +274,15 @@
273
274
  }
274
275
 
275
276
  &--meta {
277
+ > *:not(.s-post-summary--meta-tags):not(.s-user-card) > * {
278
+ opacity: var(--_ps-o);
279
+ }
280
+
276
281
  .s-user-card {
282
+ > *:not(.magic-popup) {
283
+ opacity: var(--_ps-o);
284
+ }
285
+
277
286
  flex-wrap: wrap;
278
287
  justify-content: flex-end;
279
288
  margin-left: auto;
@@ -288,12 +297,23 @@
288
297
  }
289
298
 
290
299
  &--meta-tags {
300
+ > ul > li > a,
301
+ > a,
302
+ .post-tag,
303
+ .s-tag {
304
+ opacity: var(--_ps-o);
305
+ }
306
+
291
307
  display: flex;
292
308
  flex-wrap: wrap;
293
309
  gap: var(--su4);
294
310
  }
295
311
 
296
312
  &--stats {
313
+ > *:not(.s-badge__danger) {
314
+ opacity: var(--_ps-o);
315
+ }
316
+
297
317
  align-items: var(--_ps-stats-ai);
298
318
  color: var(--_ps-stats-fc);
299
319
  flex-direction: var(--_ps-stats-fd);
@@ -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/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.3",
8
+ "version": "1.9.5",
9
9
  "files": [
10
10
  "dist",
11
11
  "lib"
@@ -50,7 +50,7 @@
50
50
  "@stackoverflow/stacks-icons": "^5.3.1",
51
51
  "@testing-library/dom": "^9.2.0",
52
52
  "@testing-library/user-event": "^14.4.3",
53
- "@typescript-eslint/eslint-plugin": "^5.59.5",
53
+ "@typescript-eslint/eslint-plugin": "^5.59.6",
54
54
  "@typescript-eslint/parser": "^5.59.6",
55
55
  "@web/dev-server-esbuild": "^0.4.1",
56
56
  "@web/dev-server-rollup": "^0.4.0",
@@ -58,12 +58,12 @@
58
58
  "@web/test-runner-playwright": "^0.10.0",
59
59
  "@web/test-runner-visual-regression": "^0.8.0",
60
60
  "concurrently": "^8.0.1",
61
- "css-loader": "^6.7.3",
61
+ "css-loader": "^6.7.4",
62
62
  "cssnano": "^6.0.0",
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.40.0",
66
+ "eslint": "^8.41.0",
67
67
  "eslint-config-prettier": "^8.8.0",
68
68
  "eslint-plugin-no-unsanitized": "^4.0.2",
69
69
  "jquery": "^3.7.0",
@@ -75,10 +75,10 @@
75
75
  "postcss-loader": "^7.2.4",
76
76
  "prettier": "^2.8.8",
77
77
  "rollup-plugin-postcss": "^4.0.2",
78
- "stylelint": "^15.6.1",
78
+ "stylelint": "^15.6.2",
79
79
  "stylelint-config-recommended": "^12.0.0",
80
80
  "stylelint-config-standard": "^33.0.0",
81
- "terser-webpack-plugin": "^5.3.6",
81
+ "terser-webpack-plugin": "^5.3.9",
82
82
  "ts-loader": "^9.4.2",
83
83
  "typescript": "^5.0.4",
84
84
  "webpack": "^5.82.0",