@telus-uds/theme-koodo 4.16.1 → 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 +696 -729
  2. package/build/android/theme.json +1396 -1114
  3. package/build/ios/schema.json +696 -729
  4. package/build/ios/theme.json +1396 -1114
  5. package/build/rn/schema.json +696 -729
  6. package/build/rn/theme.js +887 -798
  7. package/package.json +4 -4
  8. package/theme.json +955 -917
package/build/rn/theme.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  *
3
3
  * Do not edit directly
4
- * Generated on Fri, 10 Nov 2023 22:26:23 GMT
4
+ * Generated on Sat, 18 Nov 2023 02:23:36 GMT
5
5
  *
6
6
  */
7
7
 
@@ -10,13 +10,14 @@ 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')
17
17
  const PaletteIconSubtract = require('@telus-uds/palette-koodo/build/rn/icons/Subtract')
18
18
  const PaletteIconExpand = require('@telus-uds/palette-koodo/build/rn/icons/Expand')
19
19
  const PaletteIconPlayVideo = require('@telus-uds/palette-koodo/build/rn/icons/PlayVideo')
20
+ const PaletteIconBulletFill = require('@telus-uds/palette-koodo/build/rn/icons/BulletFill')
20
21
  const PaletteIconTimes = require('@telus-uds/palette-koodo/build/rn/icons/Times')
21
22
  const PaletteIconExclamationTriangle = require('@telus-uds/palette-koodo/build/rn/icons/ExclamationTriangle')
22
23
  const PaletteIconSpyglass = require('@telus-uds/palette-koodo/build/rn/icons/Spyglass')
@@ -31,6 +32,7 @@ const PaletteIconEyeMasked = require('@telus-uds/palette-koodo/build/rn/icons/Ey
31
32
  const PaletteIconEyeUnmasked = require('@telus-uds/palette-koodo/build/rn/icons/EyeUnmasked')
32
33
  const PaletteIconVisa = require('@telus-uds/palette-koodo/build/rn/icons/Visa')
33
34
  const PaletteIconTooltip = require('@telus-uds/palette-koodo/build/rn/icons/Tooltip')
35
+ const PaletteIconTooltipSymbol = require('@telus-uds/palette-koodo/build/rn/icons/TooltipSymbol')
34
36
  const PaletteIconPause = require('@telus-uds/palette-koodo/build/rn/icons/Pause')
35
37
  const PaletteIconReplay = require('@telus-uds/palette-koodo/build/rn/icons/Replay')
36
38
  const PaletteIconClosedCaptions = require('@telus-uds/palette-koodo/build/rn/icons/ClosedCaptions')
@@ -53,7 +55,7 @@ module.exports = {
53
55
  }
54
56
  },
55
57
  rules: [ { if: { size: 'large' }, tokens: { size: 48, thickness: 4 } } ],
56
- tokens: { color: '#016b6a', size: 24, thickness: 2 }
58
+ tokens: { color: '#7a3dfc', size: 24, thickness: 2 }
57
59
  },
