@telus-uds/theme-allium 1.0.0-prerelease.0 → 2.1.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": {
707
- "appearances": {},
675
+ ],
708
676
  "tokens": {
709
- "space": "{system.integer.2}",
710
- "fieldSpace": "{system.integer.2}"
711
- },
712
- "rules": []
713
- },
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": {
703
+ "appearances": {},
704
+ "rules": [],
705
+ "tokens": {
706
+ "fieldSpace": "{system.integer.2}",
707
+ "space": "{system.integer.2}"
708
+ }
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,32 @@
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
+ "iconMarginTop": "{palette.size.size4}",
1520
+ "interItemMargin": "{palette.size.size8}",
1521
+ "interItemMarginWithDivider": "{palette.size.size16}",
1522
+ "itemBulletColor": "{palette.color.purpleTelus}",
1523
+ "itemBulletContainerAlign": "{system.textAlign.center}",
1524
+ "itemBulletContainerWidth": "{palette.size.size16}",
1525
+ "itemBulletHeight": "{palette.size.size4}",
1526
+ "itemBulletWidth": "{palette.size.size4}",
1527
+ "itemFontName": "{palette.fontName.HelveticaNow}",
1528
+ "itemFontSize": "{palette.fontSize.size16}",
1529
+ "itemFontWeight": "{palette.fontWeight.weight400}",
1530
+ "itemIconColor": "{palette.color.purpleTelus}",
1531
+ "itemIconSize": "{palette.size.size16}",
1532
+ "itemLineHeight": "{palette.lineHeight.ratio3to2}",
1533
+ "listGutter": "{palette.size.size16}"
1534
+ }
1538
1535
  },
1539
1536
  "Modal": {
1540
1537
  "appearances": {
1541
1538
  "maxWidth": "{appearances.Modal.maxWidth}",
1542
1539
  "viewport": "{appearances.system.viewport}"
1543
1540
  },
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
1541
  "rules": [
1565
1542
  {
1566
1543
  "if": {
@@ -1575,54 +1552,48 @@
1575
1552
  "viewport": ["md", "lg", "xl"]
1576
1553
  },
1577
1554
  "tokens": {
1578
- "maxWidth": "{system.integer.576}",
1555
+ "containerPaddingBottom": "{palette.size.size32}",
1579
1556
  "containerPaddingTop": "{palette.size.size32}",
1580
- "containerPaddingBottom": "{palette.size.size32}"
1557
+ "maxWidth": "{system.size.viewportSm}"
1581
1558
  }
1582
1559
  },
1583
1560
  {
1584
1561
  "if": {
1585
- "viewport": ["md", "lg", "xl"],
1586
- "maxWidth": true
1562
+ "maxWidth": true,
1563
+ "viewport": ["md", "lg", "xl"]
1587
1564
  },
1588
1565
  "tokens": {
1589
- "maxWidth": "{system.size.twoThirds}",
1590
1566
  "containerPaddingLeft": "{palette.size.size16}",
1591
- "containerPaddingRight": "{palette.size.size16}"
1567
+ "containerPaddingRight": "{palette.size.size16}",
1568
+ "maxWidth": "{system.size.twoThirds}"
1592
1569
  }
1593
1570
  }
1594
- ]
1571
+ ],
1572
+ "tokens": {
1573
+ "backdropColor": "{palette.color.bgModal}",
1574
+ "backdropOpacity": "{system.opacity.opaque}",
1575
+ "backgroundColor": "{palette.color.white}",
1576
+ "borderRadius": "{palette.radius.radius4}",
1577
+ "closeIcon": "{palette.icon.Close}",
1578
+ "closeIconColor": "{palette.color.greyCharcoal}",
1579
+ "closeIconSize": "{palette.size.size24}",
1580
+ "containerPaddingBottom": "{system.size.zero}",
1581
+ "containerPaddingLeft": "{system.size.zero}",
1582
+ "containerPaddingRight": "{system.size.zero}",
1583
+ "containerPaddingTop": "{system.size.zero}",
1584
+ "height": "{system.size.none}",
1585
+ "maxWidth": "{system.size.full}",
1586
+ "paddingBottom": "{palette.size.size24}",
1587
+ "paddingLeft": "{palette.size.size24}",
1588
+ "paddingRight": "{palette.size.size24}",
1589
+ "paddingTop": "{palette.size.size24}",
1590
+ "shadow": "{palette.shadow.elevation1}"
1591
+ }
1595
1592
  },
1596
1593
  "Notification": {
1597
1594
  "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}"
1595
+ "style": "{appearances.Notification.style}",
1596
+ "system": "{appearances.Notification.system}"
1626
1597
  },
1627
1598
  "rules": [
1628
1599
  {
@@ -1630,15 +1601,15 @@
1630
1601
  "system": true
1631
1602
  },
1632
1603
  "tokens": {
1633
- "borderTopWidth": "{system.border.zero}",
1634
1604
  "borderLeftWidth": "{system.border.zero}",
1635
- "borderRightWidth": "{system.border.zero}",
1636
1605
  "borderRadius": "{system.radius.zero}",
1637
- "paddingTop": "{palette.size.size16}",
1606
+ "borderRightWidth": "{system.border.zero}",
1607
+ "borderTopWidth": "{system.border.zero}",
1608
+ "iconGap": "{palette.size.size12}",
1638
1609
  "paddingBottom": "{palette.size.size16}",
1639
1610
  "paddingLeft": "{palette.size.size16}",
1640
1611
  "paddingRight": "{palette.size.size16}",
1641
- "iconGap": "{palette.size.size12}"
1612
+ "paddingTop": "{palette.size.size16}"
1642
1613
  }
1643
1614
  },
1644
1615
  {
@@ -1659,9 +1630,9 @@
1659
1630
  "tokens": {
1660
1631
  "backgroundColor": "{palette.color.amberLight}",
1661
1632
  "borderColor": "{palette.color.amberDark}",
1633
+ "dismissIcon": "{system.icon.none}",
1662
1634
  "icon": "{palette.icon.StatusWarning}",
1663
- "iconColor": "{palette.color.amberDark}",
1664
- "dismissIcon": "{system.icon.none}"
1635
+ "iconColor": "{palette.color.amberDark}"
1665
1636
  }
1666
1637
  },
1667
1638
  {
@@ -1671,26 +1642,43 @@
1671
1642
  "tokens": {
1672
1643
  "backgroundColor": "{palette.color.redLight}",
1673
1644
  "borderColor": "{palette.color.red}",
1645
+ "dismissIcon": "{system.icon.none}",
1674
1646
  "icon": "{palette.icon.StatusError}",
1675
- "iconColor": "{palette.color.red}",
1676
- "dismissIcon": "{system.icon.none}"
1647
+ "iconColor": "{palette.color.red}"
1677
1648
  }
1678
1649
  }
1679
- ]
1650
+ ],
1651
+ "tokens": {
1652
+ "backgroundColor": "{palette.color.greyAthens}",
1653
+ "borderBottomWidth": "{palette.border.border1}",
1654
+ "borderColor": "{palette.color.greyShuttle}",
1655
+ "borderLeftWidth": "{palette.border.border1}",
1656
+ "borderRadius": "{palette.radius.radius6}",
1657
+ "borderRightWidth": "{palette.border.border1}",
1658
+ "borderTopWidth": "{palette.border.border1}",
1659
+ "color": "{palette.color.greyCharcoal}",
1660
+ "dismissButtonGap": "{palette.size.size16}",
1661
+ "dismissIcon": "{palette.icon.Close}",
1662
+ "dismissIconColor": "{palette.color.greyCharcoal}",
1663
+ "dismissIconSize": "{palette.size.size24}",
1664
+ "fontName": "{palette.fontName.HelveticaNow}",
1665
+ "fontSize": "{palette.fontSize.size16}",
1666
+ "fontWeight": "{palette.fontWeight.weight400}",
1667
+ "icon": "{system.icon.none}",
1668
+ "iconColor": "{system.color.none}",
1669
+ "iconGap": "{palette.size.size16}",
1670
+ "iconSize": "{palette.size.size24}",
1671
+ "lineHeight": "{palette.lineHeight.ratio3to2}",
1672
+ "paddingBottom": "{palette.size.size12}",
1673
+ "paddingLeft": "{palette.size.size12}",
1674
+ "paddingRight": "{palette.size.size12}",
1675
+ "paddingTop": "{palette.size.size12}"
1676
+ }
1680
1677
  },
1681
1678
  "Pagination": {
1682
1679
  "appearances": {
1683
1680
  "viewport": "{appearances.system.viewport}"
1684
1681
  },
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
1682
  "rules": [
1695
1683
  {
1696
1684
  "if": {
@@ -1700,7 +1688,16 @@
1700
1688
  "truncateAbove": "{system.integer.6}"
1701
1689
  }
1702
1690
  }
1703
- ]
1691
+ ],
1692
+ "tokens": {
1693
+ "color": "{palette.color.greyShuttle}",
1694
+ "fontName": "{palette.fontName.HelveticaNow}",
1695
+ "fontSize": "{palette.fontSize.size16}",
1696
+ "fontWeight": "{palette.fontWeight.weight400}",
1697
+ "gap": "{palette.size.size2}",
1698
+ "lineHeight": "{palette.lineHeight.ratio3to2}",
1699
+ "truncateAbove": "{system.integer.4}"
1700
+ }
1704
1701
  },
1705
1702
  "PaginationPageButton": {
1706
1703
  "appearances": {
@@ -1709,27 +1706,6 @@
1709
1706
  "pressed": "{appearances.PaginationPageButton.pressed}",
1710
1707
  "selected": "{appearances.PaginationPageButton.selected}"
1711
1708
  },
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
1709
  "rules": [
1734
1710
  {
1735
1711
  "if": {
@@ -1768,48 +1744,47 @@
1768
1744
  "color": "{palette.color.white}"
1769
1745
  }
1770
1746
  }
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
- },
1747
+ ],
1782
1748
  "tokens": {
1749
+ "backgroundColor": "{palette.color.transparent}",
1783
1750
  "borderColor": "{palette.color.transparent}",
1751
+ "borderRadius": "{palette.radius.pill32}",
1784
1752
  "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
1753
  "color": "{palette.color.greyShuttle}",
1793
1754
  "fontName": "{palette.fontName.HelveticaNow}",
1794
- "fontWeight": "{palette.fontWeight.weight400}",
1795
1755
  "fontSize": "{palette.fontSize.size16}",
1756
+ "fontWeight": "{palette.fontWeight.weight400}",
1796
1757
  "lineHeight": "{palette.lineHeight.ratio3to2}",
1758
+ "outerBorderColor": "{palette.color.transparent}",
1759
+ "outerBorderGap": "{palette.size.size4}",
1760
+ "outerBorderWidth": "{palette.border.border4}",
1761
+ "paddingBottom": "{palette.size.size4}",
1762
+ "paddingLeft": "{palette.size.size8}",
1763
+ "paddingRight": "{palette.size.size8}",
1764
+ "paddingTop": "{palette.size.size4}",
1765
+ "textAlign": "{system.flexJustifyContent.center}",
1797
1766
  "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"]
1808
- },
1809
- "tokens": {
1767
+ "width": "{palette.size.size32}"
1768
+ }
1769
+ },
1770
+ "PaginationSideButton": {
1771
+ "appearances": {
1772
+ "direction": "{appearances.PaginationSideButton.direction}",
1773
+ "focus": "{appearances.PaginationSideButton.focus}",
1774
+ "hover": "{appearances.PaginationSideButton.hover}",
1775
+ "pressed": "{appearances.PaginationSideButton.pressed}",
1776
+ "selected": "{appearances.PaginationSideButton.selected}",
1777
+ "viewport": "{appearances.system.viewport}"
1778
+ },
1779
+ "rules": [
1780
+ {
1781
+ "if": {
1782
+ "viewport": ["xs", "sm"]
1783
+ },
1784
+ "tokens": {
1810
1785
  "borderRadius": "{palette.radius.pill32}",
1811
- "paddingTop": "{palette.size.size4}",
1812
1786
  "paddingBottom": "{palette.size.size4}",
1787
+ "paddingTop": "{palette.size.size4}",
1813
1788
  "width": "{palette.size.size32}"
1814
1789
  }
1815
1790
  },
@@ -1819,8 +1794,8 @@
1819
1794
  },
1820
1795
  "tokens": {
1821
1796
  "borderColor": "{palette.color.greyShuttle}",
1822
- "textLine": "{system.textLine.none}",
1823
- "iconDisplace": "{palette.size.size4}"
1797
+ "iconDisplace": "{palette.size.size4}",
1798
+ "textLine": "{system.textLine.none}"
1824
1799
  }
1825
1800
  },
