@telus-uds/theme-koodo 4.3.0 → 4.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.
@@ -210,22 +210,75 @@
210
210
  }
211
211
  },
212
212
  "BlockQuote": {
213
- "appearances": {},
214
- "rules": [],
213
+ "appearances": {
214
+ "viewport": {
215
+ "description": "The size label for the current screen viewport based on the current screen width",
216
+ "values": ["xs", "sm", "md", "lg", "xl"],
217
+ "type": "state"
218
+ }
219
+ },
220
+ "rules": [
221
+ {
222
+ "if": {
223
+ "viewport": ["xs", "sm", "md"]
224
+ },
225
+ "tokens": {
226
+ "titleHeadingFontName": "StagSans",
227
+ "titleHeadingFontSize": 32,
228
+ "titleHeadingFontWeight": 700,
229
+ "titleHeadingLineHeight": 1.25
230
+ }
231
+ }
232
+ ],
215
233
  "tokens": {
216
- "backgroundGradient": null,
234
+ "backgroundGradient": {
235
+ "type": "linear",
236
+ "angle": 0,
237
+ "stops": [
238
+ {
239
+ "stop": 0,
240
+ "color": {
241
+ "red": 0.00392,
242
+ "green": 0.41961,
243
+ "blue": 0.41569,
244
+ "alpha": 1
245
+ }
246
+ },
247
+ {
248
+ "stop": 1,
249
+ "color": {
250
+ "red": 0.00392,
251
+ "green": 0.41961,
252
+ "blue": 0.41569,
253
+ "alpha": 1
254
+ }
255
+ }
256
+ ]
257
+ },
217
258
  "color": {
218
- "red": 0.00392,
219
- "green": 0.41961,
220
- "blue": 0.41569,
259
+ "red": 0,
260
+ "green": 0,
261
+ "blue": 0,
221
262
  "alpha": 1
222
263
  },
264
+ "linkFontName": "StagSans",
265
+ "linkFontSize": 16,
266
+ "linkFontWeight": 600,
267
+ "linkLineHeight": 1.5,
223
268
  "marginBottom": 16,
224
269
  "paddingBottom": 16,
225
270
  "paddingLeft": 32,
226
271
  "paddingRight": 32,
227
272
  "paddingTop": 16,
228
- "width": 2
273
+ "titleFontName": "StagSans",
274
+ "titleFontSize": 20,
275
+ "titleFontWeight": 400,
276
+ "titleHeadingFontName": "StagSans",
277
+ "titleHeadingFontSize": 32,
278
+ "titleHeadingFontWeight": 700,
279
+ "titleHeadingLineHeight": 1.25,
280
+ "titleLineHeight": 1.4,
281
+ "width": 4
229
282
  }
230
283
  },
231
284
  "Box": {
@@ -1207,22 +1260,27 @@
1207
1260
  },
1208
1261
  "tokens": {
1209
1262
  "backgroundColor": {
1210
- "red": 0.4,
1211
- "green": 0.4,
1212
- "blue": 0.4,
1263
+ "red": 0.93725,
1264
+ "green": 0.93725,
1265
+ "blue": 0.93725,
1266
+ "alpha": 1
1267
+ },
1268
+ "borderColor": {
1269
+ "red": 0.93725,
1270
+ "green": 0.93725,
1271
+ "blue": 0.93725,
1213
1272
  "alpha": 1
1214
1273
  },
1215
- "borderWidth": 0,
1216
1274
  "color": {
1217
- "red": 1,
1218
- "green": 1,
1219
- "blue": 1,
1275
+ "red": 0.78824,
1276
+ "green": 0.78431,
1277
+ "blue": 0.78431,
1220
1278
  "alpha": 1
1221
1279
  },
1222
1280
  "iconColor": {
1223
- "red": 0.4,
1224
- "green": 0.4,
1225
- "blue": 0.4,
1281
+ "red": 0.78824,
1282
+ "green": 0.78431,
1283
+ "blue": 0.78431,
1226
1284
  "alpha": 1
1227
1285
  }
1228
1286
  }
@@ -1257,31 +1315,6 @@
1257
1315
  "alpha": 0
1258
1316
  }
1259
1317
  }
