@stackoverflow/stacks 0.73.1 → 0.76.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 (87) hide show
  1. package/LICENSE.MD +9 -9
  2. package/README.md +47 -47
  3. package/dist/controllers/index.d.ts +7 -0
  4. package/dist/controllers/s-expandable-control.d.ts +17 -0
  5. package/dist/controllers/s-modal.d.ts +97 -0
  6. package/dist/controllers/s-navigation-tablist.d.ts +36 -0
  7. package/dist/controllers/s-popover.d.ts +155 -0
  8. package/dist/controllers/s-table.d.ts +8 -0
  9. package/dist/controllers/s-tooltip.d.ts +82 -0
  10. package/dist/controllers/s-uploader.d.ts +48 -0
  11. package/dist/css/stacks.css +441 -141
  12. package/dist/css/stacks.min.css +1 -1
  13. package/dist/index.d.ts +3 -0
  14. package/dist/js/stacks.js +6130 -5488
  15. package/dist/js/stacks.min.js +1 -1
  16. package/dist/stacks.d.ts +21 -0
  17. package/lib/css/atomic/_stacks-borders.less +378 -378
  18. package/lib/css/atomic/_stacks-colors.less +209 -209
  19. package/lib/css/atomic/_stacks-flex.less +374 -374
  20. package/lib/css/atomic/_stacks-grid.less +174 -173
  21. package/lib/css/atomic/_stacks-misc.less +343 -342
  22. package/lib/css/atomic/_stacks-spacing.less +168 -162
  23. package/lib/css/atomic/_stacks-typography.less +273 -270
  24. package/lib/css/atomic/_stacks-width-height.less +195 -189
  25. package/lib/css/base/_stacks-body.less +44 -46
  26. package/lib/css/base/_stacks-configuration-static.less +59 -59
  27. package/lib/css/base/_stacks-icons.less +20 -20
  28. package/lib/css/base/_stacks-internals.less +220 -230
  29. package/lib/css/base/_stacks-reset-meyer.less +64 -64
  30. package/lib/css/base/_stacks-reset-normalize.less +449 -449
  31. package/lib/css/base/_stacks-reset.less +20 -20
  32. package/lib/css/components/_stacks-activity-indicator.less +45 -45
  33. package/lib/css/components/_stacks-avatars.less +189 -189
  34. package/lib/css/components/_stacks-badges.less +209 -209
  35. package/lib/css/components/_stacks-banners.less +80 -81
  36. package/lib/css/components/_stacks-blank-states.less +26 -26
  37. package/lib/css/components/_stacks-breadcrumbs.less +44 -44
  38. package/lib/css/components/_stacks-button-groups.less +104 -104
  39. package/lib/css/components/_stacks-buttons.less +658 -660
  40. package/lib/css/components/_stacks-cards.less +44 -44
  41. package/lib/css/components/_stacks-code-blocks.less +130 -130
  42. package/lib/css/components/_stacks-collapsible.less +104 -104
  43. package/lib/css/components/_stacks-inputs.less +728 -724
  44. package/lib/css/components/_stacks-link-previews.less +136 -136
  45. package/lib/css/components/_stacks-links.less +218 -218
  46. package/lib/css/components/_stacks-menu.less +47 -47
  47. package/lib/css/components/_stacks-modals.less +133 -133
  48. package/lib/css/components/_stacks-navigation.less +146 -146
  49. package/lib/css/components/_stacks-notices.less +233 -233
  50. package/lib/css/components/_stacks-page-titles.less +60 -60
  51. package/lib/css/components/_stacks-pagination.less +55 -55
  52. package/lib/css/components/_stacks-popovers.less +197 -197
  53. package/lib/css/components/_stacks-post-summary.less +425 -311
  54. package/lib/css/components/_stacks-progress-bars.less +331 -331
  55. package/lib/css/components/_stacks-prose.less +503 -503
  56. package/lib/css/components/_stacks-spinner.less +107 -107
  57. package/lib/css/components/_stacks-tables.less +341 -341
  58. package/lib/css/components/_stacks-tags.less +237 -209
  59. package/lib/css/components/_stacks-toggle-switches.less +144 -137
  60. package/lib/css/components/_stacks-topbar.less +425 -440
  61. package/lib/css/components/_stacks-uploader.less +210 -210
  62. package/lib/css/components/_stacks-user-cards.less +169 -193
  63. package/lib/css/components/_stacks-widget-dynamic.less +33 -33
  64. package/lib/css/components/_stacks-widget-static.less +272 -272
  65. package/lib/css/exports/_stacks-constants-colors.less +1112 -1098
  66. package/lib/css/exports/_stacks-constants-helpers.less +139 -139
  67. package/lib/css/exports/_stacks-constants-type.less +152 -91
  68. package/lib/css/exports/_stacks-exports.less +15 -15
  69. package/lib/css/exports/_stacks-mixins.less +220 -220
  70. package/lib/css/stacks-dynamic.less +35 -36
  71. package/lib/css/stacks-static.less +86 -86
  72. package/lib/ts/controllers/index.ts +8 -0
  73. package/lib/ts/controllers/s-expandable-control.ts +189 -190
  74. package/lib/ts/controllers/s-modal.ts +321 -323
  75. package/lib/ts/controllers/s-navigation-tablist.ts +118 -119
  76. package/lib/ts/controllers/s-popover.ts +547 -549
  77. package/lib/ts/controllers/s-table.ts +220 -220
  78. package/lib/ts/controllers/s-tooltip.ts +246 -247
  79. package/lib/ts/controllers/s-uploader.ts +172 -174
  80. package/lib/ts/index.ts +20 -0
  81. package/lib/ts/stacks.ts +88 -83
  82. package/lib/tsconfig.json +13 -11
  83. package/package.json +87 -71
  84. package/dist/css/stacks-flexgrid-shim.min.css +0 -1
  85. package/lib/css/base/_stacks-configuration-dynamic.less +0 -106
  86. package/lib/ts/finalize.ts +0 -1
  87. package/lib/ts/stimulus.d.ts +0 -4