1826
1801
  {
@@ -1867,22 +1842,37 @@
1867
1842
  "icon": "{palette.icon.ArrowRight}"
1868
1843
  }
1869
1844
  }
1870
- ]
1845
+ ],
1846
+ "tokens": {
1847
+ "backgroundColor": "{palette.color.transparent}",
1848
+ "borderColor": "{palette.color.transparent}",
1849
+ "borderRadius": "{palette.radius.radius4}",
1850
+ "borderWidth": "{palette.border.border1}",
1851
+ "color": "{palette.color.greyShuttle}",
1852
+ "fontName": "{palette.fontName.HelveticaNow}",
1853
+ "fontSize": "{palette.fontSize.size16}",
1854
+ "fontWeight": "{palette.fontWeight.weight400}",
1855
+ "icon": "{system.icon.none}",
1856
+ "iconDisplace": "{palette.size.size0}",
1857
+ "iconSize": "{palette.size.size24}",
1858
+ "lineHeight": "{palette.lineHeight.ratio3to2}",
1859
+ "outerBorderColor": "{palette.color.transparent}",
1860
+ "paddingBottom": "{palette.size.size12}",
1861
+ "paddingLeft": "{palette.size.size8}",
1862
+ "paddingRight": "{palette.size.size8}",
1863
+ "paddingTop": "{palette.size.size12}",
1864
+ "textAlign": "{system.flexJustifyContent.center}",
1865
+ "textLine": "{system.textLine.underline}",
1866
+ "width": "{system.size.none}"
1867
+ }
1871
1868
  },
1872
1869
  "Progress": {
1873
1870
  "appearances": {
1874
1871
  "size": {
1875
- "values": ["mini"],
1876
- "type": "variant"
1872
+ "type": "variant",
1873
+ "values": ["mini"]
1877
1874
  }
1878
1875
  },
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
1876
  "rules": [
1887
1877
  {
1888
1878
  "if": {
@@ -1892,23 +1882,23 @@
1892
1882
  "height": "{palette.size.size8}"
1893
1883
  }
1894
1884
  }
1895
- ]
1885
+ ],
1886
+ "tokens": {
1887
+ "backgroundColor": "{palette.color.greyAthens}",
1888
+ "borderColor": "{palette.color.greyCloud}",
1889
+ "borderRadius": "{palette.radius.radius12}",
1890
+ "borderWidth": "{palette.border.border1}",
1891
+ "height": "{palette.size.size16}"
1892
+ }
1896
1893
  },
1897
1894
  "ProgressBar": {
1898
1895
  "appearances": {
1899
1896
  "inactive": "{appearances.ProgressBar.inactive}",
1900
1897
  "negative": {
1901
- "values": [true],
1902
- "type": "variant"
1898
+ "type": "variant",
1899
+ "values": [true]
1903
1900
  }
1904
1901
  },
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
1902
  "rules": [
1913
1903
  {
1914
1904
  "if": {
@@ -1930,7 +1920,14 @@
1930
1920
  "outlineColor": "{palette.color.redDark}"
1931
1921
  }
1932
1922
  }
1933
- ]
1923
+ ],
1924
+ "tokens": {
1925
+ "backgroundColor": "{palette.color.greenAccessible}",
1926
+ "borderRadius": "{palette.radius.radius12}",
1927
+ "gradient": "{palette.gradient.green}",
1928
+ "outlineColor": "{palette.color.greenAccessible}",
1929
+ "outlineWidth": "{palette.border.border1}"
1930
+ }
1934
1931
  },
1935
1932
  "Radio": {
1936
1933
  "appearances": {
@@ -1940,36 +1937,6 @@
1940
1937
  "hover": "{appearances.Radio.hover}",
1941
1938
  "inactive": "{appearances.Radio.inactive}"
1942
1939
  },
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
1940
  "rules": [
1974
1941
  {
1975
1942
  "if": {
@@ -1984,8 +1951,8 @@
1984
1951
  "hover": true
1985
1952
  },
1986
1953
  "tokens": {
1987
- "outerBorderWidth": "{palette.border.border2}",
1988
- "outerBorderColor": "{palette.color.greyMystic}"
1954
+ "outerBorderColor": "{palette.color.greyMystic}",
1955
+ "outerBorderWidth": "{palette.border.border2}"
1989
1956
  }
1990
1957
  },
1991
1958
  {
@@ -2002,71 +1969,65 @@
2002
1969
  "inactive": true
2003
1970
  },
2004
1971
  "tokens": {
2005
- "inputBorderColor": "{palette.color.transparent}",
2006
1972
  "inputBackgroundColor": "{palette.color.greyMystic}",
1973
+ "inputBorderColor": "{palette.color.transparent}",
2007
1974
  "labelColor": "{palette.color.greyShuttle}"
2008
1975
  }
2009
1976
  }
2010
- ]
1977
+ ],
1978
+ "tokens": {
1979
+ "checkedBackgroundColor": "{palette.color.purpleDeluge}",
1980
+ "checkedSize": "{palette.size.size12}",
1981
+ "containerBackgroundColor": "{palette.color.transparent}",
1982
+ "containerBorderRadius": "{palette.radius.none}",
1983
+ "containerOpacity": "{system.opacity.opaque}",
1984
+ "containerPaddingBottom": "{palette.size.size0}",
1985
+ "containerPaddingLeft": "{palette.size.size0}",
1986
+ "containerPaddingRight": "{palette.size.size0}",
1987
+ "containerPaddingTop": "{palette.size.size0}",
1988
+ "containerShadow": "{system.shadow.none}",
1989
+ "descriptionFontSize": "{palette.fontSize.size14}",
1990
+ "descriptionLineHeight": "{palette.lineHeight.ratio10to7}",
1991
+ "descriptionMarginLeft": "{system.size.none}",
1992
+ "inputBackgroundColor": "{palette.color.white}",
1993
+ "inputBorderColor": "{palette.color.greyShuttle}",
1994
+ "inputBorderWidth": "{palette.border.border1}",
1995
+ "inputOutlineColor": "{palette.color.transparent}",
1996
+ "inputOutlineWidth": "{palette.border.none}",
1997
+ "inputSize": "{palette.size.size20}",
1998
+ "labelColor": "{palette.color.greyCharcoal}",
1999
+ "labelFontName": "{palette.fontName.HelveticaNow}",
2000
+ "labelFontSize": "{palette.fontSize.size16}",
2001
+ "labelFontWeight": "{palette.fontWeight.weight400}",
2002
+ "labelLineHeight": "{palette.lineHeight.ratio3to2}",
2003
+ "labelMarginLeft": "{palette.size.size10}",
2004
+ "outerBorderColor": "{system.color.transparent}",
2005
+ "outerBorderGap": "{system.size.zero}",
2006
+ "outerBorderWidth": "{system.border.zero}"
2007
+ }
2011
2008
  },
2012
2009
  "RadioCard": {
2013
2010
  "appearances": {
2014
- "pressed": "{appearances.RadioCard.pressed}",
2015
- "hover": "{appearances.RadioCard.hover}",
2016
- "focus": "{appearances.RadioCard.focus}",
2017
2011
  "checked": "{appearances.RadioCard.checked}",
2018
- "inactive": "{appearances.RadioCard.inactive}",
2019
2012
  "error": "{appearances.RadioCard.error}",
2013
+ "focus": "{appearances.RadioCard.focus}",
2014
+ "hover": "{appearances.RadioCard.hover}",
2015
+ "inactive": "{appearances.RadioCard.inactive}",
2016
+ "pressed": "{appearances.RadioCard.pressed}",
2020
2017
  "viewport": "{appearances.system.viewport}"
2021
2018
  },
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
2019
  "rules": [
2059
2020
  {
2060
2021
  "if": {
2061
2022
  "viewport": ["lg", "xl"]
2062
2023
  },
2063
2024
  "tokens": {
2025
+ "fontSize": "{palette.fontSize.size24}",
2026
+ "lineHeight": "{palette.lineHeight.ratio4to3}",
2064
2027
  "paddingBottom": "{palette.size.size24}",
2065
2028
  "paddingLeft": "{palette.size.size16}",
2066
2029
  "paddingRight": "{palette.size.size24}",
2067
- "paddingTop": "{palette.size.size16}",
2068
- "fontSize": "{palette.fontSize.size24}",
2069
- "lineHeight": "{palette.lineHeight.ratio4to3}"
2030
+ "paddingTop": "{palette.size.size16}"
2070
2031
  }
2071
2032
  },
2072
2033
  {
@@ -2077,15 +2038,15 @@
2077
2038
  "borderColor": "{palette.color.greyShuttle}",
2078
2039
  "outerBorderColor": "{palette.color.greyMystic}",
2079
2040
  "outerBorderWidth": "{palette.border.border2}",
2080
- "radioOuterBorderWidth": "{palette.border.border2}",
2081
- "radioOuterBorderColor": "{palette.color.greyMystic}"
2041
+ "radioOuterBorderColor": "{palette.color.greyMystic}",
2042
+ "radioOuterBorderWidth": "{palette.border.border2}"
2082
2043
  }
2083
2044
  },
2084
2045
  {
2046
+ "description": "Pressed state matches hover state plus light grey background",
2085
2047
  "if": {
2086
2048
  "pressed": true
2087
2049
  },
2088
- "description": "Pressed state matches hover state plus light grey background",
2089
2050
  "tokens": {
2090
2051
  "backgroundColor": "{palette.color.greyAthens}",
2091
2052
  "borderColor": "{palette.color.greyShuttle}",
@@ -2099,8 +2060,8 @@
2099
2060
  },
2100
2061
  "tokens": {
2101
2062
  "outerBorderColor": "{palette.color.greyShuttle}",
2102
- "outerBorderWidth": "{palette.border.border2}",
2103
2063
  "outerBorderGap": "{palette.size.size2}",
2064
+ "outerBorderWidth": "{palette.border.border2}",
2104
2065
  "radioInputBorderColor": "{palette.color.purpleDeluge}",
2105
2066
  "radioInputBorderWidth": "{palette.border.border3}"
2106
2067
  }
@@ -2112,9 +2073,9 @@
2112
2073
  "tokens": {
2113
2074
  "backgroundColor": "{palette.color.greyAthens}",
2114
2075
  "borderColor": "{system.color.transparent}",
2115
- "radioInputBorderColor": "{palette.color.transparent}",
2076
+ "color": "{palette.color.greyShuttle}",
2116
2077
  "radioInputBackgroundColor": "{palette.color.greyMystic}",
2117
- "color": "{palette.color.greyShuttle}"
2078
+ "radioInputBorderColor": "{palette.color.transparent}"
2118
2079
  }
2119
2080
  },
2120
2081
  {
@@ -2123,76 +2084,89 @@
2123
2084
  },
2124
2085
  "tokens": {
2125
2086
  "borderColor": "{palette.color.red}",
2126
- "radioInputBorderColor": "{palette.color.red}",
2127
- "color": "{palette.color.red}"
2087
+ "color": "{palette.color.red}",
2088
+ "radioInputBorderColor": "{palette.color.red}"
2128
2089
  }
2129
2090
  }
2130
- ]
2091
+ ],
2092
+ "tokens": {
2093
+ "backgroundColor": "{palette.color.white}",
2094
+ "borderColor": "{palette.color.greyCloud}",
2095
+ "borderRadius": "{palette.radius.radius6}",
2096
+ "borderWidth": "{palette.border.border1}",
2097
+ "color": "{palette.color.greyThunder}",
2098
+ "contentSpace": "{system.integer.2}",
2099
+ "flex": "{system.integer.1}",
2100
+ "fontName": "{palette.fontName.HelveticaNow}",
2101
+ "fontSize": "{palette.fontSize.size20}",
2102
+ "fontWeight": "{palette.fontWeight.weight500}",
2103
+ "letterSpacing": "{system.letterSpacing.none}",
2104
+ "lineHeight": "{palette.lineHeight.ratio7to5}",
2105
+ "minWidth": "{palette.size.size264}",
2106
+ "outerBorderColor": "{system.color.transparent}",
2107
+ "outerBorderGap": "{system.size.zero}",
2108
+ "outerBorderWidth": "{system.border.zero}",
2109
+ "paddingBottom": "{palette.size.size16}",
2110
+ "paddingLeft": "{palette.size.size10}",
2111
+ "paddingRight": "{palette.size.size16}",
2112
+ "paddingTop": "{palette.size.size16}",
2113
+ "radioCheckedBackgroundColor": "{palette.color.purpleDeluge}",
2114
+ "radioCheckedSize": "{palette.size.size12}",
2115
+ "radioInputBackgroundColor": "{palette.color.white}",
2116
+ "radioInputBorderColor": "{palette.color.greyShuttle}",
2117
+ "radioInputBorderWidth": "{palette.border.border1}",
2118
+ "radioInputOutlineColor": "{palette.color.transparent}",
2119
+ "radioInputOutlineWidth": "{palette.border.none}",
2120
+ "radioInputSize": "{palette.size.size20}",
2121
+ "radioOuterBorderColor": "{system.color.transparent}",
2122
+ "radioOuterBorderGap": "{system.size.zero}",
2123
+ "radioOuterBorderWidth": "{system.border.zero}",
2124
+ "radioSpace": "{system.integer.2}",
2125
+ "shadow": "{system.shadow.none}",
2126
+ "textTransform": "{system.textTransform.none}"
2127
+ }
2131
2128
  },
