@sats-group/ui-lib 85.4.0 → 85.5.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 (8) hide show
  1. package/package.json +1 -1
  2. package/react/visually-button/visually-button.scss +34 -3
  3. package/tokens/dark.scss +49 -47
  4. package/tokens/darkmode.css +49 -47
  5. package/tokens/default-colours.css +22 -20
  6. package/tokens/light.scss +22 -20
  7. package/tokens/lightmode.css +22 -20
  8. package/tokens/primitives.scss +9 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sats-group/ui-lib",
3
- "version": "85.4.0",
3
+ "version": "85.5.0",
4
4
  "description": "SATS web user interface library",
5
5
  "author": "developer@sats.no",
6
6
  "license": "UNLICENSED",
package/react/visually-button/visually-button.scss CHANGED
@@ -88,7 +88,32 @@
88
88
  }
89
89
  }
90
90
 
91
- &--variant-complete,
91
+ &--variant-complete {
92
+ border-color: var(--buttons-complete-default);
93
+ background: var(--buttons-complete-default);
94
+ color: var(--on-buttons-on-complete-default);
95
+
96
+ @media (hover: hover) {
97
+ &:hover:not(&:disabled) {
98
+ background: var(--buttons-complete-hover);
99
+ border-color: var(--buttons-complete-hover);
100
+ }
101
+ }
102
+
103
+ &[disabled] {
104
+ &.visually-button--spinning {
105
+ background: var(--buttons-complete-default);
106
+ color: transparent;
107
+
108
+ .visually-button__spinner {
109
+ display: flex;
110
+ border-color: var(--buttons-complete-default);
111
+ color: var(--on-buttons-on-complete-default);
112
+ }
113
+ }
114
+ }
115
+ }
116
+
92
117
  &--variant-cta {
93
118
  border-color: var(--buttons-cta-default);
94
119
  background: var(--buttons-cta-default);
@@ -132,7 +157,9 @@
132
157
  &.visually-button--spinning {
133
158
  background: transparent;
134
159
  color: transparent;
135
- border-color: var(--buttons-secondary-default) !important; //NOTE: This overrites the default "disabled" color for spinner style.
160
+ border-color: var(
161
+ --buttons-secondary-default
162
+ ) !important; //NOTE: This overrites the default "disabled" color for spinner style.
136
163
 
137
164
  .visually-button__spinner {
138
165
  display: flex;
@@ -397,7 +424,9 @@
397
424
  &.visually-button--spinning {
398
425
  background: transparent;
399
426
  color: transparent;
400
- border-color: var(--buttons-waiting-list-outlined-default) !important; //NOTE: This overrides the default "disabled" color for spinner style.
427
+ border-color: var(
428
+ --buttons-waiting-list-outlined-default
429
+ ) !important; //NOTE: This overrides the default "disabled" color for spinner style.
401
430
 
402
431
  .visually-button__spinner {
403
432
  display: flex;
@@ -412,6 +441,8 @@
412
441
  height: 19px;
413
442
  place-items: center;
414
443
  width: 19px;
444
+ justify-content: center;
445
+ align-content: center;
415
446
 
416
447
  svg {
417
448
  display: block;
package/tokens/dark.scss CHANGED
@@ -1,17 +1,17 @@
1
1
  @use './primitives';
2
2
  /* Figma: https://www.figma.com/file/WzKCwRY09zn4rzRVfY0YvdRt/sats-ds-styles?type=design&node-id=8481%3A40161&mode=design&t=DfsR6he5XyYQLucx-1 */
3
- $background-primary-default: primitives.$black-100;
4
- $background-primary-hover: primitives.$bright-blue-170;
5
- $background-primary-selected: primitives.$black-100;
6
- $background-secondary-default: primitives.$black-90;
7
- $background-secondary-hover: primitives.$black-85;
8
- $background-secondary-selected: primitives.$black-90;
3
+ $background-primary-default: primitives.$blue-130;
4
+ $background-primary-hover: primitives.$blue-120;
5
+ $background-primary-selected: primitives.$blue-110;
6
+ $background-secondary-default: primitives.$blue-120;
7
+ $background-secondary-hover: primitives.$blue-110;
8
+ $background-secondary-selected: primitives.$blue-105;
9
9
  $buttons-action-default: primitives.$white-0;
10
10
  $buttons-action-disabled: primitives.$white-0;
11
11
  $buttons-action-pressed: primitives.$white-0;
12
- $buttons-cta-default: primitives.$coral-100;
12
+ $buttons-cta-default: primitives.$coral-120;
13
13
  $buttons-cta-disabled: primitives.$black-80;
14
- $buttons-cta-hover: primitives.$coral-120;
14
+ $buttons-cta-hover: primitives.$coral-130;
15
15
  $buttons-clean-default: primitives.$white-100;
16
16
  $buttons-clean-disabled: primitives.$white-10;
17
17
  $buttons-clean-hover: primitives.$white-90;
@@ -20,9 +20,9 @@ $buttons-clean-secondary-disabled: primitives.$white-5;
20
20
  $buttons-clean-secondary-hover: primitives.$white-10;
21
21
  $buttons-clean-secondary-outline: primitives.$white-100;
22
22
  $buttons-clean-secondary-outline-disabled: primitives.$white-40;
23
- $buttons-complete-default: primitives.$coral-100;
23
+ $buttons-complete-default: primitives.$coral-120;
24
24
  $buttons-complete-disabled: primitives.$black-80;
25
- $buttons-complete-hover: primitives.$coral-120;
25
+ $buttons-complete-hover: primitives.$coral-130;
26
26
  $buttons-destructive-default: primitives.$chili-red-80;
27
27
  $buttons-destructive-disabled: primitives.$black-80;
28
28
  $buttons-destructive-hover: primitives.$chili-red-60;
@@ -50,18 +50,20 @@ $buttons-waiting-list-hover: primitives.$egyptian-purple-100;
50
50
  $buttons-waiting-list-outlined-default: primitives.$egyptian-purple-80;
51
51
  $buttons-waiting-list-outlined-disabled: primitives.$black-50;
52
52
  $buttons-waiting-list-outlined-hover: primitives.$egyptian-purple-160;
53
- $fixed-background-primary-default: primitives.$blue-105;
54
- $fixed-background-primary-hover: primitives.$blue-100;
55
- $fixed-background-primary-selected: primitives.$blue-90;
53
+ $fixed-background-primary-default: primitives.$blue-110;
54
+ $fixed-background-primary-hover: primitives.$blue-105;
55
+ $fixed-background-primary-selected: primitives.$blue-100;
56
56
  $fixed-background-secondary-default: primitives.$blue-100;
57
- $fixed-background-secondary-hover: primitives.$blue-90;
58
- $fixed-background-secondary-selected: primitives.$blue-grey-80;
57
+ $fixed-background-secondary-hover: primitives.$blue-95;
58
+ $fixed-background-secondary-selected: primitives.$blue-90;
59
59
  $fixed-surface-primary-default: primitives.$blue-100;
60
- $fixed-surface-primary-hover: primitives.$blue-90;
61
- $fixed-surface-primary-selected: primitives.$blue-grey-80;
62
- $fixed-surface-secondary-default: primitives.$blue-grey-80;
63
- $fixed-surface-secondary-hover: primitives.$blue-90;
64
- $fixed-surface-secondary-selected: primitives.$blue-grey-80;
60
+ $fixed-surface-primary-disabled: primitives.$blue-110;
61
+ $fixed-surface-primary-hover: primitives.$blue-95;
62
+ $fixed-surface-primary-selected: primitives.$blue-90;
63
+ $fixed-surface-secondary-default: primitives.$white-10;
64
+ $fixed-surface-secondary-disabled: primitives.$white-5;
65
+ $fixed-surface-secondary-hover: primitives.$white-15;
66
+ $fixed-surface-secondary-selected: primitives.$white-15;
65
67
  $ge-graphical-elements-1: primitives.$white-100;
66
68
  $ge-graphical-elements-2: primitives.$white-90;
67
69
  $ge-graphical-elements-3: primitives.$white-70;
@@ -216,7 +218,7 @@ $ge-workouts-other: primitives.$celadon-60;
216
218
  $ge-workouts-pt: primitives.$uranian-blue-60;
217
219
  $ge-workouts-treatments: primitives.$caribbean-current-60;
218
220
  $on-background-error: primitives.$cardinal-60;
219
- $on-background-featured: primitives.$coral-90;
221
+ $on-background-featured: primitives.$coral-100;
220
222
  $on-background-information: primitives.$bright-blue-60;
221
223
  $on-background-neutral: primitives.$black-40;
222
224
  $on-background-success: primitives.$spring-green-80;
@@ -229,7 +231,7 @@ $on-background-secondary-alternate: primitives.$black-20;
229
231
  $on-background-secondary-default: primitives.$white-100;
230
232
  $on-background-secondary-disabled: primitives.$black-50;
231
233
  $on-fixed-background-error: primitives.$cardinal-60;
232
- $on-fixed-background-featured: primitives.$coral-90;
234
+ $on-fixed-background-featured: primitives.$coral-100;
233
235
  $on-fixed-background-information: primitives.$bright-blue-60;
234
236
  $on-fixed-background-neutral: primitives.$white-60;
235
237
  $on-fixed-background-success: primitives.$spring-green-60;
@@ -242,7 +244,7 @@ $on-fixed-background-secondary-alternate: primitives.$white-60;
242
244
  $on-fixed-background-secondary-default: primitives.$white-100;
243
245
  $on-fixed-background-secondary-disabled: primitives.$white-50;
244
246
  $on-fixed-surface-error: primitives.$cardinal-60;
245
- $on-fixed-surface-featured: primitives.$coral-90;
247
+ $on-fixed-surface-featured: primitives.$coral-100;
246
248
  $on-fixed-surface-information: primitives.$bright-blue-60;
247
249
  $on-fixed-surface-neutral: primitives.$white-60;
248
250
  $on-fixed-surface-success: primitives.$spring-green-60;
@@ -312,7 +314,7 @@ $on-ge-on-workouts-pt: primitives.$uranian-blue-160;
312
314
  $on-ge-on-workouts-treatments: primitives.$caribbean-current-180;
313
315
  $on-signal-surface-error-alternate: primitives.$cardinal-60;
314
316
  $on-signal-surface-error-default: primitives.$white-100;
315
- $on-signal-surface-featured-alternate: primitives.$coral-90;
317
+ $on-signal-surface-featured-alternate: primitives.$coral-100;
316
318
  $on-signal-surface-featured-default: primitives.$white-100;
317
319
  $on-signal-surface-information-alternate: primitives.$bright-blue-60;
318
320
  $on-signal-surface-information-default: primitives.$white-100;
@@ -325,7 +327,7 @@ $on-signal-surface-waiting-list-default: primitives.$white-100;
325
327
  $on-signal-surface-warning-alternate: primitives.$gold-80;
326
328
  $on-signal-surface-warning-default: primitives.$white-100;
327
329
  $on-surface-error: primitives.$cardinal-60;
328
- $on-surface-featured: primitives.$coral-90;
330
+ $on-surface-featured: primitives.$coral-100;
329
331
  $on-surface-information: primitives.$bright-blue-60;
330
332
  $on-surface-neutral: primitives.$black-40;
331
333
  $on-surface-success: primitives.$spring-green-80;
@@ -339,17 +341,17 @@ $on-surface-secondary-default: primitives.$white-100;
339
341
  $on-surface-secondary-disabled: primitives.$black-50;
340
342
  $on-workout-surface-availability-default: primitives.$white-100;
341
343
  $on-workout-surface-availability-hover: primitives.$white-80;
342
- $on-workout-surface-bootcamp-alternate: primitives.$tropical-indigo-100;
344
+ $on-workout-surface-bootcamp-alternate: primitives.$tropical-indigo-40;
343
345
  $on-workout-surface-bootcamp-default: primitives.$white-100;
344
- $on-workout-surface-gx-alternate: primitives.$salmon-pink-100;
346
+ $on-workout-surface-gx-alternate: primitives.$salmon-pink-20;
345
347
  $on-workout-surface-gx-default: primitives.$white-100;
346
- $on-workout-surface-gymfloor-alternate: primitives.$tangerine-100;
348
+ $on-workout-surface-gymfloor-alternate: primitives.$tangerine-20;
347
349
  $on-workout-surface-gymfloor-default: primitives.$white-100;
348
- $on-workout-surface-other-alternate: primitives.$celadon-100;
350
+ $on-workout-surface-other-alternate: primitives.$celadon-40;
349
351
  $on-workout-surface-other-default: primitives.$white-100;
350
- $on-workout-surface-pt-alternate: primitives.$uranian-blue-100;
352
+ $on-workout-surface-pt-alternate: primitives.$uranian-blue-40;
351
353
  $on-workout-surface-pt-default: primitives.$white-100;
352
- $on-workout-surface-treatments-alternate: primitives.$caribbean-current-60;
354
+ $on-workout-surface-treatments-alternate: primitives.$caribbean-current-40;
353
355
  $on-workout-surface-treatments-default: primitives.$white-100;
354
356
  $on-buttons-on-action-default: primitives.$coral-100;
355
357
  $on-buttons-on-action-disabled: primitives.$black-50;
@@ -392,25 +394,25 @@ $signal-surface-neutral: primitives.$black-90;
392
394
  $signal-surface-success: primitives.$spring-green-170;
393
395
  $signal-surface-waiting-list: primitives.$egyptian-purple-160;
394
396
  $signal-surface-warning: primitives.$gold-170;
395
- $surface-primary-default: primitives.$black-90;
396
- $surface-primary-disabled: primitives.$black-95;
397
- $surface-primary-hover: primitives.$bright-blue-170;
398
- $surface-primary-selected: primitives.$bright-blue-160;
399
- $surface-secondary-default: primitives.$black-85;
400
- $surface-secondary-disabled: primitives.$black-100;
401
- $surface-secondary-hover: primitives.$black-80;
402
- $surface-secondary-selected: primitives.$black-85;
403
- $workout-surface-availability: primitives.$black-85;
397
+ $surface-primary-default: primitives.$blue-110;
398
+ $surface-primary-disabled: primitives.$blue-110;
399
+ $surface-primary-hover: primitives.$blue-105;
400
+ $surface-primary-selected: primitives.$blue-100;
401
+ $surface-secondary-default: primitives.$blue-100;
402
+ $surface-secondary-disabled: primitives.$blue-100;
403
+ $surface-secondary-hover: primitives.$blue-95;
404
+ $surface-secondary-selected: primitives.$blue-90;
405
+ $workout-surface-availability: primitives.$black-60;
404
406
  $workout-surface-availability-hover: primitives.$black-80;
405
- $workout-surface-bootcamp: primitives.$tropical-indigo-180;
407
+ $workout-surface-bootcamp: primitives.$tropical-indigo-140;
406
408
  $workout-surface-bootcamp-hover: primitives.$tropical-indigo-160;
407
- $workout-surface-gx: primitives.$salmon-pink-180;
409
+ $workout-surface-gx: primitives.$salmon-pink-140;
408
410
  $workout-surface-gx-hover: primitives.$salmon-pink-160;
409
- $workout-surface-gymfloor: primitives.$tangerine-180;
411
+ $workout-surface-gymfloor: primitives.$tangerine-140;
410
412
  $workout-surface-gymfloor-hover: primitives.$tangerine-160;
411
- $workout-surface-other: primitives.$celadon-180;
413
+ $workout-surface-other: primitives.$celadon-140;
412
414
  $workout-surface-other-hover: primitives.$celadon-160;
413
- $workout-surface-pt: primitives.$uranian-blue-180;
415
+ $workout-surface-pt: primitives.$uranian-blue-140;
414
416
  $workout-surface-pt-hover: primitives.$uranian-blue-160;
415
- $workout-surface-treatments: primitives.$caribbean-current-180;
416
- $workout-surface-treatments-hover: primitives.$caribbean-current-160;
417
+ $workout-surface-treatments: primitives.$caribbean-current-100;
418
+ $workout-surface-treatments-hover: primitives.$caribbean-current-140;
package/tokens/darkmode.css CHANGED
@@ -1,16 +1,16 @@
1
1
  [data-theme="dark"] {
2
- --background-primary-default: #000000;
3
- --background-primary-hover: #0b2335;
4
- --background-primary-selected: #000000;
5
- --background-secondary-default: #1a1a1a;
6
- --background-secondary-hover: #262626;
7
- --background-secondary-selected: #1a1a1a;
2
+ --background-primary-default: #02080d;
3
+ --background-primary-hover: #06101a;
4
+ --background-primary-selected: #081928;
5
+ --background-secondary-default: #06101a;
6
+ --background-secondary-hover: #081928;
7
+ --background-secondary-selected: #142533;
8
8
  --buttons-action-default: #ffffff00;
9
9
  --buttons-action-disabled: #ffffff00;
10
10
  --buttons-action-pressed: #ffffff00;
11
- --buttons-cta-default: #fa5333;
11
+ --buttons-cta-default: #c84229;
12
12
  --buttons-cta-disabled: #333333;
13
- --buttons-cta-hover: #c84229;
13
+ --buttons-cta-hover: #af3a24;
14
14
  --buttons-clean-default: #ffffff;
15
15
  --buttons-clean-disabled: #ffffff1a;
16
16
  --buttons-clean-hover: #ffffffe5;
@@ -19,9 +19,9 @@
19
19
  --buttons-clean-secondary-hover: #ffffff1a;
20
20
  --buttons-clean-secondary-outline: #ffffff;
21
21
  --buttons-clean-secondary-outline-disabled: #ffffff66;
22
- --buttons-complete-default: #fa5333;
22
+ --buttons-complete-default: #c84229;
23
23
  --buttons-complete-disabled: #333333;
24
- --buttons-complete-hover: #c84229;
24
+ --buttons-complete-hover: #af3a24;
25
25
  --buttons-destructive-default: #e15b51;
26
26
  --buttons-destructive-disabled: #333333;
27
27
  --buttons-destructive-hover: #e8847d;
@@ -49,18 +49,20 @@
49
49
  --buttons-waiting-list-outlined-default: #5f5fa2;
50
50
  --buttons-waiting-list-outlined-disabled: #808080;
51
51
  --buttons-waiting-list-outlined-hover: #161638;
52
- --fixed-background-primary-default: #0a1826;
53
- --fixed-background-primary-hover: #0d2134;
54
- --fixed-background-primary-selected: #253748;
52
+ --fixed-background-primary-default: #081928;
53
+ --fixed-background-primary-hover: #142533;
54
+ --fixed-background-primary-selected: #0d2134;
55
55
  --fixed-background-secondary-default: #0d2134;
56
- --fixed-background-secondary-hover: #253748;
57
- --fixed-background-secondary-selected: #404d5b;
56
+ --fixed-background-secondary-hover: #192c3e;
57
+ --fixed-background-secondary-selected: #253748;
58
58
  --fixed-surface-primary-default: #0d2134;
59
- --fixed-surface-primary-hover: #253748;
60
- --fixed-surface-primary-selected: #404d5b;
61
- --fixed-surface-secondary-default: #404d5b;
62
- --fixed-surface-secondary-hover: #253748;
63
- --fixed-surface-secondary-selected: #404d5b;
59
+ --fixed-surface-primary-disabled: #081928;
60
+ --fixed-surface-primary-hover: #192c3e;
61
+ --fixed-surface-primary-selected: #253748;
62
+ --fixed-surface-secondary-default: #ffffff1a;
63
+ --fixed-surface-secondary-disabled: #ffffff0d;
64
+ --fixed-surface-secondary-hover: #ffffff26;
65
+ --fixed-surface-secondary-selected: #ffffff26;
64
66
  --ge-graphical-elements-1: #ffffff;
65
67
  --ge-graphical-elements-2: #ffffffe5;
66
68
  --ge-graphical-elements-3: #ffffffb2;
@@ -215,7 +217,7 @@
215
217
  --ge-workouts-pt: #a9dcff;
216
218
  --ge-workouts-treatments: #6a9ea1;
217
219
  --on-background-error: #d58891;
218
- --on-background-featured: #fb6447;
220
+ --on-background-featured: #fa5333;
219
221
  --on-background-information: #7dadd0;
220
222
  --on-background-neutral: #999999;
221
223
  --on-background-success: #3a9979;
@@ -228,7 +230,7 @@
228
230
  --on-background-secondary-default: #ffffff;
229
231
  --on-background-secondary-disabled: #808080;
230
232
  --on-fixed-background-error: #d58891;
231
- --on-fixed-background-featured: #fb6447;
233
+ --on-fixed-background-featured: #fa5333;
232
234
  --on-fixed-background-information: #7dadd0;
233
235
  --on-fixed-background-neutral: #ffffff99;
234
236
  --on-fixed-background-success: #6bb29b;
@@ -241,7 +243,7 @@
241
243
  --on-fixed-background-secondary-default: #ffffff;
242
244
  --on-fixed-background-secondary-disabled: #ffffff80;
243
245
  --on-fixed-surface-error: #d58891;
244
- --on-fixed-surface-featured: #fb6447;
246
+ --on-fixed-surface-featured: #fa5333;
245
247
  --on-fixed-surface-information: #7dadd0;
246
248
  --on-fixed-surface-neutral: #ffffff99;
247
249
  --on-fixed-surface-success: #6bb29b;
@@ -311,7 +313,7 @@
311
313
  --on-ge-on-workouts-treatments: #011314;
312
314
  --on-signal-surface-error-alternate: #d58891;
313
315
  --on-signal-surface-error-default: #ffffff;
314
- --on-signal-surface-featured-alternate: #fb6447;
316
+ --on-signal-surface-featured-alternate: #fa5333;
315
317
  --on-signal-surface-featured-default: #ffffff;
316
318
  --on-signal-surface-information-alternate: #7dadd0;
317
319
  --on-signal-surface-information-default: #ffffff;
@@ -324,7 +326,7 @@
324
326
  --on-signal-surface-warning-alternate: #e7c46d;
325
327
  --on-signal-surface-warning-default: #ffffff;
326
328
  --on-surface-error: #d58891;
327
- --on-surface-featured: #fb6447;
329
+ --on-surface-featured: #fa5333;
328
330
  --on-surface-information: #7dadd0;
329
331
  --on-surface-neutral: #999999;
330
332
  --on-surface-success: #3a9979;
@@ -338,17 +340,17 @@
338
340
  --on-surface-secondary-disabled: #808080;
339
341
  --on-workout-surface-availability-default: #ffffff;
340
342
  --on-workout-surface-availability-hover: #ffffffcc;
341
- --on-workout-surface-bootcamp-alternate: #a670ff;
343
+ --on-workout-surface-bootcamp-alternate: #dbc6ff;
342
344
  --on-workout-surface-bootcamp-default: #ffffff;
343
- --on-workout-surface-gx-alternate: #ff7083;
345
+ --on-workout-surface-gx-alternate: #ffe2e6;
344
346
  --on-workout-surface-gx-default: #ffffff;
345
- --on-workout-surface-gymfloor-alternate: #fba000;
347
+ --on-workout-surface-gymfloor-alternate: #feeccc;
346
348
  --on-workout-surface-gymfloor-default: #ffffff;
347
- --on-workout-surface-other-alternate: #65e694;
349
+ --on-workout-surface-other-alternate: #c1f5d4;
348
350
  --on-workout-surface-other-default: #ffffff;
349
- --on-workout-surface-pt-alternate: #70c4ff;
351
+ --on-workout-surface-pt-alternate: #c6e7ff;
350
352
  --on-workout-surface-pt-default: #ffffff;
351
- --on-workout-surface-treatments-alternate: #6a9ea1;
353
+ --on-workout-surface-treatments-alternate: #9bbec1;
352
354
  --on-workout-surface-treatments-default: #ffffff;
353
355
  --on-buttons-on-action-default: #fa5333;
354
356
  --on-buttons-on-action-disabled: #808080;
@@ -391,26 +393,26 @@
391
393
  --signal-surface-success: #03261a;
392
394
  --signal-surface-waiting-list: #161638;
393
395
  --signal-surface-warning: #443716;
394
- --surface-primary-default: #1a1a1a;
395
- --surface-primary-disabled: #0d0d0d;
396
- --surface-primary-hover: #0b2335;
397
- --surface-primary-selected: #0f2f46;
398
- --surface-secondary-default: #262626;
399
- --surface-secondary-disabled: #000000;
400
- --surface-secondary-hover: #333333;
401
- --surface-secondary-selected: #262626;
402
- --workout-surface-availability: #262626;
396
+ --surface-primary-default: #081928;
397
+ --surface-primary-disabled: #081928;
398
+ --surface-primary-hover: #142533;
399
+ --surface-primary-selected: #0d2134;
400
+ --surface-secondary-default: #0d2134;
401
+ --surface-secondary-disabled: #0d2134;
402
+ --surface-secondary-hover: #192c3e;
403
+ --surface-secondary-selected: #253748;
404
+ --workout-surface-availability: #666666;
403
405
  --workout-surface-availability-hover: #333333;
404
- --workout-surface-bootcamp: #211633;
406
+ --workout-surface-bootcamp: #644399;
405
407
  --workout-surface-bootcamp-hover: #422d66;
406
- --workout-surface-gx: #470009;
408
+ --workout-surface-gx: #ac4855;
407
409
  --workout-surface-gx-hover: #912d3a;
408
- --workout-surface-gymfloor: #322000;
410
+ --workout-surface-gymfloor: #976000;
409
411
  --workout-surface-gymfloor-hover: #644000;
410
- --workout-surface-other: #051e0e;
412
+ --workout-surface-other: #33764c;
411
413
  --workout-surface-other-hover: #184629;
412
- --workout-surface-pt: #002a47;
414
+ --workout-surface-pt: #2d6891;
413
415
  --workout-surface-pt-hover: #16496c;
414
- --workout-surface-treatments: #011314;
415
- --workout-surface-treatments-hover: #04383b;
416
+ --workout-surface-treatments: #065d63;
417
+ --workout-surface-treatments-hover: #054a4f;
416
418
  }
package/tokens/default-colours.css CHANGED
@@ -49,18 +49,20 @@ html:not([data-theme]) {
49
49
  --buttons-waiting-list-outlined-default: #5f5fa2;
50
50
  --buttons-waiting-list-outlined-disabled: #666666;
51
51
  --buttons-waiting-list-outlined-hover: #ebebf3;
52
- --fixed-background-primary-default: #0a1826;
53
- --fixed-background-primary-hover: #0d2134;
54
- --fixed-background-primary-selected: #253748;
52
+ --fixed-background-primary-default: #081928;
53
+ --fixed-background-primary-hover: #142533;
54
+ --fixed-background-primary-selected: #0d2134;
55
55
  --fixed-background-secondary-default: #0d2134;
56
- --fixed-background-secondary-hover: #253748;
57
- --fixed-background-secondary-selected: #404d5b;
56
+ --fixed-background-secondary-hover: #192c3e;
57
+ --fixed-background-secondary-selected: #253748;
58
58
  --fixed-surface-primary-default: #0d2134;
59
- --fixed-surface-primary-hover: #253748;
60
- --fixed-surface-primary-selected: #404d5b;
61
- --fixed-surface-secondary-default: #404d5b;
62
- --fixed-surface-secondary-hover: #253748;
63
- --fixed-surface-secondary-selected: #404d5b;
59
+ --fixed-surface-primary-disabled: #06101a;
60
+ --fixed-surface-primary-hover: #192c3e;
61
+ --fixed-surface-primary-selected: #253748;
62
+ --fixed-surface-secondary-default: #ffffff1a;
63
+ --fixed-surface-secondary-disabled: #ffffff0d;
64
+ --fixed-surface-secondary-hover: #ffffff26;
65
+ --fixed-surface-secondary-selected: #ffffff26;
64
66
  --ge-graphical-elements-1: #0d2134;
65
67
  --ge-graphical-elements-2: #9ea6ae;
66
68
  --ge-graphical-elements-3: #cfd3d6;
@@ -157,9 +159,9 @@ html:not([data-theme]) {
157
159
  --ge-rewards-platinum: #404d5b;
158
160
  --ge-rewards-silver: #808080;
159
161
  --ge-selector-primary-selected-alternate: #ffeeeb;
160
- --ge-selector-primary-selected-default: #c84229;
162
+ --ge-selector-primary-selected-default: #fa5333;
161
163
  --ge-selector-primary-selected-disabled: #fdbaad;
162
- --ge-selector-primary-selected-hover: #af3a24;
164
+ --ge-selector-primary-selected-hover: #c84229;
163
165
  --ge-selector-primary-selected-bg-default: #ffeeeb;
164
166
  --ge-selector-primary-selected-bg-disabled: #fff6f5;
165
167
  --ge-selector-primary-unselected-default: #666666;
@@ -228,7 +230,7 @@ html:not([data-theme]) {
228
230
  --on-background-secondary-default: #0d2134;
229
231
  --on-background-secondary-disabled: #707070;
230
232
  --on-fixed-background-error: #d58891;
231
- --on-fixed-background-featured: #fb6447;
233
+ --on-fixed-background-featured: #fa5333;
232
234
  --on-fixed-background-information: #7dadd0;
233
235
  --on-fixed-background-neutral: #ffffff99;
234
236
  --on-fixed-background-success: #6bb29b;
@@ -241,7 +243,7 @@ html:not([data-theme]) {
241
243
  --on-fixed-background-secondary-default: #ffffff;
242
244
  --on-fixed-background-secondary-disabled: #ffffff80;
243
245
  --on-fixed-surface-error: #d58891;
244
- --on-fixed-surface-featured: #fb6447;
246
+ --on-fixed-surface-featured: #fa5333;
245
247
  --on-fixed-surface-information: #7dadd0;
246
248
  --on-fixed-surface-neutral: #ffffff99;
247
249
  --on-fixed-surface-success: #6bb29b;
@@ -316,7 +318,7 @@ html:not([data-theme]) {
316
318
  --on-signal-surface-information-alternate: #226a9e;
317
319
  --on-signal-surface-information-default: #0d2134;
318
320
  --on-signal-surface-neutral-alternate: #666666;
319
- --on-signal-surface-neutral-default: #253748;
321
+ --on-signal-surface-neutral-default: #192c3e;
320
322
  --on-signal-surface-success-alternate: #076646;
321
323
  --on-signal-surface-success-default: #0d2134;
322
324
  --on-signal-surface-waiting-list-alternate: #37378b;
@@ -332,7 +334,7 @@ html:not([data-theme]) {
332
334
  --on-surface-warning: #866c2a;
333
335
  --on-surface-primary-alternate: #566471;
334
336
  --on-surface-primary-default: #0d2134;
335
- --on-surface-primary-disabled: #707070;
337
+ --on-surface-primary-disabled: #666666;
336
338
  --on-surface-secondary-alternate: #566471;
337
339
  --on-surface-secondary-default: #0d2134;
338
340
  --on-surface-secondary-disabled: #666666;
@@ -393,14 +395,14 @@ html:not([data-theme]) {
393
395
  --signal-surface-warning: #f8f3e8;
394
396
  --surface-primary-default: #ffffff;
395
397
  --surface-primary-disabled: #e7e9eb;
396
- --surface-primary-hover: #e9f1f7;
397
- --surface-primary-selected: #d4e4ef;
398
+ --surface-primary-hover: #f4f8fb;
399
+ --surface-primary-selected: #e9f1f7;
398
400
  --surface-secondary-default: #f7f7f7;
399
401
  --surface-secondary-disabled: #e5e5e5;
400
402
  --surface-secondary-hover: #f2f2f2;
401
403
  --surface-secondary-selected: #f2f2f2;
402
- --workout-surface-availability: #dcdee0;
403
- --workout-surface-availability-hover: #cfd3d6;
404
+ --workout-surface-availability: #e7e9eb;
405
+ --workout-surface-availability-hover: #dcdee0;
404
406
  --workout-surface-bootcamp: #e4d4ff;
405
407
  --workout-surface-bootcamp-hover: #dbc6ff;
406
408
  --workout-surface-gx: #ffc6cd;
package/tokens/light.scss CHANGED
@@ -50,18 +50,20 @@ $buttons-waiting-list-hover: primitives.$egyptian-purple-100;
50
50
  $buttons-waiting-list-outlined-default: primitives.$egyptian-purple-80;
51
51
  $buttons-waiting-list-outlined-disabled: primitives.$black-60;
52
52
  $buttons-waiting-list-outlined-hover: primitives.$egyptian-purple-10;
53
- $fixed-background-primary-default: primitives.$blue-105;
54
- $fixed-background-primary-hover: primitives.$blue-100;
55
- $fixed-background-primary-selected: primitives.$blue-90;
53
+ $fixed-background-primary-default: primitives.$blue-110;
54
+ $fixed-background-primary-hover: primitives.$blue-105;
55
+ $fixed-background-primary-selected: primitives.$blue-100;
56
56
  $fixed-background-secondary-default: primitives.$blue-100;
57
- $fixed-background-secondary-hover: primitives.$blue-90;
58
- $fixed-background-secondary-selected: primitives.$blue-grey-80;
57
+ $fixed-background-secondary-hover: primitives.$blue-95;
58
+ $fixed-background-secondary-selected: primitives.$blue-90;
59
59
  $fixed-surface-primary-default: primitives.$blue-100;
60
- $fixed-surface-primary-hover: primitives.$blue-90;
61
- $fixed-surface-primary-selected: primitives.$blue-grey-80;
62
- $fixed-surface-secondary-default: primitives.$blue-grey-80;
63
- $fixed-surface-secondary-hover: primitives.$blue-90;
64
- $fixed-surface-secondary-selected: primitives.$blue-grey-80;
60
+ $fixed-surface-primary-disabled: primitives.$blue-120;
61
+ $fixed-surface-primary-hover: primitives.$blue-95;
62
+ $fixed-surface-primary-selected: primitives.$blue-90;
63
+ $fixed-surface-secondary-default: primitives.$white-10;
64
+ $fixed-surface-secondary-disabled: primitives.$white-5;
65
+ $fixed-surface-secondary-hover: primitives.$white-15;
66
+ $fixed-surface-secondary-selected: primitives.$white-15;
65
67
  $ge-graphical-elements-1: primitives.$blue-100;
66
68
  $ge-graphical-elements-2: primitives.$blue-40;
67
69
  $ge-graphical-elements-3: primitives.$blue-20;
@@ -158,9 +160,9 @@ $ge-rewards-gold: primitives.$gold-130;
158
160
  $ge-rewards-platinum: primitives.$blue-grey-80;
159
161
  $ge-rewards-silver: primitives.$black-50;
160
162
  $ge-selector-primary-selected-alternate: primitives.$coral-10;
161
- $ge-selector-primary-selected-default: primitives.$coral-120;
163
+ $ge-selector-primary-selected-default: primitives.$coral-100;
162
164
  $ge-selector-primary-selected-disabled: primitives.$coral-40;
163
- $ge-selector-primary-selected-hover: primitives.$coral-130;
165
+ $ge-selector-primary-selected-hover: primitives.$coral-120;
164
166
  $ge-selector-primary-selected-bg-default: primitives.$coral-10;
165
167
  $ge-selector-primary-selected-bg-disabled: primitives.$coral-5;
166
168
  $ge-selector-primary-unselected-default: primitives.$black-60;
@@ -229,7 +231,7 @@ $on-background-secondary-alternate: primitives.$blue-70;
229
231
  $on-background-secondary-default: primitives.$blue-100;
230
232
  $on-background-secondary-disabled: primitives.$black-55;
231
233
  $on-fixed-background-error: primitives.$cardinal-60;
232
- $on-fixed-background-featured: primitives.$coral-90;
234
+ $on-fixed-background-featured: primitives.$coral-100;
233
235
  $on-fixed-background-information: primitives.$bright-blue-60;
234
236
  $on-fixed-background-neutral: primitives.$white-60;
235
237
  $on-fixed-background-success: primitives.$spring-green-60;
@@ -242,7 +244,7 @@ $on-fixed-background-secondary-alternate: primitives.$white-60;
242
244
  $on-fixed-background-secondary-default: primitives.$white-100;
243
245
  $on-fixed-background-secondary-disabled: primitives.$white-50;
244
246
  $on-fixed-surface-error: primitives.$cardinal-60;
245
- $on-fixed-surface-featured: primitives.$coral-90;
247
+ $on-fixed-surface-featured: primitives.$coral-100;
246
248
  $on-fixed-surface-information: primitives.$bright-blue-60;
247
249
  $on-fixed-surface-neutral: primitives.$white-60;
248
250
  $on-fixed-surface-success: primitives.$spring-green-60;
@@ -317,7 +319,7 @@ $on-signal-surface-featured-default: primitives.$blue-100;
317
319
  $on-signal-surface-information-alternate: primitives.$bright-blue-110;
318
320
  $on-signal-surface-information-default: primitives.$blue-100;
319
321
  $on-signal-surface-neutral-alternate: primitives.$black-60;
320
- $on-signal-surface-neutral-default: primitives.$blue-90;
322
+ $on-signal-surface-neutral-default: primitives.$blue-95;
321
323
  $on-signal-surface-success-alternate: primitives.$spring-green-120;
322
324
  $on-signal-surface-success-default: primitives.$blue-100;
323
325
  $on-signal-surface-waiting-list-alternate: primitives.$egyptian-purple-100;
@@ -333,7 +335,7 @@ $on-surface-waiting-list: primitives.$egyptian-purple-100;
333
335
  $on-surface-warning: primitives.$gold-140;
334
336
  $on-surface-primary-alternate: primitives.$blue-70;
335
337
  $on-surface-primary-default: primitives.$blue-100;
336
- $on-surface-primary-disabled: primitives.$black-55;
338
+ $on-surface-primary-disabled: primitives.$black-60;
337
339
  $on-surface-secondary-alternate: primitives.$blue-70;
338
340
  $on-surface-secondary-default: primitives.$blue-100;
339
341
  $on-surface-secondary-disabled: primitives.$black-60;
@@ -394,14 +396,14 @@ $signal-surface-waiting-list: primitives.$egyptian-purple-10;
394
396
  $signal-surface-warning: primitives.$gold-10;
395
397
  $surface-primary-default: primitives.$white-100;
396
398
  $surface-primary-disabled: primitives.$blue-10;
397
- $surface-primary-hover: primitives.$bright-blue-10;
398
- $surface-primary-selected: primitives.$bright-blue-20;
399
+ $surface-primary-hover: primitives.$bright-blue-5;
400
+ $surface-primary-selected: primitives.$bright-blue-10;
399
401
  $surface-secondary-default: primitives.$black-3;
400
402
  $surface-secondary-disabled: primitives.$black-10;
401
403
  $surface-secondary-hover: primitives.$black-5;
402
404
  $surface-secondary-selected: primitives.$black-5;
403
- $workout-surface-availability: primitives.$light-grey-15;
404
- $workout-surface-availability-hover: primitives.$blue-20;
405
+ $workout-surface-availability: primitives.$blue-10;
406
+ $workout-surface-availability-hover: primitives.$light-grey-15;
405
407
  $workout-surface-bootcamp: primitives.$tropical-indigo-30;
406
408
  $workout-surface-bootcamp-hover: primitives.$tropical-indigo-40;
407
409
  $workout-surface-gx: primitives.$salmon-pink-40;
package/tokens/lightmode.css CHANGED
@@ -49,18 +49,20 @@
49
49
  --buttons-waiting-list-outlined-default: #5f5fa2;
50
50
  --buttons-waiting-list-outlined-disabled: #666666;
51
51
  --buttons-waiting-list-outlined-hover: #ebebf3;
52
- --fixed-background-primary-default: #0a1826;
53
- --fixed-background-primary-hover: #0d2134;
54
- --fixed-background-primary-selected: #253748;
52
+ --fixed-background-primary-default: #081928;
53
+ --fixed-background-primary-hover: #142533;
54
+ --fixed-background-primary-selected: #0d2134;
55
55
  --fixed-background-secondary-default: #0d2134;
56
- --fixed-background-secondary-hover: #253748;
57
- --fixed-background-secondary-selected: #404d5b;
56
+ --fixed-background-secondary-hover: #192c3e;
57
+ --fixed-background-secondary-selected: #253748;
58
58
  --fixed-surface-primary-default: #0d2134;
59
- --fixed-surface-primary-hover: #253748;
60
- --fixed-surface-primary-selected: #404d5b;
61
- --fixed-surface-secondary-default: #404d5b;
62
- --fixed-surface-secondary-hover: #253748;
63
- --fixed-surface-secondary-selected: #404d5b;
59
+ --fixed-surface-primary-disabled: #06101a;
60
+ --fixed-surface-primary-hover: #192c3e;
61
+ --fixed-surface-primary-selected: #253748;
62
+ --fixed-surface-secondary-default: #ffffff1a;
63
+ --fixed-surface-secondary-disabled: #ffffff0d;
64
+ --fixed-surface-secondary-hover: #ffffff26;
65
+ --fixed-surface-secondary-selected: #ffffff26;
64
66
  --ge-graphical-elements-1: #0d2134;
65
67
  --ge-graphical-elements-2: #9ea6ae;
66
68
  --ge-graphical-elements-3: #cfd3d6;
@@ -157,9 +159,9 @@
157
159
  --ge-rewards-platinum: #404d5b;
158
160
  --ge-rewards-silver: #808080;
159
161
  --ge-selector-primary-selected-alternate: #ffeeeb;
160
- --ge-selector-primary-selected-default: #c84229;
162
+ --ge-selector-primary-selected-default: #fa5333;
161
163
  --ge-selector-primary-selected-disabled: #fdbaad;
162
- --ge-selector-primary-selected-hover: #af3a24;
164
+ --ge-selector-primary-selected-hover: #c84229;
163
165
  --ge-selector-primary-selected-bg-default: #ffeeeb;
164
166
  --ge-selector-primary-selected-bg-disabled: #fff6f5;
165
167
  --ge-selector-primary-unselected-default: #666666;
@@ -228,7 +230,7 @@
228
230
  --on-background-secondary-default: #0d2134;
229
231
  --on-background-secondary-disabled: #707070;
230
232
  --on-fixed-background-error: #d58891;
231
- --on-fixed-background-featured: #fb6447;
233
+ --on-fixed-background-featured: #fa5333;
232
234
  --on-fixed-background-information: #7dadd0;
233
235
  --on-fixed-background-neutral: #ffffff99;
234
236
  --on-fixed-background-success: #6bb29b;
@@ -241,7 +243,7 @@
241
243
  --on-fixed-background-secondary-default: #ffffff;
242
244
  --on-fixed-background-secondary-disabled: #ffffff80;
243
245
  --on-fixed-surface-error: #d58891;
244
- --on-fixed-surface-featured: #fb6447;
246
+ --on-fixed-surface-featured: #fa5333;
245
247
  --on-fixed-surface-information: #7dadd0;
246
248
  --on-fixed-surface-neutral: #ffffff99;
247
249
  --on-fixed-surface-success: #6bb29b;
@@ -316,7 +318,7 @@
316
318
  --on-signal-surface-information-alternate: #226a9e;
317
319
  --on-signal-surface-information-default: #0d2134;
318
320
  --on-signal-surface-neutral-alternate: #666666;
319
- --on-signal-surface-neutral-default: #253748;
321
+ --on-signal-surface-neutral-default: #192c3e;
320
322
  --on-signal-surface-success-alternate: #076646;
321
323
  --on-signal-surface-success-default: #0d2134;
322
324
  --on-signal-surface-waiting-list-alternate: #37378b;
@@ -332,7 +334,7 @@
332
334
  --on-surface-warning: #866c2a;
333
335
  --on-surface-primary-alternate: #566471;
334
336
  --on-surface-primary-default: #0d2134;
335
- --on-surface-primary-disabled: #707070;
337
+ --on-surface-primary-disabled: #666666;
336
338
  --on-surface-secondary-alternate: #566471;
337
339
  --on-surface-secondary-default: #0d2134;
338
340
  --on-surface-secondary-disabled: #666666;
@@ -393,14 +395,14 @@
393
395
  --signal-surface-warning: #f8f3e8;
394
396
  --surface-primary-default: #ffffff;
395
397
  --surface-primary-disabled: #e7e9eb;
396
- --surface-primary-hover: #e9f1f7;
397
- --surface-primary-selected: #d4e4ef;
398
+ --surface-primary-hover: #f4f8fb;
399
+ --surface-primary-selected: #e9f1f7;
398
400
  --surface-secondary-default: #f7f7f7;
399
401
  --surface-secondary-disabled: #e5e5e5;
400
402
  --surface-secondary-hover: #f2f2f2;
401
403
  --surface-secondary-selected: #f2f2f2;
402
- --workout-surface-availability: #dcdee0;
403
- --workout-surface-availability-hover: #cfd3d6;
404
+ --workout-surface-availability: #e7e9eb;
405
+ --workout-surface-availability-hover: #dcdee0;
404
406
  --workout-surface-bootcamp: #e4d4ff;
405
407
  --workout-surface-bootcamp-hover: #dbc6ff;
406
408
  --workout-surface-gx: #ffc6cd;
package/tokens/primitives.scss CHANGED
@@ -17,13 +17,16 @@ $black-95: #0d0d0d;
17
17
  $black-o20: #00000033;
18
18
  $blue-10: #e7e9eb;
19
19
  $blue-100: #0d2134;
20
- $blue-105: #0a1826;
21
- $blue-110: #06101a;
20
+ $blue-105: #142533;
21
+ $blue-110: #081928;
22
+ $blue-120: #06101a;
23
+ $blue-130: #02080d;
22
24
  $blue-20: #cfd3d6;
23
25
  $blue-40: #9ea6ae;
24
26
  $blue-5: #f3f4f5;
25
27
  $blue-70: #566471;
26
28
  $blue-90: #253748;
29
+ $blue-95: #192c3e;
27
30
  $blue-grey-80: #404d5b;
28
31
  $bright-blue-10: #e9f1f7;
29
32
  $bright-blue-100: #2676b0;
@@ -32,6 +35,7 @@ $bright-blue-130: #1b537b;
32
35
  $bright-blue-160: #0f2f46;
33
36
  $bright-blue-170: #0b2335;
34
37
  $bright-blue-20: #d4e4ef;
38
+ $bright-blue-5: #f4f8fb;
35
39
  $bright-blue-60: #7dadd0;
36
40
  $bright-blue-80: #5191c0;
37
41
  $cardinal-10: #f8ebed;
@@ -50,7 +54,7 @@ $caribbean-current-40: #9bbec1;
50
54
  $caribbean-current-60: #6a9ea1;
51
55
  $celadon-10: #f0fdf4;
52
56
  $celadon-100: #65e694;
53
- $celadon-140: #3f965e;
57
+ $celadon-140: #33764c;
54
58
  $celadon-160: #184629;
55
59
  $celadon-180: #051e0e;
56
60
  $celadon-20: #e0faea;
@@ -90,7 +94,7 @@ $gold-80: #e7c46d;
90
94
  $light-grey-15: #dcdee0;
91
95
  $salmon-pink-10: #fff1f3;
92
96
  $salmon-pink-100: #ff7083;
93
- $salmon-pink-140: #b54352;
97
+ $salmon-pink-140: #ac4855;
94
98
  $salmon-pink-160: #912d3a;
95
99
  $salmon-pink-180: #470009;
96
100
  $salmon-pink-20: #ffe2e6;
@@ -133,6 +137,7 @@ $white-10: #ffffff1a;
133
137
  $white-100: #ffffff;
134
138
  $white-15: #ffffff26;
135
139
  $white-20: #ffffff33;
140
+ $white-3: #ffffff08;
136
141
  $white-40: #ffffff66;
137
142
  $white-5: #ffffff0d;
138
143
  $white-50: #ffffff80;