@sats-group/ui-lib 81.1.0 → 81.2.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 (34) hide show
  1. package/package.json +1 -1
  2. package/react/badge/badge.scss +13 -13
  3. package/react/banner/banner.scss +17 -17
  4. package/react/bomb/bomb.scss +4 -4
  5. package/react/checkbox/checkbox.scss +36 -36
  6. package/react/chip/chip.scss +10 -10
  7. package/react/chip-selected/chip-selected.scss +3 -3
  8. package/react/confirmation/confirmation.scss +4 -4
  9. package/react/context-menu/context-menu.scss +14 -14
  10. package/react/dropdown-list/dropdown-list.scss +33 -33
  11. package/react/expander/expander.scss +9 -9
  12. package/react/filter/filter.scss +11 -11
  13. package/react/flag/flag.scss +4 -4
  14. package/react/form-content/form-content.scss +11 -11
  15. package/react/link/link.scss +9 -9
  16. package/react/link-card/link-card.scss +5 -5
  17. package/react/message/message.scss +10 -10
  18. package/react/message-field/message-field.scss +2 -2
  19. package/react/modal/modal.scss +9 -9
  20. package/react/progress-bar/progress-bar.scss +7 -7
  21. package/react/radio/radio.scss +19 -19
  22. package/react/scale-bar/scale-bar.scss +3 -3
  23. package/react/search/search.scss +17 -17
  24. package/react/select/select.scss +17 -17
  25. package/react/tag/tag.scss +39 -39
  26. package/react/text-area/text-area.scss +32 -32
  27. package/react/text-input/text-input.scss +37 -37
  28. package/react/toggle/toggle.scss +4 -4
  29. package/react/toolbox/toolbox.scss +6 -6
  30. package/react/visually-button/visually-button.scss +79 -79
  31. package/tokens/colours.scss +3 -0
  32. package/tokens/default-colours.css +414 -0
  33. /package/tokens/{dark-variables.css → darkmode.css} +0 -0
  34. /package/tokens/{light-variables.css → lightmode.css} +0 -0
package/react/radio/radio.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use '../../tokens/light';
1
+ @use '../../tokens/colours';
2
2
  @use '../../tokens/spacing';
3
3
 
4
4
  .radio {
@@ -20,7 +20,7 @@
20
20
  // ticking one of them will result in the other ones still being
21
21
  // visually marked with an input error. The check for `:not(:valid)` fixes that.
22
22
  input:not(:valid) ~ #{$root}__label #{$root}__fake-element {
23
- border-color: light.$ge-signal-border-error;
23
+ border-color: var(--ge-signal-border-error);
24
24
  }
25
25
  }
26
26
 
@@ -43,10 +43,10 @@
43
43
  display: flex;
44
44
  flex-direction: column;
45
45
  padding-bottom: spacing.$s;
46
- border-bottom: 1px solid light.$ge-border-default;
46
+ border-bottom: 1px solid var(--ge-border-default);
47
47
 
48
48
  &--light {
49
- border-color: light.$ge-fixed-selector-unselected-default;
49
+ border-color: var(--ge-fixed-selector-unselected-default);
50
50
  }
51
51
  }
52
52
 
@@ -54,7 +54,7 @@
54
54
  position: relative;
55
55
  display: block;
56
56
  margin-right: 8px;
57
- border: 2px solid light.$ge-selector-primary-unselected-default;
57
+ border: 2px solid var(--ge-selector-primary-unselected-default);
58
58
  border-radius: 100%;
59
59
  box-sizing: border-box;
60
60
  flex-shrink: 0;
@@ -63,34 +63,34 @@
63
63
  &__description {
64
64
  margin-top: spacing.$xxs;
65
65
  margin-left: 31px;
66
- color: light.$on-surface-primary-alternate;
66
+ color: var(--on-surface-primary-alternate);
67
67
 
68
68
  &--light {
69
- color: light.$on-fixed-surface-primary-alternate;
69
+ color: var(--on-fixed-surface-primary-alternate);
70
70
  }
71
71
  }
