@solexllc/usx 0.1.5 → 0.1.6

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 (44) 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/_banner.scss +5 -15
  7. package/src/components/_block.scss +1 -3
  8. package/src/components/_branding.scss +2 -6
  9. package/src/components/_breadcrumb.scss +5 -15
  10. package/src/components/_button-group.scss +1 -3
  11. package/src/components/_button.scss +15 -45
  12. package/src/components/_carousel.scss +6 -18
  13. package/src/components/_checkbox.scss +7 -21
  14. package/src/components/_clickable.scss +4 -12
  15. package/src/components/_collection.scss +2 -6
  16. package/src/components/_combobox.scss +7 -19
  17. package/src/components/_file-input.scss +15 -43
  18. package/src/components/_footer.scss +23 -69
  19. package/src/components/_form-group.scss +5 -15
  20. package/src/components/_header.scss +30 -90
  21. package/src/components/_hero.scss +94 -54
  22. package/src/components/_icon-list.scss +1 -3
  23. package/src/components/_in-page-nav.scss +9 -27
  24. package/src/components/_input.scss +17 -51
  25. package/src/components/_language-selector.scss +3 -9
  26. package/src/components/_layout.scss +1 -3
  27. package/src/components/_link.scss +7 -21
  28. package/src/components/_misc-banner.scss +1 -3
  29. package/src/components/_modal.scss +4 -12
  30. package/src/components/_page.scss +2 -6
  31. package/src/components/_pagination.scss +13 -37
  32. package/src/components/_process-list.scss +4 -12
  33. package/src/components/_radio-buttons.scss +6 -18
  34. package/src/components/_section.scss +2 -6
  35. package/src/components/_select.scss +17 -51
  36. package/src/components/_sidenav.scss +10 -30
  37. package/src/components/_site-alert.scss +5 -15
  38. package/src/components/_step-indicator.scss +16 -48
  39. package/src/components/_summary-box.scss +5 -15
  40. package/src/components/_table.scss +2 -6
  41. package/src/components/_task-list.scss +6 -18
  42. package/src/components/_text-area.scss +15 -45
  43. package/src/components/_theme-picker.scss +2 -6
  44. package/src/components/_tooltip.scss +1 -3
package/src/components/_radio-buttons.scss CHANGED
@@ -2,15 +2,11 @@
2
2
 
3
3
  /* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
4
4
  .usa-radio__label {
5
- @if $usx-text-ink {
6
- color: $usx-text-ink;
7
- }
5
+ color: usx-when($usx-text-ink);
8
6
  }
9
7
 
10
8
  .usa-radio__input--tile + .usa-radio__label {
11
- @if $usx-surface-1 {
12
- background-color: $usx-surface-1;
13
- }
9
+ background-color: usx-when($usx-surface-1);
14
10
  }
15
11
 
16
12
  .usa-radio.usx-radio {
@@ -28,19 +24,13 @@
28
24
  }
29
25
 
30
26
  .usa-radio__input--tile + .usa-radio__label {
31
- @if $usx-checkable-tile-border {
32
- border-color: $usx-checkable-tile-border;
33
- }
27
+ border-color: usx-when($usx-checkable-tile-border);
34
28
 
35
- @if $usx-checkable-tile-border-width {
36
- border-width: $usx-checkable-tile-border-width;
37
- }
29
+ border-width: usx-when($usx-checkable-tile-border-width);
38
30
  }
39
31
 
40
32
  .usa-radio__label::before {
41
- @if $usx-checkable-bg {
42
- background-color: $usx-checkable-bg;
43
- }
33
+ background-color: usx-when($usx-checkable-bg);
44
34
 
45
35
  @if $usx-checkable-border {
46
36
  box-shadow: 0 0 0 2px $usx-checkable-border;
@@ -58,9 +48,7 @@
58
48
  }
59
49
 
60
50
  &.usa-radio__input--tile + .usa-radio__label {
61
- @if $usx-color-primary {
62
- border-color: $usx-color-primary;
63
- }
51
+ border-color: usx-when($usx-color-primary);
64
52
  }
65
53
  }
66
54
  }
package/src/components/_section.scss CHANGED
@@ -4,13 +4,9 @@
4
4
  .usx-section {
5
5
  margin: 2rem 0;
6
6
 
7
- @if $usx-section-bg {
8
- background-color: $usx-section-bg;
9
- }
7
+ background-color: usx-when($usx-section-bg);
10
8
 
11
- @if $usx-section-text {
12
- color: $usx-section-text;
13
- }
9
+ color: usx-when($usx-section-text);
14
10
  }
15
11
 
16
12
  .usx-section__title {
package/src/components/_select.scss CHANGED
@@ -18,13 +18,9 @@
18
18
  height: auto;
19
19
  min-height: 2.5rem;
20
20
 
21
- @if $usx-input-radius {
22
- border-radius: $usx-input-radius;
23
- }
21
+ border-radius: usx-when($usx-input-radius);
24
22
 
25
- @if $usx-input-padding {
26
- padding: $usx-input-padding;
27
- }
23
+ padding: usx-when($usx-input-padding);
28
24
  }
29
25
 
30
26
  /* ---------------------------------- */