1260
- },
1261
- {
1262
- "if": {
1263
- "inactive": true
1264
- },
1265
- "tokens": {
1266
- "backgroundColor": {
1267
- "red": 0.93725,
1268
- "green": 0.93725,
1269
- "blue": 0.93725,
1270
- "alpha": 1
1271
- },
1272
- "color": {
1273
- "red": 0.78824,
1274
- "green": 0.78431,
1275
- "blue": 0.78431,
1276
- "alpha": 1
1277
- },
1278
- "iconColor": {
1279
- "red": 0.78824,
1280
- "green": 0.78431,
1281
- "blue": 0.78431,
1282
- "alpha": 1
1283
- }
1284
- }
1285
1318
  }
1286
1319
  ],
1287
1320
  "tokens": {
@@ -2164,7 +2197,7 @@
2164
2197
  },
2165
2198
  "fontSize": 16,
2166
2199
  "iconDisplace": 0,
2167
- "iconSize": 18,
2200
+ "iconSize": 24,
2168
2201
  "iconSpace": 1,
2169
2202
  "leftIcon": "PaletteIconChevronLeft",
2170
2203
  "outerBorderColor": {
@@ -2216,48 +2249,57 @@
2216
2249
  },
2217
2250
  {
2218
2251
  "if": {
2219
- "large": true,
2220
- "viewport": ["xs"]
2252
+ "feature": true
2221
2253
  },
2222
2254
  "tokens": {
2223
- "textFontSize": 28
2255
+ "containerBorderColor": {
2256
+ "red": 0.00392,
2257
+ "green": 0.41961,
2258
+ "blue": 0.41569,
2259
+ "alpha": 1
2260
+ },
2261
+ "labelBorderColor": {
2262
+ "red": 0.00392,
2263
+ "green": 0.41961,
2264
+ "blue": 0.41569,
2265
+ "alpha": 1
2266
+ },
2267
+ "textFontSize": 70,
2268
+ "textLineHeight": 1.2,
2269
+ "textTimerFontName": "StagSans",
2270
+ "textTimerFontWeight": 700
2224
2271
  }
2225
2272
  },
2226
2273
  {
2227
2274
  "if": {
2228
- "feature": true,
2229
- "viewport": ["xs"]
2275
+ "large": true
2230
2276
  },
2231
2277
  "tokens": {
2232
- "textFontSize": 28
2278
+ "labelFontName": "StagSans",
2279
+ "labelFontSize": 16,
2280
+ "labelFontWeight": 400,
2281
+ "textFontSize": 70,
2282
+ "textLineHeight": 1.2,
2283
+ "textTimerFontName": "StagSans",
2284
+ "textTimerFontWeight": 700
2233
2285
  }
2234
2286
  },
2235
2287
  {
2236
2288
  "if": {
2237
- "feature": true
2289
+ "large": true,
2290
+ "viewport": ["xs"]
2238
2291
  },
2239
2292
  "tokens": {
2240
- "labelBorderColor": {
2241
- "red": 0,
2242
- "green": 0,
2243
- "blue": 0,
2244
- "alpha": 0
2245
- },
2246
- "textFontSize": 64,
2247
- "textLineHeight": 1.14285714286,
2248
- "textTimerFontName": "StagSans",
2249
- "textTimerFontWeight": 300
2293
+ "textFontSize": 44
2250
2294
  }
2251
2295
  },
2252
2296
  {
2253
2297
  "if": {
2254
- "large": true
2298
+ "feature": true,
2299
+ "viewport": ["xs"]
2255
2300
  },
2256
2301
  "tokens": {
2257
- "textFontSize": 64,
2258
- "textLineHeight": 1.14285714286,
2259
- "textTimerFontName": "StagSans",
2260
- "textTimerFontWeight": 300
2302
+ "textFontSize": 44
2261
2303
  }
2262
2304
  },
2263
2305
  {
@@ -2265,17 +2307,30 @@
2265
2307
  "inverse": true
2266
2308
  },
2267
2309
  "tokens": {
2310
+ "containerBorderColor": {
2311
+ "red": 1,
2312
+ "green": 1,
2313
+ "blue": 1,
2314
+ "alpha": 1
2315
+ },
2268
2316
  "labelBorderColor": {
2269
- "red": 0,
2270
- "green": 0,
2271
- "blue": 0,
2272
- "alpha": 0
2317
+ "red": 1,
2318
+ "green": 1,
2319
+ "blue": 1,
2320
+ "alpha": 1
2273
2321
  }
2274
2322
  }
2275
2323
  }
2276
2324
  ],
