@telus-uds/theme-koodo 4.17.0 → 5.1.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/build/android/schema.json +685 -716
  2. package/build/android/theme.json +1418 -1129
  3. package/build/ios/schema.json +685 -716
  4. package/build/ios/theme.json +1418 -1129
  5. package/build/rn/schema.json +685 -716
  6. package/build/rn/theme.js +887 -797
  7. package/package.json +4 -4
  8. package/theme.json +956 -916
package/build/rn/theme.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  *
3
3
  * Do not edit directly
4
- * Generated on Wed, 15 Nov 2023 18:32:53 GMT
4
+ * Generated on Mon, 27 Nov 2023 21:11:22 GMT
5
5
  *
6
6
  */
7
7
 
@@ -10,7 +10,7 @@ const PaletteIconChevronDown = require('@telus-uds/palette-koodo/build/rn/icons/
10
10
  const PaletteIconChevronUp = require('@telus-uds/palette-koodo/build/rn/icons/ChevronUp')
11
11
  const PaletteIconChevronLeft = require('@telus-uds/palette-koodo/build/rn/icons/ChevronLeft')
12
12
  const PaletteIconCheck = require('@telus-uds/palette-koodo/build/rn/icons/Check')
13
- const PaletteIconCheckCircledFilled = require('@telus-uds/palette-koodo/build/rn/icons/CheckCircledFilled')
13
+ const PaletteIconCheckCircleFilled = require('@telus-uds/palette-koodo/build/rn/icons/CheckCircleFilled')
14
14
  const PaletteIconCaution = require('@telus-uds/palette-koodo/build/rn/icons/Caution')
15
15
  const PaletteIconClose = require('@telus-uds/palette-koodo/build/rn/icons/Close')
16
16
  const PaletteIconAdd = require('@telus-uds/palette-koodo/build/rn/icons/Add')
@@ -32,6 +32,7 @@ const PaletteIconEyeMasked = require('@telus-uds/palette-koodo/build/rn/icons/Ey
32
32
  const PaletteIconEyeUnmasked = require('@telus-uds/palette-koodo/build/rn/icons/EyeUnmasked')
33
33
  const PaletteIconVisa = require('@telus-uds/palette-koodo/build/rn/icons/Visa')
34
34
  const PaletteIconTooltip = require('@telus-uds/palette-koodo/build/rn/icons/Tooltip')
35
+ const PaletteIconTooltipSymbol = require('@telus-uds/palette-koodo/build/rn/icons/TooltipSymbol')
35
36
  const PaletteIconPause = require('@telus-uds/palette-koodo/build/rn/icons/Pause')
36
37
  const PaletteIconReplay = require('@telus-uds/palette-koodo/build/rn/icons/Replay')
37
38
  const PaletteIconClosedCaptions = require('@telus-uds/palette-koodo/build/rn/icons/ClosedCaptions')
@@ -54,7 +55,7 @@ module.exports = {
54
55
  }
55
56
  },
56
57
  rules: [ { if: { size: 'large' }, tokens: { size: 48, thickness: 4 } } ],
57
- tokens: { color: '#016b6a', size: 24, thickness: 2 }
58
+ tokens: { color: '#7a3dfc', size: 24, thickness: 2 }
58
59
  },
