@stackoverflow/stacks 1.10.3 → 2.0.0-rc.1

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 (90) hide show
  1. package/README.md +15 -0
  2. package/dist/css/stacks.css +7428 -4429
  3. package/dist/css/stacks.min.css +1 -1
  4. package/dist/js/stacks.js +110 -265
  5. package/dist/js/stacks.min.js +1 -1
  6. package/lib/atomic/__snapshots__/color-new.less.test.ts.snap +3015 -0
  7. package/lib/atomic/__snapshots__/color.less.test.ts.snap +2886 -0
  8. package/lib/atomic/border.less +0 -258
  9. package/lib/atomic/color.less +26 -200
  10. package/lib/atomic/color.less.test.ts +12 -0
  11. package/lib/atomic/misc.less +7 -6
  12. package/lib/atomic/typography.less +0 -7
  13. package/lib/atomic/v1/__snapshots__/border.less.test.ts.snap +552 -0
  14. package/lib/atomic/v1/__snapshots__/color.less.test.ts.snap +6756 -0
  15. package/lib/atomic/v1/__snapshots__/typography.less.test.ts.snap +22 -0
  16. package/lib/atomic/v1/border.less +210 -0
  17. package/lib/atomic/v1/border.less.test.ts +14 -0
  18. package/lib/atomic/v1/color.less +183 -0
  19. package/lib/atomic/v1/color.less.test.ts +14 -0
  20. package/lib/atomic/v1/typography.less +8 -0
  21. package/lib/atomic/v1/typography.less.test.ts +14 -0
  22. package/lib/components/activity-indicator/activity-indicator.a11y.test.ts +1 -10
  23. package/lib/components/activity-indicator/activity-indicator.less +4 -4
  24. package/lib/components/anchor/anchor.a11y.test.ts +0 -12
  25. package/lib/components/anchor/anchor.less +4 -4
  26. package/lib/components/anchor/anchor.visual.test.ts +1 -1
  27. package/lib/components/avatar/avatar.less +2 -2
  28. package/lib/components/award-bling/award-bling.less +3 -3
  29. package/lib/components/badge/badge.a11y.test.ts +2 -51
  30. package/lib/components/badge/badge.less +40 -40
  31. package/lib/components/banner/banner.a11y.test.ts +0 -14
  32. package/lib/components/block-link/block-link.a11y.test.ts +0 -14
  33. package/lib/components/block-link/block-link.less +8 -8
  34. package/lib/components/breadcrumbs/breadcrumbs.a11y.test.ts +0 -2
  35. package/lib/components/breadcrumbs/breadcrumbs.less +1 -1
  36. package/lib/components/button/button.a11y.test.ts +0 -134
  37. package/lib/components/button/button.less +40 -40
  38. package/lib/components/button/button.visual.test.ts +1 -1
  39. package/lib/components/card/card.a11y.test.ts +0 -6
  40. package/lib/components/check-control/check-control.a11y.test.ts +0 -13
  41. package/lib/components/check-control/check-control.visual.test.ts +1 -1
  42. package/lib/components/checkbox_radio/checkbox_radio.less +5 -5
  43. package/lib/components/checkbox_radio/checkbox_radio.visual.test.ts +1 -1
  44. package/lib/components/code-block/code-block.less +3 -3
  45. package/lib/components/description/description.a11y.test.ts +0 -5
  46. package/lib/components/description/description.visual.test.ts +1 -1
  47. package/lib/components/input-fill/input-fill.less +2 -2
  48. package/lib/components/input-icon/input-icon.less +2 -2
  49. package/lib/components/input-message/input-message.less +8 -8
  50. package/lib/components/input_textarea/input_textarea.less +6 -6
  51. package/lib/components/label/label.less +11 -11
  52. package/lib/components/link/link.a11y.test.ts +0 -21
  53. package/lib/components/link/link.less +8 -8
  54. package/lib/components/link-preview/link-preview.less +9 -9
  55. package/lib/components/menu/menu.less +3 -3
  56. package/lib/components/modal/modal.less +5 -4
  57. package/lib/components/navigation/navigation.less +11 -11
  58. package/lib/components/notice/notice.less +48 -48
  59. package/lib/components/pagination/pagination.less +3 -3
  60. package/lib/components/popover/popover.less +2 -2
  61. package/lib/components/popover/tooltip.test.ts +1 -1
  62. package/lib/components/post-summary/post-summary.less +40 -40
  63. package/lib/components/progress-bar/progress-bar.less +15 -15
  64. package/lib/components/prose/prose.less +15 -15
  65. package/lib/components/select/select.less +5 -5
  66. package/lib/components/sidebar-widget/sidebar-widget.less +12 -12
  67. package/lib/components/table/table.less +7 -7
  68. package/lib/components/tag/tag.less +25 -25
  69. package/lib/components/toggle-switch/toggle-switch.a11y.test.ts +0 -7
  70. package/lib/components/toggle-switch/toggle-switch.less +4 -4
  71. package/lib/components/topbar/topbar.less +34 -34
  72. package/lib/components/uploader/uploader.less +15 -15
  73. package/lib/components/user-card/user-card.less +7 -7
  74. package/lib/exports/__snapshots__/color-mixins.less.test.ts.snap +539 -0
  75. package/lib/exports/__snapshots__/color.less.test.ts.snap +762 -0
  76. package/lib/exports/color-mixins.less +280 -0
  77. package/lib/exports/color-mixins.less.test.ts +150 -0
  78. package/lib/exports/color-sets.less +620 -0
  79. package/lib/exports/color.less +57 -0
  80. package/lib/exports/color.less.test.ts +12 -0
  81. package/lib/exports/exports.less +2 -1
  82. package/lib/exports/mixins.less +17 -5
  83. package/lib/exports/theme.less +85 -0
  84. package/lib/exports/v1/__snapshots__/constants-colors.less.test.ts.snap +902 -0
  85. package/lib/exports/v1/constants-colors.less +893 -0
  86. package/lib/exports/v1/constants-colors.less.test.ts +12 -0
  87. package/lib/stacks-static.less +5 -0
  88. package/lib/test/less-test-utils.ts +28 -0
  89. package/package.json +13 -7
  90. package/lib/exports/constants-colors.less +0 -1100
