@telus-uds/theme-koodo 3.11.0 → 3.13.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.
package/theme.json CHANGED
@@ -241,8 +241,8 @@
241
241
  "hover": true
242
242
  },
243
243
  "tokens": {
244
- "backgroundColor": "{palette.color.darkMosque}",
245
- "borderColor": "{palette.color.darkMosque}",
244
+ "backgroundColor": "{palette.color.mosqueDark}",
245
+ "borderColor": "{palette.color.mosqueDark}",
246
246
  "color": "{palette.color.white}"
247
247
  }
248
248
  },
@@ -437,8 +437,8 @@
437
437
  "hover": true
438
438
  },
439
439
  "tokens": {
440
- "backgroundColor": "{palette.color.darkMosque}",
441
- "iconColor": "{palette.color.darkMosque}"
440
+ "backgroundColor": "{palette.color.mosqueDark}",
441
+ "iconColor": "{palette.color.mosqueDark}"
442
442
  }
443
443
  },
444
444
  {
@@ -489,14 +489,14 @@
489
489
  "selected": true
490
490
  },
491
491
  "tokens": {
492
- "outerBorderColor": "{palette.color.darkMosque}"
492
+ "outerBorderColor": "{palette.color.mosqueDark}"
493
493
  }
494
494
  }
495
495
  ],
496
496
  "tokens": {
497
497
  "alignSelf": "{system.flexAlign.flexStart}",
498
498
  "backgroundColor": "{palette.color.mosque}",
499
- "borderColor": "{palette.color.darkMosque}",
499
+ "borderColor": "{palette.color.mosqueDark}",
500
500
  "borderRadius": "{palette.radius.radius4}",
501
501
  "borderWidth": "{palette.border.none}",
502
502
  "color": "{palette.color.white}",
@@ -527,7 +527,7 @@
527
527
  "paddingRight": "{palette.size.size16}",
528
528
  "paddingTop": "{palette.size.size8}",
529
529
  "shadow": "{system.shadow.none}",
530
- "subtitleColor": "{palette.color.darkMosque}",
530
+ "subtitleColor": "{palette.color.mosqueDark}",
531
531
  "textAlign": "{system.flexJustifyContent.center}",
532
532
  "width": "{system.size.none}"
533
533
  }
@@ -578,7 +578,7 @@
578
578
  "hover": true
579
579
  },
580
580
  "tokens": {
581
- "backgroundColor": "{palette.color.darkMosque}"
581
+ "backgroundColor": "{palette.color.mosqueDark}"
582
582
  }
583
583
  },
584
584
  {
@@ -628,7 +628,7 @@
628
628
  "selected": true
629
629
  },
630
630
  "tokens": {
631
- "outerBorderColor": "{palette.color.darkMosque}"
631
+ "outerBorderColor": "{palette.color.mosqueDark}"
632
632
  }
633
633
  },
634
634
  {
@@ -643,7 +643,7 @@
643
643
  "tokens": {
644
644
  "alignSelf": "{system.flexAlign.flexStart}",
645
645
  "backgroundColor": "{palette.color.mosque}",
646
- "borderColor": "{palette.color.darkMosque}",
646
+ "borderColor": "{palette.color.mosqueDark}",
647
647
  "borderRadius": "{palette.radius.radius4}",
648
648
  "borderWidth": "{palette.border.none}",
649
649
  "color": "{palette.color.white}",
@@ -670,10 +670,52 @@
670
670
  }
671
671
  },
672
672
  "Card": {
673
- "appearances": {},
674
- "rules": [],
673
+ "appearances": {
674
+ "background": {
675
+ "description": "Defines background related attributes of Card",
676
+ "type": "variant",
677
+ "values": ["alternative", "subtle", "grid", "feature"]
678
+ }
679
+ },
680
+ "rules": [
681
+ {
682
+ "if": {
683
+ "background": "alternative"
684
+ },
685
+ "tokens": {
686
+ "backgroundColor": "{palette.color.icicle}"
687
+ }
688
+ },
689
+ {
690
+ "if": {
691
+ "background": "subtle"
692
+ },
693
+ "tokens": {
694
+ "backgroundColor": "{palette.color.carouselPink}",
695
+ "borderRadius": "{palette.radius.radius8}"
696
+ }
697
+ },
698
+ {
699
+ "if": {
700
+ "background": "grid"
701
+ },
702
+ "tokens": {
703
+ "borderColor": "{palette.color.mosque}",
704
+ "borderRadius": "{palette.radius.radius8}",
705
+ "borderWidth": "{palette.border.border1}"
706
+ }
707
+ },
708
+ {
709
+ "if": {
710
+ "background": "feature"
711
+ },
712
+ "tokens": {
713
+ "backgroundColor": "{palette.color.texas}"
714
+ }
715
+ }
716
+ ],
675
717
  "tokens": {
676
- "backgroundColor": "{palette.color.texas}",
718
+ "backgroundColor": "{palette.color.white}",
677
719
  "borderColor": "{system.color.none}",
678
720
  "borderRadius": "{palette.radius.none}",
679
721
  "borderWidth": "{palette.border.none}",
@@ -756,9 +798,9 @@
756
798
  "pressed": true
757
799
  },
758
800
  "tokens": {
759
- "borderBottomColor": "{palette.color.darkMosque}",
801
+ "borderBottomColor": "{palette.color.mosqueDark}",
760
802
  "borderBottomWidth": "{palette.border.border2}",
761
- "color": "{palette.color.darkMosque}"
803
+ "color": "{palette.color.mosqueDark}"
762
804
  }
763
805
  },