2277
2325
  "tokens": {
2326
+ "containerBorderColor": {
2327
+ "red": 0,
2328
+ "green": 0,
2329
+ "blue": 0,
2330
+ "alpha": 0
2331
+ },
2278
2332
  "containerBorderRadius": 6,
2333
+ "containerBorderWidth": 2,
2279
2334
  "containerGradient": null,
2280
2335
  "containerInverseBorder": 2,
2281
2336
  "containerInverseBorderColor": {
@@ -2298,7 +2353,9 @@
2298
2353
  "blue": 0,
2299
2354
  "alpha": 0
2300
2355
  },
2356
+ "labelFontName": "StagSans",
2301
2357
  "labelFontSize": 16,
2358
+ "labelFontWeight": 400,
2302
2359
  "labelLineHeight": 1.5,
2303
2360
  "textFontSize": 16,
2304
2361
  "textLineHeight": 1.14285714286,
@@ -2368,6 +2425,24 @@
2368
2425
  "calendarDayDefaultFontName": "StagSans",
2369
2426
  "calendarDayDefaultFontSize": 14,
2370
2427
  "calendarDayDefaultFontWeight": 400,
2428
+ "calendarDaySelectedDisabledBackground": {
2429
+ "red": 0.93725,
2430
+ "green": 0.93725,
2431
+ "blue": 0.93725,
2432
+ "alpha": 1
2433
+ },
2434
+ "calendarDaySelectedDisabledColor": {
2435
+ "red": 1,
2436
+ "green": 1,
2437
+ "blue": 1,
2438
+ "alpha": 1
2439
+ },
2440
+ "calendarDaySelectedDisabledContentBackgroundColor": {
2441
+ "red": 0.78824,
2442
+ "green": 0.78431,
2443
+ "blue": 0.78431,
2444
+ "alpha": 1
2445
+ },
2371
2446
  "calendarDaySelectedFocusBeforeBackground": {
2372
2447
  "red": 1,
2373
2448
  "green": 1,
@@ -2952,6 +3027,12 @@
2952
3027
  "appearances": {},
2953
3028
  "rules": [],
2954
3029
  "tokens": {
3030
+ "closeButtonBackgroundColor": {
3031
+ "red": 1,
3032
+ "green": 1,
3033
+ "blue": 1,
3034
+ "alpha": 1
3035
+ },
2955
3036
  "closeButtonBorderColor": {
2956
3037
  "red": 0,
2957
3038
  "green": 0,
@@ -2959,13 +3040,13 @@
2959
3040
  "alpha": 1
2960
3041
  },
2961
3042
  "closeButtonBorderSize": 0,
2962
- "closeButtonHeight": 24,
3043
+ "closeButtonHeight": 16,
2963
3044
  "closeButtonIconSize": 16,
2964
3045
  "closeButtonMarginBottom": 4,
2965
3046
  "closeButtonMarginLeft": 4,
2966
3047
  "closeButtonMarginRight": 12,
2967
3048
  "closeButtonMarginTop": 4,
2968
- "closeButtonWidth": 24,
3049
+ "closeButtonWidth": 16,
2969
3050
  "closeIcon": "PaletteIconClose",
2970
3051
  "footnoteBackground": {
2971
3052
  "red": 1,
@@ -2982,7 +3063,7 @@
2982
3063
  "footnoteBodyPaddingBottom": 32,
2983
3064
  "footnoteBodyPaddingLeft": 16,
2984
3065
  "footnoteBodyPaddingRight": 16,
2985
- "footnoteBodyPaddingTop": 16,
3066
+ "footnoteBodyPaddingTop": 0,
2986
3067
  "footnoteBorderColorMd": {
2987
3068
  "red": 0.78824,
2988
3069
  "green": 0.78431,
@@ -2997,7 +3078,7 @@
2997
3078
  "headerFontName": "StagSans",
2998
3079
  "headerFontSize": 16,
2999
3080
  "headerFontWeight": 700,
3000
- "headerLineHeight": 20,
3081
+ "headerLineHeight": 1.25,
3001
3082
  "headerMargin": 16,
3002
3083
  "listItemColor": {
3003
3084
  "red": 0,
@@ -3006,9 +3087,9 @@
3006
3087
  "alpha": 1
3007
3088
  },
3008
3089
  "listItemFontSize": 14,
3009
- "listItemLineHeight": 1.42857142857,
3090
+ "listItemLineHeight": 1.45,
3010
3091
  "listItemMarkerFontSize": 14,
3011
- "listItemMarkerLineHeight": 1.42857142857,
3092
+ "listItemMarkerLineHeight": 1.45,
3012
3093
  "listItemPaddingLeft": 8,
3013
3094
  "listPaddingLeft": 32
3014
3095
  }
@@ -3944,7 +4025,7 @@
3944
4025
  "blockFontName": "StagSans",
3945
4026
  "blockFontSize": 16,
3946
4027
  "blockFontWeight": 600,
3947
- "blockLineHeight": 1.3,
4028
+ "blockLineHeight": 1.5,
3948
4029
  "borderRadius": 4,
3949
4030
  "color": {
3950
4031
  "red": 0.00392,
@@ -4346,6 +4427,76 @@
4346
4427
  "subHeadingMarginTop": 8
4347
4428
  }
4348
4429
  },
4430
+ "MultiSelectFilter": {
4431
+ "appearances": {
4432
+ "maxHeight": {
4433
+ "description": "Whether MultiselectFilter modal should expand responsively to content or a set maximu height",
4434
+ "values": [true],
4435
+ "type": "state"
4436
+ },
4437
+ "maxWidth": {
4438
+ "description": "Whether MultiselectFilter modal should expand to content or a set maximuh width",
4439
+ "values": [true],
4440
+ "type": "state"
4441
+ },
4442
+ "viewport": {
4443
+ "description": "The size label for the current screen viewport based on the current screen width",
4444
+ "values": ["xs", "sm", "md", "lg", "xl"],
4445
+ "type": "state"
4446
+ }
4447
+ },
4448
+ "rules": [
4449
+ {
4450
+ "if": {
4451
+ "viewport": ["xs"]
4452
+ },
4453
+ "tokens": {
4454
+ "buttonDirection": "column",
4455
+ "minHeight": "100%",
4456
+ "minWidth": "100%"
4457
+ }
4458
+ },
4459
+ {
4460
+ "if": {
4461
+ "maxHeight": true,
4462
+ "viewport": ["sm", "md", "lg", "xl"]
4463
+ },
4464
+ "tokens": {
4465
+ "maxHeightSize": 480
4466
+ }
4467
+ },
4468
+ {
4469
+ "if": {
4470
+ "maxWidth": true,
4471
+ "viewport": ["sm", "md", "lg", "xl"]
4472
+ },
4473
+ "tokens": {
4474
+ "maxWidthSize": 544
4475
+ }
4476
+ }
4477
+ ],
4478
+ "tokens": {
4479
+ "buttonDirection": "row",
4480
+ "headerFontColor": {
4481
+ "red": 0,
4482
+ "green": 0,
4483
+ "blue": 0,
4484
+ "alpha": 1
4485
+ },
4486
+ "headerFontName": "StagSans",
4487
+ "headerFontSize": 24,
4488
+ "headerFontWeight": 700,
4489
+ "headerLineHeight": 1.33333333333,
4490
+ "maxHeightSize": 0,
4491
+ "maxWidthSize": 0,
4492
+ "minHeight": 412,
4493
+ "minWidth": 320,
4494
+ "subHeaderFontName": "StagSans",
4495
+ "subHeaderFontSize": 16,
4496
+ "subHeaderFontWeight": 400,
4497
+ "subHeaderLineHeight": 1.5
4498
+ }
4499
+ },
4349
4500
  "NavigationBar": {
4350
4501
  "appearances": {
4351
4502
  "expanded": {
@@ -5076,19 +5227,19 @@
5076
5227
  "alpha": 1
5077
5228
  },
5078
5229
  "borderColor": {
5079
- "red": 1,
5080
- "green": 1,
5081
- "blue": 1,
5230
+ "red": 0.78824,
5231
+ "green": 0.78431,
5232
+ "blue": 0.78431,
5082
5233
  "alpha": 1
5083
5234
  },
5084
- "borderRadius": 0,
5235
+ "borderRadius": 8,
5085
5236
  "borderWidth": 1,
5086
5237
  "flex": 1,
5087
5238
  "outerBorderColor": {
5088
- "red": 1,
5089
- "green": 1,
5090
- "blue": 1,
5091
- "alpha": 1
5239
+ "red": 0,
5240
+ "green": 0,
5241
+ "blue": 0,
5242
+ "alpha": 0
5092
5243
  },
5093
5244
  "outerBorderGap": 0,
5094
5245
  "outerBorderWidth": 0,
@@ -5559,6 +5710,11 @@
5559
5710
  },
5560
5711
  "QuickLinksFeatureItem": {
5561
5712
  "appearances": {
5713
+ "pressed": {
5714
+ "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.",
5715
+ "values": [true],
5716
+ "type": "state"
5717
+ },
5562
5718
  "viewport": {
5563
5719
  "description": "The size label for the current screen viewport based on the current screen width",
5564
5720
  "values": ["xs", "sm", "md", "lg", "xl"],
@@ -5574,6 +5730,26 @@
5574
5730
  "contentMaxDimension": 184,
5575
5731
  "imageDimension": 168
5576
5732
  }
5733
+ },
5734
+ {
5735
+ "if": {
5736
+ "pressed": true
5737
+ },
5738
+ "tokens": {
5739
+ "color": {
5740
+ "red": 0.34902,
5741
+ "green": 0.34902,
5742
+ "blue": 0.34902,
5743
+ "alpha": 1
5744
+ },
5745
+ "outerBorderColor": {
5746
+ "red": 0.34902,
5747
+ "green": 0.34902,
5748
+ "blue": 0.34902,
5749
+ "alpha": 1
5750
+ },
5751
+ "textLine": "underline"
5752
+ }
5577
5753
  }
5578
5754
  ],
5579
5755
  "tokens": {
@@ -5585,8 +5761,12 @@
5585
5761
  },
5586
5762
  "contentAlignItems": "center",
5587
5763
  "contentDirection": "column",
5588
- "contentMaxDimension": 140,
5764
+ "contentMaxDimension": 168,
5589
5765
  "contentSpace": 3,
5766
+ "fontName": "StagSans",
5767
+ "fontSize": 16,
5768
+ "fontWeight": 600,
5769
+ "gap": 32,
5590
5770
  "imageDimension": 128,
5591
5771
  "outerBorderColor": {
5592
5772
  "red": 0,
@@ -5595,7 +5775,7 @@
5595
5775
  "alpha": 0
5596
5776
  },
5597
5777
  "textAlign": "center",
5598
- "textLine": "underline"
5778
+ "textLine": "none"
5599
5779
  }
5600
5780
  },
5601
5781
  "QuickLinksList": {
@@ -7088,6 +7268,12 @@
7088
7268
  "inverse": true
7089
7269
  },
7090
7270
  "tokens": {
7271
+ "completedIconColor": {
7272
+ "red": 0.4,
7273
+ "green": 0.4,
7274
+ "blue": 0.4,
7275
+ "alpha": 1
7276
+ },
7091
7277
  "connectorColor": {
7092
7278
  "red": 1,
7093
7279
  "green": 1,
@@ -7178,7 +7364,7 @@
7178
7364
  "blue": 0.41569,
7179
7365
  "alpha": 1
7180
7366
  },
7181
- "connectorCompletedHeight": 1,
7367
+ "connectorCompletedHeight": 3,
7182
7368
  "connectorHeight": 1,
7183
7369
  "connectorMinWidth": 16,
7184
7370
  "containerPaddingBottom": null,
@@ -7210,7 +7396,7 @@
7210
7396
  "blue": 0.41569,
7211
7397
  "alpha": 1
7212
7398
  },
7213
- "knobCompletedPaddingLeft": 2,
7399
+ "knobCompletedPaddingLeft": 1,
7214
7400
  "knobCompletedPaddingTop": 2,
7215
7401
  "knobCurrentBackgroundColor": {
7216
7402
  "red": 0.00392,
@@ -7248,11 +7434,11 @@
7248
7434
  "alpha": 1
7249
7435
  },
7250
7436
  "labelCurrentFontName": "StagSans",
7251
- "labelCurrentFontWeight": 700,
7437
+ "labelCurrentFontWeight": 600,
7252
7438
  "labelDirection": "row",
7253
7439
  "labelFontName": "StagSans",
7254
7440
  "labelFontSize": 16,
7255
- "labelFontWeight": 400,
7441
+ "labelFontWeight": 600,
7256
7442
  "labelGap": 4,
7257
7443
  "labelLineHeight": 1.5,
7258
7444
  "labelMarginTop": 10,
@@ -7260,7 +7446,18 @@
7260
7446
  "labelPaddingRight": 16,
7261
7447
  "showStepLabel": false,
7262
7448
  "showStepName": true,
7263
- "showStepTrackerLabel": true
7449
+ "showStepTrackerLabel": true,
7450
+ "stepLabelColor": {
7451
+ "red": 0.00392,
7452
+ "green": 0.41961,
7453
+ "blue": 0.41569,
7454
+ "alpha": 1
7455
+ },
7456
+ "stepLabelFontName": "StagSans",
7457
+ "stepLabelFontSize": 16,
7458
+ "stepLabelFontWeight": 600,
7459
+ "stepLabelLineHeight": 1.5,
7460
+ "textStepTrackerLabel": 2
7264
7461
  }
7265
7462
  },