72
72
 
73
73
  input:disabled ~ .radio__label {
74
- color: light.$on-surface-primary-disabled;
74
+ color: var(--on-surface-primary-disabled);
75
75
 
76
76
  .radio__fake-element {
77
- border-color: light.$ge-selector-primary-unselected-disabled;
77
+ border-color: var(--ge-selector-primary-unselected-disabled);
78
78
  }
79
79
  }
80
80
 
81
81
  input:disabled ~ .radio__description {
82
- color: light.$on-surface-primary-disabled;
82
+ color: var(--on-surface-primary-disabled);
83
83
  }
84
84
 
85
85
  input:checked ~ &__label &__fake-element {
86
- border-color: light.$ge-selector-primary-selected-default;
86
+ border-color: var(--ge-selector-primary-selected-default);
87
87
 
88
88
  &:before {
89
89
  content: '';
90
90
  position: absolute;
91
91
  top: 50%;
92
92
  left: 50%;
93
- background-color: light.$ge-selector-primary-selected-default;
93
+ background-color: var(--ge-selector-primary-selected-default);
94
94
  height: 14px;
95
95
  width: 14px;
96
96
  border-radius: 100%;
@@ -104,27 +104,27 @@
104
104
 
105
105
  &--light {
106
106
  .radio__fake-element {
107
- border-color: light.$ge-fixed-selector-unselected-default;
107
+ border-color: var(--ge-fixed-selector-unselected-default);
108
108
  }
109
109
 
110
110
  .radio__label {
111
- color: light.$on-fixed-surface-primary-default;
111
+ color: var(--on-fixed-surface-primary-default);
112
112
  }
113
113
 
114
114
  .radio__description {
115
- color: light.$on-fixed-surface-primary-alternate;
115
+ color: var(--on-fixed-surface-primary-alternate);
116
116
  }
117
117
 
118
118
  & input:disabled ~ .radio__label {
119
- color: light.$on-fixed-surface-primary-disabled;
119
+ color: var(--on-fixed-surface-primary-disabled);
120
120
 
121
121
  .radio__fake-element {
122
- border-color: light.$ge-fixed-selector-unselected-disabled;
122
+ border-color: var(--ge-fixed-selector-unselected-disabled);
123
123
  }
124
124
  }
125
125
 
126
126
  & input:disabled ~ .radio__description {
127
- color: light.$on-fixed-surface-primary-disabled;
127
+ color: var(--on-fixed-surface-primary-disabled);
128
128
  }
129
129
  }
130
130
 
@@ -136,7 +136,7 @@
136
136
  }
137
137
 
138
138
  &__error {
139
- color: light.$on-surface-error;
139
+ color: var(--on-surface-error);
140
140
  margin-top: spacing.$xxs;
141
141
  }
142
142
  }
package/react/scale-bar/scale-bar.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use '../../tokens/light';
1
+ @use '../../tokens/colours';
2
2
 
3
3
  .scale-bar {
4
4
  align-items: stretch;
@@ -12,11 +12,11 @@
12
12
  flex: 1 1 100%;
13
13
 
14
14
  &--empty {
15
- background: light.$ge-progress-bar-background;
15
+ background: var(--ge-progress-bar-background);
16
16
  }
17
17
 
18
18
  &--filled {
19
- background: light.$ge-progress-bar-indicator-default;
19
+ background: var(--ge-progress-bar-indicator-default);
20
20
  }
21
21
  }
22
22
  }
package/react/search/search.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @use '../../tokens/corner-radius';
2
2
  @use '../../tokens/font-names';
3
- @use '../../tokens/light';
3
+ @use '../../tokens/colours';
4
4
  @use '../../tokens/spacing';
5
5
  @use '../../tokens/elevation';
6
6
 
@@ -35,11 +35,11 @@
35
35
  }
36
36
 