2132
2129
  "RadioCardGroup": {
2133
2130
  "appearances": {
2134
- "viewport": "{appearances.system.viewport}",
2135
2131
  "fullWidth": {
2136
2132
  "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}"
2133
+ "type": "variant",
2134
+ "values": [true]
2135
+ },
2136
+ "viewport": "{appearances.system.viewport}"
2145
2137
  },
2146
2138
  "rules": [
2147
2139
  {
2148
2140
  "if": {
2149
- "viewport": ["lg", "xl"],
2150
- "fullWidth": null
2141
+ "fullWidth": null,
2142
+ "viewport": ["lg", "xl"]
2151
2143
  },
2152
2144
  "tokens": {
2153
2145
  "direction": "{system.direction.row}",
2154
2146
  "space": "{system.integer.4}"
2155
2147
  }
2156
2148
  }
2157
- ]
2149
+ ],
2150
+ "tokens": {
2151
+ "direction": "{system.direction.column}",
2152
+ "fieldSpace": "{system.integer.3}",
2153
+ "space": "{system.integer.3}"
2154
+ }
2158
2155
  },
2159
2156
  "RadioGroup": {
2160
2157
  "appearances": {},
2158
+ "rules": [],
2161
2159
  "tokens": {
2162
- "space": "{system.integer.2}",
2163
- "fieldSpace": "{system.integer.2}"
2164
- },
2165
- "rules": []
2160
+ "fieldSpace": "{system.integer.2}",
2161
+ "space": "{system.integer.2}"
2162
+ }
2166
2163
  },
2167
2164
  "Search": {
2168
2165
  "appearances": {
2169
- "hover": "{appearances.Search.hover}",
2170
2166
  "focus": "{appearances.Search.focus}",
2167
+ "hover": "{appearances.Search.hover}",
2171
2168
  "inactive": "{appearances.Search.inactive}"
2172
2169
  },
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
2170
  "rules": [
2197
2171
  {
2198
2172
  "if": {
@@ -2200,8 +2174,8 @@
2200
2174
  "inactive": null
2201
2175
  },
2202
2176
  "tokens": {
2203
- "outerBorderColor": "{palette.color.greyMystic}",
2204
- "outerBackgroundColor": "{palette.color.greyMystic}"
2177
+ "outerBackgroundColor": "{palette.color.greyMystic}",
2178
+ "outerBorderColor": "{palette.color.greyMystic}"
2205
2179
  }
2206
2180
  },
2207
2181
  {
@@ -2222,34 +2196,43 @@
2222
2196
  "borderColor": "{palette.color.greyAthens}"
2223
2197
  }
2224
2198
  }
2225
- ]
2226
- },
2227
- "SearchButton": {
2228
- "appearances": {
2229
- "hover": "{appearances.SearchButton.hover}",
2199
+ ],
2200
+ "tokens": {
2201
+ "backgroundColor": "{palette.color.white}",
2202
+ "borderColor": "{palette.color.greyShuttle}",
2203
+ "borderRadius": "{palette.radius.pill32}",
2204
+ "borderWidth": "{palette.border.border1}",
2205
+ "buttonsGap": "{palette.size.size1}",
2206
+ "clearButtonIcon": "{palette.icon.Times}",
2207
+ "color": "{palette.color.greyCharcoal}",
2208
+ "fontName": "{palette.fontName.HelveticaNow}",
2209
+ "fontSize": "{palette.fontSize.size16}",
2210
+ "fontWeight": "{palette.fontWeight.weight400}",
2211
+ "lineHeight": "{palette.lineHeight.ratio3to2}",
2212
+ "outerBackgroundColor": "{palette.color.transparent}",
2213
+ "outerBorderColor": "{palette.color.transparent}",
2214
+ "outerBorderRadius": "{palette.radius.pill32}",
2215
+ "outerBorderWidth": "{palette.border.border2}",
2216
+ "paddingBottom": "{palette.size.size12}",
2217
+ "paddingLeft": "{palette.size.size24}",
2218
+ "paddingRight": "{palette.size.size8}",
2219
+ "paddingTop": "{palette.size.size12}",
2220
+ "placeholderColor": "{palette.color.greyCharcoal}",
2221
+ "submitButtonIcon": "{palette.icon.SearchBold}"
2222
+ }
2223
+ },
2224
+ "SearchButton": {
2225
+ "appearances": {
2230
2226
  "focus": "{appearances.SearchButton.focus}",
2227
+ "hover": "{appearances.SearchButton.hover}",
2231
2228
  "inactive": "{appearances.SearchButton.inactive}",
2232
2229
  "pressed": "{appearances.SearchButton.pressed}",
2233
2230
  "priority": {
2234
2231
  "description": "",
2235
- "values": ["high"],
2236
- "type": "variant"
2232
+ "type": "variant",
2233
+ "values": ["high"]
2237
2234
  }
2238
2235
  },
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
2236
  "rules": [
2254
2237
  {
2255
2238
  "if": {
@@ -2275,10 +2258,10 @@
2275
2258
  "focus": true
2276
2259
  },
2277
2260
  "tokens": {
2261
+ "backgroundColor": "{system.color.transparent}",
2278
2262
  "borderColor": "{palette.color.purpleTelus}",
2279
2263
  "borderWidth": "{palette.border.border3}",
2280
- "iconColor": "{palette.color.purpleTelus}",
2281
- "backgroundColor": "{system.color.transparent}"
2264
+ "iconColor": "{palette.color.purpleTelus}"
2282
2265
  }
2283
2266
  },
2284
2267
  {
@@ -2286,8 +2269,8 @@
2286
2269
  "pressed": true
2287
2270
  },
2288
2271
  "tokens": {
2289
- "borderWidth": "{system.size.zero}",
2290
2272
  "backgroundColor": "{palette.color.purpleDark}",
2273
+ "borderWidth": "{palette.border.none}",
2291
2274
  "iconColor": "{palette.color.white}"
2292
2275
  }
2293
2276
  },
@@ -2297,314 +2280,384 @@
2297
2280
  },
2298
2281
  "tokens": {
2299
2282
  "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}"
2283
+ "borderWidth": "{palette.border.none}",
2284
+ "iconColor": "{palette.color.greyShuttle}"
2363
2285
  }
2364
2286
  }
2365
- ]
2366
- },
2367
- "Tabs": {
2368
- "appearances": {},
2287
+ ],
2369
2288
  "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": []
2289
+ "backgroundColor": "{system.color.none}",
2290
+ "borderColor": "{palette.color.transparent}",
2291
+ "borderRadius": "{palette.radius.pill32}",
2292
+ "borderWidth": "{system.border.zero}",
2293
+ "iconColor": "{palette.color.greyShuttle}",
2294
+ "iconSize": "{palette.size.size20}",
2295
+ "opacity": "{system.opacity.opaque}",
2296
+ "paddingBottom": "{palette.size.size8}",
2297
+ "paddingLeft": "{palette.size.size8}",
2298
+ "paddingRight": "{palette.size.size8}",
2299
+ "paddingTop": "{palette.size.size8}",
2300
+ "shadow": "{system.shadow.none}"
2301
+ }
2379
2302
  },