7266
7463
  "StoryCard": {
@@ -7593,15 +7790,30 @@
7593
7790
  }
7594
7791
  },
7595
7792
  "Tags": {
7596
- "appearances": {},
7597
- "rules": [],
7793
+ "appearances": {
7794
+ "viewport": {
7795
+ "description": "The size label for the current screen viewport based on the current screen width",
7796
+ "values": ["xs", "sm", "md", "lg", "xl"],
7797
+ "type": "state"
7798
+ }
7799
+ },
7800
+ "rules": [
7801
+ {
7802
+ "if": {
7803
+ "viewport": ["lg", "xl"]
7804
+ },
7805
+ "tokens": {
7806
+ "space": 3
7807
+ }
7808
+ }
7809
+ ],
7598
7810
  "tokens": {
7599
7811
  "alignItems": "center",
7600
7812
  "direction": "row",
7601
7813
  "flexGrow": 0,
7602
7814
  "flexShrink": 0,
7603
7815
  "justifyContent": "flex-start",
7604
- "space": 3
7816
+ "space": 1
7605
7817
  }
7606
7818
  },
7607
7819
  "TagsItem": {
@@ -7629,23 +7841,43 @@
7629
7841
  },
7630
7842
  "tokens": {
7631
7843
  "backgroundColor": {
7632
- "red": 0.00392,
7633
- "green": 0.41961,
7634
- "blue": 0.41569,
7844
+ "red": 0.10588,
7845
+ "green": 0.27843,
7846
+ "blue": 0.27451,
7635
7847
  "alpha": 1
7636
7848
  },
7637
7849
  "borderColor": {
7638
- "red": 0.00392,
7639
- "green": 0.41961,
7640
- "blue": 0.41569,
7850
+ "red": 0.10588,
7851
+ "green": 0.27843,
7852
+ "blue": 0.27451,
7641
7853
  "alpha": 1
7642
7854
  },
7855
+ "borderWidth": 0,
7643
7856
  "color": {
7644
7857
  "red": 1,
7645
7858
  "green": 1,
7646
7859
  "blue": 1,
7647
7860
  "alpha": 1
7648
- }
7861
+ },
7862
+ "iconBackground": {
7863
+ "red": 0.10588,
7864
+ "green": 0.27843,
7865
+ "blue": 0.27451,
7866
+ "alpha": 1
7867
+ },
7868
+ "iconColor": {
7869
+ "red": 1,
7870
+ "green": 1,
7871
+ "blue": 1,
7872
+ "alpha": 1
7873
+ },
7874
+ "outerBorderColor": {
7875
+ "red": 0,
7876
+ "green": 0,
7877
+ "blue": 0,
7878
+ "alpha": 0
7879
+ },
7880
+ "outerBorderWidth": 0
7649
7881
  }
