@stackoverflow/stacks 2.0.0-rc.1 → 2.0.0-rc.10

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 (78) hide show
  1. package/README.md +5 -0
  2. package/dist/components/code-block/code-block.fixtures.d.ts +2 -0
  3. package/dist/css/stacks.css +792 -765
  4. package/dist/css/stacks.min.css +1 -1
  5. package/dist/js/stacks.js +265 -110
  6. package/dist/js/stacks.min.js +1 -1
  7. package/lib/atomic/__snapshots__/color.less.test.ts.snap +246 -0
  8. package/lib/atomic/typography.less +4 -0
  9. package/lib/base/body.less +2 -2
  10. package/lib/components/activity-indicator/activity-indicator.a11y.test.ts +1 -1
  11. package/lib/components/activity-indicator/activity-indicator.less +17 -4
  12. package/lib/components/anchor/anchor.less +10 -6
  13. package/lib/components/anchor/anchor.visual.test.ts +0 -4
  14. package/lib/components/avatar/avatar.visual.test.ts +0 -3
  15. package/lib/components/badge/badge.a11y.test.ts +2 -2
  16. package/lib/components/badge/badge.less +21 -29
  17. package/lib/components/banner/banner.less +2 -2
  18. package/lib/components/block-link/block-link.less +5 -4
  19. package/lib/components/button/button.a11y.test.ts +1 -4
  20. package/lib/components/button/button.less +48 -78
  21. package/lib/components/button/button.visual.test.ts +1 -4
  22. package/lib/components/card/card.less +8 -0
  23. package/lib/components/code-block/code-block.a11y.test.ts +30 -0
  24. package/lib/components/code-block/code-block.fixtures.ts +88 -0
  25. package/lib/components/code-block/code-block.visual.test.ts +20 -0
  26. package/lib/components/description/description.a11y.test.ts +1 -0
  27. package/lib/components/description/description.less +1 -1
  28. package/lib/components/expandable/expandable.a11y.test.ts +27 -0
  29. package/lib/components/expandable/expandable.visual.test.ts +27 -0
  30. package/lib/components/input-icon/input-icon.less +1 -1
  31. package/lib/components/input-message/input-message.less +4 -3
  32. package/lib/components/input_textarea/input_textarea.less +1 -1
  33. package/lib/components/label/label.less +4 -14
  34. package/lib/components/link/link.less +12 -12
  35. package/lib/components/link-preview/link-preview.a11y.test.ts +48 -0
  36. package/lib/components/link-preview/link-preview.less +16 -7
  37. package/lib/components/link-preview/link-preview.visual.test.ts +52 -0
  38. package/lib/components/navigation/navigation.a11y.test.ts +80 -0
  39. package/lib/components/navigation/navigation.visual.test.ts +101 -0
  40. package/lib/components/notice/notice.a11y.test.ts +17 -0
  41. package/lib/components/notice/notice.less +45 -82
  42. package/lib/components/notice/notice.visual.test.ts +26 -0
  43. package/lib/components/page-title/page-title.a11y.test.ts +29 -0
  44. package/lib/components/page-title/page-title.less +1 -1
  45. package/lib/components/page-title/page-title.visual.test.ts +59 -0
  46. package/lib/components/pagination/pagination.a11y.test.ts +20 -0
  47. package/lib/components/pagination/pagination.less +2 -2
  48. package/lib/components/pagination/pagination.visual.test.ts +26 -0
  49. package/lib/components/post-summary/post-summary.less +15 -15
  50. package/lib/components/progress-bar/progress-bar.less +2 -2
  51. package/lib/components/prose/prose.less +2 -2
  52. package/lib/components/select/select.less +1 -1
  53. package/lib/components/sidebar-widget/sidebar-widget.less +3 -3
  54. package/lib/components/spinner/spinner.a11y.test.ts +15 -0
  55. package/lib/components/spinner/spinner.visual.test.ts +43 -0
  56. package/lib/components/tag/tag.a11y.test.ts +23 -0
  57. package/lib/components/tag/tag.less +29 -29
  58. package/lib/components/tag/tag.visual.test.ts +46 -0
  59. package/lib/components/toast/toast.a11y.test.ts +30 -0
  60. package/lib/components/toast/toast.visual.test.ts +10 -6
  61. package/lib/components/toggle-switch/toggle-switch.less +2 -5
  62. package/lib/components/topbar/topbar.less +44 -44
  63. package/lib/components/uploader/uploader.less +19 -13
  64. package/lib/components/user-card/user-card.less +1 -1
  65. package/lib/exports/__snapshots__/color-mixins.less.test.ts.snap +17 -10
  66. package/lib/exports/__snapshots__/color.less.test.ts.snap +197 -185
  67. package/lib/exports/color-mixins.less +1 -1
  68. package/lib/exports/color-sets.less +130 -81
  69. package/lib/exports/color.less +14 -6
  70. package/lib/exports/v1/__snapshots__/constants-colors.less.test.ts.snap +3 -3
  71. package/lib/exports/v1/constants-colors.less +2 -2
  72. package/lib/input-utils.less +1 -1
  73. package/lib/test/axe-apca/README.md +19 -0
  74. package/lib/test/axe-apca/src/axe-apca.test.ts +77 -1
  75. package/lib/test/axe-apca/src/axe-apca.ts +16 -8
  76. package/lib/test/test-utils.ts +7 -3
  77. package/package.json +14 -14
  78. package/lib/exports/theme.less +0 -85
