@stackoverflow/stacks 1.5.0 → 1.6.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 (23) hide show
  1. package/dist/css/stacks.css +1584 -1666
  2. package/dist/css/stacks.min.css +1 -1
  3. package/lib/css/atomic/colors.less +1 -1
  4. package/lib/css/components/badges.less +3 -3
  5. package/lib/css/components/button-groups.less +59 -83
  6. package/lib/css/components/buttons.less +384 -585
  7. package/lib/css/components/code-blocks.less +98 -125
  8. package/lib/css/components/inputs.less +38 -24
  9. package/lib/css/components/link-previews.less +110 -122
  10. package/lib/css/components/links.less +0 -16
  11. package/lib/css/components/notices.less +187 -180
  12. package/lib/css/components/post-summary.less +0 -9
  13. package/lib/css/components/progress-bars.less +236 -297
  14. package/lib/css/components/prose.less +293 -380
  15. package/lib/css/components/sidebar-widgets.less +251 -0
  16. package/lib/css/components/tables.less +0 -24
  17. package/lib/css/components/topbar.less +10 -11
  18. package/lib/css/stacks-dynamic.less +0 -1
  19. package/lib/css/stacks-static.less +1 -1
  20. package/package.json +9 -9
  21. package/lib/css/components/_styles-template.less +0 -78
  22. package/lib/css/components/widget-dynamic.less +0 -33
  23. package/lib/css/components/widget-static.less +0 -274
