@telus-uds/theme-allium 1.0.0-prerelease.0 → 1.0.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
@@ -1,33 +1,29 @@
1
1
  {
2
- "metadata": {
3
- "name": "allium",
4
- "package": "@telus-uds/theme-allium"
5
- },
6
2
  "components": {
7
3
  "ActivityIndicator": {
8
4
  "appearances": {
9
5
  "size": {
10
- "values": ["large"],
11
6
  "description": "used for full-screen spinners",
12
- "type": "variant"
7
+ "type": "variant",
8
+ "values": ["large"]
13
9
  }
14
10
  },
15
- "tokens": {
16
- "size": "{palette.size.size20}",
17
- "thickness": "{palette.border.border2}",
18
- "color": "{palette.color.greenAccessible}"
19
- },
20
11
  "rules": [
21
12
  {
22
13
  "if": {
23
14
  "size": "large"
24
15
  },
25
16
  "tokens": {
26
- "thickness": "{palette.border.border4}",
27
- "size": "{palette.size.size40}"
17
+ "size": "{palette.size.size40}",
18
+ "thickness": "{palette.border.border4}"
28
19
  }
29
20
  }
30
- ]
21
+ ],
22
+ "tokens": {
23
+ "color": "{palette.color.greenAccessible}",
24
+ "size": "{palette.size.size20}",
25
+ "thickness": "{palette.border.border2}"
26
+ }
31
27
  },
32
28
  "Box": {
33
29
  "appearances": {
@@ -46,9 +42,6 @@
46
42
  ]
47
43
  }
48
44
  },
49
- "tokens": {
50
- "backgroundColor": "{system.color.none}"
51
- },
52
45
  "rules": [
53
46
  {
54
47
  "if": {
@@ -122,63 +115,41 @@
122
115
  "backgroundColor": "{palette.color.purpleTelus}"
123
116
  }
124
117
  }
125
- ]
118
+ ],
119
+ "tokens": {
120
+ "backgroundColor": "{system.color.none}"
121
+ }
126
122
  },
127
123
  "Button": {
128
124
  "appearances": {
129
- "priority": {
130
- "description": "Indicates the importance of the call-to-action. Limit the amount of high priority buttons on a page to prioritize meaningful user flows. Low priority styles are applied by default.",
131
- "values": ["high"],
132
- "type": "variant"
133
- },
134
125
  "danger": {
135
126
  "description": "Indicates a user action that is destructive and will result in loss of information or cause significant monetary charges. Limit the use of the danger button whenever possible.",
136
- "values": [true],
137
- "type": "variant"
127
+ "type": "variant",
128
+ "values": [true]
138
129
  },
130
+ "focus": "{appearances.Button.focus}",
131
+ "hover": "{appearances.Button.hover}",
132
+ "inactive": "{appearances.Button.inactive}",
139
133
  "inverse": {
140
134
  "description": "Use inverse buttons on darker backgrounds. High and low priority buttons, and danger buttons, are available in inverse.",
141
- "values": [true],
142
- "type": "variant"
135
+ "type": "variant",
136
+ "values": [true]
137
+ },
138
+ "pressed": "{appearances.Button.pressed}",
139
+ "priority": {
140
+ "description": "Indicates the importance of the call-to-action. Limit the amount of high priority buttons on a page to prioritize meaningful user flows. Low priority styles are applied by default.",
141
+ "type": "variant",
142
+ "values": ["high"]
143
143
  },
144
144
  "size": {
145
- "values": ["small"],
146
- "type": "variant"
145
+ "type": "variant",
146
+ "values": ["small"]
147
147
  },
148
148
  "width": {
149
149
  "description": "Available in default or full-width. Default-width expands based on content Full-width expands to width of the container.",
150
- "values": ["full"],
151
- "type": "variant"
152
- },
153
- "hover": "{appearances.Button.hover}",
154
- "focus": "{appearances.Button.focus}",
155
- "pressed": "{appearances.Button.pressed}",
156
- "inactive": "{appearances.Button.inactive}"
157
- },
158
- "tokens": {
159
- "borderColor": "{palette.color.greenAccessible}",
160
- "borderWidth": "{palette.border.border1}",
161
- "borderRadius": "{palette.radius.pill32}",
162
- "shadow": "{system.shadow.none}",
163
- "fontSize": "{palette.fontSize.size16}",
164
- "color": "{palette.color.greenAccessible}",
165
- "lineHeight": "{palette.lineHeight.ratio3to2}",
166
- "textAlign": "{system.flexJustifyContent.center}",
167
- "alignSelf": "{system.flexAlign.flexStart}",
168
- "fontName": "{palette.fontName.HelveticaNow}",
169
- "fontWeight": "{palette.fontWeight.weight700}",
170
- "backgroundColor": "{palette.color.white}",
171
- "opacity": "{system.opacity.opaque}",
172
- "paddingLeft": "{palette.size.size32}",
173
- "paddingRight": "{palette.size.size32}",
174
- "paddingTop": "{palette.size.size12}",
175
- "paddingBottom": "{palette.size.size12}",
176
- "width": "{system.size.none}",
177
- "minWidth": "{palette.size.size144}",
178
- "outerBorderColor": "{palette.color.transparent}",
179
- "outerBorderWidth": "{palette.border.border2}",
180
- "outerBorderGap": "{palette.border.border2}",
181
- "outerBackgroundColor": "{palette.color.transparent}"
150
+ "type": "variant",
151
+ "values": ["full"]
152
+ }
182
153
  },
183
154
  "rules": [
184
155
  {
@@ -195,14 +166,14 @@
195
166
  },
196
167
  "tokens": {
197
168
  "backgroundColor": "{palette.color.greenAccessible}",
198
- "color": "{palette.color.white}",
199
- "borderWidth": "{palette.border.none}"
169
+ "borderWidth": "{palette.border.none}",
170
+ "color": "{palette.color.white}"
200
171
  }
201
172
  },
202
173
  {
203
174
  "if": {
204
- "priority": "high",
205
- "hover": true
175
+ "hover": true,
176
+ "priority": "high"
206
177
  },
207
178
  "tokens": {
208
179
  "backgroundColor": "{palette.color.greenSanFelix}"
@@ -213,8 +184,8 @@
213
184
  "pressed": true
214
185
  },
215
186
  "tokens": {
216
- "borderWidth": "{system.size.zero}",
217
187
  "backgroundColor": "{palette.color.greenDarkFern}",
188
+ "borderWidth": "{system.border.zero}",
218
189
  "color": "{palette.color.white}"
219
190
  }
220
191
  },
@@ -257,9 +228,9 @@
257
228
  },
258
229
  {
259
230
  "if": {
231
+ "hover": true,
260
232
  "inverse": true,
261
- "priority": "high",
262
- "hover": true
233
+ "priority": "high"
263
234
  },
264
235
  "tokens": {
265
236
  "backgroundColor": "{palette.color.light80}"
@@ -271,14 +242,14 @@
271
242
  "pressed": true
272
243
  },
273
244
  "tokens": {
274
- "color": "{palette.color.greyCharcoal}",
275
- "backgroundColor": "{palette.color.light60}"
245
+ "backgroundColor": "{palette.color.light60}",
246
+ "color": "{palette.color.greyCharcoal}"
276
247
  }
277
248
  },
278
249
  {
279
250
  "if": {
280
- "inverse": true,
281
- "focus": true
251
+ "focus": true,
252
+ "inverse": true
282
253
  },
283
254
  "tokens": {
284
255
  "outerBorderColor": "{palette.color.white}"
@@ -290,15 +261,15 @@
290
261
  "priority": null
291
262
  },
292
263
  "tokens": {
293
- "color": "{palette.color.red}",
294
- "borderColor": "{palette.color.red}"
264
+ "borderColor": "{palette.color.red}",
265
+ "color": "{palette.color.red}"
295
266
  }
296
267
  },
297
268
  {
298
269
  "if": {
299
270
  "danger": true,
300
- "priority": null,
301
- "inverse": true
271
+ "inverse": true,
272
+ "priority": null
302
273
  },
303
274
  "tokens": {
304
275
  "backgroundColor": "{palette.color.white}"
@@ -307,8 +278,8 @@
307
278
  {
308
279
  "if": {
309
280
  "danger": true,
310
- "priority": null,
311
- "focus": true
281
+ "focus": true,
282
+ "priority": null
312
283
  },
313
284
  "tokens": {
314
285
  "outerBorderColor": "{palette.color.red}"
@@ -317,8 +288,8 @@
317
288
  {
318
289
  "if": {
319
290
  "danger": true,
320
- "priority": null,
321
- "pressed": true
291
+ "pressed": true,
292
+ "priority": null
322
293
  },
323
294
  "tokens": {
324
295
  "backgroundColor": "{palette.color.redDark}",
@@ -328,9 +299,9 @@
328
299
  {
329
300
  "if": {
330
301
  "danger": true,
331
- "priority": null,
302
+ "focus": true,
332
303
  "pressed": true,
333
- "focus": true
304
+ "priority": null
334
305
  },
335
306
  "tokens": {
336
307
  "outerBorderColor": "{palette.color.redDark}"
@@ -349,9 +320,9 @@
349
320
  "size": "small"
350
321
  },
351
322
  "tokens": {
352
- "paddingTop": "{palette.size.size4}",
323
+ "minWidth": "{system.size.zero}",
353
324
  "paddingBottom": "{palette.size.size4}",
354
- "minWidth": "{system.size.zero}"
325
+ "paddingTop": "{palette.size.size4}"
355
326
  }
356
327
  },
357
328
  {
@@ -361,8 +332,8 @@
361
332
  },
362
333
  "tokens": {
363
334
  "backgroundColor": "{palette.color.greyCloud}",
364
- "color": "{palette.color.white}",
365
- "borderWidth": "{system.size.zero}"
335
+ "borderWidth": "{palette.border.none}",
336
+ "color": "{palette.color.white}"
366
337
  }
367
338
  },
368
339
  {
@@ -375,20 +346,37 @@
375
346
  "color": "{palette.color.greyCharcoal}"
376
347
  }
377
348
  }
378
- ]
349
+ ],
350
+ "tokens": {
351
+ "alignSelf": "{system.flexAlign.flexStart}",
352
+ "backgroundColor": "{palette.color.white}",
353
+ "borderColor": "{palette.color.greenAccessible}",
354
+ "borderRadius": "{palette.radius.pill32}",
355
+ "borderWidth": "{palette.border.border1}",
356
+ "color": "{palette.color.greenAccessible}",
357
+ "fontName": "{palette.fontName.HelveticaNow}",
358
+ "fontSize": "{palette.fontSize.size16}",
359
+ "fontWeight": "{palette.fontWeight.weight700}",
360
+ "lineHeight": "{palette.lineHeight.ratio3to2}",
361
+ "minWidth": "{palette.size.size144}",
362
+ "opacity": "{system.opacity.opaque}",
363
+ "outerBackgroundColor": "{palette.color.transparent}",
364
+ "outerBorderColor": "{palette.color.transparent}",
365
+ "outerBorderGap": "{palette.size.size2}",
366
+ "outerBorderWidth": "{palette.border.border2}",
367
+ "paddingBottom": "{palette.size.size12}",
368
+ "paddingLeft": "{palette.size.size32}",
369
+ "paddingRight": "{palette.size.size32}",
370
+ "paddingTop": "{palette.size.size12}",
371
+ "shadow": "{system.shadow.none}",
372
+ "textAlign": "{system.flexJustifyContent.center}",
373
+ "width": "{system.size.none}"
374
+ }
379
375
  },
380
376
  "ButtonGroup": {
381
377
  "appearances": {
382
378
  "viewport": "{appearances.system.viewport}"
383
379
  },
384
- "tokens": {
385
- "space": "{system.integer.1}",
386
- "direction": "{system.direction.row}",
387
- "alignItems": "{system.flexAlign.center}",
388
- "justifyContent": "{system.flexJustifyContent.flexStart}",
389
- "flexGrow": "{system.integer.0}",
390
- "flexShrink": "{system.integer.0}"
391
- },
392
380
  "rules": [
393
381
  {
394
382
  "if": {
@@ -398,40 +386,23 @@
398
386
  "space": "{system.integer.3}"
399
387
  }
400
388
  }
401
- ]
389
+ ],
390
+ "tokens": {
391
+ "alignItems": "{system.flexAlign.center}",
392
+ "direction": "{system.direction.row}",
393
+ "flexGrow": "{system.integer.0}",
394
+ "flexShrink": "{system.integer.0}",
395
+ "justifyContent": "{system.flexJustifyContent.flexStart}",
396
+ "space": "{system.integer.1}"
397
+ }
402
398
  },
403
399
  "ButtonGroupItem": {
404
400
  "appearances": {
405
- "hover": "{appearances.ButtonGroupItem.hover}",
406
401
  "focus": "{appearances.ButtonGroupItem.focus}",
402
+ "hover": "{appearances.ButtonGroupItem.hover}",
403
+ "inactive": "{appearances.ButtonGroupItem.inactive}",
407
404
  "pressed": "{appearances.ButtonGroupItem.pressed}",
408
- "selected": "{appearances.ButtonGroupItem.selected}",
409
- "inactive": "{appearances.ButtonGroupItem.inactive}"
410
- },
411
- "tokens": {
412
- "borderColor": "{palette.color.greyCloud}",
413
- "borderWidth": "{palette.border.border1}",
414
- "borderRadius": "{palette.radius.pill32}",
415
- "shadow": "{system.shadow.none}",
416
- "fontSize": "{palette.fontSize.size14}",
417
- "color": "{palette.color.greyShuttle}",
418
- "lineHeight": "{palette.lineHeight.ratio3to2}",
419
- "textAlign": "{system.flexJustifyContent.center}",
420
- "alignSelf": "{system.flexAlign.flexStart}",
421
- "fontName": "{palette.fontName.HelveticaNow}",
422
- "fontWeight": "{palette.fontWeight.weight700}",
423
- "backgroundColor": "{palette.color.white}",
424
- "opacity": "{system.opacity.opaque}",
425
- "paddingLeft": "{palette.size.size16}",
426
- "paddingRight": "{palette.size.size16}",
427
- "paddingTop": "{palette.size.size8}",
428
- "paddingBottom": "{palette.size.size8}",
429
- "width": "{system.size.none}",
430
- "minWidth": "{system.size.zero}",
431
- "outerBorderColor": "{palette.color.transparent}",
432
- "outerBorderWidth": "{palette.border.border2}",
433
- "outerBorderGap": "{palette.border.border2}",
434
- "outerBackgroundColor": "{palette.color.transparent}"
405
+ "selected": "{appearances.ButtonGroupItem.selected}"
435
406
  },
436
407
  "rules": [
437
408
  {
@@ -439,9 +410,9 @@
439
410
  "pressed": true
440
411
  },
441
412
  "tokens": {
442
- "borderWidth": "{palette.border.none}",
443
413
  "backgroundColor": "{palette.color.greyShuttle}",
444
414
  "borderColor": "{palette.color.greyShuttle}",
415
+ "borderWidth": "{palette.border.none}",
445
416
  "color": "{palette.color.white}"
446
417
  }
447
418
  },
@@ -453,7 +424,7 @@
453
424
  "borderColor": "{palette.color.greyShuttle}",
454
425
  "outerBorderColor": "{palette.color.greyShuttle}",
455
426
  "outerBorderGap": "{palette.size.size2}",
456
- "outerBorderWidth": "{palette.size.size2}"
427
+ "outerBorderWidth": "{palette.border.border2}"
457
428
  }
458
429
  },
459
430
  {
@@ -469,15 +440,15 @@
469
440
  "selected": true
470
441
  },
471
442
  "tokens": {
472
- "borderWidth": "{palette.border.none}",
473
443
  "backgroundColor": "{palette.color.purpleTelus}",
444
+ "borderWidth": "{palette.border.none}",
474
445
  "color": "{palette.color.white}"
475
446
  }
476
447
  },
477
448
  {
478
449
  "if": {
479
- "selected": true,
480
- "hover": true
450
+ "hover": true,
451
+ "selected": true
481
452
  },
482
453
  "tokens": {
483
454
  "backgroundColor": "{palette.color.purpleDeluge}"
@@ -485,8 +456,8 @@
485
456
  },
486
457
  {
487
458
  "if": {
488
- "selected": true,
489
- "pressed": true
459
+ "pressed": true,
460
+ "selected": true
490
461
  },
491
462
  "tokens": {
492
463
  "backgroundColor": "{palette.color.purpleDark}"
@@ -494,8 +465,8 @@
494
465
  },
495
466
  {
496
467
  "if": {
497
- "selected": true,
498
- "focus": true
468
+ "focus": true,
469
+ "selected": true
499
470
  },
500
471
  "tokens": {
501
472
  "outerBorderColor": "{palette.color.purpleTelus}"
@@ -503,9 +474,9 @@
503
474
  },
504
475
  {
505
476
  "if": {
506
- "selected": true,
507
477
  "focus": true,
508
- "pressed": true
478
+ "pressed": true,
479
+ "selected": true
509
480
  },
510
481
  "tokens": {
511
482
  "outerBorderColor": "{palette.color.purpleDark}"
@@ -517,37 +488,49 @@
517
488
  },
518
489
  "tokens": {
519
490
  "backgroundColor": "{palette.color.greyCloud}",
520
- "color": "{palette.color.white}",
521
- "borderWidth": "{system.border.zero}"
491
+ "borderWidth": "{system.border.zero}",
492
+ "color": "{palette.color.white}"
522
493
  }
523
494
  }
524
- ]
495
+ ],
496
+ "tokens": {
497
+ "alignSelf": "{system.flexAlign.flexStart}",
498
+ "backgroundColor": "{palette.color.white}",
499
+ "borderColor": "{palette.color.greyCloud}",
500
+ "borderRadius": "{palette.radius.pill32}",
501
+ "borderWidth": "{palette.border.border1}",
502
+ "color": "{palette.color.greyShuttle}",
503
+ "fontName": "{palette.fontName.HelveticaNow}",
504
+ "fontSize": "{palette.fontSize.size14}",
505
+ "fontWeight": "{palette.fontWeight.weight700}",
506
+ "lineHeight": "{palette.lineHeight.ratio3to2}",
507
+ "minWidth": "{system.size.zero}",
508
+ "opacity": "{system.opacity.opaque}",
509
+ "outerBackgroundColor": "{palette.color.transparent}",
510
+ "outerBorderColor": "{palette.color.transparent}",
511
+ "outerBorderGap": "{palette.size.size2}",
512
+ "outerBorderWidth": "{palette.border.border2}",
513
+ "paddingBottom": "{palette.size.size8}",
514
+ "paddingLeft": "{palette.size.size16}",
515
+ "paddingRight": "{palette.size.size16}",
516
+ "paddingTop": "{palette.size.size8}",
517
+ "shadow": "{system.shadow.none}",
518
+ "textAlign": "{system.flexJustifyContent.center}",
519
+ "width": "{system.size.none}"
520
+ }
525
521
  },
526
522
  "Card": {
527
523
  "appearances": {
528
524
  "background": {
529
- "values": ["alternative"],
530
- "type": "variant"
525
+ "type": "variant",
526
+ "values": ["alternative"]
531
527
  },
532
528
  "padding": {
533
- "values": ["narrow", "intermediate", "compact", "custom"],
534
- "type": "variant"
529
+ "type": "variant",
530
+ "values": ["narrow", "intermediate", "compact", "custom"]
535
531
  },
536
532
  "viewport": "{appearances.system.viewport}"
537
533
  },
538
- "tokens": {
539
- "flex": "{system.integer.1}",
540
- "backgroundColor": "{palette.color.white}",
541
- "borderColor": "{palette.color.greyMystic}",
542
- "borderRadius": "{palette.radius.radius6}",
543
- "borderWidth": "{palette.border.border1}",
544
- "paddingBottom": "{palette.size.size32}",
545
- "paddingLeft": "{palette.size.size24}",
546
- "paddingRight": "{palette.size.size24}",
547
- "paddingTop": "{palette.size.size32}",
548
- "minWidth": "{system.size.none}",
549
- "shadow": "{system.shadow.none}"
550
- },
551
534
  "rules": [
552
535
  {
553
536
  "if": {
@@ -636,7 +619,20 @@
636
619
  "paddingTop": "{palette.size.size0}"
637
620
  }
638
621
  }
639
- ]
622
+ ],
623
+ "tokens": {
624
+ "backgroundColor": "{palette.color.white}",
625
+ "borderColor": "{palette.color.greyMystic}",
626
+ "borderRadius": "{palette.radius.radius6}",
627
+ "borderWidth": "{palette.border.border1}",
628
+ "flex": "{system.integer.1}",
629
+ "minWidth": "{system.size.none}",
630
+ "paddingBottom": "{palette.size.size32}",
631
+ "paddingLeft": "{palette.size.size24}",
632
+ "paddingRight": "{palette.size.size24}",
633
+ "paddingTop": "{palette.size.size32}",
634
+ "shadow": "{system.shadow.none}"
635
+ }
640
636
  },
641
637
  "Checkbox": {
642
638
  "appearances": {
@@ -646,31 +642,6 @@
646
642
  "hover": "{appearances.Checkbox.hover}",
647
643
  "inactive": "{appearances.Checkbox.inactive}"
648
644
  },
649
- "tokens": {
650
- "containerBackgroundColor": "{palette.color.transparent}",
651
- "feedbackMarginBottom": "{system.size.zero}",
652
- "feedbackMarginTop": "{palette.size.size2}",
653
- "feedbackPosition": "{system.position.bottom}",
654
- "icon": "{palette.icon.Checkmark}",
655
- "iconBackgroundColor": "{palette.color.purpleDeluge}",
656
- "iconColor": "{palette.color.white}",
657
- "iconSize": "{palette.size.size16}",
658
- "inputBackgroundColor": "{palette.color.white}",
659
- "inputBorderColor": "{palette.color.greyShuttle}",
660
- "inputBorderRadius": "{palette.radius.radius4}",
661
- "inputBorderWidth": "{palette.border.border1}",
662
- "inputHeight": "{palette.size.size20}",
663
- "inputOutlineColor": "{system.color.none}",
664
- "inputOutlineWidth": "{palette.border.none}",
665
- "inputShadow": "{system.shadow.none}",
666
- "inputWidth": "{palette.size.size20}",
667
- "labelColor": "{palette.color.greyCharcoal}",
668
- "labelFontName": "{palette.fontName.HelveticaNow}",
669
- "labelFontSize": "{palette.fontSize.size16}",
670
- "labelFontWeight": "{palette.fontWeight.weight400}",
671
- "labelLineHeight": "{palette.lineHeight.ratio3to2}",
672
- "labelMarginLeft": "{palette.size.size10}"
673
- },
674
645
  "rules": [
675
646
  {
676
647
  "if": {
@@ -694,39 +665,57 @@
694
665
  "inactive": true
695
666
  },
696
667
  "tokens": {
697
- "inputBorderColor": "{palette.color.transparent}",
698
- "inputBackgroundColor": "{palette.color.greyMystic}",
699
668
  "iconBackgroundColor": "{palette.color.greyMystic}",
700
669
  "iconColor": "{palette.color.greyShuttle}",
670
+ "inputBackgroundColor": "{palette.color.greyMystic}",
671
+ "inputBorderColor": "{palette.color.transparent}",
701
672
  "labelColor": "{palette.color.greyShuttle}"
702
673
  }
703
674
  }
704
- ]
705
- },
706
- "CheckboxGroup": {
675
+ ],
676
+ "tokens": {
677
+ "containerBackgroundColor": "{palette.color.transparent}",
678
+ "feedbackMarginBottom": "{system.size.zero}",
679
+ "feedbackMarginTop": "{palette.size.size2}",
680
+ "feedbackPosition": "{system.position.bottom}",
681
+ "icon": "{palette.icon.Checkmark}",
682
+ "iconBackgroundColor": "{palette.color.purpleDeluge}",
683
+ "iconColor": "{palette.color.white}",
684
+ "iconSize": "{palette.size.size16}",
685
+ "inputBackgroundColor": "{palette.color.white}",
686
+ "inputBorderColor": "{palette.color.greyShuttle}",
687
+ "inputBorderRadius": "{palette.radius.radius4}",
688
+ "inputBorderWidth": "{palette.border.border1}",
689
+ "inputHeight": "{palette.size.size20}",
690
+ "inputOutlineColor": "{system.color.none}",
691
+ "inputOutlineWidth": "{palette.border.none}",
692
+ "inputShadow": "{system.shadow.none}",
693
+ "inputWidth": "{palette.size.size20}",
694
+ "labelColor": "{palette.color.greyCharcoal}",
695
+ "labelFontName": "{palette.fontName.HelveticaNow}",
696
+ "labelFontSize": "{palette.fontSize.size16}",
697
+ "labelFontWeight": "{palette.fontWeight.weight400}",
698
+ "labelLineHeight": "{palette.lineHeight.ratio3to2}",
699
+ "labelMarginLeft": "{palette.size.size10}"
700
+ }
701
+ },
702
+ "CheckboxGroup": {
707
703
  "appearances": {},
704
+ "rules": [],
708
705
  "tokens": {
709
- "space": "{system.integer.2}",
710
- "fieldSpace": "{system.integer.2}"
711
- },
712
- "rules": []
706
+ "fieldSpace": "{system.integer.2}",
707
+ "space": "{system.integer.2}"
708
+ }
713
709
  },