package/lib/components/topbar/topbar.less CHANGED
@@ -8,26 +8,26 @@
8
8
  min-width: auto;
9
9
  width: 100%;
10
10
  z-index: var(--zi-navigation-fixed);
11
- background-color: var(--theme-topbar-background-color);
12
- height: var(--theme-topbar-height);
11
+ background-color: var(--theme-topbar-background-color, var(--white));
12
+ height: var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8)));
13
13
  display: flex;
14
- border-top: var(--theme-topbar-accent-border);
15
- border-bottom: var(--theme-topbar-bottom-border);
14
+ border-top: var(--theme-topbar-accent-border, 3px solid var(--theme-primary));
15
+ border-bottom: var(--theme-topbar-bottom-border, 1px solid var(--black-225));
16
16
  position: relative;
17
17
  align-items: center;
18
18
 
19
19
  // Redefine the variables for extra contrast in high-contrast mode
20
20
  .highcontrast-mode({
21
21
  // Search input
22
- --theme-topbar-search-color: var(--theme-topbar-item-color);
23
- --theme-topbar-search-background: var(--theme-topbar-background-color);
24
- --theme-topbar-search-placeholder: var(--theme-topbar-item-color);
25
- --theme-topbar-search-border: var(--theme-topbar-item-color);
26
- --theme-topbar-search-border-focus: var(--theme-topbar-item-color);
22
+ --theme-topbar-search-color: var(--theme-topbar-item-color, var(--black-500));
23
+ --theme-topbar-search-background: var(--theme-topbar-background-color, var(--white));
24
+ --theme-topbar-search-placeholder: var(--theme-topbar-item-color, var(--black-500));
25
+ --theme-topbar-search-border: var(--theme-topbar-item-color, var(--black-500));
26
+ --theme-topbar-search-border-focus: var(--theme-topbar-item-color, var(--black-500));
27
27
 
28
28
  // Search switcher
29
- --theme-topbar-select-color: var(--theme-topbar-item-color);
30
- --theme-topbar-select-background: var(--theme-topbar-background-color);
29
+ --theme-topbar-select-color: var(--theme-topbar-item-color, var(--black-500));
30
+ --theme-topbar-select-background: var(--theme-topbar-background-color, var(--white));
31
31
 
32
32
  // Topbar items
33
33
  --theme-topbar-item-color: var(--black-600);
@@ -57,11 +57,11 @@
57
57
  }
58
58
 
59
59
  a.s-topbar--logo:hover {
60
- background-color: var(--theme-topbar-item-background-hover);
60
+ background-color: var(--theme-topbar-item-background-hover, var(--black-200));
61
61
  }
62
62
 
63
63
  a.s-topbar--logo.is-selected {
64
- background-color: var(--theme-topbar-item-background-hover);
64
+ background-color: var(--theme-topbar-item-background-hover, var(--black-200));
65
65
  }
66
66
 
67
67
  .s-topbar--menu-btn {
@@ -80,7 +80,7 @@
80
80
  &:after {
81
81
  width: var(--su-static16);
82
82
  height: var(--su-static2);
83
- background-color: var(--theme-topbar-item-color);
83
+ background-color: var(--theme-topbar-item-color, var(--black-500));
84
84
  position: relative;
85
85
  }
86
86
 
@@ -102,7 +102,7 @@
102
102
 
103
103
  // Transforming hamburger into x
104
104
  &.is-selected {
105
- color: var(--theme-topbar-item-color-current);
105
+ color: var(--theme-topbar-item-color-current, var(--black));
106
106
  background-color: var(--theme-topbar-item-background-current);
107
107
 
108
108
  span {
@@ -119,22 +119,22 @@
119
119
  }
120
120
 
121
121
  &:hover {
122
- color: var(--theme-topbar-item-color-hover);
123
- background-color: var(--theme-topbar-item-background-hover);
122
+ color: var(--theme-topbar-item-color-hover, var(--black-600));
123
+ background-color: var(--theme-topbar-item-background-hover, var(--black-200));
124
124
  }
125
125
  }
126
126
 
127
127
  .s-navigation {
128
128
  .s-navigation--item:focus-visible {
129
- box-shadow: var(--theme-topbar-search-shadow-focus);
129
+ box-shadow: var(--theme-topbar-search-shadow-focus, 0 0 0 var(--su-static4) var(--focus-ring));
130
130
  }
131
131
  .s-navigation--item:not(.is-selected) {
132
- color: var(--theme-topbar-item-color);
132
+ color: var(--theme-topbar-item-color, var(--black-500));
133
133
  }
134
134
 
135
135
  .s-navigation--item:not(.is-selected):hover {
136
- color: var(--theme-topbar-item-color-hover);
137
- background-color: var(--theme-topbar-item-background-hover);
136
+ color: var(--theme-topbar-item-color-hover, var(--black-600));
137
+ background-color: var(--theme-topbar-item-background-hover, var(--black-200));
138
138
  }
139
139
  }
140
140
  }
@@ -166,7 +166,7 @@
166
166
  --theme-topbar-item-color-hover: .set-black()[600];
167
167
  --theme-topbar-item-background-hover: .set-black()[200];
168
168
  --theme-topbar-item-color-current: var(--_black-static);
169
- --theme-topbar-item-border-current: var(--theme-primary);
169
+ // --theme-topbar-item-border-current: var(--theme-primary); // As of Stacks v2, this is unused
170
170
 
171
171
  // TODO HACK remove everything below once light/dark topbars are inheriting forced themes correctly
172
172
  // redefine the variables for extra contrast in high-contrast mode
@@ -218,7 +218,7 @@
218
218
  --theme-topbar-item-color-hover: var(--_white-static);
219
219
  --theme-topbar-item-background-hover: .set-black()[500];
220
220
  --theme-topbar-item-color-current: var(--_white-static);
221
- --theme-topbar-item-border-current: var(--theme-primary);
221
+ // --theme-topbar-item-border-current: var(--theme-primary); // As of Stacks v2, this is unused
222
222
 
223
223
  // Themed border accent
224
224
  --theme-topbar-accent-border: none;
@@ -267,7 +267,7 @@
267
267
  margin-left: auto; // Push this section as far to the right as possible
268
268
 
269
269
  .s-topbar--item:not(.s-topbar--item__unset) {
270
- color: var(--theme-topbar-item-color);
270
+ color: var(--theme-topbar-item-color, var(--black-500));
271
271
  display: inline-flex;
272
272
  align-items: center;
273
273
  padding: 0 calc(var(--su12) - var(--su2));
@@ -280,14 +280,14 @@
280
280
  &.is-selected,
281
281
  &.is-selected:hover,
282
282
  &.is-selected:focus {
283
- color: var(--theme-topbar-item-color-hover);
284
- background-color: var(--theme-topbar-item-background-hover);
283
+ color: var(--theme-topbar-item-color-hover, var(--black-600));
284
+ background-color: var(--theme-topbar-item-background-hover, var(--black-200));
285
285
  text-decoration: none;
286
286
  outline: none;
287
287
 
288
288
  .s-activity-indicator {
289
289
  top: calc(50% - calc(var(--su16) + var(--su2))); // 50% - 18px
290
- box-shadow: 0 0 0 var(--su-static2) var(--theme-topbar-item-background-hover);
290
+ box-shadow: 0 0 0 var(--su-static2) var(--theme-topbar-item-background-hover, var(--black-200));
291
291
  }
292
292
  }
293
293
 
@@ -300,7 +300,7 @@
300
300
  top: calc(50% - calc(var(--su12) + var(--su2))); // 50% - 14px
301
301
  right: var(--su-static2);
302
302
  transition: top var(--te-smooth) 0.15s;
303
- box-shadow: 0 0 0 var(--su-static2) var(--theme-topbar-background-color);
303
+ box-shadow: 0 0 0 var(--su-static2) var(--theme-topbar-background-color, var(--white));
304
304
  }
305
305
  }
