@stackoverflow/stacks 3.0.0-beta.0 → 3.0.0-beta.2

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 (40) hide show
  1. package/dist/css/stacks.css +781 -729
  2. package/dist/css/stacks.min.css +1 -1
  3. package/dist/js/stacks.js +0 -14
  4. package/dist/js/stacks.min.js +1 -1
  5. package/lib/atomic/border.less +2 -20
  6. package/lib/atomic/misc.less +1 -1
  7. package/lib/atomic/typography.less +13 -26
  8. package/lib/base/body.less +2 -7
  9. package/lib/components/activity-indicator/activity-indicator.less +17 -13
  10. package/lib/components/anchor/anchor.less +1 -1
  11. package/lib/components/avatar/avatar.less +9 -11
  12. package/lib/components/award-bling/award-bling.less +4 -3
  13. package/lib/components/badge/badge.less +7 -7
  14. package/lib/components/block-link/block-link.less +1 -1
  15. package/lib/components/button/button.less +1 -1
  16. package/lib/components/button-group/button-group.less +1 -1
  17. package/lib/components/card/card.less +1 -1
  18. package/lib/components/checkbox_radio/checkbox_radio.less +13 -11
  19. package/lib/components/link/link.less +1 -1
  20. package/lib/components/link-preview/link-preview.less +6 -6
  21. package/lib/components/modal/modal.less +1 -1
  22. package/lib/components/notice/notice.less +1 -1
  23. package/lib/components/pagination/pagination.less +1 -1
  24. package/lib/components/popover/popover.less +0 -98
  25. package/lib/components/popover/popover.ts +0 -6
  26. package/lib/components/popover/tooltip.ts +0 -12
  27. package/lib/components/post-summary/post-summary.less +3 -3
  28. package/lib/components/progress-bar/progress-bar.less +13 -12
  29. package/lib/components/prose/prose.less +2 -2
  30. package/lib/components/skeleton/skeleton.less +1 -1
  31. package/lib/components/tag/tag.less +4 -4
  32. package/lib/components/toggle-switch/toggle-switch.less +4 -2
  33. package/lib/components/topbar/topbar.less +3 -3
  34. package/lib/components/uploader/uploader.less +3 -3
  35. package/lib/exports/color-mixins.less +13 -3
  36. package/lib/exports/color-sets.less +255 -216
  37. package/lib/exports/constants-helpers.less +5 -3
  38. package/lib/exports/constants-type.less +25 -25
  39. package/lib/exports/mixins.less +2 -2
  40. package/package.json +1 -1
package/lib/components/progress-bar/progress-bar.less CHANGED
@@ -2,13 +2,13 @@
2
2
  // COMPONENT-SPECIFIC CONSTANTS
3
3
  @pr-circle-circumference: (2 * pi() * 14); // 2πr, r = 14.
4
4
  // COMPONENT-SPECIFIC CUSTOM PROPERTIES
5
- --_pr-bar: var(--br-sm);
5
+ --_pr-bar: var(--br-md);
6
6
  --_pr-bg: var(--black-300);
7
7
  --_pr-h: unset;
8
8
  --_pr-size: unset;
9
9
  --_pr-w: 100%;
10
10
  --_pr-hmn: var(--su-static4);
11
- --_pr-bar-bar: var(--br-sm);
11
+ --_pr-bar-bar: var(--br-md);
12
12
  --_pr-bar-bg: var(--green-400);
13
13
  --_pr-bar-hmn: var(--su-static4);
14
14
  --_pr-label-ai: unset;
@@ -23,14 +23,15 @@
23
23
  --_pr-bar-bg: var(--orange-400);
24
24
  }
25
25
 
26
+ // TODO SPARK I've changed metallic colors here to use their new non-metallic equivalents
26
27
  &&__bronze {
27
- --_pr-bar-bg: var(--bronze-100);
28
- --_pr-label-bc: var(--bronze-400);
28
+ --_pr-bar-bg: var(--orange-100);
29
+ --_pr-label-bc: var(--orange-400);
29
30
  }
30
31
 
31
32
  &&__gold {
32
- --_pr-bar-bg: var(--gold-100);
33
- --_pr-label-bc: var(--gold-400);
33
+ --_pr-bar-bg: var(--yellow-100);
34
+ --_pr-label-bc: var(--yellow-400);
34
35
  }
35
36
 
36
37
  &&__info {
@@ -38,8 +39,8 @@
38
39
  }
39
40
 
40
41
  &&__silver {
41
- --_pr-bar-bg: var(--silver-100);
42
- --_pr-label-bc: var(--silver-400);
42
+ --_pr-bar-bg: var(--blue-100);
43
+ --_pr-label-bc: var(--blue-400);
43
44
  }
44
45
 
45
46
  // VARIANTS
