@telus-uds/theme-koodo 4.17.0 → 5.0.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 +1393 -1110
  3. package/build/ios/schema.json +685 -716
  4. package/build/ios/theme.json +1393 -1110
  5. package/build/rn/schema.json +685 -716
  6. package/build/rn/theme.js +885 -796
  7. package/package.json +4 -4
  8. package/theme.json +955 -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 Sat, 18 Nov 2023 02:23:36 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,18 +620,71 @@ 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',
@@ -695,7 +695,7 @@ module.exports = {
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,111 @@ 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: '#000000',
2969
+ groupBorderColor: 'rgba(0, 0, 0, 0)',
2970
+ groupColor: '#ffffff',
2971
+ groupIcon: PaletteIconChevronUp
2997
2972
  }
2998
2973
  },
2999
2974
  {
3000
2975
  if: { current: true, isChild: true },
3001
- tokens: { itemBorderLeftColor: '#016b6a' }
2976
+ tokens: {
2977
+ itemBackgroundColor: '#000000',
2978
+ itemBorderLeftColor: '#000000',
2979
+ itemColor: '#ffffff'
2980
+ }
3002
2981
  },
3003
2982
  {
3004
- if: { isChild: true, pressed: true },
2983
+ if: { current: true, focus: false, hover: true },
3005
2984
  tokens: {
3006
- itemBorderBottomWidth: 0,
3007
- itemBorderLeftColor: '#595959',
3008
- itemBorderTopWidth: 0,
3009
- itemColor: '#595959'
2985
+ itemBackgroundColor: '#efefef',
2986
+ itemBorderLeftColor: '#efefef',
2987
+ itemColor: '#666666'
3010
2988
  }
3011
2989
  },
3012
2990
  {
3013
- if: { expanded: true },
3014
- tokens: { groupIcon: PaletteIconChevronUp }
2991
+ if: { current: true, focus: true, hover: true },
2992
+ tokens: {
2993
+ itemBackgroundColor: '#ffffff',
2994
+ itemBorderLeftColor: '#7a3dfc'
2995
+ }
3015
2996
  },
3016
2997
  {
3017
- if: { current: true, expanded: true, focus: true },
2998
+ if: { focus: true, isChild: true },
3018
2999
  tokens: {
3019
- groupBackgroundColor: 'rgba(0, 0, 0, 0)',
3020
- groupColor: '#016b6a'
3000
+ itemBackgroundColor: '#ffffff',
3001
+ itemBorderBottomColor: '#7a3dfc',
3002
+ itemBorderBottomWidth: 1,
3003
+ itemBorderLeftColor: '#7a3dfc',
3004
+ itemBorderRightColor: '#7a3dfc',
3005
+ itemBorderRightWidth: 1,
3006
+ itemBorderTopColor: '#7a3dfc',
3007
+ itemBorderTopWidth: 1,
3008
+ itemColor: '#666666'
3021
3009
  }
3022
3010
  },
3023
3011
  {
3024
- if: { current: true, hover: true },
3012
+ if: { hover: true, isChild: true },
3025
3013
  tokens: {
3026
- itemBackgroundColor: '#1b4746',
3027
- itemBorderLeftColor: '#1b4746',
3028
- itemColor: '#ffffff'
3014
+ itemBackgroundColor: '#efefef',
3015
+ itemBorderBottomWidth: 0,
3016
+ itemBorderLeftColor: '#666666',
3017
+ itemBorderRightWidth: 0,
3018
+ itemBorderTopWidth: 0,
3019
+ itemColor: '#666666'
3020
+ }
3021
+ },
3022
+ {
3023
+ if: { current: true, expanded: true, focus: true },
3024
+ tokens: {
3025
+ groupBackgroundColor: '#000000',
3026
+ groupBorderColor: '#7a3dfc',
3027
+ itemBorderLeftColor: '#7a3dfc',
3028
+ itemColor: '#666666'
3029
3029
  }
3030
3030
  },
3031
3031
  {
3032
3032
  if: { current: true, expanded: true, hover: true },
3033
- tokens: { groupBackgroundColor: '#1b4746', groupColor: '#ffffff' }
3033
+ tokens: {
3034
+ groupBackgroundColor: '#efefef',
3035
+ groupColor: '#666666',
3036
+ itemBackgroundColor: '#efefef',
3037
+ itemColor: '#666666'
3038
+ }
3039
+ },
3040
+ {
3041
+ if: { focus: true },
3042
+ tokens: {
3043
+ groupBackgroundColor: '#ffffff',
3044
+ groupBorderColor: '#7a3dfc',
3045
+ groupColor: '#666666',
3046
+ itemBackgroundColor: '#ffffff',
3047
+ itemBorderBottomColor: '#7a3dfc',
3048
+ itemBorderLeftColor: '#7a3dfc',
3049
+ itemBorderRightColor: '#7a3dfc',
3050
+ itemBorderTopColor: '#7a3dfc',
3051
+ itemColor: '#666666'
3052
+ }
3034
3053
  },
3035
3054
  {
3036
- if: {
3037
- current: true,
3038
- expanded: true,
3039
- focus: true,
3040
- hover: true,
3041
- pressed: true
3042
- },
3055
+ if: { pressed: true },
3043
3056
  tokens: {
3044
- groupBackgroundColor: '#b5b4b4',
3045
- groupBorderColor: 'rgba(0, 0, 0, 0)',
3046
- groupColor: '#595959'
3057
+ groupBackgroundColor: '#404040',
3058
+ groupColor: '#666666',
3059
+ itemBackgroundColor: '#404040',
3060
+ itemBorderLeftColor: '#404040',
3061
+ itemColor: '#666666'
3047
3062
  }
3048
3063
  }
3049
3064
  ],