714
710
  "ChevronLink": {
715
711
  "appearances": {
716
712
  "hover": "{appearances.ChevronLink.hover}",
717
713
  "size": {
718
714
  "description": "Sets the size of the text and icon; these variants are shared with Link",
719
- "values": ["large", "small", "micro"],
720
- "type": "variant"
715
+ "type": "variant",
716
+ "values": ["large", "small", "micro"]
721
717
  }
722
718
  },
723
- "tokens": {
724
- "leftIcon": "{palette.icon.ArrowLeft}",
725
- "rightIcon": "{palette.icon.ArrowRight}",
726
- "iconDisplace": "{palette.size.size0}",
727
- "iconSpace": "{system.integer.1}",
728
- "iconSize": "{palette.size.size20}"
729
- },
730
719
  "rules": [
731
720
  {
732
721
  "if": {
@@ -744,35 +733,38 @@
744
733
  "iconSize": "{palette.size.size24}"
745
734
  }
746
735
  }
747
- ]
736
+ ],
737
+ "tokens": {
738
+ "iconDisplace": "{palette.size.size0}",
739
+ "iconSize": "{palette.size.size20}",
740
+ "iconSpace": "{system.integer.1}",
741
+ "leftIcon": "{palette.icon.ArrowLeft}",
742
+ "rightIcon": "{palette.icon.ArrowRight}"
743
+ }
748
744
  },
749
745
  "Divider": {
750
746
  "appearances": {
751
- "weight": {
752
- "values": ["thick"],
753
- "type": "variant"
754
- },
755
747
  "decorative": {
756
748
  "description": "Use a decorative divider to highlight an element. Non-decorative dividers are for clearly identifying separation of content.",
757
- "values": [true],
758
- "type": "variant"
749
+ "type": "variant",
750
+ "values": [true]
759
751
  },
760
752
  "inverse": {
761
- "values": [true],
762
- "type": "variant"
753
+ "type": "variant",
754
+ "values": [true]
755
+ },
756
+ "weight": {
757
+ "type": "variant",
758
+ "values": ["thick"]
763
759
  }
764
760
  },
765
- "tokens": {
766
- "width": "{palette.border.border1}",
767
- "color": "{palette.color.greyShuttle}"
768
- },
769
761
  "rules": [
770
762
  {
771
763
  "if": {
772
764
  "weight": "thick"
773
765
  },
774
766
  "tokens": {
775
- "width": "{palette.border.border2}"
767
+ "width": "{palette.size.size2}"
776
768
  }
777
769
  },
778
770
  {
@@ -791,37 +783,25 @@
791
783
  "color": "{palette.color.white}"
792
784
  }
793
785
  }
794
- ]
786
+ ],
787
+ "tokens": {
788
+ "color": "{palette.color.greyShuttle}",
789
+ "width": "{palette.size.size1}"
790
+ }
795
791
  },
796
792
  "ExpandCollapse": {
797
793
  "appearances": {},
794
+ "rules": [],
798
795
  "tokens": {
799
796
  "borderColor": "{palette.color.greyCloud}",
800
- "borderWidth": "{system.border.zero}",
801
- "borderStyle": "{system.borderStyle.solid}"
802
- },
803
- "rules": []
797
+ "borderStyle": "{system.borderStyle.solid}",
798
+ "borderWidth": "{system.border.zero}"
799
+ }
804
800
  },
805
801
  "ExpandCollapseControl": {
806
802
  "appearances": {
807
803
  "expanded": "{appearances.ExpandCollapseControl.expanded}"
808
804
  },
809
- "tokens": {
810
- "icon": "{palette.icon.CaretDown}",
811
- "iconColor": "{palette.color.greenAccessible}",
812
- "iconSize": "{palette.size.size24}",
813
- "iconGap": "{palette.size.size8}",
814
- "iconPosition": "{system.position.left}",
815
- "verticalAlign": "{system.verticalAlign.top}",
816
- "justifyContent": "{system.flexJustifyContent.flexStart}",
817
- "paddingLeft": "{palette.size.size8}",
818
- "paddingRight": "{palette.size.size16}",
819
- "paddingTop": "{palette.size.size16}",
820
- "paddingBottom": "{palette.size.size16}",
821
- "borderWidth": "{system.border.zero}",
822
- "borderColor": "{palette.color.transparent}",
823
- "backgroundColor": "{palette.color.transparent}"
824
- },
825
805
  "rules": [
826
806
  {
827
807
  "if": {
@@ -831,48 +811,43 @@
831
811
  "icon": "{palette.icon.CaretUp}"
832
812
  }
833
813
  }
834
- ]
814
+ ],
815
+ "tokens": {
816
+ "backgroundColor": "{palette.color.transparent}",
817
+ "borderColor": "{palette.color.transparent}",
818
+ "borderWidth": "{system.border.zero}",
819
+ "icon": "{palette.icon.CaretDown}",
820
+ "iconColor": "{palette.color.greenAccessible}",
821
+ "iconGap": "{palette.size.size8}",
822
+ "iconPosition": "{system.position.left}",
823
+ "iconSize": "{palette.size.size24}",
824
+ "justifyContent": "{system.flexJustifyContent.flexStart}",
825
+ "paddingBottom": "{palette.size.size16}",
826
+ "paddingLeft": "{palette.size.size8}",
827
+ "paddingRight": "{palette.size.size16}",
828
+ "paddingTop": "{palette.size.size16}",
829
+ "verticalAlign": "{system.verticalAlign.top}"
830
+ }
835
831
  },
836
832
  "ExpandCollapsePanel": {
837
833
  "appearances": {},
834
+ "rules": [],
838
835
  "tokens": {
839
- "expandDuration": "{palette.duration.duration300}",
840
836
  "collapseDuration": "{palette.duration.duration250}",
837
+ "contentPaddingBottom": "{palette.size.size16}",
841
838
  "contentPaddingLeft": "{palette.size.size40}",
842
839
  "contentPaddingRight": "{palette.size.size16}",
843
840
  "contentPaddingTop": "{palette.size.size0}",
844
- "contentPaddingBottom": "{palette.size.size16}"
845
- },
846
- "rules": []
841
+ "expandDuration": "{palette.duration.duration300}"
842
+ }
847
843
  },
848
844
  "Feedback": {
849
845
  "appearances": {
850
- "validation": "{appearances.Feedback.validation}",
851
846
  "icon": {
852
- "values": [true],
853
- "type": "variant"
854
- }
855
- },
856
- "tokens": {
857
- "backgroundColor": "{palette.color.greyAthens}",
858
- "borderColor": "{palette.color.greyMystic}",
859
- "borderWidth": "{palette.border.border1}",
860
- "borderRadius": "{palette.radius.radius4}",
861
- "paddingTop": "{palette.size.size12}",
862
- "paddingBottom": "{palette.size.size12}",
863
- "paddingLeft": "{palette.size.size16}",
864
- "paddingRight": "{palette.size.size16}",
865
- "space": "{system.integer.2}",
866
- "color": "{palette.color.greyThunder}",
867
- "fontName": "{palette.fontName.HelveticaNow}",
868
- "fontWeight": "{palette.fontWeight.weight400}",
869
- "lineHeight": "{palette.lineHeight.ratio3to2}",
870
- "titleFontSize": "{palette.fontSize.size16}",
871
- "contentFontSize": "{palette.fontSize.size14}",
872
- "icon": "{system.icon.none}",
873
- "iconSize": "{palette.fontSize.size24}",
874
- "iconColor": "{palette.color.transparent}",
875
- "iconGap": "{palette.size.size8}"
847
+ "type": "variant",
848
+ "values": [true]
849
+ },
850
+ "validation": "{appearances.Feedback.validation}"
876
851
  },
877
852
  "rules": [
878
853
  {
@@ -897,8 +872,8 @@
897
872
  },
898
873
  {
899
874
  "if": {
900
- "validation": "success",
901
- "icon": true
875
+ "icon": true,
876
+ "validation": "success"
902
877
  },
903
878
  "tokens": {
904
879
  "icon": "{palette.icon.StatusSuccess}",
@@ -907,32 +882,43 @@
907
882
  },
908
883
  {
909
884
  "if": {
910
- "validation": "error",
911
- "icon": true
885
+ "icon": true,
886
+ "validation": "error"
912
887
  },
913
888
  "tokens": {
914
889
  "icon": "{palette.icon.StatusError}",
915
890
  "iconColor": "{palette.color.red}"
916
891
  }
917
892
  }
918
- ]
893
+ ],
894
+ "tokens": {
895
+ "backgroundColor": "{palette.color.greyAthens}",
896
+ "borderColor": "{palette.color.greyMystic}",
897
+ "borderRadius": "{palette.radius.radius4}",
898
+ "borderWidth": "{palette.border.border1}",
899
+ "color": "{palette.color.greyThunder}",
900
+ "contentFontSize": "{palette.fontSize.size14}",
901
+ "fontName": "{palette.fontName.HelveticaNow}",
902
+ "fontWeight": "{palette.fontWeight.weight400}",
903
+ "icon": "{system.icon.none}",
904
+ "iconColor": "{palette.color.transparent}",
905
+ "iconGap": "{palette.size.size8}",
906
+ "iconSize": "{palette.size.size24}",
907
+ "lineHeight": "{palette.lineHeight.ratio3to2}",
908
+ "paddingBottom": "{palette.size.size12}",
909
+ "paddingLeft": "{palette.size.size16}",
910
+ "paddingRight": "{palette.size.size16}",
911
+ "paddingTop": "{palette.size.size12}",
912
+ "space": "{system.integer.2}",
913
+ "titleFontSize": "{palette.fontSize.size16}"
914
+ }
919
915
  },
920
916
  "HorizontalScrollButton": {
921
917
  "appearances": {
922
- "hover": "{appearances.HorizontalScrollButton.hover}",
923
918
  "focus": "{appearances.HorizontalScrollButton.focus}",
919
+ "hover": "{appearances.HorizontalScrollButton.hover}",
924
920
  "pressed": "{appearances.HorizontalScrollButton.pressed}"
925
921
  },
926
- "tokens": {
927
- "borderRadius": "{palette.radius.pill32}",
928
- "backgroundColor": "{palette.color.white}",
929
- "borderColor": "{palette.color.greyCloud}",
930
- "borderWidth": "{palette.border.border1}",
931
- "padding": "{system.size.zero}",
932
- "shadow": "{palette.shadow.surfaceRaised}",
933
- "iconSize": "{palette.size.size32}",
934
- "iconColor": "{palette.color.greyShuttle}"
935
- },
936
922
  "rules": [
937
923
  {
938
924
  "if": {
@@ -952,26 +938,29 @@
952
938
  "iconColor": "{palette.color.white}"
953
939
  }
954
940
  }
955
- ]
941
+ ],
942
+ "tokens": {
943
+ "backgroundColor": "{palette.color.white}",
944
+ "borderColor": "{palette.color.greyCloud}",
945
+ "borderRadius": "{palette.radius.pill32}",
946
+ "borderWidth": "{palette.border.border1}",
947
+ "iconColor": "{palette.color.greyShuttle}",
948
+ "iconSize": "{palette.size.size32}",
949
+ "padding": "{system.size.zero}",
950
+ "shadow": "{palette.shadow.surfaceRaised}"
951
+ }
956
952
  },
957
953
  "Icon": {
958
954
  "appearances": {
959
- "size": {
960
- "values": ["small"],
961
- "type": "variant"
962
- },
963
955
  "rank": {
964
- "values": ["primary"],
965
- "type": "variant"
956
+ "type": "variant",
957
+ "values": ["primary"]
958
+ },
959
+ "size": {
960
+ "type": "variant",
961
+ "values": ["small"]
966
962
  }
967
963
  },
968
- "tokens": {
969
- "size": "{palette.size.size24}",
970
- "color": "{palette.color.greyCharcoal}",
971
- "translateX": "{system.size.zero}",
972
- "translateY": "{system.size.zero}",
973
- "scale": "{system.integer.1}"
974
- },
975
964
  "rules": [
976
965
  {
977
966
  "if": {
@@ -989,18 +978,25 @@
989
978
  "color": "{palette.color.purpleTelus}"
990
979
  }
991
980
  }
992
- ]
981
+ ],
982
+ "tokens": {
983
+ "color": "{palette.color.greyCharcoal}",
984
+ "scale": "{system.integer.1}",
985
+ "size": "{palette.size.size24}",
986
+ "translateX": "{system.size.zero}",
987
+ "translateY": "{system.size.zero}"
988
+ }
993
989
  },
994
990
  "IconButton": {
995
991
  "appearances": {
996
- "hover": "{appearances.IconButton.hover}",
997
992
  "focus": "{appearances.IconButton.focus}",
998
- "pressed": "{appearances.IconButton.pressed}",
993
+ "hover": "{appearances.IconButton.hover}",
999
994
  "inverse": {
1000
995
  "description": "For use on dark backgrounds",
1001
996
  "type": "variant",
1002
997
  "values": [true]
1003
998
  },
999
+ "pressed": "{appearances.IconButton.pressed}",
1004
1000
  "raised": {
1005
1001
  "description": "Uses shadow and background colour to appear raised above the page",
1006
1002
  "type": "variant",
@@ -1011,30 +1007,14 @@
1011
1007
  "values": ["small", "large"]
1012
1008
  }
1013
1009
  },
1014
- "tokens": {
1015
- "outerBorderWidth": "{system.border.zero}",
1016
- "outerBorderColor": "{system.color.transparent}",
1017
- "outerBorderGap": "{system.size.zero}",
1018
- "backgroundColor": "{system.color.transparent}",
1019
- "shadow": "{system.shadow.none}",
1020
- "padding": "{palette.size.size8}",
1021
- "borderRadius": "{system.radius.round}",
1022
- "borderWidth": "{palette.border.border1}",
1023
- "borderColor": "{palette.color.greyShuttle}",
1024
- "iconColor": "{palette.color.greyShuttle}",
1025
- "iconSize": "{palette.size.size16}",
1026
- "iconScale": "{system.iconScale.scale1}",
1027
- "iconTranslateX": "{system.size.zero}",
1028
- "iconTranslateY": "{system.size.zero}"
1029
- },
1030
1010
  "rules": [
1031
1011
  {
1032
1012
  "if": {
1033
1013
  "inverse": true
1034
1014
  },
1035
1015
  "tokens": {
1036
- "iconColor": "{palette.color.white}",
1037
- "borderColor": "{palette.color.white}"
1016
+ "borderColor": "{palette.color.white}",
1017
+ "iconColor": "{palette.color.white}"
1038
1018
  }
1039
1019
  },
1040
1020
  {
@@ -1062,9 +1042,9 @@
1062
1042
  "focus": true
1063
1043
  },
1064
1044
  "tokens": {
1065
- "outerBorderWidth": "{palette.border.border1}",
1066
1045
  "outerBorderColor": "{palette.color.greyShuttle}",
1067
- "outerBorderGap": "{palette.size.size4}"
1046
+ "outerBorderGap": "{palette.size.size4}",
1047
+ "outerBorderWidth": "{palette.border.border1}"
1068
1048
  }
1069
1049
  },
1070
1050
  {
@@ -1073,10 +1053,10 @@
1073
1053
  "inverse": true
1074
1054
  },
1075
1055
  "tokens": {
1076
- "outerBorderWidth": "{system.border.zero}",
1056
+ "backgroundColor": "{palette.color.light60}",
1077
1057
  "borderColor": "{palette.color.greyCharcoal}",
1078
1058
  "iconColor": "{palette.color.greyCharcoal}",
1079
- "backgroundColor": "{palette.color.light60}"
1059
+ "outerBorderWidth": "{system.border.zero}"
1080
1060
  }
1081
1061
  },
1082
1062
  {
@@ -1084,21 +1064,21 @@
1084
1064
  "pressed": true
1085
1065
  },
1086
1066
  "tokens": {
1067
+ "backgroundColor": "{palette.color.greyShuttle}",
1087
1068
  "borderColor": "{palette.color.white}",
1088
1069
  "iconColor": "{palette.color.white}",
1089
- "backgroundColor": "{palette.color.greyShuttle}",
1090
1070
  "outerBorderGap": "{palette.size.size4}"
1091
1071
  }
1092
1072
  },
1093
1073
  {
1094
1074
  "if": {
1095
- "pressed": true,
1096
- "inverse": true
1075
+ "inverse": true,
1076
+ "pressed": true
1097
1077
  },
1098
1078
  "tokens": {
1079
+ "backgroundColor": "{palette.color.light40}",
1099
1080
  "borderColor": "{palette.color.greyShuttle}",
1100
- "iconColor": "{palette.color.greyShuttle}",
1101
- "backgroundColor": "{palette.color.light40}"
1081
+ "iconColor": "{palette.color.greyShuttle}"
1102
1082
  }
1103
1083
  },
1104
1084
  {
@@ -1119,19 +1099,19 @@
1119
1099
  }
1120
1100
  },
1121
1101
  {
1102
+ "description": "Raised IconButtons follow different design patterns to other variants",
1122
1103
  "if": {
1123
1104
  "raised": true
1124
1105
  },
1125
- "description": "Raised IconButtons follow different design patterns to other variants",
1126
1106
  "tokens": {
1127
1107
  "backgroundColor": "{palette.color.white}",
1128
- "borderWidth": "{palette.border.border1}",
1129
1108
  "borderColor": "{palette.color.greyCloud}",
1130
- "shadow": "{palette.shadow.surfaceRaised}",
1131
- "padding": "{palette.size.size12}",
1132
- "outerBorderWidth": "{system.border.zero}",
1109
+ "borderWidth": "{palette.border.border1}",
1133
1110
  "outerBorderColor": "{system.color.transparent}",
1134
- "outerBorderGap": "{system.size.zero}"
1111
+ "outerBorderGap": "{system.size.zero}",
1112
+ "outerBorderWidth": "{system.border.zero}",
1113
+ "padding": "{palette.size.size12}",
1114
+ "shadow": "{palette.shadow.surfaceRaised}"
1135
1115
  }
1136
1116
  },
1137
1117
  {
@@ -1154,8 +1134,8 @@
1154
1134
  },
1155
1135
  {
1156
1136
  "if": {
1157
- "raised": true,
1158
- "pressed": true
1137
+ "pressed": true,
1138
+ "raised": true
1159
1139
  },
1160
1140
  "tokens": {
1161
1141
  "backgroundColor": "{palette.color.greyShuttle}",
@@ -1164,9 +1144,9 @@
1164
1144
  },
1165
1145
  {
1166
1146
  "if": {
1167
- "raised": true,
1147
+ "focus": true,
1168
1148
  "pressed": true,
1169
- "focus": true
1149
+ "raised": true
1170
1150
  },
1171
1151
  "tokens": {
1172
1152
  "backgroundColor": "{palette.color.purpleTelus}",
@@ -1193,78 +1173,74 @@
1193
1173
  "borderWidth": "{palette.border.border3}"
1194
1174
  }
1195
1175
  }
1196
- ]
1176
+ ],
1177
+ "tokens": {
1178
+ "backgroundColor": "{system.color.transparent}",
1179
+ "borderColor": "{palette.color.greyShuttle}",
1180
+ "borderRadius": "{system.radius.round}",
1181
+ "borderWidth": "{palette.border.border1}",
1182
+ "iconColor": "{palette.color.greyShuttle}",
1183
+ "iconScale": "{system.iconScale.scale1}",
1184
+ "iconSize": "{palette.size.size16}",
1185
+ "iconTranslateX": "{system.size.zero}",
1186
+ "iconTranslateY": "{system.size.zero}",
1187
+ "outerBorderColor": "{system.color.transparent}",
1188
+ "outerBorderGap": "{system.size.zero}",
1189
+ "outerBorderWidth": "{system.border.zero}",
1190
+ "padding": "{palette.size.size8}",
1191
+ "shadow": "{system.shadow.none}"
1192
+ }
1197
1193
  },
1198
1194
  "InputLabel": {
1199
1195
  "appearances": {},
1196
+ "rules": [],
1200
1197
  "tokens": {
1201
- "gap": "{palette.size.size8}",
1202
1198
  "color": "{palette.color.greyCharcoal}",
1203
1199
  "fontName": "{palette.fontName.HelveticaNow}",
1204
- "fontWeight": "{palette.fontWeight.weight700}",
1205
1200
  "fontSize": "{palette.fontSize.size16}",
1206
- "lineHeight": "{palette.lineHeight.ratio3to2}",
1201
+ "fontWeight": "{palette.fontWeight.weight700}",
1202
+ "gap": "{palette.size.size8}",
1207
1203
  "hintColor": "{palette.color.greyCharcoal}",
1208
1204
  "hintFontName": "{palette.fontName.HelveticaNow}",
1209
- "hintFontWeight": "{palette.fontWeight.weight400}",
1210
1205
  "hintFontSize": "{palette.fontSize.size14}",
1211
- "hintLineHeight": "{palette.lineHeight.ratio7to5}"
1212
- },
1213
- "rules": []
1206
+ "hintFontWeight": "{palette.fontWeight.weight400}",
1207
+ "hintLineHeight": "{palette.lineHeight.ratio7to5}",
1208
+ "lineHeight": "{palette.lineHeight.ratio3to2}"
1209
+ }
1214
1210
  },
1215
1211
  "InputSupports": {
1216
1212
  "appearances": {},
1213
+ "rules": [],
1217
1214
  "tokens": {
1218
1215
  "space": "{system.integer.1}"
1219
- },
1220
- "rules": []
1216
+ }
1221
1217
  },
1222
1218
  "Link": {
1223
1219
  "appearances": {
1224
- "size": {
1225
- "description": "Text sizes for block links; similar but not always identical to Typography sizes.",
1226
- "values": ["large", "small", "micro"],
1227
- "type": "variant"
1228
- },
1229
1220
  "alternative": {
1230
1221
  "description": "Replaces the default green colour with a more subtle grey.",
1231
- "values": [true],
1232
- "type": "variant"
1222
+ "type": "variant",
1223
+ "values": [true]
1233
1224
  },
1225
+ "focus": "{appearances.Link.focus}",
1226
+ "hover": "{appearances.Link.hover}",
1227
+ "iconPosition": "{appearances.Link.iconPosition}",
1234
1228
  "inverse": {
1235
1229
  "description": "Styles the link white for use on dark backgrounds.",
1236
- "values": [true],
1237
- "type": "variant"
1230
+ "type": "variant",
1231
+ "values": [true]
1238
1232
  },
1239
1233
  "light": {
1240
1234
  "description": "A lighter grey variant, used to lower the emphasis on a given Link (e.g. in Breadcrumbs)",
1241
- "values": [true],
1242
- "type": "variant"
1235
+ "type": "variant",
1236
+ "values": [true]
1243
1237
  },
1244
- "iconPosition": "{appearances.Link.iconPosition}",
1245
- "focus": "{appearances.Link.focus}",
1246
- "hover": "{appearances.Link.hover}",
1247
- "pressed": "{appearances.Link.pressed}"
1248
- },
1249
- "tokens": {
1250
- "color": "{palette.color.greenAccessible}",
1251
- "textLine": "{system.textLine.underline}",
1252
- "textLineStyle": "{system.textLineStyle.solid}",
1253
- "outerBorderColor": "{palette.color.transparent}",
1254
- "outerBorderWidth": "{palette.border.border2}",
1255
- "outerBorderGap": "{palette.border.border2}",
1256
- "borderRadius": "{palette.radius.radius4}",
1257
- "outerBorderOutline": "{system.borderStyle.none}",
1258
- "blockFontWeight": "{palette.fontWeight.weight400}",
1259
- "blockFontName": "{palette.fontName.HelveticaNow}",
1260
- "blockFontSize": "{palette.fontSize.size16}",
1261
- "blockLineHeight": "{palette.lineHeight.ratio3to2}",
1262
- "alignSelf": "{system.flexAlign.flexStart}",
1263
- "icon": "{system.icon.none}",
1264
- "iconSize": "{palette.fontSize.size24}",
1265
- "iconSpace": "{system.integer.1}",
1266
- "iconTranslateX": "{system.size.zero}",
1267
- "iconTranslateY": "{system.size.zero}"
1238
+ "pressed": "{appearances.Link.pressed}",
1239
+ "size": {
1240
+ "description": "Text sizes for block links; similar but not always identical to Typography sizes.",
1241
+ "type": "variant",
1242
+ "values": ["large", "small", "micro"]
1243
+ }
1268
1244
  },
1269
1245
  "rules": [
1270
1246
  {
@@ -1289,8 +1265,8 @@
1289
1265
  "hover": true
1290
1266
  },
1291
1267
  "tokens": {
1292
- "textLine": "{system.textLine.none}",
1293
- "color": "{palette.color.greenSanFelix}"
1268
+ "color": "{palette.color.greenSanFelix}",
1269
+ "textLine": "{system.textLine.none}"
1294
1270
  }
1295
1271
  },
1296
1272
  {
@@ -1298,14 +1274,14 @@
1298
1274
  "pressed": true
1299
1275
  },
1300
1276
  "tokens": {
1301
- "textLine": "{system.textLine.none}",
1302
- "color": "{palette.color.greenDarkFern}"
1277
+ "color": "{palette.color.greenDarkFern}",
1278
+ "textLine": "{system.textLine.none}"
1303
1279
  }
1304
1280
  },
