@telus-uds/theme-public-mobile 2.3.2 → 2.5.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 +587 -533
  2. package/build/android/theme.json +275 -60
  3. package/build/ios/schema.json +587 -533
  4. package/build/ios/theme.json +275 -60
  5. package/build/rn/schema.json +587 -533
  6. package/build/rn/theme.js +175 -71
  7. package/package.json +3 -3
  8. package/theme.json +223 -94
package/build/android/theme.json CHANGED
@@ -36,6 +36,10 @@
36
36
  "type": "variant",
37
37
  "values": [true]
38
38
  },
39
+ "inverse": {
40
+ "type": "variant",
41
+ "values": [true]
42
+ },
39
43
  "outline": {
40
44
  "type": "variant",
41
45
  "values": [true]
@@ -46,6 +50,31 @@
46
50
  }
47
51
  },
48
52
  "rules": [
53
+ {
54
+ "if": {
55
+ "inverse": true
56
+ },
57
+ "tokens": {
58
+ "backgroundColor": {
59
+ "red": 0,
60
+ "green": 0,
61
+ "blue": 0,
62
+ "alpha": 0
63
+ },
64
+ "borderColor": {
65
+ "red": 1,
66
+ "green": 1,
67
+ "blue": 1,
68
+ "alpha": 1
69
+ },
70
+ "color": {
71
+ "red": 1,
72
+ "green": 1,
73
+ "blue": 1,
74
+ "alpha": 1
75
+ }
76
+ }
77
+ },
49
78
  {
50
79
  "if": {
51
80
  "alternative": true
@@ -1798,6 +1827,10 @@
1798
1827
  "type": "variant",
1799
1828
  "values": ["alternative", "subtle", "grid", "image", "feature"]
1800
1829
  },
1830
+ "borderRadius": {
1831
+ "type": "variant",
1832
+ "values": ["none", "small", "large"]
1833
+ },
1801
1834
  "padding": {
1802
1835
  "type": "variant",
1803
1836
  "values": ["narrow", "intermediate", "compact", "custom"]
@@ -1809,6 +1842,30 @@
1809
1842
  }
1810
1843
  },
1811
1844
  "rules": [
1845
+ {
1846
+ "if": {
1847
+ "borderRadius": "none"
1848
+ },
1849
+ "tokens": {
1850
+ "borderRadius": 0
1851
+ }
1852
+ },
1853
+ {
1854
+ "if": {
1855
+ "borderRadius": "small"
1856
+ },
1857
+ "tokens": {
1858
+ "borderRadius": 6
1859
+ }
1860
+ },
1861
+ {
1862
+ "if": {
1863
+ "borderRadius": "large"
1864
+ },
1865
+ "tokens": {
1866
+ "borderRadius": 6
1867
+ }
1868
+ },
1812
1869
  {
1813
1870
  "if": {
1814
1871
  "background": "alternative"
@@ -3496,8 +3553,60 @@
3496
3553
  }
3497
3554
  },
3498
3555
  "Footnote": {
3499
- "appearances": {},
3500
- "rules": [],
3556
+ "appearances": {
3557
+ "viewport": {
3558
+ "description": "The size label for the current screen viewport based on the current screen width",
3559
+ "values": ["xs", "sm", "md", "lg", "xl"],
3560
+ "type": "state"
3561
+ }
3562
+ },
3563
+ "rules": [
3564
+ {
3565
+ "if": {
3566
+ "viewport": ["xs"]
3567
+ },
3568
+ "tokens": {
3569
+ "footnoteBodyPaddingBottom": 32,
3570
+ "footnoteBodyPaddingLeft": 16,
3571
+ "footnoteBodyPaddingRight": 16,
3572
+ "footnoteBodyPaddingTop": 0,
3573
+ "footnoteHeaderPaddingBottom": 16,
3574
+ "footnoteHeaderPaddingLeft": 16,
3575
+ "footnoteHeaderPaddingRight": 4,
3576
+ "footnoteHeaderPaddingTop": 16
3577
+ }
3578
+ },
3579
+ {
3580
+ "if": {
3581
+ "viewport": ["md", "lg"]
3582
+ },
3583
+ "tokens": {
3584
+ "footnoteBodyPaddingBottom": 40,
3585
+ "footnoteBodyPaddingLeft": 16,
3586
+ "footnoteBodyPaddingRight": 16,
3587
+ "footnoteBodyPaddingTop": 0,
3588
+ "footnoteHeaderPaddingBottom": 24,
3589
+ "footnoteHeaderPaddingLeft": 16,
3590
+ "footnoteHeaderPaddingRight": 4,
3591
+ "footnoteHeaderPaddingTop": 24
3592
+ }
3593
+ },
3594
+ {
3595
+ "if": {
3596
+ "viewport": ["xl"]
3597
+ },
3598
+ "tokens": {
3599
+ "footnoteBodyPaddingBottom": 40,
3600
+ "footnoteBodyPaddingLeft": 16,
3601
+ "footnoteBodyPaddingRight": 16,
3602
+ "footnoteBodyPaddingTop": 0,
3603
+ "footnoteHeaderPaddingBottom": 24,
3604
+ "footnoteHeaderPaddingLeft": 16,
3605
+ "footnoteHeaderPaddingRight": 16,
3606
+ "footnoteHeaderPaddingTop": 24
3607
+ }
3608
+ }
3609
+ ],
3501
3610
  "tokens": {
3502
3611
  "closeButtonBackgroundColor": {
3503
3612
  "red": 1,
@@ -3545,7 +3654,7 @@
3545
3654
  "footnoteBorderTopSizeMd": 1,
3546
3655
  "footnoteHeaderPaddingBottom": 24,
3547
3656
  "footnoteHeaderPaddingLeft": 16,
3548
- "footnoteHeaderPaddingRight": 16,
3657
+ "footnoteHeaderPaddingRight": 4,
3549
3658
  "footnoteHeaderPaddingTop": 24,
3550
3659
  "headerFontName": "SofiaPro",
3551
3660
  "headerFontSize": 16,
@@ -4048,6 +4157,59 @@
4048
4157
  "outerBorderGap": 4
4049
4158
  }
4050
4159
  },
4160
+ {
4161
+ "if": {
4162
+ "password": true,
4163
+ "pressed": true
4164
+ },
4165
+ "tokens": {
4166
+ "backgroundColor": {
4167
+ "red": 0.38824,
4168
+ "green": 0.42353,
4169
+ "blue": 0.54902,
4170
+ "alpha": 1
4171
+ },
4172
+ "borderColor": {
4173
+ "red": 0.38824,
4174
+ "green": 0.42353,
4175
+ "blue": 0.54902,
4176
+ "alpha": 1
4177
+ },
4178
+ "borderWidth": 1,
4179
+ "iconColor": {
4180
+ "red": 1,
4181
+ "green": 1,
4182
+ "blue": 1,
4183
+ "alpha": 1
4184
+ },
4185
+ "outerBorderGap": 0,
4186
+ "outerBorderWidth": 0
4187
+ }
4188
+ },
4189
+ {
4190
+ "if": {
4191
+ "inactive": true,
4192
+ "password": true,
4193
+ "pressed": true
4194
+ },
4195
+ "tokens": {
4196
+ "backgroundColor": {
4197
+ "red": 0,
4198
+ "green": 0,
4199
+ "blue": 0,
4200
+ "alpha": 0
4201
+ },
4202
+ "borderColor": {
4203
+ "red": 0,
4204
+ "green": 0,
4205
+ "blue": 0,
4206
+ "alpha": 0
4207
+ },
4208
+ "borderWidth": 0,
4209
+ "outerBorderGap": 0,
4210
+ "outerBorderWidth": 0
4211
+ }
4212
+ },
4051
4213
  {
4052
4214
  "if": {
4053
4215
  "inverse": true,
@@ -4192,35 +4354,40 @@
4192
4354
  }
4193
4355
  }
4194
4356
  },
4195
- {
4196
- "if": {
4197
- "compact": true
4198
- },
4199
- "tokens": {
4200
- "outerBorderGap": 0
4201
- }
4202
- },
4203
4357
  {
4204
4358
  "if": {
4205
4359
  "inactive": true,
4206
4360
  "password": true
4207
4361
  },
4208
4362
  "tokens": {
4363
+ "backgroundColor": {
4364
+ "red": 0,
4365
+ "green": 0,
4366
+ "blue": 0,
4367
+ "alpha": 0
4368
+ },
4369
+ "borderWidth": 0,
4209
4370
  "iconColor": {
4210
4371
  "red": 0.61176,
4211
4372
  "green": 0.62353,
4212
4373
  "blue": 0.66667,
4213
4374
  "alpha": 1
4214
4375
  },
4376
+ "outerBorderColor": {
4377
+ "red": 0,
4378
+ "green": 0,
4379
+ "blue": 0,
4380
+ "alpha": 0
4381
+ },
4215
4382
  "outerBorderWidth": 0
4216
4383
  }
4217
4384
  },
4218
4385
  {
4219
4386
  "if": {
4220
- "password": true
4387
+ "compact": true
4221
4388
  },
4222
4389
  "tokens": {
4223
- "outerBorderWidth": 0
4390
+ "outerBorderGap": 0
4224
4391
  }
4225
4392
  }
4226
4393
  ],
@@ -4247,6 +4414,7 @@
4247
4414
  "borderTopRightRadius": null,
4248
4415
  "borderTopWidth": 1,
4249
4416
  "borderWidth": 2,
4417
+ "height": null,
4250
4418
  "icon": "PaletteIconAdd",
4251
4419
  "iconColor": {
4252
4420
  "red": 0.38824,
@@ -4267,7 +4435,8 @@
4267
4435
  "outerBorderGap": 0,
4268
4436
  "outerBorderWidth": 0,
4269
4437
  "padding": 4,
4270
- "shadow": null
4438
+ "shadow": null,
4439
+ "width": null
4271
4440
  }
4272
4441
  },