package/lib/exports/mixins.less CHANGED
@@ -23,7 +23,7 @@
23
23
  // -- LIGHTMODE
24
24
  // .light-mode-forced ensures light color scheme is used in .theme-light__forced
25
25
  //
26
- // .light-mode-forced({ color: var(--black-900) });
26
+ // .light-mode-forced({ color: var(--black-600) });
27
27
  //
28
28
  // ---------------------------------------------------------------------------
29
29
 
@@ -138,6 +138,18 @@
138
138
  calc(var(~"--@{color-prefix}-l") + @amountPercentage));
139
139
  }
140
140
 
141
+
142
+ .native-lightness(@color-prefix, @lMod: 0, @min: 0, @max: 100) {
143
+ .native-saturation-lightness(@color-prefix, 0, @lMod, @min, @max);
144
+ }
145
+
146
+ // Increase the lightness of a color in the HSL color space by an absolute amount and include custom clamp values.
147
+ .native-saturation-lightness(@color-prefix, @sMod: 0, @lMod: 0, @min: 0, @max: 100) {
148
+ @result: hsl(var(~"--@{color-prefix}-h"),
149
+ calc(var(~"--@{color-prefix}-s") + @sMod * 1%),
150
+ clamp(@min * 1%, calc(var(~"--@{color-prefix}-l") + @lMod * 1%), @max * 1%));
151
+ }
152
+
141
153
  // Decrease the lightness and saturation of a color in the HSL color space by absolute amounts.
