@telus-uds/theme-koodo 3.10.0 → 3.12.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}",
@@ -756,9 +756,9 @@
756
756
  "pressed": true
757
757
  },
758
758
  "tokens": {
759
- "borderBottomColor": "{palette.color.darkMosque}",
759
+ "borderBottomColor": "{palette.color.mosqueDark}",
760
760
  "borderBottomWidth": "{palette.border.border2}",
761
- "color": "{palette.color.darkMosque}"
761
+ "color": "{palette.color.mosqueDark}"
762
762
  }
763
763
  },
764
764
  {
@@ -867,13 +867,186 @@
867
867
  }
868
868
  },
869
869
  "ChevronLink": {
870
- "appearances": {},
871
- "rules": [],
870
+ "appearances": {
871
+ "alternative": {
872
+ "type": "variant",
873
+ "values": [true]
874
+ },
875
+ "focus": "{appearances.ChevronLink.focus}",
876
+ "hover": "{appearances.ChevronLink.hover}",
877
+ "inverse": {
878
+ "type": "variant",
879
+ "values": [true]
880
+ },
881
+ "pressed": "{appearances.ChevronLink.pressed}",
882
+ "size": {
883
+ "description": "Sets the size of the text and icon; these variants are shared with ChevronLink",
884
+ "type": "variant",
885
+ "values": ["large", "small", "micro"]
886
+ }
887
+ },
888
+ "rules": [
889
+ {
890
+ "if": {
891
+ "hover": true
892
+ },
893
+ "tokens": {
894
+ "color": "{palette.color.mosqueDark}"
895
+ }
896
+ },
897
+ {
898
+ "if": {
899
+ "pressed": true
900
+ },
901
+ "tokens": {
902
+ "color": "{palette.color.mortar}"
903
+ }
904
+ },
905
+ {
906
+ "if": {
907
+ "focus": true
908
+ },
909
+ "tokens": {
910
+ "color": "{palette.color.mosque}",
911
+ "outerBorderColor": "{palette.color.mosque}"
912
+ }
913
+ },
914
+ {
915
+ "if": {
916
+ "focus": true,
917
+ "pressed": true
918
+ },
919
+ "tokens": {
920
+ "color": "{palette.color.mosqueDark}",
921
+ "outerBorderColor": "{palette.color.mosqueDark}"
922
+ }
923
+ },
924
+ {
925
+ "if": {
926
+ "alternative": true
927
+ },
928
+ "tokens": {
929
+ "color": "{palette.color.dove}"
930
+ }
931
+ },
932
+ {
933
+ "if": {
934
+ "alternative": true,
935
+ "hover": true
936
+ },
937
+ "tokens": {
938
+ "color": "{palette.color.doveDark}"
939
+ }
940
+ },
941
+ {
942
+ "if": {
943
+ "alternative": true,
944
+ "pressed": true
945
+ },
946
+ "tokens": {
947
+ "color": "{palette.color.mortar}"
948
+ }
949
+ },
950
+ {
951
+ "if": {
952
+ "alternative": true,
953
+ "focus": true
954
+ },
955
+ "tokens": {
956
+ "color": "{palette.color.dove}",
957
+ "outerBorderColor": "{palette.color.dove}"
958
+ }
959
+ },
960
+ {
961
+ "if": {
962
+ "alternative": true,
963
+ "focus": true,
964
+ "pressed": true
965
+ },
966
+ "tokens": {
967
+ "color": "{palette.color.doveDark}",
968
+ "outerBorderColor": "{palette.color.doveDark}"
969
+ }
970
+ },
971
+ {
972
+ "if": {
973
+ "inverse": true
974
+ },
975
+ "tokens": {
976
+ "color": "{palette.color.icicle}"
977
+ }
978
+ },
979
+ {
980
+ "if": {
981
+ "hover": true,
982
+ "inverse": true
983
+ },
984
+ "tokens": {
985
+ "color": "{palette.color.icicleDark}"
986
+ }
987
+ },
988
+ {
989
+ "if": {
990
+ "inverse": true,
991
+ "pressed": true
992
+ },
993
+ "tokens": {
994
+ "color": "{palette.color.silver}"
995
+ }
996
+ },
997
+ {
998
+ "if": {
999
+ "focus": true,
1000
+ "inverse": true
1001
+ },
1002
+ "tokens": {
1003
+ "color": "{palette.color.icicle}",
1004
+ "outerBorderColor": "{palette.color.icicle}"
1005
+ }
1006
+ },
1007
+ {
1008
+ "if": {
1009
+ "focus": true,
1010
+ "inverse": true,
1011
+ "pressed": true
1012
+ },
1013
+ "tokens": {
1014
+ "color": "{palette.color.icicleDark}",
1015
+ "outerBorderColor": "{palette.color.icicleDark}"
1016
+ }
1017
+ },
1018
+ {
1019
+ "if": {
1020
+ "size": "large"
1021
+ },
1022
+ "tokens": {
1023
+ "iconSize": "{palette.size.size24}"
1024
+ }
1025
+ },
1026
+ {
1027
+ "if": {
1028
+ "size": "small"
1029
+ },
1030
+ "tokens": {
1031
+ "iconSize": "{palette.size.size20}"
1032
+ }
1033
+ },
1034
+ {
1035
+ "if": {
1036
+ "size": "micro"
1037
+ },
1038
+ "tokens": {
1039
+ "iconSize": "{palette.size.size16}"
1040
+ }
1041
+ }
1042
+ ],
872
1043
  "tokens": {
873
- "iconDisplace": "{palette.size.size4}",
1044
+ "color": "{palette.color.mosque}",
1045
+ "iconDisplace": "{palette.size.size0}",
874
1046
  "iconSize": "{palette.size.size24}",
875
- "iconSpace": "{system.integer.0}",
1047
+ "iconSpace": "{system.integer.1}",
876
1048
  "leftIcon": "{palette.icon.ChevronLeft}",
1049
+ "outerBorderColor": "{palette.color.transparent}",
877
1050
  "rightIcon": "{palette.icon.ChevronRight}",
878
1051
  "textLine": "{system.textLine.none}"
879
1052
  }
@@ -1063,8 +1236,8 @@
1063
1236
  },