package/lib/css/atomic/_stacks-colors.less CHANGED
@@ -1,209 +1,209 @@
1
- //
2
- // STACK OVERFLOW
3
- // COLORS
4
- //
5
- // This CSS comes from Stacks, our CSS & Pattern library for rapidly building
6
- // Stack Overflow. For documentation of all these classes and how to contribute,
7
- // visit https://stackoverflow.design/
8
- //
9
- // ============================================================================
10
- // UTLITY OVERRIDES
11
- // Instead of re-adding colors to unique class names, use these atomic classes
12
- // for text and background colors
13
- // ============================================================================
14
-
15
- & {
16
- .color(@color-name) {
17
- .fc-@{color-name},
18
- .h\:fc-@{color-name}:hover,
19
- .f\:fc-@{color-name}:focus,
20
- .f\:fc-@{color-name}:focus-within {
21
- color: var(~"--@{color-name}") !important;
22
- }
23
- .d\:fc-@{color-name} {
24
- .dark-mode({
25
- color: var(~"--@{color-name}") !important;
26
- });
27
- }
28
-
29
- .bg-@{color-name},
30
- .h\:bg-@{color-name}:hover,
31
- .f\:bg-@{color-name}:focus,
32
- .f\:bg-@{color-name}:focus-within {
33
- background-color: var(~"--@{color-name}") !important;
34
- }
35
- .d\:bg-@{color-name} {
36
- .dark-mode({
37
- background-color: var(~"--@{color-name}") !important;
38
- });
39
- }
40
- }
41
-
42
- .standard-weights(@color) {
43
- .color(~"@{color}-900");
44
- .color(~"@{color}-800");
45
- .color(~"@{color}-700");
46
- .color(~"@{color}-600");
47
- .color(~"@{color}-500");
48
- .color(~"@{color}-400");
49
- .color(~"@{color}-300");
50
- .color(~"@{color}-200");
51
- .color(~"@{color}-100");
52
- .color(~"@{color}-050");
53
- }
54
-
55
- .standard-weights(black);
56
- .standard-weights(orange);
57
- .standard-weights(blue);
58
- .standard-weights(powder);
59
- .standard-weights(green);
60
- .standard-weights(yellow);
61
- .standard-weights(red);
62
- .standard-weights(theme-primary);
63
- .standard-weights(theme-secondary);
64
-
65
- // Additional color names
66
- .color(white);
67
- .color(black);
68
- .color(black-750);
69
- .color(black-350);
70
- .color(black-150);
71
- .color(black-075);
72
- .color(black-025);
73
- .color(green-025);
74
- .color(theme-primary-350);
75
- .color(theme-primary-150);
76
- .color(theme-primary-075);
77
- .color(theme-primary-025);
78
- .color(theme-secondary-350);
79
- .color(theme-secondary-150);
80
- .color(theme-secondary-075);
81
- .color(theme-secondary-025);
82
-
83
- .fc-success { &:extend(.fc-green-600); }
84
- .fc-warning { &:extend(.fc-yellow-600); }
85
- .fc-error,
86
- .fc-danger { &:extend(.fc-red-500); }
87
- .bg-success { &:extend(.bg-green-500); }
88
- .bg-warning { &:extend(.bg-yellow-600); }
89
- .bg-error,
90
- .bg-danger { &:extend(.bg-red-500); }
91
- }
92
-
93
- .fc-theme-primary {
94
- color: var(--theme-primary-color) !important;
95
- }
96
-
97
- .bg-theme-primary {
98
- background-color: var(--theme-primary-color) !important;
99
- }
100
-
101
- .bc-theme-primary {
102
- border-color: var(--theme-primary-color) !important;
103
- }
104
-
105
- .fc-theme-secondary {
106
- color: var(--theme-secondary-color) !important;
107
- }
108
-
109
- .bg-theme-secondary {
110
- background-color: var(--theme-secondary-color) !important;
111
- }
112
-
113
- .bc-theme-secondary {
114
- border-color: var(--theme-secondary-color) !important;
115
- }
116
-
117
- .fc-white__forced {
118
- color: @white !important;
119
- }
120
-
121
- .fc-black__forced {
122
- color: @black !important;
123
- }
124
-
125
- .fc-gold {
126
- color: var(--gold) !important;
127
- }
128
-
129
- .fc-gold-darker {
130
- color: var(--gold-darker) !important;
131
- }
132
-
133
- .fc-gold-lighter {
134
- color: var(--gold-lighter) !important;
135
- }
136
-
137
- .bg-gold {
138
- background-color: var(--gold) !important;
139
- }
140
-
141
- .bg-gold-darker {
142
- background-color: var(--gold-darker) !important;
143
- }
144
-
145
- .bg-gold-lighter {
146
- background-color: var(--gold-lighter) !important;
147
- }
148
-
149
- .fc-silver {
150
- color: var(--silver) !important;
151
- }
152
-
153
- .fc-silver-darker {
154
- color: var(--silver-darker) !important;
155
- }
156
-
157
- .fc-silver-lighter {
158
- color: var(--silver-lighter) !important;
159
- }
160
-
161
- .bg-silver {
162
- background-color: var(--silver) !important;
163
- }
164
-
165
- .bg-silver-darker {
166
- background-color: var(--silver-darker) !important;
167
- }
168
-
169
- .bg-silver-lighter {
170
- background-color: var(--silver-lighter) !important;
171
- }
172
-
173
- .fc-bronze {
174
- color: var(--bronze) !important;
175
- }
176
-
177
- .fc-bronze-darker {
178
- color: var(--bronze-darker) !important;
179
- }
180
-
181
- .fc-bronze-lighter {
182
- color: var(--bronze-lighter) !important;
183
- }
184
-
185
- .bg-bronze {
186
- background-color: var(--bronze) !important;
187
- }
188
-
189
- .bg-bronze-darker {
190
- background-color: var(--bronze-darker) !important;
191
- }
192
-
193
- .bg-bronze-lighter {
194
- background-color: var(--bronze-lighter) !important;
195
- }
196
-
197
- .bg-transparent,
198
- .h\:bg-transparent:hover {
199
- background-color: transparent !important;
200
- background-image: none !important;
201
- }
202
-
203
- .bg-inherit {
204
- background-color: inherit !important;
205
- }
206
-
207
- .fc-inherit {
208
- color: inherit !important;
209
- }
1
+ //
2
+ // STACK OVERFLOW
3
+ // COLORS
4
+ //
5
+ // This CSS comes from Stacks, our CSS & Pattern library for rapidly building
6
+ // Stack Overflow. For documentation of all these classes and how to contribute,
7
+ // visit https://stackoverflow.design/
8
+ //
9
+ // ============================================================================
10
+ // UTLITY OVERRIDES
11
+ // Instead of re-adding colors to unique class names, use these atomic classes
12
+ // for text and background colors
13
+ // ============================================================================
14
+
15
+ & {
16
+ .color(@color-name) {
17
+ .fc-@{color-name},
18
+ .h\:fc-@{color-name}:hover,
19
+ .f\:fc-@{color-name}:focus,
20
+ .f\:fc-@{color-name}:focus-within {
21
+ color: var(~"--@{color-name}") !important;
22
+ }
23
+ .d\:fc-@{color-name} {
24
+ .dark-mode({
25
+ color: var(~"--@{color-name}") !important;
26
+ });
27
+ }
28
+
29
+ .bg-@{color-name},
30
+ .h\:bg-@{color-name}:hover,
31
+ .f\:bg-@{color-name}:focus,
32
+ .f\:bg-@{color-name}:focus-within {
33
+ background-color: var(~"--@{color-name}") !important;
34
+ }
35
+ .d\:bg-@{color-name} {
36
+ .dark-mode({
37
+ background-color: var(~"--@{color-name}") !important;
38
+ });
39
+ }
40
+ }
41
+
42
+ .standard-weights(@color) {
43
+ .color(~"@{color}-900");
44
+ .color(~"@{color}-800");
45
+ .color(~"@{color}-700");
46
+ .color(~"@{color}-600");
47
+ .color(~"@{color}-500");
48
+ .color(~"@{color}-400");
49
+ .color(~"@{color}-300");
50
+ .color(~"@{color}-200");
51
+ .color(~"@{color}-100");
52
+ .color(~"@{color}-050");
53
+ }
54
+
55
+ .standard-weights(black);
56
+ .standard-weights(orange);
57
+ .standard-weights(blue);
58
+ .standard-weights(powder);
59
+ .standard-weights(green);
60
+ .standard-weights(yellow);
61
+ .standard-weights(red);
62
+ .standard-weights(theme-primary);
63
+ .standard-weights(theme-secondary);
64
+
65
+ // Additional color names
66
+ .color(white);
67
+ .color(black);
68
+ .color(black-750);
69
+ .color(black-350);
70
+ .color(black-150);
71
+ .color(black-075);
72
+ .color(black-025);
73
+ .color(green-025);
74
+ .color(theme-primary-350);
75
+ .color(theme-primary-150);
76
+ .color(theme-primary-075);
77
+ .color(theme-primary-025);
78
+ .color(theme-secondary-350);
79
+ .color(theme-secondary-150);
80
+ .color(theme-secondary-075);
81
+ .color(theme-secondary-025);
82
+
83
+ .fc-success { &:extend(.fc-green-600); }
84
+ .fc-warning { &:extend(.fc-yellow-600); }
85
+ .fc-error,
86
+ .fc-danger { &:extend(.fc-red-500); }
87
+ .bg-success { &:extend(.bg-green-500); }
88
+ .bg-warning { &:extend(.bg-yellow-600); }
89
+ .bg-error,
90
+ .bg-danger { &:extend(.bg-red-500); }
91
+ }
92
+
93
+ .fc-theme-primary {
94
+ color: var(--theme-primary-color) !important;
95
+ }
96
+
97
+ .bg-theme-primary {
98
+ background-color: var(--theme-primary-color) !important;
99
+ }
100
+
101
+ .bc-theme-primary {
102
+ border-color: var(--theme-primary-color) !important;
103
+ }
104
+
105
+ .fc-theme-secondary {
106
+ color: var(--theme-secondary-color) !important;
107
+ }
108
+
109
+ .bg-theme-secondary {
110
+ background-color: var(--theme-secondary-color) !important;
111
+ }
112
+
113
+ .bc-theme-secondary {
114
+ border-color: var(--theme-secondary-color) !important;
115
+ }
116
+
117
+ .fc-white__forced {
118
+ color: @white !important;
119
+ }
120
+
121
+ .fc-black__forced {
122
+ color: @black !important;
123
+ }
124
+
125
+ .fc-gold {
126
+ color: var(--gold) !important;
127
+ }
128
+
129
+ .fc-gold-darker {
130
+ color: var(--gold-darker) !important;
131
+ }
132
+
133
+ .fc-gold-lighter {
134
+ color: var(--gold-lighter) !important;
135
+ }
136
+
137
+ .bg-gold {
138
+ background-color: var(--gold) !important;
139
+ }
140
+
141
+ .bg-gold-darker {
142
+ background-color: var(--gold-darker) !important;
143
+ }
144
+
145
+ .bg-gold-lighter {
146
+ background-color: var(--gold-lighter) !important;
147
+ }
148
+
149
+ .fc-silver {
150
+ color: var(--silver) !important;
151
+ }
152
+
153
+ .fc-silver-darker {
154
+ color: var(--silver-darker) !important;
155
+ }
156
+
157
+ .fc-silver-lighter {
158
+ color: var(--silver-lighter) !important;
159
+ }
160
+
161
+ .bg-silver {
162
+ background-color: var(--silver) !important;
163
+ }
164
+
165
+ .bg-silver-darker {
166
+ background-color: var(--silver-darker) !important;
167
+ }
168
+
169
+ .bg-silver-lighter {
170
+ background-color: var(--silver-lighter) !important;
171
+ }
172
+
173
+ .fc-bronze {
174
+ color: var(--bronze) !important;
175
+ }
176
+
177
+ .fc-bronze-darker {
178
+ color: var(--bronze-darker) !important;
179
+ }
180
+
181
+ .fc-bronze-lighter {
182
+ color: var(--bronze-lighter) !important;
183
+ }
184
+
185
+ .bg-bronze {
186
+ background-color: var(--bronze) !important;
187
+ }
188
+
189
+ .bg-bronze-darker {
190
+ background-color: var(--bronze-darker) !important;
191
+ }
192
+
193
+ .bg-bronze-lighter {
194
+ background-color: var(--bronze-lighter) !important;
195
+ }
196
+
197
+ .bg-transparent,
198
+ .h\:bg-transparent:hover {
199
+ background-color: transparent !important;
200
+ background-image: none !important;
201
+ }
202
+
203
+ .bg-inherit {
204
+ background-color: inherit !important;
205
+ }
206
+
207
+ .fc-inherit {
208
+ color: inherit !important;
209
+ }