@stackoverflow/stacks 1.6.6 → 1.7.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 (35) hide show
  1. package/README.md +86 -2
  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 +18884 -18912
  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 +20 -4
  13. package/lib/css/components/expandable.less +1 -1
  14. package/lib/css/components/inputs.less +4 -0
  15. package/lib/css/components/link.less +104 -0
  16. package/lib/css/components/post-summary.less +327 -356
  17. package/lib/css/components/table.less +297 -0
  18. package/lib/css/stacks-dynamic.less +0 -8
  19. package/lib/css/stacks-static.less +9 -1
  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/test/s-tooltip.test.ts +62 -0
  26. package/lib/test/s-tooltip.visual.test.ts +31 -0
  27. package/lib/ts/controllers/index.ts +2 -0
  28. package/lib/ts/controllers/s-banner.ts +149 -0
  29. package/lib/ts/controllers/s-toast.ts +357 -0
  30. package/lib/ts/index.ts +4 -0
  31. package/lib/ts/stacks.ts +1 -1
  32. package/lib/tsconfig.json +2 -2
  33. package/package.json +35 -19
  34. package/lib/css/components/links.less +0 -214
  35. package/lib/css/components/tables.less +0 -313
package/lib/css/components/post-summary.less CHANGED
@@ -1,436 +1,407 @@
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
-
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
- }
250
214
 
251
- .s-user-card {
252
- flex-wrap: wrap;
253
- margin-left: auto;
254
- justify-content: flex-end;
255
- }
256
- }
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
+ }
257
224
 
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));
225
+ .break-word;
226
+ color: var(--_ps-content-title-a-fc);
227
+ font-family: var(--theme-post-title-font-family);
228
+ }
262
229
 
263
- + .s-post-summary--answer {
264
- margin-top: var(--su16);
265
- }
230
+ .iconShield {
231
+ color: var(--fc-light);
232
+ }
266
233
 
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
- }
234
+ .svg-icon {
235
+ position: relative;
236
+ top: calc(var(--su1) * -1);
237
+ vertical-align: text-bottom; // Optical alignment
238
+ }
282
239
 
283
- .s-post-summary--stats {
284
- width: auto;
285
- flex-direction: row;
286
- align-items: center;
287
- margin-bottom: var(--su4);
288
- }
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
+ }
289
249
 
290
- .s-post-summary--answer-excerpt {
291
- color: var(--black-600);
292
- margin-bottom: var(--su8);
293
- .v-truncate4;
294
- }
295
- }
250
+ &--content-type {
251
+ .svg-icon {
252
+ color: var(--fc-light);
253
+ margin-left: calc(var(--su2) * -1);
254
+ }
296
255
 
297
- .s-post-summary__watched {
298
- background-color: var(--yellow-050);
256
+ color: var(--fc-medium);
257
+ margin-bottom: var(--su4);
258
+ }
299
259
 
300
- .s-post-summary--stats {
301
- color: var(--black-500);
302
- }
260
+ &--meta {
261
+ .s-user-card {
262
+ flex-wrap: wrap;
263
+ justify-content: flex-end;
264
+ margin-left: auto;
265
+ }
303
266
 
304
- .s-user-card {
305
- .s-user-card--rep,
306
- .s-user-card--time {
307
- color: var(--black-600);
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);
308
273
  }
309
- }
310
- }
311
274
 
312
- .s-post-summary__deleted {
313
- background-color: var(--red-025);
275
+ &--meta-tags {
276
+ display: flex;
277
+ flex-wrap: wrap;
278
+ gap: var(--su4);
279
+ }
314
280
 
315
- .s-badge__filled {
316
- color: var(--white);
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);
317
286
 
318
- .dark-mode({
319
- background-color: var(--red-800)
320
- });
321
- }
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
+ }
295
+
296
+ &--stats-item {
297
+ &:not(.s-badge) {
298
+ align-items: center;
299
+ border: var(--su1) solid transparent;
300
+ display: inline-flex;
301
+ gap: 0.3em;
302
+ justify-content: center;
303
+ white-space: nowrap;
304
+ }
322
305
 
323
- .is-deleted {
324
- color: var(--white);
325
- background-color: var(--red-600);
326
- }
306
+ &.s-badge {
307
+ font-size: var(--fs-body1);
308
+ line-height: var(--lh-md);
309
+ padding: var(--su2) var(--su4);
310
+ }
327
311
 
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);
312
+ &.has-answers,
313
+ &.has-bounty, // TODO DEPRECATED: Remove .has-bounty styling
314
+ &.is-archived,
315
+ &.is-closed,
316
+ &.is-deleted,
317
+ &.is-draft,
318
+ &.is-pinned,
319
+ &.is-published,
320
+ &.is-review {
321
+ border-radius: var(--br-sm);
322
+ padding: var(--su2) var(--su4);
338
323
  }
