@stackoverflow/stacks 1.6.7 → 1.7.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 (33) hide show
  1. package/README.md +39 -0
  2. package/dist/controllers/index.d.ts +2 -0
  3. package/dist/controllers/s-banner.d.ts +41 -0
  4. package/dist/controllers/s-toast.d.ts +97 -0
  5. package/dist/css/stacks.css +18930 -18921
  6. package/dist/css/stacks.min.css +1 -1
  7. package/dist/js/stacks.js +5252 -5260
  8. package/dist/js/stacks.min.js +1 -1
  9. package/dist/stacks.d.ts +1 -1
  10. package/lib/css/components/anchors.less +61 -0
  11. package/lib/css/components/block-link.less +80 -0
  12. package/lib/css/components/buttons.less +12 -0
  13. package/lib/css/components/inputs.less +4 -0
  14. package/lib/css/components/link.less +112 -0
  15. package/lib/css/components/post-summary.less +330 -355
  16. package/lib/css/components/table.less +297 -0
  17. package/lib/css/stacks-dynamic.less +0 -8
  18. package/lib/css/stacks-static.less +9 -1
  19. package/lib/test/s-avatar.test.ts +74 -0
  20. package/lib/test/s-banner.test.ts +73 -0
  21. package/lib/test/s-banner.visual.test.ts +61 -0
  22. package/lib/test/s-button.visual.test.ts +12 -0
  23. package/lib/test/s-toast.test.ts +63 -0
  24. package/lib/test/s-toast.visual.test.ts +48 -0
  25. package/lib/ts/controllers/index.ts +2 -0
  26. package/lib/ts/controllers/s-banner.ts +149 -0
  27. package/lib/ts/controllers/s-toast.ts +357 -0
  28. package/lib/ts/index.ts +4 -0
  29. package/lib/ts/stacks.ts +1 -1
  30. package/lib/tsconfig.json +2 -2
  31. package/package.json +15 -15
  32. package/lib/css/components/links.less +0 -214
  33. package/lib/css/components/tables.less +0 -313
package/lib/css/components/post-summary.less CHANGED
@@ -1,436 +1,411 @@
1
1
  .s-post-summary {
2
- position: relative;
3
- display: flex;
4
- border-bottom: 1px solid var(--bc-light);
5
- padding: var(--su16);
6
-
7
- &:last-child {
8
- border-bottom-width: 0;
9
- }
10
-
2
+ // --_ps-state-* are custom properties to broadly override colors for a given post summary state
3
+ --_ps-bb: var(--su1) solid var(--bc-light);
4
+ --_ps-bg: unset;
5
+ // Child components
6
+ --_ps-content-excerpt-fc: var(--_ps-state-fc, var(--fc-medium));
7
+ --_ps-content-title-a-fc: var(--_ps-state-fc, var(--theme-post-title-color));
8
+ --_ps-content-title-a-fc-hover: var(--_ps-state-fc, var(--theme-post-title-color-hover));
9
+ --_ps-content-title-a-fc-visited: var(--_ps-state-fc, var(--theme-post-title-color-visited));
10
+ --_ps-stats-ai: flex-end;
11
+ --_ps-stats-fc: var(--_ps-state-fc, var(--fc-light));
12
+ --_ps-stats-fd: column;
13
+ --_ps-stats-w: calc(var(--su96) + var(--su12));
14
+ // Stats item modifiers
15
+ --_ps-has-answers-bc: var(--green-700);
16
+ --_ps-has-answers-bg: unset;
17
+ --_ps-has-answers-fc: var(--green-700);
18
+ --_ps-has-accepted-answers-bc: var(--green-700);
19
+ --_ps-has-accepted-answers-bg: var(--green-700);
20
+ --_ps-has-accepted-answers-fc: var(--white);
21
+ --_ps-stats-item-emphasized-fc: var(--_ps-state-fc, var(--fc-dark));
22
+
23
+ // CONTEXTUAL STYLES
11
24
  #stacks-internals #screen-md({
12
- flex-direction: column;
13
- });
25
+ --_ps-stats-ai: center;
26
+ --_ps-stats-fd: row;
27
+ --_ps-stats-w: auto;
14
28
 
15
- &.s-post-summary__minimal {
16
29
  flex-direction: column;
30
+ });
17
31
 
18
- .s-post-summary--stats {
19
- width: auto;
20
- flex-direction: row;
21
- align-items: center;
22
- }
32
+ // MODIFIERS
33
+ &&__minimal,
34
+ & &--answer {
35
+ --_ps-stats-ai: center;
36
+ --_ps-stats-fd: row;
37
+ --_ps-stats-w: auto;
38
+ }
23
39
 