2380
- "TabsItem": {
2303
+ "Select": {
2381
2304
  "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}"
2305
+ "focus": "{appearances.Select.focus}",
2306
+ "hover": "{appearances.Select.hover}",
2307
+ "inactive": "{appearances.Select.inactive}",
2308
+ "validation": "{appearances.Select.validation}"
2410
2309
  },
2411
2310
  "rules": [
2412
2311
  {
2413
2312
  "if": {
2414
- "selected": true
2313
+ "hover": true,
2314
+ "inactive": null
2415
2315
  },
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
2316
  "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}"
2317
+ "outerBackgroundColor": "{palette.color.greyMystic}",
2318
+ "outerBorderColor": "{palette.color.greyMystic}"
2424
2319
  }
2425
2320
  },
2426
2321
  {
2427
2322
  "if": {
2428
- "hover": true
2323
+ "validation": "success"
2429
2324
  },
2430
2325
  "tokens": {
2431
- "borderColor": "{palette.color.greyCloud}",
2432
- "borderWidth": "{palette.border.border2}"
2326
+ "borderColor": "{palette.color.greenAccessible}",
2327
+ "validationIcon": "{palette.icon.StatusSuccess}",
2328
+ "validationIconColor": "{palette.color.greenAccessible}"
2433
2329
  }
2434
2330
  },
2435
2331
  {
2436
2332
  "if": {
2437
- "focus": true
2333
+ "validation": "error"
2438
2334
  },
2439
2335
  "tokens": {
2440
- "color": "{palette.color.purpleTelus}",
2441
- "borderColor": "{palette.color.purpleTelus}",
2442
- "borderWidth": "{palette.border.border2}"
2336
+ "borderColor": "{palette.color.red}",
2337
+ "validationIcon": "{palette.icon.StatusError}",
2338
+ "validationIconColor": "{palette.color.red}"
2443
2339
  }
2444
2340
  },
2445
2341
  {
2446
2342
  "if": {
2447
- "pressed": true
2343
+ "focus": true
2448
2344
  },
2449
2345
  "tokens": {
2450
- "color": "{palette.color.white}",
2451
- "backgroundColor": "{palette.color.greyShuttle}",
2452
- "borderColor": "{system.color.transparent}",
2453
- "borderWidth": "{system.border.zero}"
2346
+ "borderColor": "{palette.color.purpleDeluge}",
2347
+ "borderWidth": "{palette.border.border3}",
2348
+ "validationIcon": "{system.icon.none}"
2454
2349
  }
2455
2350
  },
2456
2351
  {
2457
2352
  "if": {
2458
- "focus": true,
2459
- "pressed": true
2353
+ "inactive": true
2460
2354
  },
2461
2355
  "tokens": {
2462
- "backgroundColor": "{palette.color.purpleTelus}"
2356
+ "backgroundColor": "{palette.color.greyAthens}",
2357
+ "borderColor": "{palette.color.greyAthens}"
2463
2358
  }
2464
2359
  }
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
- },
2360
+ ],
2482
2361
  "tokens": {
2483
2362
  "backgroundColor": "{palette.color.white}",
2484
- "color": "{palette.color.greyCharcoal}",
2485
- "borderWidth": "{palette.border.border1}",
2486
2363
  "borderColor": "{palette.color.greyShuttle}",
2487
2364
  "borderRadius": "{palette.radius.radius4}",
2488
- "paddingTop": "{palette.size.size12}",
2365
+ "borderWidth": "{palette.border.border1}",
2366
+ "color": "{palette.color.greyCharcoal}",
2367
+ "fontName": "{palette.fontName.HelveticaNow}",
2368
+ "fontSize": "{palette.fontSize.size16}",
2369
+ "fontWeight": "{palette.fontWeight.weight400}",
2370
+ "height": "{palette.size.size48}",
2371
+ "icon": "{palette.icon.CaretDown}",
2372
+ "iconColor": "{palette.color.greenAccessible}",
2373
+ "iconSize": "{palette.size.size24}",
2374
+ "outerBackgroundColor": "{palette.color.transparent}",
2375
+ "outerBorderColor": "{palette.color.transparent}",
2376
+ "outerBorderWidth": "{palette.border.border2}",
2489
2377
  "paddingBottom": "{palette.size.size12}",
2490
2378
  "paddingLeft": "{palette.size.size16}",
2491
2379
  "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}"
2380
+ "paddingTop": "{palette.size.size12}",
2381
+ "validationIcon": "{system.icon.none}",
2382
+ "validationIconColor": "{palette.color.transparent}",
2383
+ "validationIconSize": "{palette.size.size24}"
2384
+ }
2385
+ },
2386
+ "SideNav": {
2387
+ "appearances": {},
2388
+ "rules": [],
2389
+ "tokens": {
2390
+ "borderColor": "{palette.color.greyCloud}",
2391
+ "borderStyle": "{system.borderStyle.solid}",
2392
+ "borderWidth": "{palette.border.border1}"
2393
+ }
2394
+ },
2395
+ "SideNavItem": {
2396
+ "appearances": {
2397
+ "active": "{appearances.SideNavItem.active}",
2398
+ "expanded": "{appearances.SideNavItem.expanded}",
2399
+ "hover": "{appearances.SideNavItem.hover}",
2400
+ "type": "{appearances.SideNavItem.type}"
2502
2401
  },
2503
2402
  "rules": [
2504
2403
  {
2505
2404
  "if": {
2506
- "hover": true,
2507
- "inactive": null
2405
+ "active": true
2508
2406
  },
2509
2407
  "tokens": {
2510
- "outerBorderColor": "{palette.color.greyMystic}",
2511
- "outerBackgroundColor": "{palette.color.greyMystic}"
2408
+ "accentBackgroundColor": "{palette.color.purpleTelus}",
2409
+ "color": "{palette.color.purpleTelus}",
2410
+ "fontName": "{palette.fontName.HelveticaNow}",
2411
+ "fontWeight": "{palette.fontWeight.weight700}",
2412
+ "paddingLeft": "{palette.size.size12}"
2512
2413
  }
2513
2414
  },
2514
2415
  {
2515
2416
  "if": {
2516
- "validation": "success"
2417
+ "type": "child"
2517
2418
  },
2518
2419
  "tokens": {
2519
- "borderColor": "{palette.color.greenAccessible}",
2520
- "icon": "{palette.icon.StatusSuccess}",
2521
- "iconColor": "{palette.color.greenAccessible}"
2420
+ "accentBackgroundColor": "{palette.color.greyAthens}",
2421
+ "accentOffset": "{palette.size.size16}",
2422
+ "borderWidth": "{palette.border.none}",
2423
+ "fontSize": "{palette.fontSize.size14}",
2424
+ "lineHeight": "{palette.lineHeight.ratio7to5}",
2425
+ "paddingLeft": "{palette.size.size36}"
2522
2426
  }
2523
2427
  },
2524
2428
  {
2525
2429
  "if": {
2526
- "validation": "error"
2430
+ "active": true,
2431
+ "type": "parent"
2527
2432
  },
2528
2433
  "tokens": {
2529
- "borderColor": "{palette.color.red}",
2530
- "icon": "{palette.icon.StatusError}",
2531
- "iconColor": "{palette.color.red}"
2434
+ "paddingLeft": "{palette.size.size12}"
2532
2435
  }
2533
2436
  },
2534
2437
  {
2535
2438
  "if": {
2536
- "focus": true
2439
+ "active": true,
2440
+ "expanded": true,
2441
+ "type": "parent"
2537
2442
  },
2538
2443
  "tokens": {
2539
- "borderColor": "{palette.color.purpleDeluge}",
2540
- "borderWidth": "{palette.border.border3}",
2541
- "icon": "{system.icon.none}"
2444
+ "accentBackgroundColor": "{palette.color.transparent}",
2445
+ "color": "{palette.color.greyCharcoal}",
2446
+ "paddingLeft": "{palette.size.size16}"
2542
2447
  }
2543
2448
  },
2544
2449
  {
2545
2450
  "if": {
2546
- "inactive": true
2451
+ "hover": true
2547
2452
  },
2548
2453
  "tokens": {
2549
2454
  "backgroundColor": "{palette.color.greyAthens}",
2550
- "borderColor": "{palette.color.greyAthens}"
2455
+ "color": "{palette.color.purpleTelus}"
2456
+ }
2457
+ },
2458
+ {
2459
+ "if": {
2460
+ "active": true,
2461
+ "type": "child"
2462
+ },
2463
+ "tokens": {
2464
+ "accentBackgroundColor": "{palette.color.purpleTelus}",
2465
+ "accentPadding": "{palette.size.size16}",
2466
+ "backgroundColor": "{palette.color.greyAthens}",
2467
+ "color": "{palette.color.purpleTelus}"
2468
+ }
2469
+ },
2470
+ {
2471
+ "if": {
2472
+ "active": false,
2473
+ "hover": true,
2474
+ "type": "child"
2475
+ },
2476
+ "tokens": {
2477
+ "accentBackgroundColor": "{palette.color.white}",
2478
+ "accentOffset": "{system.size.zero}",
2479
+ "accentWidth": "{palette.size.size16}",
2480
+ "color": "{palette.color.greyCharcoal}"
2551
2481
  }
2552
2482
  }
2553
- ]
2483
+ ],
2484
+ "tokens": {
2485
+ "accentBackgroundColor": "{palette.color.transparent}",
2486
+ "accentOffset": "{system.size.zero}",
2487
+ "accentPadding": "{system.size.zero}",
2488
+ "accentWidth": "{palette.size.size4}",
2489
+ "backgroundColor": "{palette.color.transparent}",
2490
+ "borderColor": "{palette.color.greyCloud}",
2491
+ "borderStyle": "{system.borderStyle.solid}",
2492
+ "borderWidth": "{palette.border.border1}",
2493
+ "color": "{palette.color.greyCharcoal}",
2494
+ "fontName": "{palette.fontName.HelveticaNow}",
2495
+ "fontSize": "{palette.fontSize.size16}",
2496
+ "fontWeight": "{palette.fontWeight.weight400}",
2497
+ "justifyContent": "{system.flexJustifyContent.spaceBetween}",
2498
+ "lineHeight": "{palette.lineHeight.ratio3to2}",
2499
+ "paddingBottom": "{palette.size.size16}",
2500
+ "paddingLeft": "{palette.size.size16}",
2501
+ "paddingRight": "{palette.size.size16}",
2502
+ "paddingTop": "{palette.size.size16}"
2503
+ }
2554
2504
  },
