@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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sats-group/ui-lib",
3
- "version": "81.1.0",
3
+ "version": "81.3.0",
4
4
  "description": "SATS web user interface library",
5
5
  "engines": {
6
6
  "node": "^18 || ^20",
package/react/badge/badge.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use '../../tokens/light';
1
+ @use '../../tokens/colours';
2
2
  @use '../../tokens/spacing';
3
3
  @use '../../tokens/corner-radius';
4
4
 
@@ -19,35 +19,35 @@
19
19
 
20
20
  &--theme-light {
21
21
  &-primary {
22
- color: light.$on-ge-on-badge-primary;
23
- background: light.$ge-badge-primary;
22
+ color: var(--on-ge-on-badge-primary);
23
+ background: var(--ge-badge-primary);
24
24
  }
25
25
 
26
26
  &-secondary {
27
- color: light.$on-ge-on-badge-secondary;
28
- background: light.$ge-badge-secondary;
27
+ color: var(--on-ge-on-badge-secondary);
28
+ background: var(--ge-badge-secondary);
29
29
  }
30
30
 
31
31
  &-tertiary {
32
- color: light.$on-ge-on-badge-tertiary;
33
- background: light.$ge-badge-tertiary;
32
+ color: var(--on-ge-on-badge-tertiary);
33
+ background: var(--ge-badge-tertiary);
34
34
  }
35
35
  }
36
36
 
37
37
  &--theme-fixed {
38
38
  &-primary {
39
- color: light.$on-ge-on-badge-primary;
40
- background: light.$ge-badge-primary;
39
+ color: var(--on-ge-on-badge-primary);
40
+ background: var(--ge-badge-primary);
41
41
  }
42
42
 
43
43
  &-secondary {
44
- color: light.$on-ge-on-fixed-badge-secondary;
45
- background: light.$ge-fixed-badge-secondary;
44
+ color: var(--on-ge-on-fixed-badge-secondary);
45
+ background: var(--ge-fixed-badge-secondary);
46
46
  }
47
47
 
48
48
  &-tertiary {
49
- color: light.$on-ge-on-fixed-badge-tertiary;
50
- background: light.$ge-fixed-badge-tertiary;
49
+ color: var(--on-ge-on-fixed-badge-tertiary);
50
+ background: var(--ge-fixed-badge-tertiary);
51
51
  }
52
52
  }
53
53
  }