1064
1237
  "tokens": {
1065
1238
  "backgroundColor": "{palette.color.texas}",
1066
- "borderColor": "{palette.color.darkMosque}",
1067
- "iconColor": "{palette.color.darkMosque}"
1239
+ "borderColor": "{palette.color.mosqueDark}",
1240
+ "iconColor": "{palette.color.mosqueDark}"
1068
1241
  }
1069
1242
  },
1070
1243
  {
@@ -1097,13 +1270,13 @@
1097
1270
  },
1098
1271
  "Icon": {
1099
1272
  "appearances": {
1100
- "colour": {
1273
+ "color": {
1101
1274
  "type": "variant",
1102
- "values": ["primary", "secondary", "black", "white"]
1275
+ "values": ["brand", "subtle", "offer", "success", "danger", "warning", "inverse"]
1103
1276
  },
1104
1277
  "size": {
1105
1278
  "type": "variant",
1106
- "values": ["small"]
1279
+ "values": ["micro", "small", "large", "extraLarge"]
1107
1280
  },
1108
1281
  "status": {
1109
1282
  "description": "Uses icon colour to communicate meaning to the user",
@@ -1112,6 +1285,14 @@
1112
1285
  }
1113
1286
  },
1114
1287
  "rules": [
1288
+ {
1289
+ "if": {
1290
+ "size": "micro"
1291
+ },
1292
+ "tokens": {
1293
+ "size": "{palette.size.size16}"
1294
+ }
1295
+ },
1115
1296
  {
1116
1297
  "if": {
1117
1298
  "size": "small"
@@ -1122,31 +1303,71 @@
1122
1303
  },
1123
1304
  {
1124
1305
  "if": {
1125
- "colour": "primary"
1306
+ "size": "large"
1126
1307
  },
1127
1308
  "tokens": {
1128
- "color": "{palette.color.black}"
1309
+ "size": "{palette.size.size32}"
1129
1310
  }
1130
1311
  },
1131
1312
  {
1132
1313
  "if": {
1133
- "colour": "secondary"
1314
+ "size": "extraLarge"
1134
1315
  },
1135
1316
  "tokens": {
1136
- "color": "{palette.color.blue}"
1317
+ "size": "{palette.size.size48}"
1137
1318
  }
1138
1319
  },
1139
1320
  {
1140
1321
  "if": {
1141
- "colour": "black"
1322
+ "color": "brand"
1142
1323
  },
1143
1324
  "tokens": {
1144
- "color": "{palette.color.black}"
1325
+ "color": "{palette.color.mosque}"
1145
1326
  }
1146
1327
  },
1147
1328
  {
1148
1329
  "if": {
1149
- "colour": "white"
1330
+ "color": "subtle"
1331
+ },
1332
+ "tokens": {
1333
+ "color": "{palette.color.dove}"
1334
+ }
1335
+ },
1336
+ {
1337
+ "if": {
1338
+ "color": "offer"
1339
+ },
1340
+ "tokens": {
1341
+ "color": "{palette.color.mosque}"
1342
+ }
1343
+ },
1344
+ {
1345
+ "if": {
1346
+ "color": "success"
1347
+ },
1348
+ "tokens": {
1349
+ "color": "{palette.color.mosque}"
1350
+ }
1351
+ },
1352
+ {
1353
+ "if": {
1354
+ "color": "danger"
1355
+ },
1356
+ "tokens": {
1357
+ "color": "{palette.color.amaranth}"
1358
+ }
1359
+ },
1360
+ {
1361
+ "if": {
1362
+ "color": "warning"
1363
+ },
1364
+ "tokens": {
1365
+ "color": "{palette.color.mortar}"
1366
+ }
1367
+ },
1368
+ {
1369
+ "if": {
1370
+ "color": "inverse"
1150
1371
  },
1151
1372
  "tokens": {
1152
1373
  "color": "{palette.color.white}"
@@ -1170,7 +1391,7 @@
1170
1391
  }
1171
1392
  ],
1172
1393
  "tokens": {
1173
- "color": "{palette.color.dove}",
1394
+ "color": "{palette.color.black}",
1174
1395
  "scale": "{system.integer.1}",
1175
1396
  "size": "{palette.size.size24}",
1176
1397
  "translateX": "{system.size.zero}",
@@ -1264,7 +1485,7 @@
1264
1485
  "hover": true
1265
1486
  },
1266
1487
  "tokens": {
1267
- "color": "{palette.color.darkMosque}",
1488
+ "color": "{palette.color.mosqueDark}",
1268
1489
  "textLine": "{system.textLine.none}"
1269
1490
  }
1270
1491
  },
@@ -1785,7 +2006,7 @@
1785
2006
  "backgroundColor": "{palette.color.mosque}",
1786
2007
  "borderRadius": "{palette.radius.radius12}",
1787
2008
  "gradient": "{system.gradient.none}",
1788
- "outlineColor": "{palette.color.darkMosque}",
2009
+ "outlineColor": "{palette.color.mosqueDark}",
1789
2010
  "outlineWidth": "{palette.border.border1}"
1790
2011
  }
1791
2012
  },
@@ -1826,8 +2047,8 @@
1826
2047
  "hover": true
1827
2048
  },