1305
1281
  {
1306
1282
  "if": {
1307
- "pressed": true,
1308
- "focus": true
1283
+ "focus": true,
1284
+ "pressed": true
1309
1285
  },
1310
1286
  "tokens": {
1311
1287
  "outerBorderColor": "{palette.color.greenDarkFern}"
@@ -1317,8 +1293,8 @@
1317
1293
  },
1318
1294
  "tokens": {
1319
1295
  "blockFontSize": "{palette.fontSize.size20}",
1320
- "iconSize": "{palette.fontSize.size24}",
1321
- "blockLineHeight": "{palette.lineHeight.ratio8to5}"
1296
+ "blockLineHeight": "{palette.lineHeight.ratio8to5}",
1297
+ "iconSize": "{palette.size.size24}"
1322
1298
  }
1323
1299
  },
1324
1300
  {
@@ -1327,8 +1303,8 @@
1327
1303
  },
1328
1304
  "tokens": {
1329
1305
  "blockFontSize": "{palette.fontSize.size14}",
1330
- "iconSize": "{palette.fontSize.size20}",
1331
- "blockLineHeight": "{palette.lineHeight.ratio10to7}"
1306
+ "blockLineHeight": "{palette.lineHeight.ratio10to7}",
1307
+ "iconSize": "{palette.size.size20}"
1332
1308
  }
1333
1309
  },
1334
1310
  {
@@ -1336,11 +1312,11 @@
1336
1312
  "size": "micro"
1337
1313
  },
1338
1314
  "tokens": {
1315
+ "blockFontName": "{palette.fontName.HelveticaNow}",
1339
1316
  "blockFontSize": "{palette.fontSize.size12}",
1340
1317
  "blockFontWeight": "{palette.fontWeight.weight500}",
1341
- "blockFontName": "{palette.fontName.HelveticaNow}",
1342
- "iconSize": "{palette.fontSize.size16}",
1343
- "blockLineHeight": "{palette.lineHeight.ratio4to3}"
1318
+ "blockLineHeight": "{palette.lineHeight.ratio4to3}",
1319
+ "iconSize": "{palette.size.size16}"
1344
1320
  }
1345
1321
  },
1346
1322
  {
@@ -1389,8 +1365,8 @@
1389
1365
  },
1390
1366
  {
1391
1367
  "if": {
1392
- "inverse": true,
1393
- "hover": true
1368
+ "hover": true,
1369
+ "inverse": true
1394
1370
  },
1395
1371
  "tokens": {
1396
1372
  "color": "{palette.color.greyAthens}"
@@ -1398,8 +1374,8 @@
1398
1374
  },
1399
1375
  {
1400
1376
  "if": {
1401
- "inverse": true,
1402
- "focus": true
1377
+ "focus": true,
1378
+ "inverse": true
1403
1379
  },
1404
1380
  "tokens": {
1405
1381
  "outerBorderColor": "{palette.color.white}",
@@ -1417,9 +1393,9 @@
1417
1393
  },
1418
1394
  {
1419
1395
  "if": {
1396
+ "focus": true,
1420
1397
  "inverse": true,
1421
- "pressed": true,
1422
- "focus": true
1398
+ "pressed": true
1423
1399
  },
1424
1400
  "tokens": {
1425
1401
  "color": "{palette.color.greyMystic}",
@@ -1436,8 +1412,8 @@
1436
1412
  },
1437
1413
  {
1438
1414
  "if": {
1439
- "light": true,
1440
- "focus": true
1415
+ "focus": true,
1416
+ "light": true
1441
1417
  },
1442
1418
  "tokens": {
1443
1419
  "color": "{palette.color.greyShuttle}",
@@ -1446,47 +1422,49 @@
1446
1422
  },
1447
1423
  {
1448
1424
  "if": {
1449
- "light": true,
1450
- "hover": true
1425
+ "hover": true,
1426
+ "light": true
1451
1427
  },
1452
1428
  "tokens": {
1453
1429
  "color": "{palette.color.greyCharcoal}",
1454
1430
  "textLine": "{system.textLine.none}"
1455
1431
  }
1456
1432
  }
1457
- ]
1433
+ ],
1434
+ "tokens": {
1435
+ "alignSelf": "{system.flexAlign.flexStart}",
1436
+ "blockFontName": "{palette.fontName.HelveticaNow}",
1437
+ "blockFontSize": "{palette.fontSize.size16}",
1438
+ "blockFontWeight": "{palette.fontWeight.weight400}",
1439
+ "blockLineHeight": "{palette.lineHeight.ratio3to2}",
1440
+ "borderRadius": "{palette.radius.radius4}",
1441
+ "color": "{palette.color.greenAccessible}",
1442
+ "icon": "{system.icon.none}",
1443
+ "iconSize": "{palette.size.size24}",
1444
+ "iconSpace": "{system.integer.1}",
1445
+ "iconTranslateX": "{system.size.zero}",
1446
+ "iconTranslateY": "{system.size.zero}",
1447
+ "outerBorderColor": "{palette.color.transparent}",
1448
+ "outerBorderGap": "{palette.size.size2}",
1449
+ "outerBorderOutline": "{system.borderStyle.none}",
1450
+ "outerBorderWidth": "{palette.border.border2}",
1451
+ "textLine": "{system.textLine.underline}",
1452
+ "textLineStyle": "{system.textLineStyle.solid}"
1453
+ }
1458
1454
  },
1459
1455
  "List": {
1460
1456
  "appearances": {
1461
- "size": {
1462
- "description": "Indicates list item text size.",
1463
- "values": ["large", "small"],
1464
- "type": "variant"
1465
- },
1466
1457
  "compact": {
1467
1458
  "description": "When true it will reduce the line height of the list item.",
1468
- "values": [true],
1469
- "type": "variant"
1459
+ "type": "variant",
1460
+ "values": [true]
1461
+ },
1462
+ "size": {
1463
+ "description": "Indicates list item text size.",
1464
+ "type": "variant",
1465
+ "values": ["large", "small"]
1470
1466
  }
1471
1467
  },
1472
- "tokens": {
1473
- "itemFontWeight": "{palette.fontWeight.weight400}",
1474
- "itemFontSize": "{palette.fontSize.size16}",
1475
- "itemLineHeight": "{palette.lineHeight.ratio3to2}",
1476
- "itemFontName": "{palette.fontName.HelveticaNow}",
1477
- "interItemMargin": "{palette.size.size8}",
1478
- "interItemMarginWithDivider": "{palette.size.size16}",
1479
- "dividerColor": "{palette.color.greyCloud}",
1480
- "dividerSize": "{palette.border.border1}",
1481
- "itemBulletContainerWidth": "{palette.size.size16}",
1482
- "itemBulletContainerAlign": "{system.textAlign.center}",
1483
- "itemBulletWidth": "{palette.size.size4}",
1484
- "itemBulletHeight": "{palette.size.size4}",
1485
- "itemBulletColor": "{palette.color.purpleTelus}",
1486
- "itemIconSize": "{palette.size.size16}",
1487
- "itemIconColor": "{palette.color.purpleTelus}",
1488
- "listGutter": "{palette.size.size12}"
1489
- },
1490
1468
  "rules": [
1491
1469
  {
1492
1470
  "if": {
@@ -1534,33 +1512,31 @@
1534
1512
  "itemLineHeight": "{palette.lineHeight.ratio6to5}"
1535
1513
  }
1536
1514
  }
1537
- ]
1515
+ ],
1516
+ "tokens": {
1517
+ "dividerColor": "{palette.color.greyCloud}",
1518
+ "dividerSize": "{palette.border.border1}",
1519
+ "interItemMargin": "{palette.size.size8}",
1520
+ "interItemMarginWithDivider": "{palette.size.size16}",
1521
+ "itemBulletColor": "{palette.color.purpleTelus}",
1522
+ "itemBulletContainerAlign": "{system.textAlign.center}",
1523
+ "itemBulletContainerWidth": "{palette.size.size16}",
1524
+ "itemBulletHeight": "{palette.size.size4}",
1525
+ "itemBulletWidth": "{palette.size.size4}",
1526
+ "itemFontName": "{palette.fontName.HelveticaNow}",
1527
+ "itemFontSize": "{palette.fontSize.size16}",
1528
+ "itemFontWeight": "{palette.fontWeight.weight400}",
1529
+ "itemIconColor": "{palette.color.purpleTelus}",
1530
+ "itemIconSize": "{palette.size.size16}",
1531
+ "itemLineHeight": "{palette.lineHeight.ratio3to2}",
1532
+ "listGutter": "{palette.size.size12}"
1533
+ }
1538
1534
  },
1539
1535
  "Modal": {
1540
1536
  "appearances": {
1541
1537
  "maxWidth": "{appearances.Modal.maxWidth}",
1542
1538
  "viewport": "{appearances.system.viewport}"
1543
1539
  },
1544
- "tokens": {
1545
- "backdropColor": "{palette.color.bgModal}",
1546
- "backdropOpacity": "{system.opacity.opaque}",
1547
- "height": "{system.size.none}",
1548
- "maxWidth": "{system.size.full}",
1549
- "containerPaddingLeft": "{system.size.zero}",
1550
- "containerPaddingRight": "{system.size.zero}",
1551
- "containerPaddingTop": "{system.size.zero}",
1552
- "containerPaddingBottom": "{system.size.zero}",
1553
- "backgroundColor": "{palette.color.white}",
1554
- "borderRadius": "{palette.radius.radius4}",
1555
- "shadow": "{palette.shadow.elevation1}",
1556
- "paddingLeft": "{palette.size.size24}",
1557
- "paddingRight": "{palette.size.size24}",
1558
- "paddingTop": "{palette.size.size24}",
1559
- "paddingBottom": "{palette.size.size24}",
1560
- "closeIcon": "{palette.icon.Close}",
1561
- "closeIconSize": "{palette.size.size24}",
1562
- "closeIconColor": "{palette.color.greyCharcoal}"
1563
- },
1564
1540
  "rules": [
1565
1541
  {
1566
1542
  "if": {
@@ -1575,54 +1551,48 @@
1575
1551
  "viewport": ["md", "lg", "xl"]
1576
1552
  },
1577
1553
  "tokens": {
1578
- "maxWidth": "{system.integer.576}",
1554
+ "containerPaddingBottom": "{palette.size.size32}",
1579
1555
  "containerPaddingTop": "{palette.size.size32}",
1580
- "containerPaddingBottom": "{palette.size.size32}"
1556
+ "maxWidth": "{system.size.viewportSm}"
1581
1557
  }
1582
1558
  },
1583
1559
  {
1584
1560
  "if": {
1585
- "viewport": ["md", "lg", "xl"],
1586
- "maxWidth": true
1561
+ "maxWidth": true,
1562
+ "viewport": ["md", "lg", "xl"]
1587
1563
  },
1588
1564
  "tokens": {
1589
- "maxWidth": "{system.size.twoThirds}",
1590
1565
  "containerPaddingLeft": "{palette.size.size16}",
1591
- "containerPaddingRight": "{palette.size.size16}"
1566
+ "containerPaddingRight": "{palette.size.size16}",
1567
+ "maxWidth": "{system.size.twoThirds}"
1592
1568
  }
1593
1569
  }
1594
- ]
1570
+ ],
1571
+ "tokens": {
1572
+ "backdropColor": "{palette.color.bgModal}",
1573
+ "backdropOpacity": "{system.opacity.opaque}",
1574
+ "backgroundColor": "{palette.color.white}",
1575
+ "borderRadius": "{palette.radius.radius4}",
1576
+ "closeIcon": "{palette.icon.Close}",
1577
+ "closeIconColor": "{palette.color.greyCharcoal}",
1578
+ "closeIconSize": "{palette.size.size24}",
1579
+ "containerPaddingBottom": "{system.size.zero}",
1580
+ "containerPaddingLeft": "{system.size.zero}",
1581
+ "containerPaddingRight": "{system.size.zero}",
1582
+ "containerPaddingTop": "{system.size.zero}",
1583
+ "height": "{system.size.none}",
1584
+ "maxWidth": "{system.size.full}",
1585
+ "paddingBottom": "{palette.size.size24}",
1586
+ "paddingLeft": "{palette.size.size24}",
1587
+ "paddingRight": "{palette.size.size24}",
1588
+ "paddingTop": "{palette.size.size24}",
1589
+ "shadow": "{palette.shadow.elevation1}"
1590
+ }
1595
1591
  },
1596
1592
  "Notification": {
1597
1593
  "appearances": {
1598
- "system": "{appearances.Notification.system}",
1599
- "style": "{appearances.Notification.style}"
1600
- },
1601
- "tokens": {
1602
- "backgroundColor": "{palette.color.greyAthens}",
1603
- "borderBottomWidth": "{palette.border.border1}",
1604
- "borderTopWidth": "{palette.border.border1}",
1605
- "borderLeftWidth": "{palette.border.border1}",
1606
- "borderRightWidth": "{palette.border.border1}",
1607
- "borderColor": "{palette.color.greyShuttle}",
1608
- "borderRadius": "{palette.radius.radius6}",
1609
- "paddingTop": "{palette.size.size12}",
1610
- "paddingBottom": "{palette.size.size12}",
1611
- "paddingLeft": "{palette.size.size12}",
1612
- "paddingRight": "{palette.size.size12}",
1613
- "color": "{palette.color.greyCharcoal}",
1614
- "fontSize": "{palette.fontSize.size16}",
1615
- "lineHeight": "{palette.lineHeight.ratio3to2}",
1616
- "fontName": "{palette.fontName.HelveticaNow}",
1617
- "fontWeight": "{palette.fontWeight.weight400}",
1618
- "icon": "{system.icon.none}",
1619
- "iconColor": "{system.color.none}",
1620
- "iconSize": "{palette.size.size24}",
1621
- "iconGap": "{palette.size.size16}",
1622
- "dismissIcon": "{palette.icon.Close}",
1623
- "dismissIconColor": "{palette.color.greyCharcoal}",
1624
- "dismissIconSize": "{palette.size.size24}",
1625
- "dismissButtonGap": "{palette.size.size16}"
1594
+ "style": "{appearances.Notification.style}",
1595
+ "system": "{appearances.Notification.system}"
1626
1596
  },
1627
1597
  "rules": [
1628
1598
  {
@@ -1630,15 +1600,15 @@
1630
1600
  "system": true
1631
1601
  },
1632
1602
  "tokens": {
1633
- "borderTopWidth": "{system.border.zero}",
1634
1603
  "borderLeftWidth": "{system.border.zero}",
1635
- "borderRightWidth": "{system.border.zero}",
1636
1604
  "borderRadius": "{system.radius.zero}",
1637
- "paddingTop": "{palette.size.size16}",
1605
+ "borderRightWidth": "{system.border.zero}",
1606
+ "borderTopWidth": "{system.border.zero}",
1607
+ "iconGap": "{palette.size.size12}",
1638
1608
  "paddingBottom": "{palette.size.size16}",
1639
1609
  "paddingLeft": "{palette.size.size16}",
1640
1610
  "paddingRight": "{palette.size.size16}",
1641
- "iconGap": "{palette.size.size12}"
1611
+ "paddingTop": "{palette.size.size16}"
1642
1612
  }
1643
1613
  },
1644
1614
  {
@@ -1659,9 +1629,9 @@
1659
1629
  "tokens": {
1660
1630
  "backgroundColor": "{palette.color.amberLight}",
1661
1631
  "borderColor": "{palette.color.amberDark}",
1632
+ "dismissIcon": "{system.icon.none}",
1662
1633
  "icon": "{palette.icon.StatusWarning}",
1663
- "iconColor": "{palette.color.amberDark}",
1664
- "dismissIcon": "{system.icon.none}"
1634
+ "iconColor": "{palette.color.amberDark}"
1665
1635
  }
1666
1636
  },
1667
1637
  {
@@ -1671,26 +1641,43 @@
1671
1641
  "tokens": {
1672
1642
  "backgroundColor": "{palette.color.redLight}",
1673
1643
  "borderColor": "{palette.color.red}",
1644
+ "dismissIcon": "{system.icon.none}",
1674
1645
  "icon": "{palette.icon.StatusError}",
1675
- "iconColor": "{palette.color.red}",
1676
- "dismissIcon": "{system.icon.none}"
1646
+ "iconColor": "{palette.color.red}"
1677
1647
  }
1678
1648
  }
1679
- ]
1649
+ ],
1650
+ "tokens": {
1651
+ "backgroundColor": "{palette.color.greyAthens}",
1652
+ "borderBottomWidth": "{palette.border.border1}",
1653
+ "borderColor": "{palette.color.greyShuttle}",
1654
+ "borderLeftWidth": "{palette.border.border1}",
1655
+ "borderRadius": "{palette.radius.radius6}",
1656
+ "borderRightWidth": "{palette.border.border1}",
1657
+ "borderTopWidth": "{palette.border.border1}",
1658
+ "color": "{palette.color.greyCharcoal}",
1659
+ "dismissButtonGap": "{palette.size.size16}",
1660
+ "dismissIcon": "{palette.icon.Close}",
1661
+ "dismissIconColor": "{palette.color.greyCharcoal}",
1662
+ "dismissIconSize": "{palette.size.size24}",
1663
+ "fontName": "{palette.fontName.HelveticaNow}",
1664
+ "fontSize": "{palette.fontSize.size16}",
1665
+ "fontWeight": "{palette.fontWeight.weight400}",
1666
+ "icon": "{system.icon.none}",
1667
+ "iconColor": "{system.color.none}",
1668
+ "iconGap": "{palette.size.size16}",
1669
+ "iconSize": "{palette.size.size24}",
1670
+ "lineHeight": "{palette.lineHeight.ratio3to2}",
1671
+ "paddingBottom": "{palette.size.size12}",
1672
+ "paddingLeft": "{palette.size.size12}",
1673
+ "paddingRight": "{palette.size.size12}",
1674
+ "paddingTop": "{palette.size.size12}"
1675
+ }
1680
1676
  },
1681
1677
  "Pagination": {
1682
1678
  "appearances": {
1683
1679
  "viewport": "{appearances.system.viewport}"
1684
1680
  },
1685
- "tokens": {
1686
- "gap": "{system.integer.2}",
1687
- "truncateAbove": "{system.integer.4}",
1688
- "color": "{palette.color.greyShuttle}",
1689
- "fontName": "{palette.fontName.HelveticaNow}",
1690
- "fontWeight": "{palette.fontWeight.weight400}",
1691
- "fontSize": "{palette.fontSize.size16}",
1692
- "lineHeight": "{palette.lineHeight.ratio3to2}"
1693
- },
1694
1681
  "rules": [
1695
1682
  {
1696
1683
  "if": {
@@ -1700,7 +1687,16 @@
1700
1687
  "truncateAbove": "{system.integer.6}"
1701
1688
  }
1702
1689
  }
1703
- ]
1690
+ ],
1691
+ "tokens": {
1692
+ "color": "{palette.color.greyShuttle}",
1693
+ "fontName": "{palette.fontName.HelveticaNow}",
1694
+ "fontSize": "{palette.fontSize.size16}",
1695
+ "fontWeight": "{palette.fontWeight.weight400}",
1696
+ "gap": "{palette.size.size2}",
1697
+ "lineHeight": "{palette.lineHeight.ratio3to2}",
1698
+ "truncateAbove": "{system.integer.4}"
1699
+ }
1704
1700
  },
1705
1701
  "PaginationPageButton": {
1706
1702
  "appearances": {
@@ -1709,27 +1705,6 @@
1709
1705
  "pressed": "{appearances.PaginationPageButton.pressed}",
1710
1706
  "selected": "{appearances.PaginationPageButton.selected}"
1711
1707
  },
1712
- "tokens": {
1713
- "borderColor": "{palette.color.transparent}",
1714
- "borderWidth": "{palette.border.border1}",
1715
- "borderRadius": "{palette.radius.pill32}",
1716
- "backgroundColor": "{palette.color.transparent}",
1717
- "paddingLeft": "{palette.size.size8}",
1718
- "paddingRight": "{palette.size.size8}",
1719
- "paddingTop": "{palette.size.size4}",
1720
- "paddingBottom": "{palette.size.size4}",
1721
- "width": "{palette.size.size32}",
1722
- "outerBorderColor": "{palette.color.transparent}",
1723
- "outerBorderWidth": "{palette.border.border4}",
1724
- "outerBorderGap": "{palette.border.border4}",
1725
- "color": "{palette.color.greyShuttle}",
1726
- "fontName": "{palette.fontName.HelveticaNow}",
1727
- "fontWeight": "{palette.fontWeight.weight400}",
1728
- "fontSize": "{palette.fontSize.size16}",
1729
- "lineHeight": "{palette.lineHeight.ratio3to2}",
1730
- "textLine": "{system.textLine.underline}",
1731
- "textAlign": "{system.flexJustifyContent.center}"
1732
- },
1733
1708
  "rules": [
1734
1709
  {
1735
1710
  "if": {
@@ -1768,48 +1743,47 @@
1768
1743
  "color": "{palette.color.white}"
1769
1744
  }
1770
1745
  }
1771
- ]
1772
- },
1773
- "PaginationSideButton": {
1774
- "appearances": {
1775
- "viewport": "{appearances.system.viewport}",
1776
- "focus": "{appearances.PaginationSideButton.focus}",
1777
- "hover": "{appearances.PaginationSideButton.hover}",
1778
- "pressed": "{appearances.PaginationSideButton.pressed}",
1779
- "selected": "{appearances.PaginationSideButton.selected}",
1780
- "direction": "{appearances.PaginationSideButton.direction}"
1781
- },
1746
+ ],
1782
1747
  "tokens": {
1748
+ "backgroundColor": "{palette.color.transparent}",
1783
1749
  "borderColor": "{palette.color.transparent}",
1750
+ "borderRadius": "{palette.radius.pill32}",
1784
1751
  "borderWidth": "{palette.border.border1}",
1785
- "borderRadius": "{palette.radius.radius4}",
1786
- "backgroundColor": "{palette.color.transparent}",
1787
- "paddingLeft": "{palette.size.size8}",
1788
- "paddingRight": "{palette.size.size8}",
1789
- "paddingTop": "{palette.size.size12}",
1790
- "paddingBottom": "{palette.size.size12}",
1791
- "outerBorderColor": "{palette.color.transparent}",
1792
1752
  "color": "{palette.color.greyShuttle}",
1793
1753
  "fontName": "{palette.fontName.HelveticaNow}",
1794
- "fontWeight": "{palette.fontWeight.weight400}",
1795
1754
  "fontSize": "{palette.fontSize.size16}",
1755
+ "fontWeight": "{palette.fontWeight.weight400}",
1796
1756
  "lineHeight": "{palette.lineHeight.ratio3to2}",
1757
+ "outerBorderColor": "{palette.color.transparent}",
1758
+ "outerBorderGap": "{palette.size.size4}",
1759
+ "outerBorderWidth": "{palette.border.border4}",
1760
+ "paddingBottom": "{palette.size.size4}",
1761
+ "paddingLeft": "{palette.size.size8}",
1762
+ "paddingRight": "{palette.size.size8}",
1763
+ "paddingTop": "{palette.size.size4}",
1764
+ "textAlign": "{system.flexJustifyContent.center}",
1797
1765
  "textLine": "{system.textLine.underline}",
1798
- "icon": "{system.icon.none}",
1799
- "iconSize": "{palette.fontSize.size24}",
1800
- "iconDisplace": "{palette.size.size0}",
1801
- "width": "{system.size.none}",
1802
- "textAlign": "{system.flexJustifyContent.center}"
1803
- },
1804
- "rules": [
1805
- {
1806
- "if": {
1807
- "viewport": ["xs", "sm"]
1766
+ "width": "{palette.size.size32}"
1767
+ }
1768
+ },
1769
+ "PaginationSideButton": {
1770
+ "appearances": {
1771
+ "direction": "{appearances.PaginationSideButton.direction}",
1772
+ "focus": "{appearances.PaginationSideButton.focus}",
1773
+ "hover": "{appearances.PaginationSideButton.hover}",
1774
+ "pressed": "{appearances.PaginationSideButton.pressed}",
1775
+ "selected": "{appearances.PaginationSideButton.selected}",
1776
+ "viewport": "{appearances.system.viewport}"
1777
+ },
1778
+ "rules": [
1779
+ {
1780
+ "if": {
1781
+ "viewport": ["xs", "sm"]
1808
1782
  },
1809
1783
  "tokens": {
1810
1784
  "borderRadius": "{palette.radius.pill32}",
1811
- "paddingTop": "{palette.size.size4}",
1812
1785
  "paddingBottom": "{palette.size.size4}",
1786
+ "paddingTop": "{palette.size.size4}",
1813
1787
  "width": "{palette.size.size32}"
1814
1788
  }
1815
1789
  },
@@ -1819,8 +1793,8 @@
1819
1793
  },
1820
1794
  "tokens": {
1821
1795
  "borderColor": "{palette.color.greyShuttle}",
1822
- "textLine": "{system.textLine.none}",
1823
- "iconDisplace": "{palette.size.size4}"
1796
+ "iconDisplace": "{palette.size.size4}",
1797
+ "textLine": "{system.textLine.none}"
1824
1798
  }
1825
1799
  },
1826
1800
  {
@@ -1867,22 +1841,37 @@
1867
1841
  "icon": "{palette.icon.ArrowRight}"
1868
1842
  }
1869
1843
  }
