@solexllc/usx 0.1.5 → 0.1.7

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 (45) hide show
  1. package/package.json +2 -2
  2. package/src/components/_accordion.scss +1 -3
  3. package/src/components/_alert.scss +14 -42
  4. package/src/components/_attribution.scss +1 -3
  5. package/src/components/_avatar-group.scss +1 -3
  6. package/src/components/_avatar.scss +4 -4
  7. package/src/components/_banner.scss +5 -15
  8. package/src/components/_block.scss +1 -3
  9. package/src/components/_branding.scss +2 -6
  10. package/src/components/_breadcrumb.scss +5 -15
  11. package/src/components/_button-group.scss +1 -3
  12. package/src/components/_button.scss +15 -45
  13. package/src/components/_carousel.scss +6 -18
  14. package/src/components/_checkbox.scss +7 -21
  15. package/src/components/_clickable.scss +4 -12
  16. package/src/components/_collection.scss +2 -6
  17. package/src/components/_combobox.scss +7 -19
  18. package/src/components/_file-input.scss +15 -43
  19. package/src/components/_footer.scss +23 -69
  20. package/src/components/_form-group.scss +5 -15
  21. package/src/components/_header.scss +30 -90
  22. package/src/components/_hero.scss +94 -54
  23. package/src/components/_icon-list.scss +1 -3
  24. package/src/components/_in-page-nav.scss +9 -27
  25. package/src/components/_input.scss +17 -51
  26. package/src/components/_language-selector.scss +3 -9
  27. package/src/components/_layout.scss +1 -3
  28. package/src/components/_link.scss +7 -21
  29. package/src/components/_misc-banner.scss +1 -3
  30. package/src/components/_modal.scss +4 -12
  31. package/src/components/_page.scss +2 -6
  32. package/src/components/_pagination.scss +13 -37
  33. package/src/components/_process-list.scss +4 -12
  34. package/src/components/_radio-buttons.scss +6 -18
  35. package/src/components/_section.scss +2 -6
  36. package/src/components/_select.scss +17 -51
  37. package/src/components/_sidenav.scss +10 -30
  38. package/src/components/_site-alert.scss +5 -15
  39. package/src/components/_step-indicator.scss +16 -48
  40. package/src/components/_summary-box.scss +5 -15
  41. package/src/components/_table.scss +2 -6
  42. package/src/components/_task-list.scss +6 -18
  43. package/src/components/_text-area.scss +15 -45
  44. package/src/components/_theme-picker.scss +2 -6
  45. package/src/components/_tooltip.scss +1 -3
package/src/components/_file-input.scss CHANGED
@@ -9,13 +9,9 @@
9
9
  /* ---------------------------------- */
10
10
 
11
11
  .usa-file-input__target {
12
- @if $usx-input-radius {
13
- border-radius: $usx-input-radius;
14
- }
12
+ border-radius: usx-when($usx-input-radius);
15
13
 
16
- @if $usx-input-border {
17
- border-color: $usx-input-border;
18
- }
14
+ border-color: usx-when($usx-input-border);
19
15
  }
20
16
 
21
17
  /* ---------------------------------- */
@@ -25,28 +21,20 @@
25
21
  /* ---------------------------------- */
26
22
 
27
23
  .usa-form-group--error .usa-file-input__target {
28
- @if $usx-input-error-border {
29
- border-color: $usx-input-error-border;
30
- }
24
+ border-color: usx-when($usx-input-error-border);
31
25
 
32
- @if $usx-file-input-border-width {
33
- border-width: $usx-file-input-border-width;
34
- }
26
+ border-width: usx-when($usx-file-input-border-width);
35
27
  }
36
28
 
37
29
  .usa-file-input__target.has-invalid-file {
38
30
  // For some reason, they use accent warm here. Very odd.
39
- @if $usx-color-accent-warm {
40
- border-color: $usx-color-accent-warm;
41
- }
31
+ border-color: usx-when($usx-color-accent-warm);
42
32
  }
43
33
 
44
34
  // USWDS bakes this message to a fixed "secondary-dark" red (#b50909)
45
35
  // regardless of theme — reuse the same error color as .usa-error-message.