2555
- "ToggleSwitch": {
2505
+ "SideNavItemsGroup": {
2556
2506
  "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}"
2507
+ "expanded": "{appearances.SideNavItemGroup.expanded}"
2562
2508
  },
2509
+ "rules": [
2510
+ {
2511
+ "if": {
2512
+ "expanded": true
2513
+ },
2514
+ "tokens": {
2515
+ "icon": "{palette.icon.CaretUp}"
2516
+ }
2517
+ }
2518
+ ],
2563
2519
  "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}"
2520
+ "collapseDuration": "{palette.duration.duration250}",
2521
+ "contentPaddingBottom": "{palette.size.size0}",
2522
+ "contentPaddingLeft": "{palette.size.size0}",
2523
+ "contentPaddingRight": "{palette.size.size0}",
2524
+ "contentPaddingTop": "{palette.size.size0}",
2525
+ "expandDuration": "{palette.duration.duration300}",
2526
+ "icon": "{palette.icon.CaretDown}",
2527
+ "iconColor": "{palette.color.purpleTelus}",
2528
+ "iconGap": "{palette.size.size8}",
2529
+ "iconPosition": "{system.position.right}",
2530
+ "iconSize": "{palette.size.size24}",
2531
+ "justifyContent": "{system.flexJustifyContent.spaceBetween}",
2532
+ "verticalAlign": "{system.verticalAlign.middle}"
2533
+ }
2534
+ },
2535
+ "Skeleton": {
2536
+ "appearances": {},
2537
+ "rules": [],
2538
+ "tokens": {
2539
+ "baseWidth": "{palette.size.size40}",
2540
+ "characters": "{palette.size.size10}",
2541
+ "color": "{palette.color.greyCloud}",
2542
+ "radius": "{system.radius.round}",
2543
+ "size": "{palette.size.size3}",
2544
+ "spaceBetweenLines": "{palette.size.size2}",
2545
+ "squareRadius": "{palette.radius.radius4}"
2546
+ }
2547
+ },
2548
+ "StackView": {
2549
+ "appearances": {},
2550
+ "rules": [],
2551
+ "tokens": {
2552
+ "alignItems": "{system.flexAlign.stretch}",
2553
+ "flexGrow": "{system.integer.0}",
2554
+ "flexShrink": "{system.integer.0}",
2555
+ "justifyContent": "{system.flexJustifyContent.flexStart}"
2556
+ }
2557
+ },
2558
+ "StepTracker": {
2559
+ "appearances": {
2560
+ "viewport": "{appearances.system.viewport}"
2592
2561
  },
2593
2562
  "rules": [
2594
2563
  {
2595
2564
  "if": {
2596
- "hover": true
2565
+ "viewport": ["lg", "xl"]
2597
2566
  },
2598
2567
  "tokens": {
2599
- "backgroundColor": "{palette.color.greyCharcoal}"
2568
+ "showStepLabel": "{system.show.true}",
2569
+ "showStepTrackerLabel": "{system.show.false}"
2570
+ }
2571
+ }
2572
+ ],
2573
+ "tokens": {
2574
+ "completedIcon": "{system.icon.none}",
2575
+ "completedIconColor": "{system.color.none}",
2576
+ "completedIconSize": "{system.size.none}",
2577
+ "connectorColor": "{palette.color.greyShuttle}",
2578
+ "connectorCompletedColor": "{palette.color.purpleDeluge}",
2579
+ "connectorCompletedHeight": "{palette.border.border3}",
2580
+ "connectorHeight": "{palette.border.border1}",
2581
+ "connectorMinWidth": "{palette.size.size16}",
2582
+ "containerPaddingBottom": "{system.size.none}",
2583
+ "containerPaddingLeft": "{system.size.none}",
2584
+ "containerPaddingRight": "{system.size.none}",
2585
+ "containerPaddingTop": "{system.size.none}",
2586
+ "knobBackgroundColor": "{palette.color.transparent}",
2587
+ "knobBorderColor": "{palette.color.greyShuttle}",
2588
+ "knobBorderWidth": "{palette.border.border1}",
2589
+ "knobCompletedBackgroundColor": "{palette.color.purpleDeluge}",
2590
+ "knobCompletedBorderColor": "{palette.color.purpleDeluge}",
2591
+ "knobCompletedPaddingLeft": "{system.size.none}",
2592
+ "knobCompletedPaddingTop": "{system.size.none}",
2593
+ "knobCurrentBackgroundColor": "{palette.color.transparent}",
2594
+ "knobCurrentBorderColor": "{palette.color.purpleDeluge}",
2595
+ "knobCurrentBorderWidth": "{palette.border.border2}",
2596
+ "knobCurrentInnerColor": "{palette.color.purpleDeluge}",
2597
+ "knobCurrentInnerSize": "{palette.size.size8}",
2598
+ "knobCurrentPaddingLeft": "{palette.size.size2}",
2599
+ "knobCurrentPaddingTop": "{palette.size.size2}",
2600
+ "knobSize": "{palette.size.size16}",
2601
+ "labelColor": "{palette.color.greyCharcoal}",
2602
+ "labelCurrentColor": "{palette.color.purpleDeluge}",
2603
+ "labelCurrentFontName": "{palette.fontName.HelveticaNow}",
2604
+ "labelCurrentFontWeight": "{palette.fontWeight.weight700}",
2605
+ "labelDirection": "{system.direction.column}",
2606
+ "labelFontName": "{palette.fontName.HelveticaNow}",
2607
+ "labelFontSize": "{palette.fontSize.size16}",
2608
+ "labelFontWeight": "{palette.fontWeight.weight400}",
2609
+ "labelGap": "{palette.size.size0}",
2610
+ "labelLineHeight": "{palette.lineHeight.ratio10to7}",
2611
+ "labelMarginTop": "{palette.size.size8}",
2612
+ "labelPaddingLeft": "{palette.size.size16}",
2613
+ "labelPaddingRight": "{palette.size.size16}",
2614
+ "showStepLabel": "{system.show.false}",
2615
+ "showStepName": "{system.show.true}",
2616
+ "showStepTrackerLabel": "{system.show.true}"
2617
+ }
2618
+ },
2619
+ "Tabs": {
2620
+ "appearances": {},
2621
+ "rules": [],
2622
+ "tokens": {
2623
+ "borderBottomColor": "{palette.color.greyShuttle}",
2624
+ "borderBottomWidth": "{palette.border.border1}",
2625
+ "buttonClearance": "{palette.size.size16}",
2626
+ "gutter": "{palette.size.size2}",
2627
+ "nextIcon": "{palette.icon.ArrowRight}",
2628
+ "previousIcon": "{palette.icon.ArrowLeft}",
2629
+ "space": "{system.integer.0}"
2630
+ }
2631
+ },
2632
+ "TabsItem": {
2633
+ "appearances": {
2634
+ "focus": "{appearances.TabsItem.pressed}",
2635
+ "hover": "{appearances.TabsItem.pressed}",
2636
+ "pressed": "{appearances.TabsItem.pressed}",
2637
+ "selected": "{appearances.TabsItem.pressed}"
2638
+ },
2639
+ "rules": [
2640
+ {
2641
+ "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",
2642
+ "if": {
2643
+ "selected": true
2644
+ },
2645
+ "tokens": {
2646
+ "backgroundColor": "{palette.color.greyAthens}",
2647
+ "color": "{palette.color.purpleTelus}",
2648
+ "highlightBarBorderRadius": "{palette.radius.pill32}",
2649
+ "highlightBarBorderWidth": "{palette.border.border1}",
2650
+ "highlightBarHeight": "{palette.border.border1}",
2651
+ "highlightColor": "{palette.color.purpleTelus}"
2600
2652
  }
2601
2653
  },
2602
2654
  {
2603
2655
  "if": {
2604
- "pressed": true
2656
+ "hover": true
2605
2657
  },
2606
2658
  "tokens": {
2607
- "backgroundColor": "{palette.color.greyThunder}"
2659
+ "borderColor": "{palette.color.greyCloud}",
2660
+ "borderWidth": "{palette.border.border2}"
2608
2661
  }
2609
2662
  },
2610
2663
  {
@@ -2612,10 +2665,20 @@
2612
2665
  "focus": true
2613
2666
  },
2614
2667
  "tokens": {
2615
- "outerBackgroundColor": "{palette.color.white}",
2616
- "outerBorderGap": "{palette.border.border3}",
2617
- "outerBorderWidth": "{palette.border.border2}",
2618
- "outerBorderColor": "{palette.color.greyShuttle}"
2668
+ "borderColor": "{palette.color.purpleTelus}",
2669
+ "borderWidth": "{palette.border.border2}",
2670
+ "color": "{palette.color.purpleTelus}"
2671
+ }
2672
+ },
2673
+ {
2674
+ "if": {
2675
+ "pressed": true
2676
+ },
2677
+ "tokens": {
2678
+ "backgroundColor": "{palette.color.greyShuttle}",
2679
+ "borderColor": "{system.color.transparent}",
2680
+ "borderWidth": "{system.border.zero}",
2681
+ "color": "{palette.color.white}"
2619
2682
  }
2620
2683
  },
2621
2684
  {
@@ -2624,159 +2687,244 @@
2624
2687
  "pressed": true
2625
2688
  },
2626
2689
  "tokens": {
2627
- "outerBorderColor": "{palette.color.greyThunder}"
2690
+ "backgroundColor": "{palette.color.purpleTelus}"
2691
+ }
2692
+ }
2693
+ ],
2694
+ "tokens": {
2695
+ "backgroundColor": "{system.color.transparent}",
2696
+ "borderColor": "{system.color.transparent}",
2697
+ "borderRadius": "{palette.radius.pill32}",
2698
+ "borderWidth": "{system.border.zero}",
2699
+ "color": "{palette.color.greyShuttle}",
2700
+ "fontName": "{palette.fontName.HelveticaNow}",
2701
+ "fontScaleCap": "{palette.fontSize.size64}",
2702
+ "fontSize": "{palette.fontSize.size14}",
2703
+ "fontWeight": "{palette.fontWeight.weight700}",
2704
+ "highlightBarBorderRadius": "{system.radius.zero}",
2705
+ "highlightBarBorderWidth": "{system.border.zero}",
2706
+ "highlightBarHeight": "{system.border.zero}",
2707
+ "highlightColor": "{system.color.transparent}",
2708
+ "highlightTriangleSize": "{system.size.zero}",
2709
+ "letterSpacing": "{system.letterSpacing.none}",
2710
+ "lineHeight": "{palette.lineHeight.ratio8to7}",
2711
+ "maxWidth": "{palette.size.size192}",
2712
+ "paddingHorizontal": "{palette.size.size24}",
2713
+ "paddingVertical": "{palette.size.size8}",
2714
+ "space": "{system.integer.1}",
2715
+ "textAlign": "{system.textAlign.center}",
2716
+ "textTransform": "{system.textTransform.none}"
2717
+ }
2718
+ },
2719
+ "Tags": {
2720
+ "appearances": {
2721
+ "viewport": "{appearances.system.viewport}"
2722
+ },
2723
+ "rules": [
2724
+ {
2725
+ "if": {
2726
+ "viewport": ["lg", "xl"]
2727
+ },
2728
+ "tokens": {
2729
+ "space": "{system.integer.3}"
2730
+ }
2731
+ }
2732
+ ],
2733
+ "tokens": {
2734
+ "alignItems": "{system.flexAlign.center}",
2735
+ "direction": "{system.direction.row}",
2736
+ "flexGrow": "{system.integer.0}",
2737
+ "flexShrink": "{system.integer.0}",
2738
+ "justifyContent": "{system.flexJustifyContent.flexStart}",
2739
+ "space": "{system.integer.1}"
2740
+ }
2741
+ },
2742
+ "TagsItem": {
2743
+ "appearances": {
2744
+ "focus": "{appearances.TagsItem.focus}",
2745
+ "hover": "{appearances.TagsItem.hover}",
2746
+ "inactive": "{appearances.TagsItem.inactive}",
2747
+ "pressed": "{appearances.TagsItem.pressed}",
2748
+ "selected": "{appearances.TagsItem.selected}"
2749
+ },
2750
+ "rules": [
2751
+ {
2752
+ "if": {
2753
+ "pressed": true
2754
+ },
2755
+ "tokens": {
2756
+ "backgroundColor": "{palette.color.greyShuttle}",
2757
+ "borderColor": "{palette.color.greyShuttle}",
2758
+ "borderWidth": "{palette.border.none}",
2759
+ "color": "{palette.color.white}",
2760
+ "iconBackground": "{palette.color.greyCharcoal}",
2761
+ "iconColor": "{palette.color.white}"
2628
2762
  }
2629
2763
  },
2630
2764
  {
2631
2765
  "if": {
2632
- "selected": true
2766
+ "focus": true
2633
2767
  },
2634
2768
  "tokens": {
2635
- "icon": "{palette.icon.Checkmark}",
2636
- "backgroundColor": "{palette.color.greenAccessible}",
2637
- "iconColor": "{palette.color.greenAccessible}"
2769
+ "borderColor": "{palette.color.greyShuttle}",
2770
+ "outerBorderColor": "{palette.color.greyShuttle}",
2771
+ "outerBorderGap": "{palette.size.size2}",
2772
+ "outerBorderWidth": "{palette.border.border2}"
2638
2773
  }
2639
2774
  },
2640
2775
  {
2641
2776
  "if": {
2642
- "selected": true,
2643
2777
  "hover": true
2644
2778
  },
2645
2779
  "tokens": {
2646
- "backgroundColor": "{palette.color.greenSanFelix}",
2647
- "iconColor": "{palette.color.greenSanFelix}"
2780
+ "borderWidth": "{palette.border.border3}"
2648
2781
  }
2649
2782
  },
2650
2783
  {
2651
2784
  "if": {
2652
- "selected": true,
2653
- "pressed": true
2785
+ "selected": true
2654
2786
  },
2655
2787
  "tokens": {
2656
- "backgroundColor": "{palette.color.greenDarkFern}",
2657
- "iconColor": "{palette.color.greenDarkFern}"
2788
+ "backgroundColor": "{palette.color.purpleTelus}",
2789
+ "borderWidth": "{palette.border.none}",
2790
+ "color": "{palette.color.white}",
2791
+ "icon": "{palette.icon.Close}",
2792
+ "iconBackground": "{palette.color.purpleDeluge}",
2793
+ "iconColor": "{palette.color.white}"
2658
2794
  }
2659
2795
  },
2660
2796
  {
2661
2797
  "if": {
2662
- "selected": true,
2663
- "focus": true
2798
+ "hover": true,
2799
+ "selected": true
2664
2800
  },
2665
2801
  "tokens": {
2666
- "outerBorderColor": "{palette.color.greenAccessible}"
2802
+ "backgroundColor": "{palette.color.purpleDeluge}",
2803
+ "iconBackground": "{palette.color.purpleTelus}"
2804
+ }
2805
+ },
2806
+ {
2807
+ "if": {
2808
+ "pressed": true,
2809
+ "selected": true
2810
+ },
2811
+ "tokens": {
2812
+ "backgroundColor": "{palette.color.purpleDark}",
2813
+ "iconBackground": "{palette.color.purpleDeluge}"
2667
2814
  }
2668
2815
  },
2669
2816
  {
2670
2817
  "if": {
2671
- "selected": true,
2672
2818
  "focus": true,
2673
- "pressed": true
2819
+ "selected": true
2674
2820
  },
2675
2821
  "tokens": {
2676
- "outerBorderColor": "{palette.color.greenDarkFern}"
2822
+ "outerBorderColor": "{palette.color.purpleTelus}"
2677
2823
  }
2678
2824
  },
2679
2825
  {
2680
2826
  "if": {
2681
- "inactive": true
2827
+ "focus": true,
2828
+ "pressed": true,
2829
+ "selected": true
2682
2830
  },
2683
2831
  "tokens": {
2684
- "backgroundColor": "{palette.color.greyCloud}",
2685
- "outerBorderColor": "{palette.color.greyCloud}",
2686
- "iconColor": "{palette.color.greyShuttle}"
2832
+ "iconBackground": "{palette.color.purpleDeluge}",
2833
+ "outerBorderColor": "{palette.color.purpleDark}"
2687
2834
  }
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": [
2835
+ },
2716
2836
  {
2717
2837
  "if": {
2718
- "inverse": true
2838
+ "inactive": true
2719
2839
  },
2720
2840
  "tokens": {
2721
- "backgroundColor": "{palette.color.white}",
2722
- "color": "{palette.color.greyCharcoal}"
2841
+ "backgroundColor": "{palette.color.greyCloud}",
2842
+ "borderWidth": "{system.border.zero}",
2843
+ "color": "{palette.color.white}"
2723
2844
  }
2724
2845
  }
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
- },
2846
+ ],
2737
2847
  "tokens": {
2738
- "outerBorderColor": "{palette.color.transparent}",
2739
- "outerBorderWidth": "{palette.border.border1}",
2740
- "outerBorderGap": "{palette.size.size4}",
2848
+ "alignSelf": "{system.flexAlign.center}",
2849
+ "backgroundColor": "{palette.color.white}",
2850
+ "borderColor": "{palette.color.greyCloud}",
2741
2851
  "borderRadius": "{palette.radius.pill32}",
2742
- "width": "{palette.size.size16}",
2743
- "icon": "{palette.icon.Question}",
2744
- "iconScale": "{system.iconScale.scale1}",
2852
+ "borderWidth": "{palette.border.border1}",
2853
+ "color": "{palette.color.greyShuttle}",
2854
+ "fontName": "{palette.fontName.HelveticaNow}",
2855
+ "fontSize": "{palette.fontSize.size14}",
2856
+ "fontWeight": "{palette.fontWeight.weight700}",
2857
+ "icon": "{palette.icon.Add}",
2858
+ "iconAlignSelf": "{system.flexAlign.center}",
2859
+ "iconBackground": "{palette.color.greyAthens}",
2860
+ "iconBorderRadius": "{palette.radius.pill32}",
2861
+ "iconColor": "{palette.color.greyThunder}",
2862
+ "iconPadding": "{palette.size.size2}",
2863
+ "iconPosition": "{system.position.right}",
2745
2864
  "iconSize": "{palette.size.size16}",
2746
- "iconColor": "{palette.color.greyThunder}"
2865
+ "iconSpace": "{system.integer.2}",
2866
+ "iconTranslateX": "{palette.size.size0}",
2867
+ "iconTranslateY": "{palette.size.size0}",
2868
+ "lineHeight": "{palette.lineHeight.ratio10to7}",
2869
+ "minWidth": "{system.size.zero}",
2870
+ "opacity": "{system.opacity.opaque}",
2871
+ "outerBackgroundColor": "{palette.color.transparent}",
2872
+ "outerBorderColor": "{palette.color.transparent}",
2873
+ "outerBorderGap": "{palette.size.size2}",
2874
+ "outerBorderWidth": "{palette.border.border2}",
2875
+ "paddingBottom": "{palette.size.size8}",
2876
+ "paddingLeft": "{palette.size.size16}",
2877
+ "paddingRight": "{palette.size.size8}",
2878
+ "paddingTop": "{palette.size.size8}",
2879
+ "shadow": "{system.shadow.none}",
2880
+ "textAlign": "{system.flexJustifyContent.center}",
2881
+ "width": "{system.size.none}"
2882
+ }
2883
+ },
2884
+ "TextArea": {
2885
+ "appearances": {},
2886
+ "rules": [],
2887
+ "tokens": {
2888
+ "maxLines": "{system.integer.8}",
2889
+ "minLines": "{system.integer.5}"
2890
+ }
2891
+ },
2892
+ "TextInput": {
2893
+ "appearances": {
2894
+ "focus": "{appearances.TextInput.focus}",
2895
+ "hover": "{appearances.TextInput.hover}",
2896
+ "inactive": "{appearances.TextInput.inactive}",
2897
+ "validation": "{appearances.TextInput.validation}"
2747
2898
  },
2748
2899
  "rules": [
2749
2900
  {
2750
2901
  "if": {
2751
- "inverse": true
2752
- },
2753
- "tokens": {
2754
- "iconColor": "{palette.color.white}"
2755
- }
2756
- },
2757
- {
2758
- "if": {
2759
- "hover": true
2902
+ "hover": true,
2903
+ "inactive": null
2760
2904
  },
2761
2905
  "tokens": {
2762
- "iconScale": "{system.iconScale.scale1_25}"
2906
+ "outerBackgroundColor": "{palette.color.greyMystic}",
2907
+ "outerBorderColor": "{palette.color.greyMystic}"
2763
2908
  }
2764
2909
  },
2765
2910
  {
2766
2911
  "if": {
2767
- "pressed": true
2912
+ "validation": "success"
2768
2913
  },
2769
2914
  "tokens": {
2770
- "iconColor": "{palette.color.greyShuttle}"
2915
+ "borderColor": "{palette.color.greenAccessible}",
2916
+ "icon": "{palette.icon.StatusSuccess}",
2917
+ "iconColor": "{palette.color.greenAccessible}"
2771
2918
  }
2772
2919
  },
2773
2920
  {
2774
2921
  "if": {
2775
- "inverse": true,
2776
- "pressed": true
2922
+ "validation": "error"
2777
2923
  },
2778
2924
  "tokens": {
2779
- "iconColor": "{palette.color.greyCloud}"
2925
+ "borderColor": "{palette.color.red}",
2926
+ "icon": "{palette.icon.StatusError}",
2927
+ "iconColor": "{palette.color.red}"
2780
2928
  }
2781
2929
  },
2782
2930
  {
@@ -2784,333 +2932,394 @@
2784
2932
  "focus": true
2785
2933
  },
2786
2934
  "tokens": {
2787
- "outerBorderColor": "{palette.color.greyShuttle}"
2935
+ "borderColor": "{palette.color.purpleDeluge}",
2936
+ "borderWidth": "{palette.border.border3}",
2937
+ "icon": "{system.icon.none}"
2788
2938
  }
2789
2939
  },
2790
2940
  {
2791
2941
  "if": {
2792
- "inverse": true,
2793
- "focus": true
2942
+ "inactive": true
2794
2943
  },
2795
2944
  "tokens": {
2796
- "outerBorderColor": "{palette.color.greyCloud}"
2945
+ "backgroundColor": "{palette.color.greyAthens}",
2946
+ "borderColor": "{palette.color.greyAthens}"
2797
2947
  }
2798
2948
  }
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
- },
2949
+ ],
2843
2950
  "tokens": {
2951
+ "backgroundColor": "{palette.color.white}",
2952
+ "borderColor": "{palette.color.greyShuttle}",
2953
+ "borderRadius": "{palette.radius.radius4}",
2954
+ "borderWidth": "{palette.border.border1}",
2955
+ "color": "{palette.color.greyCharcoal}",
2844
2956
  "fontName": "{palette.fontName.HelveticaNow}",
2845
- "fontWeight": "{palette.fontWeight.weight400}",
2846
2957
  "fontSize": "{palette.fontSize.size16}",
2847
- "color": "{palette.color.greyThunder}",
2958
+ "fontWeight": "{palette.fontWeight.weight400}",
2959
+ "icon": "{system.icon.none}",
2960
+ "iconColor": "{palette.color.transparent}",
2961
+ "iconSize": "{palette.size.size24}",
2848
2962
  "lineHeight": "{palette.lineHeight.ratio3to2}",
2849
- "letterSpacing": "{system.letterSpacing.none}",
2850
- "textTransform": "{system.textTransform.none}",
2851
- "fontScaleCap": "{palette.fontSize.size64}"
2963
+ "outerBackgroundColor": "{palette.color.transparent}",
2964
+ "outerBorderColor": "{palette.color.transparent}",
2965
+ "outerBorderWidth": "{palette.border.border2}",
2966
+ "paddingBottom": "{palette.size.size12}",
2967
+ "paddingLeft": "{palette.size.size16}",
2968
+ "paddingRight": "{palette.size.size16}",
2969
+ "paddingTop": "{palette.size.size12}"
2970
+ }
2971
+ },
2972
+ "ToggleSwitch": {
2973
+ "appearances": {
2974
+ "focus": "{appearances.ToggleSwitch.focus}",
2975
+ "hover": "{appearances.ToggleSwitch.hover}",
2976
+ "inactive": "{appearances.ToggleSwitch.inactive}",
2977
+ "pressed": "{appearances.ToggleSwitch.pressed}",
2978
+ "selected": "{appearances.ToggleSwitch.selected}"
2852
2979
  },
2853
2980
  "rules": [
2854
2981
  {
2855
2982
  "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"
2983
+ "hover": true
2891
2984
  },
2892
2985
  "tokens": {
2893
- "color": "{palette.color.greyCharcoal}"
2986
+ "backgroundColor": "{palette.color.greyCharcoal}"
2894
2987
  }
2895
2988
  },
2896
2989
  {
2897
2990
  "if": {
2898
- "size": "eyebrow",
2899
- "colour": "secondary"
2991
+ "pressed": true
2900
2992
  },
2901
2993
  "tokens": {
2902
- "color": "{palette.color.purpleTelus}"
2994
+ "backgroundColor": "{palette.color.greyThunder}"
2903
2995
  }
2904
2996
  },
2905
2997
  {
2906
2998
  "if": {
2907
- "inverse": true
2999
+ "focus": true
2908
3000
  },
2909
3001
  "tokens": {
2910
- "color": "{palette.color.white}"
3002
+ "outerBackgroundColor": "{palette.color.white}",
3003
+ "outerBorderColor": "{palette.color.greyShuttle}",
3004
+ "outerBorderGap": "{palette.size.size3}",
3005
+ "outerBorderWidth": "{palette.border.border2}"
2911
3006
  }
2912
3007
  },
2913
3008
  {
2914
3009
  "if": {
2915
- "size": "display1"
3010
+ "focus": true,
3011
+ "pressed": true
2916
3012
  },
2917
3013
  "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}"
3014
+ "outerBorderColor": "{palette.color.greyThunder}"
2923
3015
  }
2924
3016
  },