package/react/banner/banner.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
  .banner {
@@ -33,60 +33,60 @@
33
33
 
34
34
  &--type {
35
35
  &-error {
36
- background-color: light.$signal-surface-error;
37
- border-color: light.$on-signal-surface-error-alternate;
36
+ background-color: var(--signal-surface-error);
37
+ border-color: var(--on-signal-surface-error-alternate);
38
38
 
39
39
  .banner__anchor,
40
40
  .banner__dismisser,
41
41
  .banner__icon {
42
- color: light.$on-signal-surface-error-alternate;
42
+ color: var(--on-signal-surface-error-alternate);
43
43
  }
44
44
  }
45
45
 
46
46
  &-information {
47
- background-color: light.$signal-surface-information;
48
- border-color: light.$on-signal-surface-information-alternate;
47
+ background-color: var(--signal-surface-information);
48
+ border-color: var(--on-signal-surface-information-alternate);
49
49
 
50
50
  .banner__anchor,
51
51
  .banner__dismisser,
52
52
  .banner__icon {
53
- color: light.$on-signal-surface-information-alternate;
53
+ color: var(--on-signal-surface-information-alternate);
54
54
  }
55
55
  }
56
56
 
57
57
  &-neutral {
58
- background-color: light.$signal-surface-neutral;
59
- border-color: light.$on-signal-surface-neutral-alternate;
58
+ background-color: var(--signal-surface-neutral);
59
+ border-color: var(--on-signal-surface-neutral-alternate);
60
60
 
61
61
  .banner__anchor,
62
62
  .banner__dismisser {
63
- color: light.$on-signal-surface-neutral-alternate;
63
+ color: var(--on-signal-surface-neutral-alternate);
64
64
  }
65
65
 
66
66
  .banner__icon {
67
- color: light.$on-surface-neutral;
67
+ color: var(--on-surface-neutral);
68
68
  }
69
69
  }
70
70
 
71
71
  &-success {
72
- background-color: light.$signal-surface-success;
73
- border-color: light.$on-signal-surface-success-alternate;
72
+ background-color: var(--signal-surface-success);
73
+ border-color: var(--on-signal-surface-success-alternate);
74
74
 
75
75
  .banner__anchor,
76
76
  .banner__dismisser,
77
77
  .banner__icon {
78
- color: light.$on-signal-surface-success-alternate;
78
+ color: var(--on-signal-surface-success-alternate);
79
79
  }
80
80
  }
81
81
 
82
82
  &-warning {
83
- background-color: light.$signal-surface-warning;
84
- border-color: light.$on-signal-surface-warning-alternate;
83
+ background-color: var(--signal-surface-warning);
84
+ border-color: var(--on-signal-surface-warning-alternate);
85
85
 
86
86
  .banner__anchor,
87
87
  .banner__dismisser,
88
88
  .banner__icon {
89
- color: light.$on-signal-surface-warning-alternate;
89
+ color: var(--on-signal-surface-warning-alternate);
90
90
  }
91
91
  }
92
92
  }
package/react/bomb/bomb.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @use '../../tokens/elevation';
2
- @use '../../tokens/light';
2
+ @use '../../tokens/colours';
3
3
  @use '../../tokens/spacing';
4
4
 
5
5
  .bomb {
@@ -8,9 +8,9 @@
8
8
 
9
9
  @include elevation.level(1);
10
10
  aspect-ratio: 1/1; // NOTE: Needs fallback for perfect roundness in older browsers. Worth it?
11
- background: light.$buttons-cta-default;
11
+ background: var(--buttons-cta-default);
12
12
  border-radius: 50%;
13
- color: light.$on-buttons-on-cta-default;
13
+ color: var(--on-buttons-on-cta-default);
14
14
  display: grid;
15
15
  overflow: hidden;
16
16
  padding: spacing.$l;
@@ -20,7 +20,7 @@
20
20
 
21
21
  &::before {
22
22
  border-radius: 50%;
23
- border: $border-thickness solid light.$on-buttons-on-cta-default;
23
+ border: $border-thickness solid var(--on-buttons-on-cta-default);
24
24
  bottom: $border-inset;
25
25
  content: '';
26
26
  display: block;
package/react/checkbox/checkbox.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use '../../tokens/light';
1
+ @use '../../tokens/colours';
2
2
  @use '../../tokens/spacing';
3
3
 
4
4
  .checkbox {
@@ -6,37 +6,37 @@
6
6
  $size: 20px;
7
7
 
8
8
  &__asterisk {
9
- color: light.$on-surface-featured;
9
+ color: var(--on-surface-featured);
10
10
  margin-left: spacing.$xs;
11
11
  }
12
12
 
13
13
  &:focus-within {
14
14
  .checkbox__icon {
15
- outline: 4px solid light.$ge-selector-primary-unselected-default;
15
+ outline: 4px solid var(--ge-selector-primary-unselected-default);
16
16
  outline-offset: 2px;
17
17
 
18
18
  &--light {
19
- outline-color: light.$ge-fixed-selector-unselected-default;
19
+ outline-color: var(--ge-fixed-selector-unselected-default);
20
20
  }
21
21
  }
22
22
  }
23
23
 
24
24
  &--underline {
25
25
  padding-bottom: spacing.$s;
26
- border-bottom: 1px solid light.$ge-divider-default;
26
+ border-bottom: 1px solid var(--ge-divider-default);
27
27
 
28
28
  &--light {
29
- border-color: light.$ge-divider-default;
29
+ border-color: var(--ge-divider-default);
30
30
  }
31
31
  }
32
32
 
33
33
  &--intermediate {
34
34
  .checkbox__icon {
35
- border-color: light.$ge-selector-primary-selected-default;
36
- background-color: light.$ge-selector-primary-selected-default;
35
+ border-color: var(--ge-selector-primary-selected-default);
36
+ background-color: var(--ge-selector-primary-selected-default);
37
37
 
38
38
  svg {
39
- color: light.$on-ge-on-selector-primary-selected-default;
39
+ color: var(--on-ge-on-selector-primary-selected-default);
40
40
  }
41
41
 
42
42
  .checkbox__check {
@@ -48,20 +48,20 @@
48
48
  }
49
49
 
50
50
  &--light {
51
- border-color: light.$ge-fixed-selector-selected-default;
52
- background-color: light.$ge-fixed-selector-selected-default;
51
+ border-color: var(--ge-fixed-selector-selected-default);
52
+ background-color: var(--ge-fixed-selector-selected-default);
53
53
 
54
54
  svg {
55
- color: light.$on-ge-on-fixed-selector-selected-default;
55
+ color: var(--on-ge-on-fixed-selector-selected-default);
56
56
  }
57
57
  }
58
58
 
59
59
  &--blue {
60
- border-color: light.$on-background-primary-default;
61
- background-color: light.$on-background-primary-default;
60
+ border-color: var(--on-background-primary-default);
61
+ background-color: var(--on-background-primary-default);
62
62
 
63
63
  svg {
64
- color: light.$on-ge-on-selector-primary-selected-default;
64
+ color: var(--on-ge-on-selector-primary-selected-default);
65
65
  }
66
66
  }
67
67
  }
@@ -69,10 +69,10 @@
69
69
 
70
70
  &--error {
71
71
  .checkbox__icon {
72
- border-color: light.$ge-signal-border-error;
72
+ border-color: var(--ge-signal-border-error);
73
73
 
74
74
  &--light {
75
- border-color: light.$ge-signal-border-error;
75
+ border-color: var(--ge-signal-border-error);
76
76
  }
77
77
  }
78
78
  }
@@ -112,11 +112,11 @@
112
112
  }
113
113
 
114
114
  &:checked + .checkbox__icon {
115
- background-color: light.$ge-selector-primary-selected-default;
116
- border-color: light.$ge-selector-primary-selected-default;
115
+ background-color: var(--ge-selector-primary-selected-default);
116
+ border-color: var(--ge-selector-primary-selected-default);
117
117
 
118
118
  svg {
119
- color: light.$on-ge-on-selector-primary-selected-default;
119
+ color: var(--on-ge-on-selector-primary-selected-default);
120
120
  }
121
121
 
122
122
  .checkbox__check {
@@ -128,20 +128,20 @@
128
128
  }
129
129
 
130
130
  &--light {
131
- background-color: light.$ge-fixed-selector-selected-default;
132
- border-color: light.$ge-fixed-selector-selected-default;
131
+ background-color: var(--ge-fixed-selector-selected-default);
132
+ border-color: var(--ge-fixed-selector-selected-default);
133
133
 
134
134
  svg {
135
- color: light.$on-ge-on-fixed-selector-selected-default;
135
+ color: var(--on-ge-on-fixed-selector-selected-default);
136
136
  }
137
137
  }
138
138
 
139
139
  &--blue {
140
- background-color: light.$on-background-primary-default;
141
- border-color: light.$on-background-primary-default;
140
+ background-color: var(--on-background-primary-default);
141
+ border-color: var(--on-background-primary-default);
142
142
 
143
143
  svg {
144
- color: light.$on-ge-on-selector-primary-selected-default;
144
+ color: var(--on-ge-on-selector-primary-selected-default);
145
145
  }
146
146
  }
147
147
  }
@@ -157,7 +157,7 @@
157
157
 
158
158
  &__icon {
159
159
  border-radius: 4px;
160
- border: 2px solid light.$ge-selector-primary-unselected-default;
160
+ border: 2px solid var(--ge-selector-primary-unselected-default);
161
161
  box-sizing: border-box;
162
162
  height: $size;
163
163
  position: relative;
@@ -174,31 +174,31 @@
174
174
  }
175
175
 
176
176
  &--light {
177
- border-color: light.$ge-fixed-selector-unselected-default;
177
+ border-color: var(--ge-fixed-selector-unselected-default);
178
178
  }
179
179
  }
180
180
 
181
181
  &__description {
182
- color: light.$on-surface-primary-alternate;
182
+ color: var(--on-surface-primary-alternate);
183
183
  margin-left: $size + (spacing.$xs);
184
184
  &--light {
185
- color: light.$on-fixed-surface-neutral;
185
+ color: var(--on-fixed-surface-neutral);
186
186
  }
187
187
 
188
188
  &--disabled {
189
- color: light.$on-surface-primary-disabled;
189
+ color: var(--on-surface-primary-disabled);
190
190
  }
191
191
  }
192
192
 
193
193
  &__label {
194
- color: light.$on-surface-primary-default;
194
+ color: var(--on-surface-primary-default);
195
195
 
196
196
  &--light {
197
- color: light.$on-fixed-surface-primary-default;
197
+ color: var(--on-fixed-surface-primary-default);
198
198
  }
199
199
 
200
200
  &--disabled {
201
- color: light.$on-surface-primary-default;
201
+ color: var(--on-surface-primary-default);
202
202
  }
203
203
  }
204
204
 
@@ -208,11 +208,11 @@
208
208
  }
209
209
 
210
210
  &__error {
211
- color: light.$ge-signal-error;
211
+ color: var(--ge-signal-error);
212
212
  margin-top: 4px;
213
213
 
214
214
  &--light {
215
- color: light.$ge-signal-error;
215
+ color: var(--ge-signal-error);
216
216
  }
217
217
  }
218
218
  }
package/react/chip/chip.scss CHANGED
@@ -1,4 +1,4 @@
1
- @use '../../tokens/light';
1
+ @use '../../tokens/colours';
2
2
  @use '../../tokens/spacing';
3
3
 
4
4
  .chip {
@@ -10,23 +10,23 @@
10
10
  display: inline-block;
11
11
  border-radius: 40px; // NOTE: Custom border radius by design
12
12
  background-color: transparent;
13
- border: 1px solid light.$ge-chips-unselected-default;
13
+ border: 1px solid var(--ge-chips-unselected-default);
14
14
 
15
15
  @media (hover: hover) {
16
16
  &:not([disabled]):hover {
17
- background-color: light.$ge-chips-unselected-hover;
18
- color: light.$on-ge-on-chips-unselected-default;
17
+ background-color: var(--ge-chips-unselected-hover);
18
+ color: var(--on-ge-on-chips-unselected-default);
19
19
  }
20
20
  }
21
21
 
22
22
  &--selected {
23
- background-color: light.$ge-chips-selected-default;
24
- color: light.$on-ge-on-chips-selected-default;
23
+ background-color: var(--ge-chips-selected-default);
24
+ color: var(--on-ge-on-chips-selected-default);
25
25
 
26
26
  @media (hover: hover) {
27
27
  &:not([disabled]):hover {
28
- background-color: light.$ge-chips-selected-hover;
29
- color: light.$on-ge-on-chips-selected-default;
28
+ background-color: var(--ge-chips-selected-hover);
29
+ color: var(--on-ge-on-chips-selected-default);
30
30
  }
31
31
  }
32
32
  }
@@ -39,8 +39,8 @@
39
39
  }
40
40
 
41
41
  &[disabled] {
42
- background-color: light.$ge-chips-selected-disabled;
43
- color: light.$on-ge-on-chips-selected-disabled;
42
+ background-color: var(--ge-chips-selected-disabled);
43
+ color: var(--on-ge-on-chips-selected-disabled);
44
44
  cursor: not-allowed;
45
45
  }
46
46
  }