764
806
  {
@@ -867,13 +909,186 @@
867
909
  }
868
910
  },
869
911
  "ChevronLink": {
870
- "appearances": {},
871
- "rules": [],
912
+ "appearances": {
913
+ "alternative": {
914
+ "type": "variant",
915
+ "values": [true]
916
+ },
917
+ "focus": "{appearances.ChevronLink.focus}",
918
+ "hover": "{appearances.ChevronLink.hover}",
919
+ "inverse": {
920
+ "type": "variant",
921
+ "values": [true]
922
+ },
923
+ "pressed": "{appearances.ChevronLink.pressed}",
924
+ "size": {
925
+ "description": "Sets the size of the text and icon; these variants are shared with ChevronLink",
926
+ "type": "variant",
927
+ "values": ["large", "small", "micro"]
928
+ }
929
+ },
930
+ "rules": [
931
+ {
932
+ "if": {
933
+ "hover": true
934
+ },
935
+ "tokens": {
936
+ "color": "{palette.color.mosqueDark}"
937
+ }
938
+ },
939
+ {
940
+ "if": {
941
+ "pressed": true
942
+ },
943
+ "tokens": {
944
+ "color": "{palette.color.mortar}"
945
+ }
946
+ },
947
+ {
948
+ "if": {
949
+ "focus": true
950
+ },
951
+ "tokens": {
952
+ "color": "{palette.color.mosque}",
953
+ "outerBorderColor": "{palette.color.mosque}"
954
+ }
955
+ },
956
+ {
957
+ "if": {
958
+ "focus": true,
959
+ "pressed": true
960
+ },
961
+ "tokens": {
962
+ "color": "{palette.color.mosqueDark}",
963
+ "outerBorderColor": "{palette.color.mosqueDark}"
964
+ }
965
+ },
966
+ {
967
+ "if": {
968
+ "alternative": true
969
+ },
970
+ "tokens": {
971
+ "color": "{palette.color.dove}"
972
+ }
973
+ },
974
+ {
975
+ "if": {
976
+ "alternative": true,
977
+ "hover": true
978
+ },
979
+ "tokens": {
980
+ "color": "{palette.color.doveDark}"
981
+ }
982
+ },
983
+ {
984
+ "if": {
985
+ "alternative": true,
986
+ "pressed": true
987
+ },
988
+ "tokens": {
989
+ "color": "{palette.color.mortar}"
990
+ }
991
+ },
992
+ {
993
+ "if": {
994
+ "alternative": true,
995
+ "focus": true
996
+ },
997
+ "tokens": {
998
+ "color": "{palette.color.dove}",
999
+ "outerBorderColor": "{palette.color.dove}"
1000
+ }
1001
+ },
1002
+ {
1003
+ "if": {
1004
+ "alternative": true,
1005
+ "focus": true,
1006
+ "pressed": true
1007
+ },
1008
+ "tokens": {
1009
+ "color": "{palette.color.doveDark}",
1010
+ "outerBorderColor": "{palette.color.doveDark}"
1011
+ }
1012
+ },
1013
+ {
1014
+ "if": {
1015
+ "inverse": true
1016
+ },
1017
+ "tokens": {
1018
+ "color": "{palette.color.icicle}"
1019
+ }
1020
+ },
1021
+ {
1022
+ "if": {
1023
+ "hover": true,
1024
+ "inverse": true
1025
+ },
1026
+ "tokens": {
1027
+ "color": "{palette.color.icicleDark}"
1028
+ }
1029
+ },
1030
+ {
1031
+ "if": {
1032
+ "inverse": true,
1033
+ "pressed": true
1034
+ },
1035
+ "tokens": {
1036
+ "color": "{palette.color.silver}"
1037
+ }
1038
+ },
1039
+ {
1040
+ "if": {
1041
+ "focus": true,
1042
+ "inverse": true
1043
+ },
1044
+ "tokens": {
1045
+ "color": "{palette.color.icicle}",
1046
+ "outerBorderColor": "{palette.color.icicle}"
1047
+ }
1048
+ },
1049
+ {
1050
+ "if": {
1051
+ "focus": true,
1052
+ "inverse": true,
1053
+ "pressed": true
1054
+ },
1055
+ "tokens": {
1056
+ "color": "{palette.color.icicleDark}",
1057
+ "outerBorderColor": "{palette.color.icicleDark}"
1058
+ }
1059
+ },
1060
+ {
1061
+ "if": {
1062
+ "size": "large"
1063
+ },
1064
+ "tokens": {
1065
+ "iconSize": "{palette.size.size24}"
1066
+ }
1067
+ },
1068
+ {
1069
+ "if": {
1070
+ "size": "small"
1071
+ },
1072
+ "tokens": {
1073
+ "iconSize": "{palette.size.size20}"
1074
+ }
1075
+ },
1076
+ {
1077
+ "if": {
1078
+ "size": "micro"
1079
+ },
1080
+ "tokens": {
1081
+ "iconSize": "{palette.size.size16}"
1082
+ }
1083
+ }
1084
+ ],
872
1085
  "tokens": {
873
- "iconDisplace": "{palette.size.size4}",
1086
+ "color": "{palette.color.mosque}",
1087
+ "iconDisplace": "{palette.size.size0}",
874
1088
  "iconSize": "{palette.size.size24}",
875
- "iconSpace": "{system.integer.0}",
1089
+ "iconSpace": "{system.integer.1}",
876
1090
  "leftIcon": "{palette.icon.ChevronLeft}",
1091
+ "outerBorderColor": "{palette.color.transparent}",
877
1092
  "rightIcon": "{palette.icon.ChevronRight}",
878
1093
  "textLine": "{system.textLine.none}"
879
1094
  }
@@ -1063,8 +1278,8 @@
1063
1278
  },