37
37
  &__loading-input {
38
- background-color: light.$ge-skeleton-default;
38
+ background-color: var(--ge-skeleton-default);
39
39
  border-radius: spacing.$m;
40
40
 
41
41
  &--fixed {
42
- background-color: light.$on-fixed-background-primary-disabled;
42
+ background-color: var(--on-fixed-background-primary-disabled);
43
43
  }
44
44
 
45
45
  &--small {
@@ -52,33 +52,33 @@
52
52
 
53
53
  &__loading-extra {
54
54
  border-radius: corner-radius.$s;
55
- color: light.$ge-skeleton-default;
56
- background-color: light.$ge-skeleton-default;
55
+ color: var(--ge-skeleton-default);
56
+ background-color: var(--ge-skeleton-default);
57
57
  width: fit-content;
58
58
 
59
59
  &--fixed {
60
- background-color: light.$on-fixed-background-primary-disabled;
60
+ background-color: var(--on-fixed-background-primary-disabled);
61
61
  }
62
62
  }
63
63
 
64
64
  &__header {
65
65
  &--variant-fixed {
66
- color: light.$on-fixed-surface-secondary-default;
66
+ color: var(--on-fixed-surface-secondary-default);
67
67
  }
68
68
  }
69
69
 
70
70
  &__input-wrapper {
71
71
  display: flex;
72
72
  justify-content: space-evenly;
73
- border: 1px solid light.$ge-border-default;
73
+ border: 1px solid var(--ge-border-default);
74
74
 
75
75
  &--variant-default {
76
- background-color: light.$surface-primary-default;
76
+ background-color: var(--surface-primary-default);
77
77
  }
78
78
 
79
79
  &--variant-fixed {
80
- color: light.$on-fixed-surface-secondary-default;
81
- background-color: light.$fixed-surface-secondary-default;
80
+ color: var(--on-fixed-surface-secondary-default);
81
+ background-color: var(--fixed-surface-secondary-default);
82
82
  }
83
83
 
84
84
  &--theme-floating {
@@ -91,7 +91,7 @@
91
91
 
92
92
  &--theme-inline {
93
93
  &:focus-within {
94
- border-color: light.$ge-border-focused;
94
+ border-color: var(--ge-border-focused);
95
95
  }
96
96
  }
97
97
 
@@ -159,7 +159,7 @@
159
159
 
160
160
  &--variant-fixed {
161
161
  &::placeholder {
162
- color: light.$on-fixed-surface-secondary-alternate;
162
+ color: var(--on-fixed-surface-secondary-alternate);
163
163
  }
164
164
  }
165
165
 
@@ -171,10 +171,10 @@
171
171
  &__icon {
172
172
  display: flex;
173
173
  background: transparent;
174
- color: light.$on-surface-primary-alternate;
174
+ color: var(--on-surface-primary-alternate);
175
175
 
176
176
  &--variant-fixed {
177
- color: light.$on-fixed-surface-secondary-alternate;
177
+ color: var(--on-fixed-surface-secondary-alternate);
178
178
  }
179
179
  }
180
180
 
@@ -204,10 +204,10 @@
204
204
  display: flex;
205
205
  gap: spacing.$xs;
206
206
  align-items: center;
207
- color: light.$on-background-primary-disabled;
207
+ color: var(--on-background-primary-disabled);
208
208
 
209
209
  &--variant-fixed {
210
- color: light.$on-fixed-background-primary-disabled;
210
+ color: var(--on-fixed-background-primary-disabled);
211
211
  }
212
212
  }
213
213
  }
package/react/select/select.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @use '../../tokens/corner-radius';
2
- @use '../../tokens/light';
2
+ @use '../../tokens/colours';
3
3
  @use '../../tokens/spacing';
4
4
  @use '../../tokens/font-sizes';
5
5
 
@@ -27,15 +27,15 @@
27
27
  // NOTE: Specificity hack
28
28
  :root &--error {
29
29
  select {
30
- background-color: rgba(light.$signal-surface-error, 0.07);
31
- border-color: light.$ge-signal-border-error;
32
- color: light.$on-signal-surface-error-default;
30
+ background-color: rgba(var(--signal-surface-error), 0.07);
31
+ border-color: var(--ge-signal-border-error);
32
+ color: var(--on-signal-surface-error-default);
33
33
  }
34
34
  }
35
35
 
36
36
  &__native-wrapper {
37
- color: light.$on-surface-primary-default;
38
- background-color: light.$surface-primary-default;
37
+ color: var(--on-surface-primary-default);
38
+ background-color: var(--surface-primary-default);
39
39
  border-radius: corner-radius.$s;
40
40
  position: relative;
41
41
  width: min-content;
@@ -46,7 +46,7 @@
46
46
  }
47
47
 
48
48
  &__chevron {
49
- color: light.$on-surface-primary-default;
49
+ color: var(--on-surface-primary-default);
50
50
  position: absolute;
51
51
  right: clamp(spacing.$s, 2vw, spacing.$m);
52
52
  top: 50%;
@@ -58,10 +58,10 @@
58
58
 
59
59
  &__select {
60
60
  @include font-sizes.normal(input);
61
- color: light.$on-surface-primary-default;
61
+ color: var(--on-surface-primary-default);
62
62
  appearance: none;
63
63
  background-color: transparent;
64
- border: 1px solid light.$ge-border-default;
64
+ border: 1px solid var(--ge-border-default);
65
65
  display: block;
66
66
  position: relative;
67
67
  border-radius: corner-radius.$s;
@@ -87,16 +87,16 @@
87
87
  @media (hover: hover) {
88
88
  &:hover {
89
89
  &:not(:disabled) {
90
- background-color: light.$surface-primary-hover;
91
- border-color: light.$surface-primary-hover;
90
+ background-color: var(--surface-primary-hover);
91
+ border-color: var(--surface-primary-hover);
92
92
  }
93
93
  }
94
94
  }
95
95
 
96
96
  &:active {
97
97
  &:not(:disabled) {
98
- background-color: light.$surface-primary-default;
99
- border-color: light.$ge-border-focused;
98
+ background-color: var(--surface-primary-default);
99
+ border-color: var(--ge-border-focused);
100
100
  }
101
101
  }
102
102
 
@@ -106,21 +106,21 @@
106
106
  }
107
107
 
108
108
  &:disabled {
109
- color: light.$on-surface-primary-disabled;
109
+ color: var(--on-surface-primary-disabled);
110
110
 
111
111
  ~ .select__native-wrapper {
112
- color: light.$on-surface-primary-disabled;
112
+ color: var(--on-surface-primary-disabled);
113
113
  }
114
114
  }
115
115
  }
116
116
 
117
117
  &__error {
118
- color: light.$ge-signal-error;
118
+ color: var(--ge-signal-error);
119
119
  margin-top: 4px;
120
120
  }
121
121
 
122
122
  &__asterisk {
123
- color: light.$on-surface-featured;
123
+ color: var(--on-surface-featured);
124
124
  margin-left: spacing.$xs;
125
125
  }
126
126
 
package/react/tag/tag.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @use '../../tokens/corner-radius';
2
- @use '../../tokens/light';
2
+ @use '../../tokens/colours';
3
3
  @use '../../tokens/spacing';
4
4
 
5
5
  .tag {
@@ -11,97 +11,97 @@
11
11
  border: 1px solid;
12
12
 
13
13
  &--variant-primary {
14
- background: light.$ge-tags-primary;
15
- border-color: light.$ge-tags-primary;
16
- color: light.$on-ge-on-tags-primary-default;
14
+ background: var(--ge-tags-primary);
15
+ border-color: var(--ge-tags-primary);
16
+ color: var(--on-ge-on-tags-primary-default);
17
17
 
18
18
  &-border {
19
19
  background: transparent;
20
- color: light.$ge-tags-primary;
20
+ color: var(--ge-tags-primary);
21
21
  }
22
22
  }
23
23
 
24
24
  &--variant-secondary {
25
- background: light.$ge-tags-secondary;
26
- border-color: light.$ge-tags-secondary;
27
- color: light.$on-ge-on-tags-secondary-default;
25
+ background: var(--ge-tags-secondary);
26
+ border-color: var(--ge-tags-secondary);
27
+ color: var(--on-ge-on-tags-secondary-default);
28
28
 
29
29
  &-border {
30
30
  background: transparent;
31
- border-color: light.$ge-tags-secondary;
32
- color: light.$on-ge-on-tags-secondary-default;
31
+ border-color: var(--ge-tags-secondary);
32
+ color: var(--on-ge-on-tags-secondary-default);
33
33
  }
34
34
  }
35
35
 
36
36
  &--variant-tertiary {
37
- background: light.$ge-tags-featured;
38
- border-color: light.$ge-tags-featured;
39
- color: light.$on-ge-on-tags-featured-default;
37
+ background: var(--ge-tags-featured);
38
+ border-color: var(--ge-tags-featured);
39
+ color: var(--on-ge-on-tags-featured-default);
40
40
 
41
41
  &-border {
42
42
  background: transparent;
43
- border-color: light.$ge-tags-featured;
44
- color: light.$ge-tags-featured;
43
+ border-color: var(--ge-tags-featured);
44
+ color: var(--ge-tags-featured);
45
45
  }
46
46
  }
47
47
 
48
48
  &--variant-positive {
49
- background: light.$ge-indicator-tags-positive-alternate;
50
- border-color: light.$ge-indicator-tags-positive-alternate;
51
- color: light.$on-ge-on-indicator-tags-positive-alternate;
49
+ background: var(--ge-indicator-tags-positive-alternate);
50
+ border-color: var(--ge-indicator-tags-positive-alternate);
51
+ color: var(--on-ge-on-indicator-tags-positive-alternate);
52
52
 
53
53
  &-border {
54
- border-color: light.$on-ge-on-indicator-tags-positive-alternate;
54
+ border-color: var(--on-ge-on-indicator-tags-positive-alternate);
55
55
  }
56
56
  }
57
57
 
58
58
  &--variant-attention {
59
- background: light.$ge-indicator-tags-attention-alternate;
60
- border-color: light.$ge-indicator-tags-attention-alternate;
61
- color: light.$on-ge-on-indicator-tags-attention-alternate;
59
+ background: var(--ge-indicator-tags-attention-alternate);
60
+ border-color: var(--ge-indicator-tags-attention-alternate);
61
+ color: var(--on-ge-on-indicator-tags-attention-alternate);
62
62
 
63
63
  &-border {
64
- border-color: light.$on-ge-on-indicator-tags-attention-alternate;
64
+ border-color: var(--on-ge-on-indicator-tags-attention-alternate);
65
65
  }
66
66
  }
67
67
 
68
68
  &--variant-negative {
69
- background: light.$ge-indicator-tags-negative-alternate;
70
- border-color: light.$ge-indicator-tags-negative-alternate;
71
- color: light.$on-ge-on-indicator-tags-negative-alternate;
69
+ background: var(--ge-indicator-tags-negative-alternate);
70
+ border-color: var(--ge-indicator-tags-negative-alternate);
71
+ color: var(--on-ge-on-indicator-tags-negative-alternate);
72
72
 
73
73
  &-border {
74
- border-color: light.$on-ge-on-indicator-tags-negative-alternate;
74
+ border-color: var(--on-ge-on-indicator-tags-negative-alternate);
75
75
  }
76
76
  }
77
77
 
78
78
  &--variant-neutral {
79
- background: light.$ge-indicator-tags-neutral-alternate;
80
- border-color: light.$ge-indicator-tags-neutral-alternate;
81
- color: light.$on-ge-on-indicator-tags-neutral-alternate;
79
+ background: var(--ge-indicator-tags-neutral-alternate);
80
+ border-color: var(--ge-indicator-tags-neutral-alternate);
81
+ color: var(--on-ge-on-indicator-tags-neutral-alternate);
82
82
 
83
83
  &-border {
84
- border-color: light.$on-ge-on-indicator-tags-neutral-alternate;
84
+ border-color: var(--on-ge-on-indicator-tags-neutral-alternate);
85
85
  }
86
86
  }
87
87
 
88
88
  &--variant-information {
89
- background: light.$ge-indicator-tags-information-alternate;
90
- border-color: light.$ge-indicator-tags-information-alternate;
91
- color: light.$on-ge-on-indicator-tags-information-alternate;
89
+ background: var(--ge-indicator-tags-information-alternate);
90
+ border-color: var(--ge-indicator-tags-information-alternate);
91
+ color: var(--on-ge-on-indicator-tags-information-alternate);
92
92
 
93
93
  &-border {
94
- border-color: light.$on-ge-on-indicator-tags-information-alternate;
94
+ border-color: var(--on-ge-on-indicator-tags-information-alternate);
95
95
  }
96
96
  }
97
97
 
98
98
  &--variant-featured {
99
- background: light.$ge-indicator-tags-featured-alternate;
100
- border-color: light.$ge-indicator-tags-featured-alternate;
101
- color: light.$on-ge-on-indicator-tags-featured-alternate;
99
+ background: var(--ge-indicator-tags-featured-alternate);
100
+ border-color: var(--ge-indicator-tags-featured-alternate);
101
+ color: var(--on-ge-on-indicator-tags-featured-alternate);
102
102
 
103
103
  &-border {
104
- border-color: light.$on-ge-on-indicator-tags-featured-alternate;
104
+ border-color: var(--on-ge-on-indicator-tags-featured-alternate);
105
105
  }
106
106
  }
107
107
  }
package/react/text-area/text-area.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @use '../../tokens/corner-radius';
2
2
  @use '../../tokens/font-names';
3
- @use '../../tokens/light';
3
+ @use '../../tokens/colours';
4
4
  @use '../../tokens/dark';
5
5
  @use '../../tokens/spacing';
6
6
 
@@ -23,24 +23,24 @@
23
23
  &__label {
24
24
  &--theme-light {
25
25
  &-disabled {
26
- color: light.$on-background-primary-disabled;
26
+ color: var(--on-background-primary-disabled);
27
27
  }
28
28
  }
29
29
  &--theme-dark {
30
- color: light.$on-fixed-background-primary-default;
30
+ color: var(--on-fixed-background-primary-default);
31
31
  &-disabled {
32
- color: light.$on-fixed-background-primary-disabled;
32
+ color: var(--on-fixed-background-primary-disabled);
33
33
  }
34
34
  }
35
35
  }
36
36
 
37
37
  &__max {
38
- color: light.$on-background-primary-alternate;
38
+ color: var(--on-background-primary-alternate);
39
39
  }
40
40
 
41
41
  &__input {
42
42
  width: 100%;
43
- border: 0.5px solid light.$ge-border-default;
43
+ border: 0.5px solid var(--ge-border-default);
44
44
  border-radius: corner-radius.$s;
45
45
 
46
46
  font-family: font-names.$brand, sans-serif;
@@ -70,62 +70,62 @@
70
70
  }
71
71
 
72
72
  &--theme-light {
73
- background-color: light.$surface-primary-default;
74
- color: light.$on-surface-primary-default;
73
+ background-color: var(--surface-primary-default);
74
+ color: var(--on-surface-primary-default);
75
75
  &:focus {
76
- outline: 1px solid light.$ge-border-focused;
76
+ outline: 1px solid var(--ge-border-focused);
77
77
  outline-offset: -1px;
78
78
  }
79
79
 
80
80
  &:hover {
81
- background-color: light.$surface-primary-hover;
81
+ background-color: var(--surface-primary-hover);
82
82
  }
83
83
 
84
84
  &::placeholder {
85
- color: light.$on-surface-primary-alternate;
85
+ color: var(--on-surface-primary-alternate);
86
86
  opacity: 1;
87
87
  }
88
88
 
89
89
  &:disabled {
90
- background-color: light.$surface-primary-disabled;
90
+ background-color: var(--surface-primary-disabled);
91
91
  &::placeholder {
92
- color: light.$on-surface-primary-disabled;
92
+ color: var(--on-surface-primary-disabled);
93
93
  }
94
94
  }
95
95
 
96
96
  &-error {
97
- border-color: light.$ge-signal-border-error;
97
+ border-color: var(--ge-signal-border-error);
98
98
  }
99
99
  }
100
100
 
101
101
  &--theme-dark {
102
- background-color: light.$fixed-surface-secondary-default;
103
- color: light.$on-fixed-surface-primary-default;
102
+ background-color: var(--fixed-surface-secondary-default);
103
+ color: var(--on-fixed-surface-primary-default);
104
104
  &:focus {
105
- background: light.$fixed-surface-primary-hover;
106
- outline: 2px solid light.$ge-border-focused;
105
+ background: var(--fixed-surface-primary-hover);
106
+ outline: 2px solid var(--ge-border-focused);
107
107
  outline-offset: -2px;
108
108
  }
109
109
 
110
110
  &:hover {
111
- background-color: light.$fixed-surface-primary-hover;
111
+ background-color: var(--fixed-surface-primary-hover);
112
112
  }
113
113
 
114
114
  &::placeholder {
115
- color: light.$on-fixed-surface-primary-alternate;
115
+ color: var(--on-fixed-surface-primary-alternate);
116
116
  opacity: 1;
117
117
  }
118
118
 
119
119
  &:disabled {
120
- background-color: light.$fixed-surface-primary-selected;
120
+ background-color: var(--fixed-surface-primary-selected);
121
121
  border: 0;
122
122
  &::placeholder {
123
- color: light.$on-fixed-surface-secondary-disabled;
123
+ color: var(--on-fixed-surface-secondary-disabled);
124
124
  }
125
125
  }
126
126
 
127
127
  &-error {
128
- border-color: light.$on-fixed-surface-error;
128
+ border-color: var(--on-fixed-surface-error);
129
129
  }
130
130
  }
131
131
  }
@@ -134,23 +134,23 @@
134
134
  margin-left: spacing.$xs;
135
135
 
136
136
  &--theme-light {
137
- color: light.$on-surface-featured;
137
+ color: var(--on-surface-featured);
138
138
  &-disabled {
139
139
 
140
- color: light.$on-surface-primary-disabled;
140
+ color: var(--on-surface-primary-disabled);
141
141
  }
142
142
  }
143
143
  &--theme-dark {
144
- color: light.$on-fixed-surface-featured;
144
+ color: var(--on-fixed-surface-featured);
145
145
  &-disabled {
146
- color: light.$on-fixed-background-primary-disabled;
146
+ color: var(--on-fixed-background-primary-disabled);
147
147
  }
148
148
  }
149
149
 
150
150
  }
151
151
 
152
152
  &__error {
153
- color: light.$on-surface-error;
153
+ color: var(--on-surface-error);
154
154
  margin-top: spacing.$xxs;
155
155
  }
156
156
 
@@ -164,16 +164,16 @@
164
164
  gap: spacing.$xs;
165
165
 
166
166
  &--theme-light {
167
- color: light.$on-background-primary-disabled;
167
+ color: var(--on-background-primary-disabled);
168
168
  &--error {
169
- color: light.$on-surface-error;
169
+ color: var(--on-surface-error);
170
170
  }
171
171
  }
172
172
 
173
173
  &--theme-dark {
174
- color: light.$on-fixed-background-primary-disabled;
174
+ color: var(--on-fixed-background-primary-disabled);
175
175
  &--error {
176
- color: light.$on-fixed-surface-error;
176
+ color: var(--on-fixed-surface-error);
177
177
  }
178
178
  }
179
179
  }