1828
2049
  "tokens": {
1829
- "backgroundColor": "{palette.color.darkMosque}",
1830
- "borderColor": "{palette.color.darkMosque}",
2050
+ "backgroundColor": "{palette.color.mosqueDark}",
2051
+ "borderColor": "{palette.color.mosqueDark}",
1831
2052
  "color": "{palette.color.white}"
1832
2053
  }
1833
2054
  },
@@ -2089,7 +2310,7 @@
2089
2310
  "tokens": {
2090
2311
  "outerBorderColor": "{palette.color.gallery}",
2091
2312
  "outerBorderWidth": "{palette.border.border2}",
2092
- "radioInputBorderColor": "{palette.color.darkMosque}"
2313
+ "radioInputBorderColor": "{palette.color.mosqueDark}"
2093
2314
  }
2094
2315
  },
2095
2316
  {
@@ -2101,7 +2322,7 @@
2101
2322
  "backgroundColor": "{palette.color.gallery}",
2102
2323
  "outerBorderColor": "{palette.color.gallery}",
2103
2324
  "outerBorderWidth": "{palette.border.border2}",
2104
- "radioInputBorderColor": "{palette.color.darkMosque}"
2325
+ "radioInputBorderColor": "{palette.color.mosqueDark}"
2105
2326
  }
2106
2327
  },
2107
2328
  {
@@ -2112,7 +2333,7 @@
2112
2333
  "outerBorderColor": "{palette.color.dove}",
2113
2334
  "outerBorderGap": "{palette.size.size4}",
2114
2335
  "outerBorderWidth": "{palette.border.border2}",
2115
- "radioInputBorderColor": "{palette.color.darkMosque}"
2336
+ "radioInputBorderColor": "{palette.color.mosqueDark}"
2116
2337
  }