1870
- ]
1844
+ ],
1845
+ "tokens": {
1846
+ "backgroundColor": "{palette.color.transparent}",
1847
+ "borderColor": "{palette.color.transparent}",
1848
+ "borderRadius": "{palette.radius.radius4}",
1849
+ "borderWidth": "{palette.border.border1}",
1850
+ "color": "{palette.color.greyShuttle}",
1851
+ "fontName": "{palette.fontName.HelveticaNow}",
1852
+ "fontSize": "{palette.fontSize.size16}",
1853
+ "fontWeight": "{palette.fontWeight.weight400}",
1854
+ "icon": "{system.icon.none}",
1855
+ "iconDisplace": "{palette.size.size0}",
1856
+ "iconSize": "{palette.size.size24}",
1857
+ "lineHeight": "{palette.lineHeight.ratio3to2}",
1858
+ "outerBorderColor": "{palette.color.transparent}",
1859
+ "paddingBottom": "{palette.size.size12}",
1860
+ "paddingLeft": "{palette.size.size8}",
1861
+ "paddingRight": "{palette.size.size8}",
1862
+ "paddingTop": "{palette.size.size12}",
1863
+ "textAlign": "{system.flexJustifyContent.center}",
1864
+ "textLine": "{system.textLine.underline}",
1865
+ "width": "{system.size.none}"
1866
+ }
1871
1867
  },
1872
1868
  "Progress": {
1873
1869
  "appearances": {
1874
1870
  "size": {
1875
- "values": ["mini"],
1876
- "type": "variant"
1871
+ "type": "variant",
1872
+ "values": ["mini"]
1877
1873
  }
1878
1874
  },
1879
- "tokens": {
1880
- "backgroundColor": "{palette.color.greyAthens}",
1881
- "borderWidth": "{palette.border.border1}",
1882
- "borderColor": "{palette.color.greyCloud}",
1883
- "borderRadius": "{palette.radius.radius12}",
1884
- "height": "{palette.size.size16}"
1885
- },
1886
1875
  "rules": [
1887
1876
  {
1888
1877
  "if": {
@@ -1892,23 +1881,23 @@
1892
1881
  "height": "{palette.size.size8}"
1893
1882
  }
1894
1883
  }
1895
- ]
1884
+ ],
1885
+ "tokens": {
1886
+ "backgroundColor": "{palette.color.greyAthens}",
1887
+ "borderColor": "{palette.color.greyCloud}",
1888
+ "borderRadius": "{palette.radius.radius12}",
1889
+ "borderWidth": "{palette.border.border1}",
1890
+ "height": "{palette.size.size16}"
1891
+ }
1896
1892
  },
1897
1893
  "ProgressBar": {
1898
1894
  "appearances": {
1899
1895
  "inactive": "{appearances.ProgressBar.inactive}",
1900
1896
  "negative": {
1901
- "values": [true],
1902
- "type": "variant"
1897
+ "type": "variant",
1898
+ "values": [true]
1903
1899
  }
1904
1900
  },
1905
- "tokens": {
1906
- "backgroundColor": "{palette.color.greenAccessible}",
1907
- "borderRadius": "{palette.radius.radius12}",
1908
- "gradient": "{palette.gradient.green}",
1909
- "outlineWidth": "{palette.border.border1}",
1910
- "outlineColor": "{palette.color.greenAccessible}"
1911
- },
1912
1901
  "rules": [
1913
1902
  {
1914
1903
  "if": {
@@ -1930,7 +1919,14 @@
1930
1919
  "outlineColor": "{palette.color.redDark}"
1931
1920
  }
1932
1921
  }
1933
- ]
1922
+ ],
1923
+ "tokens": {
1924
+ "backgroundColor": "{palette.color.greenAccessible}",
1925
+ "borderRadius": "{palette.radius.radius12}",
1926
+ "gradient": "{palette.gradient.green}",
1927
+ "outlineColor": "{palette.color.greenAccessible}",
1928
+ "outlineWidth": "{palette.border.border1}"
1929
+ }
1934
1930
  },
1935
1931
  "Radio": {
1936
1932
  "appearances": {
@@ -1940,36 +1936,6 @@
1940
1936
  "hover": "{appearances.Radio.hover}",
1941
1937
  "inactive": "{appearances.Radio.inactive}"
1942
1938
  },
1943
- "tokens": {
1944
- "checkedBackgroundColor": "{palette.color.purpleDeluge}",
1945
- "checkedSize": "{palette.size.size12}",
1946
- "containerBackgroundColor": "{palette.color.transparent}",
1947
- "containerBorderRadius": "{palette.radius.none}",
1948
- "containerOpacity": "{system.opacity.opaque}",
1949
- "containerPaddingBottom": "{palette.size.size0}",
1950
- "containerPaddingLeft": "{palette.size.size0}",
1951
- "containerPaddingRight": "{palette.size.size0}",
1952
- "containerPaddingTop": "{palette.size.size0}",
1953
- "containerShadow": "{system.shadow.none}",
1954
- "descriptionFontSize": "{palette.fontSize.size14}",
1955
- "descriptionLineHeight": "{palette.lineHeight.ratio10to7}",
1956
- "descriptionMarginLeft": "{system.size.none}",
1957
- "inputBackgroundColor": "{palette.color.white}",
1958
- "inputBorderColor": "{palette.color.greyShuttle}",
1959
- "inputBorderWidth": "{palette.border.border1}",
1960
- "inputOutlineColor": "{palette.color.transparent}",
1961
- "inputOutlineWidth": "{palette.border.none}",
1962
- "inputSize": "{palette.size.size20}",
1963
- "outerBorderWidth": "{system.border.zero}",
1964
- "outerBorderColor": "{system.color.transparent}",
1965
- "outerBorderGap": "{system.size.zero}",
1966
- "labelColor": "{palette.color.greyCharcoal}",
1967
- "labelFontName": "{palette.fontName.HelveticaNow}",
1968
- "labelFontSize": "{palette.fontSize.size16}",
1969
- "labelFontWeight": "{palette.fontWeight.weight400}",
1970
- "labelLineHeight": "{palette.lineHeight.ratio3to2}",
1971
- "labelMarginLeft": "{palette.size.size10}"
1972
- },
1973
1939
  "rules": [
1974
1940
  {
1975
1941
  "if": {
@@ -1984,8 +1950,8 @@
1984
1950
  "hover": true
1985
1951
  },
1986
1952
  "tokens": {
1987
- "outerBorderWidth": "{palette.border.border2}",
1988
- "outerBorderColor": "{palette.color.greyMystic}"
1953
+ "outerBorderColor": "{palette.color.greyMystic}",
1954
+ "outerBorderWidth": "{palette.border.border2}"
1989
1955
  }
1990
1956
  },
1991
1957
  {
@@ -2002,71 +1968,65 @@
2002
1968
  "inactive": true
2003
1969
  },
2004
1970
  "tokens": {
2005
- "inputBorderColor": "{palette.color.transparent}",
2006
1971
  "inputBackgroundColor": "{palette.color.greyMystic}",
1972
+ "inputBorderColor": "{palette.color.transparent}",
2007
1973
  "labelColor": "{palette.color.greyShuttle}"
2008
1974
  }
2009
1975
  }
2010
- ]
1976
+ ],
1977
+ "tokens": {
1978
+ "checkedBackgroundColor": "{palette.color.purpleDeluge}",
1979
+ "checkedSize": "{palette.size.size12}",
1980
+ "containerBackgroundColor": "{palette.color.transparent}",
1981
+ "containerBorderRadius": "{palette.radius.none}",
1982
+ "containerOpacity": "{system.opacity.opaque}",
1983
+ "containerPaddingBottom": "{palette.size.size0}",
1984
+ "containerPaddingLeft": "{palette.size.size0}",
1985
+ "containerPaddingRight": "{palette.size.size0}",
1986
+ "containerPaddingTop": "{palette.size.size0}",
1987
+ "containerShadow": "{system.shadow.none}",
1988
+ "descriptionFontSize": "{palette.fontSize.size14}",
1989
+ "descriptionLineHeight": "{palette.lineHeight.ratio10to7}",
1990
+ "descriptionMarginLeft": "{system.size.none}",
1991
+ "inputBackgroundColor": "{palette.color.white}",
1992
+ "inputBorderColor": "{palette.color.greyShuttle}",
1993
+ "inputBorderWidth": "{palette.border.border1}",
1994
+ "inputOutlineColor": "{palette.color.transparent}",
1995
+ "inputOutlineWidth": "{palette.border.none}",
1996
+ "inputSize": "{palette.size.size20}",
1997
+ "labelColor": "{palette.color.greyCharcoal}",
1998
+ "labelFontName": "{palette.fontName.HelveticaNow}",
1999
+ "labelFontSize": "{palette.fontSize.size16}",
2000
+ "labelFontWeight": "{palette.fontWeight.weight400}",
2001
+ "labelLineHeight": "{palette.lineHeight.ratio3to2}",
2002
+ "labelMarginLeft": "{palette.size.size10}",
2003
+ "outerBorderColor": "{system.color.transparent}",
2004
+ "outerBorderGap": "{system.size.zero}",
2005
+ "outerBorderWidth": "{system.border.zero}"
2006
+ }
2011
2007
  },
2012
2008
  "RadioCard": {
2013
2009
  "appearances": {
2014
- "pressed": "{appearances.RadioCard.pressed}",
2015
- "hover": "{appearances.RadioCard.hover}",
2016
- "focus": "{appearances.RadioCard.focus}",
2017
2010
  "checked": "{appearances.RadioCard.checked}",
2018
- "inactive": "{appearances.RadioCard.inactive}",
2019
2011
  "error": "{appearances.RadioCard.error}",
2012
+ "focus": "{appearances.RadioCard.focus}",
2013
+ "hover": "{appearances.RadioCard.hover}",
2014
+ "inactive": "{appearances.RadioCard.inactive}",
2015
+ "pressed": "{appearances.RadioCard.pressed}",
2020
2016
  "viewport": "{appearances.system.viewport}"
2021
2017
  },
2022
- "tokens": {
2023
- "outerBorderColor": "{system.color.transparent}",
2024
- "outerBorderWidth": "{system.border.zero}",
2025
- "outerBorderGap": "{system.size.zero}",
2026
- "flex": "{system.integer.1}",
2027
- "backgroundColor": "{palette.color.white}",
2028
- "borderColor": "{palette.color.greyCloud}",
2029
- "borderRadius": "{palette.radius.radius6}",
2030
- "borderWidth": "{palette.border.border1}",
2031
- "paddingBottom": "{palette.size.size16}",
2032
- "paddingLeft": "{palette.size.size10}",
2033
- "paddingRight": "{palette.size.size16}",
2034
- "paddingTop": "{palette.size.size16}",
2035
- "minWidth": "{palette.size.size264}",
2036
- "shadow": "{system.shadow.none}",
2037
- "radioCheckedBackgroundColor": "{palette.color.purpleDeluge}",
2038
- "radioCheckedSize": "{palette.size.size12}",
2039
- "radioInputBackgroundColor": "{palette.color.white}",
2040
- "radioInputBorderColor": "{palette.color.greyShuttle}",
2041
- "radioInputBorderWidth": "{palette.border.border1}",
2042
- "radioInputOutlineColor": "{palette.color.transparent}",
2043
- "radioInputOutlineWidth": "{palette.border.none}",
2044
- "radioInputSize": "{palette.size.size20}",
2045
- "radioOuterBorderColor": "{system.color.transparent}",
2046
- "radioOuterBorderWidth": "{system.border.zero}",
2047
- "radioOuterBorderGap": "{system.size.zero}",
2048
- "fontSize": "{palette.fontSize.size20}",
2049
- "lineHeight": "{palette.lineHeight.ratio7to5}",
2050
- "color": "{palette.color.greyThunder}",
2051
- "letterSpacing": "{system.letterSpacing.none}",
2052
- "textTransform": "{system.textTransform.none}",
2053
- "fontWeight": "{palette.fontWeight.weight500}",
2054
- "fontName": "{palette.fontName.HelveticaNow}",
2055
- "radioSpace": "{system.integer.2}",
2056
- "contentSpace": "{system.integer.2}"
2057
- },
2058
2018
  "rules": [
2059
2019
  {
2060
2020
  "if": {
2061
2021
  "viewport": ["lg", "xl"]
2062
2022
  },
2063
2023
  "tokens": {
2024
+ "fontSize": "{palette.fontSize.size24}",
2025
+ "lineHeight": "{palette.lineHeight.ratio4to3}",
2064
2026
  "paddingBottom": "{palette.size.size24}",
2065
2027
  "paddingLeft": "{palette.size.size16}",
2066
2028
  "paddingRight": "{palette.size.size24}",
2067
- "paddingTop": "{palette.size.size16}",
2068
- "fontSize": "{palette.fontSize.size24}",
2069
- "lineHeight": "{palette.lineHeight.ratio4to3}"
2029
+ "paddingTop": "{palette.size.size16}"
2070
2030
  }
2071
2031
  },
2072
2032
  {
@@ -2077,15 +2037,15 @@
2077
2037
  "borderColor": "{palette.color.greyShuttle}",
2078
2038
  "outerBorderColor": "{palette.color.greyMystic}",
2079
2039
  "outerBorderWidth": "{palette.border.border2}",
2080
- "radioOuterBorderWidth": "{palette.border.border2}",
2081
- "radioOuterBorderColor": "{palette.color.greyMystic}"
2040
+ "radioOuterBorderColor": "{palette.color.greyMystic}",
2041
+ "radioOuterBorderWidth": "{palette.border.border2}"
2082
2042
  }
2083
2043
  },
2084
2044
  {
2045
+ "description": "Pressed state matches hover state plus light grey background",
2085
2046
  "if": {
2086
2047
  "pressed": true
2087
2048
  },
2088
- "description": "Pressed state matches hover state plus light grey background",
2089
2049
  "tokens": {
2090
2050
  "backgroundColor": "{palette.color.greyAthens}",
2091
2051
  "borderColor": "{palette.color.greyShuttle}",
@@ -2099,8 +2059,8 @@
2099
2059
  },
2100
2060
  "tokens": {
2101
2061
  "outerBorderColor": "{palette.color.greyShuttle}",
2102
- "outerBorderWidth": "{palette.border.border2}",
2103
2062
  "outerBorderGap": "{palette.size.size2}",
2063
+ "outerBorderWidth": "{palette.border.border2}",
2104
2064
  "radioInputBorderColor": "{palette.color.purpleDeluge}",
2105
2065
  "radioInputBorderWidth": "{palette.border.border3}"
2106
2066
  }
@@ -2112,9 +2072,9 @@
2112
2072
  "tokens": {
2113
2073
  "backgroundColor": "{palette.color.greyAthens}",
2114
2074
  "borderColor": "{system.color.transparent}",
2115
- "radioInputBorderColor": "{palette.color.transparent}",
2075
+ "color": "{palette.color.greyShuttle}",
2116
2076
  "radioInputBackgroundColor": "{palette.color.greyMystic}",
2117
- "color": "{palette.color.greyShuttle}"
2077
+ "radioInputBorderColor": "{palette.color.transparent}"
2118
2078
  }
2119
2079
  },
2120
2080
  {
@@ -2123,76 +2083,89 @@
2123
2083
  },
2124
2084
  "tokens": {
2125
2085
  "borderColor": "{palette.color.red}",
2126
- "radioInputBorderColor": "{palette.color.red}",
2127
- "color": "{palette.color.red}"
2086
+ "color": "{palette.color.red}",
2087
+ "radioInputBorderColor": "{palette.color.red}"
2128
2088
  }
2129
2089
  }
2130
- ]
2090
+ ],
2091
+ "tokens": {
2092
+ "backgroundColor": "{palette.color.white}",
2093
+ "borderColor": "{palette.color.greyCloud}",
2094
+ "borderRadius": "{palette.radius.radius6}",
2095
+ "borderWidth": "{palette.border.border1}",
2096
+ "color": "{palette.color.greyThunder}",
2097
+ "contentSpace": "{system.integer.2}",
2098
+ "flex": "{system.integer.1}",
2099
+ "fontName": "{palette.fontName.HelveticaNow}",
2100
+ "fontSize": "{palette.fontSize.size20}",
2101
+ "fontWeight": "{palette.fontWeight.weight500}",
2102
+ "letterSpacing": "{system.letterSpacing.none}",
2103
+ "lineHeight": "{palette.lineHeight.ratio7to5}",
2104
+ "minWidth": "{palette.size.size264}",
2105
+ "outerBorderColor": "{system.color.transparent}",
2106
+ "outerBorderGap": "{system.size.zero}",
2107
+ "outerBorderWidth": "{system.border.zero}",
2108
+ "paddingBottom": "{palette.size.size16}",
2109
+ "paddingLeft": "{palette.size.size10}",
2110
+ "paddingRight": "{palette.size.size16}",
2111
+ "paddingTop": "{palette.size.size16}",
2112
+ "radioCheckedBackgroundColor": "{palette.color.purpleDeluge}",
2113
+ "radioCheckedSize": "{palette.size.size12}",
2114
+ "radioInputBackgroundColor": "{palette.color.white}",
2115
+ "radioInputBorderColor": "{palette.color.greyShuttle}",
2116
+ "radioInputBorderWidth": "{palette.border.border1}",
2117
+ "radioInputOutlineColor": "{palette.color.transparent}",
2118
+ "radioInputOutlineWidth": "{palette.border.none}",
2119
+ "radioInputSize": "{palette.size.size20}",
2120
+ "radioOuterBorderColor": "{system.color.transparent}",
2121
+ "radioOuterBorderGap": "{system.size.zero}",
2122
+ "radioOuterBorderWidth": "{system.border.zero}",
2123
+ "radioSpace": "{system.integer.2}",
2124
+ "shadow": "{system.shadow.none}",
2125
+ "textTransform": "{system.textTransform.none}"
2126
+ }
2131
2127
  },
2132
2128
  "RadioCardGroup": {
2133
2129
  "appearances": {
2134
- "viewport": "{appearances.system.viewport}",
2135
2130
  "fullWidth": {
2136
2131
  "description": "Makes cards always occupy the full width of the parent, regardless of viewport",
2137
- "values": [true],
2138
- "type": "variant"
2139
- }
2140
- },
2141
- "tokens": {
2142
- "direction": "{system.direction.column}",
2143
- "space": "{system.integer.3}",
2144
- "fieldSpace": "{system.integer.3}"
2132
+ "type": "variant",
2133
+ "values": [true]
2134
+ },
2135
+ "viewport": "{appearances.system.viewport}"
2145
2136
  },
2146
2137
  "rules": [
2147
2138
  {
2148
2139
  "if": {
2149
- "viewport": ["lg", "xl"],
2150
- "fullWidth": null
2140
+ "fullWidth": null,
2141
+ "viewport": ["lg", "xl"]
2151
2142
  },
2152
2143
  "tokens": {
2153
2144
  "direction": "{system.direction.row}",
2154
2145
  "space": "{system.integer.4}"
2155
2146
  }
2156
2147
  }
2157
- ]
2148
+ ],
2149
+ "tokens": {
2150
+ "direction": "{system.direction.column}",
2151
+ "fieldSpace": "{system.integer.3}",
2152
+ "space": "{system.integer.3}"
2153
+ }
2158
2154
  },
2159
2155
  "RadioGroup": {
2160
2156
  "appearances": {},
2157
+ "rules": [],
2161
2158
  "tokens": {
2162
- "space": "{system.integer.2}",
2163
- "fieldSpace": "{system.integer.2}"
2164
- },
2165
- "rules": []
2159
+ "fieldSpace": "{system.integer.2}",
2160
+ "space": "{system.integer.2}"
2161
+ }
2166
2162
  },