2925
3017
  {
2926
3018
  "if": {
2927
- "size": "display1",
2928
- "viewport": ["lg", "xl"]
3019
+ "selected": true
2929
3020
  },
2930
3021
  "tokens": {
2931
- "fontSize": "{palette.fontSize.size64}",
2932
- "lineHeight": "{palette.lineHeight.ratio9to8}"
3022
+ "backgroundColor": "{palette.color.greenAccessible}",
3023
+ "icon": "{palette.icon.Checkmark}",
3024
+ "iconColor": "{palette.color.greenAccessible}"
2933
3025
  }
2934
3026
  },
2935
3027
  {
2936
3028
  "if": {
2937
- "size": "display2"
3029
+ "hover": true,
3030
+ "selected": true
2938
3031
  },
2939
3032
  "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}"
3033
+ "backgroundColor": "{palette.color.greenSanFelix}",
3034
+ "iconColor": "{palette.color.greenSanFelix}"
2945
3035
  }
2946
3036
  },
2947
3037
  {
2948
3038
  "if": {
2949
- "size": "display2",
2950
- "viewport": ["lg", "xl"]
3039
+ "pressed": true,
3040
+ "selected": true
2951
3041
  },
2952
3042
  "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}"
3043
+ "backgroundColor": "{palette.color.greenDarkFern}",
3044
+ "iconColor": "{palette.color.greenDarkFern}"
2958
3045
  }
2959
3046
  },
2960
3047
  {
2961
3048
  "if": {
2962
- "size": "h1"
3049
+ "focus": true,
3050
+ "selected": true
2963
3051
  },
2964
3052
  "tokens": {
2965
- "fontSize": "{palette.fontSize.size28}",
2966
- "lineHeight": "{palette.lineHeight.ratio9to7}",
2967
- "letterSpacing": "{palette.letterSpacing.loose}"
3053
+ "outerBorderColor": "{palette.color.greenAccessible}"
2968
3054
  }
2969
3055
  },
2970
3056
  {
2971
3057
  "if": {
2972
- "size": "h1",
2973
- "viewport": ["lg", "xl"]
3058
+ "focus": true,
3059
+ "pressed": true,
3060
+ "selected": true
2974
3061
  },
2975
3062
  "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}"
3063
+ "outerBorderColor": "{palette.color.greenDarkFern}"
2981
3064
  }
2982
3065
  },