2117
2338
  },
2118
2339
  {
@@ -2291,8 +2512,8 @@
2291
2512
  "hover": true
2292
2513
  },
2293
2514
  "tokens": {
2294
- "backgroundColor": "{palette.color.darkMosque}",
2295
- "borderColor": "{palette.color.darkMosque}",
2515
+ "backgroundColor": "{palette.color.mosqueDark}",
2516
+ "borderColor": "{palette.color.mosqueDark}",
2296
2517
  "iconColor": "{palette.color.white}"
2297
2518
  }
2298
2519
  },
@@ -2578,7 +2799,7 @@
2578
2799
  "appearances": {},
2579
2800
  "rules": [],
2580
2801
  "tokens": {
2581
- "backgroundColor": "{palette.color.darkMosque}",
2802
+ "backgroundColor": "{palette.color.mosqueDark}",
2582
2803
  "borderRadius": "{palette.radius.radius12}",
2583
2804
  "color": "{palette.color.white}",
2584
2805
  "outlineColor": "{palette.color.mosque}",
@@ -2801,8 +3022,8 @@
2801
3022
  "hover": true
2802
3023
  },
2803
3024
  "tokens": {
2804
- "backgroundColor": "{palette.color.darkMosque}",
2805
- "iconColor": "{palette.color.darkMosque}"
3025
+ "backgroundColor": "{palette.color.mosqueDark}",
3026
+ "iconColor": "{palette.color.mosqueDark}"
2806
3027
  }
2807
3028
  },
2808
3029
  {
@@ -2854,14 +3075,14 @@
2854
3075
  "selected": true
2855
3076
  },
2856
3077
  "tokens": {
2857
- "outerBorderColor": "{palette.color.darkMosque}"
3078
+ "outerBorderColor": "{palette.color.mosqueDark}"
2858
3079
  }
2859
3080
  }
2860
3081
  ],
2861
3082
  "tokens": {
2862
3083
  "alignSelf": "{system.flexAlign.center}",
2863
3084
  "backgroundColor": "{palette.color.mosque}",
2864
- "borderColor": "{palette.color.darkMosque}",
3085
+ "borderColor": "{palette.color.mosqueDark}",
2865
3086
  "borderRadius": "{palette.radius.radius4}",
2866
3087
  "borderWidth": "{palette.border.none}",
2867
3088
  "color": "{palette.color.white}",
@@ -3049,7 +3270,7 @@
3049
3270
  "hover": true
3050
3271
  },
3051
3272
  "tokens": {
3052
- "backgroundColor": "{palette.color.darkMosque}"
3273
+ "backgroundColor": "{palette.color.mosqueDark}"
3053
3274
  }
3054
3275
  },
3055
3276
  {
@@ -3186,7 +3407,7 @@
3186
3407
  },
3187
3408
  "tokens": {
3188
3409
  "backgroundColor": "{palette.color.white}",
3189
- "color": "{palette.color.darkMosque}"
3410
+ "color": "{palette.color.mosqueDark}"
3190
3411
  }
3191
3412
  }
3192
3413
  ],
@@ -3194,7 +3415,7 @@
3194
3415
  "arrowBorderRadius": "{palette.radius.none}",
3195
3416
  "arrowOffset": "{palette.size.size4}",
3196
3417
  "arrowWidth": "{palette.size.size8}",
3197
- "backgroundColor": "{palette.color.darkMosque}",
3418
+ "backgroundColor": "{palette.color.mosqueDark}",
3198
3419
  "borderRadius": "{palette.radius.radius4}",
3199
3420
  "color": "{palette.color.white}",
3200
3421
  "fontName": "{palette.fontName.StagSans}",
@@ -3228,7 +3449,7 @@
3228
3449
  "pressed": true
3229
3450
  },
3230
3451
  "tokens": {
3231
- "iconColor": "{palette.color.darkMosque}"
3452
+ "iconColor": "{palette.color.mosqueDark}"
3232
3453
  }
3233
3454
  },
3234
3455
  {
@@ -3236,7 +3457,7 @@
3236
3457
  "focus": true
3237
3458
  },
3238
3459
  "tokens": {
3239
- "outerBorderColor": "{palette.color.darkMosque}"
3460
+ "outerBorderColor": "{palette.color.mosqueDark}"
3240
3461
  }
3241
3462
  }
3242
3463
  ],