7650
7882
  },
7651
7883
  {
@@ -7653,87 +7885,105 @@
7653
7885
  "selected": true
7654
7886
  },
7655
7887
  "tokens": {
7656
- "icon": "PaletteIconCheckCircledFilled",
7657
- "opacity": 0.8,
7658
- "outerBorderColor": {
7888
+ "backgroundColor": {
7659
7889
  "red": 0.00392,
7660
7890
  "green": 0.41961,
7661
7891
  "blue": 0.41569,
7662
7892
  "alpha": 1
7663
7893
  },
7664
- "outerBorderGap": 1,
7665
- "outerBorderWidth": 4
7666
- }
7667
- },
7668
- {
7669
- "if": {
7670
- "inactive": true
7671
- },
7672
- "tokens": {
7673
- "backgroundColor": {
7674
- "red": 0.4,
7675
- "green": 0.4,
7676
- "blue": 0.4,
7894
+ "borderColor": {
7895
+ "red": 0.00392,
7896
+ "green": 0.41961,
7897
+ "blue": 0.41569,
7677
7898
  "alpha": 1
7678
7899
  },
7679
- "borderWidth": 0,
7680
7900
  "color": {
7681
7901
  "red": 1,
7682
7902
  "green": 1,
7683
7903
  "blue": 1,
7684
7904
  "alpha": 1
7685
7905
  },
7906
+ "icon": "PaletteIconClose",
7907
+ "iconBackground": {
7908
+ "red": 0.00392,
7909
+ "green": 0.41961,
7910
+ "blue": 0.41569,
7911
+ "alpha": 1
7912
+ },
7686
7913
  "iconColor": {
7687
- "red": 0.4,
7688
- "green": 0.4,
7689
- "blue": 0.4,
7914
+ "red": 1,
7915
+ "green": 1,
7916
+ "blue": 1,
7690
7917
  "alpha": 1
7691
- }
7918
+ },
7919
+ "outerBorderColor": {
7920
+ "red": 0,
7921
+ "green": 0,
7922
+ "blue": 0,
7923
+ "alpha": 0
7924
+ },
7925
+ "outerBorderWidth": 0
7692
7926
  }
7693
7927
  },
