@telus-uds/theme-koodo 3.14.0 → 3.15.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": {
@@ -1254,7 +1433,7 @@
1254
1433
  "blue": 0.41569,
1255
1434
  "alpha": 1
1256
1435
  },
1257
- "iconSize": 16,
1436
+ "iconSize": 20,
1258
1437
  "inputBackgroundColor": {
1259
1438
  "red": 1,
1260
1439
  "green": 1,
@@ -1587,52 +1766,15 @@
1587
1766
  }
1588
1767
  },
1589
1768
  "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
1769
  {
1616
1770
  "if": {
1617
1771
  "validation": "error"
1618
1772
  },
1619
1773
  "tokens": {
1620
1774
  "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,
1775
+ "red": 0.97255,
1776
+ "green": 0.86667,
1777
+ "blue": 0.8902,
1636
1778
  "alpha": 1
1637
1779
  }
1638
1780
  }
@@ -1645,9 +1787,9 @@
1645
1787
  "tokens": {
1646
1788
  "icon": "PaletteIconCheckCircledFilled",
1647
1789
  "iconColor": {
1648
- "red": 0.1451,
1649
- "green": 0.5451,
1650
- "blue": 0.04314,
1790
+ "red": 0.00392,
1791
+ "green": 0.41961,
1792
+ "blue": 0.41569,
1651
1793
  "alpha": 1
1652
1794
  }
1653
1795
  }
@@ -1658,11 +1800,11 @@
1658
1800
  "validation": "error"
1659
1801
  },
1660
1802
  "tokens": {
1661
- "icon": "PaletteIconExclamationTriangle",
1803
+ "icon": "PaletteIconCaution",
1662
1804
  "iconColor": {
1663
- "red": 0.87451,
1664
- "green": 0.23922,
1665
- "blue": 0.04706,
1805
+ "red": 0.93333,
1806
+ "green": 0.17255,
1807
+ "blue": 0.4549,
1666
1808
  "alpha": 1
1667
1809
  }
1668
1810
  }
@@ -1670,23 +1812,23 @@
1670
1812
  ],
1671
1813
  "tokens": {
1672
1814
  "backgroundColor": {
1673
- "red": 0.93725,
1674
- "green": 0.93725,
1675
- "blue": 0.93725,
1815
+ "red": 0.89804,
1816
+ "green": 0.96863,
1817
+ "blue": 0.98431,
1676
1818
  "alpha": 1
1677
1819
  },
1678
1820
  "borderColor": {
1679
- "red": 0.78824,
1680
- "green": 0.78431,
1681
- "blue": 0.78431,
1682
- "alpha": 1
1821
+ "red": 0,
1822
+ "green": 0,
1823
+ "blue": 0,
1824
+ "alpha": 0
1683
1825
  },
1684
- "borderRadius": 4,
1685
- "borderWidth": 1,
1826
+ "borderRadius": 0,
1827
+ "borderWidth": 0,
1686
1828
  "color": {
1687
- "red": 0.34902,
1688
- "green": 0.34902,
1689
- "blue": 0.34902,
1829
+ "red": 0,
1830
+ "green": 0,
1831
+ "blue": 0,
1690
1832
  "alpha": 1
1691
1833
  },
1692
1834
  "contentFontSize": 14,
@@ -1700,12 +1842,12 @@
1700
1842
  "alpha": 0
1701
1843
  },
1702
1844
  "iconGap": 8,
1703
- "iconSize": 24,
1845
+ "iconSize": 20,
1704
1846
  "lineHeight": 1.5,
1705
- "paddingBottom": 10,
1847
+ "paddingBottom": 12,
1706
1848
  "paddingLeft": 16,
1707
1849
  "paddingRight": 16,
1708
- "paddingTop": 10,
1850
+ "paddingTop": 12,
1709
1851
  "space": 2,
1710
1852
  "titleFontSize": 16
1711
1853
  }
@@ -2128,10 +2270,10 @@
2128
2270
  "alpha": 1
2129
2271
  },
2130
2272
  "hintFontName": "StagSans",
2131
- "hintFontSize": 16,
2273
+ "hintFontSize": 14,
2132
2274
  "hintFontWeight": 400,
