@telus-uds/theme-koodo 3.14.0 → 3.16.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.
@@ -30,6 +30,185 @@
30
30
  "thickness": 4
31
31
  }
32
32
  },
33
+ "Badge": {
34
+ "appearances": {
35
+ "alternative": {
36
+ "type": "variant",
37
+ "values": [true]
38
+ },
39
+ "outline": {
40
+ "type": "variant",
41
+ "values": [true]
42
+ },
43
+ "purpose": {
44
+ "type": "variant",
45
+ "values": ["offer", "editorial"]
46
+ }
47
+ },
48
+ "rules": [
49
+ {
50
+ "if": {
51
+ "outline": true
52
+ },
53
+ "tokens": {
54
+ "backgroundColor": {
55
+ "red": 0,
56
+ "green": 0,
57
+ "blue": 0,
58
+ "alpha": 0
59
+ },
60
+ "borderColor": {
61
+ "red": 0.98039,
62
+ "green": 0.90196,
63
+ "blue": 0.95686,
64
+ "alpha": 1
65
+ }
66
+ }
67
+ },
68
+ {
69
+ "if": {
70
+ "alternative": true
71
+ },
72
+ "tokens": {
73
+ "backgroundColor": {
74
+ "red": 0,
75
+ "green": 0,
76
+ "blue": 0,
77
+ "alpha": 0
78
+ },
79
+ "borderColor": {
80
+ "red": 0.00392,
81
+ "green": 0.41961,
82
+ "blue": 0.41569,
83
+ "alpha": 1
84
+ },
85
+ "color": {
86
+ "red": 0.00392,
87
+ "green": 0.41961,
88
+ "blue": 0.41569,
89
+ "alpha": 1
90
+ },
91
+ "paddingBottom": 8,
92
+ "paddingTop": 8
93
+ }
94
+ },
95
+ {
96
+ "if": {
97
+ "purpose": "offer"
98
+ },
99
+ "tokens": {
100
+ "backgroundColor": {
101
+ "red": 0.76471,
102
+ "green": 0.93725,
103
+ "blue": 1,
104
+ "alpha": 1
105
+ },
106
+ "color": {
107
+ "red": 0,
108
+ "green": 0,
109
+ "blue": 0,
110
+ "alpha": 1
111
+ },
112
+ "paddingBottom": 8,
113
+ "paddingTop": 8
114
+ }
115
+ },
116
+ {
117
+ "if": {
118
+ "purpose": "editorial"
119
+ },
120
+ "tokens": {
121
+ "backgroundColor": {
122
+ "red": 0,
123
+ "green": 0,
124
+ "blue": 0,
125
+ "alpha": 1
126
+ },
127
+ "color": {
128
+ "red": 1,
129
+ "green": 1,
130
+ "blue": 1,
131
+ "alpha": 1
132
+ }
133
+ }
134
+ },
135
+ {
136
+ "if": {
137
+ "outline": true,
138
+ "purpose": "editorial"
139
+ },
140
+ "tokens": {
141
+ "backgroundColor": {
142
+ "red": 0,
143
+ "green": 0,
144
+ "blue": 0,
145
+ "alpha": 0
146
+ },
147
+ "borderColor": {
148
+ "red": 0,
149
+ "green": 0,
150
+ "blue": 0,
151
+ "alpha": 1
152
+ },
153
+ "color": {
154
+ "red": 0,
155
+ "green": 0,
156
+ "blue": 0,
157
+ "alpha": 1
158
+ }
159
+ }
160
+ },
161
+ {
162
+ "if": {
163
+ "outline": true,
164
+ "purpose": "offer"
165
+ },
166
+ "tokens": {
167
+ "backgroundColor": {
168
+ "red": 0,
169
+ "green": 0,
170
+ "blue": 0,
171
+ "alpha": 0
172
+ },
173
+ "borderColor": {
174
+ "red": 0.76471,
175
+ "green": 0.93725,
176
+ "blue": 1,
177
+ "alpha": 1
178
+ }
179
+ }
180
+ }
181
+ ],
182
+ "tokens": {
183
+ "backgroundColor": {
184
+ "red": 0.98039,
185
+ "green": 0.90196,
186
+ "blue": 0.95686,
187
+ "alpha": 1
188
+ },
189
+ "borderColor": {
190
+ "red": 0,
191
+ "green": 0,
192
+ "blue": 0,
193
+ "alpha": 0
194
+ },
195
+ "borderRadius": 32,
196
+ "borderWidth": 2,
197
+ "color": {
198
+ "red": 0.48627,
199
+ "green": 0.07451,
200
+ "blue": 0.4,
201
+ "alpha": 1
202
+ },
203
+ "fontName": "StagSans",
204
+ "fontWeight": 600,
205
+ "gradient": null,
206
+ "paddingBottom": 2,
207
+ "paddingLeft": 16,
208
+ "paddingRight": 16,
209
+ "paddingTop": 2
210
+ }
211
+ },
33
212
  "Box": {
34
213
  "appearances": {
35
214
  "background": {
@@ -291,8 +470,8 @@
291
470
  },
292
471
  "Button": {
293
472
  "appearances": {
294
- "clear": {
295
- "description": "Gives a button borders and a transparent background",
473
+ "danger": {
474
+ "description": "Indicates a user action that is destructive and will result in loss of information or cause significant monetary charges. Limit the use of the danger button whenever possible.",
296
475
  "type": "variant",
297
476
  "values": [true]
298
477
  },
@@ -301,39 +480,78 @@
301
480
  "values": [true],
302
481
  "type": "state"
303
482
  },
483
+ "inverse": {
484
+ "description": "Use inverse buttons on darker backgrounds. High and low priority buttons, and danger buttons, are available in inverse.",
485
+ "type": "variant",
486
+ "values": [true]
487
+ },
304
488
  "pressed": {
305
489
  "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
306
490
  "values": [true],
307
491
  "type": "state"
308
492
  },
309
- "rank": {
310
- "description": "Prominence of the button. Use the default (\"primary\") button style for the main action on a page or in a form, and \"secondary\" style for secondary actions.",
493
+ "priority": {
494
+ "description": "Indicates the importance of the call-to-action. Limit the amount of high priority buttons on a page to prioritize meaningful user flows. Low priority styles are applied by default.",
495
+ "type": "variant",
496
+ "values": ["high", "low"]
497
+ },
498
+ "size": {
311
499
  "type": "variant",
312
- "values": ["secondary"]
500
+ "values": ["small"]
313
501
  },
314
- "rounded": {
315
- "description": "Gives a button \"pill-style\" rounded sides",
502
+ "text": {
503
+ "description": "Text variant visually deprioritize the button styles",
316
504
  "type": "variant",
317
505
  "values": [true]
318
506
  },
319
- "selected": {
320
- "description": "Applies while an interactive component is the currently selected one in a set of states or components, for example a button in a `ButtonGroup`.",
321
- "values": [true],
322
- "type": "state"
507
+ "width": {
508
+ "description": "Available in default or full-width. Default-width expands based on content Full-width expands to width of the container.",
509
+ "type": "variant",
510
+ "values": ["full"]
323
511
  }
324
512
  },
325
513
  "rules": [
326
514
  {
327
515
  "if": {
328
- "rounded": true
516
+ "priority": "high"
329
517
  },
330
518
  "tokens": {
331
- "borderRadius": 32
519
+ "backgroundColor": {
520
+ "red": 0.00392,
521
+ "green": 0.41961,
522
+ "blue": 0.41569,
523
+ "alpha": 1
524
+ },
525
+ "color": {
526
+ "red": 1,
527
+ "green": 1,
528
+ "blue": 1,
529
+ "alpha": 1
530
+ }
332
531
  }
333
532
  },
334
533
  {
335
534
  "if": {
336
- "clear": true
535
+ "danger": true
536
+ },
537
+ "tokens": {
538
+ "borderColor": {
539
+ "red": 0.87451,
540
+ "green": 0.23922,
541
+ "blue": 0.04706,
542
+ "alpha": 1
543
+ },
544
+ "color": {
545
+ "red": 0.87451,
546
+ "green": 0.23922,
547
+ "blue": 0.04706,
548
+ "alpha": 1
549
+ }
550
+ }
551
+ },
552
+ {
553
+ "if": {
554
+ "inverse": true
337
555
  },
338
556
  "tokens": {
339
557
  "backgroundColor": {
@@ -343,17 +561,22 @@
343
561
  "alpha": 0
344
562
  },
345
563
  "borderColor": {
346
- "red": 0.00392,
347
- "green": 0.41961,
348
- "blue": 0.41569,
564
+ "red": 1,
565
+ "green": 1,
566
+ "blue": 1,
349
567
  "alpha": 1
350
568
  },
351
- "borderWidth": 2,
352
569
  "color": {
353
- "red": 0.00392,
354
- "green": 0.41961,
355
- "blue": 0.41569,
570
+ "red": 1,
571
+ "green": 1,
572
+ "blue": 1,
356
573
  "alpha": 1
574
+ },
575
+ "outerBackgroundColor": {
576
+ "red": 0,
577
+ "green": 0,
578
+ "blue": 0,
579
+ "alpha": 0
357
580
  }
358
581
  }
359
582
  },
@@ -363,93 +586,265 @@
363
586
  },
364
587
  "tokens": {
365
588
  "backgroundColor": {
589
+ "red": 0.34902,
590
+ "green": 0.34902,
591
+ "blue": 0.34902,
592
+ "alpha": 1
593
+ },
594
+ "color": {
595
+ "red": 0.78824,
596
+ "green": 0.78431,
597
+ "blue": 0.78431,
598
+ "alpha": 1
599
+ }
600
+ }
601
+ },
602
+ {
603
+ "if": {
604
+ "inverse": true,
605
+ "priority": "high"
606
+ },
607
+ "tokens": {
608
+ "backgroundColor": {
609
+ "red": 1,
610
+ "green": 1,
611
+ "blue": 1,
612
+ "alpha": 1
613
+ },
614
+ "borderWidth": 0,
615
+ "color": {
366
616
  "red": 0.00392,
367
617
  "green": 0.41961,
368
618
  "blue": 0.41569,
369
619
  "alpha": 1
620
+ }
621
+ }
622
+ },
623
+ {
624
+ "if": {
625
+ "pressed": true,
626
+ "priority": "high"
627
+ },
628
+ "tokens": {
629
+ "backgroundColor": {
630
+ "red": 0.34902,
631
+ "green": 0.34902,
632
+ "blue": 0.34902,
633
+ "alpha": 1
634
+ },
635
+ "color": {
636
+ "red": 0.78824,
637
+ "green": 0.78431,
638
+ "blue": 0.78431,
639
+ "alpha": 1
640
+ }
641
+ }
642
+ },
643
+ {
644
+ "if": {
645
+ "inverse": true,
646
+ "pressed": true
647
+ },
648
+ "tokens": {
649
+ "backgroundColor": {
650
+ "red": 0.78824,
651
+ "green": 0.78431,
652
+ "blue": 0.78431,
653
+ "alpha": 1
654
+ },
655
+ "color": {
656
+ "red": 0.4,
657
+ "green": 0.4,
658
+ "blue": 0.4,
659
+ "alpha": 1
660
+ }
661
+ }
662
+ },
663
+ {
664
+ "if": {
665
+ "danger": true,
666
+ "pressed": true,
667
+ "priority": "high"
668
+ },
669
+ "tokens": {
670
+ "backgroundColor": {
671
+ "red": 0.34902,
672
+ "green": 0.34902,
673
+ "blue": 0.34902,
674
+ "alpha": 1
675
+ },
676
+ "color": {
677
+ "red": 0.78824,
678
+ "green": 0.78431,
679
+ "blue": 0.78431,
680
+ "alpha": 1
681
+ }
682
+ }
683
+ },
684
+ {
685
+ "if": {
686
+ "width": "full"
687
+ },
688
+ "tokens": {
689
+ "width": "100%"
690
+ }
691
+ },
692
+ {
693
+ "if": {
694
+ "size": "small"
695
+ },
696
+ "tokens": {
697
+ "minWidth": 0,
698
+ "paddingBottom": 4,
699
+ "paddingLeft": 16,
700
+ "paddingRight": 16,
701
+ "paddingTop": 4
702
+ }
703
+ },
704
+ {
705
+ "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.",
706
+ "if": {
707
+ "inactive": true
708
+ },
709
+ "tokens": {
710
+ "backgroundColor": {
711
+ "red": 0.78824,
712
+ "green": 0.78431,
713
+ "blue": 0.78431,
714
+ "alpha": 1
370
715
  },
371
716
  "borderColor": {
717
+ "red": 0.78824,
718
+ "green": 0.78431,
719
+ "blue": 0.78431,
720
+ "alpha": 1
721
+ },
722
+ "borderWidth": 0,
723
+ "color": {
724
+ "red": 0.93725,
725
+ "green": 0.93725,
726
+ "blue": 0.93725,
727
+ "alpha": 1
728
+ }
729
+ }
730
+ },
731
+ {
732
+ "if": {
733
+ "text": true
734
+ },
735
+ "tokens": {
736
+ "backgroundColor": {
737
+ "red": 0,
738
+ "green": 0,
739
+ "blue": 0,
740
+ "alpha": 0
741
+ },
742
+ "borderColor": {
743
+ "red": 0,
744
+ "green": 0,
745
+ "blue": 0,
746
+ "alpha": 0
747
+ },
748
+ "borderWidth": 0,
749
+ "color": {
750
+ "red": 0.0902,
751
+ "green": 0.21176,
752
+ "blue": 0.4902,
753
+ "alpha": 1
754
+ },
755
+ "minWidth": 0,
756
+ "paddingLeft": 0,
757
+ "paddingRight": 0,
758
+ "textLine": "underline"
759
+ }
760
+ },
761
+ {
762
+ "if": {
763
+ "priority": "high",
764
+ "text": true
765
+ },
766
+ "tokens": {
767
+ "color": {
372
768
  "red": 0.00392,
373
769
  "green": 0.41961,
374
770
  "blue": 0.41569,
375
771
  "alpha": 1
376
- },
772
+ }
773
+ }
774
+ },
775
+ {
776
+ "if": {
777
+ "danger": true,
778
+ "text": true
779
+ },
780
+ "tokens": {
377
781
  "color": {
378
- "red": 1,
379
- "green": 1,
380
- "blue": 1,
782
+ "red": 0.87451,
783
+ "green": 0.23922,
784
+ "blue": 0.04706,
381
785
  "alpha": 1
382
786
  }
383
787
  }
384
788
  },
385
789
  {
386
790
  "if": {
387
- "rank": "secondary"
791
+ "pressed": true,
792
+ "text": true
388
793
  },
389
794
  "tokens": {
390
- "backgroundColor": {
391
- "red": 0,
392
- "green": 0.63137,
393
- "blue": 0.85882,
394
- "alpha": 1
395
- },
396
795
  "borderColor": {
397
796
  "red": 0,
398
- "green": 0.63137,
399
- "blue": 0.85882,
400
- "alpha": 1
797
+ "green": 0,
798
+ "blue": 0,
799
+ "alpha": 0
401
800
  },
402
801
  "color": {
403
- "red": 1,
404
- "green": 1,
405
- "blue": 1,
802
+ "red": 0.34902,
803
+ "green": 0.34902,
804
+ "blue": 0.34902,
406
805
  "alpha": 1
407
- }
806
+ },
807
+ "textLine": "none"
408
808
  }
409
809
  },
410
810
  {
411
811
  "if": {
412
- "clear": true,
413
- "rank": "secondary"
812
+ "inactive": true,
813
+ "text": true
414
814
  },
415
815
  "tokens": {
416
- "backgroundColor": {
417
- "red": 1,
418
- "green": 1,
419
- "blue": 1,
420
- "alpha": 1
421
- },
422
816
  "borderColor": {
423
817
  "red": 0,
424
- "green": 0.63137,
425
- "blue": 0.85882,
426
- "alpha": 1
818
+ "green": 0,
819
+ "blue": 0,
820
+ "alpha": 0
427
821
  },
428
822
  "color": {
429
- "red": 0,
430
- "green": 0.63137,
431
- "blue": 0.85882,
823
+ "red": 0.78824,
824
+ "green": 0.78431,
825
+ "blue": 0.78431,
432
826
  "alpha": 1
433
- }
827
+ },
828
+ "outerBorderColor": {
829
+ "red": 0,
830
+ "green": 0,
831
+ "blue": 0,
832
+ "alpha": 0
833
+ },
834
+ "textLine": "none"
434
835
  }
435
836
  },
436
837
  {
437
838
  "if": {
438
- "pressed": true,
439
- "rank": "secondary"
839
+ "inverse": true,
840
+ "text": true
440
841
  },
441
842
  "tokens": {
442
843
  "backgroundColor": {
443
- "red": 0.76471,
444
- "green": 0.93725,
445
- "blue": 1,
446
- "alpha": 1
447
- },
448
- "borderColor": {
449
- "red": 0.76471,
450
- "green": 0.93725,
451
- "blue": 1,
452
- "alpha": 1
844
+ "red": 0,
845
+ "green": 0,
846
+ "blue": 0,
847
+ "alpha": 0
453
848
  },
454
849
  "color": {
455
850
  "red": 1,
@@ -461,49 +856,46 @@
461
856
  },
462
857
  {
463
858
  "if": {
464
- "inactive": true
465
- },
466
- "tokens": {
467
- "opacity": 0.3
468
- }
469
- },
470
- {
471
- "if": {
472
- "selected": true
859
+ "inactive": true,
860
+ "inverse": true,
861
+ "text": true
473
862
  },
474
863
  "tokens": {
475
- "opacity": 0.8,
476
- "outerBorderColor": {
477
- "red": 0.00392,
478
- "green": 0.41961,
479
- "blue": 0.41569,
480
- "alpha": 1
864
+ "borderColor": {
865
+ "red": 0,
866
+ "green": 0,
867
+ "blue": 0,
868
+ "alpha": 0
481
869
  },
482
- "outerBorderGap": 1,
483
- "outerBorderWidth": 4
870
+ "color": {
871
+ "red": 0.78824,
872
+ "green": 0.78431,
873
+ "blue": 0.78431,
874
+ "alpha": 1
875
+ }
484
876
  }
485
877
  }
486
878
  ],
487
879
  "tokens": {
488
880
  "alignSelf": "flex-start",
489
881
  "backgroundColor": {
490
- "red": 0.00392,
491
- "green": 0.41961,
492
- "blue": 0.41569,
493
- "alpha": 1
494
- },
495
- "borderColor": {
496
882
  "red": 1,
497
883
  "green": 1,
498
884
  "blue": 1,
499
885
  "alpha": 1
500
886
  },
887
+ "borderColor": {
888
+ "red": 0.00392,
889
+ "green": 0.41961,
890
+ "blue": 0.41569,
891
+ "alpha": 1
892
+ },
501
893
  "borderRadius": 4,
502
- "borderWidth": 0,
894
+ "borderWidth": 1,
503
895
  "color": {
504
- "red": 1,
505
- "green": 1,
506
- "blue": 1,
896
+ "red": 0.00392,
897
+ "green": 0.41961,
898
+ "blue": 0.41569,
507
899
  "alpha": 1
508
900
  },
509
901
  "fontName": "StagSans",
@@ -513,26 +905,26 @@
513
905
  "iconSize": 24,
514
906
  "iconSpace": 2,
515
907
  "lineHeight": 1.5,
516
- "minWidth": 0,
908
+ "minWidth": 144,
517
909
  "opacity": 1,
518
910
  "outerBackgroundColor": {
519
- "red": 0,
520
- "green": 0,
521
- "blue": 0,
522
- "alpha": 0
523
- },
524
- "outerBorderColor": {
525
911
  "red": 1,
526
912
  "green": 1,
527
913
  "blue": 1,
528
914
  "alpha": 1
529
915
  },
530
- "outerBorderGap": 2,
531
- "outerBorderWidth": 2,
532
- "paddingBottom": 8,
533
- "paddingLeft": 24,
534
- "paddingRight": 24,
535
- "paddingTop": 8,
916
+ "outerBorderColor": {
917
+ "red": 0,
918
+ "green": 0,
919
+ "blue": 0,
920
+ "alpha": 0
921
+ },
922
+ "outerBorderGap": null,
923
+ "outerBorderWidth": 1,
924
+ "paddingBottom": 12,
925
+ "paddingLeft": 32,
926
+ "paddingRight": 32,
927
+ "paddingTop": 12,
536
928
  "shadow": null,
537
929
  "textAlign": "center",
538
930
  "textLine": "none",
@@ -1254,7 +1646,7 @@
1254
1646
  "blue": 0.41569,
1255
1647
  "alpha": 1
1256
1648
  },
1257
- "iconSize": 16,
1649
+ "iconSize": 20,
1258
1650
  "inputBackgroundColor": {
1259
1651
  "red": 1,
1260
1652
  "green": 1,
@@ -1466,13 +1858,28 @@
1466
1858
  },
1467
1859
  "tokens": {
1468
1860
  "color": {
1469
- "red": 0.93725,
1470
- "green": 0.93725,
1471
- "blue": 0.93725,
1861
+ "red": 0.00392,
1862
+ "green": 0.41961,
1863
+ "blue": 0.41569,
1472
1864
  "alpha": 1
1473
1865
  }
1474
1866
  }
1475
1867
  },
1868
+ {
1869
+ "if": {
1870
+ "decorative": true,
1871
+ "weight": "thick"
1872
+ },
1873
+ "tokens": {
1874
+ "color": {
1875
+ "red": 0.00392,
1876
+ "green": 0.41961,
1877
+ "blue": 0.41569,
1878
+ "alpha": 1
1879
+ },
1880
+ "width": 2
1881
+ }
1882
+ },
1476
1883
  {
1477
1884
  "if": {
1478
1885
  "inverse": true
@@ -1485,6 +1892,21 @@
1485
1892
  "alpha": 1
1486
1893
  }
1487
1894
  }
1895
+ },
1896
+ {
1897
+ "if": {
1898
+ "inverse": true,
1899
+ "weight": "thick"
1900
+ },
1901
+ "tokens": {
1902
+ "color": {
1903
+ "red": 1,
1904
+ "green": 1,
1905
+ "blue": 1,
1906
+ "alpha": 1
1907
+ },
1908
+ "width": 2
1909
+ }
1488
1910
  }
1489
1911
  ],
1490
1912
  "tokens": {
@@ -1587,52 +2009,15 @@
1587
2009
  }
1588
2010
  },