142
154
  .native-darken-desaturate(@color-prefix, @darken-amount, @desaturate-amount) {
143
155
  @darkenAmountPercentage: .load-color-variables(@darken-amount)[@amountPercentage];
@@ -239,14 +251,14 @@
239
251
  .webkit-autofill() {
240
252
  &:-webkit-autofill {
241
253
  &:focus {
242
- border-color: var(--blue-300);
254
+ border-color: var(--blue-400);
243
255
  // Since the box shadow is overwritten to show a background, we have to re-add the focus outline
244
- -webkit-box-shadow: 0 0 0 1000px var(--blue-050) inset, 0 0 0 var(--su-static4) var(--focus-ring);
256
+ -webkit-box-shadow: 0 0 0 1000px var(--blue-200) inset, 0 0 0 var(--su-static4) var(--focus-ring);
245
257
  }
246
258
 
247
- -webkit-box-shadow: 0 0 0 1000px var(--theme-secondary-050) inset; // This acts as a background color by stretching an inset box shadow across the input
259
+ -webkit-box-shadow: 0 0 0 1000px var(--theme-secondary-200) inset; // This acts as a background color by stretching an inset box shadow across the input
248
260
  -webkit-text-fill-color: var(--black);
249
- border-color: var(--blue-300);
261
+ border-color: var(--blue-400);
250
262
  transition: background-color 0s 50000s; // A hack to infinitely delay background styles that come from the browser.
251
263
  }
252
264
 
package/lib/exports/theme.less ADDED
@@ -0,0 +1,85 @@
1
+ .theme-variables() {
2
+ --theme-body-font-color: var(--black-600);
3
+ --theme-background-color: var(--white);
4
+ // Links
5
+ --theme-link-color: var(--theme-secondary-400);
6
+ --theme-link-color-hover: var(--theme-secondary-400); // TODO was 350, now same as base link color
7
+ --theme-link-color-visited: var(--theme-secondary-500);
8
+
9
+ // Button Default (Secondary)
10
+ --theme-button-color: var(--theme-secondary-400);
11
+ --theme-button-background-color: transparent;
12
+ --theme-button-hover-color: var(--theme-secondary-400); // TODO was 500, now same as base button color
13
+ --theme-button-hover-background-color: var(--theme-secondary-200);
14
+ --theme-button-active-background-color: var(--theme-secondary-300);
15
+ --theme-button-selected-color: var(--theme-secondary-600);
16
+ --theme-button-selected-background-color: var(--theme-secondary-300);
17
+
18
+ // Button Primary
19
+ --theme-button-primary-color: var(--white);
20
+ --theme-button-primary-background-color: var(--theme-secondary-400);
21
+ --theme-button-primary-hover-color: var(--white);
22
+ --theme-button-primary-hover-background-color: var(--theme-secondary-400); // TODO was 500, now same as primary button color
23
+ --theme-button-primary-active-background-color: var(--theme-secondary-500);
24
+ --theme-button-primary-selected-color: var(--white);
25
+ --theme-button-primary-selected-background-color: var(--theme-secondary-500);
26
+ --theme-button-primary-number-color: var(--theme-secondary-600);
27
+
28
+ // Button Filled
29
+ --theme-button-filled-color: var(--theme-secondary-500);
30
+ --theme-button-filled-background-color: var(--theme-secondary-200);
31
+ --theme-button-filled-border-color: var(--theme-secondary-400);
32
+ --theme-button-filled-hover-color: var(--theme-secondary-600);
33
+ --theme-button-filled-hover-background-color: var(--theme-secondary-300);
34
+ --theme-button-filled-active-background-color: var(--theme-secondary-300); // TODO was 150, now same as hover bg color
35
+ --theme-button-filled-active-border-color: var(--theme-secondary-400);
36
+ --theme-button-filled-selected-color: var(--theme-secondary-600);
37
+ --theme-button-filled-selected-background-color: var(--theme-secondary-400);
38
+ --theme-button-filled-selected-border-color: var(--theme-secondary-400); // TODO was 500, now same as selected bg color
39
+
40
+ // Button Outline
41
+ --theme-button-outlined-border-color: var(--theme-secondary-400);
42
+ --theme-button-outlined-selected-border-color: var(--theme-secondary-400); // TODO now same as unselected border-color above (above was 350)
43
+
44
+ // Tags
45
+ --theme-tag-color: var(--theme-secondary-600);
46
+ --theme-tag-background-color: var(--theme-secondary-200);
47
+ --theme-tag-border-color: transparent;
48
+ --theme-tag-hover-color: var(--theme-secondary-600); // TODO was 900, now same as base tag color
49
+ --theme-tag-hover-background-color: var(--theme-secondary-300);
50
+ --theme-tag-hover-border-color: transparent;
51
+
52
+ // Topbar
53
+ --theme-topbar-height: calc(var(--su-static48) + var(--su-static8)); // 56px
54
+ --theme-topbar-background-color: var(--white);
55
+
56
+ // Topbar Search input
57
+ --theme-topbar-search-color: var(--black-500);
58
+ --theme-topbar-search-background: var(--white);
59
+ --theme-topbar-search-placeholder: var(--black-400);
60
+ --theme-topbar-search-border: var(--black-300);
61
+ --theme-topbar-search-border-focus: var(--blue-400);
62
+ --theme-topbar-search-shadow-focus: 0 0 0 var(--su-static4) var(--focus-ring);
63
+
64
+ // Topbar Search switcher
65
+ --theme-topbar-select-color: var(--black-500);
66
+ --theme-topbar-select-background: var(--black-200);
67
+
68
+ // Topbar items
69
+ --theme-topbar-item-color: var(--black-500);
70
+ --theme-topbar-item-color-hover: var(--black-600);
71
+ --theme-topbar-item-background-hover: var(--black-200);
72
+ --theme-topbar-item-color-current: var(--black);
73
+ --theme-topbar-item-border-current: var(--theme-primary);
74
+
75
+ // Topbar themed border accent
76
+ --theme-topbar-accent-border: 3px solid var(--theme-primary);
77
+ --theme-topbar-bottom-border: 1px solid var(--black-225);
78
+
79
+ // Post summary
80
+ --theme-post-title-color: var(--theme-link-color);
81
+ --theme-post-title-color-hover: var(--theme-link-color-hover);
82
+ --theme-post-title-color-visited: var(--theme-link-color-visited);
83
+ --theme-post-title-font-family: var(--theme-body-font-family);
84
+ --theme-post-body-font-family: var(--theme-body-font-family);
85
+ }