2133
- "hintLineHeight": 1.4,
2134
- "lineHeight": 1.4
2275
+ "hintLineHeight": 1.42857142857,
2276
+ "lineHeight": 1.5
2135
2277
  }
2136
2278
  },
2137
2279
  "InputSupports": {
@@ -2143,15 +2285,28 @@
2143
2285
  },
2144
2286
  "Link": {
2145
2287
  "appearances": {
2288
+ "alternative": {
2289
+ "type": "variant",
2290
+ "values": [true]
2291
+ },
2146
2292
  "iconPosition": {
2147
2293
  "description": "Theme styles to be applied to icon links depending on where the icon is in relation to the link text",
2148
2294
  "values": ["left", "right"],
2149
2295
  "type": "state"
2150
2296
  },
2151
- "rank": {
2152
- "description": "Prominence of the link.",
2297
+ "inverse": {
2153
2298
  "type": "variant",
2154
- "values": ["secondary"]
2299
+ "values": [true]
2300
+ },
2301
+ "pressed": {
2302
+ "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.",
2303
+ "values": [true],
2304
+ "type": "state"
2305
+ },
2306
+ "size": {
2307
+ "description": "Text sizes for block links; similar but not always identical to Typography sizes.",
2308
+ "type": "variant",
2309
+ "values": ["micro", "small", "large"]
2155
2310
  }
2156
2311
  },
2157
2312
  "rules": [
@@ -2165,16 +2320,103 @@
2165
2320
  },
2166
2321
  {
2167
2322
  "if": {
2168
- "rank": "secondary"
2323
+ "pressed": true
2169
2324
  },
2170
2325
  "tokens": {
2171
2326
  "color": {
2172
- "red": 0,
2173
- "green": 0.63137,
2174
- "blue": 0.85882,
2327
+ "red": 0.34902,
2328
+ "green": 0.34902,
2329
+ "blue": 0.34902,
2330
+ "alpha": 1
2331
+ },
2332
+ "textLine": "none"
2333
+ }
2334
+ },
2335
+ {
2336
+ "if": {
2337
+ "alternative": true
2338
+ },
2339
+ "tokens": {
2340
+ "color": {
2341
+ "red": 0.4,
2342
+ "green": 0.4,
2343
+ "blue": 0.4,
2344
+ "alpha": 1
2345
+ }
2346
+ }
2347
+ },
2348
+ {
2349
+ "if": {
2350
+ "alternative": true,
2351
+ "pressed": true
2352
+ },
2353
+ "tokens": {
2354
+ "color": {
2355
+ "red": 0.34902,
2356
+ "green": 0.34902,
2357
+ "blue": 0.34902,
2175
2358
  "alpha": 1
2176
2359
  }
2177
2360
  }
2361
+ },
2362
+ {
2363
+ "if": {
2364
+ "inverse": true
2365
+ },
2366
+ "tokens": {
2367
+ "color": {
2368
+ "red": 0.89804,
2369
+ "green": 0.96863,
2370
+ "blue": 0.98431,
2371
+ "alpha": 1
2372
+ }
2373
+ }
2374
+ },
2375
+ {
2376
+ "if": {
2377
+ "inverse": true,
2378
+ "pressed": true
2379
+ },
2380
+ "tokens": {
2381
+ "color": {
2382
+ "red": 0.78824,
2383
+ "green": 0.78431,
2384
+ "blue": 0.78431,
2385
+ "alpha": 1
2386
+ }
2387
+ }
2388
+ },
2389
+ {
2390
+ "if": {
2391
+ "size": "micro"
2392
+ },
2393
+ "tokens": {
2394
+ "blockFontName": "StagSans",
2395
+ "blockFontSize": 12,
2396
+ "blockFontWeight": 600,
2397
+ "blockLineHeight": 1.33333333333,
2398
+ "iconSize": 16
2399
+ }
2400
+ },
2401
+ {
2402
+ "if": {
2403
+ "size": "small"
2404
+ },
2405
+ "tokens": {
2406
+ "blockFontSize": 14,
2407
+ "blockLineHeight": 1.42857142857,
2408
+ "iconSize": 20
2409
+ }
2410
+ },
2411
+ {
2412
+ "if": {
2413
+ "size": "large"
2414
+ },
2415
+ "tokens": {
2416
+ "blockFontSize": 20,
2417
+ "blockLineHeight": 1.4,
2418
+ "iconSize": 24
2419
+ }
2178
2420
  }
2179
2421
  ],
2180
2422
  "tokens": {
@@ -2201,9 +2443,9 @@
2201
2443
  "blue": 0,
2202
2444
  "alpha": 0
2203
2445
  },
2204
- "outerBorderGap": 0,
2446
+ "outerBorderGap": 2,
2205
2447
  "outerBorderOutline": "none",
2206
- "outerBorderWidth": 0,
2448
+ "outerBorderWidth": 2,
2207
2449
  "textLine": "underline",
2208
2450
  "textLineStyle": "solid"
2209
2451
  }