@@ -35,64 +31,38 @@
35
31
 
36
32
  .usa-select.usx-select:not(.usa-input--error):not(.usa-input--success) {
37
33
  &:not(:disabled) {
38
- @if $usx-input-bg {
39
- background-color: $usx-input-bg;
40
- }
34
+ background-color: usx-when($usx-input-bg);
41
35
 
42
- @if $usx-input-text {
43
- color: $usx-input-text;
44
- }
36
+ color: usx-when($usx-input-text);
45
37
 
46
- @if $usx-input-border {
47
- border-color: $usx-input-border;
48
- }
38
+ border-color: usx-when($usx-input-border);
49
39
  }
50
40
  }
51
41
 
52
42
  .usa-select.usx-select.usa-input--error {
53
- @if $usx-input-error-border-width {
54
- border-width: $usx-input-error-border-width;
55
- }
43
+ border-width: usx-when($usx-input-error-border-width);
56
44
 
57
- @if $usx-input-error-border {
58
- border-color: $usx-input-error-border;
59
- }
45
+ border-color: usx-when($usx-input-error-border);
60
46
 
61
- @if $usx-input-error-border-style {
62
- border-style: $usx-input-error-border-style;
63
- }
47
+ border-style: usx-when($usx-input-error-border-style);
64
48
 
65
- @if $usx-input-error-padding-top {
66
- padding-top: $usx-input-error-padding-top;
67
- }
49
+ padding-top: usx-when($usx-input-error-padding-top);
68
50
 
69
- @if $usx-input-error-padding-bottom {
70
- padding-bottom: $usx-input-error-padding-bottom;
71
- }
51
+ padding-bottom: usx-when($usx-input-error-padding-bottom);
72
52
  }
73
53
 
74
54
  // Error can be toggled dynamically (e.g. character-count) on top of a
75
55
  // statically-applied success class, so error must win when both are present.
76
56
  .usa-select.usx-select.usa-input--success:not(.usa-input--error) {
77
- @if $usx-input-success-border-width {
78
- border-width: $usx-input-success-border-width;
79
- }
57
+ border-width: usx-when($usx-input-success-border-width);
80
58
 
81
- @if $usx-input-success-border {
82
- border-color: $usx-input-success-border;
83
- }
59
+ border-color: usx-when($usx-input-success-border);
84
60
 
85
- @if $usx-input-success-border-style {
86
- border-style: $usx-input-success-border-style;
87
- }
61
+ border-style: usx-when($usx-input-success-border-style);
88
62
 
89
- @if $usx-input-success-padding-top {
90
- padding-top: $usx-input-success-padding-top;
91
- }
63
+ padding-top: usx-when($usx-input-success-padding-top);
92
64
 
93
- @if $usx-input-success-padding-bottom {
94
- padding-bottom: $usx-input-success-padding-bottom;
95
- }
65
+ padding-bottom: usx-when($usx-input-success-padding-bottom);
96
66
  }