2983
3066
  {
2984
3067
  "if": {
2985
- "size": "h2"
3068
+ "inactive": true
2986
3069
  },
2987
3070
  "tokens": {
2988
- "fontSize": "{palette.fontSize.size24}",
2989
- "fontWeight": "{palette.fontWeight.weight500}",
2990
- "fontName": "{palette.fontName.HelveticaNow}",
2991
- "lineHeight": "{palette.lineHeight.ratio4to3}"
3071
+ "backgroundColor": "{palette.color.greyCloud}",
3072
+ "iconColor": "{palette.color.greyShuttle}",
3073
+ "labelColor": "{palette.color.greyShuttle}",
3074
+ "outerBorderColor": "{palette.color.greyCloud}"
2992
3075
  }
2993
- },
3076
+ }
3077
+ ],
3078
+ "tokens": {
3079
+ "alignSelf": "{system.flexAlign.flexStart}",
3080
+ "backgroundColor": "{palette.color.greyShuttle}",
3081
+ "borderColor": "{palette.color.transparent}",
3082
+ "borderRadius": "{palette.radius.pill32}",
3083
+ "borderWidth": "{palette.border.none}",
3084
+ "icon": "{system.icon.none}",
3085
+ "iconColor": "{palette.color.greyShuttle}",
3086
+ "iconSize": "{palette.size.size12}",
3087
+ "labelColor": "{palette.color.greyCharcoal}",
3088
+ "labelFontName": "{palette.fontName.HelveticaNow}",
3089
+ "labelFontSize": "{palette.fontSize.size16}",
3090
+ "labelFontWeight": "{palette.fontWeight.weight400}",
3091
+ "labelLineHeight": "{palette.lineHeight.ratio3to2}",
3092
+ "labelMarginLeft": "{palette.size.size10}",
3093
+ "opacity": "{system.opacity.opaque}",
3094
+ "outerBackgroundColor": "{palette.color.transparent}",
3095
+ "outerBorderColor": "{palette.color.transparent}",
3096
+ "outerBorderGap": "{palette.size.size0}",
3097
+ "outerBorderWidth": "{palette.border.none}",
3098
+ "paddingBottom": "{system.size.zero}",
3099
+ "paddingLeft": "{system.size.zero}",
3100
+ "paddingRight": "{system.size.zero}",
3101
+ "paddingTop": "{system.size.zero}",
3102
+ "shadow": "{palette.shadow.surfaceInset}",
3103
+ "switchBorderColor": "{palette.color.transparent}",
3104
+ "switchBorderRadius": "{palette.radius.pill32}",
3105
+ "switchBorderWidth": "{palette.border.none}",
3106
+ "switchColor": "{palette.color.white}",
3107
+ "switchShadow": "{palette.shadow.surfaceRaised}",
3108
+ "switchSize": "{palette.size.size16}",
3109
+ "trackBorderColor": "{palette.color.transparent}",
3110
+ "trackBorderRadius": "{palette.radius.pill32}",
3111
+ "trackBorderWidth": "{palette.border.border3}",
3112
+ "width": "{palette.size.size40}"
3113
+ }
3114
+ },
3115
+ "ToggleSwitchGroup": {
3116
+ "appearances": {
3117
+ "viewport": "{appearances.system.viewport}"
3118
+ },
3119
+ "rules": [
2994
3120
  {
2995
3121
  "if": {
2996
- "size": "h2",
2997
3122
  "viewport": ["lg", "xl"]
2998
3123
  },
2999
3124
  "tokens": {
3000
- "fontSize": "{palette.fontSize.size28}",
3001
- "lineHeight": "{palette.lineHeight.ratio9to7}",
3002
- "letterSpacing": "{palette.letterSpacing.loose}"
3125
+ "space": "{system.integer.3}"
3003
3126
  }
3004
- },
3127
+ }
3128
+ ],
3129
+ "tokens": {
3130
+ "alignItems": "{system.flexAlign.flexStart}",
3131
+ "direction": "{system.direction.column}",
3132
+ "flexGrow": "{system.integer.0}",
3133
+ "flexShrink": "{system.integer.0}",
3134
+ "justifyContent": "{system.flexJustifyContent.flexStart}",
3135
+ "space": "{system.integer.1}"
3136
+ }
3137
+ },
3138
+ "Tooltip": {
3139
+ "appearances": {
3140
+ "inverse": {
3141
+ "type": "variant",
3142
+ "values": [true]
3143
+ }
3144
+ },
3145
+ "rules": [
3005
3146
  {
3006
3147
  "if": {
3007
- "size": "h3"
3148
+ "inverse": true
3008
3149
  },
3009
3150
  "tokens": {
3010
- "fontSize": "{palette.fontSize.size20}",
3011
- "fontWeight": "{palette.fontWeight.weight500}",
3012
- "fontName": "{palette.fontName.HelveticaNow}",
3013
- "lineHeight": "{palette.lineHeight.ratio7to5}"
3151
+ "backgroundColor": "{palette.color.white}",
3152
+ "color": "{palette.color.greyCharcoal}"
3014
3153
  }
3154
+ }
3155
+ ],
3156
+ "tokens": {
3157
+ "arrowBorderRadius": "{palette.radius.radius1}",
3158
+ "arrowOffset": "{palette.size.size4}",
3159
+ "arrowWidth": "{palette.size.size16}",
3160
+ "backgroundColor": "{palette.color.greyThunder}",
3161
+ "borderRadius": "{palette.radius.radius8}",
3162
+ "color": "{palette.color.white}",
3163
+ "fontName": "{palette.fontName.HelveticaNow}",
3164
+ "fontSize": "{palette.fontSize.size14}",
3165
+ "fontWeight": "{palette.fontWeight.weight400}",
3166
+ "lineHeight": "{palette.lineHeight.ratio3to2}",
3167
+ "paddingBottom": "{palette.size.size8}",
3168
+ "paddingLeft": "{palette.size.size16}",
3169
+ "paddingRight": "{palette.size.size16}",
3170
+ "paddingTop": "{palette.size.size8}",
3171
+ "shadow": "{palette.shadow.elevation1}"
3172
+ }
3173
+ },
3174
+ "TooltipButton": {
3175
+ "appearances": {
3176
+ "focus": "{appearances.TooltipButton.focus}",
3177
+ "hover": "{appearances.TooltipButton.hover}",
3178
+ "inverse": {
3179
+ "type": "variant",
3180
+ "values": [true]
3015
3181
  },
3182
+ "pressed": "{appearances.TooltipButton.pressed}"
3183
+ },
3184
+ "rules": [
3016
3185
  {
3017
3186
  "if": {
3018
- "size": "h3",
3019
- "viewport": ["lg", "xl"]
3187
+ "inverse": true
3020
3188
  },
3021
3189
  "tokens": {
3022
- "fontSize": "{palette.fontSize.size24}",
3023
- "lineHeight": "{palette.lineHeight.ratio4to3}"
3190
+ "iconColor": "{palette.color.white}"
3024
3191
  }
3025
3192
  },
3026
3193
  {
3027
3194
  "if": {
3028
- "size": "h4"
3195
+ "hover": true
3029
3196
  },
3030
3197
  "tokens": {
3031
- "fontSize": "{palette.fontSize.size16}",
3032
- "fontWeight": "{palette.fontWeight.weight500}",
3033
- "fontName": "{palette.fontName.HelveticaNow}",
3034
- "lineHeight": "{palette.lineHeight.ratio3to2}"
3198
+ "iconScale": "{system.iconScale.scale1_25}"
3035
3199
  }
3036
3200
  },
3037
3201
  {
3038
3202
  "if": {
3039
- "size": "h5"
3203
+ "pressed": true
3040
3204
  },
3041
3205
  "tokens": {
3042
- "fontSize": "{palette.fontSize.size14}",
3043
- "fontWeight": "{palette.fontWeight.weight500}",
3044
- "fontName": "{palette.fontName.HelveticaNow}",
3045
- "lineHeight": "{palette.lineHeight.ratio9to7}"
3206
+ "iconColor": "{palette.color.greyShuttle}"
3046
3207
  }
3047
3208
  },
3048
3209
  {
3049
3210
  "if": {
3050
- "size": "h6"
3211
+ "inverse": true,
3212
+ "pressed": true
3051
3213
  },
3052
3214
  "tokens": {
3053
- "fontSize": "{palette.fontSize.size12}",
3054
- "fontWeight": "{palette.fontWeight.weight700}",
3055
- "fontName": "{palette.fontName.HelveticaNow}",
3056
- "lineHeight": "{palette.lineHeight.ratio4to3}"
3215
+ "iconColor": "{palette.color.greyCloud}"
3057
3216
  }
3058
3217
  },
3059
3218
  {
3060
3219
  "if": {
3061
- "size": "large"
3220
+ "focus": true
3062
3221
  },
3063
3222
  "tokens": {
3064
- "fontSize": "{palette.fontSize.size20}",
3065
- "lineHeight": "{palette.lineHeight.ratio8to5}"
3223
+ "outerBorderColor": "{palette.color.greyShuttle}"
3066
3224
  }
3067
3225
  },
3068
3226
  {
3069
3227
  "if": {
3070
- "size": "large",
3071
- "compact": true
3228
+ "focus": true,
3229
+ "inverse": true
3072
3230
  },
3073
3231
  "tokens": {
3074
- "lineHeight": "{palette.lineHeight.ratio6to5}"
3232
+ "outerBorderColor": "{palette.color.greyCloud}"
3075
3233
  }
3234
+ }
3235
+ ],
3236
+ "tokens": {
3237
+ "borderRadius": "{palette.radius.pill32}",
3238
+ "icon": "{palette.icon.Question}",
3239
+ "iconColor": "{palette.color.greyThunder}",
3240
+ "iconScale": "{system.iconScale.scale1}",
3241
+ "iconSize": "{palette.size.size16}",
3242
+ "outerBorderColor": "{palette.color.transparent}",
3243
+ "outerBorderGap": "{palette.size.size4}",
3244
+ "outerBorderWidth": "{palette.border.border1}",
3245
+ "width": "{palette.size.size16}"
3246
+ }
3247
+ },
3248
+ "Typography": {
3249
+ "appearances": {
3250
+ "bold": {
3251
+ "description": "Sets the font weight, to bold on some body text styles. Does not change accessibility properties.",
3252
+ "type": "variant",
3253
+ "values": [true]
3254
+ },
3255
+ "colour": {
3256
+ "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.",
3257
+ "type": "variant",
3258
+ "values": ["secondary", "tertiary"]
3259
+ },
3260
+ "compact": {
3261
+ "description": "Reduces line height on some body text styles. For data-rich content, not for flow content",
3262
+ "type": "variant",
3263
+ "values": [true]
3264
+ },
3265
+ "inverse": {
3266
+ "description": "Styles the link white for use on dark backgrounds.",
3267
+ "type": "variant",
3268
+ "values": [true]
3269
+ },
3270
+ "size": {
3271
+ "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.",
3272
+ "type": "variant",
3273
+ "values": [
3274
+ "micro",
3275
+ "small",
3276
+ "large",
3277
+ "eyebrow",
3278
+ "h1",
3279
+ "h2",
3280
+ "h3",
3281
+ "h4",
3282
+ "h5",
3283
+ "h6",
3284
+ "display1",
3285
+ "display2"
3286
+ ]
3076
3287
  },
3288
+ "viewport": "{appearances.system.viewport}"
3289
+ },
3290
+ "rules": [
3077
3291
  {
3078
3292
  "if": {
3079
- "size": null,
3080
- "compact": true
3293
+ "colour": "secondary"
3081
3294
  },
3082
- "description": "The compact line height for the 'default' font size, but doesn't apply for any other styles",
3083
3295
  "tokens": {
3084
- "lineHeight": "{palette.lineHeight.ratio5to4}"
3296
+ "color": "{palette.color.greyCharcoal}"
3085
3297
  }
3086
3298
  },
3087
3299
  {
3088
3300
  "if": {
3089
- "size": "small"
3301
+ "size": ["display1", "display2", "h1", "h2", "h3"]
3090
3302
  },
3091
3303
  "tokens": {
3092
- "fontSize": "{palette.fontSize.size14}",
3093
- "lineHeight": "{palette.lineHeight.ratio10to7}"
3304
+ "color": "{palette.color.purpleTelus}"
3094
3305
  }
3095
3306
  },
3096
3307
  {
3097
3308
  "if": {
3098
- "size": "small",
3099
- "compact": true
3309
+ "colour": "secondary",
3310
+ "size": ["display1", "display2", "h1", "h2", "h3"]
3100
3311
  },
3101
3312
  "tokens": {
3102
- "lineHeight": "{palette.lineHeight.ratio8to7}"
3313
+ "color": "{palette.color.greyThunder}"
3103
3314
  }
3104
3315
  },
3105
3316
  {
3106
3317
  "if": {
3107
- "size": "micro"
3318
+ "colour": "tertiary",
3319
+ "size": "h6"
3108
3320
  },
3109
3321
  "tokens": {
3110
- "fontSize": "{palette.fontSize.size12}",
3111
- "fontWeight": "{palette.fontWeight.weight500}",
3112
- "fontName": "{palette.fontName.HelveticaNow}",
3113
- "lineHeight": "{palette.lineHeight.ratio4to3}"
3322
+ "color": "{palette.color.greyShuttle}"
3114
3323
  }
3115
3324
  },
3116
3325
  {
@@ -3118,454 +3327,269 @@
3118
3327
  "size": "eyebrow"
3119
3328
  },
3120
3329
  "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}"
3330
+ "color": "{palette.color.greyCharcoal}"
3126
3331
  }
3127
3332
  },
3128
3333
  {
3129
3334
  "if": {
3130
- "size": ["large", null, "small", "micro"],
3131
- "bold": true
3132
- },
3133
- "description": "Bold is only available on body text styles, not headings",
3134
- "tokens": {
3135
- "fontWeight": "{palette.fontWeight.weight700}",
3136
- "fontName": "{palette.fontName.HelveticaNow}"
3137
- }
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": [
3173
- {
3174
- "if": {
3175
- "hover": true,
3176
- "inactive": null
3335
+ "colour": "secondary",
3336
+ "size": "eyebrow"
3177
3337
  },
3178
3338
  "tokens": {
3179
- "outerBorderColor": "{palette.color.greyMystic}",
3180
- "outerBackgroundColor": "{palette.color.greyMystic}"
3339
+ "color": "{palette.color.purpleTelus}"
3181
3340
  }
3182
3341
  },
3183
3342
  {
3184
3343
  "if": {
3185
- "validation": "success"
3344
+ "inverse": true
3186
3345
  },
3187
3346
  "tokens": {
3188
- "borderColor": "{palette.color.greenAccessible}",
3189
- "validationIcon": "{palette.icon.StatusSuccess}",
3190
- "validationIconColor": "{palette.color.greenAccessible}"
3347
+ "color": "{palette.color.white}"
3191
3348
  }
3192
3349
  },
3193
3350
  {
3194
3351
  "if": {
3195
- "validation": "error"
3352
+ "size": "display1"
3196
3353
  },
3197
3354
  "tokens": {
3198
- "borderColor": "{palette.color.red}",
3199
- "validationIcon": "{palette.icon.StatusError}",
3200
- "validationIconColor": "{palette.color.red}"
3355
+ "fontName": "{palette.fontName.HelveticaNow}",
3356
+ "fontSize": "{palette.fontSize.size40}",
3357
+ "fontWeight": "{palette.fontWeight.weight300}",
3358
+ "letterSpacing": "{palette.letterSpacing.medium}",
3359
+ "lineHeight": "{palette.lineHeight.ratio6to5}"
3201
3360
  }
3202
3361
  },
3203
3362
  {
3204
3363
  "if": {
3205
- "focus": true
3364
+ "size": "display1",
3365
+ "viewport": ["lg", "xl"]
3206
3366
  },
3207
3367
  "tokens": {
3208
- "borderColor": "{palette.color.purpleDeluge}",
3209
- "borderWidth": "{palette.border.border3}",
3210
- "validationIcon": "{system.icon.none}"
3368
+ "fontSize": "{palette.fontSize.size64}",
3369
+ "lineHeight": "{palette.lineHeight.ratio9to8}"
3211
3370
  }
3212
3371
  },
3213
3372
  {
3214
3373
  "if": {
3215
- "inactive": true
3374
+ "size": "display2"
3216
3375
  },
3217
3376
  "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": [
3377
+ "fontName": "{palette.fontName.HelveticaNow}",
3378
+ "fontSize": "{palette.fontSize.size36}",
3379
+ "fontWeight": "{palette.fontWeight.weight400}",
3380
+ "letterSpacing": "{palette.letterSpacing.medium}",
3381
+ "lineHeight": "{palette.lineHeight.ratio11to9}"
3382
+ }
3383
+ },
3261
3384
  {
3262
3385
  "if": {
3263
- "active": true
3386
+ "size": "display2",
3387
+ "viewport": ["lg", "xl"]
3264
3388
  },
3265
3389
  "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}"
3390
+ "fontName": "{palette.fontName.HelveticaNow}",
3391
+ "fontSize": "{palette.fontSize.size56}",
3392
+ "fontWeight": "{palette.fontWeight.weight300}",
3393
+ "letterSpacing": "{palette.letterSpacing.condensed}",
3394
+ "lineHeight": "{palette.lineHeight.ratio8to7}"
3271
3395
  }
3272
3396
  },