46
36
  .has-invalid-file .usa-file-input__accepted-files-message {
47
- @if $usx-color-error {
48
- color: $usx-color-error;
49
- }
37
+ color: usx-when($usx-color-error);
50
38
  }
51
39
 
52
40
  /* ---------------------------------- */
@@ -103,26 +91,18 @@
103
91
  // so it doesn't track a themed link color otherwise — reuse the same
104
92
  // usx-link variables/states rather than introducing a separate token.
105
93
  .usa-file-input__choose {
106
- @if $usx-link-text {
107
- color: $usx-link-text;
108
- }
94
+ color: usx-when($usx-link-text);
109
95
 
110
96
  &:hover {
111
- @if $usx-link-text-hover {
112
- color: $usx-link-text-hover;
113
- }
97
+ color: usx-when($usx-link-text-hover);
114
98
  }
115
99
 
116
100
  &:active {
117
- @if $usx-link-text-active {
118
- color: $usx-link-text-active;
119
- }
101
+ color: usx-when($usx-link-text-active);
120
102
  }
121
103
 
122
104
  &:visited {
123
- @if $usx-link-text-visited {
124
- color: $usx-link-text-visited;
125
- }
105
+ color: usx-when($usx-link-text-visited);
126
106
  }
127
107
  }
128
108
 
@@ -130,7 +110,7 @@
130
110
 
131
111
  /* Managed-multiple file list */
132
112
 
133
- /* (VA.gov-style per-file delete rows, see FileInput.jsx) */
113
+ /* (VA.gov-style per-file delete rows, see FileInput.tsx) */
134
114
 
135
115
  /* ---------------------------------- */
136
116
 
@@ -154,17 +134,11 @@
154
134
  margin-bottom: 0.5rem;
155
135
  padding: 0.5rem 1rem;
156
136
 
157
- @if $usx-input-radius {
158
- border-radius: $usx-input-radius;
159
- }
137
+ border-radius: usx-when($usx-input-radius);
160
138
 
161
- @if $usx-file-input-item-border {
162
- border-color: $usx-file-input-item-border;
163
- }
139
+ border-color: usx-when($usx-file-input-item-border);
164
140
 
165
- @if $usx-file-input-item-border-width {
166
- border-width: $usx-file-input-item-border-width;
167
- }
141
+ border-width: usx-when($usx-file-input-item-border-width);
168
142
  }
169
143
 
170
144
  // Info stays on the left and shrinks (long names wrap) so the Delete button
@@ -189,9 +163,7 @@
189
163
  }
190
164
 
191
165
  .usx-file-input__file-size {
192
- @if $usx-color-base {
193
- color: $usx-color-base;
194
- }
166
+ color: usx-when($usx-color-base);
195
167
  }
196
168
 