package/lib/css/components/buttons.less CHANGED
@@ -1,651 +1,450 @@
1
- //
2
- // STACK OVERFLOW
3
- // BUTTONS
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
- // TABLE OF CONTENTS
10
- // • BASE STYLE
11
- // • STYLE MODIFICATIONS
12
- // • LAYOUTS & SIZES
13
- // ----------------------------------------------------------------------------
14
-
15
- // ============================================================================
16
- // $ BASE STYLE
17
- // ----------------------------------------------------------------------------
18
- & {
19
- .s-btn {
20
- position: relative;
21
- display: inline-block;
22
- padding: 0.8em;
23
- color: var(--theme-button-color);
24
- border: 1px solid transparent;
25
- border-radius: var(--br-sm);
26
- background-color: transparent;
27
- outline: none;
28
- font-family: inherit;
29
- font-size: var(--fs-body1);
30
- font-weight: normal;
31
- line-height: var(--lh-sm);
32
- text-align: center;
1
+ .s-btn {
2
+ // BASE COMPONENT-SPECIFIC CUSTOM PROPERTIES
3
+ --_bu-baw: var(--su-static1);
4
+ --_bu-bc: transparent;
5
+ --_bu-bg: transparent;
6
+ --_bu-br: var(--br-sm);
7
+ --_bu-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0, 100%, 0.7);
8
+ --_bu-fc: var(--theme-button-color);
9
+ --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring);
10
+ --_bu-fs: var(--fs-body1);
11
+ --_bu-p: 0.8em;
12
+ // STATE AND INTERACTION CUSTOM PROPERTIES
13
+ --_bu-bc-selected: transparent;
14
+ --_bu-bg-active: var(--theme-button-active-background-color);
15
+ --_bu-bg-hover: var(--theme-button-hover-background-color);
16
+ --_bu-bg-selected: var(--theme-button-selected-background-color);
17
+ --_bu-fc-active: var(--theme-button-hover-color); // Note: hover color used here intentionally
18
+ --_bu-fc-hover: var(--theme-button-hover-color);
19
+ --_bu-fc-selected: var(--theme-button-selected-color);
20
+ // Filled
21
+ --_bu-filled-bc: var(--theme-button-filled-border-color);
22
+ --_bu-filled-bc-active: var(--theme-button-filled-active-border-color);
23
+ --_bu-filled-bg-hover: var(--theme-button-filled-hover-background-color);
24
+ --_bu-filled-bc-selected: var(--theme-button-filled-selected-border-color);
25
+ --_bu-filled-bg: var(--theme-button-filled-background-color);
26
+ --_bu-filled-bg-active: var(--theme-button-filled-active-background-color);
27
+ --_bu-filled-bg-selected: var(--theme-button-filled-selected-background-color);
28
+ --_bu-filled-fc: var(--theme-button-filled-color);
29
+ --_bu-filled-fc-active: var(--theme-button-filled-hover-color); // Note: hover color used here intentionally
30
+ --_bu-filled-fc-hover: var(--theme-button-filled-hover-color);
31
+ --_bu-filled-fc-selected: var(--theme-button-filled-selected-color);
32
+ // Outlined
33
+ --_bu-outlined-bc: var(--theme-button-outlined-border-color);
34
+ --_bu-outlined-bg: var(--theme-button-outlined-background-color);
35
+ --_bu-outlined-bc-selected: var(--theme-button-outlined-selected-border-color);
36
+ --_bu-outlined-bg-selected: var(--theme-button-selected-background-color);
37
+ --_bu-outlined-fc-selected: var(--theme-button-selected-color);
38
+ // CHILD COMPONENT CUSTOM PROPERTIES
39
+ --_bu-badge-o: 0.5;
40
+ --_bu-dropdown-bw: var(--su-static4);
41
+ --_bu-number-fc: var(--white);
42
+ --_bu-number-fc-selected: var(--_bu-number-fc);
43
+
44
+ // CONTEXTUAL STYLES
45
+ .dark-mode({
46
+ --_bu-bs: none;
47
+ });
48
+ .highcontrast-mode({
49
+ --_bu-bc: currentColor;
50
+ --_bu-filled-bc: var(--_bu-bc);
51
+ --_bu-outlined-bc: var(--_bu-bc);
52
+ --_bu-bc-selected: var(--_bu-bc);
53
+ --_bu-badge-o: 0.8;
54
+ });
55
+
56
+ // STATES
57
+ &[disabled],
58
+ &[aria-disabled="true"] {
59
+ --_bu-bs: none !important;
60
+ opacity: var(--_o-disabled-static);
61
+ pointer-events: none;
33
62
  text-decoration: none;
34
- cursor: pointer;
35
- user-select: none;
36
-
37
- .highcontrast-mode({
38
- border-color: currentColor;
39
-
40
- &:not(.s-btn__link):not(.s-btn__unset) {
41
- text-decoration: none;
42
- }
43
- });
44
-
45
- button &,
46
- button[type="submit"] &,
47
- button[type="reset"] & {
48
- // Guard against the difference in configurable resets
49
- // Eric Meyer's reset does not include this, while normalize.css does
50
- // Correct the inability to style buttons in iOS and Safari.
51
- -webkit-appearance: button;
52
- }
53
-
54
- // Override for buttons having inline-block by default
55
- &.grid {
56
- display: flex;
57
- }
58
-
59
- &:hover,
60
- &:focus,
61
- &:active {
62
- color: var(--theme-button-hover-color);
63
- background: var(--theme-button-hover-background-color);
64
- text-decoration: none;
65
- }
66
-
67
- &:active {
68
- background: var(--theme-button-active-background-color);
69
- }
70
-
71
- &:focus {
72
- outline: none;
73
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
74
- }
75
-
76
- &[disabled],
77
- &[aria-disabled="true"] {
78
- opacity: var(--_o-disabled-static);
79
- pointer-events: none;
80
- box-shadow: none !important;
81
- }
82
-
83
- &.is-selected {
84
- color: var(--theme-button-selected-color);
85
- background: var(--theme-button-selected-background-color);
86
- box-shadow: none;
87
-
88
- &:focus {
89
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
90
- }
91
- }
92
-
93
- &.s-btn__dropdown {
94
- padding-right: 2em;
95
-
96
- &:after {
97
- content: "";
98
- position: absolute;
99
- z-index: var(--zi-active);
100
- top: calc(50% - 2px);
101
- right: 0.8em;
102
- border-style: solid;
103
- border-width: var(--su-static4);
104
- border-top-width: var(--su-static4);
105
- border-bottom-width: 0;
106
- border-color: currentColor transparent;
107
- pointer-events: none;
108
- }
63
+ }
64
+ button &,
65
+ button[type="submit"] &,
66
+ button[type="reset"] & {
67
+ -webkit-appearance: button; // [1]
68
+ }
69
+ &.grid {
70
+ display: flex; // Override &&__danger buttons having inline-block by default
71
+ }
72
+ &.is-loading {
73
+ .svg-icon:first-child {
74
+ margin-left: -23px;
75
+ opacity: 0; // [2]
109
76
  }
77
+ }
78
+ &.is-selected,
79
+ .s-btn-group.s-btn-group--radio &--radio:checked + & {
80
+ background-color: var(--_bu-bg-selected);
81
+ border-color: var(--_bu-bc-selected);
82
+ color: var(--_bu-fc-selected);
110
83
 
111
- &.s-btn__xs {
112
- padding: 0.6em;
113
- font-size: var(--fs-fine);
114
-
115
- &.s-btn__dropdown {
116
- padding-right: 1.5em;
117
-
118
- &:after {
119
- top: calc(50% - 2px);
120
- right: 0.6em;
121
- border-width: calc(var(--su-static4) - var(--su-static1));
122
- border-top-width: calc(var(--su-static4) - var(--su-static1));
123
- border-bottom-width: 0;
124
- }
125
- }
84
+ .s-btn--number {
85
+ color: var(--_bu-number-fc-selected);
126
86
  }
127
-
128
- &.s-btn__sm {
129
- font-size: var(--fs-caption);
130
-
131
- &.s-btn__dropdown {
132
- padding-right: 2.05em;
133
- }
87
+ &.s-btn__filled { // this needs to live here to adapt to radio button-group
88
+ border-color: var(--_bu-filled-bc-selected);
89
+ background-color: var(--_bu-filled-bg-selected);
90
+ color: var(--_bu-filled-fc-selected);
134
91
  }
92
+ &.s-btn__outlined { // this needs to live here to adapt to radio button-group
93
+ border-color: var(--_bu-outlined-bc-selected);
94
+ background-color: var(--_bu-outlined-bg-selected);
95
+ color: var(--_bu-outlined-fc-selected);
135
96
 
136
- &.s-btn__md {
137
- padding: 0.7em;
138
- border-radius: calc(var(--br-sm) + 1px);
139
- font-size: var(--fs-body3);
140
-
141
- &.s-btn__dropdown {
142
- padding-right: 1.8em;
143
-
144
- &:after {
145
- top: calc(50% - 2px);
146
- right: 0.7em;
147
- border-width: calc(var(--su-static4) + var(--su-static1));
148
- border-top-width: calc(var(--su-static4) + var(--su-static1));
149
- border-bottom-width: 0;
150
- }
97
+ &.s-btn__muted {
98
+ .highcontrast-mode({
99
+ --_bu-outlined-bc-selected: var(--_bu-filled-bc-selected);
100
+ --_bu-outlined-bg-selected: var(--_bu-filled-bg-selected);
101
+ --_bu-outlined-fc-selected: var(--_bu-filled-fc-selected);
102
+ --_bu-number-fc-selected: var(--_bu-filled-bg-selected);
103
+ });
151
104
  }
152
105
  }
153
-
154
- .s-btn--badge {
155
- opacity: var(--_o-disabled);
156
- display: inline-block;
157
- border-radius: var(--br-sm);
158
- padding: var(--su2) calc(var(--su4) - var(--su1));
159
- font-size: var(--fs-caption);
160
- line-height: var(--lh-xs);
161
- background-color: currentColor;
162
- }
163
-
164
- .s-btn--number {
165
- color: var(--white);
166
- }
167
106
  }
168
-
169
- .s-btn__primary:not(.is-selected) .s-btn--number,
170
- .s-btn__danger.s-btn__filled:not(.is-selected) .s-btn--number {
171
- .dark-mode({ color: var(--white); });
172
- .highcontrast-mode({ color: var(--black); });
107
+ &.is-selected:not(:focus),
108
+ .s-btn-group.s-btn-group--radio &--radio:checked:not(:focus) + & {
109
+ box-shadow: none;
173
110
  }
174
111
 
175
- // ============================================================================
176
- // $ DEFAULT (SECONDARY) STYLES
177
- // ============================================================================
178
-
179
- // -- Base Outline Style
180
- // Style which applies only a border.
181
- // ----------------------------------------------------------------------------
182
- .s-btn__outlined {
183
- border-color: var(--theme-button-outlined-border-color);
184
-
185
- &.is-selected {
186
- border-color: var(--theme-button-outlined-selected-border-color);
187
- }
112
+ // MODIFIERS
113
+ &&__filled {
114
+ border-color: var(--_bu-filled-bc);
115
+ background-color: var(--_bu-filled-bg);
116
+ color: var(--_bu-filled-fc);
117
+ }
118
+ &&__outlined {
119
+ border-color: var(--_bu-outlined-bc);
120
+ background-color: var(--_bu-outlined-bg);
188
121
  }
189
122
 
190
- // -- Base Filled Style
191
- // Adds in background-colors, background-images, and/or box-shadows.
192
- // ----------------------------------------------------------------------------
193
- .s-btn__filled {
194
- color: var(--theme-button-filled-color);
195
- background-color: var(--theme-button-filled-background-color);
196
- border-color: var(--theme-button-filled-border-color);
197
- box-shadow: inset 0 1px 0 0 hsla(0, 0, 100%, 0.7);
198
-
199
- .dark-mode({
200
- &:not(:focus) {
201
- box-shadow: none;
202
- }
203
- });
204
-
205
- &:hover,
123
+ // Resets
124
+ &&__link,
125
+ &&__unset {
206
126
  &:focus,
207
- &:active {
208
- color: var(--theme-button-filled-hover-color);
209
- background-color: var(--theme-button-filled-hover-background-color);
210
- }
211
-
212
- &:active {
213
- background-color: var(--theme-button-filled-active-background-color);
214
- border-color: var(--theme-button-filled-active-border-color);
215
- box-shadow: none;
216
- }
217
-
218
- &:focus {
219
- .highcontrast-mode({
220
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
221
- });
127
+ &:focus-visible {
128
+ outline-style: auto;
222
129
  }
223
130
 
224
- &.is-selected {
225
- color: var(--theme-button-filled-selected-color);
226
- background-color: var(--theme-button-filled-selected-background-color);
227
- border-color: var(--theme-button-filled-selected-border-color);
228
- box-shadow: none;
229
- }
131
+ outline: initial;
230
132
  }
231
-
232
- // -- Muted Clear Style
233
- // Creates a gray button style.
234
- // ----------------------------------------------------------------------------
235
- .s-btn__muted {
236
- color: var(--black-500);
237
-
238
- .highcontrast-mode({
239
- &.s-btn__filled {
240
- border-color: transparent;
241
- }
242
- });
243
-
133
+ &&__link {
134
+ --_bu-baw: 0;
135
+ --_bu-br: 0;
136
+ --_bu-bs: none;
137
+ --_bu-focus-ring: none;
138
+ --_bu-p: 0;
139
+
140
+ &,
244
141
  &:hover,
142
+ &:active,
245
143
  &:focus,
246
- &:active {
247
- color: var(--black-600);
248
- background-color: var(--black-025);
144
+ &[disabled],
145
+ &[aria-disabled="true"] {
146
+ --_bu-bg: none;
249
147
  }
250
-
251
- &:active {
252
- background: var(--black-050);
148
+ &.s-btn__dropdown {
149
+ padding-right: 0.9em;
253
150
  }
254
151
 
152
+ .s-link();
153
+ display: inline;
154
+ font: inherit;
155
+ text-align: inherit;
156
+ }
157
+ &&__unset {
158
+ &,
159
+ &:hover,
160
+ &:active,
255
161
  &:focus {
256
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
162
+ --_bu-baw: 0;
163
+ --_bu-bg: none;
164
+ --_bu-br: 0;
165
+ --_bu-bs: none;
166
+ --_bu-fc: unset;
167
+ --_bu-focus-ring: none;
168
+ --_bu-p: 0;
169
+
170
+ cursor: default;
171
+ font: unset;
172
+ user-select: auto;
257
173
  }
174
+ }
258
175
 
259
- &.is-selected {
260
- color: var(--black-700);
261
- background-color: var(--black-075);
262
-
263
- &:focus {
264
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
265
- }
266
- }
267
-
268
- // -- Muted (Gray)
269
- &.s-btn__outlined {
270
- border-color: var(--black-300);
271
-
272
- &.is-selected {
273
- border-color: var(--black-400);
274
- }
176
+ // Pseudo-elements and child-based modifiers
177
+ &&__dropdown {
178
+ &:after {
179
+ border-color: currentColor transparent;
180
+ border-style: solid;
181
+ border-width: var(--_bu-dropdown-bw);
182
+ border-bottom-width: 0;
183
+ content: "";
184
+ pointer-events: none;
185
+ position: absolute;
186
+ right: var(--_bu-p);
187
+ top: calc(50% - var(--su-static2));
188
+ z-index: var(--zi-active);
275
189
  }
276
190
 
277
- // -- Filled (Gray)
278
- &.s-btn__filled {
279
- color: var(--black-700);
280
- background-color: var(--black-100);
281
- border-color: transparent;
282
- box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
283
-
284
- .dark-mode({
285
- &:not(:focus) {
286
- box-shadow: none;
287
- }
288
- });
289
-
290
- .highcontrast-mode({
291
- background-color: var(--black-400);
292
- border-color: transparent;
293
- color: var(--white);
294
-
295
- .s-btn--number {
296
- color: var(--black);
297
- }
298
- });
299
-
300
- &:hover,
301
- &:focus,
302
- &:active {
303
- color: var(--black-700);
304
- background-color: var(--black-150);
305
- }
306
-
307
- &:active {
308
- background-color: var(--black-200);
309
- box-shadow: none;
310
- }
311
-
312
- &:focus {
313
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
314
- .highcontrast-mode({ box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted); });
315
- }
316
-
317
- &.is-selected {
318
- color: var(--black-800);
319
- background-color: var(--black-350);
320
- box-shadow: none;
321
-
322
- .highcontrast-mode({
323
- background-color: var(--black-700);
324
-
325
- .s-btn--number {
326
- color: var(--black);
327
- }
328
- });
329
-
330
- &:focus {
331
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
332
- }
333
- }
191
+ padding-right: calc(var(--_bu-p) * 2.5);
192
+ }
193
+ &&__icon {
194
+ .svg-icon {
195
+ vertical-align: baseline;
196
+ margin-top: -0.3em; // [3]
197
+ margin-bottom: -0.3em; // [3]
198
+ transition: opacity 200ms var(--te-smooth); // Animate the transition to .is-loading
334
199
  }
335
200
  }
336
201
 
337
- // ============================================================================
338
- // $ DANGER BUTTONS & STYLES
339
- // ============================================================================
340
- .s-btn__danger {
341
- color: var(--red-600);
202
+ // Size
203
+ &&__xs {
204
+ --_bu-dropdown-bw: calc(var(--su-static4) - var(--su-static1));
205
+ --_bu-fs: var(--fs-fine);
206
+ --_bu-p: 0.6em;
207
+ }
208
+ &&__sm {
209
+ --_bu-fs: var(--fs-caption);
210
+ }
211
+ &&__md {
212
+ --_bu-br: calc(var(--br-sm) + var(--su-static1));
213
+ --_bu-fs: var(--fs-body3);
214
+ --_bu-p: 0.7em;
215
+ }
342
216
 
217
+ // VARIANTS
218
+ &&__danger,
219
+ &&__muted {
343
220
  .highcontrast-mode({
344
- &.s-btn__filled {
345
- border-color: transparent;
346
- }
221
+ --_bu-filled-bc: transparent;
347
222
  });
223
+ }
224
+ &&__danger {
225
+ --_bu-bg-active: var(--red-100);
226
+ --_bu-bg-hover: var(--red-050);
227
+ --_bu-bg-selected: var(--red-200);
228
+ --_bu-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.4);
229
+ --_bu-fc: var(--red-600);
230
+ --_bu-fc-active: var(--_bu-fc);
231
+ --_bu-fc-hover: var(--red-700);
232
+ --_bu-fc-selected: var(--red-900);
233
+ --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring-error);
234
+ --_bu-filled-bc: transparent;
235
+ --_bu-filled-bc-selected: var(--_bu-filled-bc);
236
+ --_bu-filled-bg: var(--red-500);
237
+ --_bu-filled-bg-active: var(--red-700);
238
+ --_bu-filled-bg-hover: var(--red-600);
239
+ --_bu-filled-bg-selected: var(--red-800);
240
+ --_bu-filled-fc: var(--white);
241
+ --_bu-filled-fc-active: var(--_bu-filled-fc);
242
+ --_bu-filled-fc-hover: var(--_bu-filled-fc);
243
+ --_bu-filled-fc-selected: var(--_bu-filled-fc);
244
+ --_bu-outlined-bc: var(--red-500);
245
+ --_bu-outlined-bc-selected: var(--red-700);
246
+ --_bu-outlined-bg-selected: var(--_bu-bg-selected);
247
+ --_bu-outlined-fc-selected: var(--_bu-fc-selected);
348
248
 
349
- &:hover,
350
- &:focus,
351
- &:active {
352
- color: var(--red-700);
353
- background-color: var(--red-050);
354
- }
355
-
356
- &:active {
357
- background-color: var(--red-100);
358
- }
359
-
360
- &:focus {
361
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error);
362
- .highcontrast-mode({ box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error); });
363
- }
364
-
365
- &.is-selected {
366
- color: var(--red-900);
367
- background-color: var(--red-200);
368
-
369
- &:focus {
370
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error);
371
- }
372
- }
373
-
374
- // -- Outlined
375
- &.s-btn__outlined {
376
- border-color: var(--red-500);
377
-
378
- &.is-selected {
379
- border-color: var(--red-600);
380
- }
381
- }
382
-
383
- // -- Filled
384
249
  &.s-btn__filled {
385
- color: @white;
386
- background-color: var(--red-500);
387
- border-color: transparent;
388
- box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
250
+ --_bu-number-fc: var(--black);
389
251
 
390
252
  .dark-mode({
391
- &:not(:focus) {
392
- box-shadow: none;
393
- }
253
+ --_bu-filled-fc: var(--black);
254
+ --_bu-filled-fc-selected: var(--white);
255
+ --_bu-number-fc: var(--white);
256
+ --_bu-number-fc-selected: var(--black);
394
257
  });
395
-
396
- .highcontrast-mode({
397
- color: var(--white);
398
-
399
- &:focus {
400
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error);
401
- }
402
-
403
- .s-btn--number {
404
- color: var(--black);
405
- }
258
+ .highcontrast-dark-mode({
259
+ --_bu-filled-fc: var(--white);
260
+ --_bu-number-fc: var(--black);
261
+ --_bu-number-fc-selected: var(--black);
406
262
  });
407
-
408
- &:hover,
409
- &:focus,
410
- &:active {
411
- color: @white;
412
- background-color: var(--red-600);
413
- }
414
-
415
- &:active {
416
- background-color: var(--red-700);
417
- box-shadow: none;
418
- }
419
-
420
- &:focus {
421
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error);
422
- }
423
-
424
- &.is-selected {
425
- color: var(--white);
426
- background-color: var(--red-800);
427
- box-shadow: none;
428
-
429
- &:focus {
430
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-error);
431
- }
432
- .highcontrast-mode({
433
- .s-btn--number {
434
- color: var(--black);
435
- }
436
- });
437
- }
438
-
439
- .s-btn--number {
440
- color: var(--black-900);
441
- }
442
263
  }
443
264
  }
265
+ &&__muted {
266
+ --_bu-bg-active: var(--black-050);
267
+ --_bu-bg-hover: var(--black-025);
268
+ --_bu-bg-selected: var(--black-075);
269
+ --_bu-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.4);
270
+ --_bu-fc: var(--black-500);
271
+ --_bu-fc-active: var(--_bu-fc);
272
+ --_bu-fc-hover: var(--black-600);
273
+ --_bu-fc-selected: var(--black-700);
274
+ --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring-muted);
275
+ --_bu-filled-bc: transparent;
276
+ --_bu-filled-bc-selected: var(--_bu-filled-bc);
277
+ --_bu-filled-bg: var(--black-100);
278
+ --_bu-filled-bg-active: var(--black-200);
279
+ --_bu-filled-bg-hover: var(--black-150);
280
+ --_bu-filled-bg-selected: var(--black-350);
281
+ --_bu-filled-fc: var(--black-700);
282
+ --_bu-filled-fc-active: var(--_bu-filled-fc);
283
+ --_bu-filled-fc-hover: var(--_bu-filled-fc);
284
+ --_bu-filled-fc-selected: var(--black-800);
285
+ --_bu-outlined-bc: var(--black-300);
286
+ --_bu-outlined-bc-selected: var(--black-400);
287
+ --_bu-outlined-bg-selected: var(--_bu-bg-selected);
288
+ --_bu-outlined-fc-selected: var(--_bu-fc-selected);
444
289
 
445
- // ============================================================================
446
- // $ PRIMARY STYLE
447
- // ============================================================================
448
- .s-btn__primary {
449
- color: var(--theme-button-primary-color);
450
- background-color: var(--theme-button-primary-background-color);
451
- box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
290
+ .highcontrast-mode({
291
+ --_bu-filled-bg: var(--black-400);
292
+ --_bu-filled-bg-active: var(--black-600);
293
+ --_bu-filled-bg-hover: var(--black-500);
294
+ --_bu-filled-bg-selected: var(--black-700);
295
+ --_bu-filled-fc: var(--white);
296
+ --_bu-filled-fc-selected: var(--_bu-filled-fc);
452
297
 
453
- .dark-mode({
454
- &:not(:focus) {
455
- box-shadow: none;
298
+ &.s-btn__filled {
299
+ --_bu-number-fc: var(--black);
456
300
  }
301
+ });
302
+ }
303
+ &&__primary {
304
+ --_bu-bg: var(--theme-button-primary-background-color);
305
+ --_bu-bg-active: var(--theme-button-primary-active-background-color);
306
+ --_bu-bg-hover: var(--theme-button-primary-hover-background-color);
307
+ --_bu-bg-selected: var(--theme-button-primary-selected-background-color);
308
+ --_bu-bs: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
309
+ --_bu-fc: var(--theme-button-primary-color);
310
+ --_bu-fc-active: var(--theme-button-primary-hover-color);
311
+ --_bu-fc-hover: var(--theme-button-primary-hover-color);
312
+ --_bu-fc-selected: var(--theme-button-primary-selected-color);
313
+ --_bu-number-fc: var(--theme-button-primary-number-color);
457
314
 
458
- &:not(.is-selected) {
459
- background-color: var(--theme-secondary-300);
460
- color: var(--black);
461
- }
315
+ .dark-mode({
316
+ --_bu-bg: var(--theme-secondary-300);
317
+ --_bu-bg-active: var(--theme-secondary-400);
318
+ --_bu-bg-hover: var(--theme-secondary-350);
319
+ --_bu-fc: var(--black);
320
+ --_bu-fc-active: var(--_bu-fc);
321
+ --_bu-fc-hover: var(--_bu-fc);
322
+ --_bu-fc-selected: var(--white);
323
+ --_bu-number-fc: var(--white);
324
+ --_bu-number-fc-selected: var(--black);
462
325
  });
463
326
  .highcontrast-mode({
464
- &:not(.is-selected) {
465
- border-color: transparent;
466
- background-color: var(--theme-secondary-400);
467
- color: var(--white);
468
- }
327
+ --_bu-bc: transparent;
469
328
  });
470
- .light-mode-forced({
471
- box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
472
-
473
- &:not(.is-selected) {
474
- color: var(--white);
475
- }
329
+ .highcontrast-dark-mode({
330
+ --_bu-bg: var(--theme-secondary-400);
331
+ --_bu-bg-active: var(--theme-secondary-600);
332
+ --_bu-bg-hover: var(--theme-secondary-500);
333
+ --_bu-fc: var(--white);
334
+ --_bu-number-fc: var(--black);
476
335
  });
477
-
478
- &:hover,
479
- &:focus,
480
- &:active {
481
- color: var(--theme-button-primary-hover-color);
482
- background-color: var(--theme-button-primary-hover-background-color);
483
- }
484
-
485
- &:active {
486
- background-color: var(--theme-button-primary-active-background-color);
487
- box-shadow: none;
488
- }
489
-
490
- &:focus {
491
- .highcontrast-mode({
492
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
493
- });
494
- }
495
-
496
- &.is-selected {
497
- color: var(--theme-button-primary-selected-color);
498
- background-color: var(--theme-button-primary-selected-background-color);
499
- }
500
-
501
- .s-btn--number {
502
- color: var(--theme-button-primary-number-color);
503
- }
504
336
  }
505
337
 
506
- // ============================================================================
507
- // $ MISC STYLES
508
- // ============================================================================
509
- .s-btn__google {
510
- border-color: var(--bc-medium);
511
- background-color: var(--white);
512
- color: var(--black-700);
513
-
514
- &:hover,
515
- &:focus {
516
- border-color: var(--bc-darker);
517
- background-color: var(--black-025);
518
- color: var(--black-800);
519
- }
520
-
521
- &:active {
522
- background-color: var(--black-050);
523
- color: var(--black-900);
524
- }
525
-
526
- &:focus {
527
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
528
- }
338
+ // Social
339
+ &&__facebook,
340
+ &&__github {
341
+ .highcontrast-mode({
342
+ --_bu-bc: transparent;
343
+ });
529
344
  }
530
-
531
- .s-btn__facebook {
532
- border-color: transparent;
533
- background-color: #385499;
534
- color: #fff;
535
-
536
- .highcontrast-mode({ border-color: transparent; });
537
-
538
- &:hover,
539
- &:focus {
540
- background-color: darken(#385499, 5%);
541
- color: #fff;
542
- }
543
-
544
- &:active {
545
- background-color: darken(#385499, 10%);
546
- color: #fff;
547
- }
345
+ &&__facebook {
346
+ @_fb-brand: #385499;
347
+ --_bu-bc: transparent;
348
+ --_bu-bg: @_fb-brand;
349
+ --_bu-bg-active: darken(@_fb-brand, 10%);
350
+ --_bu-bg-hover: darken(@_fb-brand, 5%);
351
+ --_bu-fc: #fff;
352
+ --_bu-fc-active: var(--_bu-fc);
353
+ --_bu-fc-hover: var(--_bu-fc);
354
+ --_bu-hc-bc: transparent;
548
355
  }
549
-
550
- .s-btn__github {
551
- background-color: var(--black-750);
552
- color: var(--white);
553
-
554
- .highcontrast-mode({ border-color: transparent; });
555
-
556
- &:hover,
557
- &:focus {
558
- background-color: var(--black-800);
559
- color: var(--white);
560
- }
561
-
562
- &:active {
563
- background-color: var(--black-900);
564
- color: var(--white);
565
- }
566
-
567
- &:focus {
568
- box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
569
- }
356
+ &&__google {
357
+ --_bu-bc: var(--bc-medium);
358
+ --_bu-bg: var(--white);
359
+ --_bu-bg-active: var(--black-050);
360
+ --_bu-bg-hover: var(--black-025);
361
+ --_bu-fc: var(--fc-medium);
362
+ --_bu-fc-active: var(--fc-dark);
363
+ --_bu-fc-hover: var(--black-800);
364
+ --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring-muted);
570
365
  }
571
-
572
- .s-btn__unset,
573
- .s-btn__unset:hover,
574
- .s-btn__unset:active,
575
- .s-btn__unset:focus {
576
- padding: 0;
577
- border: none;
578
- outline: initial;
579
- font: unset;
580
- border-radius: 0;
581
- color: unset;
582
- background: none;
583
- box-shadow: none;
584
- cursor: default;
585
- user-select: auto;
366
+ &&__github {
367
+ --_bu-bg: var(--black-750);
368
+ --_bu-bg-active: var(--black);
369
+ --_bu-bg-hover: var(--black-800);
370
+ --_bu-fc: var(--white);
371
+ --_bu-fc-active: var(--white);
372
+ --_bu-fc-hover: var(--white);
373
+ --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring-muted);
374
+ --_bu-hc-bc: transparent;
586
375
  }
587
376
 
588
- .s-btn__link {
589
- display: inline;
590
- padding: 0;
591
- border: none;
592
- border-radius: 0;
593
- outline: initial;
594
- font: inherit;
595
- background: none;
596
- box-shadow: none;
597
- text-align: inherit;
377
+ // CHILD ELEMENTS
378
+ & &--badge {
379
+ opacity: var(--_bu-badge-o);
380
+ display: inline-block;
381
+ border-radius: var(--br-sm);
382
+ padding: var(--su2) calc(var(--su4) - var(--su1));
383
+ font-size: var(--fs-caption);
384
+ line-height: var(--lh-xs);
385
+ background-color: currentColor;
386
+ }
387
+ & &--number {
388
+ color: var(--_bu-number-fc);
389
+ }
390
+ &--radio { // This lives alongside a .s-btn element
391
+ .v-visible-sr;
392
+ }
598
393
 
599
- .s-link();
394
+ // INTERACTION
395
+ &:not(.is-selected):not(&__link):not(&__unset) {
396
+ &:hover, &:focus {
397
+ &.s-btn__filled {
398
+ background-color: var(--_bu-filled-bg-hover);
399
+ color: var(--_bu-filled-fc-hover);
400
+ }
600
401
 
601
- &:hover,
602
- &:active,
603
- &:focus,
604
- &[disabled]
605
- &[aria-disabled="true"] {
606
- background: none;
607
- box-shadow: none;
402
+ background-color: var(--_bu-bg-hover);
403
+ color: var(--_bu-fc-hover);
608
404
  }
609
-
610
- &.s-btn__dropdown {
611
- padding-right: 0.9em;
612
-
613
- &:after {
614
- right: 0;
405
+ &:active {
406
+ &.s-btn__filled {
407
+ background-color: var(--_bu-filled-bg-active);
408
+ color: var(--_bu-filled-fc-active);
615
409
  }
616
- }
617
- }
618
410
 
619
- .s-btn__unset,
620
- .s-btn__link {
621
- &:focus,
622
- &:focus-visible {
623
- outline-style: auto;
411
+ background-color: var(--_bu-bg-active);
412
+ color: var(--_bu-fc-active);
624
413
  }
625
414
  }
626
-
627
- .s-btn__icon {
628
- // -- BUTTONS WITH ICONS
629
- // ------------------------------------------------------------------------
630
- // [1] Most svg icons are 18px tall, but the button's line-height is 1 (13px).
631
- // This means we need to off set the margin y-axis so we don't add
632
- // additional height to the button.
633
- // ------------------------------------------------------------------------
634
- .svg-icon {
635
- vertical-align: baseline;
636
- margin-top: -0.3em; // [1]
637
- margin-bottom: -0.3em; // [1]
638
- transition: opacity 200ms var(--te-smooth); // Animate the transition to .is-loading
639
- }
415
+ &:focus,
416
+ &--radio:focus + & {
417
+ box-shadow: var(--_bu-focus-ring);
418
+ outline: none;
640
419
  }
641
420
 
642
- // $$ Loading Icon
643
- // see spinner.less for full implementation
644
- // ----------------------------------------------------------------------------
645
- .s-btn.is-loading .svg-icon:first-child {
646
- margin-left: -23px;
647
- // If the first thing in the button is an icon, let's hide it on loading
648
- // We only want to modify the visibility, since we still want it to have shape and keep the same layout.
649
- opacity: 0;
650
- }
421
+ // STYLES MODIFIED BY COMPONENT-SPECIFIC CUSTOM PROPERTIES
422
+ background-color: var(--_bu-bg);
423
+ border: var(--_bu-baw) solid var(--_bu-bc);
424
+ border-radius: var(--_bu-br);
425
+ box-shadow: var(--_bu-bs);
426
+ color: var(--_bu-fc);
427
+ font-size: var(--_bu-fs);
428
+ padding: var(--_bu-p);
429
+
430
+ // STATIC COMPONENT STYLES
431
+ cursor: pointer;
432
+ display: inline-block;
433
+ font-family: inherit;
434
+ font-weight: normal;
435
+ line-height: var(--lh-sm);
436
+ position: relative;
437
+ outline: none;
438
+ text-align: center;
439
+ text-decoration: none;
440
+ user-select: none;
651
441
  }
442
+
443
+ // [1] Guard against the difference in configurable resets
444
+ // Eric Meyer's reset does not include this, while normalize.css does
445
+ // Correct the inability to style buttons in iOS and Safari.
446
+ // [2] If the first thing in the button is an icon, let's hide it on loading
447
+ // We only want to modify the visibility, since we still want it to have shape and keep the same layout.
448
+ // [3] Most svg icons are 18px tall, but the button's line-height is 1 (13px).
449
+ // This means we need to off set the margin y-axis so we don't add
450
+ // additional height to the button.