2167
2163
  "Search": {
2168
2164
  "appearances": {
2169
- "hover": "{appearances.Search.hover}",
2170
2165
  "focus": "{appearances.Search.focus}",
2166
+ "hover": "{appearances.Search.hover}",
2171
2167
  "inactive": "{appearances.Search.inactive}"
2172
2168
  },
2173
- "tokens": {
2174
- "backgroundColor": "{palette.color.white}",
2175
- "color": "{palette.color.greyCharcoal}",
2176
- "borderWidth": "{palette.border.border1}",
2177
- "borderColor": "{palette.color.greyShuttle}",
2178
- "borderRadius": "{palette.radius.pill32}",
2179
- "paddingTop": "{palette.size.size12}",
2180
- "paddingBottom": "{palette.size.size12}",
2181
- "paddingLeft": "{palette.size.size24}",
2182
- "paddingRight": "{palette.size.size8}",
2183
- "outerBackgroundColor": "{palette.color.transparent}",
2184
- "outerBorderWidth": "{palette.border.border2}",
2185
- "outerBorderColor": "{palette.color.transparent}",
2186
- "outerBorderRadius": "{palette.radius.pill32}",
2187
- "fontName": "{palette.fontName.HelveticaNow}",
2188
- "fontWeight": "{palette.fontWeight.weight400}",
2189
- "fontSize": "{palette.fontSize.size16}",
2190
- "lineHeight": "{palette.lineHeight.ratio3to2}",
2191
- "placeholderColor": "{palette.color.greyCharcoal}",
2192
- "buttonsGap": "{system.integer.1}",
2193
- "clearButtonIcon": "{palette.icon.Times}",
2194
- "submitButtonIcon": "{palette.icon.SearchBold}"
2195
- },
2196
2169
  "rules": [
2197
2170
  {
2198
2171
  "if": {
@@ -2200,8 +2173,8 @@
2200
2173
  "inactive": null
2201
2174
  },
2202
2175
  "tokens": {
2203
- "outerBorderColor": "{palette.color.greyMystic}",
2204
- "outerBackgroundColor": "{palette.color.greyMystic}"
2176
+ "outerBackgroundColor": "{palette.color.greyMystic}",
2177
+ "outerBorderColor": "{palette.color.greyMystic}"
2205
2178
  }
2206
2179
  },
2207
2180
  {
@@ -2222,34 +2195,43 @@
2222
2195
  "borderColor": "{palette.color.greyAthens}"
2223
2196
  }
2224
2197
  }
2225
- ]
2226
- },
2227
- "SearchButton": {
2228
- "appearances": {
2229
- "hover": "{appearances.SearchButton.hover}",
2230
- "focus": "{appearances.SearchButton.focus}",
2198
+ ],
2199
+ "tokens": {
2200
+ "backgroundColor": "{palette.color.white}",
2201
+ "borderColor": "{palette.color.greyShuttle}",
2202
+ "borderRadius": "{palette.radius.pill32}",
2203
+ "borderWidth": "{palette.border.border1}",
2204
+ "buttonsGap": "{palette.size.size1}",
2205
+ "clearButtonIcon": "{palette.icon.Times}",
2206
+ "color": "{palette.color.greyCharcoal}",
2207
+ "fontName": "{palette.fontName.HelveticaNow}",
2208
+ "fontSize": "{palette.fontSize.size16}",
2209
+ "fontWeight": "{palette.fontWeight.weight400}",
2210
+ "lineHeight": "{palette.lineHeight.ratio3to2}",
2211
+ "outerBackgroundColor": "{palette.color.transparent}",
2212
+ "outerBorderColor": "{palette.color.transparent}",
2213
+ "outerBorderRadius": "{palette.radius.pill32}",
2214
+ "outerBorderWidth": "{palette.border.border2}",
2215
+ "paddingBottom": "{palette.size.size12}",
2216
+ "paddingLeft": "{palette.size.size24}",
2217
+ "paddingRight": "{palette.size.size8}",
2218
+ "paddingTop": "{palette.size.size12}",
2219
+ "placeholderColor": "{palette.color.greyCharcoal}",
2220
+ "submitButtonIcon": "{palette.icon.SearchBold}"
2221
+ }
2222
+ },
2223
+ "SearchButton": {
2224
+ "appearances": {
2225
+ "focus": "{appearances.SearchButton.focus}",
2226
+ "hover": "{appearances.SearchButton.hover}",
2231
2227
  "inactive": "{appearances.SearchButton.inactive}",
2232
2228
  "pressed": "{appearances.SearchButton.pressed}",
2233
2229
  "priority": {
2234
2230
  "description": "",
2235
- "values": ["high"],
2236
- "type": "variant"
2231
+ "type": "variant",
2232
+ "values": ["high"]
2237
2233
  }
2238
2234
  },
2239
- "tokens": {
2240
- "borderColor": "{palette.color.transparent}",
2241
- "borderWidth": "{system.border.zero}",
2242
- "borderRadius": "{palette.radius.pill32}",
2243
- "backgroundColor": "{system.color.none}",
2244
- "opacity": "{system.opacity.opaque}",
2245
- "paddingLeft": "{palette.size.size8}",
2246
- "paddingRight": "{palette.size.size8}",
2247
- "paddingBottom": "{palette.size.size8}",
2248
- "paddingTop": "{palette.size.size8}",
2249
- "shadow": "{system.shadow.none}",
2250
- "iconSize": "{palette.size.size20}",
2251
- "iconColor": "{palette.color.greyShuttle}"
2252
- },
2253
2235
  "rules": [
2254
2236
  {
2255
2237
  "if": {
@@ -2275,10 +2257,10 @@
2275
2257
  "focus": true
2276
2258
  },
2277
2259
  "tokens": {
2260
+ "backgroundColor": "{system.color.transparent}",
2278
2261
  "borderColor": "{palette.color.purpleTelus}",
2279
2262
  "borderWidth": "{palette.border.border3}",
2280
- "iconColor": "{palette.color.purpleTelus}",
2281
- "backgroundColor": "{system.color.transparent}"
2263
+ "iconColor": "{palette.color.purpleTelus}"
2282
2264
  }
2283
2265
  },
2284
2266
  {
@@ -2286,8 +2268,8 @@
2286
2268
  "pressed": true
2287
2269
  },
2288
2270
  "tokens": {
2289
- "borderWidth": "{system.size.zero}",
2290
2271
  "backgroundColor": "{palette.color.purpleDark}",
2272
+ "borderWidth": "{palette.border.none}",
2291
2273
  "iconColor": "{palette.color.white}"
2292
2274
  }
2293
2275
  },
@@ -2297,314 +2279,384 @@
2297
2279
  },
2298
2280
  "tokens": {
2299
2281
  "backgroundColor": "{palette.color.greyMystic}",
2300
- "iconColor": "{palette.color.greyShuttle}",
2301
- "borderWidth": "{system.size.zero}"
2302
- }
2303
- }
2304
- ]
2305
- },
2306
- "StepTracker": {
2307
- "appearances": {
2308
- "viewport": "{appearances.system.viewport}"
2309
- },
2310
- "tokens": {
2311
- "completedIcon": "{system.icon.none}",
2312
- "completedIconColor": "{system.color.none}",
2313
- "completedIconSize": "{system.size.none}",
2314
- "connectorColor": "{palette.color.greyShuttle}",
2315
- "connectorHeight": "{palette.border.border1}",
2316
- "connectorMinWidth": "{palette.size.size16}",
2317
- "connectorCompletedHeight": "{palette.border.border3}",
2318
- "connectorCompletedColor": "{palette.color.purpleDeluge}",
2319
- "containerPaddingBottom": "{system.size.none}",
2320
- "containerPaddingLeft": "{system.size.none}",
2321
- "containerPaddingRight": "{system.size.none}",
2322
- "containerPaddingTop": "{system.size.none}",
2323
- "knobBackgroundColor": "{palette.color.transparent}",
2324
- "knobBorderWidth": "{palette.border.border1}",
2325
- "knobBorderColor": "{palette.color.greyShuttle}",
2326
- "knobCompletedBackgroundColor": "{palette.color.purpleDeluge}",
2327
- "knobCompletedBorderColor": "{palette.color.purpleDeluge}",
2328
- "knobCompletedPaddingLeft": "{system.size.none}",
2329
- "knobCompletedPaddingTop": "{system.size.none}",
2330
- "knobCurrentBackgroundColor": "{palette.color.transparent}",
2331
- "knobCurrentBorderColor": "{palette.color.purpleDeluge}",
2332
- "knobCurrentBorderWidth": "{palette.border.border2}",
2333
- "knobCurrentInnerColor": "{palette.color.purpleDeluge}",
2334
- "knobCurrentInnerSize": "{palette.size.size8}",
2335
- "knobCurrentPaddingLeft": "{palette.size.size2}",
2336
- "knobCurrentPaddingTop": "{palette.size.size2}",
2337
- "knobSize": "{palette.size.size16}",
2338
- "labelColor": "{palette.color.greyCharcoal}",
2339
- "labelCurrentColor": "{palette.color.purpleDeluge}",
2340
- "labelCurrentFontWeight": "{palette.fontWeight.weight700}",
2341
- "labelCurrentFontName": "{palette.fontName.HelveticaNow}",
2342
- "labelDirection": "{system.direction.column}",
2343
- "labelFontSize": "{palette.fontSize.size16}",
2344
- "labelFontWeight": "{palette.fontWeight.weight400}",
2345
- "labelFontName": "{palette.fontName.HelveticaNow}",
2346
- "labelGap": "{palette.size.size0}",
2347
- "labelLineHeight": "{palette.lineHeight.ratio10to7}",
2348
- "labelMarginTop": "{palette.size.size8}",
2349
- "labelPaddingLeft": "{palette.size.size16}",
2350
- "labelPaddingRight": "{palette.size.size16}",
2351
- "showStepLabel": "{system.show.false}",
2352
- "showStepName": "{system.show.true}",
2353
- "showStepTrackerLabel": "{system.show.true}"
2354
- },
2355
- "rules": [
2356
- {
2357
- "if": {
2358
- "viewport": ["lg", "xl"]
2359
- },
2360
- "tokens": {
2361
- "showStepLabel": "{system.show.true}",
2362
- "showStepTrackerLabel": "{system.show.false}"
2282
+ "borderWidth": "{palette.border.none}",
2283
+ "iconColor": "{palette.color.greyShuttle}"
2363
2284
  }
2364
2285
  }
2365
- ]
2366
- },
2367
- "Tabs": {
2368
- "appearances": {},
2286
+ ],
2369
2287
  "tokens": {
2370
- "nextIcon": "{palette.icon.ArrowRight}",
2371
- "previousIcon": "{palette.icon.ArrowLeft}",
2372
- "space": "{system.integer.0}",
2373
- "gutter": "{palette.size.size2}",
2374
- "borderBottomWidth": "{palette.border.border1}",
2375
- "borderBottomColor": "{palette.color.greyShuttle}",
2376
- "buttonClearance": "{palette.size.size16}"
2377
- },
2378
- "rules": []
2288
+ "backgroundColor": "{system.color.none}",
2289
+ "borderColor": "{palette.color.transparent}",
2290
+ "borderRadius": "{palette.radius.pill32}",
2291
+ "borderWidth": "{system.border.zero}",
2292
+ "iconColor": "{palette.color.greyShuttle}",
2293
+ "iconSize": "{palette.size.size20}",
2294
+ "opacity": "{system.opacity.opaque}",
2295
+ "paddingBottom": "{palette.size.size8}",
2296
+ "paddingLeft": "{palette.size.size8}",
2297
+ "paddingRight": "{palette.size.size8}",
2298
+ "paddingTop": "{palette.size.size8}",
2299
+ "shadow": "{system.shadow.none}"
2300
+ }
2379
2301
  },
2380
- "TabsItem": {
2302
+ "Select": {
2381
2303
  "appearances": {
2382
- "pressed": "{appearances.TabsItem.pressed}",
2383
- "hover": "{appearances.TabsItem.pressed}",
2384
- "focus": "{appearances.TabsItem.pressed}",
2385
- "selected": "{appearances.TabsItem.pressed}"
2386
- },
2387
- "tokens": {
2388
- "highlightColor": "{system.color.transparent}",
2389
- "highlightBarHeight": "{system.border.zero}",
2390
- "highlightBarBorderRadius": "{system.radius.zero}",
2391
- "highlightBarBorderWidth": "{system.border.zero}",
2392
- "highlightTriangleSize": "{system.size.zero}",
2393
- "backgroundColor": "{system.color.transparent}",
2394
- "borderColor": "{system.color.transparent}",
2395
- "borderWidth": "{system.border.zero}",
2396
- "borderRadius": "{palette.radius.pill32}",
2397
- "maxWidth": "{palette.size.size192}",
2398
- "space": "{system.integer.1}",
2399
- "paddingHorizontal": "{palette.size.size24}",
2400
- "paddingVertical": "{palette.size.size8}",
2401
- "textAlign": "{system.textAlign.center}",
2402
- "lineHeight": "{palette.lineHeight.ratio8to7}",
2403
- "color": "{palette.color.greyShuttle}",
2404
- "fontSize": "{palette.fontSize.size14}",
2405
- "letterSpacing": "{system.letterSpacing.none}",
2406
- "textTransform": "{system.textTransform.none}",
2407
- "fontScaleCap": "{palette.fontSize.size64}",
2408
- "fontWeight": "{palette.fontWeight.weight700}",
2409
- "fontName": "{palette.fontName.HelveticaNow}"
2304
+ "focus": "{appearances.Select.focus}",
2305
+ "hover": "{appearances.Select.hover}",
2306
+ "inactive": "{appearances.Select.inactive}",
2307
+ "validation": "{appearances.Select.validation}"
2410
2308
  },
2411
2309
  "rules": [
2412
2310
  {
2413
2311
  "if": {
2414
- "selected": true
2312
+ "hover": true,
2313
+ "inactive": null
2415
2314
  },
2416
- "description": "The design uses height of 3: there's (rightly) no '3' in the Allium palette but the effect is 1px above and below a 1px line",
2417
2315
  "tokens": {
2418
- "highlightBarBorderWidth": "{palette.border.border1}",
2419
- "highlightBarHeight": "{palette.border.border1}",
2420
- "highlightColor": "{palette.color.purpleTelus}",
2421
- "highlightBarBorderRadius": "{palette.radius.pill32}",
2422
- "color": "{palette.color.purpleTelus}",
2423
- "backgroundColor": "{palette.color.greyAthens}"
2316
+ "outerBackgroundColor": "{palette.color.greyMystic}",
2317
+ "outerBorderColor": "{palette.color.greyMystic}"
2424
2318
  }
2425
2319
  },
2426
2320
  {
2427
2321
  "if": {
2428
- "hover": true
2322
+ "validation": "success"
2429
2323
  },
2430
2324
  "tokens": {
2431
- "borderColor": "{palette.color.greyCloud}",
2432
- "borderWidth": "{palette.border.border2}"
2325
+ "borderColor": "{palette.color.greenAccessible}",
2326
+ "validationIcon": "{palette.icon.StatusSuccess}",
2327
+ "validationIconColor": "{palette.color.greenAccessible}"
2433
2328
  }
2434
2329
  },
2435
2330
  {
2436
2331
  "if": {
2437
- "focus": true
2332
+ "validation": "error"
2438
2333
  },
2439
2334
  "tokens": {
2440
- "color": "{palette.color.purpleTelus}",
2441
- "borderColor": "{palette.color.purpleTelus}",
2442
- "borderWidth": "{palette.border.border2}"
2335
+ "borderColor": "{palette.color.red}",
2336
+ "validationIcon": "{palette.icon.StatusError}",
2337
+ "validationIconColor": "{palette.color.red}"
2443
2338
  }
2444
2339
  },
2445
2340
  {
2446
2341
  "if": {
2447
- "pressed": true
2342
+ "focus": true
2448
2343
  },
2449
2344
  "tokens": {
2450
- "color": "{palette.color.white}",
2451
- "backgroundColor": "{palette.color.greyShuttle}",
2452
- "borderColor": "{system.color.transparent}",
2453
- "borderWidth": "{system.border.zero}"
2345
+ "borderColor": "{palette.color.purpleDeluge}",
2346
+ "borderWidth": "{palette.border.border3}",
2347
+ "validationIcon": "{system.icon.none}"
2454
2348
  }
2455
2349
  },
2456
2350
  {
2457
2351
  "if": {
2458
- "focus": true,
2459
- "pressed": true
2352
+ "inactive": true
2460
2353
  },
2461
2354
  "tokens": {
2462
- "backgroundColor": "{palette.color.purpleTelus}"
2355
+ "backgroundColor": "{palette.color.greyAthens}",
2356
+ "borderColor": "{palette.color.greyAthens}"
2463
2357
  }
2464
2358
  }
2465
- ]
2466
- },
2467
- "TextArea": {
2468
- "appearances": {},
2469
- "tokens": {
2470
- "minLines": "{system.integer.5}",
2471
- "maxLines": "{system.integer.8}"
2472
- },
2473
- "rules": []
2474
- },
2475
- "TextInput": {
2476
- "appearances": {
2477
- "validation": "{appearances.TextInput.validation}",
2478
- "hover": "{appearances.TextInput.hover}",
2479
- "focus": "{appearances.TextInput.focus}",
2480
- "inactive": "{appearances.TextInput.inactive}"
2481
- },
2359
+ ],
2482
2360
  "tokens": {
2483
2361
  "backgroundColor": "{palette.color.white}",
2484
- "color": "{palette.color.greyCharcoal}",
2485
- "borderWidth": "{palette.border.border1}",
2486
2362
  "borderColor": "{palette.color.greyShuttle}",
2487
2363
  "borderRadius": "{palette.radius.radius4}",
2488
- "paddingTop": "{palette.size.size12}",
2364
+ "borderWidth": "{palette.border.border1}",
2365
+ "color": "{palette.color.greyCharcoal}",
2366
+ "fontName": "{palette.fontName.HelveticaNow}",
2367
+ "fontSize": "{palette.fontSize.size16}",
2368
+ "fontWeight": "{palette.fontWeight.weight400}",
2369
+ "height": "{palette.size.size48}",
2370
+ "icon": "{palette.icon.CaretDown}",
2371
+ "iconColor": "{palette.color.greenAccessible}",
2372
+ "iconSize": "{palette.size.size24}",
2373
+ "outerBackgroundColor": "{palette.color.transparent}",
2374
+ "outerBorderColor": "{palette.color.transparent}",
2375
+ "outerBorderWidth": "{palette.border.border2}",
2489
2376
  "paddingBottom": "{palette.size.size12}",
2490
2377
  "paddingLeft": "{palette.size.size16}",
2491
2378
  "paddingRight": "{palette.size.size16}",
2492
- "outerBackgroundColor": "{palette.color.transparent}",
2493
- "outerBorderWidth": "{palette.border.border2}",
2494
- "outerBorderColor": "{palette.color.transparent}",
2495
- "fontName": "{palette.fontName.HelveticaNow}",
2496
- "fontWeight": "{palette.fontWeight.weight400}",
2497
- "fontSize": "{palette.fontSize.size16}",
2498
- "lineHeight": "{palette.lineHeight.ratio3to2}",
2499
- "icon": "{system.icon.none}",
2500
- "iconSize": "{palette.fontSize.size24}",
2501
- "iconColor": "{palette.color.transparent}"
2379
+ "paddingTop": "{palette.size.size12}",
2380
+ "validationIcon": "{system.icon.none}",
2381
+ "validationIconColor": "{palette.color.transparent}",
2382
+ "validationIconSize": "{palette.size.size24}"
2383
+ }
2384
+ },
2385
+ "SideNav": {
2386
+ "appearances": {},
2387
+ "rules": [],
2388
+ "tokens": {
2389
+ "borderColor": "{palette.color.greyCloud}",
2390
+ "borderStyle": "{system.borderStyle.solid}",
2391
+ "borderWidth": "{palette.border.border1}"
2392
+ }
2393
+ },
2394
+ "SideNavItem": {
2395
+ "appearances": {
2396
+ "active": "{appearances.SideNavItem.active}",
2397
+ "expanded": "{appearances.SideNavItem.expanded}",
2398
+ "hover": "{appearances.SideNavItem.hover}",
2399
+ "type": "{appearances.SideNavItem.type}"
2502
2400
  },
2503
2401
  "rules": [
2504
2402
  {
2505
2403
  "if": {
2506
- "hover": true,
2507
- "inactive": null
2404
+ "active": true
2508
2405
  },
2509
2406
  "tokens": {
2510
- "outerBorderColor": "{palette.color.greyMystic}",
2511
- "outerBackgroundColor": "{palette.color.greyMystic}"
2407
+ "accentBackgroundColor": "{palette.color.purpleTelus}",
2408
+ "color": "{palette.color.purpleTelus}",
2409
+ "fontName": "{palette.fontName.HelveticaNow}",
2410
+ "fontWeight": "{palette.fontWeight.weight700}",
2411
+ "paddingLeft": "{palette.size.size12}"
2512
2412
  }
2513
2413
  },
2514
2414
  {
2515
2415
  "if": {
2516
- "validation": "success"
2416
+ "type": "child"
2517
2417
  },
2518
2418
  "tokens": {
2519
- "borderColor": "{palette.color.greenAccessible}",
2520
- "icon": "{palette.icon.StatusSuccess}",
2521
- "iconColor": "{palette.color.greenAccessible}"
2419
+ "accentBackgroundColor": "{palette.color.greyAthens}",
2420
+ "accentOffset": "{palette.size.size16}",
2421
+ "borderWidth": "{palette.border.none}",
2422
+ "fontSize": "{palette.fontSize.size14}",
2423
+ "lineHeight": "{palette.lineHeight.ratio7to5}",
2424
+ "paddingLeft": "{palette.size.size36}"
2522
2425
  }
2523
2426
  },
2524
2427
  {
2525
2428
  "if": {
2526
- "validation": "error"
2429
+ "active": true,
2430
+ "type": "parent"
2527
2431
  },
2528
2432
  "tokens": {
2529
- "borderColor": "{palette.color.red}",
2530
- "icon": "{palette.icon.StatusError}",
2531
- "iconColor": "{palette.color.red}"
2433
+ "paddingLeft": "{palette.size.size12}"
2532
2434
  }
2533
2435
  },
2534
2436
  {
2535
2437
  "if": {
2536
- "focus": true
2438
+ "active": true,
2439
+ "expanded": true,
2440
+ "type": "parent"
2537
2441
  },
2538
2442
  "tokens": {
2539
- "borderColor": "{palette.color.purpleDeluge}",
2540
- "borderWidth": "{palette.border.border3}",
2541
- "icon": "{system.icon.none}"
2443
+ "accentBackgroundColor": "{palette.color.transparent}",
2444
+ "color": "{palette.color.greyCharcoal}",
2445
+ "paddingLeft": "{palette.size.size16}"
2542
2446
  }
2543
2447
  },
2544
2448
  {
2545
2449
  "if": {
2546
- "inactive": true
2450
+ "hover": true
2547
2451
  },
2548
2452
  "tokens": {
2549
2453
  "backgroundColor": "{palette.color.greyAthens}",
2550
- "borderColor": "{palette.color.greyAthens}"
2454
+ "color": "{palette.color.purpleTelus}"
2455
+ }
2456
+ },
2457
+ {
2458
+ "if": {
2459
+ "active": true,
2460
+ "type": "child"
2461
+ },
2462
+ "tokens": {
2463
+ "accentBackgroundColor": "{palette.color.purpleTelus}",
2464
+ "accentPadding": "{palette.size.size16}",
2465
+ "backgroundColor": "{palette.color.greyAthens}",
2466
+ "color": "{palette.color.purpleTelus}"
2467
+ }
2468
+ },
2469
+ {
2470
+ "if": {
2471
+ "active": false,
2472
+ "hover": true,
2473
+ "type": "child"
2474
+ },
2475
+ "tokens": {
2476
+ "accentBackgroundColor": "{palette.color.white}",
2477
+ "accentOffset": "{system.size.zero}",
2478
+ "accentWidth": "{palette.size.size16}",
2479
+ "color": "{palette.color.greyCharcoal}"
2551
2480
  }
2552
2481
  }
2553
- ]
2482
+ ],
2483
+ "tokens": {
2484
+ "accentBackgroundColor": "{palette.color.transparent}",
2485
+ "accentOffset": "{system.size.zero}",
2486
+ "accentPadding": "{system.size.zero}",
2487
+ "accentWidth": "{palette.size.size4}",
2488
+ "backgroundColor": "{palette.color.transparent}",
2489
+ "borderColor": "{palette.color.greyCloud}",
2490
+ "borderStyle": "{system.borderStyle.solid}",
2491
+ "borderWidth": "{palette.border.border1}",
2492
+ "color": "{palette.color.greyCharcoal}",
2493
+ "fontName": "{palette.fontName.HelveticaNow}",
2494
+ "fontSize": "{palette.fontSize.size16}",
2495
+ "fontWeight": "{palette.fontWeight.weight400}",
2496
+ "justifyContent": "{system.flexJustifyContent.spaceBetween}",
2497
+ "lineHeight": "{palette.lineHeight.ratio3to2}",
2498
+ "paddingBottom": "{palette.size.size16}",
2499
+ "paddingLeft": "{palette.size.size16}",
2500
+ "paddingRight": "{palette.size.size16}",
2501
+ "paddingTop": "{palette.size.size16}"
2502
+ }
2554
2503
  },