58
60
  Badge: {
59
61
  appearances: {
@@ -75,15 +77,15 @@ module.exports = {
75
77
  if: { outline: true },
76
78
  tokens: {
77
79
  backgroundColor: 'rgba(0, 0, 0, 0)',
78
- borderColor: '#fae6f4'
80
+ borderColor: '#a1ed00'
79
81
  }
80
82
  },
81
83
  {
82
84
  if: { alternative: true },
83
85
  tokens: {
84
86
  backgroundColor: 'rgba(0, 0, 0, 0)',
85
- borderColor: '#016b6a',
86
- color: '#016b6a',
87
+ borderColor: '#dd0066',
88
+ color: '#dd0066',
87
89
  fontSize: 16,
88
90
  paddingBottom: 8,
89
91
  paddingTop: 8
@@ -92,8 +94,8 @@ module.exports = {
92
94
  {
93
95
  if: { purpose: 'offer' },
94
96
  tokens: {
95
- backgroundColor: '#c3efff',
96
- color: '#000000',
97
+ backgroundColor: '#7a3dfc',
98
+ color: '#ffffff',
97
99
  fontSize: 16,
98
100
  paddingBottom: 8,
99
101
  paddingTop: 8
@@ -102,8 +104,8 @@ module.exports = {
102
104
  {
103
105
  if: { purpose: 'editorial' },
104
106
  tokens: {
105
- backgroundColor: '#000000',
106
- color: '#ffffff',
107
+ backgroundColor: '#ffad00',
108
+ color: '#000000',
107
109
  fontSize: 16
108
110
  }
109
111
  },
@@ -111,7 +113,7 @@ module.exports = {
111
113
  if: { outline: true, purpose: 'editorial' },
112
114
  tokens: {
113
115
  backgroundColor: 'rgba(0, 0, 0, 0)',
114
- borderColor: '#000000',
116
+ borderColor: '#ffad00',
115
117
  color: '#000000'
116
118
  }
117
119
  },
@@ -119,16 +121,17 @@ module.exports = {
119
121
  if: { outline: true, purpose: 'offer' },
120
122
  tokens: {
121
123
  backgroundColor: 'rgba(0, 0, 0, 0)',
122
- borderColor: '#c3efff'
124
+ borderColor: '#7a3dfc',
125
+ color: '#000000'
123
126
  }
124
127
  }
125
128
  ],
126
129
  tokens: {
127
- backgroundColor: '#fae6f4',
130
+ backgroundColor: '#a1ed00',
128
131
  borderColor: 'rgba(0, 0, 0, 0)',
129
132
  borderRadius: 32,
130
133
  borderWidth: 2,
131
- color: '#7c1366',
134
+ color: '#000000',
132
135
  fontName: 'StagSans',
133
136
  fontSize: 14,
134
137
  fontWeight: '600',
@@ -162,8 +165,8 @@ module.exports = {
162
165
  backgroundGradient: {
163
166
  angle: 0,
164
167
  stops: [
165
- { color: '#016b6a', stop: 0 },
166
- { color: '#016b6a', stop: 1 }
168
+ { color: '#000000', stop: 0 },
169
+ { color: '#000000', stop: 1 }
167
170
  ],
168
171
  type: 'linear'
169
172
  },
@@ -233,23 +236,23 @@ module.exports = {
233
236
  },
234
237
  {
235
238
  if: { background: 'critical' },
236
- tokens: { backgroundColor: '#b8373e', borderColor: '#b8373e' }
239
+ tokens: { backgroundColor: '#c9370b', borderColor: '#c9370b' }
237
240
  },
238
241
  {
239
242
  if: { background: 'danger' },
240
- tokens: { backgroundColor: '#f8dde3', borderColor: '#f8dde3' }
243
+ tokens: { backgroundColor: '#fcd3c6', borderColor: '#fcd3c6' }
241
244
  },
242
245
  {
243
246
  if: { background: 'warning' },
244
- tokens: { backgroundColor: '#feeec7', borderColor: '#feeec7' }
247
+ tokens: { backgroundColor: '#fff5d2', borderColor: '#fff5d2' }
245
248
  },
246
249
  {
247
250
  if: { background: 'positive' },
248
- tokens: { backgroundColor: '#e5f7fb', borderColor: '#e5f7fb' }
251
+ tokens: { backgroundColor: '#c5f2cc', borderColor: '#c5f2cc' }
249
252
  },
250
253
  {
251
254
  if: { background: 'brand' },
252
- tokens: { backgroundColor: '#016b6a', borderColor: '#016b6a' }
255
+ tokens: { backgroundColor: '#7a3dfc', borderColor: '#7a3dfc' }
253
256
  },
254
257
  {
255
258
  if: { background: 'white' },
@@ -261,19 +264,19 @@ module.exports = {
261
264
  },
262
265
  {
263
266
  if: { background: 'featurePrimary' },
264
- tokens: { backgroundColor: '#7c1366', borderColor: '#7c1366' }
267
+ tokens: { backgroundColor: '#a1ed00', borderColor: '#a1ed00' }
265
268
  },
266
269
  {
267
270
  if: { background: 'featureSecondary' },
268
- tokens: { backgroundColor: '#17367d', borderColor: '#17367d' }
271
+ tokens: { backgroundColor: '#ff0076', borderColor: '#ff0076' }
269
272
  },
270
273
  {
271
274
  if: { background: 'featureNeutral' },
272
- tokens: { backgroundColor: '#595959', borderColor: '#595959' }
275
+ tokens: { backgroundColor: '#ffad00', borderColor: '#ffad00' }
273
276
  },
274
277
  {
275
278
  if: { background: 'featureBrand' },
276
- tokens: { backgroundColor: '#016b6a', borderColor: '#016b6a' }
279
+ tokens: { backgroundColor: '#e0d8fc', borderColor: '#e0d8fc' }
277
280
  }
278
281
  ],
279
282
  tokens: {
@@ -293,20 +296,20 @@ module.exports = {
293
296
  {
294
297
  if: { inverse: true },
295
298
  tokens: {
296
- color: '#e5f7fb',
299
+ color: '#ffffff',
297
300
  currentColor: '#ffffff',
298
301
  iconColor: '#c9c8c8'
299
302
  }
300
303
  }
301
304
  ],
302
305
  tokens: {
303
- color: '#016b6a',
304
- currentColor: '#016b6a',
306
+ color: '#000000',
307
+ currentColor: '#000000',
305
308
  fontName: 'StagSans',
306
309
  fontSize: 14,
307
310
  fontWeight: '600',
308
311
  icon: PaletteIconChevronRight,
309
- iconColor: '#016b6a',
312
+ iconColor: '#000000',
310
313
  iconPadding: 4,
311
314
  iconSize: 20,
312
315
  listItemPadding: 0
@@ -371,132 +374,120 @@ module.exports = {
371
374
  rules: [
372
375
  {
373
376
  if: { priority: 'high' },
374
- tokens: { backgroundColor: '#016b6a', color: '#ffffff' }
377
+ tokens: { backgroundColor: '#000000', color: '#ffffff' }
375
378
  },
376
379
  {
377
380
  if: { danger: true },
378
- tokens: { borderColor: '#df3d0c', color: '#df3d0c' }
379
- },
380
- {
381
- if: { inverse: true },
382
381
  tokens: {
383
382
  backgroundColor: 'rgba(0, 0, 0, 0)',
384
- borderColor: '#ffffff',
385
- color: '#ffffff',
386
- outerBackgroundColor: 'rgba(0, 0, 0, 0)'
383
+ borderBottomWidth: 1,
384
+ borderColor: '#c9370b',
385
+ borderLeftWidth: 1,
386
+ borderRightWidth: 1,
387
+ borderTopWidth: 1,
388
+ color: '#c9370b'
387
389
  }
388
390
  },
389
391
  {
390
- if: { hover: true },
391
- tokens: { backgroundColor: '#1b4746', color: '#ffffff' }
392
- },
393
- {
394
- if: { pressed: true },
395
- tokens: { backgroundColor: '#595959', color: '#c9c8c8' }
396
- },
397
- {
398
- if: { focus: true },
392
+ if: { inverse: true },
399
393
  tokens: {
400
- borderBottomWidth: 4,
401
- borderLeftWidth: 4,
402
- borderRightWidth: 4,
403
- borderTopWidth: 4,
394
+ backgroundColor: '#ffffff',
395
+ borderColor: 'rgba(0, 0, 0, 0)',
404
396
  color: '#000000',
405
- outerBorderColor: '#016b6a',
406
- outerBorderGap: 2
397
+ outerBackgroundColor: 'rgba(0, 0, 0, 0)'
407
398
  }
408
399
  },
409
400
  {
410
- if: { inverse: true, priority: 'high' },
401
+ if: { priority: 'low' },
411
402
  tokens: {
412
403
  backgroundColor: '#ffffff',
413
- borderWidth: 0,
414
- color: '#016b6a'
404
+ borderBottomWidth: 1,
405
+ borderColor: '#000000',
406
+ color: '#000000',
407
+ outerBackgroundColor: 'rgba(0, 0, 0, 0)'
415
408
  }
416
409
  },
417
410
  {
418
- if: { hover: true, priority: 'high' },
419
- tokens: { backgroundColor: '#1b4746', color: '#ffffff' }
411
+ if: { hover: true },
412
+ tokens: { backgroundColor: '#404040', color: '#ffffff' }
420
413
  },
421
414
  {
422
- if: { danger: true, focus: true },
415
+ if: { focus: true },
423
416
  tokens: {
424
- color: '#df3d0c',
425
- outerBorderColor: '#df3d0c',
426
- outerBorderGap: 2
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
427
426
  }
428
427
  },
429
428
  {
430
- if: { danger: true, hover: true },
431
- tokens: { backgroundColor: '#c9370b', color: '#ffffff' }
432
- },
433
- {
434
- if: { hover: true, inverse: true },
435
- tokens: {
436
- backgroundColor: '#e6e6e6',
437
- borderColor: '#e6e6e6',
438
- color: '#016b6a'
439
- }
429
+ if: { hover: true, priority: 'low' },
430
+ tokens: { borderBottomWidth: 1, outerBorderColor: '#000000' }
440
431
  },
441
432
  {
442
- if: { pressed: true, priority: 'high' },
443
- tokens: { backgroundColor: '#595959', color: '#c9c8c8' }
433
+ if: { focus: true, priority: 'low' },
434
+ tokens: { color: '#000000' }
444
435
  },
445
436
  {
446
- if: { inverse: true, pressed: true },
447
- tokens: { backgroundColor: '#c9c8c8', color: '#666666' }
437
+ if: { focus: true, hover: true, priority: 'low' },
438
+ tokens: { color: '#ffffff' }
448
439
  },
449
440
  {
450
- if: { focus: true, priority: 'high' },
451
- tokens: {
452
- backgroundColor: '#016b6a',
453
- color: '#ffffff',
454
- outerBorderGap: 2
455
- }
456
- },
457
- {
458
- if: { focus: true, inverse: true },
441
+ if: { danger: true, focus: true },
459
442
  tokens: {
460
- borderColor: '#ffffff',
461
- color: '#ffffff',
462
- 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',
463
451
  outerBorderGap: 2
464
452
  }
465
453
  },
466
454
  {
467
- if: { focus: true, pressed: true },
455
+ if: { hover: true, inverse: true },
468
456
  tokens: {
469
- backgroundColor: '#595959',
457
+ backgroundColor: '#c9c8c8',
470
458
  borderColor: 'rgba(0, 0, 0, 0)',
471
- color: '#c9c8c8',
472
- outerBorderGap: 2
459
+ color: '#404040',
460
+ outerBorderColor: 'rgba(0, 0, 0, 0)',
461
+ outerBorderWidth: 1
473
462
  }
474
463
  },
475
464
  {
476
- if: { danger: true, pressed: true, priority: 'high' },
477
- tokens: { backgroundColor: '#595959', color: '#c9c8c8' }
478
- },
479
- {
480
- if: { hover: true, inverse: true, priority: 'high' },
481
- tokens: { backgroundColor: '#e6e6e6', color: '#016b6a' }
465
+ if: { inverse: true, pressed: true },
466
+ tokens: { backgroundColor: '#c9c8c8', color: '#666666' }
482
467
  },
483
468
  {
484
- if: { focus: true, inverse: true, priority: 'high' },
469
+ if: { focus: true, inverse: true },
485
470
  tokens: {
486
- backgroundColor: '#ffffff',
487
- borderColor: '#ffffff',
488
- color: '#016b6a',
471
+ borderBottomWidth: 1,
472
+ borderColor: 'rgba(0, 0, 0, 0)',
473
+ borderLeftWidth: 1,
474
+ borderRightWidth: 1,
475
+ borderTopWidth: 1,
476
+ color: '#000000',
489
477
  outerBorderColor: '#ffffff',
490
478
  outerBorderGap: 2
491
479
  }
492
480
  },
493
481
  {
494
- if: { danger: true, focus: true, pressed: true },
482
+ if: { danger: true, inverse: true },
495
483
  tokens: {
496
- backgroundColor: '#595959',
484
+ backgroundColor: '#ffffff',
485
+ borderBottomWidth: 0,
497
486
  borderColor: 'rgba(0, 0, 0, 0)',
498
- color: '#c9c8c8',
499
- outerBorderGap: 2
487
+ borderLeftWidth: 0,
488
+ borderRightWidth: 0,
489
+ borderTopWidth: 0,
490
+ color: '#c9370b'
500
491
  }
501
492
  },
502
493
  {
@@ -523,83 +514,46 @@ module.exports = {
523
514
  paddingTop: 4
524
515
  }
525
516
  },
526
- {
527
- 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.',
528
- if: { inactive: true },
529
- tokens: {
530
- backgroundColor: '#c9c8c8',
531
- borderColor: '#c9c8c8',
532
- borderWidth: 0,
533
- color: '#efefef'
534
- }
535
- },
536
517
  {
537
518
  if: { text: true },
538
519
  tokens: {
539
520
  backgroundColor: 'rgba(0, 0, 0, 0)',
540
521
  borderColor: 'rgba(0, 0, 0, 0)',
541
522
  borderWidth: 0,
542
- color: '#17367d',
523
+ color: '#000000',
543
524
  minWidth: 0,
544
525
  paddingLeft: 0,
545
526
  paddingRight: 0,
546
527
  textLine: 'underline'
547
528
  }
548
529
  },
549
- {
550
- if: { hover: true, text: true },
551
- tokens: { color: '#052158', textLine: 'none' }
552
- },
553
- {
554
- if: { priority: 'high', text: true },
555
- tokens: { color: '#016b6a' }
556
- },
557
- {
558
- if: { danger: true, text: true },
559
- tokens: { color: '#df3d0c' }
560
- },
561
530
  {
562
531
  if: { focus: true, text: true },
563
532
  tokens: {
564
533
  borderColor: 'rgba(0, 0, 0, 0)',
565
- borderRadius: 0,
566
- color: '#17367d',
567
- outerBorderColor: '#17367d'
534
+ color: '#000000',
535
+ outerBorderColor: '#000000'
568
536
  }
569
537
  },
570
538
  {
571
- if: { focus: true, priority: 'high', text: true },
572
- tokens: {
573
- borderColor: 'rgba(0, 0, 0, 0)',
574
- borderRadius: 0,
575
- color: '#016b6a',
576
- outerBorderColor: '#016b6a'
577
- }
539
+ if: { hover: true, text: true },
540
+ tokens: { color: '#404040', textLine: 'none' }
541
+ },
542
+ {
543
+ if: { danger: true, text: true },
544
+ tokens: { color: '#c9370b' }
578
545
  },
579
546
  {
580
547
  if: { danger: true, focus: true, text: true },
581
548
  tokens: {
582
549
  borderColor: 'rgba(0, 0, 0, 0)',
583
- borderRadius: 0,
584
- color: '#df3d0c',
585
- outerBorderColor: '#df3d0c'
550
+ color: '#c9370b',
551
+ outerBorderColor: '#c9370b'
586
552
  }
587
553
  },
588
554
  {
589
- if: { hover: true, priority: 'high', text: true },
590
- tokens: { color: '#1b4746' }
591
- },
592
- {
593
- if: { hover: true, priority: null, text: true },
594
- tokens: { color: '#052158' }
595
- },
596
- {
597
- if: { hover: true, priority: 'low', text: true },
598
- tokens: { color: '#052158' }
599
- },
600
- {
601
- if: { danger: true, hover: true, text: true },
602
- tokens: { color: '#c9370b' }
555
+ if: { hover: true, priority: 'low' },
556
+ tokens: { borderColor: 'rgba(0, 0, 0, 0)', borderWidth: 0 }
603
557
  },
604
558
  {
605
559
  if: { pressed: true, text: true },
@@ -610,38 +564,32 @@ module.exports = {
610
564
  }
611
565
  },
612
566
  {
613
- if: { focus: true, pressed: true, text: true },
614
- tokens: {
615
- borderColor: 'rgba(0, 0, 0, 0)',
616
- color: '#595959',
617
- outerBorderColor: '#17367d',
618
- textLine: 'none'
619
- }
567
+ if: { danger: true, hover: true },
568
+ tokens: { backgroundColor: '#f3592b', color: '#ffffff' }
620
569
  },
621
570
  {
622
- if: { focus: true, pressed: true, priority: 'high', text: true },
571
+ if: { danger: true, hover: true, text: true },
623
572
  tokens: {
624
- borderColor: 'rgba(0, 0, 0, 0)',
625
- color: '#595959',
626
- outerBorderColor: '#595959',
627
- textLine: 'none'
573
+ backgroundColor: 'rgba(0, 0, 0, 0)',
574
+ color: '#f3592b',
575
+ outerBorderColor: 'rgba(0, 0, 0, 0)'
628
576
  }
629
577
  },
630
578
  {
631
- if: { danger: true, focus: true, pressed: true, text: true },
579
+ if: { danger: true, pressed: true },
632
580
  tokens: {
581
+ backgroundColor: '#404040',
633
582
  borderColor: 'rgba(0, 0, 0, 0)',
634
- color: '#595959',
635
- outerBorderColor: '#df3d0c',
636
- textLine: 'none'
583
+ color: '#666666',
584
+ outerBorderGap: 0
637
585
  }
638
586
  },
639
587
  {
640
- if: { inactive: true, text: true },
588
+ if: { danger: true, pressed: true, text: true },
641
589
  tokens: {
590
+ backgroundColor: 'rgba(0, 0, 0, 0)',
642
591
  borderColor: 'rgba(0, 0, 0, 0)',
643
- color: '#c9c8c8',
644
- outerBorderColor: 'rgba(0, 0, 0, 0)',
592
+ color: '#666666',
645
593
  textLine: 'none'
646
594
  }
647
595
  },
@@ -649,10 +597,6 @@ module.exports = {
649
597
  if: { inverse: true, text: true },
650
598
  tokens: { backgroundColor: 'rgba(0, 0, 0, 0)', color: '#ffffff' }
651
599
  },
652
- {
653
- if: { hover: true, inverse: true, text: true },
654
- tokens: { color: '#c9c8c8' }
655
- },
656
600
  {
657
601
  if: { focus: true, inverse: true, text: true },
658
602
  tokens: {
@@ -662,7 +606,11 @@ module.exports = {
662
606
  }
663
607
  },
664
608
  {
665
- 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 },
666
614
  tokens: {
667
615
  borderColor: 'rgba(0, 0, 0, 0)',
668
616
  color: '#666666',
@@ -672,18 +620,71 @@ module.exports = {
672
620
  {
673
621
  if: { inactive: true, inverse: true, text: true },
674
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
+ }
675
676
  }
676
677
  ],
677
678
  tokens: {
678
- backgroundColor: '#ffffff',
679
- borderBottomWidth: 1,
680
- borderColor: '#016b6a',
679
+ backgroundColor: '#000000',
680
+ borderBottomWidth: 0,
681
+ borderColor: 'rgba(0, 0, 0, 0)',
681
682
  borderLeftWidth: 1,
682
683
  borderRadius: 4,
683
684
  borderRightWidth: 1,
684
685
  borderTopWidth: 1,
685
686
  borderWidth: 1,
686
- color: '#016b6a',
687
+ color: '#ffffff',
687
688
  fontName: 'StagSans',
688
689
  fontSize: 16,
689
690
  fontWeight: '600',
@@ -694,7 +695,7 @@ module.exports = {
694
695
  lineHeight: 1.5,
695
696
  minWidth: 144,
696
697
  opacity: 1,
697
- outerBackgroundColor: '#ffffff',
698
+ outerBackgroundColor: 'rgba(0, 0, 0, 0)',
698
699
  outerBorderColor: 'rgba(0, 0, 0, 0)',
699
700
  outerBorderGap: null,
700
701
  outerBorderWidth: 1,
@@ -751,38 +752,44 @@ module.exports = {
751
752
  },
752
753
  {
753
754
  if: { focus: true },
754
- tokens: { outerBorderColor: '#016b6a' }
755
+ tokens: { outerBorderColor: '#000000' }
755
756
  },
756
757
  {
757
758
  if: { pressed: true },
758
759
  tokens: {
759
- backgroundColor: '#1b4746',
760
- borderColor: '#1b4746',
761
- color: '#ffffff'
760
+ backgroundColor: '#404040',
761
+ borderColor: '#404040',
762
+ color: '#666666',
763
+ iconColor: '#666666'
762
764
  }
763
765
  },
764
766
  {
765
- if: { hover: true },
767
+ if: { focus: false, hover: true, pressed: false },
766
768
  tokens: {
767
- backgroundColor: '#1b4746',
768
- borderColor: 'rgba(0, 0, 0, 0)',
769
- color: '#ffffff',
770
- 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)'
771
778
  }
772
779
  },
773
780
  {
774
781
  if: { inactive: true },
775
782
  tokens: {
776
- backgroundColor: '#efefef',
777
- borderColor: '#efefef',
778
- color: '#c9c8c8',
779
- iconColor: '#c9c8c8'
783
+ backgroundColor: '#c9c8c8',
784
+ borderColor: '#c9c8c8',
785
+ color: '#ffffff',
786
+ iconColor: '#ffffff'
780
787
  }
781
788
  },
782
789
  {
783
790
  if: { selected: true },
784
791
  tokens: {
785
- backgroundColor: '#016b6a',
792
+ backgroundColor: '#000000',
786
793
  color: '#ffffff',
787
794
  iconColor: '#ffffff',
788
795
  outerBorderColor: 'transparent'
@@ -790,16 +797,13 @@ module.exports = {
790
797
  },
791
798
  {
792
799
  if: { hover: true, selected: true },
793
- tokens: {
794
- backgroundColor: '#1b4746',
795
- outerBorderColor: 'rgba(0, 0, 0, 0)'
796
- }
800
+ tokens: { backgroundColor: '#404040' }
797
801
  },
798
802
  {
799
- if: { focus: true, selected: true },
803
+ if: { focus: true, hover: false, selected: true },
800
804
  tokens: {
801
- backgroundColor: '#016b6a',
802
- outerBorderColor: '#016b6a',
805
+ backgroundColor: '#000000',
806
+ outerBorderColor: '#000000',
803
807
  outerBorderGap: 2,
804
808
  outerBorderWidth: 1
805
809
  }
@@ -807,23 +811,25 @@ module.exports = {
807
811
  {
808
812
  if: { hover: true, pressed: true, selected: true },
809
813
  tokens: {
810
- backgroundColor: '#1b4746',
811
- borderColor: 'rgba(0, 0, 0, 0)'
814
+ backgroundColor: '#404040',
815
+ borderColor: 'rgba(0, 0, 0, 0)',
816
+ color: '#666666',
817
+ iconColor: '#666666'
812
818
  }
813
819
  },
814
820
  {
815
821
  if: { focus: true, pressed: true, selected: true },
816
- tokens: { backgroundColor: '#1b4746', outerBorderColor: '#1b4746' }
822
+ tokens: { backgroundColor: '#404040', outerBorderColor: '#404040' }
817
823
  }
818
824
  ],
819
825
  tokens: {
820
826
  alignSelf: 'flex-start',
821
827
  backgroundColor: '#ffffff',
822
- borderColor: '#016b6a',
828
+ borderColor: '#000000',
823
829
  borderRadius: 4,
824
830
  borderWidth: 1,
825
- color: '#016b6a',
826
- dividerColor: '#016b6a',
831
+ color: '#000000',
832
+ dividerColor: '#000000',
827
833
  fontName: 'StagSans',
828
834
  fontSize: 14,
829
835
  fontWeight: '600',
@@ -831,7 +837,7 @@ module.exports = {
831
837
  iconAlignSelf: 'center',
832
838
  iconBackground: 'rgba(0, 0, 0, 0)',
833
839
  iconBorderRadius: 32,
834
- iconColor: '#016b6a',
840
+ iconColor: '#000000',
835
841
  iconPadding: 4,
836
842
  iconPosition: 'right',
837
843
  iconSize: 20,
@@ -850,7 +856,7 @@ module.exports = {
850
856
  paddingRight: 16,
851
857
  paddingTop: 8,
852
858
  shadow: null,
853
- subtitleColor: '#1b4746',
859
+ subtitleColor: '#000000',
854
860
  textAlign: 'center',
855
861
  width: null
856
862
  }
@@ -930,29 +936,41 @@ module.exports = {
930
936
  }
931
937
  },
932
938
  rules: [
933
- {
934
- if: { pressed: true },
935
- tokens: { backgroundColor: '#1b4746', color: '#ffffff' }
936
- },
937
939
  {
938
940
  if: { focus: true },
939
- tokens: { outerBorderColor: '#016b6a' }
941
+ tokens: { outerBorderColor: '#000000' }
940
942
  },
941
943
  {
942
944
  if: { hover: true },
943
- tokens: { backgroundColor: '#1b4746', color: '#ffffff' }
945
+ tokens: {
946
+ backgroundColor: '#404040',
947
+ borderColor: '#404040',
948
+ color: '#ffffff'
949
+ }
944
950
  },
945
951
  {
946
952
  if: { selected: true },
947
- 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
+ }
948
966
  },
949
967
  {
950
968
  if: { hover: true, selected: true },
951
- tokens: { backgroundColor: '#1b4746', color: '#ffffff' }
969
+ tokens: { backgroundColor: '#5b2bc2', color: '#ffffff' }
952
970
  },
953
971
  {
954
972
  if: { pressed: true, selected: true },
955
- tokens: { backgroundColor: '#1b4746', color: '#ffffff' }
973
+ tokens: { backgroundColor: '#404040', color: '#666666' }
956
974
  },
957
975
  {
958
976
  if: { inactive: true },
@@ -968,10 +986,10 @@ module.exports = {
968
986
  tokens: {
969
987
  alignSelf: 'flex-start',
970
988
  backgroundColor: '#ffffff',
971
- borderColor: '#016b6a',
989
+ borderColor: '#000000',
972
990
  borderRadius: 4,
973
991
  borderWidth: 1,
974
- color: '#016b6a',
992
+ color: '#000000',
975
993
  fontName: 'StagSans',
976
994
  fontSize: 16,
977
995
  fontWeight: '600',
@@ -1007,9 +1025,9 @@ module.exports = {
1007
1025
  { if: { rounded: true }, tokens: { borderRadius: 4 } }
1008
1026
  ],
1009
1027
  tokens: {
1010
- background: '#fae6f4',
1028
+ background: '#7a3dfc',
1011
1029
  borderRadius: 0,
1012
- color: '#7c1366',
1030
+ color: '#ffffff',
1013
1031
  gap: 16,
1014
1032
  paddingBottom: 8,
1015
1033
  paddingLeft: 16,
@@ -1042,24 +1060,24 @@ module.exports = {
1042
1060
  {
1043
1061
  if: { background: 'alternative' },
1044
1062
  tokens: {
1045
- backgroundColor: '#e5f7fb',
1046
- borderRadius: 0,
1063
+ backgroundColor: '#e0d8fc',
1064
+ borderRadius: 8,
1047
1065
  borderWidth: 0
1048
1066
  }
1049
1067
  },
1050
1068
  {
1051
1069
  if: { background: 'subtle' },
1052
- tokens: { backgroundColor: '#fae6f4', borderWidth: 0 }
1070
+ tokens: { backgroundColor: '#a1ed00', borderWidth: 0 }
1053
1071
  },
1054
1072
  {
1055
1073
  if: { background: 'grid' },
1056
- tokens: { borderColor: '#016b6a', borderWidth: 1 }
1074
+ tokens: { borderColor: '#000000', borderWidth: 1 }
1057
1075
  },
1058
1076
  {
1059
1077
  if: { background: 'feature' },
1060
1078
  tokens: {
1061
- backgroundColor: '#f9f6a5',
1062
- borderRadius: 0,
1079
+ backgroundColor: '#ffad00',
1080
+ borderRadius: 8,
1063
1081
  borderWidth: 0
1064
1082
  }
1065
1083
  },
@@ -1207,25 +1225,25 @@ module.exports = {
1207
1225
  {
1208
1226
  if: { hover: true },
1209
1227
  tokens: {
1210
- borderBottomColor: '#016b6a',
1228
+ borderBottomColor: '#404040',
1211
1229
  borderBottomWidth: 2,
1212
- color: '#016b6a'
1230
+ color: '#404040'
1213
1231
  }
1214
1232
  },
1215
1233
  {
1216
1234
  if: { focus: true },
1217
1235
  tokens: {
1218
- borderBottomColor: '#016b6a',
1236
+ borderBottomColor: '#000000',
1219
1237
  borderBottomWidth: 4,
1220
- color: '#016b6a'
1238
+ color: '#000000'
1221
1239
  }
1222
1240
  },
1223
1241
  {
1224
1242
  if: { pressed: true },
1225
1243
  tokens: {
1226
- borderBottomColor: '#1b4746',
1244
+ borderBottomColor: '#666666',
1227
1245
  borderBottomWidth: 2,
1228
- color: '#1b4746'
1246
+ color: '#666666'
1229
1247
  }
1230
1248
  },
1231
1249
  {
@@ -1243,36 +1261,36 @@ module.exports = {
1243
1261
  {
1244
1262
  if: { selected: true },
1245
1263
  tokens: {
1246
- borderBottomColor: '#016b6a',
1264
+ borderBottomColor: '#000000',
1247
1265
  borderBottomWidth: 2,
1248
- color: '#016b6a'
1266
+ color: '#000000'
1249
1267
  }
1250
1268
  },
1251
1269
  {
1252
1270
  if: { hover: true, inverse: true },
1253
1271
  tokens: {
1254
- borderBottomColor: '#bbeaf5',
1272
+ borderBottomColor: '#ffffff',
1255
1273
  borderBottomWidth: 2,
1256
- color: '#bbeaf5'
1274
+ color: '#ffffff'
1257
1275
  }
1258
1276
  },
1259
1277
  {
1260
1278
  if: { focus: true, inverse: true },
1261
1279
  tokens: {
1262
- borderBottomColor: '#016b6a',
1280
+ borderBottomColor: '#ffffff',
1263
1281
  borderBottomWidth: 4,
1264
- color: '#016b6a'
1282
+ color: '#ffffff'
1265
1283
  }
1266
1284
  },
1267
1285
  {
1268
1286
  if: { inverse: true, pressed: true },
1269
1287
  tokens: {
1270
- borderBottomColor: '#1b4746',
1288
+ borderBottomColor: '#666666',
1271
1289
  borderBottomWidth: 2,
1272
- color: '#1b4746'
1290
+ color: '#666666'
1273
1291
  }
1274
1292
  },
1275
- { if: { inverse: true }, tokens: { color: '#e5f7fb' } },
1293
+ { if: { inverse: true }, tokens: { color: '#ffffff' } },
1276
1294
  {
1277
1295
  if: { focus: true, inverse: true, pressed: true },
1278
1296
  tokens: { borderBottomWidth: 4 }
@@ -1344,10 +1362,10 @@ module.exports = {
1344
1362
  if: { viewport: [ 'xs', 'sm' ] },
1345
1363
  tokens: { alignItems: 'flex-start', size: 48 }
1346
1364
  },
1347
- { if: { hover: true }, tokens: { borderColor: '#1b4746' } },
1365
+ { if: { hover: true }, tokens: { borderColor: '#404040' } },
1348
1366
  {
1349
1367
  if: { focus: true },
1350
- tokens: { borderColor: '#016b6a', borderWidth: 2 }
1368
+ tokens: { borderColor: '#000000', borderWidth: 2 }
1351
1369
  },
1352
1370
  {
1353
1371
  if: { pressed: true },
@@ -1362,7 +1380,7 @@ module.exports = {
1362
1380
  containerPaddingTop: 24,
1363
1381
  margin: 4,
1364
1382
  padding: 8,
1365
- selectedBorderColor: '#016b6a',
1383
+ selectedBorderColor: '#000000',
1366
1384
  selectedBorderWidth: 2,
1367
1385
  size: 72
1368
1386
  }
@@ -1396,17 +1414,18 @@ module.exports = {
1396
1414
  rules: [
1397
1415
  {
1398
1416
  if: { focus: true },
1399
- tokens: { inputOutlineColor: '#17367d', inputOutlineWidth: 1 }
1417
+ tokens: { inputOutlineColor: '#000000', inputOutlineWidth: 1 }
1400
1418
  },
1401
1419
  {
1402
1420
  if: { hover: true },
1403
- tokens: { inputOutlineColor: '#17367d', inputOutlineWidth: 1 }
1421
+ tokens: { inputOutlineColor: '#000000', inputOutlineWidth: 1 }
1404
1422
  },
1405
1423
  {
1406
1424
  if: { inactive: true },
1407
1425
  tokens: {
1408
1426
  inputBackgroundColor: '#c9c8c8',
1409
- inputBorderColor: 'rgba(0, 0, 0, 0)'
1427
+ inputBorderColor: 'rgba(0, 0, 0, 0)',
1428
+ labelColor: '#666666'
1410
1429
  }
1411
1430
  },
1412
1431
  {
@@ -1417,19 +1436,19 @@ module.exports = {
1417
1436
  tokens: {
1418
1437
  containerBackgroundColor: 'rgba(0, 0, 0, 0)',
1419
1438
  feedbackMarginBottom: 0,
1420
- feedbackMarginTop: 0,
1439
+ feedbackMarginTop: 12,
1421
1440
  feedbackPosition: 'bottom',
1422
1441
  icon: PaletteIconCheck,
1423
1442
  iconBackgroundColor: '#ffffff',
1424
- iconColor: '#016b6a',
1425
- iconSize: 20,
1443
+ iconColor: '#7a3dfc',
1444
+ iconSize: 14,
1426
1445
  inputBackgroundColor: '#ffffff',
1427
- inputBorderColor: '#016b6a',
1446
+ inputBorderColor: '#000000',
1428
1447
  inputBorderRadius: 0,
1429
1448
  inputBorderWidth: 2,
1430
1449
  inputHeight: 20,
1431
1450
  inputOutlineColor: null,
1432
- inputOutlineOffset: 0,
1451
+ inputOutlineOffset: 1,
1433
1452
  inputOutlineWidth: 0,
1434
1453
  inputShadow: null,
1435
1454
  inputWidth: 20,
@@ -1493,39 +1512,42 @@ module.exports = {
1493
1512
  if: { hover: true },
1494
1513
  tokens: {
1495
1514
  borderColor: '#666666',
1496
- checkboxOuterBorderColor: '#17367d',
1515
+ checkboxOuterBorderColor: '#000000',
1497
1516
  checkboxOuterBorderGap: 2,
1498
1517
  checkboxOuterBorderWidth: 1,
1499
- outerBorderColor: '#efefef',
1518
+ outerBorderColor: '#c9c8c8',
1500
1519
  outerBorderWidth: 2
1501
1520
  }
1502
1521
  },
1522
+ {
1523
+ if: { checked: true },
1524
+ tokens: {
1525
+ borderColor: '#c9c8c8',
1526
+ checkboxCheckedBackgroundColor: '#7a3dfc',
1527
+ checkboxInputBorderColor: '#000000',
1528
+ checkboxInputBorderWidth: 2
1529
+ }
1530
+ },
1503
1531
  {
1504
1532
  if: { focus: true },
1505
1533
  tokens: {
1506
- checkboxInputBorderColor: '#016b6a',
1507
- checkboxOuterBorderColor: '#17367d',
1534
+ borderColor: '#666666',
1535
+ checkboxInputBorderColor: '#000000',
1536
+ checkboxOuterBorderColor: '#000000',
1508
1537
  checkboxOuterBorderGap: 2,
1509
1538
  checkboxOuterBorderWidth: 1,
1510
- outerBorderColor: '#17367d',
1539
+ outerBorderColor: '#000000',
1511
1540
  outerBorderGap: 2,
1512
1541
  outerBorderWidth: 2
1513
1542
  }
1514
1543
  },
1515
- {
1516
- if: { checked: true },
1517
- tokens: {
1518
- borderColor: '#c9c8c8',
1519
- checkboxInputBorderColor: '#016b6a',
1520
- checkboxInputBorderWidth: 2
1521
- }
1522
- },
1523
1544
  {
1524
1545
  description: 'Pressed state matches hover state plus light grey background',
1525
1546
  if: { pressed: true },
1526
1547
  tokens: {
1527
1548
  backgroundColor: '#efefef',
1528
- checkboxOuterBorderColor: '#17367d',
1549
+ borderColor: '#666666',
1550
+ checkboxOuterBorderColor: '#000000',
1529
1551
  checkboxOuterBorderGap: 2,
1530
1552
  outerBorderColor: '#c9c8c8',
1531
1553
  outerBorderGap: 0,
@@ -1561,10 +1583,10 @@ module.exports = {
1561
1583
  borderColor: '#c9c8c8',
1562
1584
  borderRadius: 4,
1563
1585
  borderWidth: 1,
1564
- checkboxCheckedBackgroundColor: '#016b6a',
1586
+ checkboxCheckedBackgroundColor: '#000000',
1565
1587
  checkboxCheckedSize: 16,
1566
1588
  checkboxInputBackgroundColor: '#ffffff',
1567
- checkboxInputBorderColor: '#016b6a',
1589
+ checkboxInputBorderColor: '#000000',
1568
1590
  checkboxInputBorderWidth: 2,
1569
1591
  checkboxInputOutlineColor: 'rgba(0, 0, 0, 0)',
1570
1592
  checkboxInputOutlineWidth: 0,
@@ -1678,38 +1700,38 @@ module.exports = {
1678
1700
  rules: [
1679
1701
  {
1680
1702
  if: { hover: true },
1681
- tokens: { color: '#1b4746', iconDisplace: 4 }
1703
+ tokens: { color: '#404040', iconDisplace: 4 }
1682
1704
  },
1683
- { if: { pressed: true }, tokens: { color: '#595959' } },
1705
+ { if: { pressed: true }, tokens: { color: '#666666' } },
1684
1706
  {
1685
1707
  if: { focus: true },
1686
- tokens: { color: '#016b6a', outerBorderColor: '#016b6a' }
1708
+ tokens: { color: '#000000', outerBorderColor: '#000000' }
1687
1709
  },
1688
1710
  {
1689
1711
  if: { focus: true, pressed: true },
1690
- tokens: { color: '#1b4746', outerBorderColor: '#1b4746' }
1712
+ tokens: { color: '#666666', outerBorderColor: '#666666' }
1691
1713
  },
1692
- { if: { alternative: true }, tokens: { color: '#000000' } },
1714
+ { if: { alternative: true }, tokens: { color: '#7a3dfc' } },
1693
1715
  {
1694
1716
  if: { alternative: true, hover: true },
1695
- tokens: { color: '#5c5c5c' }
1717
+ tokens: { color: '#5b2bc2' }
1696
1718
  },
1697
1719
  {
1698
1720
  if: { alternative: true, pressed: true },
1699
- tokens: { color: '#595959' }
1721
+ tokens: { color: '#666666' }
1700
1722
  },
1701
1723
  {
1702
1724
  if: { alternative: true, focus: true },
1703
- tokens: { color: '#000000', outerBorderColor: '#000000' }
1725
+ tokens: { color: '#7a3dfc', outerBorderColor: '#7a3dfc' }
1704
1726
  },
1705
1727
  {
1706
1728
  if: { alternative: true, focus: true, pressed: true },
1707
- tokens: { color: '#505050', outerBorderColor: '#505050' }
1729
+ tokens: { color: '#666666', outerBorderColor: '#666666' }
1708
1730
  },
1709
- { if: { inverse: true }, tokens: { color: '#e5f7fb' } },
1731
+ { if: { inverse: true }, tokens: { color: '#ffffff' } },
1710
1732
  {
1711
1733
  if: { hover: true, inverse: true },
1712
- tokens: { color: '#bbeaf5' }
1734
+ tokens: { color: '#efefef' }
1713
1735
  },
1714
1736
  {
1715
1737
  if: { inverse: true, pressed: true },
@@ -1717,11 +1739,11 @@ module.exports = {
1717
1739
  },
1718
1740
  {
1719
1741
  if: { focus: true, inverse: true },
1720
- tokens: { color: '#e5f7fb', outerBorderColor: '#e5f7fb' }
1742
+ tokens: { color: '#ffffff', outerBorderColor: '#ffffff' }
1721
1743
  },
1722
1744
  {
1723
1745
  if: { focus: true, inverse: true, pressed: true },
1724
- tokens: { color: '#bbeaf5', outerBorderColor: '#bbeaf5' }
1746
+ tokens: { color: '#c9c8c8', outerBorderColor: '#c9c8c8' }
1725
1747
  },
1726
1748
  {
1727
1749
  if: { size: 'large' },
@@ -1737,7 +1759,7 @@ module.exports = {
1737
1759
  }
1738
1760
  ],
1739
1761
  tokens: {
1740
- color: '#016b6a',
1762
+ color: '#000000',
1741
1763
  fontSize: 16,
1742
1764
  iconDisplace: 0,
1743
1765
  iconSize: 24,
@@ -1766,16 +1788,16 @@ module.exports = {
1766
1788
  tokens: {
1767
1789
  containerPaddingBottomTop: 16,
1768
1790
  containerPaddingLeftRight: 24,
1769
- labelFontSize: 14,
1770
- labelLineHeight: 1.42857142857,
1771
- textLineHeight: 1.14285714286
1791
+ labelFontSize: 16,
1792
+ labelLineHeight: 1.5,
1793
+ textLineHeight: 1.5
1772
1794
  }
1773
1795
  },
1774
1796
  {
1775
1797
  if: { feature: true },
1776
1798
  tokens: {
1777
- containerBorderColor: '#016b6a',
1778
- labelBorderColor: '#016b6a',
1799
+ containerBorderColor: '#000000',
1800
+ labelBorderColor: '#000000',
1779
1801
  textFontSize: 70,
1780
1802
  textLineHeight: 1.2,
1781
1803
  textTimerFontName: 'StagSans',
@@ -1796,7 +1818,7 @@ module.exports = {
1796
1818
  },
1797
1819
  {
1798
1820
  if: { large: true, viewport: [ 'xs' ] },
1799
- tokens: { textFontSize: 44 }
1821
+ tokens: { textFontSize: 44, textLineHeight: 1.22222222222 }
1800
1822
  },
1801
1823
  {
1802
1824
  if: { feature: true, viewport: [ 'xs' ] },
@@ -1826,14 +1848,30 @@ module.exports = {
1826
1848
  labelFontWeight: '400',
1827
1849
  labelLineHeight: 1.5,
1828
1850
  textFontSize: 16,
1829
- textLineHeight: 1.14285714286,
1851
+ textLineHeight: 1.5,
1830
1852
  textTimerFontName: 'StagSans',
1831
1853
  textTimerFontWeight: '400'
1832
1854
  }
1833
1855
  },
1834
1856
  DatePicker: {
1835
- appearances: {},
1836
- 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
+ ],
1837
1875
  tokens: {
1838
1876
  calendarBackgroundColor: '#ffffff',
1839
1877
  calendarDayBlockedCalendarHoverBackground: '#efefef',
@@ -1842,7 +1880,7 @@ module.exports = {
1842
1880
  calendarDayDefaultBorder: 1,
1843
1881
  calendarDayDefaultBorderColor: '#c9c8c8',
1844
1882
  calendarDayDefaultCalendarDaySelectedHoverBackground: '#ffffff',
1845
- calendarDayDefaultCalendarDaySelectedHoverBeforeBackground: '#016b6a',
1883
+ calendarDayDefaultCalendarDaySelectedHoverBeforeBackground: '#7a3dfc',
1846
1884
  calendarDayDefaultCalendarDaySelectedHoverColor: '#ffffff',
1847
1885
  calendarDayDefaultColor: '#000000',
1848
1886
  calendarDayDefaultFontName: 'StagSans',
@@ -1854,7 +1892,7 @@ module.exports = {
1854
1892
  calendarDaySelectedFocusBeforeBackground: '#ffffff',
1855
1893
  calendarDaySelectedHoverBackground: '#ffffff',
1856
1894
  calendarDaySelectedHoverBeforeBackground: '#ffffff',
1857
- calendarDaySelectedHoverBeforeBorderColor: '#016b6a',
1895
+ calendarDaySelectedHoverBeforeBorderColor: '#7a3dfc',
1858
1896
  calendarDaySelectedHoverBorderColor: '#c9c8c8',
1859
1897
  calendarDaySelectedHoverColor: '#000000',
1860
1898
  calendarMonthCaptionColor: '#000000',
@@ -1905,10 +1943,10 @@ module.exports = {
1905
1943
  },
1906
1944
  rules: [
1907
1945
  { if: { weight: 'thick' }, tokens: { width: 2 } },
1908
- { if: { decorative: true }, tokens: { color: '#016b6a' } },
1946
+ { if: { decorative: true }, tokens: { color: '#000000' } },
1909
1947
  {
1910
1948
  if: { decorative: true, weight: 'thick' },
1911
- tokens: { color: '#016b6a', width: 2 }
1949
+ tokens: { color: '#000000', width: 2 }
1912
1950
  },
1913
1951
  { if: { inverse: true }, tokens: { color: '#ffffff' } },
1914
1952
  {
@@ -2011,7 +2049,7 @@ module.exports = {
2011
2049
  if: { expanded: true },
2012
2050
  tokens: { icon: PaletteIconChevronUp }
2013
2051
  },
2014
- { if: { alternative: true }, tokens: { color: '#000000' } },
2052
+ { if: { alternative: true }, tokens: { color: '#666666' } },
2015
2053
  {
2016
2054
  if: { inverse: true },
2017
2055
  tokens: { color: '#ffffff', iconColor: '#ffffff' }
@@ -2022,26 +2060,26 @@ module.exports = {
2022
2060
  },
2023
2061
  {
2024
2062
  if: { size: 'small' },
2025
- tokens: { fontSize: 14, iconSize: 20, lineHeight: 1.45 }
2063
+ tokens: { fontSize: 14, iconSize: 16, lineHeight: 1.42857142857 }
2026
2064
  },
2027
2065
  {
2028
2066
  if: { size: 'large' },
2029
- tokens: { fontSize: 20, lineHeight: 1.45 }
2067
+ tokens: { fontSize: 20, lineHeight: 1.4 }
2030
2068
  }
2031
2069
  ],
2032
2070
  tokens: {
2033
2071
  borderColor: 'rgba(0, 0, 0, 0)',
2034
2072
  borderWidth: 0,
2035
- color: '#016b6a',
2073
+ color: '#000000',
2036
2074
  fontSize: 16,
2037
2075
  icon: PaletteIconChevronDown,
2038
2076
  iconColor: '#000000',
2039
2077
  iconGap: 8,
2040
2078
  iconPaddingTop: 4,
2041
2079
  iconPosition: 'left',
2042
- iconSize: 24,
2080
+ iconSize: 16,
2043
2081
  justifyContent: 'flex-start',
2044
- lineHeight: 1.45,
2082
+ lineHeight: 1.5,
2045
2083
  paddingBottom: 0,
2046
2084
  paddingLeft: 0,
2047
2085
  paddingRight: 0,
@@ -2065,7 +2103,8 @@ module.exports = {
2065
2103
  contentPaddingBottom: 0,
2066
2104
  contentPaddingLeft: 0,
2067
2105
  contentPaddingRight: 0,
2068
- contentPaddingTop: 0
2106
+ contentPaddingTop: 0,
2107
+ contentPanelBackgroundColor: '#000000'
2069
2108
  }
2070
2109
  }
2071
2110
  ],
@@ -2108,22 +2147,31 @@ module.exports = {
2108
2147
  rules: [
2109
2148
  {
2110
2149
  if: { validation: 'error' },
2111
- tokens: { backgroundColor: '#f8dde3' }
2150
+ tokens: { backgroundColor: '#fcd3c6' }
2151
+ },
2152
+ {
2153
+ if: { validation: 'success' },
2154
+ tokens: { backgroundColor: '#c5f2cc' }
2112
2155
  },
2113
2156
  {
2114
2157
  if: { icon: true, validation: 'success' },
2115
2158
  tokens: {
2116
- icon: PaletteIconCheckCircledFilled,
2117
- iconColor: '#016b6a'
2159
+ backgroundColor: '#c5f2cc',
2160
+ icon: PaletteIconCheckCircleFilled,
2161
+ iconColor: '#1c7b2b'
2118
2162
  }
2119
2163
  },
2120
2164
  {
2121
2165
  if: { icon: true, validation: 'error' },
2122
- tokens: { icon: PaletteIconCaution, iconColor: '#ee2c74' }
2166
+ tokens: {
2167
+ backgroundColor: '#fcd3c6',
2168
+ icon: PaletteIconCaution,
2169
+ iconColor: '#c9370b'
2170
+ }
2123
2171
  }
2124
2172
  ],
2125
2173
  tokens: {
2126
- backgroundColor: '#e5f7fb',
2174
+ backgroundColor: '#efefef',
2127
2175
  borderColor: 'rgba(0, 0, 0, 0)',
2128
2176
  borderRadius: 0,
2129
2177
  borderWidth: 0,
@@ -2184,7 +2232,7 @@ module.exports = {
2184
2232
  }
2185
2233
  },
2186
2234
  {
2187
- if: { viewport: [ 'md', 'lg' ] },
2235
+ if: { viewport: [ 'md', 'lg', 'xl' ] },
2188
2236
  tokens: {
2189
2237
  footnoteBodyPaddingBottom: 40,
2190
2238
  footnoteBodyPaddingLeft: 16,
@@ -2195,19 +2243,6 @@ module.exports = {
2195
2243
  footnoteHeaderPaddingRight: 4,
2196
2244
  footnoteHeaderPaddingTop: 24
2197
2245
  }
2198
- },
2199
- {
2200
- if: { viewport: [ 'xl' ] },
2201
- tokens: {
2202
- footnoteBodyPaddingBottom: 40,
2203
- footnoteBodyPaddingLeft: 16,
2204
- footnoteBodyPaddingRight: 16,
2205
- footnoteBodyPaddingTop: 0,
2206
- footnoteHeaderPaddingBottom: 24,
2207
- footnoteHeaderPaddingLeft: 16,
2208
- footnoteHeaderPaddingRight: 16,
2209
- footnoteHeaderPaddingTop: 24
2210
- }
2211
2246
  }
2212
2247
  ],
2213
2248
  tokens: {
@@ -2241,7 +2276,7 @@ module.exports = {
2241
2276
  headerMargin: 16,
2242
2277
  listItemColor: '#000000',
2243
2278
  listItemFontSize: 14,
2244
- listItemLineHeight: 1.45,
2279
+ listItemLineHeight: 1.42857142857,
2245
2280
  listItemMarkerFontSize: 14,
2246
2281
  listItemMarkerLineHeight: 1.45,
2247
2282
  listItemPaddingLeft: 8,
@@ -2254,7 +2289,7 @@ module.exports = {
2254
2289
  tokens: {
2255
2290
  color: null,
2256
2291
  fontName: 'StagSans',
2257
- fontWeight: '400',
2292
+ fontWeight: '600',
2258
2293
  lineHeight: 1,
2259
2294
  paddingLeft: 2,
2260
2295
  paddingRight: 2
@@ -2284,23 +2319,23 @@ module.exports = {
2284
2319
  {
2285
2320
  if: { hover: true },
2286
2321
  tokens: {
2287
- backgroundColor: '#f9f6a5',
2288
- borderColor: '#1b4746',
2289
- iconColor: '#1b4746'
2322
+ backgroundColor: '#000000',
2323
+ borderColor: '#000000',
2324
+ iconColor: '#ffffff'
2290
2325
  }
2291
2326
  },
2292
2327
  {
2293
2328
  if: { pressed: true },
2294
2329
  tokens: {
2295
- backgroundColor: '#016b6a',
2296
- borderColor: '#016b6a',
2330
+ backgroundColor: '#404040',
2331
+ borderColor: '#404040',
2297
2332
  iconColor: '#ffffff'
2298
2333
  }
2299
2334
  }
2300
2335
  ],
2301
2336
  tokens: {
2302
2337
  backgroundColor: '#ffffff',
2303
- borderColor: '#016b6a',
2338
+ borderColor: '#000000',
2304
2339
  borderRadius: 32,
2305
2340
  borderWidth: 1,
2306
2341
  iconColor: '#000000',
@@ -2341,15 +2376,15 @@ module.exports = {
2341
2376
  { if: { size: 'small' }, tokens: { size: 20 } },
2342
2377
  { if: { size: 'large' }, tokens: { size: 32 } },
2343
2378
  { if: { size: 'extraLarge' }, tokens: { size: 48 } },
2344
- { if: { color: 'brand' }, tokens: { color: '#016b6a' } },
2379
+ { if: { color: 'brand' }, tokens: { color: '#ff0076' } },
2345
2380
  { if: { color: 'subtle' }, tokens: { color: '#666666' } },
2346
- { if: { color: 'offer' }, tokens: { color: '#016b6a' } },
2347
- { if: { color: 'success' }, tokens: { color: '#016b6a' } },
2348
- { if: { color: 'danger' }, tokens: { color: '#ee2c74' } },
2349
- { 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' } },
2350
2385
  { if: { color: 'inverse' }, tokens: { color: '#ffffff' } },
2351
- { if: { status: 'success' }, tokens: { color: '#016b6a' } },
2352
- { if: { status: 'error' }, tokens: { color: '#ee2c74' } }
2386
+ { if: { status: 'success' }, tokens: { color: '#1c7b2b' } },
2387
+ { if: { status: 'error' }, tokens: { color: '#c9370b' } }
2353
2388
  ],
2354
2389
  tokens: {
2355
2390
  color: '#000000',
@@ -2482,82 +2517,56 @@ module.exports = {
2482
2517
  if: { action: 'play' },
2483
2518
  tokens: { icon: PaletteIconPlayVideo }
2484
2519
  },
2485
- { if: { inverse: true }, tokens: { iconColor: '#ffffff' } },
2520
+ {
2521
+ if: { inverse: true },
2522
+ tokens: { borderColor: 'rgba(0, 0, 0, 0)', iconColor: '#ffffff' }
2523
+ },
2486
2524
  {
2487
2525
  if: { hover: true },
2488
2526
  tokens: {
2489
- backgroundColor: '#016b6a',
2527
+ backgroundColor: '#000000',
2490
2528
  iconColor: '#ffffff',
2491
2529
  iconScale: 1.1
2492
2530
  }
2493
2531
  },
2494
- {
2495
- if: { hover: true, inactive: true },
2496
- tokens: { iconScale: 1 }
2497
- },
2498
- {
2499
- if: { hover: true, password: true },
2500
- tokens: {
2501
- backgroundColor: '#016b6a',
2502
- borderColor: '#016b6a',
2503
- iconColor: '#ffffff'
2504
- }
2505
- },
2506
- {
2507
- if: { password: true },
2508
- tokens: { borderColor: 'transparent' }
2509
- },
2510
- {
2511
- if: { focus: true, password: true },
2512
- tokens: {
2513
- borderColor: '#016b6a',
2514
- borderWidth: 3,
2515
- outerBorderWidth: 0
2516
- }
2517
- },
2518
2532
  {
2519
2533
  if: { hover: true, inverse: true },
2520
- tokens: { backgroundColor: '#bbeaf5', iconColor: '#000000' }
2534
+ tokens: { backgroundColor: '#ffffff', iconColor: '#000000' }
2521
2535
  },
2522
2536
  {
2523
2537
  if: { focus: true },
2524
2538
  tokens: {
2525
2539
  backgroundColor: 'transparent',
2540
+ borderColor: '#000000',
2526
2541
  iconColor: '#000000',
2527
- outerBorderColor: '#016b6a',
2528
- outerBorderWidth: 1
2542
+ outerBorderColor: 'rgba(0, 0, 0, 0)'
2529
2543
  }
2530
2544
  },
2531
2545
  {
2532
2546
  if: { focus: true, inverse: true },
2533
2547
  tokens: {
2534
2548
  backgroundColor: 'transparent',
2535
- borderColor: '#e5f7fb',
2536
- iconColor: '#e5f7fb',
2537
- outerBorderColor: '#e5f7fb',
2538
- outerBorderWidth: 1
2549
+ borderColor: '#ffffff',
2550
+ iconColor: '#ffffff',
2551
+ outerBorderColor: 'rgba(0, 0, 0, 0)',
2552
+ outerBorderWidth: 0
2539
2553
  }
2540
2554
  },
2541
2555
  {
2542
- if: { inactive: null, pressed: true },
2543
- tokens: { backgroundColor: 'transparent', iconColor: '#014847' }
2556
+ if: { password: true },
2557
+ tokens: { borderColor: 'transparent' }
2544
2558
  },
2545
2559
  {
2546
- if: { pressed: true },
2560
+ if: { focus: true, password: true },
2547
2561
  tokens: {
2548
- backgroundColor: '#014847',
2549
- iconColor: '#ffffff',
2562
+ borderColor: '#000000',
2563
+ borderWidth: 3,
2550
2564
  outerBorderWidth: 0
2551
2565
  }
2552
2566
  },
2553
2567
  {
2554
- if: { password: true, pressed: true },
2555
- tokens: {
2556
- backgroundColor: '#014847',
2557
- borderColor: '#014847',
2558
- iconColor: '#ffffff',
2559
- outerBorderGap: 4
2560
- }
2568
+ if: { inactive: null, pressed: true },
2569
+ tokens: { backgroundColor: '#404040', iconColor: '#666666' }
2561
2570
  },
2562
2571
  {
2563
2572
  if: { inverse: true, pressed: true },
@@ -2568,6 +2577,15 @@ module.exports = {
2568
2577
  outerBorderWidth: 0
2569
2578
  }
2570
2579
  },
2580
+ {
2581
+ if: { password: true, pressed: true },
2582
+ tokens: {
2583
+ backgroundColor: '#000000',
2584
+ borderColor: '#000000',
2585
+ iconColor: '#000000',
2586
+ outerBorderGap: 0
2587
+ }
2588
+ },
2571
2589
  {
2572
2590
  if: { size: 'large' },
2573
2591
  tokens: { iconSize: 24, padding: 12 }
@@ -2577,17 +2595,10 @@ module.exports = {
2577
2595
  description: 'Raised IconButtons follow different design patterns to other variants',
2578
2596
  if: { raised: true },
2579
2597
  tokens: {
2580
- backgroundColor: '#ffffff',
2581
- borderColor: '#016b6a',
2582
- borderWidth: 1,
2583
- iconSize: 16,
2584
- outerBorderColor: 'transparent',
2585
- outerBorderGap: 0,
2586
- outerBorderWidth: 0,
2587
- padding: 8,
2598
+ borderColor: '#000000',
2588
2599
  shadow: {
2589
2600
  blur: 2,
2590
- color: 'rgba(0, 0, 0, 0.1)',
2601
+ color: 'rgba(0, 0, 0, 0.2)',
2591
2602
  inset: false,
2592
2603
  offsetX: 0,
2593
2604
  offsetY: 2,
@@ -2595,10 +2606,7 @@ module.exports = {
2595
2606
  }
2596
2607
  }
2597
2608
  },
2598
- {
2599
- if: { hover: true, raised: true },
2600
- tokens: { backgroundColor: '#016b6a', iconColor: '#ffffff' }
2601
- },
2609
+ { if: { hover: true, raised: true }, tokens: {} },
2602
2610
  {
2603
2611
  if: { raised: true, size: 'large' },
2604
2612
  tokens: { iconSize: 24, padding: 12 }
@@ -2606,44 +2614,18 @@ module.exports = {
2606
2614
  { if: { raised: true, size: 'small' }, tokens: { padding: 8 } },
2607
2615
  {
2608
2616
  if: { focus: true, raised: true },
2609
- tokens: {
2610
- backgroundColor: '#ffffff',
2611
- borderColor: '#016b6a',
2612
- borderWidth: 3,
2613
- iconColor: '#000000'
2614
- }
2617
+ tokens: { borderWidth: 3 }
2615
2618
  },
2616
2619
  {
2617
2620
  if: { pressed: true, raised: true },
2618
- tokens: {
2619
- backgroundColor: '#014847',
2620
- borderWidth: 0,
2621
- iconColor: '#ffffff'
2622
- }
2623
- },
2624
- {
2625
- if: { inactive: true, password: true },
2626
- tokens: {
2627
- backgroundColor: 'rgba(0, 0, 0, 0)',
2628
- borderWidth: 0,
2629
- iconColor: '#b5b4b4',
2630
- outerBorderColor: 'rgba(0, 0, 0, 0)'
2631
- }
2632
- },
2633
- {
2634
- if: { focus: true, pressed: true, raised: true },
2635
- tokens: {
2636
- backgroundColor: '#014847',
2637
- borderWidth: 0,
2638
- iconColor: '#ffffff'
2639
- }
2621
+ tokens: { backgroundColor: '#000000', iconColor: '#666666' }
2640
2622
  },
2641
2623
  { if: { compact: true }, tokens: { outerBorderGap: 0 } },
2642
2624
  {
2643
2625
  if: { inactive: true },
2644
2626
  tokens: {
2645
- backgroundColor: 'transparent',
2646
- iconColor: '#b5b4b4',
2627
+ backgroundColor: '#efefef',
2628
+ iconColor: '#c9c8c8',
2647
2629
  outerBorderColor: 'rgba(0, 0, 0, 0)',
2648
2630
  outerBorderWidth: 0
2649
2631
  }
@@ -2733,44 +2715,44 @@ module.exports = {
2733
2715
  {
2734
2716
  if: { focus: true },
2735
2717
  tokens: {
2736
- color: '#016b6a',
2737
- outerBorderColor: '#016b6a',
2718
+ color: '#000000',
2719
+ outerBorderColor: '#000000',
2738
2720
  outerBorderOutline: 'none'
2739
2721
  }
2740
2722
  },
2741
2723
  {
2742
2724
  if: { focus: true, pressed: true },
2743
- tokens: { color: '#595959', outerBorderColor: '#595959' }
2725
+ tokens: { color: '#666666', outerBorderColor: '#666666' }
2744
2726
  },
2745
2727
  {
2746
2728
  if: { hover: true },
2747
- tokens: { color: '#1b4746', textLine: 'none' }
2729
+ tokens: { color: '#404040', textLine: 'none' }
2748
2730
  },
2749
2731
  {
2750
2732
  if: { pressed: true },
2751
- tokens: { color: '#595959', textLine: 'none' }
2733
+ tokens: { color: '#666666', textLine: 'none' }
2752
2734
  },
2753
- { if: { alternative: true }, tokens: { color: '#000000' } },
2735
+ { if: { alternative: true }, tokens: { color: '#7a3dfc' } },
2754
2736
  {
2755
2737
  if: { alternative: true, focus: true },
2756
- tokens: { color: '#000000', outerBorderColor: '#000000' }
2738
+ tokens: { color: '#7a3dfc', outerBorderColor: '#7a3dfc' }
2757
2739
  },
2758
2740
  {
2759
2741
  if: { alternative: true, hover: true },
2760
- tokens: { color: '#5c5c5c' }
2742
+ tokens: { color: '#5b2bc2' }
2761
2743
  },
2762
2744
  {
2763
2745
  if: { alternative: true, pressed: true },
2764
- tokens: { color: '#505050' }
2746
+ tokens: { color: '#666666' }
2765
2747
  },
2766
2748
  {
2767
2749
  if: { alternative: true, focus: true, pressed: true },
2768
- tokens: { color: '#505050', outerBorderColor: '#505050' }
2750
+ tokens: { color: '#666666', outerBorderColor: '#666666' }
2769
2751
  },
2770
- { if: { inverse: true }, tokens: { color: '#e5f7fb' } },
2752
+ { if: { inverse: true }, tokens: { color: '#ffffff' } },
2771
2753
  {
2772
2754
  if: { focus: true, inverse: true },
2773
- tokens: { color: '#e5f7fb', outerBorderColor: '#e5f7fb' }
2755
+ tokens: { color: '#ffffff', outerBorderColor: '#ffffff' }
2774
2756
  },
2775
2757
  {
2776
2758
  if: { focus: true, inverse: true, pressed: true },
@@ -2778,7 +2760,7 @@ module.exports = {
2778
2760
  },
2779
2761
  {
2780
2762
  if: { hover: true, inverse: true },
2781
- tokens: { color: '#bbeaf5' }
2763
+ tokens: { color: '#efefef' }
2782
2764
  },
2783
2765
  {
2784
2766
  if: { inverse: true, pressed: true },
@@ -2814,7 +2796,7 @@ module.exports = {
2814
2796
  blockFontWeight: '600',
2815
2797
  blockLineHeight: 1.5,
2816
2798
  borderRadius: 4,
2817
- color: '#016b6a',
2799
+ color: '#000000',
2818
2800
  icon: null,
2819
2801
  iconSize: 24,
2820
2802
  iconSpace: 1,
@@ -2875,20 +2857,19 @@ module.exports = {
2875
2857
  }
2876
2858
  ],
2877
2859
  tokens: {
2860
+ bulletIcon: PaletteIconBulletFill,
2878
2861
  dividerColor: '#c9c8c8',
2879
2862
  dividerSize: 1,
2880
2863
  iconMarginTop: 2,
2881
2864
  interItemMargin: 8,
2882
2865
  interItemMarginWithDivider: 16,
2883
- itemBulletColor: '#7c1366',
2866
+ itemBulletColor: '#000000',
2884
2867
  itemBulletContainerAlign: 'center',
2885
2868
  itemBulletContainerWidth: 16,
2886
- itemBulletHeight: 4,
2887
- itemBulletWidth: 4,
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.44.1' }
6930
+ metadata: { name: 'theme-koodo', themeTokensVersion: '2.46.0' }
6842
6931
  }