@sats-group/ui-lib 81.1.0 → 81.3.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 (39) 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.js +1 -1
  12. package/react/expander/expander.js.map +3 -3
  13. package/react/expander/expander.scss +12 -9
  14. package/react/expander/expander.types.d.ts +2 -0
  15. package/react/expander/expander.types.js +1 -1
  16. package/react/expander/expander.types.js.map +2 -2
  17. package/react/filter/filter.scss +11 -11
  18. package/react/flag/flag.scss +4 -4
  19. package/react/form-content/form-content.scss +11 -11
  20. package/react/link/link.scss +9 -9
  21. package/react/link-card/link-card.scss +5 -5
  22. package/react/message/message.scss +10 -10
  23. package/react/message-field/message-field.scss +2 -2
  24. package/react/modal/modal.scss +9 -9
  25. package/react/progress-bar/progress-bar.scss +7 -7
  26. package/react/radio/radio.scss +19 -19
  27. package/react/scale-bar/scale-bar.scss +3 -3
  28. package/react/search/search.scss +17 -17
  29. package/react/select/select.scss +17 -17
  30. package/react/tag/tag.scss +39 -39
  31. package/react/text-area/text-area.scss +32 -32
  32. package/react/text-input/text-input.scss +37 -37
  33. package/react/toggle/toggle.scss +4 -4
  34. package/react/toolbox/toolbox.scss +6 -6
  35. package/react/visually-button/visually-button.scss +79 -79
  36. package/tokens/colours.scss +3 -0
  37. package/tokens/default-colours.css +414 -0
  38. /package/tokens/{dark-variables.css → darkmode.css} +0 -0
  39. /package/tokens/{light-variables.css → lightmode.css} +0 -0
package/react/message/message.scss CHANGED
@@ -1,10 +1,10 @@
1
1
  @use '../../tokens/corner-radius';
2
2
  @use '../../tokens/elevation';
3
- @use '../../tokens/light';
3
+ @use '../../tokens/colours';
4
4
  @use '../../tokens/spacing';
5
5
 
6
6
  .message {
7
- background: light.$surface-primary-default;
7
+ background: var(--surface-primary-default);
8
8
  border-radius: corner-radius.$s;
9
9
  display: grid;
10
10
  grid-template-columns: 1fr;
@@ -20,7 +20,7 @@
20
20
  left: 0;
21
21
  height: 100%;
22
22
  width: spacing.$s;
23
- background: light.$ge-signal-neutral;
23
+ background: var(--ge-signal-neutral);
24
24
  }
25
25
 
