@stackoverflow/stacks 3.0.0-beta.25 → 3.0.0-beta.26

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.
@@ -1,6 +1,6 @@
1
1
  .s-avatar {
2
2
  --_av-size: var(--su16);
3
- --_av-bg: var(--_white-static); // Force a white background color for when we have transparent avatars
3
+ --_av-bg: var(--white); // Use a solid background color to prevent transparent avatars from blending with the background
4
4
  --_av-fs-letter: calc(var(--su12) - var(--su1));
5
5
  --_av-scale-badge: 1;
6
6
 
@@ -1,54 +1,108 @@
1
1
  .s-badge {
2
- --_ba-as: unset;
3
2
  --_ba-bc: transparent;
4
3
  --_ba-bg: var(--black-100);
5
4
  --_ba-fc: var(--black-500);
6
- --_ba-fs: var(--fs-caption); //13px
5
+ --_ba-fs: var(--fs-caption);
7
6
  --_ba-px: var(--su6);
8
7
  --_ba-py: var(--su4);
9
8
  --_ba-tt: unset;
10
9
  --_ba-wmn: 0;
11
10
  --_ba-bl: 0;
12
11
  --_ba-fw: unset;
12
+ --_ba-g: unset;
13
+ --_ba-svg-p: var(--su2);
13
14
  --_ba-sq-bg: var(--black-200);
14
- --_ba-bx-sh-w: var(--su2);
15
- --_ba-gap: unset;
16
- --_ba-bx-sh-inset: ~"";
15
+
16
+ // CONTEXTUAL STYLES
17
+ .highcontrast-mode({
18
+ --_ba-bx-sh-w: var(--su1);
17
19
 
18
- // SIZES
19
- &&__sm {
20
- --_ba-wmn: calc(var(--su16) + var(--su2));
21
- --_ba-as: flex-start;
22
- --_ba-fs: var(--fs-fine); //12px
23
- --_ba-px: var(--su4);
24
- --_ba-py: var(--su1);
25
- --_ba-bx-sh-w: 0px;
26
- --_ba-bx-sh-inset: inset;
27
- }
20
+ &.s-badge__sm {
21
+ --_ba-bx-sh-w: 0;
22
+ }
28
23
 
29
- &&__lg {
30
- --_ba-fs: var(--fs-body1); //14px
31
- --_ba-px: var(--su8);
32
- --_ba-py: calc(var(--su4) + var(--su1)); //5px
33
- --_ba-bx-sh-w: var(--su4);
24
+ &.s-badge__lg {
25
+ --_ba-bx-sh-w: var(--su4);
26
+ }
27
+
28
+ &:not(.s-badge__important) > svg {
29
+ //Add border around the square in high contrast mode
30
+ box-shadow: 0 0 0 calc(var(--_ba-bx-sh-w) - var(--su1)) var(--_ba-sq-bg),
31
+ 0 0 0 max(var(--su1), var(--_ba-bx-sh-w)) currentcolor inset;
32
+ }
33
+
34
+ a[href] {
35
+ &,
36
+ &:hover {
37
+ text-decoration: underline !important;
38
+ }
39
+ }
40
+ });
41
+
42
+ &:has(> .s-bling__filled),
43
+ &&__squared,
44
+ &:has(> svg) {
45
+ &,
46
+ &.s-badge__lg,
47
+ &.s-badge__sm {
48
+ --_ba-px: 0;
49
+ --_ba-py: 0;
50
+ }
51
+
52
+ &.s-badge__lg {
53
+ --_ba-pr: var(--su8);
54
+ }
55
+
56
+ &.s-badge__sm {
57
+ --_ba-pr: var(--su4);
58
+ }
59
+
60
+ --_ba-pr: var(--su6);
34
61
  }
35
62
 
36
- // We need negative margin to make up for the positive badge padding
37
- & .s-bling__filled {
38
- margin: calc(var(--_ba-py) * -1) 0 calc(var(--_ba-py) * -1) calc(var(--_ba-px) * -1);
63
+ &:has(> .s-bling__filled),
64
+ &&__squared {
65
+ &.s-badge__lg {
66
+ --_ba-g: var(--su8);
67
+ }
68
+
69
+ &.s-badge__sm {
70
+ --_ba-g: var(--su4);
71
+ }
72
+
73
+ --_ba-g: var(--su6);
39
74
  }
40
- & svg {
41
- margin: calc(var(--_ba-py) * -1) 0 calc(var(--_ba-py) * -1) var(--sun4);
75
+
76
+ &:not(&__squared):has(> svg){
77
+ --_ba-g: var(--su2);
42
78
  }
43
79
 
80
+
44
81
  &:has(.s-bling__rep) {
45
82
  --_ba-fw: 600;
46
83
  --_ba-fc: var(--black-600);
47
84
  }
85
+
48
86
  &:has(.s-bling) {
49
87
  --_ba-bg: var(--black-150);
50
88
  }
51
89
 
90
+ // SIZES
91
+ &&__sm {
92
+ --_ba-fs: var(--fs-fine);
93
+ --_ba-px: var(--su4);
94
+ --_ba-py: var(--su1);
95
+ --_ba-wmn: calc(var(--su16) + var(--su2));
96
+ --_ba-svg-p: var(--_ba-py);
97
+ }
98
+
99
+ &&__lg {
100
+ --_ba-fs: var(--fs-body1);
101
+ --_ba-px: var(--su8);
102
+ --_ba-py: calc(var(--su4) + var(--su1));
103
+ --_ba-svg-p: var(--_ba-py);
104
+ }
105
+
52
106
  // TAG
53
107
  &&__gold,
54
108
  &&__silver,
@@ -84,8 +138,23 @@
84
138
  --_ba-fc: var(--black-600);
85
139
  }
86
140
 
141
+ &&__moderator,
142
+ &&__new {
143
+ &:before {
144
+ background-color: var(--_ba-bc);
145
+ height: var(--_ba-before-h);
146
+ width: var(--_ba-before-w);
147
+ -webkit-mask: var(--_ba-before-icon) no-repeat center;
148
+ mask: var(--_ba-before-icon) no-repeat center;
149
+
150
+ content: "";
151
+ display: inline-block;
152
+ -webkit-mask-size: contain;
153
+ mask-size: contain;
154
+ }
155
+ }
156
+
87
157
  &&__moderator {
88
- // :before icon
89
158
  --_ba-bc: var(--blue-500);
90
159
  --_ba-before-h: calc(var(--su12) + var(--su1)); // 13px
91
160
  --_ba-before-w: calc(var(--su12) - var(--su1)); // 11px
@@ -98,68 +167,40 @@
98
167
  }
99
168
 
100
169
  &:before {
101
- height: var(--_ba-before-h);
102
170
  margin-top: var(--sun1);
103
- width: var(--_ba-before-w);
104
-
105
- content: "";
106
- display: inline-block;
107
- background-color: var(--_ba-bc);
108
- -webkit-mask: var(--_ba-before-icon) no-repeat center;
109
- mask: var(--_ba-before-icon) no-repeat center;
110
- -webkit-mask-size: contain;
111
- mask-size: contain;
112
171
  }
113
172
  }
114
173
 
115
174
  &&__staff {
116
- // Staff should always be "StackOverflow orange"
117
175
  --_ba-bc: var(--orange-400);
118
176
  }
177
+
119
178
  &&__admin {
120
- // Only the admin badge is themeable
121
179
  --_ba-bc: var(--theme-primary-500, var(--orange-500));
122
180
  }
181
+
123
182
  &&__ai {
124
183
  --_ba-bc: var(--purple-400);
125
184
  }
185
+
126
186
  &&__bot {
127
187
  --_ba-bc: var(--black-400);
128
188
  }
129
189
 
190
+ // TODO reassess if we need this modifier or should rely on embedding an svg (our `__featured` example is the same as this badge)
130
191
  &&__new {
131
192
  --_ba-bg: var(--purple-100);
132
193
  --_ba-fc: var(--purple-500);
133
194
  --_ba-sq-bg: var(--purple-200);
134
195
  --_ba-bc: var(--purple-400);
135
- --_ba-gap: var(--su2); // 2px gap between icon and text
136
- --_ba-before-h: calc(var(--su12) + var(--su4)); // 16px
137
- --_ba-before-w: calc(var(--su12) + var(--su4)); // 16px
138
- --_ba-before-icon: url("data:image/svg+xml;,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.25 7h7.28l-5.89 4.29.68 2.08-2.07-1.5-.04-.12-.33-1.04.88-.64 2.16-1.56h-3.76l-.34-1.04L10 4.94l-.82 2.53-.34 1.04H5.08l2.16 1.56.88.64-.33 1.04-.83 2.54 2.16-1.57.87-.64 5.12 3.72.78 2.41L10 13.93l-5.9 4.28 2.26-6.92L.46 7h7.29L10 .08z' /%3E%3C/svg%3E");
139
-
140
- &.s-badge__sm {
141
- --_ba-before-h: calc(var(--su12) + var(--su2)); // 14px
142
- --_ba-before-w: calc(var(--su12) + var(--su2)); // 14px
143
- }
144
-
145
- &.s-badge__lg {
146
- --_ba-before-h: calc(var(--su12) + var(--su6)); // 18px
147
- --_ba-before-w: calc(var(--su12) + var(--su6)); // 18px
148
- }
196
+ --_ba-gap: var(--su2);
197
+ --_ba-before-h: calc(var(--su12) + var(--su2));
198
+ --_ba-before-w: calc(var(--su12) + var(--su2));
199
+ --_ba-before-icon: url("data:image/svg+xml;,%3Csvg width='14' height='14' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 1a7 7 0 1 1 0 14A7 7 0 0 1 8 1m0 1.25a5.75 5.75 0 1 0 0 11.5 5.75 5.75 0 0 0 0-11.5m1 10.06H7V10.6h2zM8.14 4c1.78 0 2.77.96 2.77 2.5 0 1.79-2.1 2.2-2.1 3.25h-1.6c0-2 2-2.08 2-3.26 0-.54-.27-.96-1.02-.96-.7 0-1.03.46-1.1 1.23H5.4A2.75 2.75 0 0 1 8.13 4' fill='%23fff'/%3E%3C/svg%3E");
149
200
 
150
201
  &:before {
151
- height: var(--_ba-before-h);
152
- margin-top: 0;
153
202
  margin-left: var(--sun2);
154
- width: var(--_ba-before-w);
155
-
156
- content: "";
157
- display: inline-block;
158
- background-color: var(--_ba-bc);
159
- -webkit-mask: var(--_ba-before-icon) no-repeat center;
160
- mask: var(--_ba-before-icon) no-repeat center;
161
- -webkit-mask-size: contain;
162
- mask-size: contain;
203
+ margin-top: 0;
163
204
  }
164
205
  }
165
206
 
@@ -168,60 +209,73 @@
168
209
  --_ba-bg: var(--blue-100);
169
210
  --_ba-fc: var(--blue-500);
170
211
  --_ba-sq-bg: var(--blue-200);
212
+
171
213
  &.s-badge__important {
172
214
  --_ba-bg: var(--blue-400);
173
215
  --_ba-sq-bg: var(--blue-500);
174
216
  }
175
217
  }
218
+
176
219
  &&__warning {
177
220
  --_ba-bg: var(--yellow-100);
178
221
  --_ba-fc: var(--yellow-500);
179
222
  --_ba-sq-bg: var(--yellow-200);
223
+
180
224
  &.s-badge__important {
181
225
  --_ba-bg: var(--yellow-400);
182
226
  --_ba-sq-bg: var(--yellow-500);
183
227
  }
184
228
  }
229
+
185
230
  &&__danger {
186
231
  --_ba-bg: var(--red-100);
187
232
  --_ba-fc: var(--red-500);
188
233
  --_ba-sq-bg: var(--red-200);
234
+
189
235
  &.s-badge__important {
190
236
  --_ba-bg: var(--red-400);
191
237
  --_ba-sq-bg: var(--red-500);
192
238
  }
193
239
  }
240
+
194
241
  &&__critical {
195
242
  --_ba-bg: var(--red-200);
196
243
  --_ba-fc: var(--red-600);
197
244
  --_ba-sq-bg: var(--red-300);
245
+
198
246
  &.s-badge__important {
199
247
  --_ba-bg: var(--red-500);
200
248
  --_ba-sq-bg: var(--red-600);
201
249
  }
202
250
  }
251
+
203
252
  &&__tonal {
204
253
  --_ba-bg: var(--black-200);
205
254
  --_ba-fc: var(--black-600);
206
255
  --_ba-sq-bg: var(--black-300);
256
+
207
257
  &.s-badge__important {
208
258
  --_ba-bg: var(--black-500);
209
259
  --_ba-sq-bg: var(--black-600);
210
260
  }
211
261
  }
262
+
212
263
  &&__success {
213
264
  --_ba-bg: var(--green-100);
214
265
  --_ba-fc: var(--green-600);
215
266
  --_ba-sq-bg: var(--green-200);
267
+
216
268
  &.s-badge__important {
217
269
  --_ba-bg: var(--green-500);
218
270
  --_ba-sq-bg: var(--green-600);
219
271
  }
220
272
  }
273
+
221
274
  &&__featured {
222
275
  --_ba-bg: var(--purple-100);
223
276
  --_ba-fc: var(--purple-500);
224
277
  --_ba-sq-bg: var(--purple-200);
278
+
225
279
  &.s-badge__important {
226
280
  --_ba-bg: var(--purple-400);
227
281
  --_ba-sq-bg: var(--purple-500);
@@ -229,34 +283,25 @@
229
283
  }
230
284
 
231
285
  // SQUARED
232
- &&__squared {
233
- --_ba_box-shadow: 0 0 0 var(--_ba-bx-sh-w) var(--_ba-sq-bg);
234
- svg {
235
- background-color: var(--_ba-sq-bg);
236
- box-shadow: var(--_ba_box-shadow);
237
- margin-right: var(--_ba-bx-sh-w)
238
- }
239
- }
240
- &&__squared:not(&__important) {
241
- .highcontrast-mode({
242
- //Add border around the square in high contrast mode
243
- --_ba_box-shadow: 0 0 0 calc(var(--_ba-bx-sh-w) - var(--su1)) var(--_ba-sq-bg),
244
- 0 0 0 max(var(--su1), var(--_ba-bx-sh-w)) currentcolor var(--_ba-bx-sh-inset);
245
- });
246
- }
247
-
248
- // ICONS
249
- &:not(&__squared):has(> svg){
250
- //We want a smaller gap for icons that aren't squared
251
- --_ba-gap: calc(var(--_ba-px) - var(--su2));
286
+ &&__squared svg {
287
+ background-color: var(--_ba-sq-bg);
252
288
  }
253
289
 
254
290
  // IMPORTANT
255
291
  &&__important {
256
292
  --_ba-bg: var(--black-400);
257
- --_ba-sq-bg: var(--black-500);
258
- --_ba-fw: 600;
259
293
  --_ba-fc: var(--black-050);
294
+ --_ba-fw: 600;
295
+ --_ba-sq-bg: var(--black-500);
296
+ }
297
+
298
+ // CHILD ELEMENTS
299
+ svg {
300
+ aspect-ratio: 1 / 1;
301
+ box-sizing: content-box;
302
+ display: block;
303
+ height: calc(var(--su16) + var(--su4));
304
+ padding: var(--_ba-svg-p);
260
305
  }
261
306
 
262
307
  // INTERACTION
@@ -264,21 +309,20 @@
264
309
  text-decoration: none;
265
310
  }
266
311
 
267
- align-self: var(--_ba-as);
268
312
  background-color: var(--_ba-bg);
269
313
  border-left: var(--_ba-bl) solid var(--_ba-bc);
270
314
  color: var(--_ba-fc);
271
315
  font-size: var(--_ba-fs);
272
316
  font-weight: var(--_ba-fw);
273
- gap: var(--_ba-gap, var(--_ba-px));
274
- padding: var(--_ba-py) var(--_ba-px);
275
- line-height: var(--lh-md);
317
+ gap: var(--_ba-g, var(--_ba-px));
318
+ padding: var(--_ba-py) var(--_ba-pr, var(--_ba-px)) var(--_ba-py) var(--_ba-px);
276
319
  min-width: var(--_ba-wmn);
277
320
  text-transform: var(--_ba-tt);
278
-
321
+
279
322
  align-items: center;
280
323
  display: inline-flex;
281
324
  justify-content: center;
325
+ line-height: var(--lh-md);
282
326
  text-decoration: none;
283
327
  vertical-align: middle;
284
328
  white-space: nowrap;
@@ -46,29 +46,15 @@
46
46
  });
47
47
 
48
48
  // MODIFIERS
49
- &&__xs,
50
- &&__sm,
51
- &&__md {
49
+ &&__sm {
52
50
  --_pr-h1-fs: 1.75em;
53
51
  --_pr-h2-fs: 1.375em;
54
52
  --_pr-h3-fs: 1.25em;
55
53
  --_pr-h4-fs: 1.125em;
56
54
  --_pr-h5-fs: 1em;
57
- }
58
-
59
- &&__xs {
60
55
  --_pr-fs: var(--fs-caption);
61
- --_pr-lh: var(--lh-sm);
62
- }
63
-
64
- &&__sm {
65
- --_pr-fs: var(--fs-body1);
66
56
  --_pr-lh: var(--lh-md);
67
- }
68
-
69
- &&__md {
70
- --_pr-fs: var(--fs-body3);
71
- --_pr-lh: var(--lh-xl);
57
+ --_pr-code-fs: var(--fs-caption);
72
58
  }
73
59
 
74
60
  // CHILD ELEMENTS
@@ -77,11 +63,13 @@
77
63
  color: var(--theme-link-color, var(--theme-secondary-400)); // When contained within a link, we want the code to be link-colored
78
64
  }
79
65
 
66
+ // Code blocks use ems to maintain sizes relative to the surrounding text
80
67
  > code {
81
- padding: var(--su2) var(--su4);
82
- color: var(--black-600);
83
68
  background-color: var(--black-200);
84
- border-radius: var(--br-md);
69
+ color: var(--black-600);
70
+ // TODO verify this font size is appropriate with a Windows font stack
71
+ font-size: .875em;
72
+ padding: 0.1875em 0.375em;
85
73
  }
86
74
  }