1589
2011
  "rules": [
1590
- {
1591
- "if": {
1592
- "validation": "success"
1593
- },
1594
- "tokens": {
1595
- "backgroundColor": {
1596
- "red": 0.75686,
1597
- "green": 0.94902,
1598
- "blue": 0.9098,
1599
- "alpha": 1
1600
- },
1601
- "borderColor": {
1602
- "red": 0.75686,
1603
- "green": 0.94902,
1604
- "blue": 0.9098,
1605
- "alpha": 1
1606
- },
1607
- "color": {
1608
- "red": 0.1451,
1609
- "green": 0.5451,
1610
- "blue": 0.04314,
1611
- "alpha": 1
1612
- }
1613
- }
1614
- },
1615
2012
  {
1616
2013
  "if": {
1617
2014
  "validation": "error"
1618
2015
  },
1619
2016
  "tokens": {
1620
2017
  "backgroundColor": {
1621
- "red": 0.98039,
1622
- "green": 0.90196,
1623
- "blue": 0.95686,
1624
- "alpha": 1
1625
- },
1626
- "borderColor": {
1627
- "red": 0.98039,
1628
- "green": 0.90196,
1629
- "blue": 0.95686,
1630
- "alpha": 1
1631
- },
1632
- "color": {
1633
- "red": 0.87451,
1634
- "green": 0.23922,
1635
- "blue": 0.04706,
2018
+ "red": 0.97255,
2019
+ "green": 0.86667,
2020
+ "blue": 0.8902,
1636
2021
  "alpha": 1
1637
2022
  }
1638
2023
  }
@@ -1645,9 +2030,9 @@
1645
2030
  "tokens": {
1646
2031
  "icon": "PaletteIconCheckCircledFilled",
1647
2032
  "iconColor": {
1648
- "red": 0.1451,
1649
- "green": 0.5451,
1650
- "blue": 0.04314,
2033
+ "red": 0.00392,
2034
+ "green": 0.41961,
2035
+ "blue": 0.41569,
1651
2036
  "alpha": 1
1652
2037
  }
1653
2038
  }
@@ -1658,11 +2043,11 @@
1658
2043
  "validation": "error"
1659
2044
  },
1660
2045
  "tokens": {
1661
- "icon": "PaletteIconExclamationTriangle",
2046
+ "icon": "PaletteIconCaution",
1662
2047
  "iconColor": {
1663
- "red": 0.87451,
1664
- "green": 0.23922,
1665
- "blue": 0.04706,
2048
+ "red": 0.93333,
2049
+ "green": 0.17255,
2050
+ "blue": 0.4549,
1666
2051
  "alpha": 1
1667
2052
  }
1668
2053
  }
@@ -1670,23 +2055,23 @@
1670
2055
  ],