306
306
 
@@ -325,11 +325,11 @@
325
325
  margin-right: var(--su8);
326
326
  flex-shrink: 0;
327
327
 
328
- .topbar-notice-styles(transparent, transparent, var(--theme-topbar-item-color));
328
+ .topbar-notice-styles(transparent, transparent, var(--theme-topbar-item-color, var(--black-500)));
329
329
 
330
330
  &:hover,
331
331
  &:focus {
332
- .topbar-notice-styles(var(--theme-topbar-item-background-hover), var(--theme-topbar-item-background-hover), var(--theme-topbar-item-color-hover));
332
+ .topbar-notice-styles(var(--theme-topbar-item-background-hover, var(--black-200)), var(--theme-topbar-item-background-hover, var(--black-200)), var(--theme-topbar-item-color-hover, var(--black-600)));
333
333
  }
334
334
 
335
335
  &.is-unread {
@@ -358,26 +358,26 @@
358
358
  flex-grow: 1;
359
359
 
360
360
  .s-input {
361
- border-color: var(--theme-topbar-search-border);
362
- background-color: var(--theme-topbar-search-background);
361
+ border-color: var(--theme-topbar-search-border, var(--black-300));
362
+ background-color: var(--theme-topbar-search-background, var(--white));
363
363
  box-shadow: var(--theme-topbar-search-shadow);
364
- color: var(--theme-topbar-search-color);
364
+ color: var(--theme-topbar-search-color, var(--black-500));
365
365
  display: block;
366
366
  line-height: @inputLineHeights;
367
367
 
368
368
  &:focus {
369
- border-color: var(--theme-topbar-search-border-focus);
370
- box-shadow: var(--theme-topbar-search-shadow-focus);
369
+ border-color: var(--theme-topbar-search-border-focus, var(--blue-400));
370
+ box-shadow: var(--theme-topbar-search-shadow-focus, 0 0 0 var(--su-static4) var(--focus-ring));
371
371
  }
372
372
 
373
373
  &::placeholder {
374
- color: var(--theme-topbar-search-placeholder);
374
+ color: var(--theme-topbar-search-placeholder, var(--black-400));
375
375
  font-style: normal;
376
376
  }
377
377
  }
378
378
 
379
379
  .s-input-icon {
380
- color: var(--theme-topbar-search-placeholder);
380
+ color: var(--theme-topbar-search-placeholder, var(--black-400));
381
381
  }
382
382
  }