2555
- "ToggleSwitch": {
2504
+ "SideNavItemsGroup": {
2556
2505
  "appearances": {
2557
- "focus": "{appearances.ToggleSwitch.focus}",
2558
- "hover": "{appearances.ToggleSwitch.hover}",
2559
- "pressed": "{appearances.ToggleSwitch.pressed}",
2560
- "inactive": "{appearances.ToggleSwitch.inactive}",
2561
- "selected": "{appearances.ToggleSwitch.selected}"
2506
+ "expanded": "{appearances.SideNavItemGroup.expanded}"
2562
2507
  },
2508
+ "rules": [
2509
+ {
2510
+ "if": {
2511
+ "expanded": true
2512
+ },
2513
+ "tokens": {
2514
+ "icon": "{palette.icon.CaretUp}"
2515
+ }
2516
+ }
2517
+ ],
2563
2518
  "tokens": {
2564
- "borderColor": "{palette.color.transparent}",
2565
- "borderWidth": "{palette.border.none}",
2566
- "borderRadius": "{palette.radius.pill32}",
2567
- "outerBorderColor": "{palette.color.transparent}",
2568
- "outerBorderWidth": "{palette.border.none}",
2569
- "outerBorderGap": "{palette.size.size0}",
2570
- "outerBackgroundColor": "{palette.color.transparent}",
2571
- "backgroundColor": "{palette.color.greyShuttle}",
2572
- "opacity": "{system.opacity.opaque}",
2573
- "paddingLeft": "{system.size.zero}",
2574
- "paddingRight": "{system.size.zero}",
2575
- "paddingTop": "{system.size.zero}",
2576
- "paddingBottom": "{system.size.zero}",
2577
- "shadow": "{palette.shadow.surfaceInset}",
2578
- "alignSelf": "{system.flexAlign.flexStart}",
2579
- "icon": "{system.icon.none}",
2580
- "width": "{palette.size.size40}",
2581
- "trackBorderWidth": "{palette.border.border3}",
2582
- "trackBorderColor": "{palette.color.transparent}",
2583
- "trackBorderRadius": "{palette.radius.pill32}",
2584
- "iconSize": "{palette.size.size12}",
2585
- "iconColor": "{palette.color.greyShuttle}",
2586
- "switchSize": "{palette.size.size16}",
2587
- "switchColor": "{palette.color.white}",
2588
- "switchBorderColor": "{palette.color.transparent}",
2589
- "switchBorderWidth": "{palette.border.none}",
2590
- "switchBorderRadius": "{palette.radius.pill32}",
2591
- "switchShadow": "{palette.shadow.surfaceRaised}"
2519
+ "collapseDuration": "{palette.duration.duration250}",
2520
+ "contentPaddingBottom": "{palette.size.size0}",
2521
+ "contentPaddingLeft": "{palette.size.size0}",
2522
+ "contentPaddingRight": "{palette.size.size0}",
2523
+ "contentPaddingTop": "{palette.size.size0}",
2524
+ "expandDuration": "{palette.duration.duration300}",
2525
+ "icon": "{palette.icon.CaretDown}",
2526
+ "iconColor": "{palette.color.purpleTelus}",
2527
+ "iconGap": "{palette.size.size8}",
2528
+ "iconPosition": "{system.position.right}",
2529
+ "iconSize": "{palette.size.size24}",
2530
+ "justifyContent": "{system.flexJustifyContent.spaceBetween}",
2531
+ "verticalAlign": "{system.verticalAlign.middle}"
2532
+ }
2533
+ },
2534
+ "Skeleton": {
2535
+ "appearances": {},
2536
+ "rules": [],
2537
+ "tokens": {
2538
+ "baseWidth": "{palette.size.size40}",
2539
+ "characters": "{palette.size.size10}",
2540
+ "color": "{palette.color.greyCloud}",
2541
+ "radius": "{system.radius.round}",
2542
+ "size": "{palette.size.size3}",
2543
+ "spaceBetweenLines": "{palette.size.size2}",
2544
+ "squareRadius": "{palette.radius.radius4}"
2545
+ }
2546
+ },
2547
+ "StackView": {
2548
+ "appearances": {},
2549
+ "rules": [],
2550
+ "tokens": {
2551
+ "alignItems": "{system.flexAlign.stretch}",
2552
+ "flexGrow": "{system.integer.0}",
2553
+ "flexShrink": "{system.integer.0}",
2554
+ "justifyContent": "{system.flexJustifyContent.flexStart}"
2555
+ }
2556
+ },
2557
+ "StepTracker": {
2558
+ "appearances": {
2559
+ "viewport": "{appearances.system.viewport}"
2592
2560
  },
2593
2561
  "rules": [
2594
2562
  {
2595
2563
  "if": {
2596
- "hover": true
2564
+ "viewport": ["lg", "xl"]
2597
2565
  },
2598
2566
  "tokens": {
2599
- "backgroundColor": "{palette.color.greyCharcoal}"
2567
+ "showStepLabel": "{system.show.true}",
2568
+ "showStepTrackerLabel": "{system.show.false}"
2569
+ }
2570
+ }
2571
+ ],
2572
+ "tokens": {
2573
+ "completedIcon": "{system.icon.none}",
2574
+ "completedIconColor": "{system.color.none}",
2575
+ "completedIconSize": "{system.size.none}",
2576
+ "connectorColor": "{palette.color.greyShuttle}",
2577
+ "connectorCompletedColor": "{palette.color.purpleDeluge}",
2578
+ "connectorCompletedHeight": "{palette.border.border3}",
2579
+ "connectorHeight": "{palette.border.border1}",
2580
+ "connectorMinWidth": "{palette.size.size16}",
2581
+ "containerPaddingBottom": "{system.size.none}",
2582
+ "containerPaddingLeft": "{system.size.none}",
2583
+ "containerPaddingRight": "{system.size.none}",
2584
+ "containerPaddingTop": "{system.size.none}",
2585
+ "knobBackgroundColor": "{palette.color.transparent}",
2586
+ "knobBorderColor": "{palette.color.greyShuttle}",
2587
+ "knobBorderWidth": "{palette.border.border1}",
2588
+ "knobCompletedBackgroundColor": "{palette.color.purpleDeluge}",
2589
+ "knobCompletedBorderColor": "{palette.color.purpleDeluge}",
2590
+ "knobCompletedPaddingLeft": "{system.size.none}",
2591
+ "knobCompletedPaddingTop": "{system.size.none}",
2592
+ "knobCurrentBackgroundColor": "{palette.color.transparent}",
2593
+ "knobCurrentBorderColor": "{palette.color.purpleDeluge}",
2594
+ "knobCurrentBorderWidth": "{palette.border.border2}",
2595
+ "knobCurrentInnerColor": "{palette.color.purpleDeluge}",
2596
+ "knobCurrentInnerSize": "{palette.size.size8}",
2597
+ "knobCurrentPaddingLeft": "{palette.size.size2}",
2598
+ "knobCurrentPaddingTop": "{palette.size.size2}",
2599
+ "knobSize": "{palette.size.size16}",
2600
+ "labelColor": "{palette.color.greyCharcoal}",
2601
+ "labelCurrentColor": "{palette.color.purpleDeluge}",
2602
+ "labelCurrentFontName": "{palette.fontName.HelveticaNow}",
2603
+ "labelCurrentFontWeight": "{palette.fontWeight.weight700}",
2604
+ "labelDirection": "{system.direction.column}",
2605
+ "labelFontName": "{palette.fontName.HelveticaNow}",
2606
+ "labelFontSize": "{palette.fontSize.size16}",
2607
+ "labelFontWeight": "{palette.fontWeight.weight400}",
2608
+ "labelGap": "{palette.size.size0}",
2609
+ "labelLineHeight": "{palette.lineHeight.ratio10to7}",
2610
+ "labelMarginTop": "{palette.size.size8}",
2611
+ "labelPaddingLeft": "{palette.size.size16}",
2612
+ "labelPaddingRight": "{palette.size.size16}",
2613
+ "showStepLabel": "{system.show.false}",
2614
+ "showStepName": "{system.show.true}",
2615
+ "showStepTrackerLabel": "{system.show.true}"
2616
+ }
2617
+ },
2618
+ "Tabs": {
2619
+ "appearances": {},
2620
+ "rules": [],
2621
+ "tokens": {
2622
+ "borderBottomColor": "{palette.color.greyShuttle}",
2623
+ "borderBottomWidth": "{palette.border.border1}",
2624
+ "buttonClearance": "{palette.size.size16}",
2625
+ "gutter": "{palette.size.size2}",
2626
+ "nextIcon": "{palette.icon.ArrowRight}",
2627
+ "previousIcon": "{palette.icon.ArrowLeft}",
2628
+ "space": "{system.integer.0}"
2629
+ }
2630
+ },
2631
+ "TabsItem": {
2632
+ "appearances": {
2633
+ "focus": "{appearances.TabsItem.pressed}",
2634
+ "hover": "{appearances.TabsItem.pressed}",
2635
+ "pressed": "{appearances.TabsItem.pressed}",
2636
+ "selected": "{appearances.TabsItem.pressed}"
2637
+ },
2638
+ "rules": [
2639
+ {
2640
+ "description": "The design uses height of 3: there's (rightly) no '3' in the Allium palette but the effect is 1px above and below a 1px line",
2641
+ "if": {
2642
+ "selected": true
2643
+ },
2644
+ "tokens": {
2645
+ "backgroundColor": "{palette.color.greyAthens}",
2646
+ "color": "{palette.color.purpleTelus}",
2647
+ "highlightBarBorderRadius": "{palette.radius.pill32}",
2648
+ "highlightBarBorderWidth": "{palette.border.border1}",
2649
+ "highlightBarHeight": "{palette.border.border1}",
2650
+ "highlightColor": "{palette.color.purpleTelus}"
2600
2651
  }
2601
2652
  },
2602
2653
  {
2603
2654
  "if": {
2604
- "pressed": true
2655
+ "hover": true
2605
2656
  },
2606
2657
  "tokens": {
2607
- "backgroundColor": "{palette.color.greyThunder}"
2658
+ "borderColor": "{palette.color.greyCloud}",
2659
+ "borderWidth": "{palette.border.border2}"
2608
2660
  }
2609
2661
  },
2610
2662
  {
@@ -2612,10 +2664,20 @@
2612
2664
  "focus": true
2613
2665
  },
2614
2666
  "tokens": {
2615
- "outerBackgroundColor": "{palette.color.white}",
2616
- "outerBorderGap": "{palette.border.border3}",
2617
- "outerBorderWidth": "{palette.border.border2}",
2618
- "outerBorderColor": "{palette.color.greyShuttle}"
2667
+ "borderColor": "{palette.color.purpleTelus}",
2668
+ "borderWidth": "{palette.border.border2}",
2669
+ "color": "{palette.color.purpleTelus}"
2670
+ }
2671
+ },
2672
+ {
2673
+ "if": {
2674
+ "pressed": true
2675
+ },
2676
+ "tokens": {
2677
+ "backgroundColor": "{palette.color.greyShuttle}",
2678
+ "borderColor": "{system.color.transparent}",
2679
+ "borderWidth": "{system.border.zero}",
2680
+ "color": "{palette.color.white}"
2619
2681
  }
2620
2682
  },
2621
2683
  {
@@ -2624,159 +2686,244 @@
2624
2686
  "pressed": true
2625
2687
  },
2626
2688
  "tokens": {
2627
- "outerBorderColor": "{palette.color.greyThunder}"
2689
+ "backgroundColor": "{palette.color.purpleTelus}"
2690
+ }
2691
+ }
2692
+ ],
2693
+ "tokens": {
2694
+ "backgroundColor": "{system.color.transparent}",
2695
+ "borderColor": "{system.color.transparent}",
2696
+ "borderRadius": "{palette.radius.pill32}",
2697
+ "borderWidth": "{system.border.zero}",
2698
+ "color": "{palette.color.greyShuttle}",
2699
+ "fontName": "{palette.fontName.HelveticaNow}",
2700
+ "fontScaleCap": "{palette.fontSize.size64}",
2701
+ "fontSize": "{palette.fontSize.size14}",
2702
+ "fontWeight": "{palette.fontWeight.weight700}",
2703
+ "highlightBarBorderRadius": "{system.radius.zero}",
2704
+ "highlightBarBorderWidth": "{system.border.zero}",
2705
+ "highlightBarHeight": "{system.border.zero}",
2706
+ "highlightColor": "{system.color.transparent}",
2707
+ "highlightTriangleSize": "{system.size.zero}",
2708
+ "letterSpacing": "{system.letterSpacing.none}",
2709
+ "lineHeight": "{palette.lineHeight.ratio8to7}",
2710
+ "maxWidth": "{palette.size.size192}",
2711
+ "paddingHorizontal": "{palette.size.size24}",
2712
+ "paddingVertical": "{palette.size.size8}",
2713
+ "space": "{system.integer.1}",
2714
+ "textAlign": "{system.textAlign.center}",
2715
+ "textTransform": "{system.textTransform.none}"
2716
+ }
2717
+ },
2718
+ "Tags": {
2719
+ "appearances": {
2720
+ "viewport": "{appearances.system.viewport}"
2721
+ },
2722
+ "rules": [
2723
+ {
2724
+ "if": {
2725
+ "viewport": ["lg", "xl"]
2726
+ },
2727
+ "tokens": {
2728
+ "space": "{system.integer.3}"
2729
+ }
2730
+ }
2731
+ ],
2732
+ "tokens": {
2733
+ "alignItems": "{system.flexAlign.center}",
2734
+ "direction": "{system.direction.row}",
2735
+ "flexGrow": "{system.integer.0}",
2736
+ "flexShrink": "{system.integer.0}",
2737
+ "justifyContent": "{system.flexJustifyContent.flexStart}",
2738
+ "space": "{system.integer.1}"
2739
+ }
2740
+ },
2741
+ "TagsItem": {
2742
+ "appearances": {
2743
+ "focus": "{appearances.TagsItem.focus}",
2744
+ "hover": "{appearances.TagsItem.hover}",
2745
+ "inactive": "{appearances.TagsItem.inactive}",
2746
+ "pressed": "{appearances.TagsItem.pressed}",
2747
+ "selected": "{appearances.TagsItem.selected}"
2748
+ },
2749
+ "rules": [
2750
+ {
2751
+ "if": {
2752
+ "pressed": true
2753
+ },
2754
+ "tokens": {
2755
+ "backgroundColor": "{palette.color.greyShuttle}",
2756
+ "borderColor": "{palette.color.greyShuttle}",
2757
+ "borderWidth": "{palette.border.none}",
2758
+ "color": "{palette.color.white}",
2759
+ "iconBackground": "{palette.color.greyCharcoal}",
2760
+ "iconColor": "{palette.color.white}"
2628
2761
  }
2629
2762
  },
2630
2763
  {
2631
2764
  "if": {
2632
- "selected": true
2765
+ "focus": true
2633
2766
  },
2634
2767
  "tokens": {
2635
- "icon": "{palette.icon.Checkmark}",
2636
- "backgroundColor": "{palette.color.greenAccessible}",
2637
- "iconColor": "{palette.color.greenAccessible}"
2768
+ "borderColor": "{palette.color.greyShuttle}",
2769
+ "outerBorderColor": "{palette.color.greyShuttle}",
2770
+ "outerBorderGap": "{palette.size.size2}",
2771
+ "outerBorderWidth": "{palette.border.border2}"
2638
2772
  }
2639
2773
  },
2640
2774
  {
2641
2775
  "if": {
2642
- "selected": true,
2643
2776
  "hover": true
2644
2777
  },
2645
2778
  "tokens": {
2646
- "backgroundColor": "{palette.color.greenSanFelix}",
2647
- "iconColor": "{palette.color.greenSanFelix}"
2779
+ "borderWidth": "{palette.border.border3}"
2648
2780
  }
2649
2781
  },
2650
2782
  {
2651
2783
  "if": {
2652
- "selected": true,
2653
- "pressed": true
2784
+ "selected": true
2654
2785
  },
2655
2786
  "tokens": {
2656
- "backgroundColor": "{palette.color.greenDarkFern}",
2657
- "iconColor": "{palette.color.greenDarkFern}"
2787
+ "backgroundColor": "{palette.color.purpleTelus}",
2788
+ "borderWidth": "{palette.border.none}",
2789
+ "color": "{palette.color.white}",
2790
+ "icon": "{palette.icon.Close}",
2791
+ "iconBackground": "{palette.color.purpleDeluge}",
2792
+ "iconColor": "{palette.color.white}"
2658
2793
  }
2659
2794
  },
2660
2795
  {
2661
2796
  "if": {
2662
- "selected": true,
2663
- "focus": true
2797
+ "hover": true,
2798
+ "selected": true
2664
2799
  },
2665
2800
  "tokens": {
2666
- "outerBorderColor": "{palette.color.greenAccessible}"
2801
+ "backgroundColor": "{palette.color.purpleDeluge}",
2802
+ "iconBackground": "{palette.color.purpleTelus}"
2803
+ }
2804
+ },
2805
+ {
2806
+ "if": {
2807
+ "pressed": true,
2808
+ "selected": true
2809
+ },
2810
+ "tokens": {
2811
+ "backgroundColor": "{palette.color.purpleDark}",
2812
+ "iconBackground": "{palette.color.purpleDeluge}"
2667
2813
  }
2668
2814
  },
2669
2815
  {
2670
2816
  "if": {
2671
- "selected": true,
2672
2817
  "focus": true,
2673
- "pressed": true
2818
+ "selected": true
2674
2819
  },
2675
2820
  "tokens": {
2676
- "outerBorderColor": "{palette.color.greenDarkFern}"
2821
+ "outerBorderColor": "{palette.color.purpleTelus}"
2677
2822
  }
2678
2823
  },
2679
2824
  {
2680
2825
  "if": {
2681
- "inactive": true
2826
+ "focus": true,
2827
+ "pressed": true,
2828
+ "selected": true
2682
2829
  },
2683
2830
  "tokens": {
2684
- "backgroundColor": "{palette.color.greyCloud}",
2685
- "outerBorderColor": "{palette.color.greyCloud}",
2686
- "iconColor": "{palette.color.greyShuttle}"
2831
+ "iconBackground": "{palette.color.purpleDeluge}",
2832
+ "outerBorderColor": "{palette.color.purpleDark}"
2687
2833
  }
2688
- }
2689
- ]
2690
- },
2691
- "Tooltip": {
2692
- "appearances": {
2693
- "inverse": {
2694
- "values": [true],
2695
- "type": "variant"
2696
- }
2697
- },
2698
- "tokens": {
2699
- "backgroundColor": "{palette.color.greyThunder}",
2700
- "paddingTop": "{palette.size.size8}",
2701
- "paddingBottom": "{palette.size.size8}",
2702
- "paddingLeft": "{palette.size.size16}",
2703
- "paddingRight": "{palette.size.size16}",
2704
- "borderRadius": "{palette.radius.radius8}",
2705
- "shadow": "{palette.shadow.elevation1}",
2706
- "color": "{palette.color.white}",
2707
- "fontSize": "{palette.fontSize.size14}",
2708
- "lineHeight": "{palette.lineHeight.ratio3to2}",
2709
- "fontName": "{palette.fontName.HelveticaNow}",
2710
- "fontWeight": "{palette.fontWeight.weight400}",
2711
- "arrowWidth": "{palette.size.size16}",
2712
- "arrowBorderRadius": "{palette.radius.radius1}",
2713
- "arrowOffset": "{palette.size.size4}"
2714
- },
2715
- "rules": [
2834
+ },
2716
2835
  {
2717
2836
  "if": {
2718
- "inverse": true
2837
+ "inactive": true
2719
2838
  },
2720
2839
  "tokens": {
2721
- "backgroundColor": "{palette.color.white}",
2722
- "color": "{palette.color.greyCharcoal}"
2840
+ "backgroundColor": "{palette.color.greyCloud}",
2841
+ "borderWidth": "{system.border.zero}",
2842
+ "color": "{palette.color.white}"
2723
2843
  }
2724
2844
  }
2725
- ]
2726
- },
2727
- "TooltipButton": {
2728
- "appearances": {
2729
- "focus": "{appearances.TooltipButton.focus}",
2730
- "hover": "{appearances.TooltipButton.hover}",
2731
- "pressed": "{appearances.TooltipButton.pressed}",
2732
- "inverse": {
2733
- "values": [true],
2734
- "type": "variant"
2735
- }
2736
- },
2845
+ ],
2737
2846
  "tokens": {
2738
- "outerBorderColor": "{palette.color.transparent}",
2739
- "outerBorderWidth": "{palette.border.border1}",
2740
- "outerBorderGap": "{palette.size.size4}",
2847
+ "alignSelf": "{system.flexAlign.center}",
2848
+ "backgroundColor": "{palette.color.white}",
2849
+ "borderColor": "{palette.color.greyCloud}",
2741
2850
  "borderRadius": "{palette.radius.pill32}",
2742
- "width": "{palette.size.size16}",
2743
- "icon": "{palette.icon.Question}",
2744
- "iconScale": "{system.iconScale.scale1}",
2851
+ "borderWidth": "{palette.border.border1}",
2852
+ "color": "{palette.color.greyShuttle}",
2853
+ "fontName": "{palette.fontName.HelveticaNow}",
2854
+ "fontSize": "{palette.fontSize.size14}",
2855
+ "fontWeight": "{palette.fontWeight.weight700}",
2856
+ "icon": "{palette.icon.Add}",
2857
+ "iconAlignSelf": "{system.flexAlign.center}",
2858
+ "iconBackground": "{palette.color.greyAthens}",
2859
+ "iconBorderRadius": "{palette.radius.pill32}",
2860
+ "iconColor": "{palette.color.greyThunder}",
2861
+ "iconPadding": "{palette.size.size2}",
2862
+ "iconPosition": "{system.position.right}",
2745
2863
  "iconSize": "{palette.size.size16}",
2746
- "iconColor": "{palette.color.greyThunder}"
2864
+ "iconSpace": "{system.integer.2}",
2865
+ "iconTranslateX": "{palette.size.size0}",
2866
+ "iconTranslateY": "{palette.size.size0}",
2867
+ "lineHeight": "{palette.lineHeight.ratio10to7}",
2868
+ "minWidth": "{system.size.zero}",
2869
+ "opacity": "{system.opacity.opaque}",
2870
+ "outerBackgroundColor": "{palette.color.transparent}",
2871
+ "outerBorderColor": "{palette.color.transparent}",
2872
+ "outerBorderGap": "{palette.size.size2}",
2873
+ "outerBorderWidth": "{palette.border.border2}",
2874
+ "paddingBottom": "{palette.size.size8}",
2875
+ "paddingLeft": "{palette.size.size16}",
2876
+ "paddingRight": "{palette.size.size8}",
2877
+ "paddingTop": "{palette.size.size8}",
2878
+ "shadow": "{system.shadow.none}",
2879
+ "textAlign": "{system.flexJustifyContent.center}",
2880
+ "width": "{system.size.none}"
2881
+ }
2882
+ },
2883
+ "TextArea": {
2884
+ "appearances": {},
2885
+ "rules": [],
2886
+ "tokens": {
2887
+ "maxLines": "{system.integer.8}",
2888
+ "minLines": "{system.integer.5}"
2889
+ }
2890
+ },
2891
+ "TextInput": {
2892
+ "appearances": {
2893
+ "focus": "{appearances.TextInput.focus}",
2894
+ "hover": "{appearances.TextInput.hover}",
2895
+ "inactive": "{appearances.TextInput.inactive}",
2896
+ "validation": "{appearances.TextInput.validation}"
2747
2897
  },
2748
2898
  "rules": [
2749
2899
  {
2750
2900
  "if": {
2751
- "inverse": true
2752
- },
2753
- "tokens": {
2754
- "iconColor": "{palette.color.white}"
2755
- }
2756
- },
2757
- {
2758
- "if": {
2759
- "hover": true
2901
+ "hover": true,
2902
+ "inactive": null
2760
2903
  },
2761
2904
  "tokens": {
2762
- "iconScale": "{system.iconScale.scale1_25}"
2905
+ "outerBackgroundColor": "{palette.color.greyMystic}",
2906
+ "outerBorderColor": "{palette.color.greyMystic}"
2763
2907
  }
2764
2908
  },
2765
2909
  {
2766
2910
  "if": {
2767
- "pressed": true
2911
+ "validation": "success"
2768
2912
  },
2769
2913
  "tokens": {
2770
- "iconColor": "{palette.color.greyShuttle}"
2914
+ "borderColor": "{palette.color.greenAccessible}",
2915
+ "icon": "{palette.icon.StatusSuccess}",
2916
+ "iconColor": "{palette.color.greenAccessible}"
2771
2917
  }
2772
2918
  },
2773
2919
  {
2774
2920
  "if": {
2775
- "inverse": true,
2776
- "pressed": true
2921
+ "validation": "error"
2777
2922
  },
2778
2923
  "tokens": {
2779
- "iconColor": "{palette.color.greyCloud}"
2924
+ "borderColor": "{palette.color.red}",
2925
+ "icon": "{palette.icon.StatusError}",
2926
+ "iconColor": "{palette.color.red}"
2780
2927
  }
2781
2928
  },
2782
2929
  {
@@ -2784,788 +2931,634 @@
2784
2931
  "focus": true
2785
2932
  },
2786
2933
  "tokens": {
2787
- "outerBorderColor": "{palette.color.greyShuttle}"
2934
+ "borderColor": "{palette.color.purpleDeluge}",
2935
+ "borderWidth": "{palette.border.border3}",
2936
+ "icon": "{system.icon.none}"
2788
2937
  }
2789
2938
  },
2790
2939
  {
2791
2940
  "if": {
2792
- "inverse": true,
2793
- "focus": true
2941
+ "inactive": true
2794
2942
  },
2795
2943
  "tokens": {
2796
- "outerBorderColor": "{palette.color.greyCloud}"
2944
+ "backgroundColor": "{palette.color.greyAthens}",
2945
+ "borderColor": "{palette.color.greyAthens}"
2797
2946
  }
2798
2947
  }
2799
- ]
2800
- },
2801
- "Typography": {
2802
- "appearances": {
2803
- "size": {
2804
- "description": "Styles text as body or heading text with a given size. Smaller numbers indicate larger sizes,\n\"display\" headings are larger than \"h\" headings. Default is medium size body text. Does not change\naccessibility or SEO-related properties; use the heading prop if text should be treated semantically as a heading.",
2805
- "values": [
2806
- "micro",
2807
- "small",
2808
- "large",
2809
- "eyebrow",
2810
- "h1",
2811
- "h2",
2812
- "h3",
2813
- "h4",
2814
- "h5",
2815
- "h6",
2816
- "display1",
2817
- "display2"
2818
- ],
2819
- "type": "variant"
2820
- },
2821
- "colour": {
2822
- "description": "Each typography variant has a default color, and at least a secondary color variant. In exceptional cases where a different colour is needed,\n use the tokens prop.",
2823
- "values": ["secondary", "tertiary"],
2824
- "type": "variant"
2825
- },
2826
- "bold": {
2827
- "description": "Sets the font weight, to bold on some body text styles. Does not change accessibility properties.",
2828
- "values": [true],
2829
- "type": "variant"
2830
- },
2831
- "inverse": {
2832
- "description": "Styles the link white for use on dark backgrounds.",
2833
- "values": [true],
2834
- "type": "variant"
2835
- },
2836
- "compact": {
2837
- "description": "Reduces line height on some body text styles. For data-rich content, not for flow content",
2838
- "values": [true],
2839
- "type": "variant"
2840
- },
2841
- "viewport": "{appearances.system.viewport}"
2842
- },
2948
+ ],
2843
2949
  "tokens": {
2950
+ "backgroundColor": "{palette.color.white}",
2951
+ "borderColor": "{palette.color.greyShuttle}",
2952
+ "borderRadius": "{palette.radius.radius4}",
2953
+ "borderWidth": "{palette.border.border1}",
2954
+ "color": "{palette.color.greyCharcoal}",
2844
2955
  "fontName": "{palette.fontName.HelveticaNow}",
2845
- "fontWeight": "{palette.fontWeight.weight400}",
2846
2956
  "fontSize": "{palette.fontSize.size16}",
2847
- "color": "{palette.color.greyThunder}",
2957
+ "fontWeight": "{palette.fontWeight.weight400}",
2958
+ "icon": "{system.icon.none}",
2959
+ "iconColor": "{palette.color.transparent}",
2960
+ "iconSize": "{palette.size.size24}",
2848
2961
  "lineHeight": "{palette.lineHeight.ratio3to2}",
2849
- "letterSpacing": "{system.letterSpacing.none}",
2850
- "textTransform": "{system.textTransform.none}",
2851
- "fontScaleCap": "{palette.fontSize.size64}"
2962
+ "outerBackgroundColor": "{palette.color.transparent}",
2963
+ "outerBorderColor": "{palette.color.transparent}",
2964
+ "outerBorderWidth": "{palette.border.border2}",
2965
+ "paddingBottom": "{palette.size.size12}",
2966
+ "paddingLeft": "{palette.size.size16}",
2967
+ "paddingRight": "{palette.size.size16}",
2968
+ "paddingTop": "{palette.size.size12}"
2969
+ }
2970
+ },
2971
+ "ToggleSwitch": {
2972
+ "appearances": {
2973
+ "focus": "{appearances.ToggleSwitch.focus}",
2974
+ "hover": "{appearances.ToggleSwitch.hover}",
2975
+ "inactive": "{appearances.ToggleSwitch.inactive}",
2976
+ "pressed": "{appearances.ToggleSwitch.pressed}",
2977
+ "selected": "{appearances.ToggleSwitch.selected}"
2852
2978
  },
2853
2979
  "rules": [
2854
2980
  {
2855
2981
  "if": {
2856
- "colour": "secondary"
2857
- },
2858
- "tokens": {
2859
- "color": "{palette.color.greyCharcoal}"
2860
- }
2861
- },
2862
- {
2863
- "if": {
2864
- "size": ["display1", "display2", "h1", "h2", "h3"]
2865
- },
2866
- "tokens": {
2867
- "color": "{palette.color.purpleTelus}"
2868
- }
2869
- },
2870
- {
2871
- "if": {
2872
- "size": ["display1", "display2", "h1", "h2", "h3"],
2873
- "colour": "secondary"
2874
- },
2875
- "tokens": {
2876
- "color": "{palette.color.greyThunder}"
2877
- }
2878
- },
2879
- {
2880
- "if": {
2881
- "size": "h6",
2882
- "colour": "tertiary"
2883
- },
2884
- "tokens": {
2885
- "color": "{palette.color.greyShuttle}"
2886
- }
2887
- },
2888
- {
2889
- "if": {
2890
- "size": "eyebrow"
2891
- },
2892
- "tokens": {
2893
- "color": "{palette.color.greyCharcoal}"
2894
- }
2895
- },
2896
- {
2897
- "if": {
2898
- "size": "eyebrow",
2899
- "colour": "secondary"
2900
- },
2901
- "tokens": {
2902
- "color": "{palette.color.purpleTelus}"
2903
- }
2904
- },
2905
- {
2906
- "if": {
2907
- "inverse": true
2982
+ "hover": true
2908
2983
  },
2909
2984
  "tokens": {
2910
- "color": "{palette.color.white}"
2985
+ "backgroundColor": "{palette.color.greyCharcoal}"
2911
2986
  }
2912
2987
  },
2913
2988
  {
2914
2989
  "if": {
2915
- "size": "display1"
2990
+ "pressed": true
2916
2991
  },
2917
2992
  "tokens": {
2918
- "fontSize": "{palette.fontSize.size40}",
2919
- "fontWeight": "{palette.fontWeight.weight300}",
2920
- "fontName": "{palette.fontName.HelveticaNow}",
2921
- "lineHeight": "{palette.lineHeight.ratio6to5}",
2922
- "letterSpacing": "{palette.letterSpacing.medium}"
2993
+ "backgroundColor": "{palette.color.greyThunder}"
2923
2994
  }
2924
2995
  },
2925
2996
  {
2926
2997
  "if": {
2927
- "size": "display1",
2928
- "viewport": ["lg", "xl"]
2998
+ "focus": true
2929
2999
  },
2930
3000
  "tokens": {
2931
- "fontSize": "{palette.fontSize.size64}",
2932
- "lineHeight": "{palette.lineHeight.ratio9to8}"
3001
+ "outerBackgroundColor": "{palette.color.white}",
3002
+ "outerBorderColor": "{palette.color.greyShuttle}",
3003
+ "outerBorderGap": "{palette.size.size3}",
3004
+ "outerBorderWidth": "{palette.border.border2}"
2933
3005
  }
2934
3006
  },
2935
3007
  {
2936
3008
  "if": {
2937
- "size": "display2"
3009
+ "focus": true,
3010
+ "pressed": true
2938
3011
  },
2939
3012
  "tokens": {
2940
- "fontSize": "{palette.fontSize.size36}",
2941
- "fontWeight": "{palette.fontWeight.weight400}",
2942
- "fontName": "{palette.fontName.HelveticaNow}",
2943
- "letterSpacing": "{palette.letterSpacing.medium}",
2944
- "lineHeight": "{palette.lineHeight.ratio11to9}"
3013
+ "outerBorderColor": "{palette.color.greyThunder}"
2945
3014
  }
2946
3015
  },
2947
3016
  {
2948
3017
  "if": {
2949
- "size": "display2",
2950
- "viewport": ["lg", "xl"]
3018
+ "selected": true
2951
3019
  },
2952
3020
  "tokens": {
2953
- "fontSize": "{palette.fontSize.size56}",
2954
- "fontWeight": "{palette.fontWeight.weight300}",
2955
- "fontName": "{palette.fontName.HelveticaNow}",
2956
- "lineHeight": "{palette.lineHeight.ratio8to7}",
2957
- "letterSpacing": "{palette.letterSpacing.condensed}"
3021
+ "backgroundColor": "{palette.color.greenAccessible}",
3022
+ "icon": "{palette.icon.Checkmark}",
3023
+ "iconColor": "{palette.color.greenAccessible}"
2958
3024
  }
2959
3025
  },
2960
3026
  {
2961
3027
  "if": {
2962
- "size": "h1"
3028
+ "hover": true,
3029
+ "selected": true
2963
3030
  },
2964
3031
  "tokens": {
2965
- "fontSize": "{palette.fontSize.size28}",
2966
- "lineHeight": "{palette.lineHeight.ratio9to7}",
2967
- "letterSpacing": "{palette.letterSpacing.loose}"
3032
+ "backgroundColor": "{palette.color.greenSanFelix}",
3033
+ "iconColor": "{palette.color.greenSanFelix}"
2968
3034
  }
2969
3035
  },
2970
3036
  {
2971
3037
  "if": {
2972
- "size": "h1",
2973
- "viewport": ["lg", "xl"]
3038
+ "pressed": true,
3039
+ "selected": true
2974
3040
  },
2975
3041
  "tokens": {
2976
- "fontSize": "{palette.fontSize.size40}",
2977
- "fontWeight": "{palette.fontWeight.weight300}",
2978
- "fontName": "{palette.fontName.HelveticaNow}",
2979
- "lineHeight": "{palette.lineHeight.ratio6to5}",
2980
- "letterSpacing": "{palette.letterSpacing.medium}"
3042
+ "backgroundColor": "{palette.color.greenDarkFern}",
3043
+ "iconColor": "{palette.color.greenDarkFern}"
2981
3044
  }
2982
3045
  },
2983
3046
  {
2984
3047
  "if": {
2985
- "size": "h2"
3048
+ "focus": true,
3049
+ "selected": true
2986
3050
  },
2987
3051
  "tokens": {
2988
- "fontSize": "{palette.fontSize.size24}",
2989
- "fontWeight": "{palette.fontWeight.weight500}",
2990
- "fontName": "{palette.fontName.HelveticaNow}",
2991
- "lineHeight": "{palette.lineHeight.ratio4to3}"
3052
+ "outerBorderColor": "{palette.color.greenAccessible}"
2992
3053
  }
2993
3054
  },
2994
3055
  {
2995
3056
  "if": {
2996
- "size": "h2",
2997
- "viewport": ["lg", "xl"]
3057
+ "focus": true,
3058
+ "pressed": true,
3059
+ "selected": true
2998
3060
  },
2999
3061
  "tokens": {
3000
- "fontSize": "{palette.fontSize.size28}",
3001
- "lineHeight": "{palette.lineHeight.ratio9to7}",
3002
- "letterSpacing": "{palette.letterSpacing.loose}"
3062
+ "outerBorderColor": "{palette.color.greenDarkFern}"
3003
3063
  }
3004
3064
  },
3005
3065
  {
3006
3066
  "if": {
3007
- "size": "h3"
3067
+ "inactive": true
3008
3068
  },
3009
3069
  "tokens": {
3010
- "fontSize": "{palette.fontSize.size20}",
3011
- "fontWeight": "{palette.fontWeight.weight500}",
3012
- "fontName": "{palette.fontName.HelveticaNow}",
3013
- "lineHeight": "{palette.lineHeight.ratio7to5}"
3070
+ "backgroundColor": "{palette.color.greyCloud}",
3071
+ "iconColor": "{palette.color.greyShuttle}",
3072
+ "outerBorderColor": "{palette.color.greyCloud}"
3014
3073
  }
3015
- },
3074
+ }
3075
+ ],
3076
+ "tokens": {
3077
+ "alignSelf": "{system.flexAlign.flexStart}",
3078
+ "backgroundColor": "{palette.color.greyShuttle}",
3079
+ "borderColor": "{palette.color.transparent}",
3080
+ "borderRadius": "{palette.radius.pill32}",
3081
+ "borderWidth": "{palette.border.none}",
3082
+ "icon": "{system.icon.none}",
3083
+ "iconColor": "{palette.color.greyShuttle}",
3084
+ "iconSize": "{palette.size.size12}",
3085
+ "opacity": "{system.opacity.opaque}",
3086
+ "outerBackgroundColor": "{palette.color.transparent}",
3087
+ "outerBorderColor": "{palette.color.transparent}",
3088
+ "outerBorderGap": "{palette.size.size0}",
3089
+ "outerBorderWidth": "{palette.border.none}",
3090
+ "paddingBottom": "{system.size.zero}",
3091
+ "paddingLeft": "{system.size.zero}",
3092
+ "paddingRight": "{system.size.zero}",
3093
+ "paddingTop": "{system.size.zero}",
3094
+ "shadow": "{palette.shadow.surfaceInset}",
3095
+ "switchBorderColor": "{palette.color.transparent}",
3096
+ "switchBorderRadius": "{palette.radius.pill32}",
3097
+ "switchBorderWidth": "{palette.border.none}",
3098
+ "switchColor": "{palette.color.white}",
3099
+ "switchShadow": "{palette.shadow.surfaceRaised}",
3100
+ "switchSize": "{palette.size.size16}",
3101
+ "trackBorderColor": "{palette.color.transparent}",
3102
+ "trackBorderRadius": "{palette.radius.pill32}",
3103
+ "trackBorderWidth": "{palette.border.border3}",
3104
+ "width": "{palette.size.size40}"
3105
+ }
3106
+ },
3107
+ "Tooltip": {
3108
+ "appearances": {
3109
+ "inverse": {
3110
+ "type": "variant",
3111
+ "values": [true]
3112
+ }
3113
+ },
3114
+ "rules": [
3016
3115
  {
3017
3116
  "if": {
3018
- "size": "h3",
3019
- "viewport": ["lg", "xl"]
3117
+ "inverse": true
3020
3118
  },
3021
3119
  "tokens": {
3022
- "fontSize": "{palette.fontSize.size24}",
3023
- "lineHeight": "{palette.lineHeight.ratio4to3}"
3120
+ "backgroundColor": "{palette.color.white}",
3121
+ "color": "{palette.color.greyCharcoal}"
3024
3122
  }
3123
+ }
3124
+ ],
3125
+ "tokens": {
3126
+ "arrowBorderRadius": "{palette.radius.radius1}",
3127
+ "arrowOffset": "{palette.size.size4}",
3128
+ "arrowWidth": "{palette.size.size16}",
3129
+ "backgroundColor": "{palette.color.greyThunder}",
3130
+ "borderRadius": "{palette.radius.radius8}",
3131
+ "color": "{palette.color.white}",
3132
+ "fontName": "{palette.fontName.HelveticaNow}",
3133
+ "fontSize": "{palette.fontSize.size14}",
3134
+ "fontWeight": "{palette.fontWeight.weight400}",
3135
+ "lineHeight": "{palette.lineHeight.ratio3to2}",
3136
+ "paddingBottom": "{palette.size.size8}",
3137
+ "paddingLeft": "{palette.size.size16}",
3138
+ "paddingRight": "{palette.size.size16}",
3139
+ "paddingTop": "{palette.size.size8}",
3140
+ "shadow": "{palette.shadow.elevation1}"
3141
+ }
3142
+ },
3143
+ "TooltipButton": {
3144
+ "appearances": {
3145
+ "focus": "{appearances.TooltipButton.focus}",
3146
+ "hover": "{appearances.TooltipButton.hover}",
3147
+ "inverse": {
3148
+ "type": "variant",
3149
+ "values": [true]
3025
3150
  },
3151
+ "pressed": "{appearances.TooltipButton.pressed}"
3152
+ },
3153
+ "rules": [
3026
3154
  {
3027
3155
  "if": {
3028
- "size": "h4"
3156
+ "inverse": true
3029
3157
  },
3030
3158
  "tokens": {
3031
- "fontSize": "{palette.fontSize.size16}",
3032
- "fontWeight": "{palette.fontWeight.weight500}",
3033
- "fontName": "{palette.fontName.HelveticaNow}",
3034
- "lineHeight": "{palette.lineHeight.ratio3to2}"
3159
+ "iconColor": "{palette.color.white}"
3035
3160
  }
3036
3161
  },
3037
3162
  {
3038
3163
  "if": {
3039
- "size": "h5"
3164
+ "hover": true
3040
3165
  },
3041
3166
  "tokens": {
3042
- "fontSize": "{palette.fontSize.size14}",
3043
- "fontWeight": "{palette.fontWeight.weight500}",
3044
- "fontName": "{palette.fontName.HelveticaNow}",
3045
- "lineHeight": "{palette.lineHeight.ratio9to7}"
3167
+ "iconScale": "{system.iconScale.scale1_25}"
3046
3168
  }
3047
3169
  },
3048
3170
  {
3049
3171
  "if": {
3050
- "size": "h6"
3172
+ "pressed": true
3051
3173
  },
3052
3174
  "tokens": {
3053
- "fontSize": "{palette.fontSize.size12}",
3054
- "fontWeight": "{palette.fontWeight.weight700}",
3055
- "fontName": "{palette.fontName.HelveticaNow}",
3056
- "lineHeight": "{palette.lineHeight.ratio4to3}"
3175
+ "iconColor": "{palette.color.greyShuttle}"
3057
3176
  }
3058
3177
  },
3059
3178
  {
3060
3179
  "if": {
3061
- "size": "large"
3180
+ "inverse": true,
3181
+ "pressed": true
3062
3182
  },
3063
3183
  "tokens": {
3064
- "fontSize": "{palette.fontSize.size20}",
3065
- "lineHeight": "{palette.lineHeight.ratio8to5}"
3184
+ "iconColor": "{palette.color.greyCloud}"
3066
3185
  }
3067
3186
  },
3068
3187
  {
3069
3188
  "if": {
3070
- "size": "large",
3071
- "compact": true
3189
+ "focus": true
3072
3190
  },
3073
3191
  "tokens": {
3074
- "lineHeight": "{palette.lineHeight.ratio6to5}"
3192
+ "outerBorderColor": "{palette.color.greyShuttle}"
3075
3193
  }
3076
3194
  },
3077
3195
  {
3078
3196
  "if": {
3079
- "size": null,
3080
- "compact": true
3197
+ "focus": true,
3198
+ "inverse": true
3081
3199
  },
3082
- "description": "The compact line height for the 'default' font size, but doesn't apply for any other styles",
3083
3200
  "tokens": {
3084
- "lineHeight": "{palette.lineHeight.ratio5to4}"
3201
+ "outerBorderColor": "{palette.color.greyCloud}"
3085
3202
  }
3203
+ }
3204
+ ],
3205
+ "tokens": {
3206
+ "borderRadius": "{palette.radius.pill32}",
3207
+ "icon": "{palette.icon.Question}",
3208
+ "iconColor": "{palette.color.greyThunder}",
3209
+ "iconScale": "{system.iconScale.scale1}",
3210
+ "iconSize": "{palette.size.size16}",
3211
+ "outerBorderColor": "{palette.color.transparent}",
3212
+ "outerBorderGap": "{palette.size.size4}",
3213
+ "outerBorderWidth": "{palette.border.border1}",
3214
+ "width": "{palette.size.size16}"
3215
+ }
3216
+ },
3217
+ "Typography": {
3218
+ "appearances": {
3219
+ "bold": {
3220
+ "description": "Sets the font weight, to bold on some body text styles. Does not change accessibility properties.",
3221
+ "type": "variant",
3222
+ "values": [true]
3223
+ },
3224
+ "colour": {
3225
+ "description": "Each typography variant has a default color, and at least a secondary color variant. In exceptional cases where a different colour is needed,\n use the tokens prop.",
3226
+ "type": "variant",
3227
+ "values": ["secondary", "tertiary"]
3228
+ },
3229
+ "compact": {
3230
+ "description": "Reduces line height on some body text styles. For data-rich content, not for flow content",
3231
+ "type": "variant",
3232
+ "values": [true]
3233
+ },
3234
+ "inverse": {
3235
+ "description": "Styles the link white for use on dark backgrounds.",
3236
+ "type": "variant",
3237
+ "values": [true]
3238
+ },
3239
+ "size": {
3240
+ "description": "Styles text as body or heading text with a given size. Smaller numbers indicate larger sizes,\n\"display\" headings are larger than \"h\" headings. Default is medium size body text. Does not change\naccessibility or SEO-related properties; use the heading prop if text should be treated semantically as a heading.",
3241
+ "type": "variant",
3242
+ "values": [
3243
+ "micro",
3244
+ "small",
3245
+ "large",
3246
+ "eyebrow",
3247
+ "h1",
3248
+ "h2",
3249
+ "h3",
3250
+ "h4",
3251
+ "h5",
3252
+ "h6",
3253
+ "display1",
3254
+ "display2"
3255
+ ]
3086
3256
  },
3257
+ "viewport": "{appearances.system.viewport}"
3258
+ },
3259
+ "rules": [
3087
3260
  {
3088
3261
  "if": {
3089
- "size": "small"
3262
+ "colour": "secondary"
3090
3263
  },
3091
3264
  "tokens": {
3092
- "fontSize": "{palette.fontSize.size14}",
3093
- "lineHeight": "{palette.lineHeight.ratio10to7}"
3265
+ "color": "{palette.color.greyCharcoal}"
3094
3266
  }
3095
3267
  },
3096
3268
  {
3097
3269
  "if": {
3098
- "size": "small",
3099
- "compact": true
3270
+ "size": ["display1", "display2", "h1", "h2", "h3"]
3100
3271
  },
3101
3272
  "tokens": {
3102
- "lineHeight": "{palette.lineHeight.ratio8to7}"
3273
+ "color": "{palette.color.purpleTelus}"
3103
3274
  }
3104
3275
  },
3105
3276
  {
3106
3277
  "if": {
3107
- "size": "micro"
3278
+ "colour": "secondary",
3279
+ "size": ["display1", "display2", "h1", "h2", "h3"]
3108
3280
  },
3109
3281
  "tokens": {
3110
- "fontSize": "{palette.fontSize.size12}",
3111
- "fontWeight": "{palette.fontWeight.weight500}",
3112
- "fontName": "{palette.fontName.HelveticaNow}",
3113
- "lineHeight": "{palette.lineHeight.ratio4to3}"
3282
+ "color": "{palette.color.greyThunder}"
3114
3283
  }
3115
3284
  },
3116
3285
  {
3117
3286
  "if": {
3118
- "size": "eyebrow"
3287
+ "colour": "tertiary",
3288
+ "size": "h6"
3119
3289
  },
3120
3290
  "tokens": {
3121
- "fontSize": "{palette.fontSize.size14}",
3122
- "fontWeight": "{palette.fontWeight.weight700}",
3123
- "fontName": "{palette.fontName.HelveticaNow}",
3124
- "textTransform": "{system.textTransform.uppercase}",
3125
- "lineHeight": "{palette.lineHeight.ratio9to7}"
3291
+ "color": "{palette.color.greyShuttle}"
3126
3292
  }
3127
3293
  },
3128
3294
  {
3129
3295
  "if": {
3130
- "size": ["large", null, "small", "micro"],
3131
- "bold": true
3296
+ "size": "eyebrow"
3132
3297
  },
3133
- "description": "Bold is only available on body text styles, not headings",
3134
3298
  "tokens": {
3135
- "fontWeight": "{palette.fontWeight.weight700}",
3136
- "fontName": "{palette.fontName.HelveticaNow}"
3299
+ "color": "{palette.color.greyCharcoal}"
3137
3300
  }
3138
- }
3139
- ]
3140
- },
3141
- "Select": {
3142
- "appearances": {
3143
- "validation": "{appearances.Select.validation}",
3144
- "hover": "{appearances.Select.hover}",
3145
- "focus": "{appearances.Select.focus}",
3146
- "inactive": "{appearances.Select.inactive}"
3147
- },
3148
- "tokens": {
3149
- "backgroundColor": "{palette.color.white}",
3150
- "color": "{palette.color.greyCharcoal}",
3151
- "borderWidth": "{palette.border.border1}",
3152
- "borderColor": "{palette.color.greyShuttle}",
3153
- "borderRadius": "{palette.radius.radius4}",
3154
- "paddingTop": "{palette.size.size12}",
3155
- "paddingBottom": "{palette.size.size12}",
3156
- "paddingLeft": "{palette.size.size16}",
3157
- "paddingRight": "{palette.size.size16}",
3158
- "height": "{palette.size.size48}",
3159
- "outerBackgroundColor": "{palette.color.transparent}",
3160
- "outerBorderWidth": "{palette.border.border2}",
3161
- "outerBorderColor": "{palette.color.transparent}",
3162
- "fontSize": "{palette.fontSize.size16}",
3163
- "fontName": "{palette.fontName.HelveticaNow}",
3164
- "fontWeight": "{palette.fontWeight.weight400}",
3165
- "icon": "{palette.icon.CaretDown}",
3166
- "iconSize": "{palette.fontSize.size24}",
3167
- "iconColor": "{palette.color.greenAccessible}",
3168
- "validationIcon": "{system.icon.none}",
3169
- "validationIconSize": "{palette.fontSize.size24}",
3170
- "validationIconColor": "{palette.color.transparent}"
3171
- },
3172
- "rules": [
3301
+ },
3173
3302
  {
3174
3303
  "if": {
3175
- "hover": true,
3176
- "inactive": null
3304
+ "colour": "secondary",
3305
+ "size": "eyebrow"
3177
3306
  },
3178
3307
  "tokens": {
3179
- "outerBorderColor": "{palette.color.greyMystic}",
3180
- "outerBackgroundColor": "{palette.color.greyMystic}"
3308
+ "color": "{palette.color.purpleTelus}"
3181
3309
  }
3182
3310
  },
3183
3311
  {
3184
3312
  "if": {
3185
- "validation": "success"
3313
+ "inverse": true
3186
3314
  },
3187
3315
  "tokens": {
3188
- "borderColor": "{palette.color.greenAccessible}",
3189
- "validationIcon": "{palette.icon.StatusSuccess}",
3190
- "validationIconColor": "{palette.color.greenAccessible}"
3316
+ "color": "{palette.color.white}"
3191
3317
  }
3192
3318
  },
3193
3319
  {
3194
3320
  "if": {
3195
- "validation": "error"
3321
+ "size": "display1"
3196
3322
  },
3197
3323
  "tokens": {
3198
- "borderColor": "{palette.color.red}",
3199
- "validationIcon": "{palette.icon.StatusError}",
3200
- "validationIconColor": "{palette.color.red}"
3324
+ "fontName": "{palette.fontName.HelveticaNow}",
3325
+ "fontSize": "{palette.fontSize.size40}",
3326
+ "fontWeight": "{palette.fontWeight.weight300}",
3327
+ "letterSpacing": "{palette.letterSpacing.medium}",
3328
+ "lineHeight": "{palette.lineHeight.ratio6to5}"
3201
3329
  }
3202
3330
  },
3203
3331
  {
3204
3332
  "if": {
3205
- "focus": true
3333
+ "size": "display1",
3334
+ "viewport": ["lg", "xl"]
3206
3335
  },
3207
3336
  "tokens": {
3208
- "borderColor": "{palette.color.purpleDeluge}",
3209
- "borderWidth": "{palette.border.border3}",
3210
- "validationIcon": "{system.icon.none}"
3337
+ "fontSize": "{palette.fontSize.size64}",
3338
+ "lineHeight": "{palette.lineHeight.ratio9to8}"
3211
3339
  }
3212
3340
  },
3213
3341
  {
3214
3342
  "if": {
3215
- "inactive": true
3343
+ "size": "display2"
3216
3344
  },
3217
3345
  "tokens": {
3218
- "backgroundColor": "{palette.color.greyAthens}",
3219
- "borderColor": "{palette.color.greyAthens}"
3220
- }
3221
- }
3222
- ]
3223
- },
3224
- "SideNav": {
3225
- "appearances": {},
3226
- "tokens": {
3227
- "borderColor": "{palette.color.greyCloud}",
3228
- "borderWidth": "{palette.border.border1}",
3229
- "borderStyle": "{system.borderStyle.solid}"
3230
- },
3231
- "rules": []
3232
- },
3233
- "SideNavItem": {
3234
- "appearances": {
3235
- "active": "{appearances.SideNavItem.active}",
3236
- "type": "{appearances.SideNavItem.type}",
3237
- "expanded": "{appearances.SideNavItem.expanded}",
3238
- "hover": "{appearances.SideNavItem.hover}"
3239
- },
3240
- "tokens": {
3241
- "borderColor": "{palette.color.greyCloud}",
3242
- "borderWidth": "{palette.border.border1}",
3243
- "borderStyle": "{system.borderStyle.solid}",
3244
- "paddingLeft": "{palette.size.size16}",
3245
- "paddingRight": "{palette.size.size16}",
3246
- "paddingTop": "{palette.size.size16}",
3247
- "paddingBottom": "{palette.size.size16}",
3248
- "justifyContent": "{system.flexJustifyContent.spaceBetween}",
3249
- "color": "{palette.color.greyCharcoal}",
3250
- "accentOffset": "{system.size.zero}",
3251
- "accentPadding": "{system.size.zero}",
3252
- "accentWidth": "{palette.size.size4}",
3253
- "accentBackgroundColor": "{palette.color.transparent}",
3254
- "fontSize": "{palette.fontSize.size16}",
3255
- "fontWeight": "{palette.fontWeight.weight400}",
3256
- "fontName": "{palette.fontName.HelveticaNow}",
3257
- "lineHeight": "{palette.lineHeight.ratio3to2}",
3258
- "backgroundColor": "{palette.color.transparent}"
3259
- },
3260
- "rules": [
3346
+ "fontName": "{palette.fontName.HelveticaNow}",
3347
+ "fontSize": "{palette.fontSize.size36}",
3348
+ "fontWeight": "{palette.fontWeight.weight400}",
3349
+ "letterSpacing": "{palette.letterSpacing.medium}",
3350
+ "lineHeight": "{palette.lineHeight.ratio11to9}"
3351
+ }
3352
+ },
3261
3353
  {
3262
3354
  "if": {
3263
- "active": true
3355
+ "size": "display2",
3356
+ "viewport": ["lg", "xl"]
3264
3357
  },
3265
3358
  "tokens": {
3266
- "paddingLeft": "{palette.size.size12}",
3267
- "accentBackgroundColor": "{palette.color.purpleTelus}",
3268
- "color": "{palette.color.purpleTelus}",
3269
- "fontWeight": "{palette.fontWeight.weight700}",
3270
- "fontName": "{palette.fontName.HelveticaNow}"
3359
+ "fontName": "{palette.fontName.HelveticaNow}",
3360
+ "fontSize": "{palette.fontSize.size56}",
3361
+ "fontWeight": "{palette.fontWeight.weight300}",
3362
+ "letterSpacing": "{palette.letterSpacing.condensed}",
3363
+ "lineHeight": "{palette.lineHeight.ratio8to7}"
3271
3364
  }
3272
3365
  },