197
169
  .usx-file-input__delete-button {
package/src/components/_footer.scss CHANGED
@@ -2,41 +2,27 @@
2
2
 
3
3
  /* stylelint-disable selector-class-pattern, no-descending-specificity -- Public USX classes use BEM naming; intentional cascade order. */
4
4
  .usx-footer {
5
- @if $usx-footer-bg {
6
- background-color: $usx-footer-bg;
7
- }
5
+ background-color: usx-when($usx-footer-bg);
8
6
 
9
- @if $usx-footer-border-top {
10
- border-top: $usx-footer-border-top;
11
- }
7
+ border-top: usx-when($usx-footer-border-top);
12
8
 
13
- @if $usx-footer-text {
14
- color: $usx-footer-text;
15
- }
9
+ color: usx-when($usx-footer-text);
16
10
 
17
11
  // ── Nav columns (big footer) ──────────────────────────────────────────────
18
12
  &__nav-column {
19
13
  .usa-footer__primary-link {
20
- @if $usx-footer-heading-text {
21
- color: $usx-footer-heading-text;
22
- }
14
+ color: usx-when($usx-footer-heading-text);
23
15
 
24
16
  &.usa-footer__primary-link--button {
25
- @if $usx-footer-bg {
26
- background-color: $usx-footer-bg;
27
- }
17
+ background-color: usx-when($usx-footer-bg);
28
18
  }
29
19
  }
30
20
 
31
21
  .usa-footer__secondary-link a {
32
- @if $usx-footer-secondary-link-text {
33
- color: $usx-footer-secondary-link-text;
34
- }
22
+ color: usx-when($usx-footer-secondary-link-text);
35
23
 
36
24
  &:hover {
37
- @if $usx-footer-secondary-link-text-hover {
38
- color: $usx-footer-secondary-link-text-hover;
39
- }
25
+ color: usx-when($usx-footer-secondary-link-text-hover);
40
26
  }
41
27
  }
42
28
  }
@@ -44,15 +30,11 @@
44
30
  // ── Sign-up form ─────────────────────────────────────────────────────────
45
31
  &__sign-up {
46
32
  .usa-sign-up__heading {
47
- @if $usx-footer-heading-text {
48
- color: $usx-footer-heading-text;
49
- }
33
+ color: usx-when($usx-footer-heading-text);
50
34
  }
51
35
 
52
36
  .usa-button {
53
- @if $usx-footer-sign-up-button-bg {
54
- background-color: $usx-footer-sign-up-button-bg;
55
- }
37
+ background-color: usx-when($usx-footer-sign-up-button-bg);
56
38
  }
57
39
  }
58
40
 
@@ -60,9 +42,7 @@
60
42
  &__logo {
61
43
  .usa-footer__logo-heading,
62
44
  a.usa-footer__logo-heading {
63
- @if $usx-footer-heading-secondary-text {
64
- color: $usx-footer-heading-secondary-text;
65
- }
45
+ color: usx-when($usx-footer-heading-secondary-text);
66
46
 
67
47
  text-decoration: none;
68
48
  }
@@ -70,22 +50,14 @@
70
50
 
71
51
  // ── Social links ─────────────────────────────────────────────────────────
72
52
  .usa-social-link {
73
- @if $usx-footer-link-text {
74
- color: $usx-footer-link-text;
75
- }
53
+ color: usx-when($usx-footer-link-text);
76
54
 
77
- @if $usx-footer-social-radius {
78
- border-radius: $usx-footer-social-radius;
79
- }
55
+ border-radius: usx-when($usx-footer-social-radius);
80
56
 
81
57
  &:hover {
82
- @if $usx-footer-social-bg-hover {
83
- background-color: $usx-footer-social-bg-hover;
84
- }
58
+ background-color: usx-when($usx-footer-social-bg-hover);
85
59
 
86
- @if $usx-footer-social-hover-border {
87
- border: $usx-footer-social-hover-border;
88
- }
60
+ border: usx-when($usx-footer-social-hover-border);
89
61
 
90
62
  @if $usx-footer-social-hover-outline {
91
63
  outline: $usx-footer-social-hover-outline;
@@ -94,9 +66,7 @@
94
66
  }
95
67
 
96
68
  .usa-social-link__icon {
97
- @if $usx-footer-social-icon-filter {
98
- filter: $usx-footer-social-icon-filter;
99
- }
69
+ filter: usx-when($usx-footer-social-icon-filter);
100
70
  }
101
71
  }
102
72
 
@@ -107,20 +77,14 @@
107
77
  }
108
78
 
109
79
  .usa-footer__contact-heading {
110
- @if $usx-footer-heading-secondary-text {
111
- color: $usx-footer-heading-secondary-text;
112
- }
80
+ color: usx-when($usx-footer-heading-secondary-text);
113
81
  }
114
82
 
115
83
  a {
116
- @if $usx-footer-link-text {
117
- color: $usx-footer-link-text;
118
- }
84
+ color: usx-when($usx-footer-link-text);
119
85
 
120
86
  &:hover {
121
- @if $usx-footer-link-text-hover {
122
- color: $usx-footer-link-text-hover;
123
- }
87
+ color: usx-when($usx-footer-link-text-hover);
124
88
  }
125
89
  }
126
90
  }
@@ -129,32 +93,22 @@
129
93
  .usa-footer__secondary-section {
130
94
  background-color: unset;
131
95
 
132
- @if $usx-footer-secondary-section-border-top {
133
- border-top: $usx-footer-secondary-section-border-top;
134
- }
96
+ border-top: usx-when($usx-footer-secondary-section-border-top);
135
97
  }
136
98
 
137
99
  .usa-footer__primary-section {
138
- @if $usx-footer-primary-bg {
139
- background-color: $usx-footer-primary-bg;
140
- }
100
+ background-color: usx-when($usx-footer-primary-bg);
141
101
 
142
- @if $usx-footer-primary-section-border-top {
143
- border-top: $usx-footer-primary-section-border-top;
144
- }
102
+ border-top: usx-when($usx-footer-primary-section-border-top);
145
103
  }
146
104
 
147
105
  // ── Primary-section nav links ────────────────────────────────────────────
148
106
  .usa-footer__nav {
149
107
  a.usa-footer__primary-link {
150
- @if $usx-footer-link-text {
151
- color: $usx-footer-link-text;
152
- }
108
+ color: usx-when($usx-footer-link-text);
153
109
 
154
110
  &:hover {
155
- @if $usx-footer-link-text-hover {
156
- color: $usx-footer-link-text-hover;
157
- }
111
+ color: usx-when($usx-footer-link-text-hover);
158
112
  }
159
113
  }
160
114
  }
package/src/components/_form-group.scss CHANGED
@@ -4,29 +4,19 @@
4
4
  .usa-label,
5
5
  .usa-legend,
6
6
  .usa-fieldset > legend {
7
- @if $usx-text-ink {
8
- color: $usx-text-ink;
9
- }
7
+ color: usx-when($usx-text-ink);
10
8
  }
11
9
 
12
10
  .usa-hint {
13
- @if $usx-text-subtle {
14
- color: $usx-text-subtle;
15
- }
11
+ color: usx-when($usx-text-subtle);
16
12
  }
17
13
 
18
14
  .usx-form-group.usa-form-group--error {
19
- @if $usx-form-group-error-text {
20
- border-color: $usx-form-group-error-text;
21
- }
15
+ border-color: usx-when($usx-form-group-error-text);
22
16
 
23
- @if $usx-form-group-error-border-width {
24
- border-width: $usx-form-group-error-border-width;
25
- }
17
+ border-width: usx-when($usx-form-group-error-border-width);
26
18
  }
27
19
 
28
20
  .usa-error-message {
29
- @if $usx-color-error {
30
- color: $usx-color-error;
31
- }
21
+ color: usx-when($usx-color-error);
32
22
  }
package/src/components/_header.scss CHANGED
@@ -3,21 +3,13 @@
3
3
  /* stylelint-disable selector-class-pattern, no-descending-specificity -- Public USX classes use BEM naming; intentional cascade order. */
4
4
 
5
5
  .usx-header {
6
- @if $usx-header-bg {
7
- background-color: $usx-header-bg;
8
- }
6
+ background-color: usx-when($usx-header-bg);
9
7
 
10
- @if $usx-header-text {
11
- color: $usx-header-text;
12
- }
8
+ color: usx-when($usx-header-text);
13
9
 
14
- @if $usx-header-border-bottom {
15
- border-bottom: $usx-header-border-bottom;
16
- }
10
+ border-bottom: usx-when($usx-header-border-bottom);
17
11
 
18
- @if $usx-header-border-top {
19
- border-top: $usx-header-border-top;
20
- }
12
+ border-top: usx-when($usx-header-border-top);
21
13
 
22
14
  &::after {
23
15
  display: none;
@@ -28,14 +20,10 @@
28
20
 
29
21
  .usa-navbar {
30
22
  .usa-menu-btn {
31
- @if $usx-header-menu-btn-bg {
32
- background-color: $usx-header-menu-btn-bg;
33
- }
23
+ background-color: usx-when($usx-header-menu-btn-bg);
34
24
 
35
25
  &:hover {
36
- @if $usx-header-menu-btn-bg-hover {
37
- background-color: $usx-header-menu-btn-bg-hover;
38
- }
26
+ background-color: usx-when($usx-header-menu-btn-bg-hover);
39
27
  }
40
28
  }
41
29
  }
@@ -66,17 +54,13 @@
66
54
  // Header.tsx), so neither rule can be nested under .usx-header.
67
55
  .usx-nav {
68
56
  @media (width < 64em) {
69
- @if $usx-header-nav-bg-mobile {
70
- background-color: $usx-header-nav-bg-mobile;
71
- }
57
+ background-color: usx-when($usx-header-nav-bg-mobile);
72
58
  }
73
59
  }
74
60
 
75
61
  :has(> .usa-header--extended) .usx-nav {
76
62
  @media (width >=64em) {
77
- @if $usx-header-nav-bg {
78
- background-color: $usx-header-nav-bg;
79
- }
63
+ background-color: usx-when($usx-header-nav-bg);
80
64
  }
81
65
  }
82
66
 
@@ -89,9 +73,7 @@
89
73
  // of the drawer's own).
90
74
  @media (width >=64em) {
91
75
  .usx-nav {
92
- @if $usx-header-nav-border-bottom {
93
- border-bottom: $usx-header-nav-border-bottom;
94
- }
76
+ border-bottom: usx-when($usx-header-nav-border-bottom);
95
77
 
96
78
  @if $usx-header-nav-border-top {
97
79
  border-top: $usx-header-nav-border-top;
@@ -182,14 +164,10 @@
182
164
 
183
165
  // Vendor hardcodes this hover background at mobile only (and resets
184
166
  // it to transparent again at desktop) — match that scoping.
185
- @if $usx-header-nav-link-bg-hover {
186
- background-color: $usx-header-nav-link-bg-hover;
187
- }
167
+ background-color: usx-when($usx-header-nav-link-bg-hover);
188
168
 
189
169
  &>span::after {
190
- @if $usx-header-nav-link-text-hover-mobile {
191
- background-color: $usx-header-nav-link-text-hover-mobile;
192
- }
170
+ background-color: usx-when($usx-header-nav-link-text-hover-mobile);
193
171
  }
194
172
  }
195
173
  }
@@ -199,9 +177,7 @@
199
177
  color: $usx-header-nav-link-text-hover;
200
178
 
201
179
  &>span::after {
202
- @if $usx-header-nav-link-text-hover {
203
- background-color: $usx-header-nav-link-text-hover;
204
- }
180
+ background-color: usx-when($usx-header-nav-link-text-hover);
205
181
  }
206
182
  }
207
183
  }
@@ -212,9 +188,7 @@
212
188
 
213
189
  // Vendor hardcodes this hover background at mobile only; desktop
214
190
  // links get no hover background at all.
215
- @if $usx-header-nav-link-bg-hover {
216
- background-color: $usx-header-nav-link-bg-hover;
217
- }
191
+ background-color: usx-when($usx-header-nav-link-bg-hover);
218
192
  }
219
193
 
220
194
  @media (width >=64em) {
@@ -235,14 +209,10 @@
235
209
  // drawer link tokens, not the desktop primary-nav ones.
236
210
  // .usa-icon fills via `currentColor`, so tint it with `color`, not
237
211
  // `background-color` (which would draw a solid box behind the icon).
238
- @if $usx-header-nav-link-text-mobile {
239
- color: $usx-header-nav-link-text-mobile;
240
- }
212
+ color: usx-when($usx-header-nav-link-text-mobile);
241
213
 
242
214
  &:hover {
243
- @if $usx-header-nav-link-text-hover-mobile {
244
- color: $usx-header-nav-link-text-hover-mobile;
245
- }
215
+ color: usx-when($usx-header-nav-link-text-hover-mobile);
246
216
  }
247
217
  }
248
218
 
@@ -294,14 +264,10 @@
294
264
  &:not(.usa-nav__primary button:hover,
295
265
  .usa-nav__primary > .usa-nav__primary-item > a:hover,
296
266
  .usa-current) {
297
- @if $usx-header-nav-link-text-mobile {
298
- color: $usx-header-nav-link-text-mobile;
299
- }
267
+ color: usx-when($usx-header-nav-link-text-mobile);
300
268
 
301
269
  &>span::after {
302
- @if $usx-header-nav-link-text-mobile {
303
- background-color: $usx-header-nav-link-text-mobile;
304
- }
270
+ background-color: usx-when($usx-header-nav-link-text-mobile);
305
271
  }
306
272
  }
307
273
  }
@@ -312,14 +278,10 @@
312
278
  .usa-nav__primary button:hover,
313
279
  .usa-nav__primary > .usa-nav__primary-item > a:hover,
314
280
  .usa-current) {
315
- @if $usx-header-nav-link-text {
316
- color: $usx-header-nav-link-text;
317
- }
281
+ color: usx-when($usx-header-nav-link-text);
318
282
 
319
283
  &>span::after {
320
- @if $usx-header-nav-link-text {
321
- background-color: $usx-header-nav-link-text;
322
- }
284
+ background-color: usx-when($usx-header-nav-link-text);
323
285
  }
324
286
  }