383
383
 
@@ -386,7 +386,7 @@
386
386
 
387
387
  align-self: stretch;
388
388
  margin-right: calc(var(--su-static1) * -1); //-1px
389
- color: var(--theme-topbar-select-color);
389
+ color: var(--theme-topbar-select-color, var(--black-500));
390
390
 
391
391
  &:before,
392
392
  &:after {
@@ -399,13 +399,13 @@
399
399
  height: 100%;
400
400
  line-height: @inputLineHeights;
401
401
 
402
- border-color: var(--theme-topbar-search-border);
403
- background-color: var(--theme-topbar-select-background);
404
- color: var(--theme-topbar-select-color);
402
+ border-color: var(--theme-topbar-search-border, var(--black-300));
403
+ background-color: var(--theme-topbar-select-background, var(--black-200));
404
+ color: var(--theme-topbar-select-color, var(--black-500));
405
405
 
406
406
  &:focus {
407
- border-color: var(--theme-topbar-search-border-focus);
408
- box-shadow: var(--theme-topbar-search-shadow-focus);
407
+ border-color: var(--theme-topbar-search-border-focus, var(--blue-400));
408
+ box-shadow: var(--theme-topbar-search-shadow-focus, 0 0 0 var(--su-static4) var(--focus-ring));
409
409
  z-index: var(--zi-selected);
410
410
  }
411
411
  }