@@ -2980,21 +3222,21 @@
2980
3222
  },
2981
3223
  "tokens": {
2982
3224
  "backgroundColor": {
2983
- "red": 0.00392,
2984
- "green": 0.41961,
2985
- "blue": 0.41569,
3225
+ "red": 0.78824,
3226
+ "green": 0.78431,
3227
+ "blue": 0.78431,
2986
3228
  "alpha": 1
2987
3229
  },
2988
3230
  "borderColor": {
2989
- "red": 0.00392,
2990
- "green": 0.41961,
2991
- "blue": 0.41569,
3231
+ "red": 0.4,
3232
+ "green": 0.4,
3233
+ "blue": 0.4,
2992
3234
  "alpha": 1
2993
3235
  },
2994
- "color": {
2995
- "red": 1,
2996
- "green": 1,
2997
- "blue": 1,
3236
+ "iconColor": {
3237
+ "red": 0.4,
3238
+ "green": 0.4,
3239
+ "blue": 0.4,
2998
3240
  "alpha": 1
2999
3241
  }
3000
3242
  }
@@ -3003,23 +3245,23 @@
3003
3245
  "tokens": {
3004
3246
  "alignSelf": "flex-start",
3005
3247
  "backgroundColor": {
3006
- "red": 0.00392,
3007
- "green": 0.41961,
3008
- "blue": 0.41569,
3009
- "alpha": 1
3010
- },
3011
- "borderColor": {
3012
3248
  "red": 1,
3013
3249
  "green": 1,
3014
3250
  "blue": 1,
3015
3251
  "alpha": 1
3016
3252
  },
3017
- "borderRadius": 4,
3018
- "borderWidth": 0,
3253
+ "borderColor": {
3254
+ "red": 0.4,
3255
+ "green": 0.4,
3256
+ "blue": 0.4,
3257
+ "alpha": 1
3258
+ },
3259
+ "borderRadius": 48,
3260
+ "borderWidth": 1,
3019
3261
  "color": {
3020
- "red": 1,
3021
- "green": 1,
3022
- "blue": 1,
3262
+ "red": 0.4,
3263
+ "green": 0.4,
3264
+ "blue": 0.4,
3023
3265
  "alpha": 1
3024
3266
  },
3025
3267
  "fontName": "StagSans",
@@ -3027,9 +3269,9 @@
3027
3269
  "fontWeight": 600,
3028
3270
  "icon": null,
3029
3271
  "iconColor": {
3030
- "red": 1,
3031
- "green": 1,
3032
- "blue": 1,
3272
+ "red": 0.00392,
3273
+ "green": 0.41961,
3274
+ "blue": 0.41569,
3033
3275
  "alpha": 1
3034
3276
  },
3035
3277
  "iconSize": 24,
@@ -3051,10 +3293,10 @@
3051
3293
  },
3052
3294
  "outerBorderGap": 2,
3053
3295
  "outerBorderWidth": 2,
3054
- "paddingBottom": 8,
3296
+ "paddingBottom": 12,
3055
3297
  "paddingLeft": 24,
3056
3298
  "paddingRight": 24,
3057
- "paddingTop": 8,
3299
+ "paddingTop": 12,
3058
3300
  "shadow": null,
3059
3301
  "textAlign": "center",
3060
3302
  "width": null
@@ -3065,25 +3307,25 @@
3065
3307
  "rules": [],
3066
3308
  "tokens": {
3067
3309
  "backgroundColor": {
3068
- "red": 0.97647,
3069
- "green": 0.96471,
3070
- "blue": 0.64706,
3310
+ "red": 1,
3311
+ "green": 1,
3312
+ "blue": 1,
3071
3313
  "alpha": 1
3072
3314
  },
3073
3315
  "borderColor": {
3074
- "red": 0,
3075
- "green": 0,
3076
- "blue": 0,
3077
- "alpha": 0
3316
+ "red": 0.78824,
3317
+ "green": 0.78431,
3318
+ "blue": 0.78431,
3319
+ "alpha": 1
3078
3320
  },
3079
- "borderRadius": 0,
3080
- "borderWidth": 0,
3321
+ "borderRadius": 8,
3322
+ "borderWidth": 1,
3081
3323
  "flex": 1,
3082
3324
  "minWidth": null,
3083
- "paddingBottom": 16,
3084
- "paddingLeft": 16,
3085
- "paddingRight": 16,
3086
- "paddingTop": 16,
3325
+ "paddingBottom": 8,
3326
+ "paddingLeft": 12,
3327
+ "paddingRight": 12,
3328
+ "paddingTop": 8,
3087
3329
  "shadow": null
3088
3330
  }
3089
3331
  },