3273
3366
  {
3274
3367
  "if": {
3275
- "type": "child"
3368
+ "size": "h1"
3276
3369
  },
3277
3370
  "tokens": {
3278
- "paddingLeft": "{palette.size.size36}",
3279
- "borderWidth": "{palette.border.none}",
3280
- "accentBackgroundColor": "{palette.color.greyAthens}",
3281
- "accentOffset": "{palette.size.size16}",
3282
- "fontSize": "{palette.fontSize.size14}",
3283
- "lineHeight": "{palette.lineHeight.ratio7to5}"
3371
+ "fontSize": "{palette.fontSize.size28}",
3372
+ "letterSpacing": "{palette.letterSpacing.loose}",
3373
+ "lineHeight": "{palette.lineHeight.ratio9to7}"
3284
3374
  }
3285
3375
  },
3286
3376
  {
3287
3377
  "if": {
3288
- "type": "parent",
3289
- "active": true
3378
+ "size": "h1",
3379
+ "viewport": ["lg", "xl"]
3290
3380
  },
3291
3381
  "tokens": {
3292
- "paddingLeft": "{palette.size.size12}"
3382
+ "fontName": "{palette.fontName.HelveticaNow}",
3383
+ "fontSize": "{palette.fontSize.size40}",
3384
+ "fontWeight": "{palette.fontWeight.weight300}",
3385
+ "letterSpacing": "{palette.letterSpacing.medium}",
3386
+ "lineHeight": "{palette.lineHeight.ratio6to5}"
3293
3387
  }
3294
3388
  },