@@ -423,7 +423,7 @@
423
423
  top: 100%;
424
424
  max-width: 100%;
425
425
  padding: var(--su8) var(--su12);
426
- background: var(--theme-topbar-item-background-hover);
426
+ background: var(--theme-topbar-item-background-hover, var(--black-200));
427
427
 
428
428
  &.s-topbar--searchbar__open {
429
429
  display: flex;
package/lib/components/uploader/uploader.less CHANGED
@@ -10,6 +10,15 @@
10
10
  // CONTEXTUAL STYLES
11
11
  .highcontrast-mode({
12
12
  --_up-bg-bc-hc: var(--black-400);
13
+ &.has-error {
14
+ --_up-bg-bc-hc-state: var(--red-500);
15
+ }
16
+ &.has-success {
17
+ --_up-bg-bc-hc-state: var(--green-400);
18
+ }
19
+ &.has-warning {
20
+ --_up-bg-bc-hc-state: var(--yellow-500);
21
+ }
13
22
  });
14
23
 
15
24
  // STATES
@@ -22,30 +31,27 @@
22
31
  }
23
32
 
24
33
  &.has-error {
25
- --_up-bg: var(--red-200);
26
- --_up-bg-focus: var(--red-300);
27
- --_up-bg-bc: var(--red-400);
28
- --_up-bg-bc-hc-state: var(--red-400);
34
+ --_up-bg: var(--red-100);
35
+ --_up-bg-focus: var(--red-200);
36
+ --_up-bg-bc: var(--red-300);
29
37
  --_up-focus-ring-color: var(--focus-ring-error);
30
- --_up-link-fc: var(--red-600);
38
+ --_up-link-fc: var(--red-500);
31
39
  }
32
40
 
33
41
  &.has-success {
34
42
  --_up-bg: var(--green-100);
35
43
  --_up-bg-focus: var(--green-200);
36
- --_up-bg-bc: var(--green-400);
37
- --_up-bg-bc-hc-state: var(--green-400);
44
+ --_up-bg-bc: var(--green-300);
38
45
  --_up-focus-ring-color: var(--focus-ring-success);
39
- --_up-link-fc: var(--green-600);
46
+ --_up-link-fc: var(--green-400);
40
47
  }
41
48
 
42
49
  &.has-warning {
43
- --_up-bg: var(--yellow-200);
44
- --_up-bg-focus: var(--yellow-300);
45
- --_up-bg-bc: var(--yellow-400);
46
- --_up-bg-bc-hc-state: var(--yellow-400);
50
+ --_up-bg: var(--yellow-100);
51
+ --_up-bg-focus: var(--yellow-200);
52
+ --_up-bg-bc: var(--yellow-300);
47
53
  --_up-focus-ring-color: var(--focus-ring-warning);
48
- --_up-link-fc: var(--yellow-600);
54
+ --_up-link-fc: var(--yellow-500);
49
55
  }
50
56
 
51
57
  &.is-active {
package/lib/components/user-card/user-card.less CHANGED
@@ -21,7 +21,7 @@
21
21
  }
22
22
 