3273
3397
  {
3274
3398
  "if": {
3275
- "type": "child"
3399
+ "size": "h1"
3276
3400
  },
3277
3401
  "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}"
3402
+ "fontSize": "{palette.fontSize.size28}",
3403
+ "letterSpacing": "{palette.letterSpacing.loose}",
3404
+ "lineHeight": "{palette.lineHeight.ratio9to7}"
3284
3405
  }
3285
3406
  },
3286
3407
  {
3287
3408
  "if": {
3288
- "type": "parent",
3289
- "active": true
3409
+ "size": "h1",
3410
+ "viewport": ["lg", "xl"]
3290
3411
  },
3291
3412
  "tokens": {
3292
- "paddingLeft": "{palette.size.size12}"
3413
+ "fontName": "{palette.fontName.HelveticaNow}",
3414
+ "fontSize": "{palette.fontSize.size40}",
3415
+ "fontWeight": "{palette.fontWeight.weight300}",
3416
+ "letterSpacing": "{palette.letterSpacing.medium}",
3417
+ "lineHeight": "{palette.lineHeight.ratio6to5}"
3293
3418
  }
3294
3419
  },
3295
3420
  {
3296
3421
  "if": {
3297
- "type": "parent",
3298
- "active": true,
3299
- "expanded": true
3422
+ "size": "h2"
3300
3423
  },
3301
3424
  "tokens": {
3302
- "paddingLeft": "{palette.size.size16}",
3303
- "accentBackgroundColor": "{palette.color.transparent}",
3304
- "color": "{palette.color.greyCharcoal}"
3425
+ "fontName": "{palette.fontName.HelveticaNow}",
3426
+ "fontSize": "{palette.fontSize.size24}",
3427
+ "fontWeight": "{palette.fontWeight.weight500}",
3428
+ "lineHeight": "{palette.lineHeight.ratio4to3}"
3305
3429
  }
3306
3430
  },
3307
3431
  {
3308
3432
  "if": {
3309
- "hover": true
3433
+ "size": "h2",
3434
+ "viewport": ["lg", "xl"]
3310
3435
  },
3311
3436
  "tokens": {
3312
- "backgroundColor": "{palette.color.greyAthens}",
3313
- "color": "{palette.color.purpleTelus}"
3437
+ "fontSize": "{palette.fontSize.size28}",
3438
+ "letterSpacing": "{palette.letterSpacing.loose}",
3439
+ "lineHeight": "{palette.lineHeight.ratio9to7}"
3314
3440
  }
3315
3441
  },
3316
3442
  {
3317
3443
  "if": {
3318
- "type": "child",
3319
- "active": true
3444
+ "size": "h3"
3320
3445
  },
3321
3446
  "tokens": {
3322
- "backgroundColor": "{palette.color.greyAthens}",
3323
- "color": "{palette.color.purpleTelus}",
3324
- "accentPadding": "{palette.size.size16}",
3325
- "accentBackgroundColor": "{palette.color.purpleTelus}"
3447
+ "fontName": "{palette.fontName.HelveticaNow}",
3448
+ "fontSize": "{palette.fontSize.size20}",
3449
+ "fontWeight": "{palette.fontWeight.weight500}",
3450
+ "lineHeight": "{palette.lineHeight.ratio7to5}"
3326
3451
  }
3327
3452
  },
3328
3453
  {
3329
3454
  "if": {
3330
- "type": "child",
3331
- "active": false,
3332
- "hover": true
3455
+ "size": "h3",
3456
+ "viewport": ["lg", "xl"]
3333
3457
  },
3334
3458
  "tokens": {
3335
- "accentBackgroundColor": "{palette.color.white}",
3336
- "color": "{palette.color.greyCharcoal}",
3337
- "accentOffset": "{system.size.zero}",
3338
- "accentWidth": "{palette.size.size16}"
3459
+ "fontSize": "{palette.fontSize.size24}",
3460
+ "lineHeight": "{palette.lineHeight.ratio4to3}"
3339
3461
  }
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": [
3462
+ },
3363
3463
  {
3364
3464
  "if": {
3365
- "expanded": true
3465
+ "size": "h4"
3366
3466
  },
3367
3467
  "tokens": {
3368
- "icon": "{palette.icon.CaretUp}"
3468
+ "fontName": "{palette.fontName.HelveticaNow}",
3469
+ "fontSize": "{palette.fontSize.size16}",
3470
+ "fontWeight": "{palette.fontWeight.weight500}",
3471
+ "lineHeight": "{palette.lineHeight.ratio3to2}"
3369
3472
  }
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": [
3473
+ },
3409
3474
  {
3410
3475
  "if": {
3411
- "viewport": ["lg", "xl"]
3476
+ "size": "h5"
3412
3477
  },
3413
3478
  "tokens": {
3414
- "space": "{system.integer.3}"
3479
+ "fontName": "{palette.fontName.HelveticaNow}",
3480
+ "fontSize": "{palette.fontSize.size14}",
3481
+ "fontWeight": "{palette.fontWeight.weight500}",
3482
+ "lineHeight": "{palette.lineHeight.ratio9to7}"
3415
3483
  }
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": [
3484
+ },
3464
3485
  {
3465
3486
  "if": {
3466
- "pressed": true
3487
+ "size": "h6"
3467
3488
  },
3468
3489
  "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}"
3490
+ "fontName": "{palette.fontName.HelveticaNow}",
3491
+ "fontSize": "{palette.fontSize.size12}",
3492
+ "fontWeight": "{palette.fontWeight.weight700}",
3493
+ "lineHeight": "{palette.lineHeight.ratio4to3}"
3475
3494
  }
3476
3495
  },
3477
3496
  {
3478
3497
  "if": {
3479
- "focus": true
3498
+ "size": "large"
3480
3499
  },
3481
3500
  "tokens": {
3482
- "borderColor": "{palette.color.greyShuttle}",
3483
- "outerBorderColor": "{palette.color.greyShuttle}",
3484
- "outerBorderGap": "{palette.size.size2}",
3485
- "outerBorderWidth": "{palette.size.size2}"
3501
+ "fontSize": "{palette.fontSize.size20}",
3502
+ "lineHeight": "{palette.lineHeight.ratio8to5}"
3486
3503
  }
3487
3504
  },
3488
3505
  {
3489
3506
  "if": {
3490
- "hover": true
3507
+ "compact": true,
3508
+ "size": "large"
3491
3509
  },
3492
3510
  "tokens": {
3493
- "borderWidth": "{palette.border.border3}"
3511
+ "lineHeight": "{palette.lineHeight.ratio6to5}"
3494
3512
  }
3495
3513
  },
3496
3514
  {
3515
+ "description": "The compact line height for the 'default' font size, but doesn't apply for any other styles",
3497
3516
  "if": {
3498
- "selected": true
3517
+ "compact": true,
3518
+ "size": null
3499
3519
  },
3500
3520
  "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}"
3521
+ "lineHeight": "{palette.lineHeight.ratio5to4}"
3507
3522
  }
3508
3523
  },
3509
3524
  {
3510
3525
  "if": {
3511
- "selected": true,
3512
- "hover": true
3526
+ "size": "small"
3513
3527
  },
3514
3528
  "tokens": {
3515
- "backgroundColor": "{palette.color.purpleDeluge}",
3516
- "iconBackground": "{palette.color.purpleTelus}"
3529
+ "fontSize": "{palette.fontSize.size14}",
3530
+ "lineHeight": "{palette.lineHeight.ratio10to7}"
3517
3531
  }
3518
3532
  },
3519
3533
  {
3520
3534
  "if": {
3521
- "selected": true,
3522
- "pressed": true
3535
+ "compact": true,
3536
+ "size": "small"
3523
3537
  },
3524
3538
  "tokens": {
3525
- "backgroundColor": "{palette.color.purpleDark}",
3526
- "iconBackground": "{palette.color.purpleDeluge}"
3539
+ "lineHeight": "{palette.lineHeight.ratio8to7}"
3527
3540
  }
3528
3541
  },
3529
3542
  {
3530
3543
  "if": {
3531
- "selected": true,
3532
- "focus": true
3544
+ "size": "micro"
3533
3545
  },
3534
3546
  "tokens": {
3535
- "outerBorderColor": "{palette.color.purpleTelus}"
3547
+ "fontName": "{palette.fontName.HelveticaNow}",
3548
+ "fontSize": "{palette.fontSize.size12}",
3549
+ "fontWeight": "{palette.fontWeight.weight500}",
3550
+ "lineHeight": "{palette.lineHeight.ratio4to3}"
3536
3551
  }
3537
3552
  },
3538
3553
  {
3539
3554
  "if": {
3540
- "selected": true,
3541
- "focus": true,
3542
- "pressed": true
3555
+ "size": "eyebrow"
3543
3556
  },
3544
3557
  "tokens": {
3545
- "outerBorderColor": "{palette.color.purpleDark}",
3546
- "iconBackground": "{palette.color.purpleDeluge}"
3558
+ "fontName": "{palette.fontName.HelveticaNow}",
3559
+ "fontSize": "{palette.fontSize.size14}",
3560
+ "fontWeight": "{palette.fontWeight.weight700}",
3561
+ "lineHeight": "{palette.lineHeight.ratio9to7}",
3562
+ "textTransform": "{system.textTransform.uppercase}"
3547
3563
  }
3548
3564
  },
3549
3565
  {
3566
+ "description": "Bold is only available on body text styles, not headings",
3550
3567
  "if": {
3551
- "inactive": true
3568
+ "bold": true,
3569
+ "size": ["large", null, "small", "micro"]
3552
3570
  },
3553
3571
  "tokens": {
3554
- "backgroundColor": "{palette.color.greyCloud}",
3555
- "color": "{palette.color.white}",
3556
- "borderWidth": "{system.border.zero}"
3572
+ "fontName": "{palette.fontName.HelveticaNow}",
3573
+ "fontWeight": "{palette.fontWeight.weight700}"
3557
3574
  }
3558
3575
  }
3559
- ]
3576
+ ],
3577
+ "tokens": {
3578
+ "color": "{palette.color.greyThunder}",
3579
+ "fontName": "{palette.fontName.HelveticaNow}",
3580
+ "fontScaleCap": "{palette.fontSize.size64}",
3581
+ "fontSize": "{palette.fontSize.size16}",
3582
+ "fontWeight": "{palette.fontWeight.weight400}",
3583
+ "letterSpacing": "{system.letterSpacing.none}",
3584
+ "lineHeight": "{palette.lineHeight.ratio3to2}",
3585
+ "textTransform": "{system.textTransform.none}"
3586
+ }
3560
3587
  },
3561
3588
  "spacingScale": {
3562
3589
  "appearances": {
3563
3590
  "space": "{appearances.spacingScale.space}",
3564
3591
  "viewport": "{appearances.system.viewport}"
3565
3592
  },
3566
- "tokens": {
3567
- "size": "{palette.size.size96}"
3568
- },
3569
3593
  "rules": [
3570
3594
  {
3571
3595
  "if": {
@@ -3725,7 +3749,10 @@
3725
3749
  "size": "{palette.size.size0}"
3726
3750
  }
3727
3751
  }
3728
- ]
3752
+ ],
3753
+ "tokens": {
3754
+ "size": "{palette.size.size96}"
3755
+ }
3729
3756
  }
3730
3757
  }
3731
3758
  }