7694
7928
  {
7695
7929
  "if": {
7696
- "selected": true
7930
+ "inactive": true
7697
7931
  },
7698
7932
  "tokens": {
7699
- "opacity": 0.8,
7700
- "outerBorderColor": {
7701
- "red": 0.00392,
7702
- "green": 0.41961,
7703
- "blue": 0.41569,
7933
+ "backgroundColor": {
7934
+ "red": 0.93725,
7935
+ "green": 0.93725,
7936
+ "blue": 0.93725,
7937
+ "alpha": 1
7938
+ },
7939
+ "borderWidth": 0,
7940
+ "color": {
7941
+ "red": 0.78824,
7942
+ "green": 0.78431,
7943
+ "blue": 0.78431,
7944
+ "alpha": 1
7945
+ },
7946
+ "iconBackground": {
7947
+ "red": 0.93725,
7948
+ "green": 0.93725,
7949
+ "blue": 0.93725,
7704
7950
  "alpha": 1
7705
7951
  },
7706
- "outerBorderGap": 1,
7707
- "outerBorderWidth": 4
7952
+ "iconColor": {
7953
+ "red": 0.78824,
7954
+ "green": 0.78431,
7955
+ "blue": 0.78431,
7956
+ "alpha": 1
7957
+ }
7708
7958
  }
7709
7959
  }
7710
7960
  ],