1064
1279
  "tokens": {
1065
1280
  "backgroundColor": "{palette.color.texas}",
1066
- "borderColor": "{palette.color.darkMosque}",
1067
- "iconColor": "{palette.color.darkMosque}"
1281
+ "borderColor": "{palette.color.mosqueDark}",
1282
+ "iconColor": "{palette.color.mosqueDark}"
1068
1283
  }
1069
1284
  },
1070
1285
  {
@@ -1312,7 +1527,7 @@
1312
1527
  "hover": true
1313
1528
  },
1314
1529
  "tokens": {
1315
- "color": "{palette.color.darkMosque}",
1530
+ "color": "{palette.color.mosqueDark}",
1316
1531
  "textLine": "{system.textLine.none}"
1317
1532
  }
1318
1533
  },
@@ -1833,7 +2048,7 @@
1833
2048
  "backgroundColor": "{palette.color.mosque}",
1834
2049
  "borderRadius": "{palette.radius.radius12}",
1835
2050
  "gradient": "{system.gradient.none}",
1836
- "outlineColor": "{palette.color.darkMosque}",
2051
+ "outlineColor": "{palette.color.mosqueDark}",
1837
2052
  "outlineWidth": "{palette.border.border1}"
1838
2053
  }
1839
2054
  },
@@ -1874,8 +2089,8 @@
1874
2089
  "hover": true
1875
2090
  },
1876
2091
  "tokens": {
1877
- "backgroundColor": "{palette.color.darkMosque}",
1878
- "borderColor": "{palette.color.darkMosque}",
2092
+ "backgroundColor": "{palette.color.mosqueDark}",
2093
+ "borderColor": "{palette.color.mosqueDark}",
1879
2094
  "color": "{palette.color.white}"
1880
2095
  }
1881
2096
  },
@@ -2137,7 +2352,7 @@
2137
2352
  "tokens": {
2138
2353
  "outerBorderColor": "{palette.color.gallery}",
2139
2354
  "outerBorderWidth": "{palette.border.border2}",
2140
- "radioInputBorderColor": "{palette.color.darkMosque}"
2355
+ "radioInputBorderColor": "{palette.color.mosqueDark}"
2141
2356
  }
2142
2357
  },
2143
2358
  {
@@ -2149,7 +2364,7 @@
2149
2364
  "backgroundColor": "{palette.color.gallery}",
2150
2365
  "outerBorderColor": "{palette.color.gallery}",
2151
2366
  "outerBorderWidth": "{palette.border.border2}",
2152
- "radioInputBorderColor": "{palette.color.darkMosque}"
2367
+ "radioInputBorderColor": "{palette.color.mosqueDark}"
2153
2368
  }
2154
2369
  },