1671
2056
  "tokens": {
1672
2057
  "backgroundColor": {
1673
- "red": 0.93725,
1674
- "green": 0.93725,
1675
- "blue": 0.93725,
2058
+ "red": 0.89804,
2059
+ "green": 0.96863,
2060
+ "blue": 0.98431,
1676
2061
  "alpha": 1
1677
2062
  },
1678
2063
  "borderColor": {
1679
- "red": 0.78824,
1680
- "green": 0.78431,
1681
- "blue": 0.78431,
1682
- "alpha": 1
2064
+ "red": 0,
2065
+ "green": 0,
2066
+ "blue": 0,
2067
+ "alpha": 0
1683
2068
  },
1684
- "borderRadius": 4,
1685
- "borderWidth": 1,
2069
+ "borderRadius": 0,
2070
+ "borderWidth": 0,
1686
2071
  "color": {
1687
- "red": 0.34902,
1688
- "green": 0.34902,
1689
- "blue": 0.34902,
2072
+ "red": 0,
2073
+ "green": 0,
2074
+ "blue": 0,
1690
2075
  "alpha": 1
1691
2076
  },
1692
2077
  "contentFontSize": 14,
@@ -1700,12 +2085,12 @@
1700
2085
  "alpha": 0
1701
2086
  },
