@stackoverflow/stacks 1.0.0 → 1.0.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 (71) hide show
  1. package/README.md +47 -47
  2. package/dist/css/stacks.css +108 -0
  3. package/dist/css/stacks.min.css +1 -1
  4. package/lib/css/atomic/borders.less +378 -378
  5. package/lib/css/atomic/colors.less +209 -209
  6. package/lib/css/atomic/flex.less +375 -375
  7. package/lib/css/atomic/grid.less +174 -174
  8. package/lib/css/atomic/misc.less +343 -343
  9. package/lib/css/atomic/spacing.less +332 -314
  10. package/lib/css/atomic/typography.less +273 -273
  11. package/lib/css/atomic/width-height.less +194 -194
  12. package/lib/css/base/body.less +44 -44
  13. package/lib/css/base/configuration-static.less +61 -61
  14. package/lib/css/base/icons.less +20 -20
  15. package/lib/css/base/internals.less +220 -220
  16. package/lib/css/base/reset-meyer.less +64 -64
  17. package/lib/css/base/reset-normalize.less +449 -449
  18. package/lib/css/base/reset.less +20 -20
  19. package/lib/css/components/activity-indicator.less +45 -45
  20. package/lib/css/components/avatars.less +189 -189
  21. package/lib/css/components/badges.less +209 -209
  22. package/lib/css/components/banners.less +80 -80
  23. package/lib/css/components/blank-states.less +26 -26
  24. package/lib/css/components/breadcrumbs.less +44 -44
  25. package/lib/css/components/button-groups.less +104 -104
  26. package/lib/css/components/buttons.less +665 -665
  27. package/lib/css/components/cards.less +44 -44
  28. package/lib/css/components/code-blocks.less +130 -130
  29. package/lib/css/components/collapsible.less +104 -104
  30. package/lib/css/components/inputs.less +728 -728
  31. package/lib/css/components/link-previews.less +136 -136
  32. package/lib/css/components/links.less +218 -218
  33. package/lib/css/components/menu.less +47 -47
  34. package/lib/css/components/modals.less +133 -133
  35. package/lib/css/components/navigation.less +146 -146
  36. package/lib/css/components/notices.less +233 -233
  37. package/lib/css/components/page-titles.less +60 -60
  38. package/lib/css/components/pagination.less +55 -55
  39. package/lib/css/components/popovers.less +197 -197
  40. package/lib/css/components/post-summary.less +425 -425
  41. package/lib/css/components/progress-bars.less +330 -330
  42. package/lib/css/components/prose.less +503 -503
  43. package/lib/css/components/spinner.less +107 -107
  44. package/lib/css/components/tables.less +341 -341
  45. package/lib/css/components/tags.less +236 -236
  46. package/lib/css/components/toggle-switches.less +144 -144
  47. package/lib/css/components/topbar.less +427 -427
  48. package/lib/css/components/uploader.less +210 -210
  49. package/lib/css/components/user-cards.less +169 -169
  50. package/lib/css/components/widget-dynamic.less +33 -33
  51. package/lib/css/components/widget-static.less +273 -273
  52. package/lib/css/exports/constants-colors.less +1092 -1092
  53. package/lib/css/exports/constants-helpers.less +108 -108
  54. package/lib/css/exports/constants-type.less +153 -153
  55. package/lib/css/exports/exports.less +15 -15
  56. package/lib/css/exports/mixins.less +237 -237
  57. package/lib/css/stacks-dynamic.less +35 -35
  58. package/lib/css/stacks-static.less +86 -86
  59. package/lib/css/stacks.less +13 -13
  60. package/lib/ts/controllers/index.ts +7 -7
  61. package/lib/ts/controllers/s-expandable-control.ts +188 -188
  62. package/lib/ts/controllers/s-modal.ts +321 -321
  63. package/lib/ts/controllers/s-navigation-tablist.ts +117 -117
  64. package/lib/ts/controllers/s-popover.ts +547 -547
  65. package/lib/ts/controllers/s-table.ts +220 -220
  66. package/lib/ts/controllers/s-tooltip.ts +246 -246
  67. package/lib/ts/controllers/s-uploader.ts +172 -172
  68. package/lib/ts/index.ts +20 -20
  69. package/lib/ts/stacks.ts +88 -88
  70. package/lib/tsconfig.json +13 -13
  71. package/package.json +87 -87
package/lib/css/atomic/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
+ }