package/react/chip-selected/chip-selected.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  @use '../../tokens/spacing';
2
- @use '../../tokens/light';
2
+ @use '../../tokens/colours';
3
3
 
4
4
  .chip-selected {
5
5
  &__selected-options-wrapper {
@@ -34,10 +34,10 @@
34
34
  background-color: transparent;
35
35
  margin-top: spacing.$m;
36
36
  text-decoration: underline;
37
- color: light.$on-buttons-on-link-default;
37
+ color: var(--on-buttons-on-link-default);
38
38
 
39
39
  :hover {
40
- color: light.$on-buttons-on-link-hover;
40
+ color: var(--on-buttons-on-link-hover);
41
41
  }
42
42
  }
43
43
 
package/react/confirmation/confirmation.scss CHANGED
@@ -1,13 +1,13 @@
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
  .confirmation {
7
7
  $padding: spacing.$l;
8
8
  background: color-mix(
9
9
  in srgb,
10
- light.$fixed-background-secondary-default
10
+ var(--fixed-background-secondary-default)
11
11
  70%, transparent
12
12
  );
13
13
  box-sizing: border-box;
@@ -54,9 +54,9 @@
54
54
 
55
55
  &__wrapper {
56
56
  @include elevation.level(24);
57
- background: light.$surface-primary-default;
57
+ background: var(--surface-primary-default);
58
58
  border-radius: corner-radius.$s;
59
- color: light.$on-surface-primary-default;
59
+ color: var(--on-surface-primary-default);
60
60
  overflow: auto;
61
61
  padding: spacing.$l;
62
62
  }
package/react/context-menu/context-menu.scss CHANGED
@@ -1,13 +1,13 @@
1
1
  @use '../../tokens/spacing';
2
2
  @use '../../tokens/corner-radius';
3
3
  @use '../../tokens/elevation';
4
- @use '../../tokens/light';
4
+ @use '../../tokens/colours';
5
5
 
6
6
  .context-menu {
7
7
  $breakpoint: 600px;
8
8
  @include elevation.level(6);
9
9
 
10
- background: light.$surface-primary-default;
10
+ background: var(--surface-primary-default);
11
11
  position: fixed;
12
12
  bottom: 0;
13
13
  left: 0;
@@ -78,7 +78,7 @@
78
78
  height: 100%;
79
79
  top: 0;
80
80
  left: 0;
81
- background: light.$fixed-background-secondary-default;
81
+ background: var(--fixed-background-secondary-default);
82
82
  opacity: 0.2;
83
83
  z-index: 99;
84
84
 
@@ -98,15 +98,15 @@
98
98
  }
99
99
 
100
100
  &__texts {
101
- color: light.$on-surface-primary-default;
101
+ color: var(--on-surface-primary-default);
102
102
  }
103
103
 
104
104
  &__texts-description {
105
- color: light.$on-surface-primary-alternate;
105
+ color: var(--on-surface-primary-alternate);
106
106
  }
107
107
 
108
108
  &__list-items {
109
- border-top: 1px solid light.$ge-divider-default;
109
+ border-top: 1px solid var(--ge-divider-default);
110
110
  }
111
111
 
112
112
  &__list-item-link {
@@ -129,13 +129,13 @@
129
129
  margin-right: spacing.$s;
130
130
  display: flex;
131
131
  align-items: center;
132
- color: light.$on-surface-primary-disabled;
132
+ color: var(--on-surface-primary-disabled);
133
133
 
134
134
  &--theme-destructive {
135
- color: light.$on-buttons-on-destructive-outlined-default;
135
+ color: var(--on-buttons-on-destructive-outlined-default);
136
136
 
137
137
  &:hover {
138
- color: light.$on-buttons-on-destructive-outlined-hover;
138
+ color: var(--on-buttons-on-destructive-outlined-hover);
139
139
  }
140
140
  }
141
141
  }
@@ -153,20 +153,20 @@
153
153
  display: flex;
154
154
  align-items: center;
155
155
  cursor: pointer;
156
- color: light.$on-surface-primary-default;
156
+ color: var(--on-surface-primary-default);
157
157
  border-radius: corner-radius.$s;
158
158
  text-align: left;
159
159
 
160
160
  &:hover {
161
- background-color: light.$surface-primary-hover;
161
+ background-color: var(--surface-primary-hover);
162
162
  }
163
163
 
164
164
  &--theme-destructive {
165
- color: light.$on-buttons-on-destructive-outlined-default;
165
+ color: var(--on-buttons-on-destructive-outlined-default);
166
166
 
167
167
  &:hover {
168
- background-color: light.$buttons-destructive-outlined-hover;
169
- color: light.$on-buttons-on-destructive-outlined-hover;
168
+ background-color: var(--buttons-destructive-outlined-hover);
169
+ color: var(--on-buttons-on-destructive-outlined-hover);
170
170
  }
171
171
  }
172
172
  }