1702
2087
  "iconGap": 8,
1703
- "iconSize": 24,
2088
+ "iconSize": 20,
1704
2089
  "lineHeight": 1.5,
1705
- "paddingBottom": 10,
2090
+ "paddingBottom": 12,
1706
2091
  "paddingLeft": 16,
1707
2092
  "paddingRight": 16,
1708
- "paddingTop": 10,
2093
+ "paddingTop": 12,
1709
2094
  "space": 2,
1710
2095
  "titleFontSize": 16
1711
2096
  }
@@ -2022,9 +2407,40 @@
2022
2407
  },
2023
2408
  "tokens": {
2024
2409
  "backgroundColor": {
2025
- "red": 0.00392,
2026
- "green": 0.28235,
2027
- "blue": 0.27843,
2410
+ "red": 0.10588,
2411
+ "green": 0.27843,
2412
+ "blue": 0.27451,
2413
+ "alpha": 1
2414
+ },
2415
+ "borderColor": {
2416
+ "red": 0.10588,
2417
+ "green": 0.27843,
2418
+ "blue": 0.27451,
2419
+ "alpha": 1
2420
+ },
2421
+ "iconColor": {
2422
+ "red": 1,
2423
+ "green": 1,
2424
+ "blue": 1,
2425
+ "alpha": 1
2426
+ }
2427
+ }
2428
+ },
2429
+ {
2430
+ "if": {
2431
+ "pressed": true
2432
+ },
2433
+ "tokens": {
2434
+ "backgroundColor": {
2435
+ "red": 0.10588,
2436
+ "green": 0.27843,
2437
+ "blue": 0.27451,
2438
+ "alpha": 1
2439
+ },
2440
+ "borderColor": {
2441
+ "red": 0.10588,
2442
+ "green": 0.27843,
2443
+ "blue": 0.27451,
2028
2444
  "alpha": 1
2029
2445
  },
2030
2446
  "iconColor": {
@@ -2084,7 +2500,7 @@
2084
2500
  "alpha": 1
2085
2501
  },
2086
2502
  "borderRadius": 99999999999999,
2087
- "borderWidth": 1,
2503
+ "borderWidth": 3,
2088
2504
  "iconColor": {
2089
2505
  "red": 0.00392,
2090
2506
  "green": 0.41961,
@@ -2128,10 +2544,10 @@
2128
2544
  "alpha": 1
2129
2545
  },
2130
2546
  "hintFontName": "StagSans",
2131
- "hintFontSize": 16,
2547
+ "hintFontSize": 14,
2132
2548
  "hintFontWeight": 400,
2133
- "hintLineHeight": 1.4,
2134
- "lineHeight": 1.4
2549
+ "hintLineHeight": 1.42857142857,
2550
+ "lineHeight": 1.5
2135
2551
  }
2136
2552
  },