7711
7961
  "tokens": {
7712
7962
  "alignSelf": "center",
7713
7963
  "backgroundColor": {
7714
- "red": 0.00392,
7715
- "green": 0.41961,
7716
- "blue": 0.41569,
7964
+ "red": 1,
7965
+ "green": 1,
7966
+ "blue": 1,
7717
7967
  "alpha": 1
7718
7968
  },
7719
7969
  "borderColor": {
7720
- "red": 0.10588,
7721
- "green": 0.27843,
7722
- "blue": 0.27451,
7970
+ "red": 0.00392,
7971
+ "green": 0.41961,
7972
+ "blue": 0.41569,
7723
7973
  "alpha": 1
7724
7974
  },
7725
7975
  "borderRadius": 4,
7726
- "borderWidth": 0,
7976
+ "borderWidth": 1,
7727
7977
  "color": {
7728
- "red": 1,
7729
- "green": 1,
7730
- "blue": 1,
7978
+ "red": 0.00392,
7979
+ "green": 0.41961,
7980
+ "blue": 0.41569,
7731
7981
  "alpha": 1
7732
7982
  },
7733
7983
  "fontName": "StagSans",
7734
- "fontSize": 14,
7984
+ "fontSize": 16,
7735
7985
  "fontWeight": 600,
7736
- "icon": "PaletteIconCheckCircledNotFilled",
7986
+ "icon": "PaletteIconAdd",
7737
7987
  "iconAlignSelf": "center",
7738
7988
  "iconBackground": {
7739
7989
  "red": 1,
@@ -7748,10 +7998,10 @@
7748
7998
  "blue": 0.41569,
7749
7999
  "alpha": 1
7750
8000
  },
7751
- "iconPadding": 4,
8001
+ "iconPadding": 2,
7752
8002
  "iconPosition": "right",
7753
- "iconSize": 20,
7754
- "iconSpace": 3,
8003
+ "iconSize": 16,
8004
+ "iconSpace": 2,
7755
8005
  "iconTranslateX": 0,
7756
8006
  "iconTranslateY": 0,
7757
8007
  "lineHeight": 1.5,
@@ -7770,14 +8020,13 @@
7770
8020
  "alpha": 0
7771
8021
  },
7772
8022
  "outerBorderGap": 2,
7773
- "outerBorderWidth": 2,
8023
+ "outerBorderWidth": 0,
7774
8024
  "paddingBottom": 8,
7775
- "paddingLeft": 24,
7776
- "paddingRight": 16,
8025
+ "paddingLeft": 16,
8026
+ "paddingRight": 8,
7777
8027
  "paddingTop": 8,
7778
8028
  "shadow": null,