87
75
 
@@ -254,7 +242,7 @@
254
242
  margin-bottom: calc(@pr-spacing-condensed + 0.1em); // Add some more spacing on the bottom for a little extra optical alignment
255
243
  }
256
244
 
257
- margin-bottom:@pr-spacing;
245
+ margin-bottom: @pr-spacing;
258
246
  margin-top: 0;
259
247
  }
260
248
 
@@ -364,7 +352,7 @@
364
352
  p {
365
353
  --_pr-img-mb: 0;
366
354
 
367
- a {
355
+ a:not([class]) {
368
356
  text-decoration: underline;
369
357
  }
370
358
 
@@ -429,7 +417,7 @@
429
417
 
430
418
  > * {
431
419
  opacity: var(--_pr-soiler-child-o);
432
- transition: @pr-spoiler-transition;
420
+ transition: var(--_pr-spoiler-transition);
433
421
  visibility: var(--_pr-soiler-child-visibility); // hidden elements don't respond to mouse events, but still retain their space
434
422
  }
435
423
 
@@ -526,7 +526,7 @@
526
526
  attribute: hsl(206, 98.5%, 29%);
527
527
  bg: hsl(0, 0%, 96.5%);
528
528
  color: var(--black-600);
529
- comment: hsl(210, 8%, 43.5%);
529
+ comment: var(--black-400);
530
530
  deletion: var(--red-500);
531
531
  keyword: hsl(206, 98.5%, 29%);
532
532
  literal: hsl(27, 99%, 36%);
@@ -540,7 +540,7 @@
540
540
  attribute: var(--blue-400);
541
541
  bg: hsl(0, 2%, 11%);
542
542
  color: var(--black);
543
- comment: hsl(0, 0%, 60%);
543
+ comment: var(--black-400);
544
544
  deletion: var(--red-500);
545
545
  keyword:var(--blue-400);
546
546
  literal: hsl(27, 95%, 65%);
@@ -554,7 +554,7 @@
554
554
  attribute: hsl(215, 100%, 35%);
555
555
  bg: hsl(0, 0%, 96.5%);
556
556
  color: var(--black-600);
557
- comment: hsl(213, 7%, 33%);
557
+ comment: var(--black-400);
558
558
  deletion: var(--red-400);
559
559
  keyword: hsl(215, 100%, 35%);
560
560
  literal: hsl(16, 94%, 31%);
@@ -568,7 +568,7 @@
568
568
  attribute: hsl(200, 57%, 85%);
569
569
  bg: hsl(0, 0%, 10%);
570
570
  color: hsl(0, 0%, 100%);
571
- comment: hsl(0, 0%, 99%);
571
+ comment: var(--black-400);
572
572
  deletion: var(--red-500);
573
573
  keyword: hsl(200, 57%, 85%);
574
574
  literal: hsl(36, 96%, 71%);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@stackoverflow/stacks",
3
3
  "description": "Stack Overflow’s CSS and Design Pattern Library. Stacks is an atomic CSS library with classes and components for rapidly building Stack Overflow.",
4
- "version": "3.0.0-beta.25",
4
+ "version": "3.0.0-beta.26",
5
5
  "files": [
6
6
  "dist",
7
7
  "lib",