2137
2553
  "InputSupports": {
@@ -2143,15 +2559,28 @@
2143
2559
  },
2144
2560
  "Link": {
2145
2561
  "appearances": {
2562
+ "alternative": {
2563
+ "type": "variant",
2564
+ "values": [true]
2565
+ },
2146
2566
  "iconPosition": {
2147
2567
  "description": "Theme styles to be applied to icon links depending on where the icon is in relation to the link text",
2148
2568
  "values": ["left", "right"],
2149
2569
  "type": "state"
2150
2570
  },
2151
- "rank": {
2152
- "description": "Prominence of the link.",
2571
+ "inverse": {
2572
+ "type": "variant",
2573
+ "values": [true]
2574
+ },
2575
+ "pressed": {
2576
+ "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
2577
+ "values": [true],
2578
+ "type": "state"
2579
+ },
2580
+ "size": {
2581
+ "description": "Text sizes for block links; similar but not always identical to Typography sizes.",
2153
2582
  "type": "variant",
2154
- "values": ["secondary"]
2583
+ "values": ["micro", "small", "large"]
2155
2584
  }
2156
2585
  },
2157
2586
  "rules": [
@@ -2165,16 +2594,103 @@
2165
2594
  },
2166
2595
  {
2167
2596
  "if": {
2168
- "rank": "secondary"
2597
+ "pressed": true
2169
2598
  },
2170
2599
  "tokens": {
2171
2600
  "color": {
2172
- "red": 0,
2173
- "green": 0.63137,
2174
- "blue": 0.85882,
2601
+ "red": 0.34902,
2602
+ "green": 0.34902,
2603
+ "blue": 0.34902,
2604
+ "alpha": 1
2605
+ },
2606
+ "textLine": "none"
2607
+ }
2608
+ },
2609
+ {
2610
+ "if": {
2611
+ "alternative": true
2612
+ },
2613
+ "tokens": {
2614
+ "color": {
2615
+ "red": 0.4,
2616
+ "green": 0.4,
2617
+ "blue": 0.4,
2618
+ "alpha": 1
2619
+ }
2620
+ }
2621
+ },
2622
+ {
2623
+ "if": {
2624
+ "alternative": true,
2625
+ "pressed": true
2626
+ },
2627
+ "tokens": {
2628
+ "color": {
2629
+ "red": 0.34902,
2630
+ "green": 0.34902,
2631
+ "blue": 0.34902,
2632
+ "alpha": 1
2633
+ }
2634
+ }
2635
+ },
2636
+ {
2637
+ "if": {
2638
+ "inverse": true
2639
+ },
2640
+ "tokens": {
2641
+ "color": {
2642
+ "red": 0.89804,
2643
+ "green": 0.96863,
2644
+ "blue": 0.98431,
2645
+ "alpha": 1
2646
+ }
2647
+ }
2648
+ },
2649
+ {
2650
+ "if": {
2651
+ "inverse": true,
2652
+ "pressed": true
2653
+ },
2654
+ "tokens": {
2655
+ "color": {
2656
+ "red": 0.78824,
2657
+ "green": 0.78431,
2658
+ "blue": 0.78431,
2175
2659
  "alpha": 1
2176
2660
  }
2177
2661
  }
2662
+ },
2663
+ {
2664
+ "if": {
2665
+ "size": "micro"
2666
+ },
2667
+ "tokens": {
2668
+ "blockFontName": "StagSans",
2669
+ "blockFontSize": 12,
2670
+ "blockFontWeight": 600,
2671
+ "blockLineHeight": 1.33333333333,
2672
+ "iconSize": 16
2673
+ }
2674
+ },
2675
+ {
2676
+ "if": {
2677
+ "size": "small"
2678
+ },
2679
+ "tokens": {
2680
+ "blockFontSize": 14,
2681
+ "blockLineHeight": 1.42857142857,
2682
+ "iconSize": 20
2683
+ }
2684
+ },
2685
+ {
2686
+ "if": {
2687
+ "size": "large"
2688
+ },
2689
+ "tokens": {
2690
+ "blockFontSize": 20,
2691
+ "blockLineHeight": 1.4,
2692
+ "iconSize": 24
2693
+ }
2178
2694
  }
2179
2695
  ],
2180
2696
  "tokens": {
@@ -2201,9 +2717,9 @@
2201
2717
  "blue": 0,
2202
2718
  "alpha": 0
2203
2719
  },
2204
- "outerBorderGap": 0,
2720
+ "outerBorderGap": 2,
2205
2721
  "outerBorderOutline": "none",
2206
- "outerBorderWidth": 0,
2722
+ "outerBorderWidth": 2,
2207
2723
  "textLine": "underline",
2208
2724
  "textLineStyle": "solid"
2209
2725
  }