@@ -3152,9 +3394,15 @@
3152
3394
  },
3153
3395
  "tokens": {
3154
3396
  "backgroundColor": {
3155
- "red": 0.00392,
3156
- "green": 0.41961,
3157
- "blue": 0.41569,
3397
+ "red": 0.78824,
3398
+ "green": 0.78431,
3399
+ "blue": 0.78431,
3400
+ "alpha": 1
3401
+ },
3402
+ "itemIconColor": {
3403
+ "red": 0,
3404
+ "green": 0,
3405
+ "blue": 0,
3158
3406
  "alpha": 1
3159
3407
  }
3160
3408
  }
@@ -3174,7 +3422,7 @@
3174
3422
  "alpha": 1
3175
3423
  },
3176
3424
  "dividerSize": 1,
3177
- "iconMarginTop": 4,
3425
+ "iconMarginTop": 0,
3178
3426
  "interItemMargin": null,
3179
3427
  "interItemMarginWithDivider": null,
3180
3428
  "itemBulletColor": {
@@ -3184,25 +3432,25 @@
3184
3432
  "alpha": 1
3185
3433
  },
3186
3434
  "itemBulletContainerAlign": "center",
3187
- "itemBulletContainerWidth": 16,
3188
- "itemBulletHeight": 4,
3189
- "itemBulletWidth": 4,
3435
+ "itemBulletContainerWidth": 0,
3436
+ "itemBulletHeight": 0,
3437
+ "itemBulletWidth": 0,
3190
3438
  "itemFontName": "StagSans",
3191
3439
  "itemFontSize": 16,
3192
3440
  "itemFontWeight": 600,
3193
3441
  "itemIconColor": {
3194
- "red": 0.48627,
3195
- "green": 0.07451,
3196
- "blue": 0.4,
3442
+ "red": 0.00392,
3443
+ "green": 0.41961,
3444
+ "blue": 0.41569,
3197
3445
  "alpha": 1
3198
3446
  },
3199
- "itemIconSize": 16,
3200
- "itemLineHeight": 1.3,
3447
+ "itemIconSize": 24,
3448
+ "itemLineHeight": 1.6,
3201
3449
  "listGutter": 10,
3202
- "paddingBottom": 8,
3203
- "paddingLeft": 12,
3204
- "paddingRight": 12,
3205
- "paddingTop": 8
3450
+ "paddingBottom": 12,
3451
+ "paddingLeft": 4,
3452
+ "paddingRight": 4,
3453
+ "paddingTop": 12
3206
3454
  }
3207
3455
  },
3208
3456
  "Radio": {
@@ -5640,7 +5888,7 @@
5640
5888
  }
5641
5889
  },
5642
5890
  "metadata": {
5643
- "themeTokensVersion": "2.13.0",
5891
+ "themeTokensVersion": "2.14.0",
5644
5892
  "name": "theme-koodo"
5645
5893
  }
5646
5894
  }