97
67
 
98
68
  /* ---------------------------------- */
@@ -102,11 +72,7 @@
102
72
  /* ---------------------------------- */
103
73
 
104
74
  .usa-select.usx-select:focus-visible {
105
- @if $usx-input-focus-outline {
106
- outline: $usx-input-focus-outline;
107
- }
75
+ outline: usx-when($usx-input-focus-outline);
108
76
 
109
- @if $usx-input-focus-outline-offset {
110
- outline-offset: $usx-input-focus-outline-offset;
111
- }
77
+ outline-offset: usx-when($usx-input-focus-outline-offset);
112
78
  }
package/src/components/_sidenav.scss CHANGED
@@ -8,13 +8,9 @@
8
8
  }
9
9
 
10
10
  .usx-sidenav.usa-sidenav {
11
- @if $usx-sidenav-border {
12
- border-bottom-color: $usx-sidenav-border;
13
- }
11
+ border-bottom-color: usx-when($usx-sidenav-border);
14
12
 
15
- @if $usx-sidenav-border-width {
16
- border-bottom-width: $usx-sidenav-border-width;
17
- }
13
+ border-bottom-width: usx-when($usx-sidenav-border-width);
18
14
 
19
15
  &.usx-sidenav--sticky {
20
16
  position: sticky;
@@ -22,48 +18,32 @@
22
18
  }
23
19
 
24
20
  .usa-sidenav__item {
25
- @if $usx-sidenav-border {
26
- border-top-color: $usx-sidenav-border;
27
- }
21
+ border-top-color: usx-when($usx-sidenav-border);
28
22
 
29
- @if $usx-sidenav-border-width {
30
- border-top-width: $usx-sidenav-border-width;
31
- }
23
+ border-top-width: usx-when($usx-sidenav-border-width);
32
24
  }
33
25
 
34
26
  a {
35
27
  &.usa-current {
36
- @if $usx-sidenav-current {
37
- color: $usx-sidenav-current;
38
- }
28
+ color: usx-when($usx-sidenav-current);
39
29
 
40
30
  &::after {
41
- @if $usx-sidenav-current {
42
- background-color: $usx-sidenav-current;
43
- }
31
+ background-color: usx-when($usx-sidenav-current);
44
32
  }
45
33
  }
46
34
 
47
35
  &:not(.usa-button):not(.usa-current) {
48
- @if $usx-sidenav-link-text {
49
- color: $usx-sidenav-link-text;
50
- }
36
+ color: usx-when($usx-sidenav-link-text);
51
37
 
52
38
  &:hover {
53
- @if $usx-sidenav-link-text-hover {
54
- color: $usx-sidenav-link-text-hover;
55
- }
39
+ color: usx-when($usx-sidenav-link-text-hover);
56
40
 
57
- @if $usx-sidenav-bg-hover {
58
- background-color: $usx-sidenav-bg-hover;
59
- }
41
+ background-color: usx-when($usx-sidenav-bg-hover);
60
42
  }
61
43
  }
62
44
 
63
45
  &:hover {
64
- @if $usx-sidenav-bg-hover {
65
- background-color: $usx-sidenav-bg-hover;
66
- }
46
+ background-color: usx-when($usx-sidenav-bg-hover);
67
47
  }
68
48
  }
69
49
  }