@@ -2980,21 +3496,21 @@
2980
3496
  },
2981
3497
  "tokens": {
2982
3498
  "backgroundColor": {
2983
- "red": 0.00392,
2984
- "green": 0.41961,
2985
- "blue": 0.41569,
3499
+ "red": 0.78824,
3500
+ "green": 0.78431,
3501
+ "blue": 0.78431,
2986
3502
  "alpha": 1
2987
3503
  },
2988
3504
  "borderColor": {
2989
- "red": 0.00392,
2990
- "green": 0.41961,
2991
- "blue": 0.41569,
3505
+ "red": 0.4,
3506
+ "green": 0.4,
3507
+ "blue": 0.4,
2992
3508
  "alpha": 1
2993
3509
  },
2994
- "color": {
2995
- "red": 1,
2996
- "green": 1,
2997
- "blue": 1,
3510
+ "iconColor": {
3511
+ "red": 0.4,
3512
+ "green": 0.4,
3513
+ "blue": 0.4,
2998
3514
  "alpha": 1
2999
3515
  }
3000
3516
  }
@@ -3003,23 +3519,23 @@
3003
3519
  "tokens": {
3004
3520
  "alignSelf": "flex-start",
3005
3521
  "backgroundColor": {
3006
- "red": 0.00392,
3007
- "green": 0.41961,
3008
- "blue": 0.41569,
3009
- "alpha": 1
3010
- },
3011
- "borderColor": {
3012
3522
  "red": 1,
3013
3523
  "green": 1,
3014
3524
  "blue": 1,
3015
3525
  "alpha": 1
3016
3526
  },
3017
- "borderRadius": 4,
3018
- "borderWidth": 0,
3527
+ "borderColor": {
3528
+ "red": 0.4,
3529
+ "green": 0.4,
3530
+ "blue": 0.4,
3531
+ "alpha": 1
3532
+ },
3533
+ "borderRadius": 48,
3534
+ "borderWidth": 1,
3019
3535
  "color": {
3020
- "red": 1,
3021
- "green": 1,
3022
- "blue": 1,
3536
+ "red": 0.4,
3537
+ "green": 0.4,
3538
+ "blue": 0.4,
3023
3539
  "alpha": 1
3024
3540
  },
3025
3541
  "fontName": "StagSans",
@@ -3027,9 +3543,9 @@
3027
3543
  "fontWeight": 600,
3028
3544
  "icon": null,
3029
3545
  "iconColor": {
3030
- "red": 1,
3031
- "green": 1,
3032
- "blue": 1,
3546
+ "red": 0.00392,
3547
+ "green": 0.41961,
3548
+ "blue": 0.41569,
3033
3549
  "alpha": 1
3034
3550
  },
3035
3551
  "iconSize": 24,
@@ -3051,10 +3567,10 @@
3051
3567
  },
3052
3568
  "outerBorderGap": 2,
3053
3569
  "outerBorderWidth": 2,
3054
- "paddingBottom": 8,
3570
+ "paddingBottom": 12,
3055
3571
  "paddingLeft": 24,
3056
3572
  "paddingRight": 24,
3057
- "paddingTop": 8,
3573
+ "paddingTop": 12,
3058
3574
  "shadow": null,
3059
3575
  "textAlign": "center",
3060
3576
  "width": null
@@ -3065,25 +3581,25 @@
3065
3581
  "rules": [],
3066
3582
  "tokens": {
3067
3583
  "backgroundColor": {
3068
- "red": 0.97647,
3069
- "green": 0.96471,
3070
- "blue": 0.64706,
3584
+ "red": 1,
3585
+ "green": 1,
3586
+ "blue": 1,
3071
3587
  "alpha": 1
3072
3588
  },
3073
3589
  "borderColor": {
3074
- "red": 0,
3075
- "green": 0,
3076
- "blue": 0,
3077
- "alpha": 0
3590
+ "red": 0.78824,
3591
+ "green": 0.78431,
3592
+ "blue": 0.78431,
3593
+ "alpha": 1
3078
3594
  },
3079
- "borderRadius": 0,
3080
- "borderWidth": 0,
3595
+ "borderRadius": 8,
3596
+ "borderWidth": 1,
3081
3597
  "flex": 1,
3082
3598
  "minWidth": null,
3083
- "paddingBottom": 16,
3084
- "paddingLeft": 16,
3085
- "paddingRight": 16,
3086
- "paddingTop": 16,
3599
+ "paddingBottom": 8,
3600
+ "paddingLeft": 12,
3601
+ "paddingRight": 12,
3602
+ "paddingTop": 8,
3087
3603
  "shadow": null
3088
3604
  }
3089
3605
  },