325
287
  }
@@ -329,9 +291,7 @@
329
291
  // exists in vendor's desktop rules).
330
292
  @media (width >=64em) {
331
293
  &.usa-current {
332
- @if $usx-header-nav-link-text {
333
- color: $usx-header-nav-link-text;
334
- }
294
+ color: usx-when($usx-header-nav-link-text);
335
295
  }
336
296
  }
337
297
 
@@ -340,17 +300,13 @@
340
300
  // desktop bottom-bar treatment at this width.
341
301
  @media (width < 64em) {
342
302
  &.usa-current {
343
- @if $usx-header-nav-link-text-hover-mobile {
344
- color: $usx-header-nav-link-text-hover-mobile;
345
- }
303
+ color: usx-when($usx-header-nav-link-text-hover-mobile);
346
304
 
347
305
  font-weight: 700;
348
306
  position: relative;
349
307
 
350
308
  &::after {
351
- @if $usx-header-nav-link-text-hover-mobile {
352
- background-color: $usx-header-nav-link-text-hover-mobile;
353
- }
309
+ background-color: usx-when($usx-header-nav-link-text-hover-mobile);
354
310
 
355
311
  border-radius: 99rem;
356
312
  content: "";
@@ -409,15 +365,11 @@
409
365
  }
410
366
 
411
367
  &+.usa-nav__submenu {
412
- @if $usx-header-nav-submenu-bg {
413
- background-color: $usx-header-nav-submenu-bg;
414
- }
368
+ background-color: usx-when($usx-header-nav-submenu-bg);
415
369
 
416
370
  &::before,
417
371
  &::after {
418
- @if $usx-header-nav-submenu-bg {
419
- background-color: $usx-header-nav-submenu-bg;
420
- }
372
+ background-color: usx-when($usx-header-nav-submenu-bg);
421
373
  }
422
374
  }
423
375
  }
@@ -425,14 +377,10 @@
425
377
  }