3295
3389
  {
3296
3390
  "if": {
3297
- "type": "parent",
3298
- "active": true,
3299
- "expanded": true
3391
+ "size": "h2"
3300
3392
  },
3301
3393
  "tokens": {
3302
- "paddingLeft": "{palette.size.size16}",
3303
- "accentBackgroundColor": "{palette.color.transparent}",
3304
- "color": "{palette.color.greyCharcoal}"
3394
+ "fontName": "{palette.fontName.HelveticaNow}",
3395
+ "fontSize": "{palette.fontSize.size24}",
3396
+ "fontWeight": "{palette.fontWeight.weight500}",
3397
+ "lineHeight": "{palette.lineHeight.ratio4to3}"
3305
3398
  }
3306
3399
  },
3307
3400
  {
3308
3401
  "if": {
3309
- "hover": true
3402
+ "size": "h2",
3403
+ "viewport": ["lg", "xl"]
3310
3404
  },
3311
3405
  "tokens": {
3312
- "backgroundColor": "{palette.color.greyAthens}",
3313
- "color": "{palette.color.purpleTelus}"
3406
+ "fontSize": "{palette.fontSize.size28}",
3407
+ "letterSpacing": "{palette.letterSpacing.loose}",
3408
+ "lineHeight": "{palette.lineHeight.ratio9to7}"
3314
3409
  }
3315
3410
  },
3316
3411
  {
3317
3412
  "if": {
3318
- "type": "child",
3319
- "active": true
3413
+ "size": "h3"
3320
3414
  },
3321
3415
  "tokens": {
3322
- "backgroundColor": "{palette.color.greyAthens}",
3323
- "color": "{palette.color.purpleTelus}",
3324
- "accentPadding": "{palette.size.size16}",
3325
- "accentBackgroundColor": "{palette.color.purpleTelus}"
3416
+ "fontName": "{palette.fontName.HelveticaNow}",
3417
+ "fontSize": "{palette.fontSize.size20}",
3418
+ "fontWeight": "{palette.fontWeight.weight500}",
3419
+ "lineHeight": "{palette.lineHeight.ratio7to5}"
3326
3420
  }
3327
3421
  },
3328
3422
  {
3329
3423
  "if": {
3330
- "type": "child",
3331
- "active": false,
3332
- "hover": true
3424
+ "size": "h3",
3425
+ "viewport": ["lg", "xl"]
3333
3426
  },
3334
3427
  "tokens": {
3335
- "accentBackgroundColor": "{palette.color.white}",
3336
- "color": "{palette.color.greyCharcoal}",
3337
- "accentOffset": "{system.size.zero}",
3338
- "accentWidth": "{palette.size.size16}"
3428
+ "fontSize": "{palette.fontSize.size24}",
3429
+ "lineHeight": "{palette.lineHeight.ratio4to3}"
3339
3430
  }
3340
- }
3341
- ]
3342
- },
3343
- "SideNavItemsGroup": {
3344
- "appearances": {
3345
- "expanded": "{appearances.SideNavItemGroup.expanded}"
3346
- },
3347
- "tokens": {
3348
- "expandDuration": "{palette.duration.duration300}",
3349
- "collapseDuration": "{palette.duration.duration250}",
3350
- "contentPaddingLeft": "{palette.size.size0}",
3351
- "contentPaddingRight": "{palette.size.size0}",
3352
- "contentPaddingTop": "{palette.size.size0}",
3353
- "contentPaddingBottom": "{palette.size.size0}",
3354
- "icon": "{palette.icon.CaretDown}",
3355
- "iconColor": "{palette.color.purpleTelus}",
3356
- "iconGap": "{palette.size.size8}",
3357
- "iconSize": "{palette.size.size24}",
3358
- "iconPosition": "{system.position.right}",
3359
- "verticalAlign": "{system.verticalAlign.middle}",
3360
- "justifyContent": "{system.flexJustifyContent.spaceBetween}"
3361
- },
3362
- "rules": [
3431
+ },
3363
3432
  {
3364
3433
  "if": {
3365
- "expanded": true
3434
+ "size": "h4"
3366
3435
  },
3367
3436
  "tokens": {
3368
- "icon": "{palette.icon.CaretUp}"
3437
+ "fontName": "{palette.fontName.HelveticaNow}",
3438
+ "fontSize": "{palette.fontSize.size16}",
3439
+ "fontWeight": "{palette.fontWeight.weight500}",
3440
+ "lineHeight": "{palette.lineHeight.ratio3to2}"
3369
3441
  }
3370
- }
3371
- ]
3372
- },
3373
- "Skeleton": {
3374
- "appearances": {},
3375
- "tokens": {
3376
- "color": "{palette.color.greyCloud}",
3377
- "size": "{palette.border.border3}",
3378
- "radius": "{palette.size.size120}",
3379
- "baseWidth": "{palette.size.size40}",
3380
- "characters": "{palette.size.size10}",
3381
- "spaceBetweenLines": "{palette.size.size2}",
3382
- "squareRadius": "{palette.size.size4}"
3383
- },
3384
- "rules": []
3385
- },
3386
- "StackView": {
3387
- "appearances": {},
3388
- "tokens": {
3389
- "alignItems": "{system.flexAlign.stretch}",
3390
- "justifyContent": "{system.flexJustifyContent.flexStart}",
3391
- "flexGrow": "{system.integer.0}",
3392
- "flexShrink": "{system.integer.0}"
3393
- },
3394
- "rules": []
3395
- },
3396
- "Tags": {
3397
- "appearances": {
3398
- "viewport": "{appearances.system.viewport}"
3399
- },
3400
- "tokens": {
3401
- "space": "{system.integer.1}",
3402
- "direction": "{system.direction.row}",
3403
- "alignItems": "{system.flexAlign.center}",
3404
- "justifyContent": "{system.flexJustifyContent.flexStart}",
3405
- "flexGrow": "{system.integer.0}",
3406
- "flexShrink": "{system.integer.0}"
3407
- },
3408
- "rules": [
3442
+ },
3409
3443
  {
3410
3444
  "if": {
3411
- "viewport": ["lg", "xl"]
3445
+ "size": "h5"
3412
3446
  },
3413
3447
  "tokens": {
3414
- "space": "{system.integer.3}"
3448
+ "fontName": "{palette.fontName.HelveticaNow}",
3449
+ "fontSize": "{palette.fontSize.size14}",
3450
+ "fontWeight": "{palette.fontWeight.weight500}",
3451
+ "lineHeight": "{palette.lineHeight.ratio9to7}"
3415
3452
  }
3416
- }
3417
- ]
3418
- },
3419
- "TagsItem": {
3420
- "appearances": {
3421
- "hover": "{appearances.TagsItem.hover}",
3422
- "focus": "{appearances.TagsItem.focus}",
3423
- "pressed": "{appearances.TagsItem.pressed}",
3424
- "selected": "{appearances.TagsItem.selected}",
3425
- "inactive": "{appearances.TagsItem.inactive}"
3426
- },
3427
- "tokens": {
3428
- "iconSize": "{palette.size.size16}",
3429
- "iconColor": "{palette.color.greyThunder}",
3430
- "iconTranslateX": "{system.integer.0}",
3431
- "iconTranslateY": "{system.integer.0}",
3432
- "icon": "{palette.icon.Add}",
3433
- "iconPosition": "{system.position.right}",
3434
- "iconSpace": "{system.integer.2}",
3435
- "iconBackground": "{palette.color.greyAthens}",
3436
- "iconBorderRadius": "{palette.radius.pill32}",
3437
- "iconAlignSelf": "{system.flexAlign.center}",
3438
- "iconPadding": "{palette.size.size2}",
3439
- "borderColor": "{palette.color.greyCloud}",
3440
- "borderWidth": "{palette.border.border1}",
3441
- "borderRadius": "{palette.radius.pill32}",
3442
- "shadow": "{system.shadow.none}",
3443
- "fontSize": "{palette.fontSize.size14}",
3444
- "color": "{palette.color.greyShuttle}",
3445
- "lineHeight": "{palette.lineHeight.ratio10to7}",
3446
- "textAlign": "{system.flexJustifyContent.center}",
3447
- "alignSelf": "{system.flexAlign.center}",
3448
- "fontName": "{palette.fontName.HelveticaNow}",
3449
- "fontWeight": "{palette.fontWeight.weight700}",
3450
- "backgroundColor": "{palette.color.white}",
3451
- "opacity": "{system.opacity.opaque}",
3452
- "paddingLeft": "{palette.size.size16}",
3453
- "paddingRight": "{palette.size.size8}",
3454
- "paddingTop": "{palette.size.size8}",
3455
- "paddingBottom": "{palette.size.size8}",
3456
- "width": "{system.size.none}",
3457
- "minWidth": "{system.size.zero}",
3458
- "outerBorderColor": "{palette.color.transparent}",
3459
- "outerBorderWidth": "{palette.border.border2}",
3460
- "outerBorderGap": "{palette.border.border2}",
3461
- "outerBackgroundColor": "{palette.color.transparent}"
3462
- },
3463
- "rules": [
3453
+ },
3464
3454
  {
3465
3455
  "if": {
3466
- "pressed": true
3456
+ "size": "h6"
3467
3457
  },
3468
3458
  "tokens": {
3469
- "borderWidth": "{palette.border.none}",
3470
- "backgroundColor": "{palette.color.greyShuttle}",
3471
- "borderColor": "{palette.color.greyShuttle}",
3472
- "color": "{palette.color.white}",
3473
- "iconColor": "{palette.color.white}",
3474
- "iconBackground": "{palette.color.greyCharcoal}"
3459
+ "fontName": "{palette.fontName.HelveticaNow}",
3460
+ "fontSize": "{palette.fontSize.size12}",
3461
+ "fontWeight": "{palette.fontWeight.weight700}",
3462
+ "lineHeight": "{palette.lineHeight.ratio4to3}"
3475
3463
  }
3476
3464
  },
3477
3465
  {
3478
3466
  "if": {
3479
- "focus": true
3467
+ "size": "large"
3480
3468
  },
3481
3469
  "tokens": {
3482
- "borderColor": "{palette.color.greyShuttle}",
3483
- "outerBorderColor": "{palette.color.greyShuttle}",
3484
- "outerBorderGap": "{palette.size.size2}",
3485
- "outerBorderWidth": "{palette.size.size2}"
3470
+ "fontSize": "{palette.fontSize.size20}",
3471
+ "lineHeight": "{palette.lineHeight.ratio8to5}"
3486
3472
  }
3487
3473
  },
3488
3474
  {
3489
3475
  "if": {
3490
- "hover": true
3476
+ "compact": true,
3477
+ "size": "large"
3491
3478
  },
3492
3479
  "tokens": {
3493
- "borderWidth": "{palette.border.border3}"
3480
+ "lineHeight": "{palette.lineHeight.ratio6to5}"
3494
3481
  }
3495
3482
  },
3496
3483
  {
3484
+ "description": "The compact line height for the 'default' font size, but doesn't apply for any other styles",
3497
3485
  "if": {
3498
- "selected": true
3486
+ "compact": true,
3487
+ "size": null
3499
3488
  },
3500
3489
  "tokens": {
3501
- "borderWidth": "{palette.border.none}",
3502
- "backgroundColor": "{palette.color.purpleTelus}",
3503
- "color": "{palette.color.white}",
3504
- "icon": "{palette.icon.Close}",
3505
- "iconColor": "{palette.color.white}",
3506
- "iconBackground": "{palette.color.purpleDeluge}"
3490
+ "lineHeight": "{palette.lineHeight.ratio5to4}"
3507
3491
  }
3508
3492
  },
3509
3493
  {
3510
3494
  "if": {
3511
- "selected": true,
3512
- "hover": true
3495
+ "size": "small"
3513
3496
  },
3514
3497
  "tokens": {
3515
- "backgroundColor": "{palette.color.purpleDeluge}",
3516
- "iconBackground": "{palette.color.purpleTelus}"
3498
+ "fontSize": "{palette.fontSize.size14}",
3499
+ "lineHeight": "{palette.lineHeight.ratio10to7}"
3517
3500
  }
3518
3501
  },
3519
3502
  {
3520
3503
  "if": {
3521
- "selected": true,
3522
- "pressed": true
3504
+ "compact": true,
3505
+ "size": "small"
3523
3506
  },
3524
3507
  "tokens": {
3525
- "backgroundColor": "{palette.color.purpleDark}",
3526
- "iconBackground": "{palette.color.purpleDeluge}"
3508
+ "lineHeight": "{palette.lineHeight.ratio8to7}"
3527
3509
  }
3528
3510
  },
3529
3511
  {
3530
3512
  "if": {
3531
- "selected": true,
3532
- "focus": true
3513
+ "size": "micro"
3533
3514
  },
3534
3515
  "tokens": {
3535
- "outerBorderColor": "{palette.color.purpleTelus}"
3516
+ "fontName": "{palette.fontName.HelveticaNow}",
3517
+ "fontSize": "{palette.fontSize.size12}",
3518
+ "fontWeight": "{palette.fontWeight.weight500}",
3519
+ "lineHeight": "{palette.lineHeight.ratio4to3}"
3536
3520
  }
3537
3521
  },
3538
3522
  {
3539
3523
  "if": {
3540
- "selected": true,
3541
- "focus": true,
3542
- "pressed": true
3524
+ "size": "eyebrow"
3543
3525
  },
3544
3526
  "tokens": {
3545
- "outerBorderColor": "{palette.color.purpleDark}",
3546
- "iconBackground": "{palette.color.purpleDeluge}"
3527
+ "fontName": "{palette.fontName.HelveticaNow}",
3528
+ "fontSize": "{palette.fontSize.size14}",
3529
+ "fontWeight": "{palette.fontWeight.weight700}",
3530
+ "lineHeight": "{palette.lineHeight.ratio9to7}",
3531
+ "textTransform": "{system.textTransform.uppercase}"
3547
3532
  }
3548
3533
  },
3549
3534
  {
3535
+ "description": "Bold is only available on body text styles, not headings",
3550
3536
  "if": {
3551
- "inactive": true
3537
+ "bold": true,
3538
+ "size": ["large", null, "small", "micro"]
3552
3539
  },
3553
3540
  "tokens": {
3554
- "backgroundColor": "{palette.color.greyCloud}",
3555
- "color": "{palette.color.white}",
3556
- "borderWidth": "{system.border.zero}"
3541
+ "fontName": "{palette.fontName.HelveticaNow}",
3542
+ "fontWeight": "{palette.fontWeight.weight700}"
3557
3543
  }
3558
3544
  }
3559
- ]
3545
+ ],
3546
+ "tokens": {
3547
+ "color": "{palette.color.greyThunder}",
3548
+ "fontName": "{palette.fontName.HelveticaNow}",
3549
+ "fontScaleCap": "{palette.fontSize.size64}",
3550
+ "fontSize": "{palette.fontSize.size16}",
3551
+ "fontWeight": "{palette.fontWeight.weight400}",
3552
+ "letterSpacing": "{system.letterSpacing.none}",
3553
+ "lineHeight": "{palette.lineHeight.ratio3to2}",
3554
+ "textTransform": "{system.textTransform.none}"
3555
+ }
3560
3556
  },
3561
3557
  "spacingScale": {
3562
3558
  "appearances": {
3563
3559
  "space": "{appearances.spacingScale.space}",
3564
3560
  "viewport": "{appearances.system.viewport}"
3565
3561
  },
3566
- "tokens": {
3567
- "size": "{palette.size.size96}"
3568
- },
3569
3562
  "rules": [
3570
3563
  {
3571
3564
  "if": {
@@ -3725,7 +3718,14 @@
3725
3718
  "size": "{palette.size.size0}"
3726
3719
  }
3727
3720
  }
3728
- ]
3721
+ ],
3722
+ "tokens": {
3723
+ "size": "{palette.size.size96}"
3724
+ }
3729
3725
  }
3726
+ },
3727
+ "metadata": {
3728
+ "name": "allium",
3729
+ "package": "@telus-uds/theme-allium"
3730
3730
  }
3731
3731
  }