4273
4442
  "Image": {
@@ -8707,13 +8876,13 @@
8707
8876
  "rules": [
8708
8877
  {
8709
8878
  "if": {
8710
- "pressed": true
8879
+ "selected": true
8711
8880
  },
8712
8881
  "tokens": {
8713
8882
  "backgroundColor": {
8714
- "red": 0.16863,
8715
- "green": 0.19216,
8716
- "blue": 0.27059,
8883
+ "red": 0.97647,
8884
+ "green": 0.94902,
8885
+ "blue": 0.86667,
8717
8886
  "alpha": 1
8718
8887
  },
8719
8888
  "borderColor": {
@@ -8722,23 +8891,23 @@
8722
8891
  "blue": 0.54902,
8723
8892
  "alpha": 1
8724
8893
  },
8725
- "borderWidth": 1,
8726
8894
  "color": {
8727
- "red": 1,
8728
- "green": 1,
8729
- "blue": 1,
8895
+ "red": 0.22353,
8896
+ "green": 0.25098,
8897
+ "blue": 0.33725,
8730
8898
  "alpha": 1
8731
8899
  },
8900
+ "icon": "PaletteIconXMark",
8732
8901
  "iconBackground": {
8733
- "red": 0,
8734
- "green": 0,
8735
- "blue": 0,
8736
- "alpha": 0
8902
+ "red": 0.16863,
8903
+ "green": 0.19216,
8904
+ "blue": 0.27059,
8905
+ "alpha": 1
8737
8906
  },
8738
8907
  "iconColor": {
8739
- "red": 1,
8740
- "green": 1,
8741
- "blue": 1,
8908
+ "red": 0.97647,
8909
+ "green": 0.94902,
8910
+ "blue": 0.86667,
8742
8911
  "alpha": 1
8743
8912
  },
8744
8913
  "outerBorderColor": {
@@ -8752,13 +8921,14 @@
8752
8921
  },
8753
8922
  {
8754
8923
  "if": {
8924
+ "pressed": true,
8755
8925
  "selected": true
8756
8926
  },
8757
8927
  "tokens": {
8758
8928
  "backgroundColor": {
8759
- "red": 0.22353,
8760
- "green": 0.25098,
8761
- "blue": 0.33725,
8929
+ "red": 0.16863,
8930
+ "green": 0.19216,
8931
+ "blue": 0.27059,
8762
8932
  "alpha": 1
8763
8933
  },
8764
8934
  "borderColor": {
@@ -8767,23 +8937,68 @@
8767
8937
  "blue": 0.54902,
8768
8938
  "alpha": 1
8769
8939
  },
8940
+ "borderWidth": 1,
8770
8941
  "color": {
8771
- "red": 1,
8772
- "green": 1,
8773
- "blue": 1,
8942
+ "red": 0.97647,
8943
+ "green": 0.94902,
8944
+ "blue": 0.86667,
8774
8945
  "alpha": 1
8775
8946
  },
8776
- "icon": "PaletteIconXMark",
8777
8947
  "iconBackground": {
8948
+ "red": 0.97647,
8949
+ "green": 0.94902,
8950
+ "blue": 0.86667,
8951
+ "alpha": 1
8952
+ },
8953
+ "iconColor": {
8954
+ "red": 0.16863,
8955
+ "green": 0.19216,
8956
+ "blue": 0.27059,
8957
+ "alpha": 1
8958
+ },
8959
+ "outerBorderColor": {
8778
8960
  "red": 0,
8779
8961
  "green": 0,
8780
8962
  "blue": 0,
8781
8963
  "alpha": 0
8782
8964
  },
8965
+ "outerBorderWidth": 0
8966
+ }
8967
+ },
8968
+ {
8969
+ "if": {
8970
+ "pressed": true
8971
+ },
8972
+ "tokens": {
8973
+ "backgroundColor": {
8974
+ "red": 0.16863,
8975
+ "green": 0.19216,
8976
+ "blue": 0.27059,
8977
+ "alpha": 1
8978
+ },
8979
+ "borderColor": {
8980
+ "red": 0.38824,
8981
+ "green": 0.42353,
8982
+ "blue": 0.54902,
8983
+ "alpha": 1
8984
+ },
8985
+ "borderWidth": 1,
8986
+ "color": {
8987
+ "red": 0.97647,
8988
+ "green": 0.94902,
8989
+ "blue": 0.86667,
8990
+ "alpha": 1
8991
+ },
8992
+ "iconBackground": {
8993
+ "red": 0.97647,
8994
+ "green": 0.94902,
8995
+ "blue": 0.86667,
8996
+ "alpha": 1
8997
+ },
8783
8998
  "iconColor": {
8784
- "red": 1,
8785
- "green": 1,
8786
- "blue": 1,
8999
+ "red": 0.16863,
9000
+ "green": 0.19216,
9001
+ "blue": 0.27059,
8787
9002
  "alpha": 1
8788
9003
  },
8789
9004
  "outerBorderColor": {
@@ -8820,16 +9035,16 @@
8820
9035
  "alpha": 1
8821
9036
  },
8822
9037
  "iconBackground": {
8823
- "red": 0,
8824
- "green": 0,
8825
- "blue": 0,
8826
- "alpha": 0
8827
- },
8828
- "iconColor": {
8829
9038
  "red": 0.80392,
8830
9039
  "green": 0.81176,
8831
9040
  "blue": 0.83529,
8832
9041
  "alpha": 1
9042
+ },
9043
+ "iconColor": {
9044
+ "red": 1,
9045
+ "green": 1,
9046
+ "blue": 1,
9047
+ "alpha": 1
8833
9048
  }
8834
9049
  }
8835
9050
  }
@@ -8837,9 +9052,9 @@
8837
9052
  "tokens": {
8838
9053
  "alignSelf": "center",
8839
9054
  "backgroundColor": {
8840
- "red": 0.84706,
8841
- "green": 0.8549,
8842
- "blue": 0.88627,
9055
+ "red": 0.98824,
9056
+ "green": 0.97255,
9057
+ "blue": 0.93333,
8843
9058
  "alpha": 1
8844
9059
  },
8845
9060
  "borderColor": {
@@ -8848,7 +9063,7 @@
8848
9063
  "blue": 0.54902,
8849
9064
  "alpha": 1
8850
9065
  },
8851
- "borderRadius": 8,
9066
+ "borderRadius": 32,
8852
9067
  "borderWidth": 1,
8853
9068
  "color": {
8854
9069
  "red": 0.22353,
@@ -8858,25 +9073,25 @@
8858
9073
  },
8859
9074
  "fontName": "SofiaPro",
8860
9075
  "fontSize": 18,
8861
- "fontWeight": 400,
9076
+ "fontWeight": 700,
8862
9077
  "icon": "PaletteIconAdd",
8863
9078
  "iconAlignSelf": "center",
8864
9079
  "iconBackground": {
8865
- "red": 0,
8866
- "green": 0,
8867
- "blue": 0,
8868
- "alpha": 0
8869
- },
8870
- "iconBorderRadius": 32,
8871
- "iconColor": {
8872
9080
  "red": 0.22353,
8873
9081
  "green": 0.25098,
8874
9082
  "blue": 0.33725,
8875
9083
  "alpha": 1
8876
9084
  },
9085
+ "iconBorderRadius": 48,
9086
+ "iconColor": {
9087
+ "red": 0.97647,
9088
+ "green": 0.94902,
9089
+ "blue": 0.86667,
9090
+ "alpha": 1
9091
+ },
8877
9092
  "iconPadding": 2,
8878
9093
  "iconPosition": "right",
8879
- "iconSize": 20,
9094
+ "iconSize": 16,
8880
9095
  "iconSpace": 1,
8881
9096
  "iconTranslateX": 0,
8882
9097
  "iconTranslateY": 0,
@@ -8898,8 +9113,8 @@
8898
9113
  "outerBorderGap": 2,
8899
9114
  "outerBorderWidth": 0,
8900
9115
  "paddingBottom": 10,
8901
- "paddingLeft": 16,
8902
- "paddingRight": 16,
9116
+ "paddingLeft": 11,
9117
+ "paddingRight": 11,
8903
9118
  "paddingTop": 10,
8904
9119
  "shadow": null,
8905
9120
  "textAlign": "center"