59
60
  Badge: {
60
61
  appearances: {
@@ -76,15 +77,15 @@ module.exports = {
76
77
  if: { outline: true },
77
78
  tokens: {
78
79
  backgroundColor: 'rgba(0, 0, 0, 0)',
79
- borderColor: '#fae6f4'
80
+ borderColor: '#a1ed00'
80
81
  }
81
82
  },
82
83
  {
83
84
  if: { alternative: true },
84
85
  tokens: {
85
86
  backgroundColor: 'rgba(0, 0, 0, 0)',
86
- borderColor: '#016b6a',
87
- color: '#016b6a',
87
+ borderColor: '#dd0066',
88
+ color: '#dd0066',
88
89
  fontSize: 16,
89
90
  paddingBottom: 8,
90
91
  paddingTop: 8
@@ -93,8 +94,8 @@ module.exports = {
93
94
  {
94
95
  if: { purpose: 'offer' },
95
96
  tokens: {
96
- backgroundColor: '#c3efff',
97
- color: '#000000',
97
+ backgroundColor: '#7a3dfc',
98
+ color: '#ffffff',
98
99
  fontSize: 16,
99
100
  paddingBottom: 8,
100
101
  paddingTop: 8
@@ -103,8 +104,8 @@ module.exports = {
103
104
  {
104
105
  if: { purpose: 'editorial' },
105
106
  tokens: {
106
- backgroundColor: '#000000',
107
- color: '#ffffff',
107
+ backgroundColor: '#ffad00',
108
+ color: '#000000',
108
109
  fontSize: 16
109
110
  }
110
111
  },
@@ -112,7 +113,7 @@ module.exports = {
112
113
  if: { outline: true, purpose: 'editorial' },
113
114
  tokens: {
114
115
  backgroundColor: 'rgba(0, 0, 0, 0)',
115
- borderColor: '#000000',
116
+ borderColor: '#ffad00',
116
117
  color: '#000000'
117
118
  }
118
119
  },
@@ -120,16 +121,17 @@ module.exports = {
120
121
  if: { outline: true, purpose: 'offer' },
121
122
  tokens: {
122
123
  backgroundColor: 'rgba(0, 0, 0, 0)',
123
- borderColor: '#c3efff'
124
+ borderColor: '#7a3dfc',
125
+ color: '#000000'
124
126
  }
125
127
  }
126
128
  ],
127
129
  tokens: {
128
- backgroundColor: '#fae6f4',
130
+ backgroundColor: '#a1ed00',
129
131
  borderColor: 'rgba(0, 0, 0, 0)',
130
132
  borderRadius: 32,
131
133
  borderWidth: 2,
132
- color: '#7c1366',
134
+ color: '#000000',
133
135
  fontName: 'StagSans',
134
136
  fontSize: 14,
135
137
  fontWeight: '600',
@@ -163,8 +165,8 @@ module.exports = {
163
165
  backgroundGradient: {
164
166
  angle: 0,
165
167
  stops: [
166
- { color: '#016b6a', stop: 0 },
167
- { color: '#016b6a', stop: 1 }
168
+ { color: '#000000', stop: 0 },
169
+ { color: '#000000', stop: 1 }
168
170
  ],
169
171
  type: 'linear'
170
172
  },
@@ -234,23 +236,23 @@ module.exports = {
234
236
  },
235
237
  {
236
238
  if: { background: 'critical' },
237
- tokens: { backgroundColor: '#b8373e', borderColor: '#b8373e' }
239
+ tokens: { backgroundColor: '#c9370b', borderColor: '#c9370b' }
238
240
  },
239
241
  {
240
242
  if: { background: 'danger' },
241
- tokens: { backgroundColor: '#f8dde3', borderColor: '#f8dde3' }
243
+ tokens: { backgroundColor: '#fcd3c6', borderColor: '#fcd3c6' }
242
244
  },
243
245
  {
244
246
  if: { background: 'warning' },
245
- tokens: { backgroundColor: '#feeec7', borderColor: '#feeec7' }
247
+ tokens: { backgroundColor: '#fff5d2', borderColor: '#fff5d2' }
246
248
  },
247
249
  {
248
250
  if: { background: 'positive' },
249
- tokens: { backgroundColor: '#e5f7fb', borderColor: '#e5f7fb' }
251
+ tokens: { backgroundColor: '#c5f2cc', borderColor: '#c5f2cc' }
250
252
  },
251
253
  {
252
254
  if: { background: 'brand' },
253
- tokens: { backgroundColor: '#016b6a', borderColor: '#016b6a' }
255
+ tokens: { backgroundColor: '#7a3dfc', borderColor: '#7a3dfc' }
254
256
  },
255
257
  {
256
258
  if: { background: 'white' },
@@ -262,19 +264,19 @@ module.exports = {
262
264
  },
263
265
  {
264
266
  if: { background: 'featurePrimary' },
265
- tokens: { backgroundColor: '#7c1366', borderColor: '#7c1366' }
267
+ tokens: { backgroundColor: '#a1ed00', borderColor: '#a1ed00' }
266
268
  },
267
269
  {
268
270
  if: { background: 'featureSecondary' },
269
- tokens: { backgroundColor: '#17367d', borderColor: '#17367d' }
271
+ tokens: { backgroundColor: '#ff0076', borderColor: '#ff0076' }
270
272
  },
271
273
  {
272
274
  if: { background: 'featureNeutral' },
273
- tokens: { backgroundColor: '#595959', borderColor: '#595959' }
275
+ tokens: { backgroundColor: '#ffad00', borderColor: '#ffad00' }
274
276
  },
275
277
  {
276
278
  if: { background: 'featureBrand' },
277
- tokens: { backgroundColor: '#016b6a', borderColor: '#016b6a' }
279
+ tokens: { backgroundColor: '#e0d8fc', borderColor: '#e0d8fc' }
278
280
  }
279
281
  ],
280
282
  tokens: {
@@ -294,20 +296,20 @@ module.exports = {
294
296
  {
295
297
  if: { inverse: true },
296
298
  tokens: {
297
- color: '#e5f7fb',
299
+ color: '#ffffff',
298
300
  currentColor: '#ffffff',
299
301
  iconColor: '#c9c8c8'
300
302
  }
301
303
  }
302
304
  ],
303
305
  tokens: {
304
- color: '#016b6a',
305
- currentColor: '#016b6a',
306
+ color: '#000000',
307
+ currentColor: '#000000',
306
308
  fontName: 'StagSans',
307
309
  fontSize: 14,
308
310
  fontWeight: '600',
309
311
  icon: PaletteIconChevronRight,
310
- iconColor: '#016b6a',
312
+ iconColor: '#000000',
311
313
  iconPadding: 4,
312
314
  iconSize: 20,
313
315
  listItemPadding: 0
@@ -372,132 +374,120 @@ module.exports = {
372
374
  rules: [
373
375
  {
374
376
  if: { priority: 'high' },
375
- tokens: { backgroundColor: '#016b6a', color: '#ffffff' }
377
+ tokens: { backgroundColor: '#000000', color: '#ffffff' }
376
378
  },
377
379
  {
378
380
  if: { danger: true },
379
- tokens: { borderColor: '#df3d0c', color: '#df3d0c' }
380
- },
381
- {
382
- if: { inverse: true },
383
381
  tokens: {
384
382
  backgroundColor: 'rgba(0, 0, 0, 0)',
385
- borderColor: '#ffffff',
386
- color: '#ffffff',
387
- outerBackgroundColor: 'rgba(0, 0, 0, 0)'
383
+ borderBottomWidth: 1,
384
+ borderColor: '#c9370b',
385
+ borderLeftWidth: 1,
386
+ borderRightWidth: 1,
387
+ borderTopWidth: 1,
388
+ color: '#c9370b'
388
389
  }
389
390
  },
390
391
  {
391
- if: { hover: true },
392
- tokens: { backgroundColor: '#1b4746', color: '#ffffff' }
393
- },
394
- {
395
- if: { pressed: true },
396
- tokens: { backgroundColor: '#595959', color: '#c9c8c8' }
397
- },
398
- {
399
- if: { focus: true },
392
+ if: { inverse: true },
400
393
  tokens: {
401
- borderBottomWidth: 4,
402
- borderLeftWidth: 4,
403
- borderRightWidth: 4,
404
- borderTopWidth: 4,
394
+ backgroundColor: '#ffffff',
395
+ borderColor: 'rgba(0, 0, 0, 0)',
405
396
  color: '#000000',
406
- outerBorderColor: '#016b6a',
407
- outerBorderGap: 2
397
+ outerBackgroundColor: 'rgba(0, 0, 0, 0)'
408
398
  }
409
399
  },
410
400
  {
411
- if: { inverse: true, priority: 'high' },
401
+ if: { priority: 'low' },
412
402
  tokens: {
413
403
  backgroundColor: '#ffffff',
414
- borderWidth: 0,
415
- color: '#016b6a'
416
- }
417
- },
418
- {
419
- if: { hover: true, priority: 'high' },
420
- tokens: { backgroundColor: '#1b4746', color: '#ffffff' }
421
- },
422
- {
423
- if: { danger: true, focus: true },
424
- tokens: {
425
- color: '#df3d0c',
426
- outerBorderColor: '#df3d0c',
427
- outerBorderGap: 2
404
+ borderBottomWidth: 1,
405
+ borderColor: '#000000',
406
+ color: '#000000',
407
+ outerBackgroundColor: 'rgba(0, 0, 0, 0)'
428
408
  }
429
409
  },
430
410
  {
431
- if: { danger: true, hover: true },
432
- tokens: { backgroundColor: '#c9370b', color: '#ffffff' }
411
+ if: { hover: true },
412
+ tokens: { backgroundColor: '#404040', color: '#ffffff' }
433
413
  },
434
414
  {
435
- if: { hover: true, inverse: true },
415
+ if: { focus: true },
436
416
  tokens: {
437
- backgroundColor: '#e6e6e6',
438
- borderColor: '#e6e6e6',
439
- color: '#016b6a'
417
+ borderBottomWidth: 1,
418
+ borderColor: '#000000',
419
+ borderLeftWidth: 1,
420
+ borderRightWidth: 1,
421
+ borderTopWidth: 1,
422
+ color: '#ffffff',
423
+ outerBorderColor: '#000000',
424
+ outerBorderGap: 4,
425
+ outerBorderWidth: 1
440
426
  }
441
427
  },
442
428
  {
443
- if: { pressed: true, priority: 'high' },
444
- tokens: { backgroundColor: '#595959', color: '#c9c8c8' }
429
+ if: { hover: true, priority: 'low' },
430
+ tokens: { borderBottomWidth: 1, outerBorderColor: '#000000' }
445
431
  },
446
432
  {
447
- if: { inverse: true, pressed: true },
448
- tokens: { backgroundColor: '#c9c8c8', color: '#666666' }
433
+ if: { focus: true, priority: 'low' },
434
+ tokens: { color: '#000000' }
449
435
  },
450
436
  {
451
- if: { focus: true, priority: 'high' },
452
- tokens: {
453
- backgroundColor: '#016b6a',
454
- color: '#ffffff',
455
- outerBorderGap: 2
456
- }
437
+ if: { focus: true, hover: true, priority: 'low' },
438
+ tokens: { color: '#ffffff' }
457
439
  },
458
440
  {
459
- if: { focus: true, inverse: true },
441
+ if: { danger: true, focus: true },
460
442
  tokens: {
461
- borderColor: '#ffffff',
462
- color: '#ffffff',
463
- outerBorderColor: '#ffffff',
443
+ borderBottomWidth: 1,
444
+ borderColor: '#c9370b',
445
+ borderLeftWidth: 1,
446
+ borderRightWidth: 1,
447
+ borderTopWidth: 1,
448
+ borderWidth: 1,
449
+ color: '#c9370b',
450
+ outerBorderColor: '#c9370b',
464
451
  outerBorderGap: 2
465
452
  }
466
453
  },
467
454
  {
468
- if: { focus: true, pressed: true },
455
+ if: { hover: true, inverse: true },
469
456
  tokens: {
470
- backgroundColor: '#595959',
457
+ backgroundColor: '#c9c8c8',
471
458
  borderColor: 'rgba(0, 0, 0, 0)',
472
- color: '#c9c8c8',
473
- outerBorderGap: 2
459
+ color: '#404040',
460
+ outerBorderColor: 'rgba(0, 0, 0, 0)',
461
+ outerBorderWidth: 1
474
462
  }
475
463
  },
476
464
  {
477
- if: { danger: true, pressed: true, priority: 'high' },
478
- tokens: { backgroundColor: '#595959', color: '#c9c8c8' }
479
- },
480
- {
481
- if: { hover: true, inverse: true, priority: 'high' },
482
- tokens: { backgroundColor: '#e6e6e6', color: '#016b6a' }
465
+ if: { inverse: true, pressed: true },
466
+ tokens: { backgroundColor: '#c9c8c8', color: '#666666' }
483
467
  },
484
468
  {
485
- if: { focus: true, inverse: true, priority: 'high' },
469
+ if: { focus: true, inverse: true },
486
470
  tokens: {
487
- backgroundColor: '#ffffff',
488
- borderColor: '#ffffff',
489
- color: '#016b6a',
471
+ borderBottomWidth: 1,
472
+ borderColor: 'rgba(0, 0, 0, 0)',
473
+ borderLeftWidth: 1,
474
+ borderRightWidth: 1,
475
+ borderTopWidth: 1,
476
+ color: '#000000',
490
477
  outerBorderColor: '#ffffff',
491
478
  outerBorderGap: 2
492
479
  }
493
480
  },
494
481
  {
495
- if: { danger: true, focus: true, pressed: true },
482
+ if: { danger: true, inverse: true },
496
483
  tokens: {
497
- backgroundColor: '#595959',
484
+ backgroundColor: '#ffffff',
485
+ borderBottomWidth: 0,
498
486
  borderColor: 'rgba(0, 0, 0, 0)',
499
- color: '#c9c8c8',
500
- outerBorderGap: 2
487
+ borderLeftWidth: 0,
488
+ borderRightWidth: 0,
489
+ borderTopWidth: 0,
490
+ color: '#c9370b'
501
491
  }
502
492
  },
503
493
  {
@@ -524,83 +514,46 @@ module.exports = {
524
514
  paddingTop: 4
525
515
  }
526
516
  },
527
- {
528
- description: 'Buttons should not be disabled or set as inactive. Use inline (on blur) error messaging to provide feedback when the form is invalid. In exceptional instances where disabled buttons are needed, it must be clear to the user why the button is disabled and what they need to do to enable it.',
529
- if: { inactive: true },
530
- tokens: {
531
- backgroundColor: '#c9c8c8',
532
- borderColor: '#c9c8c8',
533
- borderWidth: 0,
534
- color: '#efefef'
535
- }
536
- },
537
517
  {
538
518
  if: { text: true },
539
519
  tokens: {
540
520
  backgroundColor: 'rgba(0, 0, 0, 0)',
541
521
  borderColor: 'rgba(0, 0, 0, 0)',
542
522
  borderWidth: 0,
543
- color: '#17367d',
523
+ color: '#000000',
544
524
  minWidth: 0,
545
525
  paddingLeft: 0,
546
526
  paddingRight: 0,
547
527
  textLine: 'underline'
548
528
  }
549
529
  },
550
- {
551
- if: { hover: true, text: true },
552
- tokens: { color: '#052158', textLine: 'none' }
553
- },
554
- {
555
- if: { priority: 'high', text: true },
556
- tokens: { color: '#016b6a' }
557
- },
558
- {
559
- if: { danger: true, text: true },
560
- tokens: { color: '#df3d0c' }
561
- },
562
530
  {
563
531
  if: { focus: true, text: true },
564
532
  tokens: {
565
533
  borderColor: 'rgba(0, 0, 0, 0)',
566
- borderRadius: 0,
567
- color: '#17367d',
568
- outerBorderColor: '#17367d'
534
+ color: '#000000',
535
+ outerBorderColor: '#000000'
569
536
  }
570
537
  },
571
538
  {
572
- if: { focus: true, priority: 'high', text: true },
573
- tokens: {
574
- borderColor: 'rgba(0, 0, 0, 0)',
575
- borderRadius: 0,
576
- color: '#016b6a',
577
- outerBorderColor: '#016b6a'
578
- }
539
+ if: { hover: true, text: true },
540
+ tokens: { color: '#404040', textLine: 'none' }
541
+ },
542
+ {
543
+ if: { danger: true, text: true },
544
+ tokens: { color: '#c9370b' }
579
545
  },
580
546
  {
581
547
  if: { danger: true, focus: true, text: true },
582
548
  tokens: {
583
549
  borderColor: 'rgba(0, 0, 0, 0)',
584
- borderRadius: 0,
585
- color: '#df3d0c',
586
- outerBorderColor: '#df3d0c'
550
+ color: '#c9370b',
551
+ outerBorderColor: '#c9370b'
587
552
  }
588
553
  },
589
554
  {
590
- if: { hover: true, priority: 'high', text: true },
591
- tokens: { color: '#1b4746' }
592
- },
593
- {
594
- if: { hover: true, priority: null, text: true },
595
- tokens: { color: '#052158' }
596
- },
597
- {
598
- if: { hover: true, priority: 'low', text: true },
599
- tokens: { color: '#052158' }
600
- },
601
- {
602
- if: { danger: true, hover: true, text: true },
603
- tokens: { color: '#c9370b' }
555
+ if: { hover: true, priority: 'low' },
556
+ tokens: { borderColor: 'rgba(0, 0, 0, 0)', borderWidth: 0 }
604
557
  },
605
558
  {
606
559
  if: { pressed: true, text: true },
@@ -611,38 +564,32 @@ module.exports = {
611
564
  }
612
565
  },
613
566
  {
614
- if: { focus: true, pressed: true, text: true },
615
- tokens: {
616
- borderColor: 'rgba(0, 0, 0, 0)',
617
- color: '#595959',
618
- outerBorderColor: '#17367d',
619
- textLine: 'none'
620
- }
567
+ if: { danger: true, hover: true },
568
+ tokens: { backgroundColor: '#f3592b', color: '#ffffff' }
621
569
  },
622
570
  {
623
- if: { focus: true, pressed: true, priority: 'high', text: true },
571
+ if: { danger: true, hover: true, text: true },
624
572
  tokens: {
625
- borderColor: 'rgba(0, 0, 0, 0)',
626
- color: '#595959',
627
- outerBorderColor: '#595959',
628
- textLine: 'none'
573
+ backgroundColor: 'rgba(0, 0, 0, 0)',
574
+ color: '#f3592b',
575
+ outerBorderColor: 'rgba(0, 0, 0, 0)'
629
576
  }
630
577
  },
631
578
  {
632
- if: { danger: true, focus: true, pressed: true, text: true },
579
+ if: { danger: true, pressed: true },
633
580
  tokens: {
581
+ backgroundColor: '#404040',
634
582
  borderColor: 'rgba(0, 0, 0, 0)',
635
- color: '#595959',
636
- outerBorderColor: '#df3d0c',
637
- textLine: 'none'
583
+ color: '#666666',
584
+ outerBorderGap: 0
638
585
  }
639
586
  },
640
587
  {
641
- if: { inactive: true, text: true },
588
+ if: { danger: true, pressed: true, text: true },
642
589
  tokens: {
590
+ backgroundColor: 'rgba(0, 0, 0, 0)',
643
591
  borderColor: 'rgba(0, 0, 0, 0)',
644
- color: '#c9c8c8',
645
- outerBorderColor: 'rgba(0, 0, 0, 0)',
592
+ color: '#666666',
646
593
  textLine: 'none'
647
594
  }
648
595
  },
@@ -650,10 +597,6 @@ module.exports = {
650
597
  if: { inverse: true, text: true },
651
598
  tokens: { backgroundColor: 'rgba(0, 0, 0, 0)', color: '#ffffff' }
652
599
  },
653
- {
654
- if: { hover: true, inverse: true, text: true },
655
- tokens: { color: '#c9c8c8' }
656
- },
657
600
  {
658
601
  if: { focus: true, inverse: true, text: true },
659
602
  tokens: {
@@ -663,7 +606,11 @@ module.exports = {
663
606
  }
664
607
  },
665
608
  {
666
- if: { focus: true, inverse: true, pressed: true, text: true },
609
+ if: { hover: true, inverse: true, text: true },
610
+ tokens: { color: '#c9c8c8' }
611
+ },
612
+ {
613
+ if: { inverse: true, pressed: true, text: true },
667
614
  tokens: {
668
615
  borderColor: 'rgba(0, 0, 0, 0)',
669
616
  color: '#666666',
@@ -673,29 +620,82 @@ module.exports = {
673
620
  {
674
621
  if: { inactive: true, inverse: true, text: true },
675
622
  tokens: { borderColor: 'rgba(0, 0, 0, 0)', color: '#c9c8c8' }
623
+ },
624
+ {
625
+ if: { pressed: true },
626
+ tokens: {
627
+ borderBottomWidth: 0,
628
+ color: '#666666',
629
+ outerBorderColor: 'rgba(0, 0, 0, 0)'
630
+ }
631
+ },
632
+ {
633
+ description: 'Buttons should not be disabled or set as inactive. Use inline (on blur) error messaging to provide feedback when the form is invalid. In exceptional instances where disabled buttons are needed, it must be clear to the user why the button is disabled and what they need to do to enable it.',
634
+ if: { inactive: true },
635
+ tokens: {
636
+ backgroundColor: '#c9c8c8',
637
+ borderColor: '#c9c8c8',
638
+ borderWidth: 0,
639
+ color: '#ffffff',
640
+ outerBorderColor: 'rgba(0, 0, 0, 0)'
641
+ }
642
+ },
643
+ {
644
+ if: { priority: 'low', text: true },
645
+ tokens: { color: '#7a3dfc' }
646
+ },
647
+ {
648
+ if: { hover: true, priority: 'low', text: true },
649
+ tokens: { color: '#5b2bc2', outerBorderColor: 'rgba(0, 0, 0, 0)' }
650
+ },
651
+ {
652
+ if: { focus: true, priority: 'low', text: true },
653
+ tokens: {
654
+ color: '#7a3dfc',
655
+ outerBorderColor: '#7a3dfc',
656
+ outerBorderWidth: 1
657
+ }
658
+ },
659
+ {
660
+ if: { pressed: true, priority: 'low', text: true },
661
+ tokens: {
662
+ color: '#666666',
663
+ outerBorderColor: 'rgba(0, 0, 0, 0)',
664
+ outerBorderWidth: 0
665
+ }
666
+ },
667
+ {
668
+ if: { inactive: true, text: true },
669
+ tokens: {
670
+ backgroundColor: 'rgba(0, 0, 0, 0)',
671
+ borderColor: 'rgba(0, 0, 0, 0)',
672
+ color: '#c9c8c8',
673
+ outerBorderColor: 'rgba(0, 0, 0, 0)',
674
+ textLine: 'none'
675
+ }
676
676
  }
677
677
  ],
678
678
  tokens: {
679
- backgroundColor: '#ffffff',
680
- borderBottomWidth: 1,
681
- borderColor: '#016b6a',
679
+ backgroundColor: '#000000',
680
+ borderBottomWidth: 0,
681
+ borderColor: 'rgba(0, 0, 0, 0)',
682
682
  borderLeftWidth: 1,
683
683
  borderRadius: 4,
684
684
  borderRightWidth: 1,
685
685
  borderTopWidth: 1,
686
686
  borderWidth: 1,
687
- color: '#016b6a',
687
+ color: '#ffffff',
688
688
  fontName: 'StagSans',
689
689
  fontSize: 16,
690
690
  fontWeight: '600',
691
691
  height: null,
692
692
  icon: null,
693
- iconSize: 24,
693
+ iconSize: 16,
694
694
  iconSpace: 2,
695
695
  lineHeight: 1.5,
696
696
  minWidth: 144,
697
697
  opacity: 1,
698
- outerBackgroundColor: '#ffffff',
698
+ outerBackgroundColor: 'rgba(0, 0, 0, 0)',
699
699
  outerBorderColor: 'rgba(0, 0, 0, 0)',
700
700
  outerBorderGap: null,
701
701
  outerBorderWidth: 1,
@@ -752,38 +752,44 @@ module.exports = {
752
752
  },
753
753
  {
754
754
  if: { focus: true },
755
- tokens: { outerBorderColor: '#016b6a' }
755
+ tokens: { outerBorderColor: '#000000' }
756
756
  },
757
757
  {
758
758
  if: { pressed: true },
759
759
  tokens: {
760
- backgroundColor: '#1b4746',
761
- borderColor: '#1b4746',
762
- color: '#ffffff'
760
+ backgroundColor: '#404040',
761
+ borderColor: '#404040',
762
+ color: '#666666',
763
+ iconColor: '#666666'
763
764
  }
764
765
  },
765
766
  {
766
- if: { hover: true },
767
+ if: { focus: false, hover: true, pressed: false },
767
768
  tokens: {
768
- backgroundColor: '#1b4746',
769
- borderColor: 'rgba(0, 0, 0, 0)',
770
- color: '#ffffff',
771
- iconColor: '#ffffff'
769
+ backgroundColor: '#404040',
770
+ borderColor: 'rgba(0, 0, 0, 0)'
771
+ }
772
+ },
773
+ {
774
+ if: { focus: true, hover: true, pressed: false },
775
+ tokens: {
776
+ backgroundColor: '#404040',
777
+ borderColor: 'rgba(0, 0, 0, 0)'
772
778
  }
773
779
  },
774
780
  {
775
781
  if: { inactive: true },
776
782
  tokens: {
777
- backgroundColor: '#efefef',
778
- borderColor: '#efefef',
779
- color: '#c9c8c8',
780
- iconColor: '#c9c8c8'
783
+ backgroundColor: '#c9c8c8',
784
+ borderColor: '#c9c8c8',
785
+ color: '#ffffff',
786
+ iconColor: '#ffffff'
781
787
  }
782
788
  },
783
789
  {
784
790
  if: { selected: true },
785
791
  tokens: {
786
- backgroundColor: '#016b6a',
792
+ backgroundColor: '#000000',
787
793
  color: '#ffffff',
788
794
  iconColor: '#ffffff',
789
795
  outerBorderColor: 'transparent'
@@ -791,16 +797,13 @@ module.exports = {
791
797
  },
792
798
  {
793
799
  if: { hover: true, selected: true },
794
- tokens: {
795
- backgroundColor: '#1b4746',
796
- outerBorderColor: 'rgba(0, 0, 0, 0)'
797
- }
800
+ tokens: { backgroundColor: '#404040' }
798
801
  },
799
802
  {
800
- if: { focus: true, selected: true },
803
+ if: { focus: true, hover: false, selected: true },
801
804
  tokens: {
802
- backgroundColor: '#016b6a',
803
- outerBorderColor: '#016b6a',
805
+ backgroundColor: '#000000',
806
+ outerBorderColor: '#000000',
804
807
  outerBorderGap: 2,
805
808
  outerBorderWidth: 1
806
809
  }
@@ -808,23 +811,25 @@ module.exports = {
808
811
  {
809
812
  if: { hover: true, pressed: true, selected: true },
810
813
  tokens: {
811
- backgroundColor: '#1b4746',
812
- borderColor: 'rgba(0, 0, 0, 0)'
814
+ backgroundColor: '#404040',
815
+ borderColor: 'rgba(0, 0, 0, 0)',
816
+ color: '#666666',
817
+ iconColor: '#666666'
813
818
  }
814
819
  },
815
820
  {
816
821
  if: { focus: true, pressed: true, selected: true },
817
- tokens: { backgroundColor: '#1b4746', outerBorderColor: '#1b4746' }
822
+ tokens: { backgroundColor: '#404040', outerBorderColor: '#404040' }
818
823
  }
819
824
  ],
820
825
  tokens: {
821
826
  alignSelf: 'flex-start',
822
827
  backgroundColor: '#ffffff',
823
- borderColor: '#016b6a',
828
+ borderColor: '#000000',
824
829
  borderRadius: 4,
825
830
  borderWidth: 1,
826
- color: '#016b6a',
827
- dividerColor: '#016b6a',
831
+ color: '#000000',
832
+ dividerColor: '#000000',
828
833
  fontName: 'StagSans',
829
834
  fontSize: 14,
830
835
  fontWeight: '600',
@@ -832,7 +837,7 @@ module.exports = {
832
837
  iconAlignSelf: 'center',
833
838
  iconBackground: 'rgba(0, 0, 0, 0)',
834
839
  iconBorderRadius: 32,
835
- iconColor: '#016b6a',
840
+ iconColor: '#000000',
836
841
  iconPadding: 4,
837
842
  iconPosition: 'right',
838
843
  iconSize: 20,
@@ -851,7 +856,7 @@ module.exports = {
851
856
  paddingRight: 16,
852
857
  paddingTop: 8,
853
858
  shadow: null,
854
- subtitleColor: '#1b4746',
859
+ subtitleColor: '#000000',
855
860
  textAlign: 'center',
856
861
  width: null
857
862
  }
@@ -931,29 +936,41 @@ module.exports = {
931
936
  }
932
937
  },
933
938
  rules: [
934
- {
935
- if: { pressed: true },
936
- tokens: { backgroundColor: '#1b4746', color: '#ffffff' }
937
- },
938
939
  {
939
940
  if: { focus: true },
940
- tokens: { outerBorderColor: '#016b6a' }
941
+ tokens: { outerBorderColor: '#000000' }
941
942
  },
942
943
  {
943
944
  if: { hover: true },
944
- tokens: { backgroundColor: '#1b4746', color: '#ffffff' }
945
+ tokens: {
946
+ backgroundColor: '#404040',
947
+ borderColor: '#404040',
948
+ color: '#ffffff'
949
+ }
945
950
  },
946
951
  {
947
952
  if: { selected: true },
948
- tokens: { backgroundColor: '#016b6a', color: '#ffffff' }
953
+ tokens: { backgroundColor: '#7a3dfc', color: '#ffffff' }
954
+ },
955
+ {
956
+ if: { pressed: true },
957
+ tokens: { backgroundColor: '#404040', color: '#666666' }
958
+ },
959
+ {
960
+ if: { focus: true, selected: true },
961
+ tokens: {
962
+ backgroundColor: '#7a3dfc',
963
+ color: '#ffffff',
964
+ outerBorderColor: '#7a3dfc'
965
+ }
949
966
  },
950
967
  {
951
968
  if: { hover: true, selected: true },
952
- tokens: { backgroundColor: '#1b4746', color: '#ffffff' }
969
+ tokens: { backgroundColor: '#5b2bc2', color: '#ffffff' }
953
970
  },
954
971
  {
955
972
  if: { pressed: true, selected: true },
956
- tokens: { backgroundColor: '#1b4746', color: '#ffffff' }
973
+ tokens: { backgroundColor: '#404040', color: '#666666' }
957
974
  },
958
975
  {
959
976
  if: { inactive: true },
@@ -969,10 +986,10 @@ module.exports = {
969
986
  tokens: {
970
987
  alignSelf: 'flex-start',
971
988
  backgroundColor: '#ffffff',
972
- borderColor: '#016b6a',
989
+ borderColor: '#000000',
973
990
  borderRadius: 4,
974
991
  borderWidth: 1,
975
- color: '#016b6a',
992
+ color: '#000000',
976
993
  fontName: 'StagSans',
977
994
  fontSize: 16,
978
995
  fontWeight: '600',
@@ -1008,9 +1025,9 @@ module.exports = {
1008
1025
  { if: { rounded: true }, tokens: { borderRadius: 4 } }
1009
1026
  ],
1010
1027
  tokens: {
1011
- background: '#fae6f4',
1028
+ background: '#7a3dfc',
1012
1029
  borderRadius: 0,
1013
- color: '#7c1366',
1030
+ color: '#ffffff',
1014
1031
  gap: 16,
1015
1032
  paddingBottom: 8,
1016
1033
  paddingLeft: 16,
@@ -1043,24 +1060,24 @@ module.exports = {
1043
1060
  {
1044
1061
  if: { background: 'alternative' },
1045
1062
  tokens: {
1046
- backgroundColor: '#e5f7fb',
1047
- borderRadius: 0,
1063
+ backgroundColor: '#e0d8fc',
1064
+ borderRadius: 8,
1048
1065
  borderWidth: 0
1049
1066
  }
1050
1067
  },
1051
1068
  {
1052
1069
  if: { background: 'subtle' },
1053
- tokens: { backgroundColor: '#fae6f4', borderWidth: 0 }
1070
+ tokens: { backgroundColor: '#a1ed00', borderWidth: 0 }
1054
1071
  },
1055
1072
  {
1056
1073
  if: { background: 'grid' },
1057
- tokens: { borderColor: '#016b6a', borderWidth: 1 }
1074
+ tokens: { borderColor: '#000000', borderWidth: 1 }
1058
1075
  },
1059
1076
  {
1060
1077
  if: { background: 'feature' },
1061
1078
  tokens: {
1062
- backgroundColor: '#f9f6a5',
1063
- borderRadius: 0,
1079
+ backgroundColor: '#ffad00',
1080
+ borderRadius: 8,
1064
1081
  borderWidth: 0
1065
1082
  }
1066
1083
  },
@@ -1208,25 +1225,25 @@ module.exports = {
1208
1225
  {
1209
1226
  if: { hover: true },
1210
1227
  tokens: {
1211
- borderBottomColor: '#016b6a',
1228
+ borderBottomColor: '#404040',
1212
1229
  borderBottomWidth: 2,
1213
- color: '#016b6a'
1230
+ color: '#404040'
1214
1231
  }
1215
1232
  },
1216
1233
  {
1217
1234
  if: { focus: true },
1218
1235
  tokens: {
1219
- borderBottomColor: '#016b6a',
1236
+ borderBottomColor: '#000000',
1220
1237
  borderBottomWidth: 4,
1221
- color: '#016b6a'
1238
+ color: '#000000'
1222
1239
  }
1223
1240
  },
1224
1241
  {
1225
1242
  if: { pressed: true },
1226
1243
  tokens: {
1227
- borderBottomColor: '#1b4746',
1244
+ borderBottomColor: '#666666',
1228
1245
  borderBottomWidth: 2,
1229
- color: '#1b4746'
1246
+ color: '#666666'
1230
1247
  }
1231
1248
  },
1232
1249
  {
@@ -1244,36 +1261,36 @@ module.exports = {
1244
1261
  {
1245
1262
  if: { selected: true },
1246
1263
  tokens: {
1247
- borderBottomColor: '#016b6a',
1264
+ borderBottomColor: '#000000',
1248
1265
  borderBottomWidth: 2,
1249
- color: '#016b6a'
1266
+ color: '#000000'
1250
1267
  }
1251
1268
  },
1252
1269
  {
1253
1270
  if: { hover: true, inverse: true },
1254
1271
  tokens: {
1255
- borderBottomColor: '#bbeaf5',
1272
+ borderBottomColor: '#ffffff',
1256
1273
  borderBottomWidth: 2,
1257
- color: '#bbeaf5'
1274
+ color: '#ffffff'
1258
1275
  }
1259
1276
  },
1260
1277
  {
1261
1278
  if: { focus: true, inverse: true },
1262
1279
  tokens: {
1263
- borderBottomColor: '#016b6a',
1280
+ borderBottomColor: '#ffffff',
1264
1281
  borderBottomWidth: 4,
1265
- color: '#016b6a'
1282
+ color: '#ffffff'
1266
1283
  }
1267
1284
  },
1268
1285
  {
1269
1286
  if: { inverse: true, pressed: true },
1270
1287
  tokens: {
1271
- borderBottomColor: '#1b4746',
1288
+ borderBottomColor: '#666666',
1272
1289
  borderBottomWidth: 2,
1273
- color: '#1b4746'
1290
+ color: '#666666'
1274
1291
  }
1275
1292
  },
1276
- { if: { inverse: true }, tokens: { color: '#e5f7fb' } },
1293
+ { if: { inverse: true }, tokens: { color: '#ffffff' } },
1277
1294
  {
1278
1295
  if: { focus: true, inverse: true, pressed: true },
1279
1296
  tokens: { borderBottomWidth: 4 }
@@ -1345,10 +1362,10 @@ module.exports = {
1345
1362
  if: { viewport: [ 'xs', 'sm' ] },
1346
1363
  tokens: { alignItems: 'flex-start', size: 48 }
1347
1364
  },
1348
- { if: { hover: true }, tokens: { borderColor: '#1b4746' } },
1365
+ { if: { hover: true }, tokens: { borderColor: '#404040' } },
1349
1366
  {
1350
1367
  if: { focus: true },
1351
- tokens: { borderColor: '#016b6a', borderWidth: 2 }
1368
+ tokens: { borderColor: '#000000', borderWidth: 2 }
1352
1369
  },
1353
1370
  {
1354
1371
  if: { pressed: true },
@@ -1363,7 +1380,7 @@ module.exports = {
1363
1380
  containerPaddingTop: 24,
1364
1381
  margin: 4,
1365
1382
  padding: 8,
1366
- selectedBorderColor: '#016b6a',
1383
+ selectedBorderColor: '#000000',
1367
1384
  selectedBorderWidth: 2,
1368
1385
  size: 72
1369
1386
  }
@@ -1397,17 +1414,18 @@ module.exports = {
1397
1414
  rules: [
1398
1415
  {
1399
1416
  if: { focus: true },
1400
- tokens: { inputOutlineColor: '#17367d', inputOutlineWidth: 1 }
1417
+ tokens: { inputOutlineColor: '#000000', inputOutlineWidth: 1 }
1401
1418
  },
1402
1419
  {
1403
1420
  if: { hover: true },
1404
- tokens: { inputOutlineColor: '#17367d', inputOutlineWidth: 1 }
1421
+ tokens: { inputOutlineColor: '#000000', inputOutlineWidth: 1 }
1405
1422
  },
1406
1423
  {
1407
1424
  if: { inactive: true },
1408
1425
  tokens: {
1409
1426
  inputBackgroundColor: '#c9c8c8',
1410
- inputBorderColor: 'rgba(0, 0, 0, 0)'
1427
+ inputBorderColor: 'rgba(0, 0, 0, 0)',
1428
+ labelColor: '#666666'
1411
1429
  }
1412
1430
  },
1413
1431
  {
@@ -1418,19 +1436,19 @@ module.exports = {
1418
1436
  tokens: {
1419
1437
  containerBackgroundColor: 'rgba(0, 0, 0, 0)',
1420
1438
  feedbackMarginBottom: 0,
1421
- feedbackMarginTop: 0,
1439
+ feedbackMarginTop: 12,
1422
1440
  feedbackPosition: 'bottom',
1423
1441
  icon: PaletteIconCheck,
1424
1442
  iconBackgroundColor: '#ffffff',
1425
- iconColor: '#016b6a',
1426
- iconSize: 20,
1443
+ iconColor: '#7a3dfc',
1444
+ iconSize: 14,
1427
1445
  inputBackgroundColor: '#ffffff',
1428
- inputBorderColor: '#016b6a',
1446
+ inputBorderColor: '#000000',
1429
1447
  inputBorderRadius: 0,
1430
1448
  inputBorderWidth: 2,
1431
1449
  inputHeight: 20,
1432
1450
  inputOutlineColor: null,
1433
- inputOutlineOffset: 0,
1451
+ inputOutlineOffset: 1,
1434
1452
  inputOutlineWidth: 0,
1435
1453
  inputShadow: null,
1436
1454
  inputWidth: 20,
@@ -1494,39 +1512,42 @@ module.exports = {
1494
1512
  if: { hover: true },
1495
1513
  tokens: {
1496
1514
  borderColor: '#666666',
1497
- checkboxOuterBorderColor: '#17367d',
1515
+ checkboxOuterBorderColor: '#000000',
1498
1516
  checkboxOuterBorderGap: 2,
1499
1517
  checkboxOuterBorderWidth: 1,
1500
- outerBorderColor: '#efefef',
1518
+ outerBorderColor: '#c9c8c8',
1501
1519
  outerBorderWidth: 2
1502
1520
  }
1503
1521
  },
1522
+ {
1523
+ if: { checked: true },
1524
+ tokens: {
1525
+ borderColor: '#c9c8c8',
1526
+ checkboxCheckedBackgroundColor: '#7a3dfc',
1527
+ checkboxInputBorderColor: '#000000',
1528
+ checkboxInputBorderWidth: 2
1529
+ }
1530
+ },
1504
1531
  {
1505
1532
  if: { focus: true },
1506
1533
  tokens: {
1507
- checkboxInputBorderColor: '#016b6a',
1508
- checkboxOuterBorderColor: '#17367d',
1534
+ borderColor: '#666666',
1535
+ checkboxInputBorderColor: '#000000',
1536
+ checkboxOuterBorderColor: '#000000',
1509
1537
  checkboxOuterBorderGap: 2,
1510
1538
  checkboxOuterBorderWidth: 1,
1511
- outerBorderColor: '#17367d',
1539
+ outerBorderColor: '#000000',
1512
1540
  outerBorderGap: 2,
1513
1541
  outerBorderWidth: 2
1514
1542
  }
1515
1543
  },
1516
- {
1517
- if: { checked: true },
1518
- tokens: {
1519
- borderColor: '#c9c8c8',
1520
- checkboxInputBorderColor: '#016b6a',
1521
- checkboxInputBorderWidth: 2
1522
- }
1523
- },
1524
1544
  {
1525
1545
  description: 'Pressed state matches hover state plus light grey background',
1526
1546
  if: { pressed: true },
1527
1547
  tokens: {
1528
1548
  backgroundColor: '#efefef',
1529
- checkboxOuterBorderColor: '#17367d',
1549
+ borderColor: '#666666',
1550
+ checkboxOuterBorderColor: '#000000',
1530
1551
  checkboxOuterBorderGap: 2,
1531
1552
  outerBorderColor: '#c9c8c8',
1532
1553
  outerBorderGap: 0,
@@ -1562,10 +1583,10 @@ module.exports = {
1562
1583
  borderColor: '#c9c8c8',
1563
1584
  borderRadius: 4,
1564
1585
  borderWidth: 1,
1565
- checkboxCheckedBackgroundColor: '#016b6a',
1586
+ checkboxCheckedBackgroundColor: '#000000',
1566
1587
  checkboxCheckedSize: 16,
1567
1588
  checkboxInputBackgroundColor: '#ffffff',
1568
- checkboxInputBorderColor: '#016b6a',
1589
+ checkboxInputBorderColor: '#000000',
1569
1590
  checkboxInputBorderWidth: 2,
1570
1591
  checkboxInputOutlineColor: 'rgba(0, 0, 0, 0)',
1571
1592
  checkboxInputOutlineWidth: 0,
@@ -1679,38 +1700,38 @@ module.exports = {
1679
1700
  rules: [
1680
1701
  {
1681
1702
  if: { hover: true },
1682
- tokens: { color: '#1b4746', iconDisplace: 4 }
1703
+ tokens: { color: '#404040', iconDisplace: 4 }
1683
1704
  },
1684
- { if: { pressed: true }, tokens: { color: '#595959' } },
1705
+ { if: { pressed: true }, tokens: { color: '#666666' } },
1685
1706
  {
1686
1707
  if: { focus: true },
1687
- tokens: { color: '#016b6a', outerBorderColor: '#016b6a' }
1708
+ tokens: { color: '#000000', outerBorderColor: '#000000' }
1688
1709
  },
1689
1710
  {
1690
1711
  if: { focus: true, pressed: true },
1691
- tokens: { color: '#1b4746', outerBorderColor: '#1b4746' }
1712
+ tokens: { color: '#666666', outerBorderColor: '#666666' }
1692
1713
  },
1693
- { if: { alternative: true }, tokens: { color: '#000000' } },
1714
+ { if: { alternative: true }, tokens: { color: '#7a3dfc' } },
1694
1715
  {
1695
1716
  if: { alternative: true, hover: true },
1696
- tokens: { color: '#5c5c5c' }
1717
+ tokens: { color: '#5b2bc2' }
1697
1718
  },
1698
1719
  {
1699
1720
  if: { alternative: true, pressed: true },
1700
- tokens: { color: '#595959' }
1721
+ tokens: { color: '#666666' }
1701
1722
  },
1702
1723
  {
1703
1724
  if: { alternative: true, focus: true },
1704
- tokens: { color: '#000000', outerBorderColor: '#000000' }
1725
+ tokens: { color: '#7a3dfc', outerBorderColor: '#7a3dfc' }
1705
1726
  },
1706
1727
  {
1707
1728
  if: { alternative: true, focus: true, pressed: true },
1708
- tokens: { color: '#505050', outerBorderColor: '#505050' }
1729
+ tokens: { color: '#666666', outerBorderColor: '#666666' }
1709
1730
  },
1710
- { if: { inverse: true }, tokens: { color: '#e5f7fb' } },
1731
+ { if: { inverse: true }, tokens: { color: '#ffffff' } },
1711
1732
  {
1712
1733
  if: { hover: true, inverse: true },
1713
- tokens: { color: '#bbeaf5' }
1734
+ tokens: { color: '#efefef' }
1714
1735
  },
1715
1736
  {
1716
1737
  if: { inverse: true, pressed: true },
@@ -1718,11 +1739,11 @@ module.exports = {
1718
1739
  },
1719
1740
  {
1720
1741
  if: { focus: true, inverse: true },
1721
- tokens: { color: '#e5f7fb', outerBorderColor: '#e5f7fb' }
1742
+ tokens: { color: '#ffffff', outerBorderColor: '#ffffff' }
1722
1743
  },
1723
1744
  {
1724
1745
  if: { focus: true, inverse: true, pressed: true },
1725
- tokens: { color: '#bbeaf5', outerBorderColor: '#bbeaf5' }
1746
+ tokens: { color: '#c9c8c8', outerBorderColor: '#c9c8c8' }
1726
1747
  },
1727
1748
  {
1728
1749
  if: { size: 'large' },
@@ -1738,7 +1759,7 @@ module.exports = {
1738
1759
  }
1739
1760
  ],
1740
1761
  tokens: {
1741
- color: '#016b6a',
1762
+ color: '#000000',
1742
1763
  fontSize: 16,
1743
1764
  iconDisplace: 0,
1744
1765
  iconSize: 24,
@@ -1767,16 +1788,16 @@ module.exports = {
1767
1788
  tokens: {
1768
1789
  containerPaddingBottomTop: 16,
1769
1790
  containerPaddingLeftRight: 24,
1770
- labelFontSize: 14,
1771
- labelLineHeight: 1.42857142857,
1772
- textLineHeight: 1.14285714286
1791
+ labelFontSize: 16,
1792
+ labelLineHeight: 1.5,
1793
+ textLineHeight: 1.5
1773
1794
  }
1774
1795
  },
1775
1796
  {
1776
1797
  if: { feature: true },
1777
1798
  tokens: {
1778
- containerBorderColor: '#016b6a',
1779
- labelBorderColor: '#016b6a',
1799
+ containerBorderColor: '#000000',
1800
+ labelBorderColor: '#000000',
1780
1801
  textFontSize: 70,
1781
1802
  textLineHeight: 1.2,
1782
1803
  textTimerFontName: 'StagSans',
@@ -1797,7 +1818,7 @@ module.exports = {
1797
1818
  },
1798
1819
  {
1799
1820
  if: { large: true, viewport: [ 'xs' ] },
1800
- tokens: { textFontSize: 44 }
1821
+ tokens: { textFontSize: 44, textLineHeight: 1.22222222222 }
1801
1822
  },
1802
1823
  {
1803
1824
  if: { feature: true, viewport: [ 'xs' ] },
@@ -1827,14 +1848,30 @@ module.exports = {
1827
1848
  labelFontWeight: '400',
1828
1849
  labelLineHeight: 1.5,
1829
1850
  textFontSize: 16,
1830
- textLineHeight: 1.14285714286,
1851
+ textLineHeight: 1.5,
1831
1852
  textTimerFontName: 'StagSans',
1832
1853
  textTimerFontWeight: '400'
1833
1854
  }
1834
1855
  },
1835
1856
  DatePicker: {
1836
- appearances: {},
1837
- rules: [],
1857
+ appearances: {
1858
+ viewport: {
1859
+ description: 'The size label for the current screen viewport based on the current screen width',
1860
+ type: 'state',
1861
+ values: [ 'xs', 'sm', 'md', 'lg', 'xl' ]
1862
+ }
1863
+ },
1864
+ rules: [
1865
+ {
1866
+ if: { viewport: [ 'xs' ] },
1867
+ tokens: {
1868
+ calendarMonthCaptionFontName: 'StagSans',
1869
+ calendarMonthCaptionFontSize: 14,
1870
+ calendarMonthCaptionFontWeight: '600',
1871
+ calendarMonthCaptionLineHeight: 1.72
1872
+ }
1873
+ }
1874
+ ],
1838
1875
  tokens: {
1839
1876
  calendarBackgroundColor: '#ffffff',
1840
1877
  calendarDayBlockedCalendarHoverBackground: '#efefef',
@@ -1843,7 +1880,7 @@ module.exports = {
1843
1880
  calendarDayDefaultBorder: 1,
1844
1881
  calendarDayDefaultBorderColor: '#c9c8c8',
1845
1882
  calendarDayDefaultCalendarDaySelectedHoverBackground: '#ffffff',
1846
- calendarDayDefaultCalendarDaySelectedHoverBeforeBackground: '#016b6a',
1883
+ calendarDayDefaultCalendarDaySelectedHoverBeforeBackground: '#7a3dfc',
1847
1884
  calendarDayDefaultCalendarDaySelectedHoverColor: '#ffffff',
1848
1885
  calendarDayDefaultColor: '#000000',
1849
1886
  calendarDayDefaultFontName: 'StagSans',
@@ -1855,7 +1892,7 @@ module.exports = {
1855
1892
  calendarDaySelectedFocusBeforeBackground: '#ffffff',
1856
1893
  calendarDaySelectedHoverBackground: '#ffffff',
1857
1894
  calendarDaySelectedHoverBeforeBackground: '#ffffff',
1858
- calendarDaySelectedHoverBeforeBorderColor: '#016b6a',
1895
+ calendarDaySelectedHoverBeforeBorderColor: '#7a3dfc',
1859
1896
  calendarDaySelectedHoverBorderColor: '#c9c8c8',
1860
1897
  calendarDaySelectedHoverColor: '#000000',
1861
1898
  calendarMonthCaptionColor: '#000000',
@@ -1906,10 +1943,10 @@ module.exports = {
1906
1943
  },
1907
1944
  rules: [
1908
1945
  { if: { weight: 'thick' }, tokens: { width: 2 } },
1909
- { if: { decorative: true }, tokens: { color: '#016b6a' } },
1946
+ { if: { decorative: true }, tokens: { color: '#000000' } },
1910
1947
  {
1911
1948
  if: { decorative: true, weight: 'thick' },
1912
- tokens: { color: '#016b6a', width: 2 }
1949
+ tokens: { color: '#000000', width: 2 }
1913
1950
  },
1914
1951
  { if: { inverse: true }, tokens: { color: '#ffffff' } },
1915
1952
  {
@@ -2012,7 +2049,7 @@ module.exports = {
2012
2049
  if: { expanded: true },
2013
2050
  tokens: { icon: PaletteIconChevronUp }
2014
2051
  },
2015
- { if: { alternative: true }, tokens: { color: '#000000' } },
2052
+ { if: { alternative: true }, tokens: { color: '#666666' } },
2016
2053
  {
2017
2054
  if: { inverse: true },
2018
2055
  tokens: { color: '#ffffff', iconColor: '#ffffff' }
@@ -2023,26 +2060,26 @@ module.exports = {
2023
2060
  },
2024
2061
  {
2025
2062
  if: { size: 'small' },
2026
- tokens: { fontSize: 14, iconSize: 20, lineHeight: 1.45 }
2063
+ tokens: { fontSize: 14, iconSize: 16, lineHeight: 1.42857142857 }
2027
2064
  },
2028
2065
  {
2029
2066
  if: { size: 'large' },
2030
- tokens: { fontSize: 20, lineHeight: 1.45 }
2067
+ tokens: { fontSize: 20, lineHeight: 1.4 }
2031
2068
  }
2032
2069
  ],
2033
2070
  tokens: {
2034
2071
  borderColor: 'rgba(0, 0, 0, 0)',
2035
2072
  borderWidth: 0,
2036
- color: '#016b6a',
2073
+ color: '#000000',
2037
2074
  fontSize: 16,
2038
2075
  icon: PaletteIconChevronDown,
2039
2076
  iconColor: '#000000',
2040
2077
  iconGap: 8,
2041
2078
  iconPaddingTop: 4,
2042
2079
  iconPosition: 'left',
2043
- iconSize: 24,
2080
+ iconSize: 16,
2044
2081
  justifyContent: 'flex-start',
2045
- lineHeight: 1.45,
2082
+ lineHeight: 1.5,
2046
2083
  paddingBottom: 0,
2047
2084
  paddingLeft: 0,
2048
2085
  paddingRight: 0,
@@ -2066,7 +2103,8 @@ module.exports = {
2066
2103
  contentPaddingBottom: 0,
2067
2104
  contentPaddingLeft: 0,
2068
2105
  contentPaddingRight: 0,
2069
- contentPaddingTop: 0
2106
+ contentPaddingTop: 0,
2107
+ contentPanelBackgroundColor: '#000000'
2070
2108
  }
2071
2109
  }
2072
2110
  ],
@@ -2109,22 +2147,31 @@ module.exports = {
2109
2147
  rules: [
2110
2148
  {
2111
2149
  if: { validation: 'error' },
2112
- tokens: { backgroundColor: '#f8dde3' }
2150
+ tokens: { backgroundColor: '#fcd3c6' }
2151
+ },
2152
+ {
2153
+ if: { validation: 'success' },
2154
+ tokens: { backgroundColor: '#c5f2cc' }
2113
2155
  },
2114
2156
  {
2115
2157
  if: { icon: true, validation: 'success' },
2116
2158
  tokens: {
2117
- icon: PaletteIconCheckCircledFilled,
2118
- iconColor: '#016b6a'
2159
+ backgroundColor: '#c5f2cc',
2160
+ icon: PaletteIconCheckCircleFilled,
2161
+ iconColor: '#1c7b2b'
2119
2162
  }
2120
2163
  },
2121
2164
  {
2122
2165
  if: { icon: true, validation: 'error' },
2123
- tokens: { icon: PaletteIconCaution, iconColor: '#ee2c74' }
2166
+ tokens: {
2167
+ backgroundColor: '#fcd3c6',
2168
+ icon: PaletteIconCaution,
2169
+ iconColor: '#c9370b'
2170
+ }
2124
2171
  }
2125
2172
  ],
2126
2173
  tokens: {
2127
- backgroundColor: '#e5f7fb',
2174
+ backgroundColor: '#efefef',
2128
2175
  borderColor: 'rgba(0, 0, 0, 0)',
2129
2176
  borderRadius: 0,
2130
2177
  borderWidth: 0,
@@ -2185,7 +2232,7 @@ module.exports = {
2185
2232
  }
2186
2233
  },
2187
2234
  {
2188
- if: { viewport: [ 'md', 'lg' ] },
2235
+ if: { viewport: [ 'md', 'lg', 'xl' ] },
2189
2236
  tokens: {
2190
2237
  footnoteBodyPaddingBottom: 40,
2191
2238
  footnoteBodyPaddingLeft: 16,
@@ -2196,19 +2243,6 @@ module.exports = {
2196
2243
  footnoteHeaderPaddingRight: 4,
2197
2244
  footnoteHeaderPaddingTop: 24
2198
2245
  }
2199
- },
2200
- {
2201
- if: { viewport: [ 'xl' ] },
2202
- tokens: {
2203
- footnoteBodyPaddingBottom: 40,
2204
- footnoteBodyPaddingLeft: 16,
2205
- footnoteBodyPaddingRight: 16,
2206
- footnoteBodyPaddingTop: 0,
2207
- footnoteHeaderPaddingBottom: 24,
2208
- footnoteHeaderPaddingLeft: 16,
2209
- footnoteHeaderPaddingRight: 16,
2210
- footnoteHeaderPaddingTop: 24
2211
- }
2212
2246
  }
2213
2247
  ],
2214
2248
  tokens: {
@@ -2242,7 +2276,7 @@ module.exports = {
2242
2276
  headerMargin: 16,
2243
2277
  listItemColor: '#000000',
2244
2278
  listItemFontSize: 14,
2245
- listItemLineHeight: 1.45,
2279
+ listItemLineHeight: 1.42857142857,
2246
2280
  listItemMarkerFontSize: 14,
2247
2281
  listItemMarkerLineHeight: 1.45,
2248
2282
  listItemPaddingLeft: 8,
@@ -2255,7 +2289,7 @@ module.exports = {
2255
2289
  tokens: {
2256
2290
  color: null,
2257
2291
  fontName: 'StagSans',
2258
- fontWeight: '400',
2292
+ fontWeight: '600',
2259
2293
  lineHeight: 1,
2260
2294
  paddingLeft: 2,
2261
2295
  paddingRight: 2
@@ -2285,23 +2319,23 @@ module.exports = {
2285
2319
  {
2286
2320
  if: { hover: true },
2287
2321
  tokens: {
2288
- backgroundColor: '#f9f6a5',
2289
- borderColor: '#1b4746',
2290
- iconColor: '#1b4746'
2322
+ backgroundColor: '#000000',
2323
+ borderColor: '#000000',
2324
+ iconColor: '#ffffff'
2291
2325
  }
2292
2326
  },
2293
2327
  {
2294
2328
  if: { pressed: true },
2295
2329
  tokens: {
2296
- backgroundColor: '#016b6a',
2297
- borderColor: '#016b6a',
2330
+ backgroundColor: '#404040',
2331
+ borderColor: '#404040',
2298
2332
  iconColor: '#ffffff'
2299
2333
  }
2300
2334
  }
2301
2335
  ],
2302
2336
  tokens: {
2303
2337
  backgroundColor: '#ffffff',
2304
- borderColor: '#016b6a',
2338
+ borderColor: '#000000',
2305
2339
  borderRadius: 32,
2306
2340
  borderWidth: 1,
2307
2341
  iconColor: '#000000',
@@ -2342,15 +2376,15 @@ module.exports = {
2342
2376
  { if: { size: 'small' }, tokens: { size: 20 } },
2343
2377
  { if: { size: 'large' }, tokens: { size: 32 } },
2344
2378
  { if: { size: 'extraLarge' }, tokens: { size: 48 } },
2345
- { if: { color: 'brand' }, tokens: { color: '#016b6a' } },
2379
+ { if: { color: 'brand' }, tokens: { color: '#ff0076' } },
2346
2380
  { if: { color: 'subtle' }, tokens: { color: '#666666' } },
2347
- { if: { color: 'offer' }, tokens: { color: '#016b6a' } },
2348
- { if: { color: 'success' }, tokens: { color: '#016b6a' } },
2349
- { if: { color: 'danger' }, tokens: { color: '#ee2c74' } },
2350
- { if: { color: 'warning' }, tokens: { color: '#595959' } },
2381
+ { if: { color: 'offer' }, tokens: { color: '#ff0076' } },
2382
+ { if: { color: 'success' }, tokens: { color: '#1c7b2b' } },
2383
+ { if: { color: 'danger' }, tokens: { color: '#c9370b' } },
2384
+ { if: { color: 'warning' }, tokens: { color: '#c9370b' } },
2351
2385
  { if: { color: 'inverse' }, tokens: { color: '#ffffff' } },
2352
- { if: { status: 'success' }, tokens: { color: '#016b6a' } },
2353
- { if: { status: 'error' }, tokens: { color: '#ee2c74' } }
2386
+ { if: { status: 'success' }, tokens: { color: '#1c7b2b' } },
2387
+ { if: { status: 'error' }, tokens: { color: '#c9370b' } }
2354
2388
  ],
2355
2389
  tokens: {
2356
2390
  color: '#000000',
@@ -2483,82 +2517,56 @@ module.exports = {
2483
2517
  if: { action: 'play' },
2484
2518
  tokens: { icon: PaletteIconPlayVideo }
2485
2519
  },
2486
- { if: { inverse: true }, tokens: { iconColor: '#ffffff' } },
2520
+ {
2521
+ if: { inverse: true },
2522
+ tokens: { borderColor: 'rgba(0, 0, 0, 0)', iconColor: '#ffffff' }
2523
+ },
2487
2524
  {
2488
2525
  if: { hover: true },
2489
2526
  tokens: {
2490
- backgroundColor: '#016b6a',
2527
+ backgroundColor: '#000000',
2491
2528
  iconColor: '#ffffff',
2492
2529
  iconScale: 1.1
2493
2530
  }
2494
2531
  },
2495
- {
2496
- if: { hover: true, inactive: true },
2497
- tokens: { iconScale: 1 }
2498
- },
2499
- {
2500
- if: { hover: true, password: true },
2501
- tokens: {
2502
- backgroundColor: '#016b6a',
2503
- borderColor: '#016b6a',
2504
- iconColor: '#ffffff'
2505
- }
2506
- },
2507
- {
2508
- if: { password: true },
2509
- tokens: { borderColor: 'transparent' }
2510
- },
2511
- {
2512
- if: { focus: true, password: true },
2513
- tokens: {
2514
- borderColor: '#016b6a',
2515
- borderWidth: 3,
2516
- outerBorderWidth: 0
2517
- }
2518
- },
2519
2532
  {
2520
2533
  if: { hover: true, inverse: true },
2521
- tokens: { backgroundColor: '#bbeaf5', iconColor: '#000000' }
2534
+ tokens: { backgroundColor: '#ffffff', iconColor: '#000000' }
2522
2535
  },
2523
2536
  {
2524
2537
  if: { focus: true },
2525
2538
  tokens: {
2526
2539
  backgroundColor: 'transparent',
2540
+ borderColor: '#000000',
2527
2541
  iconColor: '#000000',
2528
- outerBorderColor: '#016b6a',
2529
- outerBorderWidth: 1
2542
+ outerBorderColor: 'rgba(0, 0, 0, 0)'
2530
2543
  }
2531
2544
  },
2532
2545
  {
2533
2546
  if: { focus: true, inverse: true },
2534
2547
  tokens: {
2535
2548
  backgroundColor: 'transparent',
2536
- borderColor: '#e5f7fb',
2537
- iconColor: '#e5f7fb',
2538
- outerBorderColor: '#e5f7fb',
2539
- outerBorderWidth: 1
2549
+ borderColor: '#ffffff',
2550
+ iconColor: '#ffffff',
2551
+ outerBorderColor: 'rgba(0, 0, 0, 0)',
2552
+ outerBorderWidth: 0
2540
2553
  }
2541
2554
  },
2542
2555
  {
2543
- if: { inactive: null, pressed: true },
2544
- tokens: { backgroundColor: 'transparent', iconColor: '#014847' }
2556
+ if: { password: true },
2557
+ tokens: { borderColor: 'transparent' }
2545
2558
  },
2546
2559
  {
2547
- if: { pressed: true },
2560
+ if: { focus: true, password: true },
2548
2561
  tokens: {
2549
- backgroundColor: '#014847',
2550
- iconColor: '#ffffff',
2562
+ borderColor: '#000000',
2563
+ borderWidth: 3,
2551
2564
  outerBorderWidth: 0
2552
2565
  }
2553
2566
  },
2554
2567
  {
2555
- if: { password: true, pressed: true },
2556
- tokens: {
2557
- backgroundColor: '#014847',
2558
- borderColor: '#014847',
2559
- iconColor: '#ffffff',
2560
- outerBorderGap: 4
2561
- }
2568
+ if: { inactive: null, pressed: true },
2569
+ tokens: { backgroundColor: '#404040', iconColor: '#666666' }
2562
2570
  },
2563
2571
  {
2564
2572
  if: { inverse: true, pressed: true },
@@ -2569,6 +2577,15 @@ module.exports = {
2569
2577
  outerBorderWidth: 0
2570
2578
  }
2571
2579
  },
2580
+ {
2581
+ if: { password: true, pressed: true },
2582
+ tokens: {
2583
+ backgroundColor: '#000000',
2584
+ borderColor: '#000000',
2585
+ iconColor: '#000000',
2586
+ outerBorderGap: 0
2587
+ }
2588
+ },
2572
2589
  {
2573
2590
  if: { size: 'large' },
2574
2591
  tokens: { iconSize: 24, padding: 12 }
@@ -2578,17 +2595,10 @@ module.exports = {
2578
2595
  description: 'Raised IconButtons follow different design patterns to other variants',
2579
2596
  if: { raised: true },
2580
2597
  tokens: {
2581
- backgroundColor: '#ffffff',
2582
- borderColor: '#016b6a',
2583
- borderWidth: 1,
2584
- iconSize: 16,
2585
- outerBorderColor: 'transparent',
2586
- outerBorderGap: 0,
2587
- outerBorderWidth: 0,
2588
- padding: 8,
2598
+ borderColor: '#000000',
2589
2599
  shadow: {
2590
2600
  blur: 2,
2591
- color: 'rgba(0, 0, 0, 0.1)',
2601
+ color: 'rgba(0, 0, 0, 0.2)',
2592
2602
  inset: false,
2593
2603
  offsetX: 0,
2594
2604
  offsetY: 2,
@@ -2596,10 +2606,7 @@ module.exports = {
2596
2606
  }
2597
2607
  }
2598
2608
  },
2599
- {
2600
- if: { hover: true, raised: true },
2601
- tokens: { backgroundColor: '#016b6a', iconColor: '#ffffff' }
2602
- },
2609
+ { if: { hover: true, raised: true }, tokens: {} },
2603
2610
  {
2604
2611
  if: { raised: true, size: 'large' },
2605
2612
  tokens: { iconSize: 24, padding: 12 }
@@ -2607,44 +2614,18 @@ module.exports = {
2607
2614
  { if: { raised: true, size: 'small' }, tokens: { padding: 8 } },
2608
2615
  {
2609
2616
  if: { focus: true, raised: true },
2610
- tokens: {
2611
- backgroundColor: '#ffffff',
2612
- borderColor: '#016b6a',
2613
- borderWidth: 3,
2614
- iconColor: '#000000'
2615
- }
2617
+ tokens: { borderWidth: 3 }
2616
2618
  },
2617
2619
  {
2618
2620
  if: { pressed: true, raised: true },
2619
- tokens: {
2620
- backgroundColor: '#014847',
2621
- borderWidth: 0,
2622
- iconColor: '#ffffff'
2623
- }
2624
- },
2625
- {
2626
- if: { inactive: true, password: true },
2627
- tokens: {
2628
- backgroundColor: 'rgba(0, 0, 0, 0)',
2629
- borderWidth: 0,
2630
- iconColor: '#b5b4b4',
2631
- outerBorderColor: 'rgba(0, 0, 0, 0)'
2632
- }
2633
- },
2634
- {
2635
- if: { focus: true, pressed: true, raised: true },
2636
- tokens: {
2637
- backgroundColor: '#014847',
2638
- borderWidth: 0,
2639
- iconColor: '#ffffff'
2640
- }
2621
+ tokens: { backgroundColor: '#000000', iconColor: '#666666' }
2641
2622
  },
2642
2623
  { if: { compact: true }, tokens: { outerBorderGap: 0 } },
2643
2624
  {
2644
2625
  if: { inactive: true },
2645
2626
  tokens: {
2646
- backgroundColor: 'transparent',
2647
- iconColor: '#b5b4b4',
2627
+ backgroundColor: '#efefef',
2628
+ iconColor: '#c9c8c8',
2648
2629
  outerBorderColor: 'rgba(0, 0, 0, 0)',
2649
2630
  outerBorderWidth: 0
2650
2631
  }
@@ -2734,44 +2715,44 @@ module.exports = {
2734
2715
  {
2735
2716
  if: { focus: true },
2736
2717
  tokens: {
2737
- color: '#016b6a',
2738
- outerBorderColor: '#016b6a',
2718
+ color: '#000000',
2719
+ outerBorderColor: '#000000',
2739
2720
  outerBorderOutline: 'none'
2740
2721
  }
2741
2722
  },
2742
2723
  {
2743
2724
  if: { focus: true, pressed: true },
2744
- tokens: { color: '#595959', outerBorderColor: '#595959' }
2725
+ tokens: { color: '#666666', outerBorderColor: '#666666' }
2745
2726
  },
2746
2727
  {
2747
2728
  if: { hover: true },
2748
- tokens: { color: '#1b4746', textLine: 'none' }
2729
+ tokens: { color: '#404040', textLine: 'none' }
2749
2730
  },
2750
2731
  {
2751
2732
  if: { pressed: true },
2752
- tokens: { color: '#595959', textLine: 'none' }
2733
+ tokens: { color: '#666666', textLine: 'none' }
2753
2734
  },
2754
- { if: { alternative: true }, tokens: { color: '#000000' } },
2735
+ { if: { alternative: true }, tokens: { color: '#7a3dfc' } },
2755
2736
  {
2756
2737
  if: { alternative: true, focus: true },
2757
- tokens: { color: '#000000', outerBorderColor: '#000000' }
2738
+ tokens: { color: '#7a3dfc', outerBorderColor: '#7a3dfc' }
2758
2739
  },
2759
2740
  {
2760
2741
  if: { alternative: true, hover: true },
2761
- tokens: { color: '#5c5c5c' }
2742
+ tokens: { color: '#5b2bc2' }
2762
2743
  },
2763
2744
  {
2764
2745
  if: { alternative: true, pressed: true },
2765
- tokens: { color: '#505050' }
2746
+ tokens: { color: '#666666' }
2766
2747
  },
2767
2748
  {
2768
2749
  if: { alternative: true, focus: true, pressed: true },
2769
- tokens: { color: '#505050', outerBorderColor: '#505050' }
2750
+ tokens: { color: '#666666', outerBorderColor: '#666666' }
2770
2751
  },
2771
- { if: { inverse: true }, tokens: { color: '#e5f7fb' } },
2752
+ { if: { inverse: true }, tokens: { color: '#ffffff' } },
2772
2753
  {
2773
2754
  if: { focus: true, inverse: true },
2774
- tokens: { color: '#e5f7fb', outerBorderColor: '#e5f7fb' }
2755
+ tokens: { color: '#ffffff', outerBorderColor: '#ffffff' }
2775
2756
  },
2776
2757
  {
2777
2758
  if: { focus: true, inverse: true, pressed: true },
@@ -2779,7 +2760,7 @@ module.exports = {
2779
2760
  },
2780
2761
  {
2781
2762
  if: { hover: true, inverse: true },
2782
- tokens: { color: '#bbeaf5' }
2763
+ tokens: { color: '#efefef' }
2783
2764
  },
2784
2765
  {
2785
2766
  if: { inverse: true, pressed: true },
@@ -2815,7 +2796,7 @@ module.exports = {
2815
2796
  blockFontWeight: '600',
2816
2797
  blockLineHeight: 1.5,
2817
2798
  borderRadius: 4,
2818
- color: '#016b6a',
2799
+ color: '#000000',
2819
2800
  icon: null,
2820
2801
  iconSize: 24,
2821
2802
  iconSpace: 1,
@@ -2882,13 +2863,13 @@ module.exports = {
2882
2863
  iconMarginTop: 2,
2883
2864
  interItemMargin: 8,
2884
2865
  interItemMarginWithDivider: 16,
2885
- itemBulletColor: '#7c1366',
2866
+ itemBulletColor: '#000000',
2886
2867
  itemBulletContainerAlign: 'center',
2887
2868
  itemBulletContainerWidth: 16,
2888
2869
  itemFontName: 'StagSans',
2889
2870
  itemFontSize: 16,
2890
2871
  itemFontWeight: '400',
2891
- itemIconColor: '#7c1366',
2872
+ itemIconColor: '#ff0076',
2892
2873
  itemIconSize: 16,
2893
2874
  itemLineHeight: 1.3,
2894
2875
  listGutter: 10
@@ -2930,44 +2911,32 @@ module.exports = {
2930
2911
  }
2931
2912
  },
2932
2913
  rules: [
2933
- {
2934
- if: { focus: true, hover: true, pressed: true },
2935
- tokens: {
2936
- groupBackgroundColor: '#b5b4b4',
2937
- groupBorderColor: 'rgba(0, 0, 0, 0)',
2938
- groupBorderWidth: 0,
2939
- groupColor: '#595959',
2940
- itemBackgroundColor: '#b5b4b4',
2941
- itemColor: '#595959'
2942
- }
2943
- },
2944
2914
  {
2945
2915
  if: { focus: false, hover: true, pressed: false },
2946
2916
  tokens: {
2947
- groupBackgroundColor: '#c9c8c8',
2948
- groupBorderColor: '#c9c8c8',
2949
- itemBackgroundColor: '#c9c8c8'
2917
+ groupBackgroundColor: '#efefef',
2918
+ groupBorderColor: 'rgba(0, 0, 0, 0)',
2919
+ itemBackgroundColor: '#efefef'
2950
2920
  }
2951
2921
  },
2952
2922
  {
2953
2923
  if: { focus: true, pressed: false },
2954
2924
  tokens: {
2955
- groupBorderColor: '#016b6a',
2956
- groupColor: '#016b6a',
2957
- itemBorderBottomColor: '#016b6a',
2958
- itemBorderLeftColor: '#016b6a',
2959
- itemBorderRightColor: '#016b6a',
2960
- itemBorderTopColor: '#016b6a',
2961
- itemColor: '#016b6a'
2925
+ groupBorderColor: '#7a3dfc',
2926
+ groupColor: '#7a3dfc',
2927
+ itemBorderBottomColor: '#7a3dfc',
2928
+ itemBorderLeftColor: '#7a3dfc',
2929
+ itemBorderRightColor: '#7a3dfc',
2930
+ itemBorderTopColor: '#7a3dfc'
2962
2931
  }
2963
2932
  },
2964
2933
  {
2965
2934
  if: { current: true },
2966
2935
  tokens: {
2967
- groupBackgroundColor: '#016b6a',
2968
- groupBorderColor: '#016b6a',
2936
+ groupBackgroundColor: '#000000',
2937
+ groupBorderColor: '#000000',
2969
2938
  groupColor: '#ffffff',
2970
- itemBackgroundColor: '#016b6a',
2939
+ itemBackgroundColor: '#000000',
2971
2940
  itemColor: '#ffffff'
2972
2941
  }
2973
2942
  },
@@ -2985,65 +2954,112 @@ module.exports = {
2985
2954
  }
2986
2955
  },
2987
2956
  {
2988
- if: { focus: true, isChild: true },
2957
+ if: { isChild: true, pressed: true },
2989
2958
  tokens: {
2990
- itemBorderBottomColor: '#016b6a',
2991
- itemBorderBottomWidth: 1,
2992
- itemBorderLeftColor: '#016b6a',
2993
- itemBorderRightColor: '#016b6a',
2994
- itemBorderRightWidth: 1,
2995
- itemBorderTopColor: '#016b6a',
2996
- itemBorderTopWidth: 1
2959
+ itemBorderBottomWidth: 0,
2960
+ itemBorderLeftColor: '#595959',
2961
+ itemBorderTopWidth: 0,
2962
+ itemColor: '#595959'
2963
+ }
2964
+ },
2965
+ {
2966
+ if: { expanded: true },
2967
+ tokens: {
2968
+ groupBackgroundColor: 'rgba(0, 0, 0, 0)',
2969
+ groupBorderColor: 'rgba(0, 0, 0, 0)',
2970
+ groupColor: '#ffffff',
2971
+ groupIcon: PaletteIconChevronUp,
2972
+ itemColor: '#595959'
2997
2973
  }
2998
2974
  },
2999
2975
  {
3000
2976
  if: { current: true, isChild: true },
3001
- tokens: { itemBorderLeftColor: '#016b6a' }
2977
+ tokens: {
2978
+ itemBackgroundColor: '#000000',
2979
+ itemBorderLeftColor: '#000000',
2980
+ itemColor: '#ffffff'
2981
+ }
3002
2982
  },
3003
2983
  {
3004
- if: { isChild: true, pressed: true },
2984
+ if: { current: true, focus: false, hover: true },
3005
2985
  tokens: {
3006
- itemBorderBottomWidth: 0,
3007
- itemBorderLeftColor: '#595959',
3008
- itemBorderTopWidth: 0,
3009
- itemColor: '#595959'
2986
+ itemBackgroundColor: '#efefef',
2987
+ itemBorderLeftColor: '#efefef',
2988
+ itemColor: '#666666'
3010
2989
  }
3011
2990
  },
3012
2991
  {
3013
- if: { expanded: true },
3014
- tokens: { groupIcon: PaletteIconChevronUp }
2992
+ if: { current: true, focus: true, hover: true },
2993
+ tokens: {
2994
+ itemBackgroundColor: '#ffffff',
2995
+ itemBorderLeftColor: '#7a3dfc'
2996
+ }
3015
2997
  },
3016
2998
  {
3017
- if: { current: true, expanded: true, focus: true },
2999
+ if: { focus: true, isChild: true },
3018
3000
  tokens: {
3019
- groupBackgroundColor: 'rgba(0, 0, 0, 0)',
3020
- groupColor: '#016b6a'
3001
+ itemBackgroundColor: '#ffffff',
3002
+ itemBorderBottomColor: '#7a3dfc',
3003
+ itemBorderBottomWidth: 1,
3004
+ itemBorderLeftColor: '#7a3dfc',
3005
+ itemBorderRightColor: '#7a3dfc',
3006
+ itemBorderRightWidth: 1,
3007
+ itemBorderTopColor: '#7a3dfc',
3008
+ itemBorderTopWidth: 1,
3009
+ itemColor: '#666666'
3021
3010
  }
3022
3011
  },
3023
3012
  {
3024
- if: { current: true, hover: true },
3013
+ if: { hover: true, isChild: true },
3025
3014
  tokens: {
3026
- itemBackgroundColor: '#1b4746',
3027
- itemBorderLeftColor: '#1b4746',
3028
- itemColor: '#ffffff'
3015
+ itemBackgroundColor: '#efefef',
3016
+ itemBorderBottomWidth: 0,
3017
+ itemBorderLeftColor: '#666666',
3018
+ itemBorderRightWidth: 0,
3019
+ itemBorderTopWidth: 0,
3020
+ itemColor: '#666666'
3021
+ }
3022
+ },
3023
+ {
3024
+ if: { current: true, expanded: true, focus: true },
3025
+ tokens: {
3026
+ groupBackgroundColor: '#000000',
3027
+ groupBorderColor: '#7a3dfc',
3028
+ itemBorderLeftColor: '#7a3dfc',
3029
+ itemColor: '#666666'
3029
3030
  }
3030
3031
  },
3031
3032
  {
3032
3033
  if: { current: true, expanded: true, hover: true },
3033
- tokens: { groupBackgroundColor: '#1b4746', groupColor: '#ffffff' }
3034
+ tokens: {
3035
+ groupBackgroundColor: '#efefef',
3036
+ groupColor: '#666666',
3037
+ itemBackgroundColor: '#efefef',
3038
+ itemColor: '#666666'
3039
+ }
3040
+ },
3041
+ {
3042
+ if: { focus: true },
3043
+ tokens: {
3044
+ groupBackgroundColor: '#ffffff',
3045
+ groupBorderColor: '#7a3dfc',
3046
+ groupColor: '#666666',
3047
+ itemBackgroundColor: '#ffffff',
3048
+ itemBorderBottomColor: '#7a3dfc',
3049
+ itemBorderLeftColor: '#7a3dfc',
3050
+ itemBorderRightColor: '#7a3dfc',
3051
+ itemBorderTopColor: '#7a3dfc',
3052
+ itemColor: '#666666'
3053
+ }
3034
3054
  },
3035
3055
  {
3036
- if: {
3037
- current: true,
3038
- expanded: true,
3039
- focus: true,
3040
- hover: true,
3041
- pressed: true
3042
- },
3056
+ if: { pressed: true },
3043
3057
  tokens: {
3044
- groupBackgroundColor: '#b5b4b4',
3045
- groupBorderColor: 'rgba(0, 0, 0, 0)',
3046
- groupColor: '#595959'
3058
+ groupBackgroundColor: '#404040',
3059
+ groupColor: '#666666',
3060
+ itemBackgroundColor: '#404040',
3061
+ itemBorderLeftColor: '#404040',
3062
+ itemColor: '#666666'
3047
3063
  }
3048
3064
  }
3049
3065
  ],
@@ -3052,7 +3068,7 @@ module.exports = {
3052
3068
  groupBorderColor: 'rgba(0, 0, 0, 0)',
3053
3069
  groupBorderRadius: 0,
3054
3070
  groupBorderWidth: 1,
3055
- groupColor: '#000000',
3071
+ groupColor: '#666666',
3056
3072
  groupFontName: 'StagSans',
3057
3073
  groupFontSize: 16,
3058
3074
  groupFontWeight: '400',
@@ -3073,24 +3089,24 @@ module.exports = {
3073
3089
  itemBorderTopColor: 'rgba(0, 0, 0, 0)',
3074
3090
  itemBorderTopWidth: 1,
3075
3091
  itemBorderWidth: 0,
3076
- itemColor: '#000000',
3092
+ itemColor: '#666666',
3077
3093
  itemDisplay: false,
3078
3094
  itemFontName: 'StagSans',
3079
3095
  itemFontSize: 16,
3080
3096
  itemFontWeight: '400',
3081
3097
  itemHeight: 32,
3082
3098
  itemOutline: 0,
3083
- itemPaddingBottom: 4,
3099
+ itemPaddingBottom: 8,
3084
3100
  itemPaddingLeft: 16,
3085
3101
  itemPaddingRight: 16,
3086
- itemPaddingTop: 4,
3102
+ itemPaddingTop: 8,
3087
3103
  itemTextDecoration: 'none',
3088
3104
  lineHeight: 1.5,
3089
3105
  minHeight: '100%',
3090
3106
  minWidth: '100%',
3091
3107
  shadow: {
3092
3108
  blur: 2,
3093
- color: 'rgba(0, 0, 0, 0.1)',
3109
+ color: 'rgba(0, 0, 0, 0.2)',
3094
3110
  inset: false,
3095
3111
  offsetX: 0,
3096
3112
  offsetY: 2,
@@ -3129,7 +3145,11 @@ module.exports = {
3129
3145
  containerPaddingBottom: 32,
3130
3146
  containerPaddingTop: 32,
3131
3147
  direction: 'row',
3132
- maxWidth: 576
3148
+ maxWidth: 576,
3149
+ paddingBottom: 32,
3150
+ paddingLeft: 32,
3151
+ paddingRight: 32,
3152
+ paddingTop: 32
3133
3153
  }
3134
3154
  },
3135
3155
  {
@@ -3165,8 +3185,8 @@ module.exports = {
3165
3185
  marginRight: 24,
3166
3186
  maxWidth: '100%',
3167
3187
  paddingBottom: 24,
3168
- paddingLeft: 32,
3169
- paddingRight: 32,
3188
+ paddingLeft: 24,
3189
+ paddingRight: 24,
3170
3190
  paddingTop: 24,
3171
3191
  shadow: {
3172
3192
  blur: 0,
@@ -3271,31 +3291,32 @@ module.exports = {
3271
3291
  {
3272
3292
  if: { selected: true },
3273
3293
  tokens: {
3274
- backgroundColor: '#016b6a',
3275
- borderColor: '#016b6a',
3294
+ backgroundColor: '#000000',
3295
+ borderColor: '#000000',
3276
3296
  color: '#ffffff',
3277
3297
  fontName: 'StagSans',
3278
3298
  fontWeight: '600',
3279
- outerBorderColor: '#016b6a'
3299
+ outerBorderColor: '#000000'
3280
3300
  }
3281
3301
  },
3282
3302
  {
3283
3303
  if: { focus: true },
3284
- tokens: { borderColor: '#016b6a', borderWidth: 4 }
3304
+ tokens: { borderColor: '#000000', borderWidth: 4 }
3285
3305
  },
3286
3306
  {
3287
3307
  if: { focus: true, pressed: true },
3288
3308
  tokens: {
3289
- backgroundColor: '#016b6a',
3290
- borderColor: '#016b6a',
3291
- color: '#ffffff'
3309
+ backgroundColor: '#595959',
3310
+ borderColor: '#595959',
3311
+ borderWidth: 1,
3312
+ color: '#c9c8c8'
3292
3313
  }
3293
3314
  },
3294
3315
  {
3295
3316
  if: { hover: true },
3296
3317
  tokens: {
3297
- backgroundColor: '#014847',
3298
- borderColor: '#014847',
3318
+ backgroundColor: '#404040',
3319
+ borderColor: '#404040',
3299
3320
  color: '#ffffff'
3300
3321
  }
3301
3322
  },
@@ -3315,8 +3336,8 @@ module.exports = {
3315
3336
  {
3316
3337
  if: { hover: true, selected: true },
3317
3338
  tokens: {
3318
- backgroundColor: '#014847',
3319
- borderColor: '#014847',
3339
+ backgroundColor: '#404040',
3340
+ borderColor: '#404040',
3320
3341
  color: '#ffffff',
3321
3342
  fontName: 'StagSans',
3322
3343
  fontWeight: '600'
@@ -3367,7 +3388,7 @@ module.exports = {
3367
3388
  },
3368
3389
  Notification: {
3369
3390
  appearances: {
3370
- style: { type: 'state', values: [ 'success', 'warning', 'error' ] },
3391
+ style: { type: 'variant', values: [ 'success', 'warning', 'error' ] },
3371
3392
  system: { type: 'state', values: [ true ] },
3372
3393
  viewport: {
3373
3394
  description: 'The size label for the current screen viewport based on the current screen width',
@@ -3397,39 +3418,40 @@ module.exports = {
3397
3418
  {
3398
3419
  if: { style: 'success' },
3399
3420
  tokens: {
3400
- backgroundColor: '#c1f2e8',
3421
+ backgroundColor: '#c5f2cc',
3422
+ borderColor: '#1c7b2b',
3401
3423
  color: '#000000',
3402
- icon: PaletteIconCheckCircledFilled,
3403
- iconColor: '#016b6a'
3424
+ icon: PaletteIconCheckCircleFilled,
3425
+ iconColor: '#1c7b2b'
3404
3426
  }
3405
3427
  },
3406
3428
  {
3407
3429
  if: { style: 'warning' },
3408
3430
  tokens: {
3409
- backgroundColor: '#feeec7',
3410
- borderColor: '#fbaf34',
3431
+ backgroundColor: '#fff5d2',
3432
+ borderColor: '#f8c100',
3411
3433
  color: '#000000',
3412
3434
  dismissIcon: null,
3413
3435
  icon: PaletteIconExclamationTriangle,
3414
- iconColor: '#ee2c74'
3436
+ iconColor: '#c9370b'
3415
3437
  }
3416
3438
  },
3417
3439
  {
3418
3440
  if: { style: 'error' },
3419
3441
  tokens: {
3420
- backgroundColor: '#f8dde3',
3421
- borderColor: '#ee2c74',
3442
+ backgroundColor: '#fcd3c6',
3443
+ borderColor: '#c9370b',
3422
3444
  color: '#000000',
3423
3445
  dismissIcon: null,
3424
3446
  icon: PaletteIconCaution,
3425
- iconColor: '#df3d0c'
3447
+ iconColor: '#c9370b'
3426
3448
  }
3427
3449
  }
3428
3450
  ],
3429
3451
  tokens: {
3430
- backgroundColor: '#e5f7fb',
3452
+ backgroundColor: '#efefef',
3431
3453
  borderBottomWidth: 1,
3432
- borderColor: '#016b6a',
3454
+ borderColor: '#000000',
3433
3455
  borderLeftWidth: 1,
3434
3456
  borderRadius: 6,
3435
3457
  borderRightWidth: 1,
@@ -3565,20 +3587,32 @@ module.exports = {
3565
3587
  rules: [
3566
3588
  {
3567
3589
  if: { hover: true },
3568
- tokens: { borderColor: '#016b6a', textLine: 'none' }
3590
+ tokens: { borderColor: '#000000', textLine: 'none' }
3569
3591
  },
3570
- { if: { focus: true }, tokens: { borderColor: '#016b6a' } },
3592
+ { if: { focus: true }, tokens: { borderColor: '#000000' } },
3571
3593
  {
3572
3594
  if: { selected: true },
3573
3595
  tokens: {
3574
- backgroundColor: '#016b6a',
3596
+ backgroundColor: '#7a3dfc',
3575
3597
  color: '#ffffff',
3576
3598
  textLine: 'none'
3577
3599
  }
3578
3600
  },
3601
+ {
3602
+ if: { hover: true, selected: true },
3603
+ tokens: { borderColor: '#7a3dfc' }
3604
+ },
3605
+ {
3606
+ if: { focus: true, selected: true },
3607
+ tokens: { borderColor: '#7a3dfc' }
3608
+ },
3579
3609
  {
3580
3610
  if: { pressed: true },
3581
- tokens: { backgroundColor: '#016b6a', color: '#ffffff' }
3611
+ tokens: {
3612
+ backgroundColor: '#000000',
3613
+ borderColor: '#000000',
3614
+ color: '#666666'
3615
+ }
3582
3616
  }
3583
3617
  ],
3584
3618
  tokens: {
@@ -3589,12 +3623,12 @@ module.exports = {
3589
3623
  borderRadius: 32,
3590
3624
  borderRightWidth: 1,
3591
3625
  borderTopWidth: 1,
3592
- color: '#016b6a',
3626
+ color: '#000000',
3593
3627
  fontName: 'StagSans',
3594
3628
  fontSize: 16,
3595
3629
  fontWeight: '600',
3596
3630
  height: 32,
3597
- lineHeight: 1.5,
3631
+ lineHeight: 1,
3598
3632
  outerBorderColor: 'rgba(0, 0, 0, 0)',
3599
3633
  outerBorderGap: 4,
3600
3634
  outerBorderWidth: 4,
@@ -3664,7 +3698,7 @@ module.exports = {
3664
3698
  if: { hover: true },
3665
3699
  tokens: {
3666
3700
  borderBottomWidth: 1,
3667
- borderColor: '#016b6a',
3701
+ borderColor: '#000000',
3668
3702
  borderLeftWidth: 1,
3669
3703
  borderRightWidth: 1,
3670
3704
  borderTopWidth: 1,
@@ -3676,23 +3710,15 @@ module.exports = {
3676
3710
  if: { focus: true },
3677
3711
  tokens: {
3678
3712
  borderBottomWidth: 1,
3679
- borderColor: '#016b6a',
3713
+ borderColor: '#000000',
3680
3714
  borderLeftWidth: 1,
3681
3715
  borderRightWidth: 1,
3682
3716
  borderTopWidth: 1
3683
3717
  }
3684
3718
  },
3685
- {
3686
- if: { selected: true },
3687
- tokens: {
3688
- backgroundColor: '#016b6a',
3689
- color: '#ffffff',
3690
- textLine: 'none'
3691
- }
3692
- },
3693
3719
  {
3694
3720
  if: { pressed: true },
3695
- tokens: { backgroundColor: '#016b6a', color: '#ffffff' }
3721
+ tokens: { backgroundColor: '#000000', color: '#666666' }
3696
3722
  },
3697
3723
  {
3698
3724
  if: { direction: 'previous' },
@@ -3711,7 +3737,7 @@ module.exports = {
3711
3737
  borderRadius: 4,
3712
3738
  borderRightWidth: 0,
3713
3739
  borderTopWidth: 0,
3714
- color: '#016b6a',
3740
+ color: '#000000',
3715
3741
  displayLabel: true,
3716
3742
  fontName: 'StagSans',
3717
3743
  fontSize: 16,
@@ -3754,23 +3780,30 @@ module.exports = {
3754
3780
  }
3755
3781
  },
3756
3782
  rules: [
3757
- { if: { hover: true }, tokens: { borderWidth: 2 } },
3758
3783
  {
3759
- if: { pressed: true },
3760
- tokens: { backgroundColor: '#e6e6e6' }
3784
+ if: { hover: true },
3785
+ tokens: { borderColor: '#efefef', borderWidth: 3 }
3761
3786
  },
3762
3787
  {
3763
3788
  if: { focus: true },
3764
3789
  tokens: {
3765
- outerBorderColor: '#016b6a',
3790
+ outerBorderColor: '#000000',
3766
3791
  outerBorderGap: 2,
3767
3792
  outerBorderWidth: 2
3768
3793
  }
3794
+ },
3795
+ {
3796
+ if: { pressed: true },
3797
+ tokens: {
3798
+ backgroundColor: '#efefef',
3799
+ borderColor: 'transparent',
3800
+ outerBorderColor: '#000000'
3801
+ }
3769
3802
  }
3770
3803
  ],
3771
3804
  tokens: {
3772
3805
  backgroundColor: '#ffffff',
3773
- borderColor: '#c9c8c8',
3806
+ borderColor: '#efefef',
3774
3807
  borderRadius: 8,
3775
3808
  borderWidth: 1,
3776
3809
  flex: 1,
@@ -3801,13 +3834,12 @@ module.exports = {
3801
3834
  centsFontSize: 20,
3802
3835
  centsLineHeight: 1.25,
3803
3836
  currencySymbolFontSize: 20,
3804
- currencySymbolLineHeight: 1,
3805
3837
  rateFontSize: 16,
3806
- rateLineHeight: 1.14285714286,
3838
+ rateLineHeight: 1.5,
3807
3839
  strikeThroughHeight: 2,
3808
3840
  strikeThroughPosition: 18,
3809
3841
  topTextFontSize: 14,
3810
- topTextLineHeight: 2.25
3842
+ topTextLineHeight: 1.42857142857
3811
3843
  }
3812
3844
  },
3813
3845
  {
@@ -3817,16 +3849,14 @@ module.exports = {
3817
3849
  centsFontName: 'StagSans',
3818
3850
  centsFontSize: 24,
3819
3851
  centsFontWeight: '600',
3820
- centsLineHeight: 1.25,
3821
3852
  currencySymbolFontSize: 32,
3822
- currencySymbolLineHeight: 1.2,
3823
3853
  rateFontName: 'StagSans',
3824
3854
  rateFontSize: 16,
3825
3855
  rateFontWeight: '600',
3826
- rateLineHeight: 2,
3856
+ rateLineHeight: 1.5,
3827
3857
  strikeThroughPosition: 27,
3828
- topTextFontSize: 16,
3829
- topTextLineHeight: 2.25
3858
+ topTextFontSize: 20,
3859
+ topTextLineHeight: 1.4
3830
3860
  }
3831
3861
  },
3832
3862
  {
@@ -3846,22 +3876,22 @@ module.exports = {
3846
3876
  amountLineHeight: 1,
3847
3877
  bottomLinksMarginLeft: 4,
3848
3878
  bottomTextFontSize: 14,
3849
- bottomTextLineHeight: 1.14285714286,
3879
+ bottomTextLineHeight: 1.42857142857,
3850
3880
  bottomTextMarginTop: 0,
3851
3881
  centsFontName: 'StagSans',
3852
3882
  centsFontSize: 24,
3853
3883
  centsFontWeight: '700',
3854
- centsLineHeight: 1.2,
3884
+ centsLineHeight: 1,
3855
3885
  currencySymbolFontName: 'StagSans',
3856
3886
  currencySymbolFontSize: 24,
3857
3887
  currencySymbolFontWeight: '700',
3858
- currencySymbolLineHeight: 1.2,
3888
+ currencySymbolLineHeight: 1,
3859
3889
  dividerColor: null,
3860
3890
  fontColor: '#000000',
3861
3891
  fontName: 'StagSans',
3862
3892
  fontWeight: '700',
3863
3893
  footnoteGap: 4,
3864
- footnoteLinkColor: '#016b6a',
3894
+ footnoteLinkColor: '#000000',
3865
3895
  footnoteLinkFontName: 'StagSans',
3866
3896
  footnoteLinkFontSize: 14,
3867
3897
  footnoteLinkFontWeight: '600',
@@ -3871,7 +3901,7 @@ module.exports = {
3871
3901
  rateFontName: 'StagSans',
3872
3902
  rateFontSize: 16,
3873
3903
  rateFontWeight: '700',
3874
- rateLineHeight: 1.25,
3904
+ rateLineHeight: 1.5,
3875
3905
  strikeThroughColor: '#000000',
3876
3906
  strikeThroughHeight: 3,
3877
3907
  strikeThroughPosition: 21,
@@ -3886,8 +3916,8 @@ module.exports = {
3886
3916
  appearances: { size: { type: 'variant', values: [ 'mini' ] } },
3887
3917
  rules: [ { if: { size: 'mini' }, tokens: { height: 8 } } ],
3888
3918
  tokens: {
3889
- backgroundColor: '#ffffff',
3890
- borderColor: '#016b6a',
3919
+ backgroundColor: '#fafafa',
3920
+ borderColor: '#666666',
3891
3921
  borderRadius: 12,
3892
3922
  borderWidth: 1,
3893
3923
  height: 16
@@ -3905,18 +3935,18 @@ module.exports = {
3905
3935
  rules: [
3906
3936
  {
3907
3937
  if: { inactive: true },
3908
- tokens: { backgroundColor: '#c9c8c8', outlineColor: '#666666' }
3938
+ tokens: { backgroundColor: '#c9c8c8', outlineColor: '#595959' }
3909
3939
  },
3910
3940
  {
3911
3941
  if: { negative: true },
3912
- tokens: { backgroundColor: '#b8373e', outlineColor: '#b8373e' }
3942
+ tokens: { backgroundColor: '#c9370b', outlineColor: '#595959' }
3913
3943
  }
3914
3944
  ],
3915
3945
  tokens: {
3916
- backgroundColor: '#016b6a',
3946
+ backgroundColor: '#000000',
3917
3947
  borderRadius: 12,
3918
3948
  gradient: null,
3919
- outlineColor: '#1b4746',
3949
+ outlineColor: '#595959',
3920
3950
  outlineWidth: 1
3921
3951
  }
3922
3952
  },
@@ -4123,7 +4153,7 @@ module.exports = {
4123
4153
  fontSize: 16,
4124
4154
  fontWeight: '600',
4125
4155
  icon: null,
4126
- iconColor: '#016b6a',
4156
+ iconColor: '#000000',
4127
4157
  iconSize: 24,
4128
4158
  iconSpace: 2,
4129
4159
  lineHeight: 1.5,
@@ -4197,14 +4227,14 @@ module.exports = {
4197
4227
  {
4198
4228
  if: { hover: true },
4199
4229
  tokens: {
4200
- color: '#1b4746',
4230
+ color: '#404040',
4201
4231
  imageDimension: 140,
4202
4232
  textLine: 'underline'
4203
4233
  }
4204
4234
  },
4205
4235
  {
4206
4236
  if: { focus: true },
4207
- tokens: { color: '#016b6a', outerBorderColor: '#1b4746' }
4237
+ tokens: { color: '#000000', outerBorderColor: '#000000' }
4208
4238
  },
4209
4239
  {
4210
4240
  if: { pressed: true },
@@ -4224,7 +4254,7 @@ module.exports = {
4224
4254
  }
4225
4255
  ],
4226
4256
  tokens: {
4227
- color: '#016b6a',
4257
+ color: '#000000',
4228
4258
  contentAlignItems: 'center',
4229
4259
  contentDirection: 'column',
4230
4260
  contentMaxDimension: 168,
@@ -4283,11 +4313,11 @@ module.exports = {
4283
4313
  itemFontName: 'StagSans',
4284
4314
  itemFontSize: 16,
4285
4315
  itemFontWeight: '600',
4286
- itemIconColor: '#016b6a',
4316
+ itemIconColor: '#000000',
4287
4317
  itemIconSize: 24,
4288
4318
  itemLineHeight: 1.6,
4289
4319
  itemUnderline: 'none',
4290
- listGutter: 10,
4320
+ listGutter: 12,
4291
4321
  paddingBottom: 12,
4292
4322
  paddingLeft: 4,
4293
4323
  paddingRight: 4,
@@ -4326,7 +4356,7 @@ module.exports = {
4326
4356
  tokens: {
4327
4357
  inputBackgroundColor: '#ffffff',
4328
4358
  inputBorderColor: '#ffffff',
4329
- inputOutlineColor: '#016b6a',
4359
+ inputOutlineColor: '#000000',
4330
4360
  outerBorderColor: 'rgba(0, 0, 0, 0)',
4331
4361
  outerBorderGap: 0,
4332
4362
  outerBorderWidth: 0
@@ -4335,14 +4365,14 @@ module.exports = {
4335
4365
  {
4336
4366
  if: { focus: true },
4337
4367
  tokens: {
4338
- outerBorderColor: '#17367d',
4368
+ outerBorderColor: '#000000',
4339
4369
  outerBorderGap: 5,
4340
4370
  outerBorderWidth: 1
4341
4371
  }
4342
4372
  },
4343
4373
  {
4344
4374
  if: { hover: true },
4345
- tokens: { outerBorderColor: '#17367d' }
4375
+ tokens: { outerBorderColor: '#000000' }
4346
4376
  },
4347
4377
  {
4348
4378
  if: { inactive: true },
@@ -4350,7 +4380,8 @@ module.exports = {
4350
4380
  inputBackgroundColor: '#c9c8c8',
4351
4381
  inputBorderColor: '#c9c8c8',
4352
4382
  inputOutlineColor: '#c9c8c8',
4353
- labelColor: '#666666'
4383
+ labelColor: '#666666',
4384
+ outerBorderGap: 0
4354
4385
  }
4355
4386
  },
4356
4387
  {
@@ -4358,9 +4389,9 @@ module.exports = {
4358
4389
  tokens: {
4359
4390
  checkedBackgroundColor: '#c9c8c8',
4360
4391
  inputBackgroundColor: '#ffffff',
4361
- inputBorderColor: '#ffffff',
4392
+ inputBorderColor: '#efefef',
4362
4393
  inputBorderWidth: 3,
4363
- inputOutlineColor: '#ffffff',
4394
+ inputOutlineColor: '#c9c8c8',
4364
4395
  inputOutlineWidth: 1,
4365
4396
  labelColor: '#666666',
4366
4397
  outerBorderColor: '#c9c8c8'
@@ -4368,7 +4399,7 @@ module.exports = {
4368
4399
  }
4369
4400
  ],
4370
4401
  tokens: {
4371
- checkedBackgroundColor: '#016b6a',
4402
+ checkedBackgroundColor: '#7a3dfc',
4372
4403
  checkedSize: 16,
4373
4404
  containerBackgroundColor: 'rgba(0, 0, 0, 0)',
4374
4405
  containerBorderRadius: 0,
@@ -4386,7 +4417,7 @@ module.exports = {
4386
4417
  inputBackgroundColor: '#ffffff',
4387
4418
  inputBorderColor: '#ffffff',
4388
4419
  inputBorderWidth: 2,
4389
- inputOutlineColor: '#016b6a',
4420
+ inputOutlineColor: '#000000',
4390
4421
  inputOutlineWidth: 2,
4391
4422
  inputSize: 20,
4392
4423
  labelColor: '#000000',
@@ -4452,42 +4483,45 @@ module.exports = {
4452
4483
  if: { hover: true },
4453
4484
  tokens: {
4454
4485
  borderColor: '#666666',
4455
- outerBorderColor: '#efefef',
4486
+ outerBorderColor: '#c9c8c8',
4456
4487
  outerBorderWidth: 2,
4457
- radioOuterBorderColor: '#17367d',
4488
+ radioOuterBorderColor: '#000000',
4458
4489
  radioOuterBorderGap: 2,
4459
4490
  radioOuterBorderWidth: 1
4460
4491
  }
4461
4492
  },
4493
+ {
4494
+ if: { checked: true },
4495
+ tokens: {
4496
+ borderColor: '#c9c8c8',
4497
+ radioCheckedBackgroundColor: '#7a3dfc',
4498
+ radioInputBorderColor: '#000000',
4499
+ radioInputBorderWidth: 2
4500
+ }
4501
+ },
4462
4502
  {
4463
4503
  if: { focus: true },
4464
4504
  tokens: {
4465
- outerBorderColor: '#17367d',
4505
+ borderColor: '#666666',
4506
+ outerBorderColor: '#000000',
4466
4507
  outerBorderGap: 2,
4467
4508
  outerBorderWidth: 2,
4468
- radioInputBorderColor: '#016b6a',
4469
- radioOuterBorderColor: '#17367d',
4509
+ radioInputBorderColor: '#000000',
4510
+ radioOuterBorderColor: '#000000',
4470
4511
  radioOuterBorderGap: 2,
4471
4512
  radioOuterBorderWidth: 1
4472
4513
  }
4473
4514
  },
4474
- {
4475
- if: { checked: true },
4476
- tokens: {
4477
- borderColor: '#c9c8c8',
4478
- radioInputBorderColor: '#016b6a',
4479
- radioInputBorderWidth: 2
4480
- }
4481
- },
4482
4515
  {
4483
4516
  description: 'Pressed state matches hover state plus light grey background',
4484
4517
  if: { pressed: true },
4485
4518
  tokens: {
4486
4519
  backgroundColor: '#efefef',
4520
+ borderColor: '#666666',
4487
4521
  outerBorderColor: '#c9c8c8',
4488
4522
  outerBorderGap: 0,
4489
4523
  outerBorderWidth: 1,
4490
- radioOuterBorderColor: '#17367d',
4524
+ radioOuterBorderColor: '#000000',
4491
4525
  radioOuterBorderGap: 2
4492
4526
  }
4493
4527
  },
@@ -4540,10 +4574,10 @@ module.exports = {
4540
4574
  paddingLeft: 8,
4541
4575
  paddingRight: 16,
4542
4576
  paddingTop: 12,
4543
- radioCheckedBackgroundColor: '#016b6a',
4577
+ radioCheckedBackgroundColor: '#000000',
4544
4578
  radioCheckedSize: 16,
4545
4579
  radioInputBackgroundColor: '#ffffff',
4546
- radioInputBorderColor: '#016b6a',
4580
+ radioInputBorderColor: '#000000',
4547
4581
  radioInputBorderWidth: 2,
4548
4582
  radioInputOutlineColor: 'rgba(0, 0, 0, 0)',
4549
4583
  radioInputOutlineWidth: 0,
@@ -4607,18 +4641,22 @@ module.exports = {
4607
4641
  appearances: {
4608
4642
  purpose: {
4609
4643
  type: 'variant',
4610
- values: [ 'offer', 'default', 'editorial' ]
4644
+ values: [ 'offer', 'default', 'editorial', 'subtle' ]
4611
4645
  },
4612
4646
  wrap: { type: 'variant', values: [ true ] }
4613
4647
  },
4614
4648
  rules: [
4615
4649
  {
4616
4650
  if: { purpose: 'editorial' },
4617
- tokens: { backgroundColor: '#fbaf34' }
4651
+ tokens: { backgroundColor: '#ffad00' }
4618
4652
  },
4619
4653
  {
4620
4654
  if: { purpose: 'offer' },
4621
- tokens: { backgroundColor: '#7c1366', fontColor: '#ffffff' }
4655
+ tokens: { backgroundColor: '#7a3dfc' }
4656
+ },
4657
+ {
4658
+ if: { purpose: 'subtle' },
4659
+ tokens: { backgroundColor: '#a1ed00' }
4622
4660
  },
4623
4661
  {
4624
4662
  if: { wrap: true },
@@ -4626,7 +4664,7 @@ module.exports = {
4626
4664
  }
4627
4665
  ],
4628
4666
  tokens: {
4629
- backgroundColor: '#c3efff',
4667
+ backgroundColor: '#a1ed00',
4630
4668
  borderRadius: 4,
4631
4669
  borderRadiusBottomLeft: null,
4632
4670
  borderRadiusBottomRight: null,
@@ -4645,10 +4683,10 @@ module.exports = {
4645
4683
  curveWidth: null,
4646
4684
  fontColor: '#000000',
4647
4685
  fontName: 'StagSans',
4648
- fontSize: 12,
4686
+ fontSize: 14,
4649
4687
  fontWeight: '600',
4650
4688
  gradient: null,
4651
- lineHeight: 1.33333333333,
4689
+ lineHeight: 1.42857142857,
4652
4690
  paddingBottom: 2,
4653
4691
  paddingLeft: 12,
4654
4692
  paddingRight: 12,
@@ -4675,13 +4713,14 @@ module.exports = {
4675
4713
  }
4676
4714
  },
4677
4715
  rules: [
4678
- {
4679
- if: { hover: true, inactive: null },
4680
- tokens: { backgroundColor: '#e6e6e6' }
4681
- },
4716
+ { if: { hover: true, inactive: null }, tokens: {} },
4682
4717
  {
4683
4718
  if: { focus: true },
4684
- tokens: { borderColor: '#016b6a', borderWidth: 3 }
4719
+ tokens: {
4720
+ borderColor: '#7a3dfc',
4721
+ borderWidth: 3,
4722
+ outerBorderWidth: 0
4723
+ }
4685
4724
  },
4686
4725
  {
4687
4726
  if: { inactive: true },
@@ -4689,7 +4728,7 @@ module.exports = {
4689
4728
  backgroundColor: '#efefef',
4690
4729
  borderColor: '#efefef',
4691
4730
  color: '#666666',
4692
- placeholderColor: '#666666'
4731
+ placeholderColor: '#000000'
4693
4732
  }
4694
4733
  }
4695
4734
  ],
@@ -4700,13 +4739,13 @@ module.exports = {
4700
4739
  borderWidth: 1,
4701
4740
  buttonsGap: 2,
4702
4741
  clearButtonIcon: PaletteIconTimes,
4703
- color: '#000000',
4742
+ color: '#666666',
4704
4743
  fontName: 'StagSans',
4705
4744
  fontSize: 16,
4706
4745
  fontWeight: '400',
4707
4746
  lineHeight: 1.5,
4708
- outerBackgroundColor: 'rgba(0, 0, 0, 0)',
4709
- outerBorderColor: 'rgba(0, 0, 0, 0)',
4747
+ outerBackgroundColor: '#404040',
4748
+ outerBorderColor: '#404040',
4710
4749
  outerBorderRadius: 32,
4711
4750
  outerBorderWidth: 0,
4712
4751
  paddingBottom: 12,
@@ -4746,55 +4785,41 @@ module.exports = {
4746
4785
  rules: [
4747
4786
  {
4748
4787
  if: { priority: 'high' },
4749
- tokens: { backgroundColor: '#016b6a', iconColor: '#ffffff' }
4750
- },
4751
- {
4752
- if: { hover: true, priority: null },
4753
- tokens: {
4754
- backgroundColor: '#016b6a',
4755
- borderColor: '#016b6a',
4756
- iconColor: '#ffffff'
4757
- }
4788
+ tokens: { backgroundColor: '#000000', iconColor: '#ffffff' }
4758
4789
  },
4759
4790
  {
4760
- if: { hover: true, priority: 'high' },
4791
+ if: { hover: true },
4761
4792
  tokens: {
4762
- backgroundColor: '#1b4746',
4763
- borderColor: '#1b4746',
4793
+ backgroundColor: '#000000',
4794
+ borderWidth: 0,
4764
4795
  iconColor: '#ffffff'
4765
4796
  }
4766
4797
  },
4767
4798
  {
4768
4799
  if: { focus: true },
4769
4800
  tokens: {
4770
- backgroundColor: '#ffffff',
4771
- borderColor: '#016b6a',
4801
+ backgroundColor: 'transparent',
4802
+ borderColor: '#000000',
4772
4803
  borderWidth: 3,
4773
- iconColor: '#016b6a'
4804
+ iconColor: '#000000'
4774
4805
  }
4775
4806
  },
4776
4807
  {
4777
4808
  if: { pressed: true },
4778
4809
  tokens: {
4779
- backgroundColor: '#1b4746',
4780
- borderColor: null,
4810
+ backgroundColor: '#404040',
4781
4811
  borderWidth: 0,
4782
- iconColor: '#ffffff'
4812
+ iconColor: '#666666'
4783
4813
  }
4784
4814
  },
4785
4815
  {
4786
- if: { focus: true, pressed: true },
4816
+ if: { inactive: true, priority: 'high' },
4787
4817
  tokens: {
4788
- backgroundColor: '#1b4746',
4789
- borderColor: null,
4818
+ backgroundColor: 'rgba(0, 0, 0, 0)',
4790
4819
  borderWidth: 0,
4791
- iconColor: '#ffffff'
4820
+ iconColor: '#666666'
4792
4821
  }
4793
4822
  },
4794
- {
4795
- if: { inactive: true, priority: 'high' },
4796
- tokens: { backgroundColor: '#efefef', iconColor: '#c9c8c8' }
4797
- },
4798
4823
  {
4799
4824
  if: { inactive: true, priority: null },
4800
4825
  tokens: {
@@ -4805,10 +4830,10 @@ module.exports = {
4805
4830
  ],
4806
4831
  tokens: {
4807
4832
  backgroundColor: null,
4808
- borderColor: null,
4833
+ borderColor: 'rgba(0, 0, 0, 0)',
4809
4834
  borderRadius: 32,
4810
4835
  borderWidth: 0,
4811
- iconColor: '#016b6a',
4836
+ iconColor: '#000000',
4812
4837
  iconSize: 20,
4813
4838
  opacity: 1,
4814
4839
  paddingBottom: 8,
@@ -4843,31 +4868,34 @@ module.exports = {
4843
4868
  }
4844
4869
  },
4845
4870
  rules: [
4846
- {
4847
- if: { hover: true },
4848
- tokens: {
4849
- outerBackgroundColor: '#efefef',
4850
- outerBorderColor: '#efefef'
4851
- }
4852
- },
4853
4871
  {
4854
4872
  if: { focus: true },
4855
- tokens: { borderColor: '#016b6a', borderWidth: 3 }
4873
+ tokens: { borderColor: '#7a3dfc', borderWidth: 3 }
4856
4874
  },
4857
4875
  {
4858
4876
  if: { validation: 'success' },
4859
4877
  tokens: {
4860
- borderColor: '#016b6a',
4861
- validationIcon: PaletteIconCheckCircledFilled,
4862
- validationIconColor: '#016b6a'
4878
+ borderColor: '#1c7b2b',
4879
+ feedbackBackgroundColor: '#c5f2cc',
4880
+ validationIcon: PaletteIconCheckCircleFilled,
4881
+ validationIconColor: '#1c7b2b'
4863
4882
  }
4864
4883
  },
4865
4884
  {
4866
4885
  if: { validation: 'error' },
4867
4886
  tokens: {
4868
- borderColor: '#ee2c74',
4887
+ borderColor: '#c9370b',
4888
+ feedbackBackgroundColor: '#fcd3c6',
4869
4889
  validationIcon: PaletteIconExclamationOctagon,
4870
- validationIconColor: '#ee2c74'
4890
+ validationIconColor: '#c9370b'
4891
+ }
4892
+ },
4893
+ {
4894
+ if: { hover: true },
4895
+ tokens: {
4896
+ backgroundColor: '#efefef',
4897
+ borderColor: '#000000',
4898
+ outerBorderWidth: null
4871
4899
  }
4872
4900
  },
4873
4901
  {
@@ -4885,7 +4913,7 @@ module.exports = {
4885
4913
  borderRadius: 4,
4886
4914
  borderWidth: 1,
4887
4915
  color: '#666666',
4888
- feedbackBackgroundColor: '#e5f7fb',
4916
+ feedbackBackgroundColor: '#e0d8fc',
4889
4917
  fontName: 'StagSans',
4890
4918
  fontSize: 16,
4891
4919
  fontWeight: '400',
@@ -4944,7 +4972,7 @@ module.exports = {
4944
4972
  {
4945
4973
  if: { active: true },
4946
4974
  tokens: {
4947
- accentBackgroundColor: '#016b6a',
4975
+ accentBackgroundColor: '#000000',
4948
4976
  backgroundColor: '#efefef'
4949
4977
  }
4950
4978
  },
@@ -4974,7 +5002,7 @@ module.exports = {
4974
5002
  {
4975
5003
  if: { active: true, type: 'child' },
4976
5004
  tokens: {
4977
- accentBackgroundColor: '#016b6a',
5005
+ accentBackgroundColor: '#000000',
4978
5006
  accentOffset: 24,
4979
5007
  accentPadding: 16,
4980
5008
  backgroundColor: 'rgba(0, 0, 0, 0)',
@@ -5079,12 +5107,12 @@ module.exports = {
5079
5107
  tokens: {
5080
5108
  backgroundColor: '#ffffff',
5081
5109
  borderRadius: 4,
5082
- color: '#016b6a',
5110
+ color: '#000000',
5083
5111
  fontName: 'StagSans',
5084
5112
  fontSize: 16,
5085
5113
  fontWeight: '600',
5086
5114
  lineHeight: 1.5,
5087
- outlineColor: '#016b6a',
5115
+ outlineColor: '#000000',
5088
5116
  outlineOffset: 0,
5089
5117
  outlineStyle: 'solid',
5090
5118
  outlineWidth: 2,
@@ -5097,7 +5125,7 @@ module.exports = {
5097
5125
  appearances: { size: { type: 'variant', values: [ 'small' ] } },
5098
5126
  rules: [ { if: { size: 'small' }, tokens: { size: 24, thickness: 2 } } ],
5099
5127
  tokens: {
5100
- fullScreenOverLayBackground: '#fafafa',
5128
+ fullScreenOverLayBackground: 'rgba(255, 255, 255, 0.8)',
5101
5129
  size: 48,
5102
5130
  thickness: 4
5103
5131
  }
@@ -5150,7 +5178,7 @@ module.exports = {
5150
5178
  labelFontWeight: '600',
5151
5179
  playIcon: PaletteIconPlaySolid,
5152
5180
  playIconColor: '#ffffff',
5153
- playIconContainerBackground: '#016b6a'
5181
+ playIconContainerBackground: '#000000'
5154
5182
  }
5155
5183
  },
5156
5184
  StackView: {
@@ -5196,7 +5224,8 @@ module.exports = {
5196
5224
  knobCurrentBorderColor: '#ffffff',
5197
5225
  knobCurrentInnerColor: '#ffffff',
5198
5226
  labelColor: '#ffffff',
5199
- labelCurrentColor: '#ffffff'
5227
+ labelCurrentColor: '#ffffff',
5228
+ stepLabelColor: '#ffffff'
5200
5229
  }
5201
5230
  }
5202
5231
  ],
@@ -5204,8 +5233,8 @@ module.exports = {
5204
5233
  completedIcon: PaletteIconCheck,
5205
5234
  completedIconColor: '#ffffff',
5206
5235
  completedIconSize: 10,
5207
- connectorColor: '#016b6a',
5208
- connectorCompletedColor: '#016b6a',
5236
+ connectorColor: '#000000',
5237
+ connectorCompletedColor: '#000000',
5209
5238
  connectorCompletedHeight: 3,
5210
5239
  connectorHeight: 1,
5211
5240
  connectorMinWidth: 16,
@@ -5214,22 +5243,22 @@ module.exports = {
5214
5243
  containerPaddingRight: null,
5215
5244
  containerPaddingTop: null,
5216
5245
  knobBackgroundColor: 'rgba(0, 0, 0, 0)',
5217
- knobBorderColor: '#016b6a',
5246
+ knobBorderColor: '#000000',
5218
5247
  knobBorderWidth: 1,
5219
- knobCompletedBackgroundColor: '#016b6a',
5220
- knobCompletedBorderColor: '#016b6a',
5248
+ knobCompletedBackgroundColor: '#000000',
5249
+ knobCompletedBorderColor: '#000000',
5221
5250
  knobCompletedPaddingLeft: 1,
5222
5251
  knobCompletedPaddingTop: 2,
5223
- knobCurrentBackgroundColor: '#016b6a',
5224
- knobCurrentBorderColor: '#016b6a',
5252
+ knobCurrentBackgroundColor: '#000000',
5253
+ knobCurrentBorderColor: '#000000',
5225
5254
  knobCurrentBorderWidth: 1,
5226
5255
  knobCurrentInnerColor: null,
5227
5256
  knobCurrentInnerSize: null,
5228
5257
  knobCurrentPaddingLeft: null,
5229
5258
  knobCurrentPaddingTop: null,
5230
5259
  knobSize: 15,
5231
- labelColor: '#016b6a',
5232
- labelCurrentColor: '#016b6a',
5260
+ labelColor: '#000000',
5261
+ labelCurrentColor: '#000000',
5233
5262
  labelCurrentFontName: 'StagSans',
5234
5263
  labelCurrentFontWeight: '600',
5235
5264
  labelDirection: 'row',
@@ -5244,7 +5273,7 @@ module.exports = {
5244
5273
  showStepLabel: false,
5245
5274
  showStepName: true,
5246
5275
  showStepTrackerLabel: true,
5247
- stepLabelColor: '#016b6a',
5276
+ stepLabelColor: '#000000',
5248
5277
  stepLabelFontName: 'StagSans',
5249
5278
  stepLabelFontSize: 16,
5250
5279
  stepLabelFontWeight: '600',
@@ -5276,12 +5305,12 @@ module.exports = {
5276
5305
  { if: { hover: true }, tokens: { borderWidth: 2 } },
5277
5306
  {
5278
5307
  if: { pressed: true },
5279
- tokens: { backgroundColor: '#e6e6e6' }
5308
+ tokens: { backgroundColor: '#efefef' }
5280
5309
  },
5281
5310
  {
5282
5311
  if: { focus: true },
5283
5312
  tokens: {
5284
- outerBorderColor: '#016b6a',
5313
+ outerBorderColor: '#000000',
5285
5314
  outerBorderGap: 2,
5286
5315
  outerBorderWidth: 2
5287
5316
  }
@@ -5330,7 +5359,7 @@ module.exports = {
5330
5359
  },
5331
5360
  rules: [
5332
5361
  {
5333
- if: { spacing: 'compact', type: 'default' },
5362
+ if: { spacing: 'compact' },
5334
5363
  tokens: {
5335
5364
  cellPaddingBottom: 8,
5336
5365
  cellPaddingTop: 8,
@@ -5352,7 +5381,6 @@ module.exports = {
5352
5381
  {
5353
5382
  if: { spacing: 'compact', type: 'subHeading' },
5354
5383
  tokens: {
5355
- cellBackground: '#fafafa',
5356
5384
  cellPaddingBottom: 8,
5357
5385
  cellPaddingTop: 8,
5358
5386
  fontName: 'StagSans',
@@ -5364,8 +5392,9 @@ module.exports = {
5364
5392
  {
5365
5393
  if: { spacing: 'default', type: 'heading' },
5366
5394
  tokens: {
5367
- cellBackground: '#c1f2e8',
5395
+ cellBackground: '#000000',
5368
5396
  cellBoxShadowColor: 'rgba(0, 0, 0, 0)',
5397
+ fontColor: '#ffffff',
5369
5398
  fontName: 'StagSans',
5370
5399
  fontSize: 16,
5371
5400
  fontWeight: '600',
@@ -5375,8 +5404,11 @@ module.exports = {
5375
5404
  {
5376
5405
  if: { spacing: 'compact', type: 'heading' },
5377
5406
  tokens: {
5378
- cellBackground: '#c1f2e8',
5407
+ cellBackground: '#000000',
5379
5408
  cellBoxShadowColor: 'rgba(0, 0, 0, 0)',
5409
+ cellPaddingBottom: 8,
5410
+ cellPaddingTop: 8,
5411
+ fontColor: '#ffffff',
5380
5412
  fontName: 'StagSans',
5381
5413
  fontSize: 16,
5382
5414
  fontWeight: '600',
@@ -5384,14 +5416,8 @@ module.exports = {
5384
5416
  }
5385
5417
  },
5386
5418
  {
5387
- if: { spacing: 'default', type: 'subHeading' },
5388
- tokens: {
5389
- cellBackground: '#fafafa',
5390
- fontName: 'StagSans',
5391
- fontSize: 16,
5392
- fontWeight: '600',
5393
- lineHeight: 1.5
5394
- }
5419
+ if: { text: 'small', type: 'subHeading' },
5420
+ tokens: { fontName: 'StagSans', fontSize: 16, fontWeight: '600' }
5395
5421
  },
5396
5422
  {
5397
5423
  if: { spacing: 'default', type: 'rowHeading' },
@@ -5412,7 +5438,7 @@ module.exports = {
5412
5438
  }
5413
5439
  },
5414
5440
  {
5415
- if: { spacing: 'default', text: 'small', type: 'rowHeading' },
5441
+ if: { text: 'small', type: 'rowHeading' },
5416
5442
  tokens: {
5417
5443
  fontName: 'StagSans',
5418
5444
  fontSize: 14,
@@ -5428,11 +5454,15 @@ module.exports = {
5428
5454
  fontWeight: '600',
5429
5455
  lineHeight: 1.14285714286
5430
5456
  }
5457
+ },
5458
+ {
5459
+ if: { spacing: 'compact', text: 'small', type: 'default' },
5460
+ tokens: { lineHeight: 1.14285714286 }
5431
5461
  }
5432
5462
  ],
5433
5463
  tokens: {
5434
- borderColor: 'rgba(0, 0, 0, 0)',
5435
- borderWidth: 0,
5464
+ borderColor: '#efefef',
5465
+ borderWidth: 1,
5436
5466
  cellBackground: '#ffffff',
5437
5467
  cellBoxShadowColor: '#efefef',
5438
5468
  cellMinWidth: 0,
@@ -5512,13 +5542,21 @@ module.exports = {
5512
5542
  if: { selected: true },
5513
5543
  tokens: {
5514
5544
  backgroundColor: '#ffffff',
5515
- color: '#016b6a',
5545
+ color: '#000000',
5546
+ highlightBarBorderWidth: 1,
5547
+ highlightBarHeight: 1,
5548
+ highlightColor: '#000000'
5549
+ }
5550
+ },
5551
+ {
5552
+ if: { hover: true },
5553
+ tokens: {
5554
+ backgroundColor: '#efefef',
5516
5555
  highlightBarBorderWidth: 1,
5517
5556
  highlightBarHeight: 1,
5518
- highlightColor: '#016b6a'
5557
+ highlightColor: '#c9c8c8'
5519
5558
  }
5520
5559
  },
5521
- { if: { hover: true }, tokens: { backgroundColor: '#e6e6e6' } },
5522
5560
  {
5523
5561
  if: { focus: true },
5524
5562
  tokens: {
@@ -5534,11 +5572,11 @@ module.exports = {
5534
5572
  },
5535
5573
  {
5536
5574
  if: { focus: true, selected: true },
5537
- tokens: { backgroundColor: '#ffffff', highlightColor: '#016b6a' }
5575
+ tokens: { backgroundColor: '#ffffff', highlightColor: '#000000' }
5538
5576
  },
5539
5577
  {
5540
5578
  if: { inverse: true },
5541
- tokens: { backgroundColor: 'transparent', color: '#e5f7fb' }
5579
+ tokens: { backgroundColor: 'transparent', color: '#ffffff' }
5542
5580
  },
5543
5581
  {
5544
5582
  if: { inverse: true, selected: true },
@@ -5551,15 +5589,15 @@ module.exports = {
5551
5589
  },
5552
5590
  {
5553
5591
  if: { hover: true, inverse: true },
5554
- tokens: { color: '#bbeaf5' }
5592
+ tokens: { color: '#efefef' }
5555
5593
  },
5556
5594
  {
5557
5595
  if: { focus: true, inverse: true },
5558
5596
  tokens: {
5559
- color: '#e5f7fb',
5597
+ color: '#ffffff',
5560
5598
  highlightBarBorderWidth: 1,
5561
5599
  highlightBarHeight: 1,
5562
- highlightColor: '#e5f7fb'
5600
+ highlightColor: '#ffffff'
5563
5601
  }
5564
5602
  },
5565
5603
  {
@@ -5568,12 +5606,7 @@ module.exports = {
5568
5606
  },
5569
5607
  {
5570
5608
  if: { focus: true, inverse: true, selected: true },
5571
- tokens: {
5572
- color: '#c9c8c8',
5573
- highlightBarBorderWidth: 1,
5574
- highlightBarHeight: 1,
5575
- highlightColor: '#c9c8c8'
5576
- }
5609
+ tokens: {}
5577
5610
  },
5578
5611
  { if: { equalWidth: true }, tokens: { maxWidth: null } }
5579
5612
  ],
@@ -5654,11 +5687,11 @@ module.exports = {
5654
5687
  {
5655
5688
  if: { pressed: true },
5656
5689
  tokens: {
5657
- backgroundColor: '#1b4746',
5658
- borderColor: '#1b4746',
5690
+ backgroundColor: '#404040',
5691
+ borderColor: '#404040',
5659
5692
  borderWidth: 0,
5660
5693
  color: '#ffffff',
5661
- iconBackground: '#1b4746',
5694
+ iconBackground: '#404040',
5662
5695
  iconColor: '#ffffff',
5663
5696
  outerBorderColor: 'rgba(0, 0, 0, 0)',
5664
5697
  outerBorderWidth: 0
@@ -5668,11 +5701,11 @@ module.exports = {
5668
5701
  if: { focus: true },
5669
5702
  tokens: {
5670
5703
  backgroundColor: 'rgba(0, 0, 0, 0)',
5671
- borderColor: '#016b6a',
5672
- color: '#016b6a',
5704
+ borderColor: '#000000',
5705
+ color: '#000000',
5673
5706
  iconBackground: 'rgba(0, 0, 0, 0)',
5674
- iconColor: '#016b6a',
5675
- outerBorderColor: '#016b6a',
5707
+ iconColor: '#000000',
5708
+ outerBorderColor: '#000000',
5676
5709
  outerBorderGap: 3,
5677
5710
  outerBorderWidth: 1
5678
5711
  }
@@ -5680,22 +5713,22 @@ module.exports = {
5680
5713
  {
5681
5714
  if: { hover: true },
5682
5715
  tokens: {
5683
- backgroundColor: '#1b4746',
5684
- borderColor: '#1b4746',
5716
+ backgroundColor: '#404040',
5717
+ borderColor: '#404040',
5685
5718
  borderWidth: 0,
5686
5719
  color: '#ffffff',
5687
- iconBackground: '#1b4746',
5720
+ iconBackground: '#404040',
5688
5721
  iconColor: '#ffffff'
5689
5722
  }
5690
5723
  },
5691
5724
  {
5692
5725
  if: { selected: true },
5693
5726
  tokens: {
5694
- backgroundColor: '#016b6a',
5695
- borderColor: '#016b6a',
5727
+ backgroundColor: '#000000',
5728
+ borderColor: '#000000',
5696
5729
  color: '#ffffff',
5697
5730
  icon: PaletteIconClose,
5698
- iconBackground: '#016b6a',
5731
+ iconBackground: '#000000',
5699
5732
  iconColor: '#ffffff',
5700
5733
  iconPadding: 4,
5701
5734
  outerBorderColor: 'rgba(0, 0, 0, 0)',
@@ -5704,23 +5737,23 @@ module.exports = {
5704
5737
  },
5705
5738
  {
5706
5739
  if: { hover: true, selected: true },
5707
- tokens: { backgroundColor: '#1b4746', iconBackground: '#1b4746' }
5740
+ tokens: { backgroundColor: '#404040', iconBackground: '#404040' }
5708
5741
  },
5709
5742
  {
5710
5743
  if: { focus: true, selected: true },
5711
5744
  tokens: {
5712
- backgroundColor: '#016b6a',
5713
- outerBorderColor: '#016b6a',
5745
+ backgroundColor: '#000000',
5746
+ outerBorderColor: '#000000',
5714
5747
  outerBorderWidth: 1
5715
5748
  }
5716
5749
  },
5717
5750
  {
5718
5751
  if: { focus: true, hover: true, selected: true },
5719
- tokens: { iconBackground: '#016b6a' }
5752
+ tokens: { backgroundColor: '#404040', iconBackground: '#404040' }
5720
5753
  },
5721
5754
  {
5722
5755
  if: { focus: true, pressed: true, selected: true },
5723
- tokens: { backgroundColor: '#1b4746', iconBackground: '#1b4746' }
5756
+ tokens: { backgroundColor: '#404040', iconBackground: '#404040' }
5724
5757
  },
5725
5758
  {
5726
5759
  if: { inactive: true },
@@ -5736,10 +5769,10 @@ module.exports = {
5736
5769
  tokens: {
5737
5770
  alignSelf: 'center',
5738
5771
  backgroundColor: '#ffffff',
5739
- borderColor: '#016b6a',
5772
+ borderColor: '#000000',
5740
5773
  borderRadius: 4,
5741
5774
  borderWidth: 1,
5742
- color: '#016b6a',
5775
+ color: '#000000',
5743
5776
  fontName: 'StagSans',
5744
5777
  fontSize: 16,
5745
5778
  fontWeight: '600',
@@ -5747,7 +5780,7 @@ module.exports = {
5747
5780
  iconAlignSelf: 'center',
5748
5781
  iconBackground: '#ffffff',
5749
5782
  iconBorderRadius: 32,
5750
- iconColor: '#016b6a',
5783
+ iconColor: '#000000',
5751
5784
  iconPadding: 2,
5752
5785
  iconPosition: 'right',
5753
5786
  iconSize: 16,
@@ -5934,30 +5967,44 @@ module.exports = {
5934
5967
  rules: [
5935
5968
  {
5936
5969
  if: { hover: true, inactive: null },
5970
+ tokens: { backgroundColor: '#efefef', borderColor: '#000000' }
5971
+ },
5972
+ {
5973
+ if: { hover: true, validation: 'success' },
5937
5974
  tokens: {
5938
- outerBackgroundColor: '#efefef',
5939
- outerBorderColor: '#efefef'
5975
+ backgroundColor: '#efefef',
5976
+ borderColor: '#000000',
5977
+ icon: PaletteIconCheckCircleFilled,
5978
+ iconColor: '#1c7b2b'
5940
5979
  }
5941
5980
  },
5942
5981
  {
5943
- if: { validation: 'success' },
5982
+ if: { hover: true, validation: 'error' },
5983
+ tokens: {
5984
+ backgroundColor: '#efefef',
5985
+ borderColor: '#000000',
5986
+ iconColor: '#c9370b'
5987
+ }
5988
+ },
5989
+ {
5990
+ if: { hover: false, validation: 'success' },
5944
5991
  tokens: {
5945
- borderColor: '#016b6a',
5946
- icon: PaletteIconCheckCircledFilled,
5947
- iconColor: '#016b6a'
5992
+ borderColor: '#1c7b2b',
5993
+ icon: PaletteIconCheckCircleFilled,
5994
+ iconColor: '#1c7b2b'
5948
5995
  }
5949
5996
  },
5950
5997
  {
5951
- if: { validation: 'error' },
5998
+ if: { hover: false, validation: 'error' },
5952
5999
  tokens: {
5953
- borderColor: '#ee2c74',
6000
+ borderColor: '#c9370b',
5954
6001
  icon: PaletteIconExclamationOctagon,
5955
- iconColor: '#ee2c74'
6002
+ iconColor: '#c9370b'
5956
6003
  }
5957
6004
  },
5958
6005
  {
5959
6006
  if: { focus: true, inactive: null },
5960
- tokens: { borderColor: '#016b6a', borderWidth: 3, icon: null }
6007
+ tokens: { borderColor: '#000000', borderWidth: 3, icon: null }
5961
6008
  },
5962
6009
  {
5963
6010
  if: { inactive: true },
@@ -5971,8 +6018,8 @@ module.exports = {
5971
6018
  borderRadius: 4,
5972
6019
  borderWidth: 1,
5973
6020
  buttonSize: 32,
5974
- buttonsGap: 1,
5975
- buttonsPaddingRight: 8,
6021
+ buttonsGap: 0,
6022
+ buttonsPaddingRight: 0,
5976
6023
  clearButtonIcon: PaletteIconTimes,
5977
6024
  color: '#666666',
5978
6025
  defaultCreditIcon: PaletteIconCreditCard,
@@ -5987,11 +6034,11 @@ module.exports = {
5987
6034
  masterCardIcon: PaletteIconMasterCard,
5988
6035
  outerBackgroundColor: 'rgba(0, 0, 0, 0)',
5989
6036
  outerBorderColor: 'rgba(0, 0, 0, 0)',
5990
- outerBorderWidth: 2,
5991
- paddingBottom: 10,
6037
+ outerBorderWidth: 0,
6038
+ paddingBottom: 12,
5992
6039
  paddingLeft: 16,
5993
6040
  paddingRight: 16,
5994
- paddingTop: 10,
6041
+ paddingTop: 12,
5995
6042
  passwordHideButtonIcon: PaletteIconEyeMasked,
5996
6043
  passwordShowButtonIcon: PaletteIconEyeUnmasked,
5997
6044
  visaIcon: PaletteIconVisa
@@ -6041,7 +6088,7 @@ module.exports = {
6041
6088
  lineItemDirection: 'column',
6042
6089
  lineItemMarginBottom: 0,
6043
6090
  lineItemMarginRight: 24,
6044
- timelineColor: '#016b6a',
6091
+ timelineColor: '#000000',
6045
6092
  timelineConnectorColor: '#000000',
6046
6093
  timelineContainerDirection: 'column'
6047
6094
  }
@@ -6065,10 +6112,10 @@ module.exports = {
6065
6112
  ],
6066
6113
  tokens: {
6067
6114
  animationBackgroundColorAfter: '#efefef',
6068
- animationBackgroundColorBefore: '#016b6a',
6115
+ animationBackgroundColorBefore: '#000000',
6069
6116
  animationColorAfter: '#000000',
6070
6117
  animationColorBefore: '#ffffff',
6071
- animationDivColorAfter: '#016b6a',
6118
+ animationDivColorAfter: '#000000',
6072
6119
  animationDivColorBefore: '#ffffff',
6073
6120
  animationHeightAfter: 24,
6074
6121
  animationHeightBefore: 0,
@@ -6078,7 +6125,7 @@ module.exports = {
6078
6125
  animationPaddingTopBefore: 0,
6079
6126
  chevronlinkFontName: 'StagSans',
6080
6127
  chevronlinkFontWeight: '400',
6081
- containerBackgroundColor: '#016b6a',
6128
+ containerBackgroundColor: '#000000',
6082
6129
  containerGap: 12,
6083
6130
  padding: 16
6084
6131
  }
@@ -6116,64 +6163,90 @@ module.exports = {
6116
6163
  rules: [
6117
6164
  {
6118
6165
  if: { hover: true },
6119
- tokens: { backgroundColor: '#b5b4b4', switchColor: '#505050' }
6166
+ tokens: { backgroundColor: '#c9c8c8', switchColor: '#666666' }
6120
6167
  },
6121
6168
  {
6122
6169
  if: { pressed: true },
6123
- tokens: { backgroundColor: '#b5b4b4', switchColor: '#505050' }
6170
+ tokens: { backgroundColor: '#c9c8c8', switchColor: '#595959' }
6124
6171
  },
6125
6172
  {
6126
6173
  if: { focus: true },
6127
6174
  tokens: {
6128
- backgroundColor: '#b5b4b4',
6129
- outerBorderColor: '#17367d',
6175
+ backgroundColor: '#c9c8c8',
6176
+ outerBorderColor: '#000000',
6130
6177
  outerBorderGap: 3,
6131
6178
  outerBorderWidth: 1,
6132
- switchColor: '#505050'
6179
+ switchColor: '#666666'
6133
6180
  }
6134
6181
  },
6135
6182
  {
6136
6183
  if: { selected: true },
6137
6184
  tokens: {
6138
- backgroundColor: '#e5f7fb',
6185
+ backgroundColor: '#fafafa',
6139
6186
  icon: PaletteIconCheck,
6140
6187
  iconColor: '#ffffff',
6141
6188
  switchBorderColor: 'rgba(0, 0, 0, 0)',
6142
- switchColor: '#016b6a'
6189
+ switchColor: '#000000'
6143
6190
  }
6144
6191
  },
6145
6192
  {
6146
6193
  if: { hover: true, selected: true },
6147
- tokens: { backgroundColor: '#bbeaf5', switchColor: '#1b4746' }
6194
+ tokens: { backgroundColor: '#efefef', switchColor: '#404040' }
6148
6195
  },
6149
6196
  {
6150
6197
  if: { pressed: true, selected: true },
6151
- tokens: { backgroundColor: '#b5b4b4', switchColor: '#505050' }
6198
+ tokens: { backgroundColor: '#c9c8c8', switchColor: '#666666' }
6152
6199
  },
6153
6200
  {
6154
6201
  if: { focus: true, selected: true },
6155
- tokens: { outerBorderColor: '#17367d', outerBorderWidth: 1 }
6202
+ tokens: {
6203
+ backgroundColor: '#efefef',
6204
+ icon: PaletteIconCheck,
6205
+ iconColor: '#ffffff',
6206
+ outerBorderColor: '#000000',
6207
+ outerBorderWidth: 1,
6208
+ switchBorderColor: 'rgba(0, 0, 0, 0)',
6209
+ switchColor: '#000000'
6210
+ }
6156
6211
  },
6157
6212
  {
6158
6213
  if: { focus: true, pressed: true },
6159
6214
  tokens: {
6160
- outerBorderColor: '#17367d',
6215
+ outerBorderColor: '#000000',
6161
6216
  outerBorderGap: 3,
6162
6217
  outerBorderWidth: 1
6163
6218
  }
6164
6219
  },
6165
6220
  {
6166
6221
  if: { focus: true, pressed: true, selected: true },
6167
- tokens: { outerBorderColor: '#17367d' }
6222
+ tokens: {
6223
+ backgroundColor: '#c9c8c8',
6224
+ icon: PaletteIconCheck,
6225
+ iconColor: '#ffffff',
6226
+ outerBorderColor: '#000000',
6227
+ outerBorderGap: 3,
6228
+ outerBorderWidth: 1,
6229
+ switchColor: '#666666'
6230
+ }
6168
6231
  },
6169
6232
  {
6170
6233
  if: { inactive: true },
6171
6234
  tokens: {
6172
6235
  backgroundColor: '#efefef',
6173
- iconColor: '#c9c8c8',
6174
6236
  opacity: 0.5,
6175
6237
  switchBorderColor: 'rgba(0, 0, 0, 0)',
6176
- switchColor: '#ffffff'
6238
+ switchColor: '#c9c8c8'
6239
+ }
6240
+ },
6241
+ {
6242
+ if: { inactive: true, selected: true },
6243
+ tokens: {
6244
+ backgroundColor: '#efefef',
6245
+ icon: PaletteIconCheck,
6246
+ iconColor: '#ffffff',
6247
+ opacity: 0.5,
6248
+ switchBorderColor: 'rgba(0, 0, 0, 0)',
6249
+ switchColor: '#c9c8c8'
6177
6250
  }
6178
6251
  }
6179
6252
  ],
@@ -6210,7 +6283,7 @@ module.exports = {
6210
6283
  switchColor: '#595959',
6211
6284
  switchShadow: {
6212
6285
  blur: 2,
6213
- color: 'rgba(0, 0, 0, 0.1)',
6286
+ color: 'rgba(0, 0, 0, 0.2)',
6214
6287
  inset: false,
6215
6288
  offsetX: 0,
6216
6289
  offsetY: 2,
@@ -6255,7 +6328,7 @@ module.exports = {
6255
6328
  arrowBorderRadius: 0,
6256
6329
  arrowOffset: 4,
6257
6330
  arrowWidth: 8,
6258
- backgroundColor: '#c3efff',
6331
+ backgroundColor: '#e0d8fc',
6259
6332
  borderRadius: 4,
6260
6333
  color: '#000000',
6261
6334
  fontName: 'StagSans',
@@ -6300,7 +6373,11 @@ module.exports = {
6300
6373
  rules: [
6301
6374
  {
6302
6375
  if: { hover: true },
6303
- tokens: { backgroundColor: '#c3efff', iconScale: 1.25 }
6376
+ tokens: {
6377
+ backgroundColor: 'rgba(0, 0, 0, 0)',
6378
+ iconColor: '#7a3dfc',
6379
+ iconScale: 1.25
6380
+ }
6304
6381
  },
6305
6382
  {
6306
6383
  if: { inverse: true },
@@ -6308,30 +6385,39 @@ module.exports = {
6308
6385
  },
6309
6386
  {
6310
6387
  if: { hover: true, inverse: true },
6311
- tokens: { backgroundColor: '#c9c8c8', iconColor: '#ffffff' }
6388
+ tokens: { iconColor: '#ffffff' }
6312
6389
  },
6313
6390
  {
6314
- if: { inverse: true, pressed: true },
6315
- tokens: { backgroundColor: '#ffffff', iconColor: '#c9c8c8' }
6391
+ if: { focus: true, inverse: true },
6392
+ tokens: { outerBorderColor: '#ffffff' }
6316
6393
  },
6317
6394
  {
6318
- if: { inverse: null, pressed: true },
6319
- tokens: { backgroundColor: '#016b6a', iconColor: '#ffffff' }
6395
+ if: { focus: true, inverse: null },
6396
+ tokens: { outerBorderColor: '#000000' }
6320
6397
  },
6321
6398
  {
6322
- if: { focus: true, inverse: true },
6323
- tokens: { outerBorderColor: '#ffffff' }
6399
+ if: { inverse: true, pressed: true },
6400
+ tokens: {
6401
+ backgroundColor: '#ffffff',
6402
+ icon: PaletteIconTooltipSymbol,
6403
+ iconColor: '#000000',
6404
+ outerBorderColor: '#efefef'
6405
+ }
6324
6406
  },
6325
6407
  {
6326
- if: { focus: true, inverse: null },
6327
- tokens: { outerBorderColor: '#17367d' }
6408
+ if: { inverse: null, pressed: true },
6409
+ tokens: {
6410
+ backgroundColor: '#5b2bc2',
6411
+ iconColor: '#ffffff',
6412
+ outerBorderColor: '#5b2bc2'
6413
+ }
6328
6414
  }
6329
6415
  ],
6330
6416
  tokens: {
6331
6417
  backgroundColor: 'rgba(0, 0, 0, 0)',
6332
6418
  borderRadius: 32,
6333
6419
  icon: PaletteIconTooltip,
6334
- iconColor: '#016b6a',
6420
+ iconColor: '#000000',
6335
6421
  iconScale: 1,
6336
6422
  iconSize: 16,
6337
6423
  outerBorderColor: 'rgba(0, 0, 0, 0)',
@@ -6413,7 +6499,7 @@ module.exports = {
6413
6499
  {
6414
6500
  if: { size: 'eyebrow' },
6415
6501
  tokens: {
6416
- color: '#595959',
6502
+ color: '#000000',
6417
6503
  fontName: 'StagSans',
6418
6504
  fontSize: 14,
6419
6505
  fontWeight: '600',
@@ -6536,27 +6622,27 @@ module.exports = {
6536
6622
  },
6537
6623
  { if: { inverse: true }, tokens: { color: '#ffffff' } },
6538
6624
  { if: { colour: 'default' }, tokens: { color: '#000000' } },
6539
- { if: { colour: 'brand' }, tokens: { color: '#016b6a' } },
6625
+ { if: { colour: 'brand' }, tokens: { color: '#ff0076' } },
6540
6626
  { if: { colour: 'dark' }, tokens: { color: '#595959' } },
6541
6627
  { if: { colour: 'light' }, tokens: { color: '#666666' } },
6542
- { if: { colour: 'positive' }, tokens: { color: '#016b6a' } },
6543
- { if: { colour: 'warning' }, tokens: { color: '#df3d0c' } },
6544
- { if: { colour: 'danger' }, tokens: { color: '#b8373e' } },
6628
+ { if: { colour: 'positive' }, tokens: { color: '#1c7b2b' } },
6629
+ { if: { colour: 'warning' }, tokens: { color: '#c9370b' } },
6630
+ { if: { colour: 'danger' }, tokens: { color: '#c9370b' } },
6545
6631
  { if: { colour: 'black' }, tokens: { color: '#000000' } },
6546
6632
  { if: { colour: 'white' }, tokens: { color: '#ffffff' } },
6547
- { if: { colour: 'brand2' }, tokens: { color: '#17367d' } },
6548
- { if: { colour: 'brand3' }, tokens: { color: '#7c1366' } },
6633
+ { if: { colour: 'brand2' }, tokens: { color: '#7a3dfc' } },
6634
+ { if: { colour: 'brand3' }, tokens: { color: '#5b2bc2' } },
6549
6635
  {
6550
6636
  if: { colour: 'alternative1' },
6551
- tokens: { color: '#c53a70' }
6637
+ tokens: { color: '#404040' }
6552
6638
  },
6553
6639
  {
6554
6640
  if: { colour: 'alternative2' },
6555
- tokens: { color: '#8c0448' }
6641
+ tokens: { color: '#dd0066' }
6556
6642
  },
6557
6643
  {
6558
6644
  if: { colour: 'alternative3' },
6559
- tokens: { color: '#258b0b' }
6645
+ tokens: { color: '#1c7b2b' }
6560
6646
  }
6561
6647
  ],
6562
6648
  tokens: {
@@ -6694,7 +6780,7 @@ module.exports = {
6694
6780
  tokens: {
6695
6781
  borderColor: '#595959',
6696
6782
  borderWidth: 1,
6697
- outerBorderColor: '#17367d'
6783
+ outerBorderColor: '#000000'
6698
6784
  }
6699
6785
  },
6700
6786
  {
@@ -6703,11 +6789,15 @@ module.exports = {
6703
6789
  },
6704
6790
  {
6705
6791
  if: { pressed: true },
6706
- tokens: { borderColor: '#595959', borderWidth: 3 }
6792
+ tokens: {
6793
+ borderColor: '#595959',
6794
+ borderWidth: 3,
6795
+ outerBorderColor: 'rgba(0, 0, 0, 0)'
6796
+ }
6707
6797
  },
6708
6798
  {
6709
6799
  if: { selected: true },
6710
- tokens: { borderColor: '#016b6a', titleColor: '#016b6a' }
6800
+ tokens: { borderColor: '#7a3dfc', titleColor: '#7a3dfc' }
6711
6801
  }
6712
6802
  ],
6713
6803
  tokens: {
@@ -6738,8 +6828,8 @@ module.exports = {
6738
6828
  thumbWidth: 8,
6739
6829
  timestampMarginLeft: 8,
6740
6830
  timestampMarginRight: 8,
6741
- trackGradientEnd: '#39cdc9',
6742
- trackGradientStart: '#39cdc9'
6831
+ trackGradientEnd: '#7a3dfc',
6832
+ trackGradientStart: '#7a3dfc'
6743
6833
  }
6744
6834
  },
6745
6835
  VideoVolumeSlider: {
@@ -6772,7 +6862,7 @@ module.exports = {
6772
6862
  { if: { viewport: [ 'lg', 'xl' ] }, tokens: { rowSize: 6 } }
6773
6863
  ],
6774
6864
  tokens: {
6775
- itemBorderColor: 'rgba(0, 0, 0, 0)',
6865
+ itemBorderColor: '#c9c8c8',
6776
6866
  itemPadding: 16,
6777
6867
  rowBorderWidth: 1,
6778
6868
  rowSize: 6
@@ -6838,5 +6928,5 @@ module.exports = {
6838
6928
  tokens: { size: 96 }
6839
6929
  }
6840
6930
  },
6841
- metadata: { name: 'theme-koodo', themeTokensVersion: '2.45.0' }
6931
+ metadata: { name: 'theme-koodo', themeTokensVersion: '2.46.0' }
6842
6932
  }