426
378
 
427
379
  .usa-nav__secondary-item>a {
428
- @if $usx-header-secondary-link-text {
429
- color: $usx-header-secondary-link-text;
430
- }
380
+ color: usx-when($usx-header-secondary-link-text);
431
381
 
432
382
  &:hover {
433
- @if $usx-header-secondary-link-text-hover {
434
- color: $usx-header-secondary-link-text-hover;
435
- }
383
+ color: usx-when($usx-header-secondary-link-text-hover);
436
384
  }
437
385
  }
438
386
 
@@ -456,24 +404,16 @@
456
404
  // Header.tsx), so the rule above never reaches them — left alone they
457
405
  // fall back to vendor's hardcoded gray/blue instead of the active theme.
458
406
  .usa-nav__submenu-item>a {
459
- @if $usx-header-nav-link-text {
460
- color: $usx-header-nav-link-text;
461
- }
407
+ color: usx-when($usx-header-nav-link-text);
462
408
 
463
409
  &:hover {
464
- @if $usx-header-nav-link-text-hover {
465
- color: $usx-header-nav-link-text-hover;
466
- }
410
+ color: usx-when($usx-header-nav-link-text-hover);
467
411
 
468
- @if $usx-header-nav-link-bg-hover {
469
- background-color: $usx-header-nav-link-bg-hover;
470
- }
412
+ background-color: usx-when($usx-header-nav-link-bg-hover);
471
413
  }
472
414
 
473
415
  &.usa-current {
474
- @if $usx-header-nav-link-text-hover {
475
- color: $usx-header-nav-link-text-hover;
476
- }
416
+ color: usx-when($usx-header-nav-link-text-hover);
477
417
 
478
418
  font-weight: 700;
479
419
  }