@stackoverflow/stacks 0.69.1 → 0.73.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 (45) hide show
  1. package/README.md +1 -1
  2. package/dist/css/stacks.css +2166 -941
  3. package/dist/css/stacks.min.css +1 -1
  4. package/dist/js/stacks.js +167 -92
  5. package/dist/js/stacks.min.js +1 -1
  6. package/lib/css/atomic/_stacks-borders.less +18 -0
  7. package/lib/css/atomic/_stacks-flex.less +2 -7
  8. package/lib/css/atomic/_stacks-grid.less +2 -0
  9. package/lib/css/atomic/_stacks-misc.less +8 -4
  10. package/lib/css/atomic/_stacks-typography.less +23 -8
  11. package/lib/css/base/_stacks-configuration-dynamic.less +13 -56
  12. package/lib/css/components/_stacks-activity-indicator.less +26 -2
  13. package/lib/css/components/_stacks-avatars.less +9 -0
  14. package/lib/css/components/_stacks-badges.less +21 -9
  15. package/lib/css/components/_stacks-breadcrumbs.less +2 -0
  16. package/lib/css/components/_stacks-button-groups.less +11 -0
  17. package/lib/css/components/_stacks-buttons.less +143 -42
  18. package/lib/css/components/_stacks-cards.less +9 -13
  19. package/lib/css/components/_stacks-code-blocks.less +1 -1
  20. package/lib/css/components/_stacks-inputs.less +78 -9
  21. package/lib/css/components/_stacks-link-previews.less +10 -7
  22. package/lib/css/components/_stacks-links.less +29 -9
  23. package/lib/css/components/_stacks-menu.less +4 -4
  24. package/lib/css/components/_stacks-modals.less +1 -1
  25. package/lib/css/components/_stacks-navigation.less +43 -0
  26. package/lib/css/components/_stacks-notices.less +40 -3
  27. package/lib/css/components/_stacks-page-titles.less +1 -1
  28. package/lib/css/components/_stacks-pagination.less +4 -2
  29. package/lib/css/components/_stacks-popovers.less +26 -6
  30. package/lib/css/components/_stacks-post-summary.less +121 -3
  31. package/lib/css/components/_stacks-progress-bars.less +29 -6
  32. package/lib/css/components/_stacks-prose.less +18 -4
  33. package/lib/css/components/_stacks-tables.less +10 -6
  34. package/lib/css/components/_stacks-tags.less +22 -19
  35. package/lib/css/components/_stacks-toggle-switches.less +12 -0
  36. package/lib/css/components/_stacks-topbar.less +440 -0
  37. package/lib/css/components/_stacks-uploader.less +22 -0
  38. package/lib/css/components/_stacks-widget-static.less +15 -3
  39. package/lib/css/exports/_stacks-constants-colors.less +700 -220
  40. package/lib/css/exports/_stacks-constants-helpers.less +1 -2
  41. package/lib/css/exports/_stacks-mixins.less +26 -0
  42. package/lib/css/stacks-dynamic.less +0 -1
  43. package/lib/css/stacks-static.less +15 -0
  44. package/lib/ts/controllers/s-tooltip.ts +4 -0
  45. package/package.json +15 -12
package/lib/css/components/_stacks-uploader.less CHANGED
@@ -31,6 +31,10 @@
31
31
  -webkit-mask-image: var(--s-uploader-background-image);
32
32
  mask-image: var(--s-uploader-background-image);
33
33
  border-radius: @br-lg;
34
+
35
+ .highcontrast-mode({
36
+ background-color: var(--black-400);
37
+ });
34
38
  }
35
39
 
36
40
  &.has-error {
@@ -38,6 +42,10 @@
38
42
 
39
43
  &:before {
40
44
  background-color: var(--red-400);
45
+
46
+ .highcontrast-mode({
47
+ background-color: var(--red-400);
48
+ });
41
49
  }
42
50
 
43
51
  .s-link {
@@ -50,6 +58,10 @@
50
58
 
51
59
  &:before {
52
60
  background-color: var(--green-400);
61
+
62
+ .highcontrast-mode({
63
+ background-color: var(--green-400);
64
+ });
53
65
  }
54
66
 
55
67
  .s-link {
@@ -62,6 +74,10 @@
62
74
 
63
75
  &:before {
64
76
  background-color: var(--yellow-400);
77
+
78
+ .highcontrast-mode({
79
+ background-color: var(--yellow-400);
80
+ });
65
81
  }
66
82
 
67
83
  .s-link {
@@ -74,6 +90,10 @@
74
90
 
75
91
  &:before {
76
92
  background-color: var(--black-200);
93
+
94
+ .highcontrast-mode({
95
+ background-color: var(--black);
96
+ });
77
97
  }
78
98
  }
79
99
 
@@ -116,6 +136,8 @@
116
136
  text-overflow: ellipsis;
117
137
  white-space: nowrap;
118
138
 
139
+ .highcontrast-mode({ border: 1px solid var(--black); });
140
+
119
141
  &:is(img) {
120
142
  object-fit: scale-down;
121
143
  object-position: center;
package/lib/css/components/_stacks-widget-static.less CHANGED
@@ -16,8 +16,8 @@
16
16
  @s-sidebarwidget-content-inner-spacing: @su12; // the spacing between two adjacent simple items
17
17
  @s-sidebarwidget-content-outer-spacing: @su16; // the spacing at the start/end of a group of simple items, as well as between a complex item and its separator line
18
18
 
19
- @s-sidebarwidget-outer-border-color: var(--black-100);
20
- @s-sidebarwidget-content-separator-color: var(--black-075);
19
+ @s-sidebarwidget-outer-border-color: var(--bc-medium);
20
+ @s-sidebarwidget-content-separator-color: var(--bc-light);
21
21
  @s-sidebarwidget-header-background-color: var(--black-025);
22
22
 
23
23
  .s-sidebarwidget {
@@ -116,7 +116,7 @@
116
116
  margin-top: ~"calc(1.3em / 2 - 5px)"; // 1.3 is our standard line height
117
117
  margin-right: @su12;
118
118
  border: 5px solid transparent;
119
- border-left-color: var(--black-200);
119
+ border-left-color: var(--bc-darker);
120
120
  border-right-width: 0;
121
121
  transition: -webkit-transform 0.3s cubic-bezier(0.4, 0.4, 0.6, 1);
122
122
  transition: transform 0.3s cubic-bezier(0.4, 0.4, 0.6, 1);
@@ -243,6 +243,10 @@ table.s-sidebarwidget--content.s-sidebarwidget__items {
243
243
  border-color: var(~"--@{name}-200");
244
244
  background-color: var(~"--@{name}-050");
245
245
 
246
+ .highcontrast-mode({
247
+ border-color: var(~"--@{name}-700");
248
+ });
249
+
246
250
  .s-sidebarwidget--header {
247
251
  background-color: var(~"--@{name}-100");
248
252
  color: var(--fc-medium);
@@ -251,10 +255,18 @@ table.s-sidebarwidget--content.s-sidebarwidget__items {
251
255
  .s-sidebarwidget--header,
252
256
  .s-sidebarwidget--content {
253
257
  border-color: var(~"--@{name}-200");
258
+
259
+ .highcontrast-mode({
260
+ border-color: var(~"--@{name}-700");
261
+ });
254
262
  }
255
263
 
256
264
  &:after {
257
265
  border-color: var(~"--@{name}-200");
266
+
267
+ .highcontrast-mode({
268
+ border-color: var(~"--@{name}-700");
269
+ });
258
270
  }
259
271
  }
260
272
  }