@@ -3152,9 +3668,15 @@
3152
3668
  },
3153
3669
  "tokens": {
3154
3670
  "backgroundColor": {
3155
- "red": 0.00392,
3156
- "green": 0.41961,
3157
- "blue": 0.41569,
3671
+ "red": 0.78824,
3672
+ "green": 0.78431,
3673
+ "blue": 0.78431,
3674
+ "alpha": 1
3675
+ },
3676
+ "itemIconColor": {
3677
+ "red": 0,
3678
+ "green": 0,
3679
+ "blue": 0,
3158
3680
  "alpha": 1
3159
3681
  }
3160
3682
  }
@@ -3174,7 +3696,7 @@
3174
3696
  "alpha": 1
3175
3697
  },
3176
3698
  "dividerSize": 1,
3177
- "iconMarginTop": 4,
3699
+ "iconMarginTop": 0,
3178
3700
  "interItemMargin": null,
3179
3701
  "interItemMarginWithDivider": null,
3180
3702
  "itemBulletColor": {
@@ -3184,25 +3706,31 @@
3184
3706
  "alpha": 1
3185
3707
  },
3186
3708
  "itemBulletContainerAlign": "center",
3187
- "itemBulletContainerWidth": 16,
3188
- "itemBulletHeight": 4,
3189
- "itemBulletWidth": 4,
3709
+ "itemBulletContainerWidth": 0,
3710
+ "itemBulletHeight": 0,
3711
+ "itemBulletWidth": 0,
3712
+ "itemFontColor": {
3713
+ "red": 0,
3714
+ "green": 0,
3715
+ "blue": 0,
3716
+ "alpha": 1
3717
+ },
3190
3718
  "itemFontName": "StagSans",