@@ -161,7 +162,7 @@
161
162
  &.is-active {
162
163
  .s-progress {
163
164
  &--bar.s-progress--bar__left {
164
- background: var(--theme-secondary-400);
165
+ background: var(--theme-secondary);
165
166
  }
166
167
 
167
168
  &--label {
@@ -169,8 +170,8 @@
169
170
  }
170
171
 
171
172
  &--stop {
172
- background: var(--theme-secondary-400);
173
- box-shadow: 0 0 0 var(--su-static6) var(--translucent-secondary);
173
+ background: var(--theme-secondary);
174
+ box-shadow: 0 0 0 var(--su-static6) var(--translucent-secondary);// TODO SHINE revisit this value once theme colors are finalized
174
175
  }
175
176
  }
176
177
  }
@@ -179,7 +180,7 @@
179
180
  .s-progress {
180
181
  &--bar,
181
182
  &--stop {
182
- background: var(--theme-secondary-400);
183
+ background: var(--theme-secondary);
183
184
  }
184
185
 
185
186
  &--label {
package/lib/components/prose/prose.less CHANGED
@@ -81,7 +81,7 @@
81
81
  padding: var(--su2) var(--su4);
82
82
  color: var(--black-600);
83
83
  background-color: var(--black-200);
84
- border-radius: var(--br-sm);
84
+ border-radius: var(--br-md);
85
85
  }
86
86
  }
87
87
 
@@ -316,7 +316,7 @@
316
316
  box-shadow: var(--_pr-kbd-bs);
317
317
 
318
318
  background-color: var(--black-200);
319
- border-radius: var(--br-sm);
319
+ border-radius: var(--br-md);
320
320
  color: var(--black-600);
321
321
  display: inline-block;
322
322
  font-family: var(--ff-sans);
package/lib/components/skeleton/skeleton.less CHANGED
@@ -45,7 +45,7 @@
45
45
  var(--_sk-bg-1) 83%
46
46
  );
47
47
  background-size: 400% 100%;
48
- border-radius: var(--br-lg);
48
+ border-radius: var(--br-md);
49
49
  display: block;
50
50
  height: var(--su16);
51
51
  position: relative;
package/lib/components/tag/tag.less CHANGED
@@ -8,7 +8,7 @@
8
8
  --_ta-bg-hover: var(--theme-tag-hover-background-color, var(--black-200));
9
9
  --_ta-fc-hover: var(--theme-tag-hover-color, var(--black-600));
10
10
  // Other
11
- --_ta-br: var(--br-sm);
11
+ --_ta-br: var(--br-md);
12
12
  --_ta-fs: var(--fs-caption);
13
13
  --_ta-lh: 1.846153846;
14
14
  --_ta-pl: var(--_ta-px);
@@ -41,7 +41,7 @@
41
41
  --_ta-lh: 1.733333333;
42
42
  }
43
43
  &&__lg {
44
- --_ta-br: calc(var(--br-sm) + var(--su-static1));
44
+ --_ta-br: calc(var(--br-md) + var(--su-static1));
45
45
  --_ta-fs: var(--fs-subheading);
46
46
  --_ta-lh: 1.684210526;
47
47
  --_ta-px: var(--su6);
@@ -129,7 +129,7 @@
129
129
  align-items: center;
130
130
  align-self: stretch;
131
131
  background-color: transparent;
132
- border-radius: var(--br-sm);
132
+ border-radius: var(--br-md);
133
133
  color: inherit;
134
134
  cursor: pointer;
135
135
  display: flex;
@@ -146,7 +146,7 @@
146
146
  }
147
147
 
148
148
  align-self: center;
149
- border-radius: calc(var(--br-sm) - var(--su-static1));
149
+ border-radius: calc(var(--br-md) - var(--su-static1));
150
150
  display: inline-flex;
151
151
  margin: calc(var(--su1) * -1) var(--su4) calc(var(--su2) * -1) calc(var(--su2) * -1);
152
152
  max-width: calc(var(--su-static16) + var(--su-static2));