@@ -3052,7 +3067,7 @@ module.exports = {
3052
3067
  groupBorderColor: 'rgba(0, 0, 0, 0)',
3053
3068
  groupBorderRadius: 0,
3054
3069
  groupBorderWidth: 1,
3055
- groupColor: '#000000',
3070
+ groupColor: '#666666',
3056
3071
  groupFontName: 'StagSans',
3057
3072
  groupFontSize: 16,
3058
3073
  groupFontWeight: '400',
@@ -3073,24 +3088,24 @@ module.exports = {
3073
3088
  itemBorderTopColor: 'rgba(0, 0, 0, 0)',
3074
3089
  itemBorderTopWidth: 1,
3075
3090
  itemBorderWidth: 0,
3076
- itemColor: '#000000',
3091
+ itemColor: '#666666',
3077
3092
  itemDisplay: false,
3078
3093
  itemFontName: 'StagSans',
3079
3094
  itemFontSize: 16,
3080
3095
  itemFontWeight: '400',
3081
3096
  itemHeight: 32,
3082
3097
  itemOutline: 0,
3083
- itemPaddingBottom: 4,
3098
+ itemPaddingBottom: 8,
3084
3099
  itemPaddingLeft: 16,
3085
3100
  itemPaddingRight: 16,
3086
- itemPaddingTop: 4,
3101
+ itemPaddingTop: 8,
3087
3102
  itemTextDecoration: 'none',
3088
3103
  lineHeight: 1.5,
3089
3104
  minHeight: '100%',
3090
3105
  minWidth: '100%',
3091
3106
  shadow: {
3092
3107
  blur: 2,
3093
- color: 'rgba(0, 0, 0, 0.1)',
3108
+ color: 'rgba(0, 0, 0, 0.2)',
3094
3109
  inset: false,
3095
3110
  offsetX: 0,
3096
3111
  offsetY: 2,
@@ -3129,7 +3144,11 @@ module.exports = {
3129
3144
  containerPaddingBottom: 32,
3130
3145
  containerPaddingTop: 32,
3131
3146
  direction: 'row',
3132
- maxWidth: 576
3147
+ maxWidth: 576,
3148
+ paddingBottom: 32,
3149
+ paddingLeft: 32,
3150
+ paddingRight: 32,
3151
+ paddingTop: 32
3133
3152
  }
3134
3153
  },
3135
3154
  {
@@ -3165,8 +3184,8 @@ module.exports = {
3165
3184
  marginRight: 24,
3166
3185
  maxWidth: '100%',
3167
3186
  paddingBottom: 24,
3168
- paddingLeft: 32,
3169
- paddingRight: 32,
3187
+ paddingLeft: 24,
3188
+ paddingRight: 24,
3170
3189
  paddingTop: 24,
3171
3190
  shadow: {
3172
3191
  blur: 0,
@@ -3271,31 +3290,32 @@ module.exports = {
3271
3290
  {
3272
3291
  if: { selected: true },
3273
3292
  tokens: {
3274
- backgroundColor: '#016b6a',
3275
- borderColor: '#016b6a',
3293
+ backgroundColor: '#000000',
3294
+ borderColor: '#000000',
3276
3295
  color: '#ffffff',
3277
3296
  fontName: 'StagSans',
3278
3297
  fontWeight: '600',
3279
- outerBorderColor: '#016b6a'
3298
+ outerBorderColor: '#000000'
3280
3299
  }
3281
3300
  },
3282
3301
  {
3283
3302
  if: { focus: true },
3284
- tokens: { borderColor: '#016b6a', borderWidth: 4 }
3303
+ tokens: { borderColor: '#000000', borderWidth: 4 }
3285
3304
  },
3286
3305
  {
3287
3306
  if: { focus: true, pressed: true },
3288
3307
  tokens: {
3289
- backgroundColor: '#016b6a',
3290
- borderColor: '#016b6a',
3291
- color: '#ffffff'
3308
+ backgroundColor: '#595959',
3309
+ borderColor: '#595959',
3310
+ borderWidth: 1,
3311
+ color: '#c9c8c8'
3292
3312
  }
3293
3313
  },
3294
3314
  {
3295
3315
  if: { hover: true },
3296
3316
  tokens: {
3297
- backgroundColor: '#014847',
3298
- borderColor: '#014847',
3317
+ backgroundColor: '#404040',
3318
+ borderColor: '#404040',
3299
3319
  color: '#ffffff'
3300
3320
  }
3301
3321
  },
@@ -3315,8 +3335,8 @@ module.exports = {
3315
3335
  {
3316
3336
  if: { hover: true, selected: true },
3317
3337
  tokens: {
3318
- backgroundColor: '#014847',
3319
- borderColor: '#014847',
3338
+ backgroundColor: '#404040',
3339
+ borderColor: '#404040',
3320
3340
  color: '#ffffff',
3321
3341
  fontName: 'StagSans',
3322
3342
  fontWeight: '600'
@@ -3367,7 +3387,7 @@ module.exports = {
3367
3387
  },
3368
3388
  Notification: {
3369
3389
  appearances: {
3370
- style: { type: 'state', values: [ 'success', 'warning', 'error' ] },
3390
+ style: { type: 'variant', values: [ 'success', 'warning', 'error' ] },
3371
3391
  system: { type: 'state', values: [ true ] },
3372
3392
  viewport: {
3373
3393
  description: 'The size label for the current screen viewport based on the current screen width',
@@ -3397,39 +3417,40 @@ module.exports = {
3397
3417
  {
3398
3418
  if: { style: 'success' },
3399
3419
  tokens: {
3400
- backgroundColor: '#c1f2e8',
3420
+ backgroundColor: '#c5f2cc',
3421
+ borderColor: '#1c7b2b',
3401
3422
  color: '#000000',
3402
- icon: PaletteIconCheckCircledFilled,
3403
- iconColor: '#016b6a'
3423
+ icon: PaletteIconCheckCircleFilled,
3424
+ iconColor: '#1c7b2b'
3404
3425
  }
3405
3426
  },
3406
3427
  {
3407
3428
  if: { style: 'warning' },
3408
3429
  tokens: {
3409
- backgroundColor: '#feeec7',
3410
- borderColor: '#fbaf34',
3430
+ backgroundColor: '#fff5d2',
3431
+ borderColor: '#f8c100',
3411
3432
  color: '#000000',
3412
3433
  dismissIcon: null,
3413
3434
  icon: PaletteIconExclamationTriangle,
3414
- iconColor: '#ee2c74'
3435
+ iconColor: '#c9370b'
3415
3436
  }
3416
3437
  },
3417
3438
  {
3418
3439
  if: { style: 'error' },
3419
3440
  tokens: {
3420
- backgroundColor: '#f8dde3',
3421
- borderColor: '#ee2c74',
3441
+ backgroundColor: '#fcd3c6',
3442
+ borderColor: '#c9370b',
3422
3443
  color: '#000000',
3423
3444
  dismissIcon: null,
3424
3445
  icon: PaletteIconCaution,
3425
- iconColor: '#df3d0c'
3446
+ iconColor: '#c9370b'
3426
3447
  }
3427
3448
  }
3428
3449
  ],
3429
3450
  tokens: {
3430
- backgroundColor: '#e5f7fb',
3451
+ backgroundColor: '#efefef',
3431
3452
  borderBottomWidth: 1,
3432
- borderColor: '#016b6a',
3453
+ borderColor: '#000000',
3433
3454
  borderLeftWidth: 1,
3434
3455
  borderRadius: 6,
3435
3456
  borderRightWidth: 1,
@@ -3565,20 +3586,32 @@ module.exports = {
3565
3586
  rules: [
3566
3587
  {
3567
3588
  if: { hover: true },
3568
- tokens: { borderColor: '#016b6a', textLine: 'none' }
3589
+ tokens: { borderColor: '#000000', textLine: 'none' }
3569
3590
  },
3570
- { if: { focus: true }, tokens: { borderColor: '#016b6a' } },
3591
+ { if: { focus: true }, tokens: { borderColor: '#000000' } },
3571
3592
  {
3572
3593
  if: { selected: true },
3573
3594
  tokens: {
3574
- backgroundColor: '#016b6a',
3595
+ backgroundColor: '#7a3dfc',
3575
3596
  color: '#ffffff',
3576
3597
  textLine: 'none'
3577
3598
  }
3578
3599
  },
3600
+ {
3601
+ if: { hover: true, selected: true },
3602
+ tokens: { borderColor: '#7a3dfc' }
3603
+ },
3604
+ {
3605
+ if: { focus: true, selected: true },
3606
+ tokens: { borderColor: '#7a3dfc' }
3607
+ },
3579
3608
  {
3580
3609
  if: { pressed: true },
3581
- tokens: { backgroundColor: '#016b6a', color: '#ffffff' }
3610
+ tokens: {
3611
+ backgroundColor: '#000000',
3612
+ borderColor: '#000000',
3613
+ color: '#666666'
3614
+ }
3582
3615
  }
3583
3616
  ],
3584
3617
  tokens: {
@@ -3589,12 +3622,12 @@ module.exports = {
3589
3622
  borderRadius: 32,
3590
3623
  borderRightWidth: 1,
3591
3624
  borderTopWidth: 1,
3592
- color: '#016b6a',
3625
+ color: '#000000',
3593
3626
  fontName: 'StagSans',
3594
3627
  fontSize: 16,
3595
3628
  fontWeight: '600',
3596
3629
  height: 32,
3597
- lineHeight: 1.5,
3630
+ lineHeight: 1,
3598
3631
  outerBorderColor: 'rgba(0, 0, 0, 0)',
3599
3632
  outerBorderGap: 4,
3600
3633
  outerBorderWidth: 4,
@@ -3664,7 +3697,7 @@ module.exports = {
3664
3697
  if: { hover: true },
3665
3698
  tokens: {
3666
3699
  borderBottomWidth: 1,
3667
- borderColor: '#016b6a',
3700
+ borderColor: '#000000',
3668
3701
  borderLeftWidth: 1,
3669
3702
  borderRightWidth: 1,
3670
3703
  borderTopWidth: 1,
@@ -3676,23 +3709,15 @@ module.exports = {
3676
3709
  if: { focus: true },
3677
3710
  tokens: {
3678
3711
  borderBottomWidth: 1,
3679
- borderColor: '#016b6a',
3712
+ borderColor: '#000000',
3680
3713
  borderLeftWidth: 1,
3681
3714
  borderRightWidth: 1,
3682
3715
  borderTopWidth: 1
3683
3716
  }
3684
3717
  },
3685
- {
3686
- if: { selected: true },
3687
- tokens: {
3688
- backgroundColor: '#016b6a',
3689
- color: '#ffffff',
3690
- textLine: 'none'
3691
- }
3692
- },
3693
3718
  {
3694
3719
  if: { pressed: true },
3695
- tokens: { backgroundColor: '#016b6a', color: '#ffffff' }
3720
+ tokens: { backgroundColor: '#000000', color: '#666666' }
3696
3721
  },
3697
3722
  {
3698
3723
  if: { direction: 'previous' },
@@ -3711,7 +3736,7 @@ module.exports = {
3711
3736
  borderRadius: 4,
3712
3737
  borderRightWidth: 0,
3713
3738
  borderTopWidth: 0,
3714
- color: '#016b6a',
3739
+ color: '#000000',
3715
3740
  displayLabel: true,
3716
3741
  fontName: 'StagSans',
3717
3742
  fontSize: 16,
@@ -3754,23 +3779,30 @@ module.exports = {
3754
3779
  }
3755
3780
  },
3756
3781
  rules: [
3757
- { if: { hover: true }, tokens: { borderWidth: 2 } },
3758
3782
  {
3759
- if: { pressed: true },
3760
- tokens: { backgroundColor: '#e6e6e6' }
3783
+ if: { hover: true },
3784
+ tokens: { borderColor: '#efefef', borderWidth: 3 }
3761
3785
  },
3762
3786
  {
3763
3787
  if: { focus: true },
3764
3788
  tokens: {
3765
- outerBorderColor: '#016b6a',
3789
+ outerBorderColor: '#000000',
3766
3790
  outerBorderGap: 2,
3767
3791
  outerBorderWidth: 2
3768
3792
  }
3793
+ },
3794
+ {
3795
+ if: { pressed: true },
3796
+ tokens: {
3797
+ backgroundColor: '#efefef',
3798
+ borderColor: 'transparent',
3799
+ outerBorderColor: '#000000'
3800
+ }
3769
3801
  }
3770
3802
  ],
3771
3803
  tokens: {
3772
3804
  backgroundColor: '#ffffff',
3773
- borderColor: '#c9c8c8',
3805
+ borderColor: '#efefef',
3774
3806
  borderRadius: 8,
3775
3807
  borderWidth: 1,
3776
3808
  flex: 1,
@@ -3801,13 +3833,12 @@ module.exports = {
3801
3833
  centsFontSize: 20,
3802
3834
  centsLineHeight: 1.25,
3803
3835
  currencySymbolFontSize: 20,
3804
- currencySymbolLineHeight: 1,
3805
3836
  rateFontSize: 16,
3806
- rateLineHeight: 1.14285714286,
3837
+ rateLineHeight: 1.5,
3807
3838
  strikeThroughHeight: 2,
3808
3839
  strikeThroughPosition: 18,
3809
3840
  topTextFontSize: 14,
3810
- topTextLineHeight: 2.25
3841
+ topTextLineHeight: 1.42857142857
3811
3842
  }
3812
3843
  },
3813
3844
  {
@@ -3817,16 +3848,14 @@ module.exports = {
3817
3848
  centsFontName: 'StagSans',
3818
3849
  centsFontSize: 24,
3819
3850
  centsFontWeight: '600',
3820
- centsLineHeight: 1.25,
3821
3851
  currencySymbolFontSize: 32,
3822
- currencySymbolLineHeight: 1.2,
3823
3852
  rateFontName: 'StagSans',
3824
3853
  rateFontSize: 16,
3825
3854
  rateFontWeight: '600',
3826
- rateLineHeight: 2,
3855
+ rateLineHeight: 1.5,
3827
3856
  strikeThroughPosition: 27,
3828
- topTextFontSize: 16,
3829
- topTextLineHeight: 2.25
3857
+ topTextFontSize: 20,
3858
+ topTextLineHeight: 1.4
3830
3859
  }
3831
3860
  },
3832
3861
  {
@@ -3846,22 +3875,22 @@ module.exports = {
3846
3875
  amountLineHeight: 1,
3847
3876
  bottomLinksMarginLeft: 4,
3848
3877
  bottomTextFontSize: 14,
3849
- bottomTextLineHeight: 1.14285714286,
3878
+ bottomTextLineHeight: 1.42857142857,
3850
3879
  bottomTextMarginTop: 0,
3851
3880
  centsFontName: 'StagSans',
3852
3881
  centsFontSize: 24,
3853
3882
  centsFontWeight: '700',
3854
- centsLineHeight: 1.2,
3883
+ centsLineHeight: 1,
3855
3884
  currencySymbolFontName: 'StagSans',
3856
3885
  currencySymbolFontSize: 24,
3857
3886
  currencySymbolFontWeight: '700',
3858
- currencySymbolLineHeight: 1.2,
3887
+ currencySymbolLineHeight: 1,
3859
3888
  dividerColor: null,
3860
3889
  fontColor: '#000000',
3861
3890
  fontName: 'StagSans',
3862
3891
  fontWeight: '700',
3863
3892
  footnoteGap: 4,
3864
- footnoteLinkColor: '#016b6a',
3893
+ footnoteLinkColor: '#000000',
3865
3894
  footnoteLinkFontName: 'StagSans',
3866
3895
  footnoteLinkFontSize: 14,
3867
3896
  footnoteLinkFontWeight: '600',
@@ -3871,7 +3900,7 @@ module.exports = {
3871
3900
  rateFontName: 'StagSans',
3872
3901
  rateFontSize: 16,
3873
3902
  rateFontWeight: '700',
3874
- rateLineHeight: 1.25,
3903
+ rateLineHeight: 1.5,
3875
3904
  strikeThroughColor: '#000000',
3876
3905
  strikeThroughHeight: 3,
3877
3906
  strikeThroughPosition: 21,
@@ -3886,8 +3915,8 @@ module.exports = {
3886
3915
  appearances: { size: { type: 'variant', values: [ 'mini' ] } },
3887
3916
  rules: [ { if: { size: 'mini' }, tokens: { height: 8 } } ],
3888
3917
  tokens: {
3889
- backgroundColor: '#ffffff',
3890
- borderColor: '#016b6a',
3918
+ backgroundColor: '#fafafa',
3919
+ borderColor: '#666666',
3891
3920
  borderRadius: 12,
3892
3921
  borderWidth: 1,
3893
3922
  height: 16
@@ -3905,18 +3934,18 @@ module.exports = {
3905
3934
  rules: [
3906
3935
  {
3907
3936
  if: { inactive: true },
3908
- tokens: { backgroundColor: '#c9c8c8', outlineColor: '#666666' }
3937
+ tokens: { backgroundColor: '#c9c8c8', outlineColor: '#595959' }
3909
3938
  },
3910
3939
  {
3911
3940
  if: { negative: true },
3912
- tokens: { backgroundColor: '#b8373e', outlineColor: '#b8373e' }
3941
+ tokens: { backgroundColor: '#c9370b', outlineColor: '#595959' }
3913
3942
  }
3914
3943
  ],
3915
3944
  tokens: {
3916
- backgroundColor: '#016b6a',
3945
+ backgroundColor: '#000000',
3917
3946
  borderRadius: 12,
3918
3947
  gradient: null,
3919
- outlineColor: '#1b4746',
3948
+ outlineColor: '#595959',
3920
3949
  outlineWidth: 1
3921
3950
  }
3922
3951
  },
@@ -4123,7 +4152,7 @@ module.exports = {
4123
4152
  fontSize: 16,
4124
4153
  fontWeight: '600',
4125
4154
  icon: null,
4126
- iconColor: '#016b6a',
4155
+ iconColor: '#000000',
4127
4156
  iconSize: 24,
4128
4157
  iconSpace: 2,
4129
4158
  lineHeight: 1.5,
@@ -4197,14 +4226,14 @@ module.exports = {
4197
4226
  {
4198
4227
  if: { hover: true },
4199
4228
  tokens: {
4200
- color: '#1b4746',
4229
+ color: '#404040',
4201
4230
  imageDimension: 140,
4202
4231
  textLine: 'underline'
4203
4232
  }
4204
4233
  },
4205
4234
  {
4206
4235
  if: { focus: true },
4207
- tokens: { color: '#016b6a', outerBorderColor: '#1b4746' }
4236
+ tokens: { color: '#000000', outerBorderColor: '#000000' }
4208
4237
  },
4209
4238
  {
4210
4239
  if: { pressed: true },
@@ -4224,7 +4253,7 @@ module.exports = {
4224
4253
  }
4225
4254
  ],
4226
4255
  tokens: {
4227
- color: '#016b6a',
4256
+ color: '#000000',
4228
4257
  contentAlignItems: 'center',
4229
4258
  contentDirection: 'column',
4230
4259
  contentMaxDimension: 168,
@@ -4283,11 +4312,11 @@ module.exports = {
4283
4312
  itemFontName: 'StagSans',
4284
4313
  itemFontSize: 16,
4285
4314
  itemFontWeight: '600',
4286
- itemIconColor: '#016b6a',
4315
+ itemIconColor: '#000000',
4287
4316
  itemIconSize: 24,
4288
4317
  itemLineHeight: 1.6,
4289
4318
  itemUnderline: 'none',
4290
- listGutter: 10,
4319
+ listGutter: 12,
4291
4320
  paddingBottom: 12,
4292
4321
  paddingLeft: 4,
4293
4322
  paddingRight: 4,
@@ -4326,7 +4355,7 @@ module.exports = {
4326
4355
  tokens: {
4327
4356
  inputBackgroundColor: '#ffffff',
4328
4357
  inputBorderColor: '#ffffff',
4329
- inputOutlineColor: '#016b6a',
4358
+ inputOutlineColor: '#000000',
4330
4359
  outerBorderColor: 'rgba(0, 0, 0, 0)',
4331
4360
  outerBorderGap: 0,
4332
4361
  outerBorderWidth: 0
@@ -4335,14 +4364,14 @@ module.exports = {
4335
4364
  {
4336
4365
  if: { focus: true },
4337
4366
  tokens: {
4338
- outerBorderColor: '#17367d',
4367
+ outerBorderColor: '#000000',
4339
4368
  outerBorderGap: 5,
4340
4369
  outerBorderWidth: 1
4341
4370
  }
4342
4371
  },
4343
4372
  {
4344
4373
  if: { hover: true },
4345
- tokens: { outerBorderColor: '#17367d' }
4374
+ tokens: { outerBorderColor: '#000000' }
4346
4375
  },
4347
4376
  {
4348
4377
  if: { inactive: true },
@@ -4350,7 +4379,8 @@ module.exports = {
4350
4379
  inputBackgroundColor: '#c9c8c8',
4351
4380
  inputBorderColor: '#c9c8c8',
4352
4381
  inputOutlineColor: '#c9c8c8',
4353
- labelColor: '#666666'
4382
+ labelColor: '#666666',
4383
+ outerBorderGap: 0
4354
4384
  }
4355
4385
  },
4356
4386
  {
@@ -4358,9 +4388,9 @@ module.exports = {
4358
4388
  tokens: {
4359
4389
  checkedBackgroundColor: '#c9c8c8',
4360
4390
  inputBackgroundColor: '#ffffff',
4361
- inputBorderColor: '#ffffff',
4391
+ inputBorderColor: '#efefef',
4362
4392
  inputBorderWidth: 3,
4363
- inputOutlineColor: '#ffffff',
4393
+ inputOutlineColor: '#c9c8c8',
4364
4394
  inputOutlineWidth: 1,
4365
4395
  labelColor: '#666666',
4366
4396
  outerBorderColor: '#c9c8c8'
@@ -4368,7 +4398,7 @@ module.exports = {
4368
4398
  }
4369
4399
  ],
4370
4400
  tokens: {
4371
- checkedBackgroundColor: '#016b6a',
4401
+ checkedBackgroundColor: '#7a3dfc',
4372
4402
  checkedSize: 16,
4373
4403
  containerBackgroundColor: 'rgba(0, 0, 0, 0)',
4374
4404
  containerBorderRadius: 0,
@@ -4386,7 +4416,7 @@ module.exports = {
4386
4416
  inputBackgroundColor: '#ffffff',
4387
4417
  inputBorderColor: '#ffffff',
4388
4418
  inputBorderWidth: 2,
4389
- inputOutlineColor: '#016b6a',
4419
+ inputOutlineColor: '#000000',
4390
4420
  inputOutlineWidth: 2,
4391
4421
  inputSize: 20,
4392
4422
  labelColor: '#000000',
@@ -4452,42 +4482,45 @@ module.exports = {
4452
4482
  if: { hover: true },
4453
4483
  tokens: {
4454
4484
  borderColor: '#666666',
4455
- outerBorderColor: '#efefef',
4485
+ outerBorderColor: '#c9c8c8',
4456
4486
  outerBorderWidth: 2,
4457
- radioOuterBorderColor: '#17367d',
4487
+ radioOuterBorderColor: '#000000',
4458
4488
  radioOuterBorderGap: 2,
4459
4489
  radioOuterBorderWidth: 1
4460
4490
  }
4461
4491
  },
4492
+ {
4493
+ if: { checked: true },
4494
+ tokens: {
4495
+ borderColor: '#c9c8c8',
4496
+ radioCheckedBackgroundColor: '#7a3dfc',
4497
+ radioInputBorderColor: '#000000',
4498
+ radioInputBorderWidth: 2
4499
+ }
4500
+ },
4462
4501
  {
4463
4502
  if: { focus: true },
4464
4503
  tokens: {
4465
- outerBorderColor: '#17367d',
4504
+ borderColor: '#666666',
4505
+ outerBorderColor: '#000000',
4466
4506
  outerBorderGap: 2,
4467
4507
  outerBorderWidth: 2,
4468
- radioInputBorderColor: '#016b6a',
4469
- radioOuterBorderColor: '#17367d',
4508
+ radioInputBorderColor: '#000000',
4509
+ radioOuterBorderColor: '#000000',
4470
4510
  radioOuterBorderGap: 2,
4471
4511
  radioOuterBorderWidth: 1
4472
4512
  }
4473
4513
  },
4474
- {
4475
- if: { checked: true },
4476
- tokens: {
4477
- borderColor: '#c9c8c8',
4478
- radioInputBorderColor: '#016b6a',
4479
- radioInputBorderWidth: 2
4480
- }
4481
- },
4482
4514
  {
4483
4515
  description: 'Pressed state matches hover state plus light grey background',
4484
4516
  if: { pressed: true },
4485
4517
  tokens: {
4486
4518
  backgroundColor: '#efefef',
4519
+ borderColor: '#666666',
4487
4520
  outerBorderColor: '#c9c8c8',
4488
4521
  outerBorderGap: 0,
4489
4522
  outerBorderWidth: 1,
4490
- radioOuterBorderColor: '#17367d',
4523
+ radioOuterBorderColor: '#000000',
4491
4524
  radioOuterBorderGap: 2
4492
4525
  }
4493
4526
  },
@@ -4540,10 +4573,10 @@ module.exports = {
4540
4573
  paddingLeft: 8,
4541
4574
  paddingRight: 16,
4542
4575
  paddingTop: 12,
4543
- radioCheckedBackgroundColor: '#016b6a',
4576
+ radioCheckedBackgroundColor: '#000000',
4544
4577
  radioCheckedSize: 16,
4545
4578
  radioInputBackgroundColor: '#ffffff',
4546
- radioInputBorderColor: '#016b6a',
4579
+ radioInputBorderColor: '#000000',
4547
4580
  radioInputBorderWidth: 2,
4548
4581
  radioInputOutlineColor: 'rgba(0, 0, 0, 0)',
4549
4582
  radioInputOutlineWidth: 0,
@@ -4607,18 +4640,22 @@ module.exports = {
4607
4640
  appearances: {
4608
4641
  purpose: {
4609
4642
  type: 'variant',
4610
- values: [ 'offer', 'default', 'editorial' ]
4643
+ values: [ 'offer', 'default', 'editorial', 'subtle' ]
4611
4644
  },
4612
4645
  wrap: { type: 'variant', values: [ true ] }
4613
4646
  },
4614
4647
  rules: [
4615
4648
  {
4616
4649
  if: { purpose: 'editorial' },
4617
- tokens: { backgroundColor: '#fbaf34' }
4650
+ tokens: { backgroundColor: '#ffad00' }
4618
4651
  },
4619
4652
  {
4620
4653
  if: { purpose: 'offer' },
4621
- tokens: { backgroundColor: '#7c1366', fontColor: '#ffffff' }
4654
+ tokens: { backgroundColor: '#7a3dfc' }
4655
+ },
4656
+ {
4657
+ if: { purpose: 'subtle' },
4658
+ tokens: { backgroundColor: '#a1ed00' }
4622
4659
  },
4623
4660
  {
4624
4661
  if: { wrap: true },
@@ -4626,7 +4663,7 @@ module.exports = {
4626
4663
  }
4627
4664
  ],
4628
4665
  tokens: {
4629
- backgroundColor: '#c3efff',
4666
+ backgroundColor: '#a1ed00',
4630
4667
  borderRadius: 4,
4631
4668
  borderRadiusBottomLeft: null,
4632
4669
  borderRadiusBottomRight: null,
@@ -4645,10 +4682,10 @@ module.exports = {
4645
4682
  curveWidth: null,
4646
4683
  fontColor: '#000000',
4647
4684
  fontName: 'StagSans',
4648
- fontSize: 12,
4685
+ fontSize: 14,
4649
4686
  fontWeight: '600',
4650
4687
  gradient: null,
4651
- lineHeight: 1.33333333333,
4688
+ lineHeight: 1.42857142857,
4652
4689
  paddingBottom: 2,
4653
4690
  paddingLeft: 12,
4654
4691
  paddingRight: 12,
@@ -4675,13 +4712,14 @@ module.exports = {
4675
4712
  }
4676
4713
  },
4677
4714
  rules: [
4678
- {
4679
- if: { hover: true, inactive: null },
4680
- tokens: { backgroundColor: '#e6e6e6' }
4681
- },
4715
+ { if: { hover: true, inactive: null }, tokens: {} },
4682
4716
  {
4683
4717
  if: { focus: true },
4684
- tokens: { borderColor: '#016b6a', borderWidth: 3 }
4718
+ tokens: {
4719
+ borderColor: '#7a3dfc',
4720
+ borderWidth: 3,
4721
+ outerBorderWidth: 0
4722
+ }
4685
4723
  },
4686
4724
  {
4687
4725
  if: { inactive: true },
@@ -4689,7 +4727,7 @@ module.exports = {
4689
4727
  backgroundColor: '#efefef',
4690
4728
  borderColor: '#efefef',
4691
4729
  color: '#666666',
4692
- placeholderColor: '#666666'
4730
+ placeholderColor: '#000000'
4693
4731
  }
4694
4732
  }
4695
4733
  ],
@@ -4700,13 +4738,13 @@ module.exports = {
4700
4738
  borderWidth: 1,
4701
4739
  buttonsGap: 2,
4702
4740
  clearButtonIcon: PaletteIconTimes,
4703
- color: '#000000',
4741
+ color: '#666666',
4704
4742
  fontName: 'StagSans',
4705
4743
  fontSize: 16,
4706
4744
  fontWeight: '400',
4707
4745
  lineHeight: 1.5,
4708
- outerBackgroundColor: 'rgba(0, 0, 0, 0)',
4709
- outerBorderColor: 'rgba(0, 0, 0, 0)',
4746
+ outerBackgroundColor: '#404040',
4747
+ outerBorderColor: '#404040',
4710
4748
  outerBorderRadius: 32,
4711
4749
  outerBorderWidth: 0,
4712
4750
  paddingBottom: 12,
@@ -4746,55 +4784,41 @@ module.exports = {
4746
4784
  rules: [
4747
4785
  {
4748
4786
  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
- }
4787
+ tokens: { backgroundColor: '#000000', iconColor: '#ffffff' }
4758
4788
  },
4759
4789
  {
4760
- if: { hover: true, priority: 'high' },
4790
+ if: { hover: true },
4761
4791
  tokens: {
4762
- backgroundColor: '#1b4746',
4763
- borderColor: '#1b4746',
4792
+ backgroundColor: '#000000',
4793
+ borderWidth: 0,
4764
4794
  iconColor: '#ffffff'
4765
4795
  }
4766
4796
  },
4767
4797
  {
4768
4798
  if: { focus: true },
4769
4799
  tokens: {
4770
- backgroundColor: '#ffffff',
4771
- borderColor: '#016b6a',
4800
+ backgroundColor: 'transparent',
4801
+ borderColor: '#000000',
4772
4802
  borderWidth: 3,
4773
- iconColor: '#016b6a'
4803
+ iconColor: '#000000'
4774
4804
  }
4775
4805
  },
4776
4806
  {
4777
4807
  if: { pressed: true },
4778
4808
  tokens: {
4779
- backgroundColor: '#1b4746',
4780
- borderColor: null,
4809
+ backgroundColor: '#404040',
4781
4810
  borderWidth: 0,
4782
- iconColor: '#ffffff'
4811
+ iconColor: '#666666'
4783
4812
  }
4784
4813
  },
4785
4814
  {
4786
- if: { focus: true, pressed: true },
4815
+ if: { inactive: true, priority: 'high' },
4787
4816
  tokens: {
4788
- backgroundColor: '#1b4746',
4789
- borderColor: null,
4817
+ backgroundColor: 'rgba(0, 0, 0, 0)',
4790
4818
  borderWidth: 0,
4791
- iconColor: '#ffffff'
4819
+ iconColor: '#666666'
4792
4820
  }
4793
4821
  },
4794
- {
4795
- if: { inactive: true, priority: 'high' },
4796
- tokens: { backgroundColor: '#efefef', iconColor: '#c9c8c8' }
4797
- },
4798
4822
  {
4799
4823
  if: { inactive: true, priority: null },
4800
4824
  tokens: {
@@ -4805,10 +4829,10 @@ module.exports = {
4805
4829
  ],
4806
4830
  tokens: {
4807
4831
  backgroundColor: null,
4808
- borderColor: null,
4832
+ borderColor: 'rgba(0, 0, 0, 0)',
4809
4833
  borderRadius: 32,
4810
4834
  borderWidth: 0,
4811
- iconColor: '#016b6a',
4835
+ iconColor: '#000000',
4812
4836
  iconSize: 20,
4813
4837
  opacity: 1,
4814
4838
  paddingBottom: 8,
@@ -4843,31 +4867,34 @@ module.exports = {
4843
4867
  }
4844
4868
  },
4845
4869
  rules: [
4846
- {
4847
- if: { hover: true },
4848
- tokens: {
4849
- outerBackgroundColor: '#efefef',
4850
- outerBorderColor: '#efefef'
4851
- }
4852
- },
4853
4870
  {
4854
4871
  if: { focus: true },
4855
- tokens: { borderColor: '#016b6a', borderWidth: 3 }
4872
+ tokens: { borderColor: '#7a3dfc', borderWidth: 3 }
4856
4873
  },
4857
4874
  {
4858
4875
  if: { validation: 'success' },
4859
4876
  tokens: {
4860
- borderColor: '#016b6a',
4861
- validationIcon: PaletteIconCheckCircledFilled,
4862
- validationIconColor: '#016b6a'
4877
+ borderColor: '#1c7b2b',
4878
+ feedbackBackgroundColor: '#c5f2cc',
4879
+ validationIcon: PaletteIconCheckCircleFilled,
4880
+ validationIconColor: '#1c7b2b'
4863
4881
  }
4864
4882
  },
4865
4883
  {
4866
4884
  if: { validation: 'error' },
4867
4885
  tokens: {
4868
- borderColor: '#ee2c74',
4886
+ borderColor: '#c9370b',
4887
+ feedbackBackgroundColor: '#fcd3c6',
4869
4888
  validationIcon: PaletteIconExclamationOctagon,
4870
- validationIconColor: '#ee2c74'
4889
+ validationIconColor: '#c9370b'
4890
+ }
4891
+ },
4892
+ {
4893
+ if: { hover: true },
4894
+ tokens: {
4895
+ backgroundColor: '#efefef',
4896
+ borderColor: '#000000',
4897
+ outerBorderWidth: null
4871
4898
  }
4872
4899
  },
4873
4900
  {
@@ -4885,7 +4912,7 @@ module.exports = {
4885
4912
  borderRadius: 4,
4886
4913
  borderWidth: 1,
4887
4914
  color: '#666666',
4888
- feedbackBackgroundColor: '#e5f7fb',
4915
+ feedbackBackgroundColor: '#e0d8fc',
4889
4916
  fontName: 'StagSans',
4890
4917
  fontSize: 16,
4891
4918
  fontWeight: '400',
@@ -4944,7 +4971,7 @@ module.exports = {
4944
4971
  {
4945
4972
  if: { active: true },
4946
4973
  tokens: {
4947
- accentBackgroundColor: '#016b6a',
4974
+ accentBackgroundColor: '#000000',
4948
4975
  backgroundColor: '#efefef'
4949
4976
  }
4950
4977
  },
@@ -4974,7 +5001,7 @@ module.exports = {
4974
5001
  {
4975
5002
  if: { active: true, type: 'child' },
4976
5003
  tokens: {
4977
- accentBackgroundColor: '#016b6a',
5004
+ accentBackgroundColor: '#000000',
4978
5005
  accentOffset: 24,
4979
5006
  accentPadding: 16,
4980
5007
  backgroundColor: 'rgba(0, 0, 0, 0)',
@@ -5079,12 +5106,12 @@ module.exports = {
5079
5106
  tokens: {
5080
5107
  backgroundColor: '#ffffff',
5081
5108
  borderRadius: 4,
5082
- color: '#016b6a',
5109
+ color: '#000000',
5083
5110
  fontName: 'StagSans',
5084
5111
  fontSize: 16,
5085
5112
  fontWeight: '600',
5086
5113
  lineHeight: 1.5,
5087
- outlineColor: '#016b6a',
5114
+ outlineColor: '#000000',
5088
5115
  outlineOffset: 0,
5089
5116
  outlineStyle: 'solid',
5090
5117
  outlineWidth: 2,
@@ -5097,7 +5124,7 @@ module.exports = {
5097
5124
  appearances: { size: { type: 'variant', values: [ 'small' ] } },
5098
5125
  rules: [ { if: { size: 'small' }, tokens: { size: 24, thickness: 2 } } ],
5099
5126
  tokens: {
5100
- fullScreenOverLayBackground: '#fafafa',
5127
+ fullScreenOverLayBackground: 'rgba(255, 255, 255, 0.8)',
5101
5128
  size: 48,
5102
5129
  thickness: 4
5103
5130
  }
@@ -5150,7 +5177,7 @@ module.exports = {
5150
5177
  labelFontWeight: '600',
5151
5178
  playIcon: PaletteIconPlaySolid,
5152
5179
  playIconColor: '#ffffff',
5153
- playIconContainerBackground: '#016b6a'
5180
+ playIconContainerBackground: '#000000'
5154
5181
  }
5155
5182
  },
5156
5183
  StackView: {
@@ -5196,7 +5223,8 @@ module.exports = {
5196
5223
  knobCurrentBorderColor: '#ffffff',
5197
5224
  knobCurrentInnerColor: '#ffffff',
5198
5225
  labelColor: '#ffffff',
5199
- labelCurrentColor: '#ffffff'
5226
+ labelCurrentColor: '#ffffff',
5227
+ stepLabelColor: '#ffffff'
5200
5228
  }
5201
5229
  }
5202
5230
  ],
@@ -5204,8 +5232,8 @@ module.exports = {
5204
5232
  completedIcon: PaletteIconCheck,
5205
5233
  completedIconColor: '#ffffff',
5206
5234
  completedIconSize: 10,
5207
- connectorColor: '#016b6a',
5208
- connectorCompletedColor: '#016b6a',
5235
+ connectorColor: '#000000',
5236
+ connectorCompletedColor: '#000000',
5209
5237
  connectorCompletedHeight: 3,
5210
5238
  connectorHeight: 1,
5211
5239
  connectorMinWidth: 16,
@@ -5214,22 +5242,22 @@ module.exports = {
5214
5242
  containerPaddingRight: null,
5215
5243
  containerPaddingTop: null,
5216
5244
  knobBackgroundColor: 'rgba(0, 0, 0, 0)',
5217
- knobBorderColor: '#016b6a',
5245
+ knobBorderColor: '#000000',
5218
5246
  knobBorderWidth: 1,
5219
- knobCompletedBackgroundColor: '#016b6a',
5220
- knobCompletedBorderColor: '#016b6a',
5247
+ knobCompletedBackgroundColor: '#000000',
5248
+ knobCompletedBorderColor: '#000000',
5221
5249
  knobCompletedPaddingLeft: 1,
5222
5250
  knobCompletedPaddingTop: 2,
5223
- knobCurrentBackgroundColor: '#016b6a',
5224
- knobCurrentBorderColor: '#016b6a',
5251
+ knobCurrentBackgroundColor: '#000000',
5252
+ knobCurrentBorderColor: '#000000',
5225
5253
  knobCurrentBorderWidth: 1,
5226
5254
  knobCurrentInnerColor: null,
5227
5255
  knobCurrentInnerSize: null,
5228
5256
  knobCurrentPaddingLeft: null,
5229
5257
  knobCurrentPaddingTop: null,
5230
5258
  knobSize: 15,
5231
- labelColor: '#016b6a',
5232
- labelCurrentColor: '#016b6a',
5259
+ labelColor: '#000000',
5260
+ labelCurrentColor: '#000000',
5233
5261
  labelCurrentFontName: 'StagSans',
5234
5262
  labelCurrentFontWeight: '600',
5235
5263
  labelDirection: 'row',
@@ -5244,7 +5272,7 @@ module.exports = {
5244
5272
  showStepLabel: false,
5245
5273
  showStepName: true,
5246
5274
  showStepTrackerLabel: true,
5247
- stepLabelColor: '#016b6a',
5275
+ stepLabelColor: '#000000',
5248
5276
  stepLabelFontName: 'StagSans',
5249
5277
  stepLabelFontSize: 16,
5250
5278
  stepLabelFontWeight: '600',
@@ -5276,12 +5304,12 @@ module.exports = {
5276
5304
  { if: { hover: true }, tokens: { borderWidth: 2 } },
5277
5305
  {
5278
5306
  if: { pressed: true },
5279
- tokens: { backgroundColor: '#e6e6e6' }
5307
+ tokens: { backgroundColor: '#efefef' }
5280
5308
  },
5281
5309
  {
5282
5310
  if: { focus: true },
5283
5311
  tokens: {
5284
- outerBorderColor: '#016b6a',
5312
+ outerBorderColor: '#000000',
5285
5313
  outerBorderGap: 2,
5286
5314
  outerBorderWidth: 2
5287
5315
  }
@@ -5330,7 +5358,7 @@ module.exports = {
5330
5358
  },
5331
5359
  rules: [
5332
5360
  {
5333
- if: { spacing: 'compact', type: 'default' },
5361
+ if: { spacing: 'compact' },
5334
5362
  tokens: {
5335
5363
  cellPaddingBottom: 8,
5336
5364
  cellPaddingTop: 8,
@@ -5352,7 +5380,6 @@ module.exports = {
5352
5380
  {
5353
5381
  if: { spacing: 'compact', type: 'subHeading' },
5354
5382
  tokens: {
5355
- cellBackground: '#fafafa',
5356
5383
  cellPaddingBottom: 8,
5357
5384
  cellPaddingTop: 8,
5358
5385
  fontName: 'StagSans',
@@ -5364,8 +5391,9 @@ module.exports = {
5364
5391
  {
5365
5392
  if: { spacing: 'default', type: 'heading' },
5366
5393
  tokens: {
5367
- cellBackground: '#c1f2e8',
5394
+ cellBackground: '#000000',
5368
5395
  cellBoxShadowColor: 'rgba(0, 0, 0, 0)',
5396
+ fontColor: '#ffffff',
5369
5397
  fontName: 'StagSans',
5370
5398
  fontSize: 16,
5371
5399
  fontWeight: '600',
@@ -5375,8 +5403,11 @@ module.exports = {
5375
5403
  {
5376
5404
  if: { spacing: 'compact', type: 'heading' },
5377
5405
  tokens: {
5378
- cellBackground: '#c1f2e8',
5406
+ cellBackground: '#000000',
5379
5407
  cellBoxShadowColor: 'rgba(0, 0, 0, 0)',
5408
+ cellPaddingBottom: 8,
5409
+ cellPaddingTop: 8,
5410
+ fontColor: '#ffffff',
5380
5411
  fontName: 'StagSans',
5381
5412
  fontSize: 16,
5382
5413
  fontWeight: '600',
@@ -5384,14 +5415,8 @@ module.exports = {
5384
5415
  }
5385
5416
  },
5386
5417
  {
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
- }
5418
+ if: { text: 'small', type: 'subHeading' },
5419
+ tokens: { fontName: 'StagSans', fontSize: 16, fontWeight: '600' }
5395
5420
  },
5396
5421
  {
5397
5422
  if: { spacing: 'default', type: 'rowHeading' },
@@ -5412,7 +5437,7 @@ module.exports = {
5412
5437
  }
5413
5438
  },
5414
5439
  {
5415
- if: { spacing: 'default', text: 'small', type: 'rowHeading' },
5440
+ if: { text: 'small', type: 'rowHeading' },
5416
5441
  tokens: {
5417
5442
  fontName: 'StagSans',
5418
5443
  fontSize: 14,
@@ -5428,11 +5453,15 @@ module.exports = {
5428
5453
  fontWeight: '600',
5429
5454
  lineHeight: 1.14285714286
5430
5455
  }
5456
+ },
5457
+ {
5458
+ if: { spacing: 'compact', text: 'small', type: 'default' },
5459
+ tokens: { lineHeight: 1.14285714286 }
5431
5460
  }
5432
5461
  ],
5433
5462
  tokens: {
5434
- borderColor: 'rgba(0, 0, 0, 0)',
5435
- borderWidth: 0,
5463
+ borderColor: '#efefef',
5464
+ borderWidth: 1,
5436
5465
  cellBackground: '#ffffff',
5437
5466
  cellBoxShadowColor: '#efefef',
5438
5467
  cellMinWidth: 0,
@@ -5512,13 +5541,21 @@ module.exports = {
5512
5541
  if: { selected: true },
5513
5542
  tokens: {
5514
5543
  backgroundColor: '#ffffff',
5515
- color: '#016b6a',
5544
+ color: '#000000',
5545
+ highlightBarBorderWidth: 1,
5546
+ highlightBarHeight: 1,
5547
+ highlightColor: '#000000'
5548
+ }
5549
+ },
5550
+ {
5551
+ if: { hover: true },
5552
+ tokens: {
5553
+ backgroundColor: '#efefef',
5516
5554
  highlightBarBorderWidth: 1,
5517
5555
  highlightBarHeight: 1,
5518
- highlightColor: '#016b6a'
5556
+ highlightColor: '#c9c8c8'
5519
5557
  }
5520
5558
  },
5521
- { if: { hover: true }, tokens: { backgroundColor: '#e6e6e6' } },
5522
5559
  {
5523
5560
  if: { focus: true },
5524
5561
  tokens: {
@@ -5534,11 +5571,11 @@ module.exports = {
5534
5571
  },
5535
5572
  {
5536
5573
  if: { focus: true, selected: true },
5537
- tokens: { backgroundColor: '#ffffff', highlightColor: '#016b6a' }
5574
+ tokens: { backgroundColor: '#ffffff', highlightColor: '#000000' }
5538
5575
  },
5539
5576
  {
5540
5577
  if: { inverse: true },
5541
- tokens: { backgroundColor: 'transparent', color: '#e5f7fb' }
5578
+ tokens: { backgroundColor: 'transparent', color: '#ffffff' }
5542
5579
  },
5543
5580
  {
5544
5581
  if: { inverse: true, selected: true },
@@ -5551,15 +5588,15 @@ module.exports = {
5551
5588
  },
5552
5589
  {
5553
5590
  if: { hover: true, inverse: true },
5554
- tokens: { color: '#bbeaf5' }
5591
+ tokens: { color: '#efefef' }
5555
5592
  },
5556
5593
  {
5557
5594
  if: { focus: true, inverse: true },
5558
5595
  tokens: {
5559
- color: '#e5f7fb',
5596
+ color: '#ffffff',
5560
5597
  highlightBarBorderWidth: 1,
5561
5598
  highlightBarHeight: 1,
5562
- highlightColor: '#e5f7fb'
5599
+ highlightColor: '#ffffff'
5563
5600
  }
5564
5601
  },
5565
5602
  {
@@ -5568,12 +5605,7 @@ module.exports = {
5568
5605
  },
5569
5606
  {
5570
5607
  if: { focus: true, inverse: true, selected: true },
5571
- tokens: {
5572
- color: '#c9c8c8',
5573
- highlightBarBorderWidth: 1,
5574
- highlightBarHeight: 1,
5575
- highlightColor: '#c9c8c8'
5576
- }
5608
+ tokens: {}
5577
5609
  },
5578
5610
  { if: { equalWidth: true }, tokens: { maxWidth: null } }
5579
5611
  ],
@@ -5654,11 +5686,11 @@ module.exports = {
5654
5686
  {
5655
5687
  if: { pressed: true },
5656
5688
  tokens: {
5657
- backgroundColor: '#1b4746',
5658
- borderColor: '#1b4746',
5689
+ backgroundColor: '#404040',
5690
+ borderColor: '#404040',
5659
5691
  borderWidth: 0,
5660
5692
  color: '#ffffff',
5661
- iconBackground: '#1b4746',
5693
+ iconBackground: '#404040',
5662
5694
  iconColor: '#ffffff',
5663
5695
  outerBorderColor: 'rgba(0, 0, 0, 0)',
5664
5696
  outerBorderWidth: 0
@@ -5668,11 +5700,11 @@ module.exports = {
5668
5700
  if: { focus: true },
5669
5701
  tokens: {
5670
5702
  backgroundColor: 'rgba(0, 0, 0, 0)',
5671
- borderColor: '#016b6a',
5672
- color: '#016b6a',
5703
+ borderColor: '#000000',
5704
+ color: '#000000',
5673
5705
  iconBackground: 'rgba(0, 0, 0, 0)',
5674
- iconColor: '#016b6a',
5675
- outerBorderColor: '#016b6a',
5706
+ iconColor: '#000000',
5707
+ outerBorderColor: '#000000',
5676
5708
  outerBorderGap: 3,
5677
5709
  outerBorderWidth: 1
5678
5710
  }
@@ -5680,22 +5712,22 @@ module.exports = {
5680
5712
  {
5681
5713
  if: { hover: true },
5682
5714
  tokens: {
5683
- backgroundColor: '#1b4746',
5684
- borderColor: '#1b4746',
5715
+ backgroundColor: '#404040',
5716
+ borderColor: '#404040',
5685
5717
  borderWidth: 0,
5686
5718
  color: '#ffffff',
5687
- iconBackground: '#1b4746',
5719
+ iconBackground: '#404040',
5688
5720
  iconColor: '#ffffff'
5689
5721
  }
5690
5722
  },
5691
5723
  {
5692
5724
  if: { selected: true },
5693
5725
  tokens: {
5694
- backgroundColor: '#016b6a',
5695
- borderColor: '#016b6a',
5726
+ backgroundColor: '#000000',
5727
+ borderColor: '#000000',
5696
5728
  color: '#ffffff',
5697
5729
  icon: PaletteIconClose,
5698
- iconBackground: '#016b6a',
5730
+ iconBackground: '#000000',
5699
5731
  iconColor: '#ffffff',
5700
5732
  iconPadding: 4,
5701
5733
  outerBorderColor: 'rgba(0, 0, 0, 0)',
@@ -5704,23 +5736,23 @@ module.exports = {
5704
5736
  },
5705
5737
  {
5706
5738
  if: { hover: true, selected: true },
5707
- tokens: { backgroundColor: '#1b4746', iconBackground: '#1b4746' }
5739
+ tokens: { backgroundColor: '#404040', iconBackground: '#404040' }
5708
5740
  },
5709
5741
  {
5710
5742
  if: { focus: true, selected: true },
5711
5743
  tokens: {
5712
- backgroundColor: '#016b6a',
5713
- outerBorderColor: '#016b6a',
5744
+ backgroundColor: '#000000',
5745
+ outerBorderColor: '#000000',
5714
5746
  outerBorderWidth: 1
5715
5747
  }
5716
5748
  },
5717
5749
  {
5718
5750
  if: { focus: true, hover: true, selected: true },
5719
- tokens: { iconBackground: '#016b6a' }
5751
+ tokens: { backgroundColor: '#404040', iconBackground: '#404040' }
5720
5752
  },
5721
5753
  {
5722
5754
  if: { focus: true, pressed: true, selected: true },
5723
- tokens: { backgroundColor: '#1b4746', iconBackground: '#1b4746' }
5755
+ tokens: { backgroundColor: '#404040', iconBackground: '#404040' }
5724
5756
  },
5725
5757
  {
5726
5758
  if: { inactive: true },
@@ -5736,10 +5768,10 @@ module.exports = {
5736
5768
  tokens: {
5737
5769
  alignSelf: 'center',
5738
5770
  backgroundColor: '#ffffff',
5739
- borderColor: '#016b6a',
5771
+ borderColor: '#000000',
5740
5772
  borderRadius: 4,
5741
5773
  borderWidth: 1,
5742
- color: '#016b6a',
5774
+ color: '#000000',
5743
5775
  fontName: 'StagSans',
5744
5776
  fontSize: 16,
5745
5777
  fontWeight: '600',
@@ -5747,7 +5779,7 @@ module.exports = {
5747
5779
  iconAlignSelf: 'center',
5748
5780
  iconBackground: '#ffffff',
5749
5781
  iconBorderRadius: 32,
5750
- iconColor: '#016b6a',
5782
+ iconColor: '#000000',
5751
5783
  iconPadding: 2,
5752
5784
  iconPosition: 'right',
5753
5785
  iconSize: 16,
@@ -5934,30 +5966,44 @@ module.exports = {
5934
5966
  rules: [
5935
5967
  {
5936
5968
  if: { hover: true, inactive: null },
5969
+ tokens: { backgroundColor: '#efefef', borderColor: '#000000' }
5970
+ },
5971
+ {
5972
+ if: { hover: true, validation: 'success' },
5937
5973
  tokens: {
5938
- outerBackgroundColor: '#efefef',
5939
- outerBorderColor: '#efefef'
5974
+ backgroundColor: '#efefef',
5975
+ borderColor: '#000000',
5976
+ icon: PaletteIconCheckCircleFilled,
5977
+ iconColor: '#1c7b2b'
5940
5978
  }
5941
5979
  },
5942
5980
  {
5943
- if: { validation: 'success' },
5981
+ if: { hover: true, validation: 'error' },
5982
+ tokens: {
5983
+ backgroundColor: '#efefef',
5984
+ borderColor: '#000000',
5985
+ iconColor: '#c9370b'
5986
+ }
5987
+ },
5988
+ {
5989
+ if: { hover: false, validation: 'success' },
5944
5990
  tokens: {
5945
- borderColor: '#016b6a',
5946
- icon: PaletteIconCheckCircledFilled,
5947
- iconColor: '#016b6a'
5991
+ borderColor: '#1c7b2b',
5992
+ icon: PaletteIconCheckCircleFilled,
5993
+ iconColor: '#1c7b2b'
5948
5994
  }
5949
5995
  },
5950
5996
  {
5951
- if: { validation: 'error' },
5997
+ if: { hover: false, validation: 'error' },
5952
5998
  tokens: {
5953
- borderColor: '#ee2c74',
5999
+ borderColor: '#c9370b',
5954
6000
  icon: PaletteIconExclamationOctagon,
5955
- iconColor: '#ee2c74'
6001
+ iconColor: '#c9370b'
5956
6002
  }
5957
6003
  },
5958
6004
  {
5959
6005
  if: { focus: true, inactive: null },
5960
- tokens: { borderColor: '#016b6a', borderWidth: 3, icon: null }
6006
+ tokens: { borderColor: '#000000', borderWidth: 3, icon: null }
5961
6007
  },
5962
6008
  {
5963
6009
  if: { inactive: true },
@@ -5971,8 +6017,8 @@ module.exports = {
5971
6017
  borderRadius: 4,
5972
6018
  borderWidth: 1,
5973
6019
  buttonSize: 32,
5974
- buttonsGap: 1,
5975
- buttonsPaddingRight: 8,
6020
+ buttonsGap: 0,
6021
+ buttonsPaddingRight: 0,
5976
6022
  clearButtonIcon: PaletteIconTimes,
5977
6023
  color: '#666666',
5978
6024
  defaultCreditIcon: PaletteIconCreditCard,
@@ -5987,11 +6033,11 @@ module.exports = {
5987
6033
  masterCardIcon: PaletteIconMasterCard,
5988
6034
  outerBackgroundColor: 'rgba(0, 0, 0, 0)',
5989
6035
  outerBorderColor: 'rgba(0, 0, 0, 0)',
5990
- outerBorderWidth: 2,
5991
- paddingBottom: 10,
6036
+ outerBorderWidth: 0,
6037
+ paddingBottom: 12,
5992
6038
  paddingLeft: 16,
5993
6039
  paddingRight: 16,
5994
- paddingTop: 10,
6040
+ paddingTop: 12,
5995
6041
  passwordHideButtonIcon: PaletteIconEyeMasked,
5996
6042
  passwordShowButtonIcon: PaletteIconEyeUnmasked,
5997
6043
  visaIcon: PaletteIconVisa
@@ -6041,7 +6087,7 @@ module.exports = {
6041
6087
  lineItemDirection: 'column',
6042
6088
  lineItemMarginBottom: 0,
6043
6089
  lineItemMarginRight: 24,
6044
- timelineColor: '#016b6a',
6090
+ timelineColor: '#000000',
6045
6091
  timelineConnectorColor: '#000000',
6046
6092
  timelineContainerDirection: 'column'
6047
6093
  }
@@ -6065,10 +6111,10 @@ module.exports = {
6065
6111
  ],
6066
6112
  tokens: {
6067
6113
  animationBackgroundColorAfter: '#efefef',
6068
- animationBackgroundColorBefore: '#016b6a',
6114
+ animationBackgroundColorBefore: '#000000',
6069
6115
  animationColorAfter: '#000000',
6070
6116
  animationColorBefore: '#ffffff',
6071
- animationDivColorAfter: '#016b6a',
6117
+ animationDivColorAfter: '#000000',
6072
6118
  animationDivColorBefore: '#ffffff',
6073
6119
  animationHeightAfter: 24,
6074
6120
  animationHeightBefore: 0,
@@ -6078,7 +6124,7 @@ module.exports = {
6078
6124
  animationPaddingTopBefore: 0,
6079
6125
  chevronlinkFontName: 'StagSans',
6080
6126
  chevronlinkFontWeight: '400',
6081
- containerBackgroundColor: '#016b6a',
6127
+ containerBackgroundColor: '#000000',
6082
6128
  containerGap: 12,
6083
6129
  padding: 16
6084
6130
  }
@@ -6116,64 +6162,90 @@ module.exports = {
6116
6162
  rules: [
6117
6163
  {
6118
6164
  if: { hover: true },
6119
- tokens: { backgroundColor: '#b5b4b4', switchColor: '#505050' }
6165
+ tokens: { backgroundColor: '#c9c8c8', switchColor: '#666666' }
6120
6166
  },
6121
6167
  {
6122
6168
  if: { pressed: true },
6123
- tokens: { backgroundColor: '#b5b4b4', switchColor: '#505050' }
6169
+ tokens: { backgroundColor: '#c9c8c8', switchColor: '#595959' }
6124
6170
  },
6125
6171
  {
6126
6172
  if: { focus: true },
6127
6173
  tokens: {
6128
- backgroundColor: '#b5b4b4',
6129
- outerBorderColor: '#17367d',
6174
+ backgroundColor: '#c9c8c8',
6175
+ outerBorderColor: '#000000',
6130
6176
  outerBorderGap: 3,
6131
6177
  outerBorderWidth: 1,
6132
- switchColor: '#505050'
6178
+ switchColor: '#666666'
6133
6179
  }
6134
6180
  },
6135
6181
  {
6136
6182
  if: { selected: true },
6137
6183
  tokens: {
6138
- backgroundColor: '#e5f7fb',
6184
+ backgroundColor: '#fafafa',
6139
6185
  icon: PaletteIconCheck,
6140
6186
  iconColor: '#ffffff',
6141
6187
  switchBorderColor: 'rgba(0, 0, 0, 0)',
6142
- switchColor: '#016b6a'
6188
+ switchColor: '#000000'
6143
6189
  }
6144
6190
  },
6145
6191
  {
6146
6192
  if: { hover: true, selected: true },
6147
- tokens: { backgroundColor: '#bbeaf5', switchColor: '#1b4746' }
6193
+ tokens: { backgroundColor: '#efefef', switchColor: '#404040' }
6148
6194
  },
6149
6195
  {
6150
6196
  if: { pressed: true, selected: true },
6151
- tokens: { backgroundColor: '#b5b4b4', switchColor: '#505050' }
6197
+ tokens: { backgroundColor: '#c9c8c8', switchColor: '#666666' }
6152
6198
  },
6153
6199
  {
6154
6200
  if: { focus: true, selected: true },
6155
- tokens: { outerBorderColor: '#17367d', outerBorderWidth: 1 }
6201
+ tokens: {
6202
+ backgroundColor: '#efefef',
6203
+ icon: PaletteIconCheck,
6204
+ iconColor: '#ffffff',
6205
+ outerBorderColor: '#000000',
6206
+ outerBorderWidth: 1,
6207
+ switchBorderColor: 'rgba(0, 0, 0, 0)',
6208
+ switchColor: '#000000'
6209
+ }
6156
6210
  },
6157
6211
  {
6158
6212
  if: { focus: true, pressed: true },
6159
6213
  tokens: {
6160
- outerBorderColor: '#17367d',
6214
+ outerBorderColor: '#000000',
6161
6215
  outerBorderGap: 3,
6162
6216
  outerBorderWidth: 1
6163
6217
  }
6164
6218
  },
6165
6219
  {
6166
6220
  if: { focus: true, pressed: true, selected: true },
6167
- tokens: { outerBorderColor: '#17367d' }
6221
+ tokens: {
6222
+ backgroundColor: '#c9c8c8',
6223
+ icon: PaletteIconCheck,
6224
+ iconColor: '#ffffff',
6225
+ outerBorderColor: '#000000',
6226
+ outerBorderGap: 3,
6227
+ outerBorderWidth: 1,
6228
+ switchColor: '#666666'
6229
+ }
6168
6230
  },
6169
6231
  {
6170
6232
  if: { inactive: true },
6171
6233
  tokens: {
6172
6234
  backgroundColor: '#efefef',
6173
- iconColor: '#c9c8c8',
6174
6235
  opacity: 0.5,
6175
6236
  switchBorderColor: 'rgba(0, 0, 0, 0)',
6176
- switchColor: '#ffffff'
6237
+ switchColor: '#c9c8c8'
6238
+ }
6239
+ },
6240
+ {
6241
+ if: { inactive: true, selected: true },
6242
+ tokens: {
6243
+ backgroundColor: '#efefef',
6244
+ icon: PaletteIconCheck,
6245
+ iconColor: '#ffffff',
6246
+ opacity: 0.5,
6247
+ switchBorderColor: 'rgba(0, 0, 0, 0)',
6248
+ switchColor: '#c9c8c8'
6177
6249
  }
6178
6250
  }
6179
6251
  ],
@@ -6210,7 +6282,7 @@ module.exports = {
6210
6282
  switchColor: '#595959',
6211
6283
  switchShadow: {
6212
6284
  blur: 2,
6213
- color: 'rgba(0, 0, 0, 0.1)',
6285
+ color: 'rgba(0, 0, 0, 0.2)',
6214
6286
  inset: false,
6215
6287
  offsetX: 0,
6216
6288
  offsetY: 2,
@@ -6255,7 +6327,7 @@ module.exports = {
6255
6327
  arrowBorderRadius: 0,
6256
6328
  arrowOffset: 4,
6257
6329
  arrowWidth: 8,
6258
- backgroundColor: '#c3efff',
6330
+ backgroundColor: '#e0d8fc',
6259
6331
  borderRadius: 4,
6260
6332
  color: '#000000',
6261
6333
  fontName: 'StagSans',
@@ -6300,7 +6372,11 @@ module.exports = {
6300
6372
  rules: [
6301
6373
  {
6302
6374
  if: { hover: true },
6303
- tokens: { backgroundColor: '#c3efff', iconScale: 1.25 }
6375
+ tokens: {
6376
+ backgroundColor: 'rgba(0, 0, 0, 0)',
6377
+ iconColor: '#7a3dfc',
6378
+ iconScale: 1.25
6379
+ }
6304
6380
  },
6305
6381
  {
6306
6382
  if: { inverse: true },
@@ -6308,30 +6384,39 @@ module.exports = {
6308
6384
  },
6309
6385
  {
6310
6386
  if: { hover: true, inverse: true },
6311
- tokens: { backgroundColor: '#c9c8c8', iconColor: '#ffffff' }
6387
+ tokens: { iconColor: '#ffffff' }
6312
6388
  },
6313
6389
  {
6314
- if: { inverse: true, pressed: true },
6315
- tokens: { backgroundColor: '#ffffff', iconColor: '#c9c8c8' }
6390
+ if: { focus: true, inverse: true },
6391
+ tokens: { outerBorderColor: '#ffffff' }
6316
6392
  },
6317
6393
  {
6318
- if: { inverse: null, pressed: true },
6319
- tokens: { backgroundColor: '#016b6a', iconColor: '#ffffff' }
6394
+ if: { focus: true, inverse: null },
6395
+ tokens: { outerBorderColor: '#000000' }
6320
6396
  },
6321
6397
  {
6322
- if: { focus: true, inverse: true },
6323
- tokens: { outerBorderColor: '#ffffff' }
6398
+ if: { inverse: true, pressed: true },
6399
+ tokens: {
6400
+ backgroundColor: '#ffffff',
6401
+ icon: PaletteIconTooltipSymbol,
6402
+ iconColor: '#000000',
6403
+ outerBorderColor: '#efefef'
6404
+ }
6324
6405
  },
6325
6406
  {
6326
- if: { focus: true, inverse: null },
6327
- tokens: { outerBorderColor: '#17367d' }
6407
+ if: { inverse: null, pressed: true },
6408
+ tokens: {
6409
+ backgroundColor: '#5b2bc2',
6410
+ iconColor: '#ffffff',
6411
+ outerBorderColor: '#5b2bc2'
6412
+ }
6328
6413
  }
6329
6414
  ],
6330
6415
  tokens: {
6331
6416
  backgroundColor: 'rgba(0, 0, 0, 0)',
6332
6417
  borderRadius: 32,
6333
6418
  icon: PaletteIconTooltip,
6334
- iconColor: '#016b6a',
6419
+ iconColor: '#000000',
6335
6420
  iconScale: 1,
6336
6421
  iconSize: 16,
6337
6422
  outerBorderColor: 'rgba(0, 0, 0, 0)',
@@ -6413,7 +6498,7 @@ module.exports = {
6413
6498
  {
6414
6499
  if: { size: 'eyebrow' },
6415
6500
  tokens: {
6416
- color: '#595959',
6501
+ color: '#000000',
6417
6502
  fontName: 'StagSans',
6418
6503
  fontSize: 14,
6419
6504
  fontWeight: '600',
@@ -6536,27 +6621,27 @@ module.exports = {
6536
6621
  },
6537
6622
  { if: { inverse: true }, tokens: { color: '#ffffff' } },
6538
6623
  { if: { colour: 'default' }, tokens: { color: '#000000' } },
6539
- { if: { colour: 'brand' }, tokens: { color: '#016b6a' } },
6624
+ { if: { colour: 'brand' }, tokens: { color: '#ff0076' } },
6540
6625
  { if: { colour: 'dark' }, tokens: { color: '#595959' } },
6541
6626
  { 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' } },
6627
+ { if: { colour: 'positive' }, tokens: { color: '#1c7b2b' } },
6628
+ { if: { colour: 'warning' }, tokens: { color: '#c9370b' } },
6629
+ { if: { colour: 'danger' }, tokens: { color: '#c9370b' } },
6545
6630
  { if: { colour: 'black' }, tokens: { color: '#000000' } },
6546
6631
  { if: { colour: 'white' }, tokens: { color: '#ffffff' } },
6547
- { if: { colour: 'brand2' }, tokens: { color: '#17367d' } },
6548
- { if: { colour: 'brand3' }, tokens: { color: '#7c1366' } },
6632
+ { if: { colour: 'brand2' }, tokens: { color: '#7a3dfc' } },
6633
+ { if: { colour: 'brand3' }, tokens: { color: '#5b2bc2' } },
6549
6634
  {
6550
6635
  if: { colour: 'alternative1' },
6551
- tokens: { color: '#c53a70' }
6636
+ tokens: { color: '#404040' }
6552
6637
  },
6553
6638
  {
6554
6639
  if: { colour: 'alternative2' },
6555
- tokens: { color: '#8c0448' }
6640
+ tokens: { color: '#dd0066' }
6556
6641
  },
6557
6642
  {
6558
6643
  if: { colour: 'alternative3' },
6559
- tokens: { color: '#258b0b' }
6644
+ tokens: { color: '#1c7b2b' }
6560
6645
  }
6561
6646
  ],
6562
6647
  tokens: {
@@ -6694,7 +6779,7 @@ module.exports = {
6694
6779
  tokens: {
6695
6780
  borderColor: '#595959',
6696
6781
  borderWidth: 1,
6697
- outerBorderColor: '#17367d'
6782
+ outerBorderColor: '#000000'
6698
6783
  }
6699
6784
  },
6700
6785
  {
@@ -6703,11 +6788,15 @@ module.exports = {
6703
6788
  },
6704
6789
  {
6705
6790
  if: { pressed: true },
6706
- tokens: { borderColor: '#595959', borderWidth: 3 }
6791
+ tokens: {
6792
+ borderColor: '#595959',
6793
+ borderWidth: 3,
6794
+ outerBorderColor: 'rgba(0, 0, 0, 0)'
6795
+ }
6707
6796
  },
6708
6797
  {
6709
6798
  if: { selected: true },
6710
- tokens: { borderColor: '#016b6a', titleColor: '#016b6a' }
6799
+ tokens: { borderColor: '#7a3dfc', titleColor: '#7a3dfc' }
6711
6800
  }
6712
6801
  ],
6713
6802
  tokens: {
@@ -6738,8 +6827,8 @@ module.exports = {
6738
6827
  thumbWidth: 8,
6739
6828
  timestampMarginLeft: 8,
6740
6829
  timestampMarginRight: 8,
6741
- trackGradientEnd: '#39cdc9',
6742
- trackGradientStart: '#39cdc9'
6830
+ trackGradientEnd: '#7a3dfc',
6831
+ trackGradientStart: '#7a3dfc'
6743
6832
  }
6744
6833
  },
6745
6834
  VideoVolumeSlider: {
@@ -6772,7 +6861,7 @@ module.exports = {
6772
6861
  { if: { viewport: [ 'lg', 'xl' ] }, tokens: { rowSize: 6 } }
6773
6862
  ],
6774
6863
  tokens: {
6775
- itemBorderColor: 'rgba(0, 0, 0, 0)',
6864
+ itemBorderColor: '#c9c8c8',
6776
6865
  itemPadding: 16,
6777
6866
  rowBorderWidth: 1,
6778
6867
  rowSize: 6
@@ -6838,5 +6927,5 @@ module.exports = {
6838
6927
  tokens: { size: 96 }
6839
6928
  }
6840
6929
  },
6841
- metadata: { name: 'theme-koodo', themeTokensVersion: '2.45.0' }
6930
+ metadata: { name: 'theme-koodo', themeTokensVersion: '2.46.0' }
6842
6931
  }