2155
2370
  {
@@ -2160,7 +2375,7 @@
2160
2375
  "outerBorderColor": "{palette.color.dove}",
2161
2376
  "outerBorderGap": "{palette.size.size4}",
2162
2377
  "outerBorderWidth": "{palette.border.border2}",
2163
- "radioInputBorderColor": "{palette.color.darkMosque}"
2378
+ "radioInputBorderColor": "{palette.color.mosqueDark}"
2164
2379
  }
2165
2380
  },
2166
2381
  {
@@ -2339,8 +2554,8 @@
2339
2554
  "hover": true
2340
2555
  },
2341
2556
  "tokens": {
2342
- "backgroundColor": "{palette.color.darkMosque}",
2343
- "borderColor": "{palette.color.darkMosque}",
2557
+ "backgroundColor": "{palette.color.mosqueDark}",
2558
+ "borderColor": "{palette.color.mosqueDark}",
2344
2559
  "iconColor": "{palette.color.white}"
2345
2560
  }
2346
2561
  },
@@ -2626,7 +2841,7 @@
2626
2841
  "appearances": {},
2627
2842
  "rules": [],
2628
2843
  "tokens": {
2629
- "backgroundColor": "{palette.color.darkMosque}",
2844
+ "backgroundColor": "{palette.color.mosqueDark}",
2630
2845
  "borderRadius": "{palette.radius.radius12}",
2631
2846
  "color": "{palette.color.white}",
2632
2847
  "outlineColor": "{palette.color.mosque}",
@@ -2849,8 +3064,8 @@
2849
3064
  "hover": true
2850
3065
  },
2851
3066
  "tokens": {
2852
- "backgroundColor": "{palette.color.darkMosque}",
2853
- "iconColor": "{palette.color.darkMosque}"
3067
+ "backgroundColor": "{palette.color.mosqueDark}",
3068
+ "iconColor": "{palette.color.mosqueDark}"
2854
3069
  }
2855
3070
  },
2856
3071
  {
@@ -2902,14 +3117,14 @@
2902
3117
  "selected": true
2903
3118
  },
2904
3119
  "tokens": {
2905
- "outerBorderColor": "{palette.color.darkMosque}"
3120
+ "outerBorderColor": "{palette.color.mosqueDark}"
2906
3121
  }
2907
3122
  }
2908
3123
  ],
2909
3124
  "tokens": {
2910
3125
  "alignSelf": "{system.flexAlign.center}",
2911
3126
  "backgroundColor": "{palette.color.mosque}",
2912
- "borderColor": "{palette.color.darkMosque}",
3127
+ "borderColor": "{palette.color.mosqueDark}",
2913
3128
  "borderRadius": "{palette.radius.radius4}",
2914
3129
  "borderWidth": "{palette.border.none}",
2915
3130
  "color": "{palette.color.white}",
@@ -3097,7 +3312,7 @@
3097
3312
  "hover": true
3098
3313
  },
3099
3314
  "tokens": {
3100
- "backgroundColor": "{palette.color.darkMosque}"
3315
+ "backgroundColor": "{palette.color.mosqueDark}"
3101
3316
  }
3102
3317
  },
3103
3318
  {
@@ -3234,7 +3449,7 @@
3234
3449
  },
3235
3450
  "tokens": {
3236
3451
  "backgroundColor": "{palette.color.white}",
3237
- "color": "{palette.color.darkMosque}"
3452
+ "color": "{palette.color.mosqueDark}"
3238
3453
  }
3239
3454
  }
3240
3455
  ],
@@ -3242,7 +3457,7 @@
3242
3457
  "arrowBorderRadius": "{palette.radius.none}",
3243
3458
  "arrowOffset": "{palette.size.size4}",
3244
3459
  "arrowWidth": "{palette.size.size8}",
3245
- "backgroundColor": "{palette.color.darkMosque}",
3460
+ "backgroundColor": "{palette.color.mosqueDark}",
3246
3461
  "borderRadius": "{palette.radius.radius4}",
3247
3462
  "color": "{palette.color.white}",
3248
3463
  "fontName": "{palette.fontName.StagSans}",
@@ -3276,7 +3491,7 @@
3276
3491
  "pressed": true
3277
3492
  },
3278
3493
  "tokens": {
3279
- "iconColor": "{palette.color.darkMosque}"
3494
+ "iconColor": "{palette.color.mosqueDark}"
3280
3495
  }
3281
3496
  },
3282
3497
  {
@@ -3284,7 +3499,7 @@
3284
3499
  "focus": true
3285
3500
  },
3286
3501
  "tokens": {
3287
- "outerBorderColor": "{palette.color.darkMosque}"
3502
+ "outerBorderColor": "{palette.color.mosqueDark}"
3288
3503
  }
3289
3504
  }
3290
3505
  ],