40
+ &&__minimal {
24
41
  .s-post-summary--content {
25
42
  width: 100%;
26
43
  }
27
- }
28
- }
29
44
 
30
- // [1] To override .s-btn class attributes
31
- .s-post-summary--content-menu-button {
32
- position: absolute !important; // [1]
33
- top: var(--su8);
34
- right: var(--su8);
35
- padding: var(--su8) !important; // [1]
36
-
37
- .svg-icon {
38
- margin: 0 !important;
45
+ flex-direction: column;
39
46
  }
40
- }
41
-
42
- .s-post-summary--stats {
43
- gap: var(--su6);
44
- margin-right: var(--su16);
45
- margin-bottom: var(--su4);
46
- width: calc(var(--su96) + var(--su12));
47
- display: flex;
48
- flex-direction: column;
49
- flex-shrink: 0;
50
- flex-wrap: wrap;
51
- align-items: flex-end;
52
- font-size: var(--fs-body1);
53
- color: var(--fc-light);
54
-
55
- .s-post-summary--stats-item {
56
- &:not(.s-badge) {
57
- display: inline-flex;
58
- gap: 0.3em;
59
- align-items: center;
60
- justify-content: center;
61
- white-space: nowrap;
62
- border: 1px solid transparent;
63
- }
64
47
 
65
- &.s-post-summary--stats-item__emphasized {
66
- color: var(--fc-dark);
67
- }
68
-
69
- .s-post-summary--stats-item-number {
70
- font-weight: 500;
48
+ // VARIANTS
49
+ &&__deleted,
50
+ &&__ignored {
51
+ --_ps-has-answers-bc: var(--black-300);
52
+ --_ps-has-answers-bg: transparent;
53
+ --_ps-has-answers-fc: var(--black-500);
54
+ --_ps-has-accepted-answers-bc: transparent;
55
+ --_ps-has-accepted-answers-bg: var(--black-075);
56
+ --_ps-has-accepted-answers-fc: var(--black-600);
57
+ --_ps-meta-tags-tag-bg: var(--black-050);
58
+ --_ps-state-fc: var(--black-500);
59
+
60
+ .s-post-summary--meta-tags {
61
+ a, // TODO: remove rule for `a` once Core replaces `.post-tag` with `.s-tag`
62
+ .post-tag,
63
+ .s-tag {
64
+ &,
65
+ &:active,
66
+ &:hover,
67
+ &:focus {
68
+ background-color: var(--_ps-meta-tags-tag-bg);
69
+ border-color: transparent;
70
+ color: var(--black-600);
71
+ }
72
+ }
71
73
  }
72
74
 
73
- &.s-badge {
74
- font-size: var(--fs-body1);
75
- line-height: var(--lh-md);
76
- padding: var(--su2) var(--su4);
77
- }
75
+ .s-user-card {
76
+ a,
77
+ .s-user-card--link,
78
+ .s-user-card--rep,
79
+ .s-user-card--time {
80
+ color: var(--_ps-state-fc);
81
+ }
78
82
 
79
- &.has-answers,
80
- // TODO DEPRECATED: Remove .has-bounty styling
81
- &.has-bounty,
82
- &.is-deleted,
83
- &.is-published,
84
- &.is-draft,
85
- &.is-review,
86
- &.is-closed,
87
- &.is-archived,
88
- &.is-pinned {
89
- border-radius: var(--br-sm);
90
- padding: var(--su2) var(--su4);
83
+ .s-badge {
84
+ filter: grayscale(100%);
85
+ }
91
86
  }
87
+ }
88
+ &&__deleted,
89
+ &&__watched {
90
+ background-color: var(--_ps-bg);
91
+ }
92
92
 
93
- &.has-answers {
94
- color: var(--green-700);
95
- border: 1px solid var(--green-700);
93
+ &&__deleted {
94
+ --_ps-bg: var(--red-025);
95
+ --_ps-meta-tags-tag-bg: var(--black-075);
96
96
 
97
- &.has-accepted-answer {
97
+ .is-deleted,
98
+ .s-badge__danger.s-badge__filled {
99
+ .dark-mode({
100
+ background-color: var(--red-800);
98
101
  color: var(--white);
99
- background-color: var(--green-700);
100
- border-color: var(--green-700);
101
- }
102
- }
103
-
104
- // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__bounty`
105
- &.has-bounty {
106
- color: var(--white);
107
- background-color: var(--blue-600);
108
- }
102
+ });
109
103
 
110
- &.is-warm {
111
- color: var(--yellow-900);
104
+ background-color: var(--red-600);
112
105
  }
106
+ }
113
107
 
114
- &.is-hot {
115
- color: var(--orange-800);
116
- }
108
+ &&__watched {
109
+ &:not(.s-post-summary__deleted):not(.s-post-summary__ignored) {
110
+ --_ps-bg: var(--yellow-050);
111
+ --_ps-stats-fc: var(--black-500);
112
+ --_ps-content-title-a-fc: var(--theme-post-title-color);
113
+ --_ps-content-title-a-fc-hover: var(--theme-post-title-color-hover);
114
+ --_ps-content-title-a-fc-visited: var(--theme-post-title-color-visited);
115
+
116
+ .s-user-card {
117
+ a {
118
+ &:active,
119
+ &:hover {
120
+ color: var(--_ps-content-title-a-fc-hover);
121
+ }
122
+
123
+ &:visited {
124
+ color: var(--_ps-content-title-a-fc-visited);
125
+ }
126
+
127
+ color: var(--_ps-content-title-a-fc);
128
+ }
117
129
 
118
- &.is-supernova {
119
- color: var(--red-800);
130
+ .s-user-card--rep,
131
+ .s-user-card--time {
132
+ color: var(--black-600);
133
+ }
134
+ }
120
135
  }
136
+ }
121
137
 
122
- &.is-published {
123
- color: var(--black-800);
124
- background-color: var(--black-050);
125
- }
126
- // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__info s-badge__icon`
127
- &.is-draft {
128
- color: var(--blue-900);
129
- background-color: var(--blue-100);
130
- border-color: var(--blue-600);
131
- }
132
- // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__warning s-badge__icon`
133
- &.is-review {
134
- color: var(--yellow-900);
135
- background-color: var(--yellow-100);
136
- border-color: var(--yellow-600);
137
- }
138
- // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__danger s-badge__icon`
139
- &.is-closed {
140
- color: var(--red-900);
141
- background-color: var(--red-100);
142
- border-color: var(--red-600);
143
- }
144
- // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__muted s-badge__icon`
145
- &.is-archived {
146
- color: var(--black-900);
147
- background-color: var(--black-100);
148
- border-color: var(--black-600);
149
- }
150
- // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__muted s-badge__filled s-badge__icon`
151
- &.is-pinned {
152
- color: var(--white);
153
- background-color: var(--black-700);
154
- }
138
+ &:last-child {
139
+ --_ps-bb: none;
155
140
  }
156
141
 
157
- #stacks-internals #screen-md({
158
- flex-direction: row;
159
- align-items: center;
160
- width: auto;
161
- });
162
- }
142
+ // Child Elements
143
+ & & {
144
+ &--answer {
145
+ & + & {
146
+ margin-top: var(--su16);
147
+ }
163
148
 
164
- .s-post-summary--content {
165
- flex-grow: 1;
166
- max-width: 100%;
167
-
168
- .s-post-summary--content-title {
169
- display: block;
170
- font-size: var(--fs-body3);
171
- margin-top: -0.15rem; // Optical alignment to compensate for title's containing block
172
- margin-bottom: 0.3846rem;
173
- padding-right: var(--su24);
174
- line-height: var(--lh-md);
175
- font-weight: normal;
176
- .break-word;
177
-
178
- .iconShield {
179
- color: var(--fc-light);
180
- }
149
+ &:before {
150
+ .highcontrast-mode({
151
+ background: var(--black-600);
152
+ });
153
+
154
+ background: var(--black-150);
155
+ border-radius: var(--su8);
156
+ bottom: 0;
157
+ content: "";
158
+ display: block;
159
+ left: 0;
160
+ position: absolute;
161
+ top: 0;
162
+ width: var(--su4);
163
+ }
181
164
 
182
- .svg-icon {
183
- vertical-align: text-bottom; // Optical alignment
165
+ margin: var(--su16) 1em 0 1em;
166
+ padding: 0.5em 0 0.5em calc(1em + var(--su4));
184
167
  position: relative;
185
- top: -1px;
186
168
  }
187
169
 
188
- a {
189
- .break-word;
190
-
191
- color: var(--theme-post-title-color);
192
- font-family: var(--theme-post-title-font-family);
193
-
194
- &:visited {
195
- color: var(--theme-post-title-color-visited);
196
- }
170
+ &--answer-excerpt {
171
+ .v-truncate4;
172
+ color: var(--black-600);
173
+ margin-bottom: var(--su8);
174
+ }
197
175
 
198
- &:hover,
199
- &:active {
200
- color: var(--theme-post-title-color-hover);
201
- }
176
+ &--content {
177
+ flex-grow: 1;
178
+ max-width: 100%;
202
179
  }
203
- }
204
180
 
205
- .s-post-summary--content-type {
206
- color: var(--fc-medium);
207
- margin-bottom: var(--su4);
181
+ &--content-excerpt {
182
+ &.s-post-summary--content-excerpt {
183
+ &__sm {
184
+ .v-truncate1;
185
+ }
208
186
 
209
- .svg-icon {
210
- margin-left: calc(var(--su2) * -1);
211
- color: var(--fc-light);
212
- }
213
- }
187
+ &__md {
188
+ .v-truncate3;
189
+ }
214
190
 
215
- .s-post-summary--content-excerpt {
216
- margin-top: calc(var(--su2) * -1);
217
- margin-bottom: var(--su8);
218
- font-family: var(--theme-post-body-font-family);
219
- color: var(--fc-medium);
220
- .v-truncate2;
221
- .break-word;
191
+ &__lg {
192
+ .v-truncate4;
193
+ }
194
+ }
222
195
 
223
- &.s-post-summary--content-excerpt__sm {
224
- .v-truncate1;
196
+ .break-word;
197
+ .v-truncate2;
198
+ color: var( --_ps-content-excerpt-fc);
199
+ font-family: var(--theme-post-body-font-family);
200
+ margin-top: calc(var(--su2) * -1);
201
+ margin-bottom: var(--su8);
225
202
  }
226
203
 
227
- &.s-post-summary--content-excerpt__md {
228
- .v-truncate3;
229
- }
204
+ &--content-menu-button {
205
+ .svg-icon {
206
+ margin: 0 !important;
207
+ }
230
208
 
231
- &.s-post-summary--content-excerpt__lg {
232
- .v-truncate4;
209
+ padding: var(--su8) !important; // To override .s-btn class attributes
210
+ position: absolute !important; // To override .s-btn class attributes
211
+ right: var(--su8);
212
+ top: var(--su8);
233
213
  }
234
- }
235
- }
236
214
 
237
- .s-post-summary--meta {
238
- display: flex;
239
- align-items: center;
240
- justify-content: space-between;
241
- flex-wrap: wrap;
242
- column-gap: var(--su6);
243
- row-gap: var(--su8);
244
-
245
- .s-post-summary--meta-tags {
246
- display: flex;
247
- flex-wrap: wrap;
248
- gap: var(--su4);
249
- }
215
+ &--content-title {
216
+ a {
217
+ &:visited {
218
+ color: var(--_ps-content-title-a-fc-visited);
219
+ }
220
+ &:active,
221
+ &:hover {
222
+ color: var(--_ps-content-title-a-fc-hover);
223
+ }
250
224
 
251
- .s-user-card {
252
- flex-wrap: wrap;
253
- margin-left: auto;
254
- justify-content: flex-end;
255
- }
256
- }
225
+ .break-word;
226
+ color: var(--_ps-content-title-a-fc);
227
+ font-family: var(--theme-post-title-font-family);
228
+ }
257
229
 
258
- .s-post-summary--answer {
259
- position: relative;
260
- margin: var(--su16) 1em 0 1em;
261
- padding: 0.5em 0 0.5em calc(1em + var(--su4));
230
+ .iconShield {
231
+ color: var(--fc-light);
232
+ }
262
233
 
263
- + .s-post-summary--answer {
264
- margin-top: var(--su16);
265
- }
234
+ .svg-icon {
235
+ position: relative;
236
+ top: calc(var(--su1) * -1);
237
+ vertical-align: text-bottom; // Optical alignment
238
+ }
266
239
 
267
- &:before {
268
- content: "";
269
- display: block;
270
- position: absolute;
271
- top: 0;
272
- bottom: 0;
273
- left: 0;
274
- width: var(--su4);
275
- border-radius: var(--su8);
276
- background: var(--black-150);
277
-
278
- .highcontrast-mode({
279
- background: var(--black-600);
280
- });
281
- }
240
+ .break-word;
241
+ display: block;
242
+ font-size: var(--fs-body3);
243
+ font-weight: normal;
244
+ line-height: var(--lh-md);
245
+ margin-bottom: 0.3846rem;
246
+ margin-top: -0.15rem; // Optical alignment to compensate for title's containing block
247
+ padding-right: var(--su24);
248
+ }
282
249
 
283
- .s-post-summary--stats {
284
- width: auto;
285
- flex-direction: row;
286
- align-items: center;
287
- margin-bottom: var(--su4);
288
- }
250
+ &--content-type {
251
+ .svg-icon {
252
+ color: var(--fc-light);
253
+ margin-left: calc(var(--su2) * -1);
254
+ }
289
255
 
290
- .s-post-summary--answer-excerpt {
291
- color: var(--black-600);
292
- margin-bottom: var(--su8);
293
- .v-truncate4;
294
- }
295
- }
256
+ color: var(--fc-medium);
257
+ margin-bottom: var(--su4);
258
+ }
296
259
 
297
- .s-post-summary__watched {
298
- background-color: var(--yellow-050);
260
+ &--meta {
261
+ .s-user-card {
262
+ flex-wrap: wrap;
263
+ justify-content: flex-end;
264
+ margin-left: auto;
265
+ }
299
266
 
300
- .s-post-summary--stats {
301
- color: var(--black-500);
302
- }
267
+ align-items: center;
268
+ column-gap: var(--su6);
269
+ display: flex;
270
+ flex-wrap: wrap;
271
+ justify-content: space-between;
272
+ row-gap: var(--su8);
273
+ }
303
274
 
304
- .s-user-card {
305
- .s-user-card--rep,
306
- .s-user-card--time {
307
- color: var(--black-600);
275
+ &--meta-tags {
276
+ display: flex;
277
+ flex-wrap: wrap;
278
+ gap: var(--su4);
308
279
  }
309
- }
310
- }
311
280
 
312
- .s-post-summary__deleted {
313
- background-color: var(--red-025);
281
+ &--stats {
282
+ align-items: var(--_ps-stats-ai);
283
+ color: var(--_ps-stats-fc);
284
+ flex-direction: var(--_ps-stats-fd);
285
+ width: var(--_ps-stats-w);
314
286
 
315
- .s-badge__filled {
316
- color: var(--white);
287
+ display: flex;
288
+ flex-shrink: 0;
289
+ flex-wrap: wrap;
290
+ font-size: var(--fs-body1);
291
+ gap: var(--su6);
292
+ margin-bottom: var(--su4);
293
+ margin-right: var(--su16);
294
+ }
317
295
 
318
- .dark-mode({
319
- background-color: var(--red-800)
320
- });
321
- }
296
+ &--stats-item {
297
+ &:not(.s-badge) {
298
+ &.is-deleted {
299
+ color: var(--white);
300
+ }
322
301
 
323
- .is-deleted {
324
- color: var(--white);
325
- background-color: var(--red-600);
326
- }
302
+ align-items: center;
303
+ border: var(--su1) solid transparent;
304
+ display: inline-flex;
305
+ gap: 0.3em;
306
+ justify-content: center;
307
+ white-space: nowrap;
308
+ }
327
309
 
328
- .s-post-summary--meta-tags {
329
- // TODO: remove rule for `a`, `.post-tag` once Core replaces `.post-tag` with `.s-tag`
330
- a,
331
- .post-tag,
332
- .s-tag {
333
- &,
334
- &:hover,
335
- &:active,
336
- &:focus {
337
- background-color: var(--black-075);
310
+ &.s-badge {
311
+ font-size: var(--fs-body1);
312
+ line-height: var(--lh-md);
313
+ padding: var(--su2) var(--su4);
338
314
  }
339
- }
340
- }
341
- }
342
315
 
343
- .s-post-summary__ignored {
344
- .s-post-summary--meta-tags {
345
- // TODO: remove rule for `a`, `.post-tag` once Core replaces `.post-tag` with `.s-tag`
346
- a,
347
- .post-tag,
348
- .s-tag {
349
- &,
350
- &:hover,
351
- &:active,
352
- &:focus {
353
- background-color: var(--black-050);
316
+ &.has-answers,
317
+ &.has-bounty, // TODO DEPRECATED: Remove .has-bounty styling
318
+ &.is-archived,
319
+ &.is-closed,
320
+ &.is-deleted,
321
+ &.is-draft,
322
+ &.is-pinned,
323
+ &.is-published,
324
+ &.is-review {
325
+ border-radius: var(--br-sm);
326
+ padding: var(--su2) var(--su4);
354
327
  }
355
- }
356
- }
357
- }
358
328
 
359
- .s-post-summary__ignored,
360
- .s-post-summary__deleted {
329
+ &.has-answers {
330
+ &.has-accepted-answer {
331
+ background-color: var(--_ps-has-accepted-answers-bg);
332
+ border-color: var(--_ps-has-accepted-answers-bc);
333
+ color: var(--_ps-has-accepted-answers-fc);
334
+ }
361
335
 
362
- .s-post-summary--content-title > a {
363
- color: var(--black-500);
336
+ background-color: var(--_ps-has-answers-bg);
337
+ border: var(--su1) solid var(--_ps-has-answers-bc);
338
+ color: var(--_ps-has-answers-fc);
339
+ }
364
340
 
365
- &:hover,
366
- &:active,
367
- &:visited {
368
- color: var(--black-500);
369
- }
370
- }
341
+ &.has-bounty { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__bounty`
342
+ background-color: var(--blue-600);
343
+ color: var(--white);
344
+ }
371
345
 
372
- .s-post-summary--content-excerpt {
373
- color: var(--black-500);
374
- }
346
+ // Hotness
347
+ &.is-warm {
348
+ color: var(--_ps-state-fc, var(--yellow-900));
349
+ }
375
350
 
376
- .s-post-summary--meta > *:not(.s-post-summary--meta-tags) {
377
- color: var(--black-600);
378
- }
351
+ &.is-hot {
352
+ color: var(--_ps-state-fc, var(--orange-800));
353
+ }
379
354
 
380
- .s-post-summary--meta-tags {
381
- // TODO: remove rule for `a`, `.post-tag` once Core replaces `.post-tag` with `.s-tag`
382
- a,
383
- .post-tag,
384
- .s-tag {
385
- &,
386
- &:hover,
387
- &:active,
388
- &:focus {
389
- border-color: transparent;
390
- color: var(--black-600);
355
+ &.is-supernova {
356
+ color: var(--_ps-state-fc, var(--red-800));
391
357
  }
392
- }
393
- }
394
358
 
395
- .s-post-summary--stats {
396
- color: var(--black-500);
359
+ // Status
360
+ &.is-archived { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__muted s-badge__icon`
361
+ background-color: var(--black-100);
362
+ border-color: var(--black-600);
363
+ color: var(--black-900);
364
+ }
397
365
 
398
- .s-post-summary--stats-item {
366
+ &.is-closed { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__danger s-badge__icon`
367
+ background-color: var(--red-100);
368
+ border-color: var(--red-600);
369
+ color: var(--red-900);
370
+ }
399
371
 
400
- &.is-warm,
401
- &.is-hot,
402
- &.is-supernova {
403
- color: var(--black-500);
372
+ &.is-draft { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__info s-badge__icon`
373
+ background-color: var(--blue-100);
374
+ border-color: var(--blue-600);
375
+ color: var(--blue-900);
404
376
  }
405
377
 
406
- &.has-answers {
407
- color: var(--black-500);
408
- background-color: transparent;
409
- border-color: var(--black-300);
378
+ &.is-pinned { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__muted s-badge__filled s-badge__icon`
379
+ background-color: var(--black-700);
380
+ color: var(--white);
381
+ }
410
382
 
411
- &.has-accepted-answer {
412
- color: var(--black-600);
413
- background-color: var(--black-075);
414
- border-color: transparent;
415
- }
383
+ &.is-published {
384
+ background-color: var(--black-050);
385
+ color: var(--black-800);
416
386
  }
417
- }
418
387
 
419
- .s-post-summary--stats-item__emphasized {
420
- color: var(--black-500);
421
- }
422
- }
388
+ &.is-review { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__warning s-badge__icon`
389
+ background-color: var(--yellow-100);
390
+ border-color: var(--yellow-600);
391
+ color: var(--yellow-900);
392
+ }
423
393
 
424
- .s-user-card {
425
- .s-badge {
426
- filter: grayscale(100%);
394
+ &__emphasized {
395
+ color: var(--_ps-stats-item-emphasized-fc);
396
+ }
427
397
  }
428
398
 
429
- a,
430
- .s-user-card--link,
431
- .s-user-card--rep,
432
- .s-user-card--time {
433
- color: var(--black-500);
399
+ &--stats-item-number {
400
+ font-weight: 500;
434
401
  }
402
+
435
403
  }
436
- }
404
+
405
+ background-color: var(--_ps-bg);
406
+ border-bottom: var(--_ps-bb);
407
+
408
+ display: flex;
409
+ padding: var(--su16);
410
+ position: relative;
411
+ }