23
23
  &&__highlighted {
24
- --_uc-bg: var(--theme-secondary-200);
24
+ --_uc-bg: var(--theme-secondary-100);
25
25
  --_uc-bar: var(--br-md);
26
26
  --_uc-time-fc: var(--black-500);
27
27
  --_uc-type-fc: var(--black-500);
package/lib/exports/__snapshots__/color-mixins.less.test.ts.snap CHANGED
@@ -290,23 +290,23 @@ body .themed {
290
290
  --black-200: hsl(210, 8%, 90%);
291
291
  --black-225: hsl(210, 8%, 85%);
292
292
  --black-250: hsl(210, 8%, 80%);
293
- --black-300: hsl(213, 9%, 75%);
294
- --black-350: hsl(212, 8%, 68%);
295
- --black-400: hsl(210, 8%, 45%);
293
+ --black-300: hsl(210, 9%, 75%);
294
+ --black-350: hsl(210, 8%, 68%);
295
+ --black-400: hsl(210, 8%, 42%);
296
296
  --black-500: hsl(210, 8%, 25%);
297
297
  --black-600: hsl(210, 8%, 5%);
298
- --black: hsl(0, 8%, 5%);
298
+ --black: hsl(0, 0%, 0%);
299
299
  --orange-100: hsl(23, 85%, 97%);
300
300
  --orange-200: hsl(27, 85%, 87%);
301
301
  --orange-300: hsl(27, 85%, 72%);
302
- --orange-400: hsl(27, 90%, 55%);
303
- --orange-500: hsl(27, 88%, 43%);
302
+ --orange-400: hsl(27, 80%, 52%);
303
+ --orange-500: hsl(27, 80%, 43%);
304
304
  --orange-600: hsl(27, 80%, 29%);
305
305
  --blue-100: hsl(210, 80%, 96%);
306
306
  --blue-200: hsl(210, 80%, 91%);
307
307
  --blue-300: hsl(210, 78%, 76%);
308
- --blue-400: hsl(210, 70%, 48%);
309
- --blue-500: hsl(210, 75%, 36%);
308
+ --blue-400: hsl(210, 77%, 46%);
309
+ --blue-500: hsl(210, 77%, 36%);
310
310
  --blue-600: hsl(210, 80%, 23%);
311
311
  --green-100: hsl(148, 35%, 95%);
312
312
  --green-200: hsl(148, 35%, 88%);
@@ -314,7 +314,7 @@ body .themed {
314
314
  --green-400: hsl(148, 70%, 31%);
315
315
  --green-500: hsl(148, 75%, 22%);
316
316
  --green-600: hsl(148, 75%, 15%);
317
- --red-100: hsl(0, 78%, 96%);
317
+ --red-100: hsl(0, 72%, 96%);
318
318
  --red-200: hsl(0, 70%, 93%);
319
319
  --red-300: hsl(0, 65%, 76%);
320
320
  --red-400: hsl(0, 60%, 49%);
@@ -326,6 +326,12 @@ body .themed {
326
326
  --yellow-400: hsl(43, 85%, 50%);
327
327
  --yellow-500: hsl(43, 85%, 33%);
328
328
  --yellow-600: hsl(43, 84%, 18%);
329
+ --purple-100: hsl(237, 80%, 96%);
330
+ --purple-200: hsl(237, 77%, 92%);
331
+ --purple-300: hsl(237, 60%, 83%);
332
+ --purple-400: hsl(237, 55%, 57%);
333
+ --purple-500: hsl(237, 50%, 45%);
334
+ --purple-600: hsl(237, 50%, 32%);
329
335
  --gold-100: hsl(46, 100%, 91%);
330
336
  --gold-200: hsl(46, 100%, 74%);
331
337
  --gold-300: hsl(45, 100%, 42%);
@@ -355,7 +361,7 @@ body .themed {
355
361
  --focus-ring-muted: hsla(210, 8%, 15%, 0.1);
356
362
  --highlight-addition: var(--green-500);
357
363
  --highlight-attribute: hsl(206, 98.5%, 29%);
358
- --highlight-bg: var(--black-100);
364
+ --highlight-bg: hsl(0, 0%, 96.5%);
359
365
  --highlight-color: var(--black-600);
360
366
  --highlight-comment: hsl(210, 8%, 43.5%);
361
367
  --highlight-deletion: var(--red-500);
@@ -395,6 +401,7 @@ body .themed {
395
401
  --theme-secondary-custom-600: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(5%, calc(var(--theme-base-secondary-color-l) + -26 * 1%), 40%));
396
402
  --theme-secondary-custom: var(--theme-secondary-custom-400);
397
403
  --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);
404
+ color: var(--theme-body-font-color, var(--black-600));
398
405
  }
399
406
  "
400
407
  `;