7779
- "textAlign": "center",
7780
- "width": null
8029
+ "textAlign": "center"
7781
8030
  }
7782
8031
  },
7783
8032
  "TermsAndConditions": {
@@ -8120,27 +8369,43 @@
8120
8369
  }
8121
8370
  },
8122
8371
  "Toast": {
8123
- "appearances": {},
8124
- "rules": [],
8372
+ "appearances": {
8373
+ "viewport": {
8374
+ "description": "The size label for the current screen viewport based on the current screen width",
8375
+ "values": ["xs", "sm", "md", "lg", "xl"],
8376
+ "type": "state"
8377
+ }
8378
+ },
8379
+ "rules": [
8380
+ {
8381
+ "if": {
8382
+ "viewport": ["xs"]
8383
+ },
8384
+ "tokens": {
8385
+ "animationPaddingBottomAfter": 8,
8386
+ "animationPaddingTopAfter": 8
8387
+ }
8388
+ }
8389
+ ],
8125
8390
  "tokens": {
8126
8391
  "animationBackgroundColorAfter": {
8127
- "red": 1,
8128
- "green": 1,
8129
- "blue": 1,
8392
+ "red": 0.93725,
8393
+ "green": 0.93725,
8394
+ "blue": 0.93725,
8130
8395
  "alpha": 1
8131
8396
  },
8132
8397
  "animationBackgroundColorBefore": {
8133
- "red": 1,
8134
- "green": 1,
8135
- "blue": 1,
8136
- "alpha": 1
8137
- },
8138
- "animationColorAfter": {
8139
8398
  "red": 0.00392,
8140
8399
  "green": 0.41961,
8141
8400
  "blue": 0.41569,
8142
8401
  "alpha": 1
8143
8402
  },
8403
+ "animationColorAfter": {
8404
+ "red": 0,
8405
+ "green": 0,
8406
+ "blue": 0,
8407
+ "alpha": 1
8408
+ },
8144
8409
  "animationColorBefore": {
8145
8410
  "red": 1,
8146
8411
  "green": 1,
@@ -8148,9 +8413,9 @@
8148
8413
  "alpha": 1
8149
8414
  },
8150
8415
  "animationDivColorAfter": {
8151
- "red": 1,
8152
- "green": 1,
8153
- "blue": 1,
8416
+ "red": 0.00392,
8417
+ "green": 0.41961,
8418
+ "blue": 0.41569,
8154
8419
  "alpha": 1
8155
8420
  },
8156
8421
  "animationDivColorBefore": {
@@ -8165,10 +8430,12 @@
8165
8430
  "animationPaddingBottomBefore": 0,
8166
8431
  "animationPaddingTopAfter": 16,
8167
8432
  "animationPaddingTopBefore": 0,
8433
+ "chevronlinkFontName": "StagSans",
8434
+ "chevronlinkFontWeight": 400,
8168
8435
  "containerBackgroundColor": {
8169
- "red": 1,
8170
- "green": 1,
8171
- "blue": 1,
8436
+ "red": 0.00392,
8437
+ "green": 0.41961,
8438
+ "blue": 0.41569,
8172
8439
  "alpha": 1
8173
8440
  },
8174
8441
  "containerGap": 12
@@ -8528,6 +8795,11 @@
8528
8795
  },
8529
8796
  "Typography": {
8530
8797
  "appearances": {
8798
+ "bold": {
8799
+ "description": "Sets the font weight, to bold on some body text styles. Does not change accessibility properties.",
8800
+ "type": "variant",
8801
+ "values": [true]
8802
+ },
8531
8803
  "colour": {
8532
8804
  "type": "variant",
8533
8805
  "values": [
@@ -8605,6 +8877,16 @@
8605
8877
  "fontWeight": 700
8606
8878
  }
8607
8879
  },
8880
+ {
8881
+ "description": "Please only bold single words while using with headings",
8882
+ "if": {
8883
+ "bold": true
8884
+ },
8885
+ "tokens": {
8886
+ "fontName": "StagSans",
8887
+ "fontWeight": 600
8888
+ }
8889
+ },
8608
8890
  {
8609
8891
  "if": {
8610
8892
  "size": "large"
@@ -9481,7 +9763,7 @@
9481
9763
  }
9482
9764
  },
9483
9765
  "metadata": {
9484
- "themeTokensVersion": "2.32.0",
9766
+ "themeTokensVersion": "2.34.0",
9485
9767
  "name": "theme-koodo"
9486
9768
  }
9487
9769
  }