3191
3719
  "itemFontSize": 16,
3192
3720
  "itemFontWeight": 600,
3193
3721
  "itemIconColor": {
3194
- "red": 0.48627,
3195
- "green": 0.07451,
3196
- "blue": 0.4,
3722
+ "red": 0.00392,
3723
+ "green": 0.41961,
3724
+ "blue": 0.41569,
3197
3725
  "alpha": 1
3198
3726
  },
3199
- "itemIconSize": 16,
3200
- "itemLineHeight": 1.3,
3727
+ "itemIconSize": 24,
3728
+ "itemLineHeight": 1.6,
3201
3729
  "listGutter": 10,
3202
- "paddingBottom": 8,
3203
- "paddingLeft": 12,
3204
- "paddingRight": 12,
3205
- "paddingTop": 8
3730
+ "paddingBottom": 12,
3731
+ "paddingLeft": 4,
3732
+ "paddingRight": 4,
3733
+ "paddingTop": 12
3206
3734
  }
3207
3735
  },
3208
3736
  "Radio": {
@@ -5640,7 +6168,7 @@
5640
6168
  }
5641
6169
  },
5642
6170
  "metadata": {
5643
- "themeTokensVersion": "2.13.0",
6171
+ "themeTokensVersion": "2.15.0",
5644
6172
  "name": "theme-koodo"
5645
6173
  }
5646
6174
  }