package/src/components/_site-alert.scss CHANGED
@@ -36,9 +36,7 @@
36
36
  &.usx-site-alert--maintenance, &.usx-site-alert--maintenance-warning {
37
37
  background-color: #f0f0f0;
38
38
 
39
- @if $usx-site-alert-maintenance-bg {
40
- background-color: $usx-site-alert-maintenance-bg;
41
- }
39
+ background-color: usx-when($usx-site-alert-maintenance-bg);
42
40
 
43
41
  .usa-alert {
44
42
  border: none;
@@ -48,25 +46,17 @@
48
46
  &.usx-site-alert--maintenance {
49
47
  border-top: 8px solid #b50909;
50
48
 
51
- @if $usx-color-error {
52
- border-color: $usx-color-error;
53
- }
49
+ border-color: usx-when($usx-color-error);
54
50
 
55
- @if $usx-alert-border-width {
56
- border-width: $usx-alert-border-width;
57
- }
51
+ border-width: usx-when($usx-alert-border-width);
58
52
  }
59
53
 
60
54
  &.usx-site-alert--maintenance-warning {
61
55
  border-top: 8px solid #ffbe2e;
62
56
 
63
- @if $usx-color-warning {
64
- border-color: $usx-color-warning;
65
- }
57
+ border-color: usx-when($usx-color-warning);
66
58
 
67
- @if $usx-alert-border-width {
68
- border-width: $usx-alert-border-width;
69
- }
59
+ border-width: usx-when($usx-alert-border-width);
70
60
  }
71
61
 
72
62
  .usa-alert.usx-alert .usa-alert__body {
package/src/components/_step-indicator.scss CHANGED
@@ -2,64 +2,44 @@
2
2
 
3
3
  /* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
4
4
  .usx-step-indicator {
5
- @if $usx-step-indicator-bg {
6
- background-color: $usx-step-indicator-bg;
7
- }
5
+ background-color: usx-when($usx-step-indicator-bg);
8
6
 
9
7
  .usa-step-indicator__heading {
10
- @if $usx-step-indicator-heading-text {
11
- color: $usx-step-indicator-heading-text;
12
- }
8
+ color: usx-when($usx-step-indicator-heading-text);
13
9
  }
14
10
 
15
11
  .usa-step-indicator__segment--complete {
16
12
  &::before, &::after {
17
- @if $usx-step-indicator-segment-complete {
18
- background-color: $usx-step-indicator-segment-complete;
19
- }
13
+ background-color: usx-when($usx-step-indicator-segment-complete);
20
14
  }
21
15
 
22
16
  .usa-step-indicator__segment-label {
23
- @if $usx-step-indicator-segment-complete {
24
- color: $usx-step-indicator-segment-complete;
25
- }
17
+ color: usx-when($usx-step-indicator-segment-complete);
26
18
  }
27
19
  }
28
20
 
29
21
  .usa-step-indicator__segment--current {
30
22
  &::before, &::after {
31
- @if $usx-step-indicator-segment-current {
32
- background-color: $usx-step-indicator-segment-current;
33
- }
23
+ background-color: usx-when($usx-step-indicator-segment-current);
34
24
  }
35
25
 
36
26
  .usa-step-indicator__segment-label {
37
- @if $usx-step-indicator-segment-current {
38
- color: $usx-step-indicator-segment-current;
39
- }
27
+ color: usx-when($usx-step-indicator-segment-current);
40
28
  }
41
29
  }
42
30
 
43
31
  .usa-step-indicator__current-step {
44
- @if $usx-step-indicator-segment-current {
45
- background-color: $usx-step-indicator-segment-current;
46
- }
32
+ background-color: usx-when($usx-step-indicator-segment-current);
47
33
 
48
- @if $usx-step-indicator-counter-text {
49
- color: $usx-step-indicator-counter-text;
50
- }
34
+ color: usx-when($usx-step-indicator-counter-text);
51
35
  }
52
36
 
53
37
  .usa-step-indicator__total-steps {
54
- @if $usx-step-indicator-segment-current {
55
- color: $usx-step-indicator-segment-current;
56
- }
38
+ color: usx-when($usx-step-indicator-segment-current);
57
39
  }
58
40
 
59
41
  .usa-step-indicator__segment-label {
60
- @if $usx-step-indicator-segment-label-text {
61
- color: $usx-step-indicator-segment-label-text;
62
- }
42
+ color: usx-when($usx-step-indicator-segment-label-text);
63
43
  }
64
44
 
65
45
  .usa-step-indicator__segment::after {
@@ -84,9 +64,7 @@
84
64
  // compiled default exactly — only the colors are themed.
85
65
  &.usa-step-indicator--counters, &.usa-step-indicator--counters-sm {
86
66
  .usa-step-indicator__segment::before {
87
- @if $usx-step-indicator-bg {
88
- background-color: $usx-step-indicator-bg;
89
- }
67
+ background-color: usx-when($usx-step-indicator-bg);
90
68
 
91
69
  @if $usx-step-indicator-segment-pending-border and $usx-step-indicator-bg {
92
70
  box-shadow:
@@ -94,37 +72,27 @@
94
72
  0 0 0 .25rem $usx-step-indicator-bg;
95
73
  }
96
74
 
97
- @if $usx-step-indicator-segment-label-text {
98
- color: $usx-step-indicator-segment-label-text;
99
- }
75
+ color: usx-when($usx-step-indicator-segment-label-text);
100
76
  }
101
77
 
102
78
  .usa-step-indicator__segment--complete::before {
103
- @if $usx-step-indicator-segment-complete {
104
- background-color: $usx-step-indicator-segment-complete;
105
- }
79
+ background-color: usx-when($usx-step-indicator-segment-complete);
106
80
 
107
81
  @if $usx-step-indicator-bg {
108
82
  box-shadow: 0 0 0 .25rem $usx-step-indicator-bg;
109
83
  }
110
84
 
111
- @if $usx-step-indicator-counter-text {
112
- color: $usx-step-indicator-counter-text;
113
- }
85
+ color: usx-when($usx-step-indicator-counter-text);
114
86
  }
115
87
 
116
88
  .usa-step-indicator__segment--current::before {
117
- @if $usx-step-indicator-segment-current {
118
- background-color: $usx-step-indicator-segment-current;
119
- }
89
+ background-color: usx-when($usx-step-indicator-segment-current);
120
90
 
121
91
  @if $usx-step-indicator-bg {
122
92
  box-shadow: 0 0 0 .25rem $usx-step-indicator-bg;
123
93
  }
124
94
 
125
- @if $usx-step-indicator-counter-text {
126
- color: $usx-step-indicator-counter-text;
127
- }
95
+ color: usx-when($usx-step-indicator-counter-text);
128
96
  }
129
97
  }
130
98
  }
package/src/components/_summary-box.scss CHANGED
@@ -2,25 +2,15 @@
2
2
 
3
3
  /* stylelint-disable selector-class-pattern -- Public USX classes use BEM naming. */
4
4
  .usa-summary-box.usx-summary-box {
5
- @if $usx-summary-box-border {
6
- border: $usx-summary-box-border;
7
- }
5
+ border: usx-when($usx-summary-box-border);
8
6
 
9
- @if $usx-summary-box-radius {
10
- border-radius: $usx-summary-box-radius;
11
- }
7
+ border-radius: usx-when($usx-summary-box-radius);
12
8
 
13
- @if $usx-summary-box-padding {
14
- padding: $usx-summary-box-padding;
15
- }
9
+ padding: usx-when($usx-summary-box-padding);
16
10
 
17
- @if $usx-summary-box-bg {
18
- background-color: $usx-summary-box-bg;
19
- }
11
+ background-color: usx-when($usx-summary-box-bg);
20
12
 
21
- @if $usx-summary-box-text {
22
- color: $usx-summary-box-text;
23
- }
13
+ color: usx-when($usx-summary-box-text);
24
14
 
25
15
  @if $usx-summary-box-link-text {
26
16
  .usa-summary-box__link:not(:visited):not(:hover) {
package/src/components/_table.scss CHANGED
@@ -96,9 +96,7 @@
96
96
  margin-bottom: 0.5rem;
97
97
  caption-side: top;
98
98
 
99
- @if $usx-text-ink {
100
- color: $usx-text-ink;
101
- }
99
+ color: usx-when($usx-text-ink);
102
100
  }
103
101
 
104
102
  // ── Cells ────────────────────────────────────────────────────────────────────
@@ -271,9 +269,7 @@
271
269
  padding: 2rem 1rem;
272
270
  font-style: italic;
273
271
 
274
- @if $usx-table-placeholder-text {
275
- color: $usx-table-placeholder-text;
276
- }
272
+ color: usx-when($usx-table-placeholder-text);
277
273
  }
278
274
 
279
275
  // ── Loading row (spinner while fetching next batch) ───────────────────────────
package/src/components/_task-list.scss CHANGED
@@ -9,25 +9,17 @@
9
9
  border-top: 2px solid #e2e8f0;
10
10
  border-bottom: 2px solid #e2e8f0;
11
11
 
12
- @if $usx-task-list-border {
13
- border-color: $usx-task-list-border;
14
- }
12
+ border-color: usx-when($usx-task-list-border);
15
13
 
16
- @if $usx-task-list-outer-border-width {
17
- border-width: $usx-task-list-outer-border-width;
18
- }
14
+ border-width: usx-when($usx-task-list-outer-border-width);
19
15
 
20
16
  li {
21
17
  &:not(:first-child) {
22
18
  border-top: 1px solid #e2e8f0;
23
19
 
24
- @if $usx-task-list-border {
25
- border-top-color: $usx-task-list-border;
26
- }
20
+ border-top-color: usx-when($usx-task-list-border);
27
21
 
28
- @if $usx-task-list-inner-border-width {
29
- border-top-width: $usx-task-list-inner-border-width;
30
- }
22
+ border-top-width: usx-when($usx-task-list-inner-border-width);
31
23
  }
32
24
  }
33
25
 
@@ -47,9 +39,7 @@
47
39
  &:hover {
48
40
  background-color: #e2e8f0;
49
41
 
50
- @if $usx-task-list-bg-hover {
51
- background-color: $usx-task-list-bg-hover;
52
- }
42
+ background-color: usx-when($usx-task-list-bg-hover);
53
43
  }
54
44
  }
55
45
 
@@ -58,9 +48,7 @@
58
48
  font-size: $usx-task-list-link-font-size !important;
59
49
  line-height: 1;
60
50
 
61
- @if $usx-task-list-link-text {
62
- color: $usx-task-list-link-text;
63
- }
51
+ color: usx-when($usx-task-list-link-text);
64
52
  }
65
53
 
66
54
  .usa-tag.usx-tag {
package/src/components/_text-area.scss CHANGED
@@ -9,13 +9,9 @@
9
9
  /* ---------------------------------- */
10
10
 
11
11
  .usa-textarea.usx-textarea {
12
- @if $usx-textarea-radius {
13
- border-radius: $usx-textarea-radius;
14
- }
12
+ border-radius: usx-when($usx-textarea-radius);
15
13
 
16
- @if $usx-textarea-padding {
17
- padding: $usx-textarea-padding;
18
- }
14
+ padding: usx-when($usx-textarea-padding);
19
15
  }
20
16
 
21
17
  /* ---------------------------------- */
@@ -26,62 +22,36 @@
26
22
 
27
23
  .usa-textarea.usx-textarea:not(.usa-input--error):not(.usa-input--success) {
28
24
  &:not(:disabled) {
29
- @if $usx-textarea-bg {
30
- background-color: $usx-textarea-bg;
31
- }
25
+ background-color: usx-when($usx-textarea-bg);
32
26
 
33
- @if $usx-textarea-text {
34
- color: $usx-textarea-text;
35
- }
27
+ color: usx-when($usx-textarea-text);
36
28
 
37
- @if $usx-textarea-border {
38
- border-color: $usx-textarea-border;
39
- }
29
+ border-color: usx-when($usx-textarea-border);
40
30
  }
41
31
  }
42
32
 
43
33
  .usa-textarea.usx-textarea.usa-input--error {
44
- @if $usx-input-error-border-width {
45
- border-width: $usx-input-error-border-width;
46
- }
34
+ border-width: usx-when($usx-input-error-border-width);
47
35
 
48
- @if $usx-input-error-border {
49
- border-color: $usx-input-error-border;
50
- }
36
+ border-color: usx-when($usx-input-error-border);
51
37
 
52
- @if $usx-input-error-border-style {
53
- border-style: $usx-input-error-border-style;
54
- }
38
+ border-style: usx-when($usx-input-error-border-style);
55
39
 
56
- @if $usx-input-error-padding-top {
57
- padding-top: $usx-input-error-padding-top;
58
- }
40
+ padding-top: usx-when($usx-input-error-padding-top);
59
41
 
60
- @if $usx-input-error-padding-bottom {
61
- padding-bottom: $usx-input-error-padding-bottom;
62
- }
42
+ padding-bottom: usx-when($usx-input-error-padding-bottom);
63
43
  }
64
44
 
65
45
  // Error can be toggled dynamically (e.g. character-count) on top of a
66
46
  // statically-applied success class, so error must win when both are present.
67
47
  .usa-textarea.usx-textarea.usa-input--success:not(.usa-input--error) {
68
- @if $usx-input-success-border-width {
69
- border-width: $usx-input-success-border-width;
70
- }
48
+ border-width: usx-when($usx-input-success-border-width);
71
49
 
72
- @if $usx-input-success-border {
73
- border-color: $usx-input-success-border;
74
- }
50
+ border-color: usx-when($usx-input-success-border);
75
51
 
76
- @if $usx-input-success-border-style {
77
- border-style: $usx-input-success-border-style;
78
- }
52
+ border-style: usx-when($usx-input-success-border-style);
79
53
 
80
- @if $usx-input-success-padding-top {
81
- padding-top: $usx-input-success-padding-top;
82
- }
54
+ padding-top: usx-when($usx-input-success-padding-top);
83
55
 
84
- @if $usx-input-success-padding-bottom {
85
- padding-bottom: $usx-input-success-padding-bottom;
86
- }
56
+ padding-bottom: usx-when($usx-input-success-padding-bottom);
87
57
  }
package/src/components/_theme-picker.scss CHANGED
@@ -5,9 +5,7 @@
5
5
  max-width: 20rem;
6
6
  color: #fff;
7
7
 
8
- @if $usx-theme-picker-trigger-text {
9
- color: $usx-theme-picker-trigger-text;
10
- }
8
+ color: usx-when($usx-theme-picker-trigger-text);
11
9
 
12
10
  &__panel {
13
11
  display: none;
@@ -48,9 +46,7 @@
48
46
  &__trigger {
49
47
  color: #fff;
50
48
 
51
- @if $usx-theme-picker-trigger-text {
52
- color: $usx-theme-picker-trigger-text;
53
- }
49
+ color: usx-when($usx-theme-picker-trigger-text);
54
50
  }
55
51
 
56
52
  &__icon {
package/src/components/_tooltip.scss CHANGED
@@ -26,9 +26,7 @@ $usx-triangle-size: 5px;
26
26
  }
27
27
  }
28
28
 
29
- @if $usx-tooltip-text {
30
- color: $usx-tooltip-text;
31
- }
29
+ color: usx-when($usx-tooltip-text);
32
30
 
33
31
  // Replace JS-injected inline positioning with CSS transforms
34
32
  &--top {