@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/dropdown-list/dropdown-list.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @use '../../tokens/corner-radius';
2
2
  @use '../../tokens/spacing';
3
- @use '../../tokens/light';
3
+ @use '../../tokens/colours';
4
4
 
5
5
  .dropdown-list {
6
6
  $breakpoint: 900px;
@@ -9,8 +9,8 @@
9
9
 
10
10
  &__wrapper {
11
11
  border-radius: corner-radius.$s;
12
- border: 1px solid light.$ge-divider-default;
13
- background-color: light.$surface-primary-default;
12
+ border: 1px solid var(--ge-divider-default);
13
+ background-color: var(--surface-primary-default);
14
14
  margin-top: spacing.$xxs;
15
15
  min-width: 180px;
16
16
 
@@ -20,66 +20,66 @@
20
20
 
21
21
  &--theme-light {
22
22
  &-clicked {
23
- background-color: light.$surface-primary-hover;
23
+ background-color: var(--surface-primary-hover);
24
24
  }
25
25
 
26
26
  &-disabled {
27
- border-color: light.$surface-primary-default;
27
+ border-color: var(--surface-primary-default);
28
28
  }
29
29
 
30
30
  @media (hover: hover) {
31
31
  &:hover {
32
- background-color: light.$surface-primary-hover;
32
+ background-color: var(--surface-primary-hover);
33
33
  }
34
34
 
35
35
  &-disabled {
36
36
  &:hover {
37
- background-color: light.$surface-primary-default;
38
- border-color: light.$surface-primary-default;
37
+ background-color: var(--surface-primary-default);
38
+ border-color: var(--surface-primary-default);
39
39
  }
40
40
  }
41
41
  }
42
42
 
43
43
  @media (hover: none) {
44
44
  &:hover {
45
- background-color: light.$surface-primary-default;
46
- border-color: light.$surface-primary-default;
45
+ background-color: var(--surface-primary-default);
46
+ border-color: var(--surface-primary-default);
47
47
  }
48
48
  }
49
49
  }
50
50
 
51
51
  &--theme-dark {
52
- background-color: light.$fixed-surface-secondary-default;
53
- border-color: light.$fixed-surface-secondary-default;
52
+ background-color: var(--fixed-surface-secondary-default);
53
+ border-color: var(--fixed-surface-secondary-default);
54
54
 
55
55
  &-clicked {
56
- background-color: light.$fixed-surface-secondary-hover;
57
- border-color: light.$fixed-surface-secondary-hover;
56
+ background-color: var(--fixed-surface-secondary-hover);
57
+ border-color: var(--fixed-surface-secondary-hover);
58
58
  }
59
59
 
60
60
  &-disabled {
61
- background-color: light.$fixed-surface-secondary-default;
62
- border-color: light.$fixed-surface-secondary-default;
61
+ background-color: var(--fixed-surface-secondary-default);
62
+ border-color: var(--fixed-surface-secondary-default);
63
63
  }
64
64
 
65
65
  @media (hover: hover) {
66
66
  &:hover {
67
- background-color: light.$fixed-surface-secondary-hover;
68
- border-color: light.$fixed-surface-secondary-hover;
67
+ background-color: var(--fixed-surface-secondary-hover);
68
+ border-color: var(--fixed-surface-secondary-hover);
69
69
  }
70
70
 
71
71
  &-disabled {
72
72
  &:hover {
73
- background-color: light.$fixed-surface-secondary-default;
74
- border-color: light.$fixed-surface-secondary-default;
73
+ background-color: var(--fixed-surface-secondary-default);
74
+ border-color: var(--fixed-surface-secondary-default);
75
75
  }
76
76
  }
77
77
  }
78
78
 
79
79
  @media (hover: none) {
80
80
  &:hover {
81
- background-color: light.$fixed-surface-secondary-default;
82
- border-color: light.$fixed-surface-secondary-default;
81
+ background-color: var(--fixed-surface-secondary-default);
82
+ border-color: var(--fixed-surface-secondary-default);
83
83
  }
84
84
  }
85
85
  }
@@ -106,20 +106,20 @@
106
106
  &--theme-light {
107
107
  &-disabled {
108
108
  cursor: not-allowed;
109
- color: light.$on-surface-primary-disabled;
109
+ color: var(--on-surface-primary-disabled);
110
110
  }
111
111
  }
112
112
 
113
113
  &--theme-dark {
114
- color: light.$on-fixed-surface-secondary-default;
114
+ color: var(--on-fixed-surface-secondary-default);
115
115
 
116
116
  &-disabled {
117
- color: light.$on-fixed-surface-secondary-disabled;
117
+ color: var(--on-fixed-surface-secondary-disabled);
118
118
  cursor: not-allowed;
119
119
  }
120
120
 
121
121
  &-clicked {
122
- color: light.$on-fixed-surface-secondary-default;
122
+ color: var(--on-fixed-surface-secondary-default);
123
123
  }
124
124
  }
125
125
  }
@@ -138,18 +138,18 @@
138
138
 
139
139
  &__information {
140
140
  &--theme-light {
141
- color: light.$on-surface-primary-alternate;
141
+ color: var(--on-surface-primary-alternate);
142
142
 
143
143
  &-disabled {
144
- color: light.$on-surface-primary-disabled;
144
+ color: var(--on-surface-primary-disabled);
145
145
  }
146
146
  }
147
147
 
148
148
  &--theme-dark {
149
- color: light.$on-fixed-surface-secondary-alternate;
149
+ color: var(--on-fixed-surface-secondary-alternate);
150
150
 
151
151
  &-disabled {
152
- color: light.$on-fixed-surface-secondary-disabled;
152
+ color: var(--on-fixed-surface-secondary-disabled);
153
153
  }
154
154
  }
155
155
  }
@@ -157,13 +157,13 @@
157
157
  &__label {
158
158
  &--theme-light {
159
159
  &-disabled {
160
- color: light.$on-surface-primary-disabled;
160
+ color: var(--on-surface-primary-disabled);
161
161
  }
162
162
  }
163
163
  &--theme-dark {
164
- color: light.$on-fixed-surface-primary-default;
164
+ color: var(--on-fixed-surface-primary-default);
165
165
  &-disabled {
166
- color: light.$on-fixed-background-primary-disabled;
166
+ color: var(--on-fixed-background-primary-disabled);
167
167
  }
168
168
  }
169
169
  }
package/react/expander/expander.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use '../../tokens/light';
1
+ @use '../../tokens/colours';
2
2
  @use '../../tokens/spacing';
3
3
 
4
4
  .expander {
@@ -22,7 +22,7 @@
22
22
  align-items: center;
23
23
  background: transparent;
24
24
  border: 0;
25
- border-bottom: 1px solid light.$ge-divider-default;
25
+ border-bottom: 1px solid var(--ge-divider-default);
26
26
  cursor: pointer;
27
27
  display: flex;
28
28
  gap: spacing.$xs;
@@ -32,7 +32,7 @@
32
32
  width: 100%;
33
33
 
34
34
  &--triggered {
35
- background: light.$background-primary-default;
35
+ background: var(--background-primary-default);
36
36
  }
37
37
 
38
38
  @include break {
@@ -42,7 +42,7 @@
42
42
 
43
43
  @media (hover: hover) {
44
44
  &:hover {
45
- background: light.$surface-primary-hover;
45
+ background: var(--surface-primary-hover);
46
46
  }
47
47
  }
48
48
  }
@@ -63,12 +63,12 @@
63
63
  }
64
64
 
65
65
  &__drawer {
66
- background: light.$surface-primary-default;
66
+ background: var(--surface-primary-default);
67
67
  }
68
68
 
69
69
  &__content {
70
- border-bottom: 1px solid light.$ge-divider-default;
71
- border-top: 1px solid light.$ge-divider-default;
70
+ border-bottom: 1px solid var(--ge-divider-default);
71
+ border-top: 1px solid var(--ge-divider-default);
72
72
  display: grid;
73
73
  gap: spacing.$m;
74
74
  padding: 20px;
@@ -100,11 +100,11 @@
100
100
  }
101
101
 
102
102
  &__meta-text {
103
- color: light.$on-surface-primary-alternate;
103
+ color: var(--on-surface-primary-alternate);
104
104
  }
105
105
 
106
106
  &__divider {
107
- background: light.$ge-divider-default;
107
+ background: var(--ge-divider-default);
108
108
  border: 0;
109
109
  height: 1px;
110
110
  margin: 0;
package/react/filter/filter.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @use '../../tokens/corner-radius';
2
- @use '../../tokens/light.scss';
2
+ @use '../../tokens/colours';
3
3
  @use '../../tokens/spacing';
4
4
 
5
5
  .filter {
@@ -7,8 +7,8 @@
7
7
  $breakpointSmall: 500px;
8
8
 
9
9
  border-radius: corner-radius.$s;
10
- background-color: light.$surface-primary-default;
11
- border: 1px solid light.$ge-divider-default;
10
+ background-color: var(--surface-primary-default);
11
+ border: 1px solid var(--ge-divider-default);
12
12
  min-width: 180px;
13
13
  display: flex;
14
14
  flex-direction: column;
@@ -22,20 +22,20 @@
22
22
  width: 100%;
23
23
 
24
24
  &:last-of-type {
25
- border-bottom: 1px solid light.$ge-divider-default;
25
+ border-bottom: 1px solid var(--ge-divider-default);
26
26
  }
27
27
  }
28
28
 
29
29
  @media (hover: hover) {
30
30
  &:hover {
31
- background-color: light.$surface-primary-hover;
32
- border-color: light.$ge-divider-alternate;
31
+ background-color: var(--surface-primary-hover);
32
+ border-color: var(--ge-divider-alternate);
33
33
  }
34
34
  }
35
35
 
36
36
  &--clicked {
37
- background-color: light.$surface-primary-hover;
38
- border-color: light.$ge-divider-alternate;
37
+ background-color: var(--surface-primary-hover);
38
+ border-color: var(--ge-divider-alternate);
39
39
  }
40
40
 
41
41
  @media (min-width: $breakpoint) {
@@ -66,7 +66,7 @@
66
66
  }
67
67
 
68
68
  &__loading-icon {
69
- color: light.$on-surface-primary-disabled;
69
+ color: var(--on-surface-primary-disabled);
70
70
  }
71
71
 
72
72
  &__button-text {
@@ -83,8 +83,8 @@
83
83
  &__selected-options {
84
84
  box-sizing: border-box;
85
85
  border-radius: corner-radius.$l;
86
- color: light.$on-ge-on-badge-secondary;
87
- background: light.$ge-badge-secondary;
86
+ color: var(--on-ge-on-badge-secondary);
87
+ background: var(--ge-badge-secondary);
88
88
  display: flex;
89
89
  justify-content: center;
90
90
  align-items: center;
package/react/flag/flag.scss CHANGED
@@ -1,10 +1,10 @@
1
- @use '../../tokens/light';
1
+ @use '../../tokens/colours';
2
2
  @use '../../tokens/spacing';
3
3
 
4
4
  .flag {
5
5
  border-top-left-radius: 8px;
6
6
  clip-path: polygon(0 0, 100% 0, calc(100% - #{spacing.$s}) 100%, 0 100%);
7
- color: light.$on-ge-on-tags-featured-default;
7
+ color: var(--on-ge-on-tags-featured-default);
8
8
  padding: spacing.$xxs (spacing.$s * 2) spacing.$xxs spacing.$s;
9
9
  text-transform: uppercase;
10
10
 
@@ -17,10 +17,10 @@
17
17
  }
18
18
 
19
19
  &--variant-featured {
20
- background: light.$ge-tags-featured;
20
+ background: var(--ge-tags-featured);
21
21
  }
22
22
 
23
23
  &--variant-primary {
24
- background: light.$ge-tags-primary;
24
+ background: var(--ge-tags-primary);
25
25
  }
26
26
  }
package/react/form-content/form-content.scss CHANGED
@@ -1,6 +1,6 @@
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
  .form-content {
@@ -14,7 +14,7 @@
14
14
  height: 100%;
15
15
  top: 0;
16
16
  left: 0;
17
- background: light.$fixed-background-primary-default;
17
+ background: var(--fixed-background-primary-default);
18
18
  opacity: 0.2;
19
19
  z-index: 400;
20
20
  }
@@ -34,7 +34,7 @@
34
34
  bottom: 0;
35
35
  right: 0;
36
36
 
37
- background-color: light.$surface-primary-default;
37
+ background-color: var(--surface-primary-default);
38
38
  z-index: 500;
39
39
 
40
40
  border-radius: corner-radius.$s;
@@ -76,7 +76,7 @@
76
76
  display: grid;
77
77
  grid-template-columns: 1fr auto;
78
78
  align-items: center;
79
- border-bottom: 1px solid light.$ge-divider-default;
79
+ border-bottom: 1px solid var(--ge-divider-default);
80
80
  padding: spacing.$s;
81
81
 
82
82
  @media (min-width: $breakpoint) {
@@ -103,7 +103,7 @@
103
103
  }
104
104
 
105
105
  &__modal-action-wrapper {
106
- border-top: 1px solid light.$ge-divider-default;
106
+ border-top: 1px solid var(--ge-divider-default);
107
107
  padding: spacing.$s;
108
108
  }
109
109
 
@@ -152,7 +152,7 @@
152
152
  display: flex;
153
153
  align-items: center;
154
154
  margin: 0 spacing.$l;
155
- border-bottom: 1px solid light.$ge-divider-default;
155
+ border-bottom: 1px solid var(--ge-divider-default);
156
156
  line-height: 0;
157
157
 
158
158
  &--hidden {
@@ -167,7 +167,7 @@
167
167
  background: none;
168
168
  width: 100%;
169
169
  margin-left: spacing.$xs;
170
- color: light.$on-surface-primary-default;
170
+ color: var(--on-surface-primary-default);
171
171
  border: none;
172
172
  padding: spacing.$s 0;
173
173
  padding-top: calc(spacing.$s + 2px);
@@ -180,7 +180,7 @@
180
180
  text-align: left;
181
181
 
182
182
  &--disabled {
183
- color: light.$on-surface-primary-default;
183
+ color: var(--on-surface-primary-default);
184
184
  }
185
185
  }
186
186
 
@@ -195,8 +195,8 @@
195
195
 
196
196
  &__checkbox-category-number {
197
197
  border-radius: 100%;
198
- color: light.$on-ge-on-tags-primary-default;
199
- background: light.$ge-tags-primary;
198
+ color: var(--on-ge-on-tags-primary-default);
199
+ background: var(--ge-tags-primary);
200
200
  width: 24px;
201
201
  display: flex;
202
202
  justify-content: center;
@@ -224,7 +224,7 @@
224
224
 
225
225
  &__range-line {
226
226
  width: 21px;
227
- border-bottom: 1px solid light.$ge-divider-alternate;
227
+ border-bottom: 1px solid var(--ge-divider-alternate);
228
228
  margin: 0 spacing.$m;
229
229
  }
230
230
 
package/react/link/link.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @use '../../tokens/spacing';
2
- @use '../../tokens/light';
2
+ @use '../../tokens/colours';
3
3
 
4
4
  .link {
5
5
  display: inline-flex;
@@ -7,36 +7,36 @@
7
7
  gap: spacing.$xs;
8
8
 
9
9
  &--background-default {
10
- color: light.$on-buttons-on-link-default;
10
+ color: var(--on-buttons-on-link-default);
11
11
  @media (hover: hover) {
12
12
  &:hover {
13
- color: light.$on-buttons-on-link-hover;
13
+ color: var(--on-buttons-on-link-hover);
14
14
  }
15
15
  }
16
16
 
17
17
  &-orange {
18
- color: light.$on-buttons-on-action-default;
18
+ color: var(--on-buttons-on-action-default);
19
19
  @media (hover: hover) {
20
20
  &:hover {
21
- color: light.$on-buttons-on-action-pressed;
21
+ color: var(--on-buttons-on-action-pressed);
22
22
  }
23
23
  }
24
24
  }
25
25
  }
26
26
 
27
27
  &--background-fixed {
28
- color: light.$on-buttons-on-fixed-link-default;
28
+ color: var(--on-buttons-on-fixed-link-default);
29
29
  @media (hover: hover) {
30
30
  &:hover {
31
- color: light.$on-buttons-on-fixed-link-hover;
31
+ color: var(--on-buttons-on-fixed-link-hover);
32
32
  }
33
33
  }
34
34
 
35
35
  &-orange {
36
- color: light.$on-buttons-on-fixed-action-default;
36
+ color: var(--on-buttons-on-fixed-action-default);
37
37
  @media (hover: hover) {
38
38
  &:hover {
39
- color: light.$on-buttons-on-fixed-action-pressed;
39
+ color: var(--on-buttons-on-fixed-action-pressed);
40
40
  }
41
41
  }
42
42
  }
package/react/link-card/link-card.scss CHANGED
@@ -1,14 +1,14 @@
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
  .link-card {
7
7
  @include elevation.level(2);
8
8
 
9
- background: light.$surface-primary-default;
9
+ background: var(--surface-primary-default);
10
10
  border-radius: corner-radius.$s;
11
- color: light.$on-surface-primary-default;
11
+ color: var(--on-surface-primary-default);
12
12
  display: grid;
13
13
  gap: spacing.$s;
14
14
  grid-template-columns: [first] [second];
@@ -17,12 +17,12 @@
17
17
 
18
18
  @media (hover: hover) {
19
19
  &:hover {
20
- background: light.$surface-primary-hover;
20
+ background: var(--surface-primary-hover);
21
21
  }
22
22
  }
23
23
 
24
24
  &__title {
25
- color: light.$on-surface-primary-default;
25
+ color: var(--on-surface-primary-default);
26
26
  grid-column: 1;
27
27
  }
28
28
 
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
  }