26
26
  @media (min-width: 600px) {
@@ -33,7 +33,7 @@
33
33
 
34
34
  &--inline,
35
35
  &--mini {
36
- border: 1px solid light.$ge-border-default;
36
+ border: 1px solid var(--ge-border-default);
37
37
  }
38
38
 
39
39
  &--mini {
@@ -46,31 +46,31 @@
46
46
 
47
47
  &--theme-error {
48
48
  &::before {
49
- background: light.$ge-signal-error;
49
+ background: var(--ge-signal-error);
50
50
  }
51
51
 
52
52
  .message__link {
53
- color: light.$on-surface-error;
53
+ color: var(--on-surface-error);
54
54
  }
55
55
  }
56
56
 
57
57
  &--theme-warning {
58
58
  &::before {
59
- background: light.$ge-signal-warning;
59
+ background: var(--ge-signal-warning);
60
60
  }
61
61
 
62
62
  .message__link {
63
- color: light.$on-surface-warning;
63
+ color: var(--on-surface-warning);
64
64
  }
65
65
  }
66
66
 
67
67
  &--theme-success {
68
68
  &::before {
69
- background: light.$ge-signal-success;
69
+ background: var(--ge-signal-success);
70
70
  }
71
71
 
72
72
  .message__link {
73
- color: light.$on-surface-success;
73
+ color: var(--on-surface-success);
74
74
  }
75
75
  }
76
76
 
package/react/message-field/message-field.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use '../../tokens/light';
1
+ @use '../../tokens/colours';
2
2
  @use '../../tokens/spacing';
3
3
 
4
4
  .message-field {
@@ -12,7 +12,7 @@
12
12
  }
13
13
 
14
14
  &--variant-nested {
15
- background: light.$background-primary-default;
15
+ background: var(--background-primary-default);
16
16
  padding: spacing.$m;
17
17
  &-small {
18
18
  padding: spacing.$s;
package/react/modal/modal.scss CHANGED
@@ -1,12 +1,12 @@
1
1
  @use '../../tokens/corner-radius';
2
2
  @use '../../tokens/elevation';
3
- @use '../../tokens/light';
3
+ @use '../../tokens/colours';
4
4
  @use '../../tokens/spacing';
5
5
 
6
6
  .modal {
7
7
  background: color-mix(
8
8
  in srgb,
9
- light.$fixed-background-primary-default
9
+ var(--fixed-background-primary-default)
10
10
  70%, transparent
11
11
  );
12
12
  box-sizing: border-box;
@@ -43,17 +43,17 @@
43
43
  }
44
44
 
45
45
  &__title {
46
- color: light.$on-surface-primary-default;
46
+ color: var(--on-surface-primary-default);
47
47
  max-width: 90%; // NOTE: Magic percent to keep clear of modal´s close-button.
48
48
  }
49
49
 
50
50
  &__explanation {
51
51
  &--primary {
52
- color: light.$on-surface-primary-alternate;
52
+ color: var(--on-surface-primary-alternate);
53
53
  }
54
54
 
55
55
  &--secondary {
56
- color: light.$on-surface-secondary-alternate;
56
+ color: var(--on-surface-secondary-alternate);
57
57
  }
58
58
  }
59
59
 
@@ -70,11 +70,11 @@
70
70
  overflow: auto;
71
71
 
72
72
  &--primary {
73
- background: light.$surface-primary-default;
73
+ background: var(--surface-primary-default);
74
74
  }
75
75
 
76
76
  &--secondary {
77
- background: light.$surface-secondary-default;
77
+ background: var(--surface-secondary-default);
78
78
  }
79
79
 
80
80
  @include break {
@@ -101,8 +101,8 @@
101
101
 
102
102
  &__actions,
103
103
  &__close-action-mobile {
104
- background: light.$surface-primary-default;
105
- border-top: 1px solid light.$ge-border-default;
104
+ background: var(--surface-primary-default);
105
+ border-top: 1px solid var(--ge-border-default);
106
106
  display: flex;
107
107
  justify-content: center;
108
108
  gap: spacing.$s;
package/react/progress-bar/progress-bar.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
  .progress-bar {
@@ -12,24 +12,24 @@
12
12
  height: 4px;
13
13
  width: 100%;
14
14
 
15
- background-color: light.$ge-progress-bar-background;
15
+ background-color: var(--ge-progress-bar-background);
16
16
  border-radius: corner-radius.$xs;
17
17
 
18
18
  &--dark {
19
- background-color: light.$ge-fixed-progress-bar-background;
19
+ background-color: var(--ge-fixed-progress-bar-background);
20
20
  }
21
21
  }
22
22
 
23
23
  &__bar {
24
- background-color: light.$ge-progress-bar-indicator-alternate;
24
+ background-color: var(--ge-progress-bar-indicator-alternate);
25
25
  border-radius: corner-radius.$xs;
26
26
 
27
27
  &--dark {
28
- background-color: light.$ge-fixed-progress-bar-indicator-alternate;
28
+ background-color: var(--ge-fixed-progress-bar-indicator-alternate);
29
29
  }
30
30
 
31
31
  &--cta {
32
- background-color: light.$ge-progress-bar-indicator-default;
32
+ background-color: var(--ge-progress-bar-indicator-default);
33
33
  }
34
34
  }
35
35
 
@@ -65,7 +65,7 @@
65
65
  }
66
66
 
67
67
  &--dark {
68
- color: light.$on-fixed-background-primary-default;
68
+ color: var(--on-fixed-background-primary-default);
69
69
  }
70
70
  }
71
71
  }
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
  }