339
- }
340
- }
341
- }
342
324
 
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);
325
+ &.has-answers {
326
+ &.has-accepted-answer {
327
+ background-color: var(--_ps-has-accepted-answers-bg);
328
+ border-color: var(--_ps-has-accepted-answers-bc);
329
+ color: var(--_ps-has-accepted-answers-fc);
330
+ }
331
+
332
+ background-color: var(--_ps-has-answers-bg);
333
+ border: var(--su1) solid var(--_ps-has-answers-bc);
334
+ color: var(--_ps-has-answers-fc);
354
335
  }
355
- }
356
- }
357
- }
358
336
 
359
- .s-post-summary__ignored,
360
- .s-post-summary__deleted {
337
+ &.has-bounty { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__bounty`
338
+ background-color: var(--blue-600);
339
+ color: var(--white);
340
+ }
361
341
 
362
- .s-post-summary--content-title > a {
363
- color: var(--black-500);
342
+ // Hotness
343
+ &.is-warm {
344
+ color: var(--_ps-state-fc, var(--yellow-900));
345
+ }
364
346
 
365
- &:hover,
366
- &:active,
367
- &:visited {
368
- color: var(--black-500);
369
- }
370
- }
347
+ &.is-hot {
348
+ color: var(--_ps-state-fc, var(--orange-800));
349
+ }
371
350
 
372
- .s-post-summary--content-excerpt {
373
- color: var(--black-500);
374
- }
351
+ &.is-supernova {
352
+ color: var(--_ps-state-fc, var(--red-800));
353
+ }
375
354
 
376
- .s-post-summary--meta > *:not(.s-post-summary--meta-tags) {
377
- color: var(--black-600);
378
- }
355
+ // Status
356
+ &.is-archived { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__muted s-badge__icon`
357
+ background-color: var(--black-100);
358
+ border-color: var(--black-600);
359
+ color: var(--black-900);
360
+ }
379
361
 
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);
362
+ &.is-closed { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__danger s-badge__icon`
363
+ background-color: var(--red-100);
364
+ border-color: var(--red-600);
365
+ color: var(--red-900);
391
366
  }
392
- }
393
- }
394
367
 
395
- .s-post-summary--stats {
396
- color: var(--black-500);
368
+ &.is-draft { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__info s-badge__icon`
369
+ background-color: var(--blue-100);
370
+ border-color: var(--blue-600);
371
+ color: var(--blue-900);
372
+ }
397
373
 
398
- .s-post-summary--stats-item {
374
+ &.is-pinned { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__muted s-badge__filled s-badge__icon`
375
+ background-color: var(--black-700);
376
+ color: var(--white);
377
+ }
399
378
 
400
- &.is-warm,
401
- &.is-hot,
402
- &.is-supernova {
403
- color: var(--black-500);
379
+ &.is-published {
380
+ background-color: var(--black-050);
381
+ color: var(--black-800);
404
382
  }
405
383
 
406
- &.has-answers {
407
- color: var(--black-500);
408
- background-color: transparent;
409
- border-color: var(--black-300);
384
+ &.is-review { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__warning s-badge__icon`
385
+ background-color: var(--yellow-100);
386
+ border-color: var(--yellow-600);
387
+ color: var(--yellow-900);
388
+ }
410
389
 
411
- &.has-accepted-answer {
412
- color: var(--black-600);
413
- background-color: var(--black-075);
414
- border-color: transparent;
415
- }
390
+ &__emphasized {
391
+ color: var(--_ps-stats-item-emphasized-fc);
416
392
  }
417
393
  }
418
394
 
419
- .s-post-summary--stats-item__emphasized {
420
- color: var(--black-500);
395
+ &--stats-item-number {
396
+ font-weight: 500;
421
397
  }
398
+
422
399
  }
423
400
 
424
- .s-user-card {
425
- .s-badge {
426
- filter: grayscale(100%);
427
- }
401
+ background-color: var(--_ps-bg);
402
+ border-bottom: var(--_ps-bb);
428
403
 
429
- a,
430
- .s-user-card--link,
431
- .s-user-card--rep,
432
- .s-user-card--time {
433
- color: var(--black-500);
434
- }
435
- }
436
- }
404
+ display: flex;
405
+ padding: var(--su16);
406
+ position: relative;
407
+ }