package/lib/components/toggle-switch/toggle-switch.less CHANGED
@@ -1,14 +1,16 @@
1
1
  .s-toggle-switch {
2
2
  @ts-bg-image-fill: .set-white()[default];
3
3
  @ts-bg-image-fill-dark: .set-white-dark()[default];
4
+ @ts-bg-image-fill-esc: escape("@{ts-bg-image-fill}"); // color escaped for URL usage
5
+ @ts-bg-image-fill-dark-esc: escape("@{ts-bg-image-fill-dark}"); // color escaped for URL usage
4
6
  --_ts-bg: var(--black-350);
5
- --_ts-bg-image: url("data:image/svg+xml;,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='@{ts-bg-image-fill}'/%3e%3c/svg%3e");
7
+ --_ts-bg-image: url("data:image/svg+xml;,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='@{ts-bg-image-fill-esc}'/%3e%3c/svg%3e");
6
8
  --_ts-bg-ps: left center;
7
9
  --_ts-multiple-bg: unset;
8
10
  --_ts-multiple-fc: var(--black-400);
9
11
 
10
12
  .dark-mode({
11
- --_ts-bg-image: url("data:image/svg+xml;,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='@{ts-bg-image-fill-dark}'/%3e%3c/svg%3e");
13
+ --_ts-bg-image: url("data:image/svg+xml;,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='@{ts-bg-image-fill-dark-esc}'/%3e%3c/svg%3e");
12
14
  });
13
15
 
14
16
  fieldset[disabled] &,
package/lib/components/topbar/topbar.less CHANGED
@@ -198,7 +198,7 @@
198
198
  color: var(--_tb-item-fc);
199
199
 
200
200
  align-items: center;
201
- border-radius: var(--br-sm);
201
+ border-radius: var(--br-md);
202
202
  display: inline-flex;
203
203
  padding: 0 calc(var(--su12) - var(--su2));
204
204
  position: relative;
@@ -217,7 +217,7 @@
217
217
  background-color: var(--_tb-logo-bg);
218
218
 
219
219
  align-items: center;
220
- border-radius: var(--br-sm);
220
+ border-radius: var(--br-md);
221
221
  display: flex;
222
222
  height: 100%;
223
223
  padding: 0 var(--su8);
@@ -323,7 +323,7 @@
323
323
  color: var(--_tb-notice-fc);
324
324
  text-decoration: var(--_tb-notice-td);
325
325
 
326
- border-radius: var(--br-sm);
326
+ border-radius: var(--br-md);
327
327
  display: inline-flex;
328
328
  flex-shrink: 0;
329
329
  font-size: var(--fs-fine);
package/lib/components/uploader/uploader.less CHANGED
@@ -69,7 +69,7 @@
69
69
  -webkit-mask-image: var(--_up-bg-b-image);
70
70
  mask-image: var(--_up-bg-b-image);
71
71
  background-color: var(--_up-bg-bc-hc-state, var(--_up-bg-bc-hc, var(--_up-bg-bc)));
72
- border-radius: var(--br-lg);
72
+ border-radius: var(--br-md);
73
73
  content: '';
74
74
  display: block;
75
75
  inset: 0;
@@ -78,7 +78,7 @@
78
78
 
79
79
  align-items: center;
80
80
  background-color: var(--_up-bg);
81
- border-radius: var(--br-lg);
81
+ border-radius: var(--br-md);
82
82
  display: flex;
83
83
  flex-direction: column;
84
84
  justify-content: center;
@@ -127,7 +127,7 @@
127
127
  }
128
128
 
129
129
  background-color: var(--white);
130
- border-radius: var(--br-sm);
130
+ border-radius: var(--br-md);
131
131
  box-shadow: var(--bs-md);
132
132
  max-height: var(--su-static128);
133
133
  max-width: 100%;
package/lib/exports/color-mixins.less CHANGED
@@ -261,19 +261,29 @@
261
261
 
262
262
  each(@tiers, .(@tier, @k, @i) {
263
263
  @stops: 100, 200, 300, 400, 500, 600;
264
- @fallbackColor: if(@tier = primary, orange, blue);
264
+ @fallbackColor: if(@tier = primary, orange, black);
265
265
  @baseThemeVar: ~"--theme-@{tier}";
266
266
  @customThemeVar: if(@mode = light, ~"@{baseThemeVar}-custom", ~"--theme-dark-@{tier}-custom");
267
267
 
268
268
  & when (@mode = light), (@mode = dark) {
269
- @{baseThemeVar}: ~"var(@{customThemeVar}, var(--@{fallbackColor}-400))";
269
+ & when (@tier = primary) {
270
+ @{baseThemeVar}: ~"var(@{customThemeVar}, var(--@{fallbackColor}-400))";
271
+ }
272
+ & when (@tier = secondary) {
273
+ @{baseThemeVar}: ~"var(@{customThemeVar}, var(--@{fallbackColor}))";
274
+ }
270
275
  each(@stops, .(@stop, @kStop, @iStop) {
271
276
  @{baseThemeVar}-@{stop}: ~"var(@{customThemeVar}-@{stop}, var(--@{fallbackColor}-@{stop}))";
272
277
  });
273
278
  }
274
279
 
275
280
  & when (@mode = light-highcontrast), (@mode = dark-highcontrast) {
276
- @{baseThemeVar}: ~"var(--@{fallbackColor}-400)";
281
+ & when (@tier = primary) {
282
+ @{baseThemeVar}: ~"var(--@{fallbackColor}-400)";
283
+ }
284
+ & when (@tier = secondary) {
285
+ @{baseThemeVar}: ~"var(--@{fallbackColor})";
286
+ }
277
287
 
278
288
  each(@stops, .(@stop, @kStop, @iStop) {
279
289
  @{baseThemeVar}-@{stop}: ~"var(--@{fallbackColor}-@{stop})";