@telus-uds/theme-koodo 0.1.0-prerelease.0 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +127 -0
  2. package/README.md +1 -1
  3. package/build/schema.json +2607 -3508
  4. package/build/theme.js +25 -10
  5. package/package.json +6 -6
  6. package/theme.json +952 -937
package/theme.json CHANGED
@@ -1,17 +1,13 @@
1
1
  {
2
- "metadata": {
3
- "name": "koodo",
4
- "package": "@telus-uds/theme-koodo"
5
- },
6
2
  "components": {
7
3
  "ActivityIndicator": {
8
4
  "appearances": {},
5
+ "rules": [],
9
6
  "tokens": {
7
+ "color": "{palette.color.darkMosque}",
10
8
  "size": "{palette.size.size40}",
11
- "thickness": "{palette.border.border4}",
12
- "color": "{palette.color.darkMosque}"
13
- },
14
- "rules": []
9
+ "thickness": "{palette.border.border4}"
10
+ }
15
11
  },
16
12
  "Box": {
17
13
  "appearances": {
@@ -20,9 +16,6 @@
20
16
  "values": ["light", "lightest"]
21
17
  }
22
18
  },
23
- "tokens": {
24
- "backgroundColor": "{system.color.none}"
25
- },
26
19
  "rules": [
27
20
  {
28
21
  "if": {
@@ -40,55 +33,33 @@
40
33
  "backgroundColor": "{palette.color.gallery}"
41
34
  }
42
35
  }
43
- ]
36
+ ],
37
+ "tokens": {
38
+ "backgroundColor": "{system.color.none}"
39
+ }
44
40
  },
45
41
  "Button": {
46
42
  "appearances": {
43
+ "clear": {
44
+ "description": "Gives a button borders and a transparent background",
45
+ "type": "variant",
46
+ "values": [true]
47
+ },
48
+ "focus": "{appearances.Button.focus}",
49
+ "hover": "{appearances.Button.hover}",
50
+ "inactive": "{appearances.Button.inactive}",
51
+ "pressed": "{appearances.Button.pressed}",
47
52
  "rank": {
48
53
  "description": "Prominence of the button. Use the default (\"primary\") button style for the main action on a page or in a form, and \"secondary\" style for secondary actions.",
49
- "values": ["secondary"],
50
- "type": "variant"
54
+ "type": "variant",
55
+ "values": ["secondary"]
51
56
  },
52
57
  "rounded": {
53
58
  "description": "Gives a button \"pill-style\" rounded sides",
54
- "values": [true],
55
- "type": "variant"
59
+ "type": "variant",
60
+ "values": [true]
56
61
  },
57
- "clear": {
58
- "description": "Gives a button borders and a transparent background",
59
- "values": [true],
60
- "type": "variant"
61
- },
62
- "hover": "{appearances.Button.hover}",
63
- "focus": "{appearances.Button.focus}",
64
- "pressed": "{appearances.Button.pressed}",
65
- "selected": "{appearances.Button.selected}",
66
- "inactive": "{appearances.Button.inactive}"
67
- },
68
- "tokens": {
69
- "borderColor": "{palette.color.white}",
70
- "borderWidth": "{palette.border.none}",
71
- "borderRadius": "{palette.radius.radius4}",
72
- "shadow": "{system.shadow.none}",
73
- "fontSize": "{palette.fontSize.size16}",
74
- "fontName": "{palette.fontName.StagSans}",
75
- "fontWeight": "{palette.fontWeight.weight600}",
76
- "color": "{palette.color.white}",
77
- "lineHeight": "{palette.lineHeight.multiply150}",
78
- "textAlign": "{system.flexJustifyContent.center}",
79
- "alignSelf": "{system.flexAlign.flexStart}",
80
- "backgroundColor": "{palette.color.mosque}",
81
- "opacity": "{system.opacity.opaque}",
82
- "paddingLeft": "{palette.size.size24}",
83
- "paddingRight": "{palette.size.size24}",
84
- "paddingTop": "{palette.size.size8}",
85
- "paddingBottom": "{palette.size.size8}",
86
- "width": "{system.size.none}",
87
- "minWidth": "{system.size.zero}",
88
- "outerBorderColor": "{palette.color.white}",
89
- "outerBorderWidth": "{palette.border.border2}",
90
- "outerBorderGap": "{palette.border.border2}",
91
- "outerBackgroundColor": "{palette.color.transparent}"
62
+ "selected": "{appearances.Button.selected}"
92
63
  },
93
64
  "rules": [
94
65
  {
@@ -104,10 +75,10 @@
104
75
  "clear": true
105
76
  },
106
77
  "tokens": {
107
- "borderWidth": "{palette.border.border2}",
78
+ "backgroundColor": "{system.color.none}",
108
79
  "borderColor": "{palette.color.mosque}",
109
- "color": "{palette.color.mosque}",
110
- "backgroundColor": "{system.color.none}"
80
+ "borderWidth": "{palette.border.border2}",
81
+ "color": "{palette.color.mosque}"
111
82
  }
112
83
  },
113
84
  {
@@ -115,9 +86,9 @@
115
86
  "hover": true
116
87
  },
117
88
  "tokens": {
118
- "color": "{palette.color.white}",
89
+ "backgroundColor": "{palette.color.darkMosque}",
119
90
  "borderColor": "{palette.color.darkMosque}",
120
- "backgroundColor": "{palette.color.darkMosque}"
91
+ "color": "{palette.color.white}"
121
92
  }
122
93
  },
123
94
  {
@@ -126,8 +97,8 @@
126
97
  "hover": true
127
98
  },
128
99
  "tokens": {
129
- "borderWidth": "{palette.border.none}",
130
- "backgroundColor": "{palette.color.mosque}"
100
+ "backgroundColor": "{palette.color.mosque}",
101
+ "borderWidth": "{palette.border.none}"
131
102
  }
132
103
  },
133
104
  {
@@ -135,9 +106,9 @@
135
106
  "pressed": true
136
107
  },
137
108
  "tokens": {
138
- "color": "{palette.color.white}",
109
+ "backgroundColor": "{palette.color.mosque}",
139
110
  "borderColor": "{palette.color.mosque}",
140
- "backgroundColor": "{palette.color.mosque}"
111
+ "color": "{palette.color.white}"
141
112
  }
142
113
  },
143
114
  {
@@ -160,8 +131,8 @@
160
131
  },
161
132
  {
162
133
  "if": {
163
- "rank": "secondary",
164
- "clear": true
134
+ "clear": true,
135
+ "rank": "secondary"
165
136
  },
166
137
  "tokens": {
167
138
  "backgroundColor": "{palette.color.white}",
@@ -171,8 +142,8 @@
171
142
  },
172
143
  {
173
144
  "if": {
174
- "rank": "secondary",
175
- "hover": true
145
+ "hover": true,
146
+ "rank": "secondary"
176
147
  },
177
148
  "tokens": {
178
149
  "backgroundColor": "{palette.color.darkBlue}",
@@ -182,8 +153,8 @@
182
153
  },
183
154
  {
184
155
  "if": {
185
- "rank": "secondary",
186
- "pressed": true
156
+ "pressed": true,
157
+ "rank": "secondary"
187
158
  },
188
159
  "tokens": {
189
160
  "backgroundColor": "{palette.color.onahau}",
@@ -193,8 +164,8 @@
193
164
  },
194
165
  {
195
166
  "if": {
196
- "rank": "secondary",
197
- "focus": true
167
+ "focus": true,
168
+ "rank": "secondary"
198
169
  },
199
170
  "tokens": {
200
171
  "outerBorderColor": "{palette.color.blue}"
@@ -202,9 +173,9 @@
202
173
  },
203
174
  {
204
175
  "if": {
205
- "rank": "secondary",
176
+ "focus": true,
206
177
  "pressed": true,
207
- "focus": true
178
+ "rank": "secondary"
208
179
  },
209
180
  "tokens": {
210
181
  "outerBorderColor": "{palette.color.onahau}"
@@ -225,65 +196,65 @@
225
196
  "tokens": {
226
197
  "opacity": "{palette.opacity.opacity8}",
227
198
  "outerBorderColor": "{palette.color.mosque}",
228
- "outerBorderGap": "{palette.border.border1}",
199
+ "outerBorderGap": "{palette.size.size1}",
229
200
  "outerBorderWidth": "{palette.border.border4}"
230
201
  }
231
202
  },
232
203
  {
233
204
  "if": {
234
- "selected": true,
235
- "focus": true
205
+ "focus": true,
206
+ "selected": true
236
207
  },
237
208
  "tokens": {
238
- "outerBorderGap": "{palette.border.border2}"
209
+ "outerBorderGap": "{palette.size.size2}"
239
210
  }
240
211
  }
241
- ]
212
+ ],
213
+ "tokens": {
214
+ "alignSelf": "{system.flexAlign.flexStart}",
215
+ "backgroundColor": "{palette.color.mosque}",
216
+ "borderColor": "{palette.color.white}",
217
+ "borderRadius": "{palette.radius.radius4}",
218
+ "borderWidth": "{palette.border.none}",
219
+ "color": "{palette.color.white}",
220
+ "fontName": "{palette.fontName.StagSans}",
221
+ "fontSize": "{palette.fontSize.size16}",
222
+ "fontWeight": "{palette.fontWeight.weight600}",
223
+ "lineHeight": "{palette.lineHeight.multiply150}",
224
+ "minWidth": "{system.size.zero}",
225
+ "opacity": "{system.opacity.opaque}",
226
+ "outerBackgroundColor": "{palette.color.transparent}",
227
+ "outerBorderColor": "{palette.color.white}",
228
+ "outerBorderGap": "{palette.size.size2}",
229
+ "outerBorderWidth": "{palette.border.border2}",
230
+ "paddingBottom": "{palette.size.size8}",
231
+ "paddingLeft": "{palette.size.size24}",
232
+ "paddingRight": "{palette.size.size24}",
233
+ "paddingTop": "{palette.size.size8}",
234
+ "shadow": "{system.shadow.none}",
235
+ "textAlign": "{system.flexJustifyContent.center}",
236
+ "width": "{system.size.none}"
237
+ }
242
238
  },
243
239
  "ButtonGroup": {
244
240
  "appearances": {},
241
+ "rules": [],
245
242
  "tokens": {
246
- "space": "{system.integer.3}",
247
- "direction": "{system.direction.row}",
248
243
  "alignItems": "{system.flexAlign.center}",
249
- "justifyContent": "{system.flexJustifyContent.flexStart}",
244
+ "direction": "{system.direction.row}",
250
245
  "flexGrow": "{system.integer.0}",
251
- "flexShrink": "{system.integer.0}"
252
- },
253
- "rules": []
246
+ "flexShrink": "{system.integer.0}",
247
+ "justifyContent": "{system.flexJustifyContent.flexStart}",
248
+ "space": "{system.integer.3}"
249
+ }
254
250
  },
255
251
  "ButtonGroupItem": {
256
252
  "appearances": {
257
- "hover": "{appearances.ButtonGroupItem.hover}",
258
253
  "focus": "{appearances.ButtonGroupItem.focus}",
254
+ "hover": "{appearances.ButtonGroupItem.hover}",
255
+ "inactive": "{appearances.ButtonGroupItem.inactive}",
259
256
  "pressed": "{appearances.ButtonGroupItem.pressed}",
260
- "selected": "{appearances.ButtonGroupItem.selected}",
261
- "inactive": "{appearances.ButtonGroupItem.inactive}"
262
- },
263
- "tokens": {
264
- "borderColor": "{palette.color.darkMosque}",
265
- "borderWidth": "{palette.border.none}",
266
- "borderRadius": "{palette.radius.radius4}",
267
- "shadow": "{system.shadow.none}",
268
- "fontSize": "{palette.fontSize.size14}",
269
- "color": "{palette.color.white}",
270
- "lineHeight": "{palette.lineHeight.multiply150}",
271
- "fontName": "{palette.fontName.StagSans}",
272
- "fontWeight": "{palette.fontWeight.weight600}",
273
- "textAlign": "{system.flexJustifyContent.center}",
274
- "alignSelf": "{system.flexAlign.flexStart}",
275
- "backgroundColor": "{palette.color.mosque}",
276
- "opacity": "{system.opacity.opaque}",
277
- "paddingLeft": "{palette.size.size24}",
278
- "paddingRight": "{palette.size.size24}",
279
- "paddingTop": "{palette.size.size8}",
280
- "paddingBottom": "{palette.size.size8}",
281
- "width": "{system.size.none}",
282
- "minWidth": "{system.size.zero}",
283
- "outerBorderColor": "{palette.color.transparent}",
284
- "outerBorderWidth": "{palette.border.border2}",
285
- "outerBorderGap": "{palette.border.border2}",
286
- "outerBackgroundColor": "{palette.color.transparent}"
257
+ "selected": "{appearances.ButtonGroupItem.selected}"
287
258
  },
288
259
  "rules": [
289
260
  {
@@ -291,9 +262,9 @@
291
262
  "pressed": true
292
263
  },
293
264
  "tokens": {
294
- "color": "{palette.color.white}",
265
+ "backgroundColor": "{palette.color.mosque}",
295
266
  "borderColor": "{palette.color.mosque}",
296
- "backgroundColor": "{palette.color.mosque}"
267
+ "color": "{palette.color.white}"
297
268
  }
298
269
  },
299
270
  {
@@ -319,7 +290,7 @@
319
290
  "tokens": {
320
291
  "opacity": "{palette.opacity.opacity8}",
321
292
  "outerBorderColor": "{palette.color.mosque}",
322
- "outerBorderGap": "{palette.border.border1}",
293
+ "outerBorderGap": "{palette.size.size1}",
323
294
  "outerBorderWidth": "{palette.border.border4}"
324
295
  }
325
296
  },
@@ -338,8 +309,8 @@
338
309
  },
339
310
  "tokens": {
340
311
  "backgroundColor": "{palette.color.dove}",
341
- "color": "{palette.color.white}",
342
- "borderWidth": "{system.border.zero}"
312
+ "borderWidth": "{system.border.zero}",
313
+ "color": "{palette.color.white}"
343
314
  }
344
315
  },
345
316
  {
@@ -349,37 +320,62 @@
349
320
  "tokens": {
350
321
  "opacity": "{palette.opacity.opacity8}",
351
322
  "outerBorderColor": "{palette.color.mosque}",
352
- "outerBorderGap": "{palette.border.border1}",
323
+ "outerBorderGap": "{palette.size.size1}",
353
324
  "outerBorderWidth": "{palette.border.border4}"
354
325
  }
355
326
  },
356
327
  {
357
328
  "if": {
358
- "selected": true,
359
- "focus": true
329
+ "focus": true,
330
+ "selected": true
360
331
  },
361
332
  "tokens": {
362
333
  "outerBorderColor": "{palette.color.darkMosque}"
363
334
  }
364
335
  }
365
- ]
336
+ ],
337
+ "tokens": {
338
+ "alignSelf": "{system.flexAlign.flexStart}",
339
+ "backgroundColor": "{palette.color.mosque}",
340
+ "borderColor": "{palette.color.darkMosque}",
341
+ "borderRadius": "{palette.radius.radius4}",
342
+ "borderWidth": "{palette.border.none}",
343
+ "color": "{palette.color.white}",
344
+ "fontName": "{palette.fontName.StagSans}",
345
+ "fontSize": "{palette.fontSize.size14}",
346
+ "fontWeight": "{palette.fontWeight.weight600}",
347
+ "lineHeight": "{palette.lineHeight.multiply150}",
348
+ "minWidth": "{system.size.zero}",
349
+ "opacity": "{system.opacity.opaque}",
350
+ "outerBackgroundColor": "{palette.color.transparent}",
351
+ "outerBorderColor": "{palette.color.transparent}",
352
+ "outerBorderGap": "{palette.size.size2}",
353
+ "outerBorderWidth": "{palette.border.border2}",
354
+ "paddingBottom": "{palette.size.size8}",
355
+ "paddingLeft": "{palette.size.size24}",
356
+ "paddingRight": "{palette.size.size24}",
357
+ "paddingTop": "{palette.size.size8}",
358
+ "shadow": "{system.shadow.none}",
359
+ "textAlign": "{system.flexJustifyContent.center}",
360
+ "width": "{system.size.none}"
361
+ }
366
362
  },
367
363
  "Card": {
368
364
  "appearances": {},
365
+ "rules": [],
369
366
  "tokens": {
370
- "flex": "{system.integer.1}",
371
367
  "backgroundColor": "{palette.color.texas}",
372
368
  "borderColor": "{system.color.none}",
373
369
  "borderRadius": "{palette.radius.none}",
374
370
  "borderWidth": "{palette.border.none}",
371
+ "flex": "{system.integer.1}",
372
+ "minWidth": "{system.size.none}",
375
373
  "paddingBottom": "{palette.size.size16}",
376
374
  "paddingLeft": "{palette.size.size16}",
377
375
  "paddingRight": "{palette.size.size16}",
378
376
  "paddingTop": "{palette.size.size16}",
379
- "minWidth": "{system.size.none}",
380
377
  "shadow": "{system.shadow.none}"
381
- },
382
- "rules": []
378
+ }
383
379
  },
384
380
  "Checkbox": {
385
381
  "appearances": {
@@ -389,6 +385,17 @@
389
385
  "hover": "{appearances.Checkbox.hover}",
390
386
  "inactive": "{appearances.Checkbox.inactive}"
391
387
  },
388
+ "rules": [
389
+ {
390
+ "if": {
391
+ "focus": true
392
+ },
393
+ "tokens": {
394
+ "inputOutlineColor": "{palette.color.silver}",
395
+ "inputOutlineWidth": "{palette.border.border2}"
396
+ }
397
+ }
398
+ ],
392
399
  "tokens": {
393
400
  "containerBackgroundColor": "{palette.color.transparent}",
394
401
  "feedbackMarginBottom": "{system.size.zero}",
@@ -409,79 +416,52 @@
409
416
  "inputWidth": "{palette.size.size20}",
410
417
  "labelColor": "{palette.color.black}",
411
418
  "labelFontName": "{palette.fontName.StagSans}",
412
- "labelFontWeight": "{palette.fontWeight.weight400}",
413
419
  "labelFontSize": "{palette.fontSize.size16}",
420
+ "labelFontWeight": "{palette.fontWeight.weight400}",
414
421
  "labelLineHeight": "{palette.lineHeight.multiply150}",
415
422
  "labelMarginLeft": "{palette.size.size8}"
416
- },
417
- "rules": [
418
- {
419
- "if": {
420
- "focus": true
421
- },
422
- "tokens": {
423
- "inputOutlineColor": "{palette.color.silver}",
424
- "inputOutlineWidth": "{palette.border.border2}"
425
- }
426
- }
427
- ]
423
+ }
428
424
  },
429
425
  "CheckboxGroup": {
430
426
  "appearances": {},
427
+ "rules": [],
431
428
  "tokens": {
432
- "space": "{system.integer.2}",
433
- "fieldSpace": "{system.integer.2}"
434
- },
435
- "rules": []
429
+ "fieldSpace": "{system.integer.2}",
430
+ "space": "{system.integer.2}"
431
+ }
436
432
  },
437
433
  "ChevronLink": {
438
434
  "appearances": {},
435
+ "rules": [],
439
436
  "tokens": {
440
- "leftIcon": "{palette.icon.ChevronLeft}",
441
- "rightIcon": "{palette.icon.ChevronRight}",
442
437
  "iconDisplace": "{palette.size.size4}",
443
438
  "iconSize": "{palette.size.size24}",
444
- "iconSpace": "{system.integer.0}"
445
- },
446
- "rules": []
439
+ "iconSpace": "{system.integer.0}",
440
+ "leftIcon": "{palette.icon.ChevronLeft}",
441
+ "rightIcon": "{palette.icon.ChevronRight}"
442
+ }
447
443
  },
448
444
  "Divider": {
449
445
  "appearances": {},
446
+ "rules": [],
450
447
  "tokens": {
451
- "width": "{palette.border.border1}",
452
- "color": "{palette.color.silver}"
453
- },
454
- "rules": []
448
+ "color": "{palette.color.silver}",
449
+ "width": "{palette.size.size1}"
450
+ }
455
451
  },
456
452
  "ExpandCollapse": {
457
453
  "appearances": {},
454
+ "rules": [],
458
455
  "tokens": {
459
456
  "borderColor": "{palette.color.transparent}",
460
- "borderWidth": "{palette.border.none}",
461
- "borderStyle": "{system.borderStyle.solid}"
462
- },
463
- "rules": []
457
+ "borderStyle": "{system.borderStyle.solid}",
458
+ "borderWidth": "{palette.border.none}"
459
+ }
464
460
  },
465
461
  "ExpandCollapseControl": {
466
462
  "appearances": {
467
463
  "expanded": "{appearances.ExpandCollapseControl.expanded}"
468
464
  },
469
- "tokens": {
470
- "icon": "{palette.icon.ChevronUp}",
471
- "iconColor": "{palette.color.mosque}",
472
- "iconSize": "{palette.size.size16}",
473
- "iconGap": "{palette.size.size16}",
474
- "iconPosition": "{system.position.left}",
475
- "verticalAlign": "{system.verticalAlign.middle}",
476
- "justifyContent": "{system.flexJustifyContent.flexStart}",
477
- "paddingLeft": "{palette.size.size16}",
478
- "paddingRight": "{palette.size.size16}",
479
- "paddingTop": "{palette.size.size16}",
480
- "paddingBottom": "{palette.size.size16}",
481
- "borderWidth": "{system.border.zero}",
482
- "borderColor": "{palette.color.transparent}",
483
- "backgroundColor": "{palette.color.transparent}"
484
- },
485
465
  "rules": [
486
466
  {
487
467
  "if": {
@@ -491,48 +471,43 @@
491
471
  "icon": "{palette.icon.ChevronDown}"
492
472
  }
493
473
  }
494
- ]
474
+ ],
475
+ "tokens": {
476
+ "backgroundColor": "{palette.color.transparent}",
477
+ "borderColor": "{palette.color.transparent}",
478
+ "borderWidth": "{system.border.zero}",
479
+ "icon": "{palette.icon.ChevronUp}",
480
+ "iconColor": "{palette.color.mosque}",
481
+ "iconGap": "{palette.size.size16}",
482
+ "iconPosition": "{system.position.left}",
483
+ "iconSize": "{palette.size.size16}",
484
+ "justifyContent": "{system.flexJustifyContent.flexStart}",
485
+ "paddingBottom": "{palette.size.size16}",
486
+ "paddingLeft": "{palette.size.size16}",
487
+ "paddingRight": "{palette.size.size16}",
488
+ "paddingTop": "{palette.size.size16}",
489
+ "verticalAlign": "{system.verticalAlign.middle}"
490
+ }
495
491
  },
496
492
  "ExpandCollapsePanel": {
497
493
  "appearances": {},
494
+ "rules": [],
498
495
  "tokens": {
499
- "expandDuration": "{palette.duration.duration300}",
500
496
  "collapseDuration": "{palette.duration.duration250}",
497
+ "contentPaddingBottom": "{palette.size.size16}",
501
498
  "contentPaddingLeft": "{palette.size.size48}",
502
499
  "contentPaddingRight": "{palette.size.size16}",
503
500
  "contentPaddingTop": "{palette.size.size0}",
504
- "contentPaddingBottom": "{palette.size.size16}"
505
- },
506
- "rules": []
501
+ "expandDuration": "{palette.duration.duration300}"
502
+ }
507
503
  },
508
504
  "Feedback": {
509
505
  "appearances": {
510
- "validation": "{appearances.Feedback.validation}",
511
506
  "icon": {
512
- "values": [true],
513
- "type": "variant"
514
- }
515
- },
516
- "tokens": {
517
- "backgroundColor": "{palette.color.gallery}",
518
- "borderColor": "{palette.color.silver}",
519
- "borderWidth": "{palette.border.border1}",
520
- "borderRadius": "{palette.radius.radius4}",
521
- "paddingTop": "{palette.size.size10}",
522
- "paddingBottom": "{palette.size.size10}",
523
- "paddingLeft": "{palette.size.size16}",
524
- "paddingRight": "{palette.size.size16}",
525
- "space": "{system.integer.2}",
526
- "color": "{palette.color.mortar}",
527
- "fontName": "{palette.fontName.StagSans}",
528
- "fontWeight": "{palette.fontWeight.weight400}",
529
- "lineHeight": "{palette.lineHeight.multiply150}",
530
- "titleFontSize": "{palette.fontSize.size16}",
531
- "contentFontSize": "{palette.fontSize.size14}",
532
- "icon": "{system.icon.none}",
533
- "iconSize": "{palette.fontSize.size24}",
534
- "iconColor": "{palette.color.transparent}",
535
- "iconGap": "{palette.size.size8}"
507
+ "type": "variant",
508
+ "values": [true]
509
+ },
510
+ "validation": "{appearances.Feedback.validation}"
536
511
  },
537
512
  "rules": [
538
513
  {
@@ -557,8 +532,8 @@
557
532
  },
558
533
  {
559
534
  "if": {
560
- "validation": "success",
561
- "icon": true
535
+ "icon": true,
536
+ "validation": "success"
562
537
  },
563
538
  "tokens": {
564
539
  "icon": "{palette.icon.CheckCircledFilled}",
@@ -567,31 +542,42 @@
567
542
  },
568
543
  {
569
544
  "if": {
570
- "validation": "error",
571
- "icon": true
545
+ "icon": true,
546
+ "validation": "error"
572
547
  },
573
548
  "tokens": {
574
549
  "icon": "{palette.icon.ExclamationTriangle}",
575
550
  "iconColor": "{palette.color.trinidad}"
576
551
  }
577
552
  }
578
- ]
579
- },
580
- "HorizontalScrollButton": {
581
- "appearances": {
582
- "hover": "{appearances.HorizontalScrollButton.hover}",
583
- "focus": "{appearances.HorizontalScrollButton.focus}",
584
- "pressed": "{appearances.HorizontalScrollButton.pressed}"
585
- },
553
+ ],
586
554
  "tokens": {
587
- "borderRadius": "{palette.radius.pill32}",
588
- "backgroundColor": "{palette.color.white}",
555
+ "backgroundColor": "{palette.color.gallery}",
589
556
  "borderColor": "{palette.color.silver}",
557
+ "borderRadius": "{palette.radius.radius4}",
590
558
  "borderWidth": "{palette.border.border1}",
591
- "padding": "{palette.size.size8}",
592
- "shadow": "{system.shadow.none}",
593
- "iconSize": "{palette.size.size16}",
594
- "iconColor": "{palette.color.mosque}"
559
+ "color": "{palette.color.mortar}",
560
+ "contentFontSize": "{palette.fontSize.size14}",
561
+ "fontName": "{palette.fontName.StagSans}",
562
+ "fontWeight": "{palette.fontWeight.weight400}",
563
+ "icon": "{system.icon.none}",
564
+ "iconColor": "{palette.color.transparent}",
565
+ "iconGap": "{palette.size.size8}",
566
+ "iconSize": "{palette.size.size24}",
567
+ "lineHeight": "{palette.lineHeight.multiply150}",
568
+ "paddingBottom": "{palette.size.size10}",
569
+ "paddingLeft": "{palette.size.size16}",
570
+ "paddingRight": "{palette.size.size16}",
571
+ "paddingTop": "{palette.size.size10}",
572
+ "space": "{system.integer.2}",
573
+ "titleFontSize": "{palette.fontSize.size16}"
574
+ }
575
+ },
576
+ "HorizontalScrollButton": {
577
+ "appearances": {
578
+ "focus": "{appearances.HorizontalScrollButton.focus}",
579
+ "hover": "{appearances.HorizontalScrollButton.hover}",
580
+ "pressed": "{appearances.HorizontalScrollButton.pressed}"
595
581
  },
596
582
  "rules": [
597
583
  {
@@ -599,9 +585,9 @@
599
585
  "hover": true
600
586
  },
601
587
  "tokens": {
588
+ "backgroundColor": "{palette.color.texas}",
602
589
  "borderColor": "{palette.color.darkMosque}",
603
- "iconColor": "{palette.color.darkMosque}",
604
- "backgroundColor": "{palette.color.texas}"
590
+ "iconColor": "{palette.color.darkMosque}"
605
591
  }
606
592
  },
607
593
  {
@@ -614,31 +600,34 @@
614
600
  "iconColor": "{palette.color.white}"
615
601
  }
616
602
  }
617
- ]
603
+ ],
604
+ "tokens": {
605
+ "backgroundColor": "{palette.color.white}",
606
+ "borderColor": "{palette.color.silver}",
607
+ "borderRadius": "{palette.radius.pill32}",
608
+ "borderWidth": "{palette.border.border1}",
609
+ "iconColor": "{palette.color.mosque}",
610
+ "iconSize": "{palette.size.size16}",
611
+ "padding": "{palette.size.size8}",
612
+ "shadow": "{system.shadow.none}"
613
+ }
618
614
  },
619
615
  "Icon": {
620
616
  "appearances": {
621
- "size": {
622
- "values": ["small"],
623
- "type": "variant"
624
- },
625
617
  "colour": {
626
- "values": ["primary", "secondary", "black", "white"],
627
- "type": "variant"
618
+ "type": "variant",
619
+ "values": ["primary", "secondary", "black", "white"]
620
+ },
621
+ "size": {
622
+ "type": "variant",
623
+ "values": ["small"]
628
624
  },
629
625
  "status": {
630
626
  "description": "Uses icon colour to communicate meaning to the user",
631
- "values": ["success", "error"],
632
- "type": "variant"
627
+ "type": "variant",
628
+ "values": ["success", "error"]
633
629
  }
634
630
  },
635
- "tokens": {
636
- "size": "{palette.size.size24}",
637
- "color": "{palette.color.dove}",
638
- "translateX": "{system.size.zero}",
639
- "translateY": "{system.size.zero}",
640
- "scale": "{system.integer.1}"
641
- },
642
631
  "rules": [
643
632
  {
644
633
  "if": {
@@ -696,86 +685,73 @@
696
685
  "color": "{palette.color.amaranth}"
697
686
  }
698
687
  }
699
- ]
688
+ ],
689
+ "tokens": {
690
+ "color": "{palette.color.dove}",
691
+ "scale": "{system.integer.1}",
692
+ "size": "{palette.size.size24}",
693
+ "translateX": "{system.size.zero}",
694
+ "translateY": "{system.size.zero}"
695
+ }
700
696
  },
701
697
  "IconButton": {
702
698
  "appearances": {
703
- "hover": "{appearances.Button.hover}",
704
699
  "focus": "{appearances.Button.focus}",
705
- "pressed": "{appearances.Button.pressed}",
706
- "inactive": "{appearances.Button.inactive}"
700
+ "hover": "{appearances.Button.hover}",
701
+ "inactive": "{appearances.Button.inactive}",
702
+ "pressed": "{appearances.Button.pressed}"
707
703
  },
704
+ "rules": [],
708
705
  "tokens": {
709
706
  "backgroundColor": "{system.color.transparent}",
710
- "outerBorderWidth": "{system.border.zero}",
711
- "outerBorderColor": "{system.color.transparent}",
712
- "outerBorderGap": "{system.size.zero}",
713
- "shadow": "{system.shadow.none}",
714
- "padding": "{palette.size.size4}",
707
+ "borderColor": "{palette.color.mosque}",
715
708
  "borderRadius": "{system.radius.round}",
716
709
  "borderWidth": "{palette.border.border1}",
717
- "borderColor": "{palette.color.mosque}",
718
710
  "iconColor": "{palette.color.mosque}",
719
- "iconSize": "{palette.size.size24}",
720
711
  "iconScale": "{system.iconScale.scale1}",
712
+ "iconSize": "{palette.size.size24}",
721
713
  "iconTranslateX": "{system.size.zero}",
722
- "iconTranslateY": "{system.size.zero}"
723
- },
724
- "rules": []
714
+ "iconTranslateY": "{system.size.zero}",
715
+ "outerBorderColor": "{system.color.transparent}",
716
+ "outerBorderGap": "{system.size.zero}",
717
+ "outerBorderWidth": "{system.border.zero}",
718
+ "padding": "{palette.size.size4}",
719
+ "shadow": "{system.shadow.none}"
720
+ }
725
721
  },
726
722
  "InputLabel": {
727
723
  "appearances": {},
724
+ "rules": [],
728
725
  "tokens": {
729
- "gap": "{palette.size.size8}",
730
726
  "color": "{palette.color.dove}",
731
727
  "fontName": "{palette.fontName.StagSans}",
732
- "fontWeight": "{palette.fontWeight.weight500}",
733
728
  "fontSize": "{palette.fontSize.size16}",
734
- "lineHeight": "{palette.lineHeight.multiply140}",
729
+ "fontWeight": "{palette.fontWeight.weight500}",
730
+ "gap": "{palette.size.size8}",
735
731
  "hintColor": "{palette.color.dove}",
736
732
  "hintFontName": "{palette.fontName.StagSans}",
737
- "hintFontWeight": "{palette.fontWeight.weight400}",
738
733
  "hintFontSize": "{palette.fontSize.size14}",
739
- "hintLineHeight": "{palette.lineHeight.multiply140}"
740
- },
741
- "rules": []
734
+ "hintFontWeight": "{palette.fontWeight.weight400}",
735
+ "hintLineHeight": "{palette.lineHeight.multiply140}",
736
+ "lineHeight": "{palette.lineHeight.multiply140}"
737
+ }
742
738
  },
743
739
  "InputSupports": {
744
740
  "appearances": {},
741
+ "rules": [],
745
742
  "tokens": {
746
743
  "space": "{system.integer.1}"
747
- },
748
- "rules": []
744
+ }
749
745
  },
750
746
  "Link": {
751
747
  "appearances": {
748
+ "hover": "{appearances.Link.hover}",
749
+ "iconPosition": "{appearances.Link.iconPosition}",
752
750
  "rank": {
753
751
  "description": "Prominence of the link.",
754
- "values": ["secondary"],
755
- "type": "variant"
756
- },
757
- "iconPosition": "{appearances.Link.iconPosition}",
758
- "hover": "{appearances.Link.hover}"
759
- },
760
- "tokens": {
761
- "color": "{palette.color.mosque}",
762
- "textLine": "{system.textLine.underline}",
763
- "textLineStyle": "{system.textLineStyle.solid}",
764
- "outerBorderColor": "{palette.color.transparent}",
765
- "outerBorderWidth": "{palette.border.none}",
766
- "outerBorderGap": "{palette.border.none}",
767
- "borderRadius": "{palette.radius.radius4}",
768
- "outerBorderOutline": "{system.borderStyle.none}",
769
- "blockFontSize": "{palette.fontSize.size16}",
770
- "blockLineHeight": "{palette.lineHeight.multiply150}",
771
- "blockFontWeight": "{palette.fontWeight.weight600}",
772
- "blockFontName": "{palette.fontName.StagSans}",
773
- "alignSelf": "{system.flexAlign.flexStart}",
774
- "icon": "{system.icon.none}",
775
- "iconSize": "{palette.fontSize.size24}",
776
- "iconSpace": "{system.integer.1}",
777
- "iconTranslateX": "{system.size.zero}",
778
- "iconTranslateY": "{system.size.zero}"
752
+ "type": "variant",
753
+ "values": ["secondary"]
754
+ }
779
755
  },
780
756
  "rules": [
781
757
  {
@@ -805,46 +781,48 @@
805
781
  },
806
782
  {
807
783
  "if": {
808
- "rank": "secondary",
809
- "hover": true
784
+ "hover": true,
785
+ "rank": "secondary"
810
786
  },
811
787
  "tokens": {
812
788
  "color": "{palette.color.darkBlue}"
813
789
  }
814
790
  }
815
- ]
791
+ ],
792
+ "tokens": {
793
+ "alignSelf": "{system.flexAlign.flexStart}",
794
+ "blockFontName": "{palette.fontName.StagSans}",
795
+ "blockFontSize": "{palette.fontSize.size16}",
796
+ "blockFontWeight": "{palette.fontWeight.weight600}",
797
+ "blockLineHeight": "{palette.lineHeight.multiply150}",
798
+ "borderRadius": "{palette.radius.radius4}",
799
+ "color": "{palette.color.mosque}",
800
+ "icon": "{system.icon.none}",
801
+ "iconSize": "{palette.size.size24}",
802
+ "iconSpace": "{system.integer.1}",
803
+ "iconTranslateX": "{system.size.zero}",
804
+ "iconTranslateY": "{system.size.zero}",
805
+ "outerBorderColor": "{palette.color.transparent}",
806
+ "outerBorderGap": "{palette.size.size0}",
807
+ "outerBorderOutline": "{system.borderStyle.none}",
808
+ "outerBorderWidth": "{palette.border.none}",
809
+ "textLine": "{system.textLine.underline}",
810
+ "textLineStyle": "{system.textLineStyle.solid}"
811
+ }
816
812
  },
817
813
  "List": {
818
814
  "appearances": {
819
- "size": {
820
- "description": "Text sizes for block links; similar but not always identical to Typography sizes.",
821
- "values": ["large", "small"],
822
- "type": "variant"
823
- },
824
815
  "compact": {
825
816
  "description": "Reduces line height on some body text styles. For data-rich content, not for flow content",
826
- "values": [true],
827
- "type": "variant"
817
+ "type": "variant",
818
+ "values": [true]
819
+ },
820
+ "size": {
821
+ "description": "Text sizes for block links; similar but not always identical to Typography sizes.",
822
+ "type": "variant",
823
+ "values": ["large", "small"]
828
824
  }
829
825
  },
830
- "tokens": {
831
- "itemFontSize": "{palette.fontSize.size16}",
832
- "itemLineHeight": "{palette.lineHeight.multiply130}",
833
- "itemFontName": "{palette.fontName.StagSans}",
834
- "itemFontWeight": "{palette.fontWeight.weight600}",
835
- "interItemMargin": "{palette.size.size8}",
836
- "interItemMarginWithDivider": "{palette.size.size16}",
837
- "dividerColor": "{palette.color.silver}",
838
- "dividerSize": "{palette.border.border1}",
839
- "itemBulletContainerWidth": "{palette.size.size16}",
840
- "itemBulletContainerAlign": "{system.textAlign.center}",
841
- "itemBulletWidth": "{palette.size.size4}",
842
- "itemBulletHeight": "{palette.size.size4}",
843
- "itemBulletColor": "{palette.color.flirt}",
844
- "itemIconSize": "{palette.size.size16}",
845
- "itemIconColor": "{palette.color.flirt}",
846
- "listGutter": "{palette.size.size10}"
847
- },
848
826
  "rules": [
849
827
  {
850
828
  "if": {
@@ -891,33 +869,32 @@
891
869
  "itemLineHeight": "{palette.lineHeight.multiply130}"
892
870
  }
893
871
  }
894
- ]
872
+ ],
873
+ "tokens": {
874
+ "dividerColor": "{palette.color.silver}",
875
+ "dividerSize": "{palette.border.border1}",
876
+ "iconMarginTop": "{palette.size.size4}",
877
+ "interItemMargin": "{palette.size.size8}",
878
+ "interItemMarginWithDivider": "{palette.size.size16}",
879
+ "itemBulletColor": "{palette.color.flirt}",
880
+ "itemBulletContainerAlign": "{system.textAlign.center}",
881
+ "itemBulletContainerWidth": "{palette.size.size16}",
882
+ "itemBulletHeight": "{palette.size.size4}",
883
+ "itemBulletWidth": "{palette.size.size4}",
884
+ "itemFontName": "{palette.fontName.StagSans}",
885
+ "itemFontSize": "{palette.fontSize.size16}",
886
+ "itemFontWeight": "{palette.fontWeight.weight600}",
887
+ "itemIconColor": "{palette.color.flirt}",
888
+ "itemIconSize": "{palette.size.size16}",
889
+ "itemLineHeight": "{palette.lineHeight.multiply130}",
890
+ "listGutter": "{palette.size.size10}"
891
+ }
895
892
  },
896
893
  "Modal": {
897
894
  "appearances": {
898
895
  "maxWidth": "{appearances.Modal.maxWidth}",
899
896
  "viewport": "{appearances.system.viewport}"
900
897
  },
901
- "tokens": {
902
- "backdropColor": "{palette.color.black}",
903
- "backdropOpacity": "{palette.opacity.opacity5}",
904
- "height": "{system.size.none}",
905
- "maxWidth": "{system.size.full}",
906
- "containerPaddingLeft": "{system.size.zero}",
907
- "containerPaddingRight": "{system.size.zero}",
908
- "containerPaddingTop": "{system.size.zero}",
909
- "containerPaddingBottom": "{system.size.zero}",
910
- "backgroundColor": "{palette.color.white}",
911
- "borderRadius": "{palette.radius.radius4}",
912
- "shadow": "{palette.shadow.none}",
913
- "paddingLeft": "{palette.size.size16}",
914
- "paddingRight": "{palette.size.size16}",
915
- "paddingTop": "{palette.size.size16}",
916
- "paddingBottom": "{palette.size.size16}",
917
- "closeIcon": "{palette.icon.Times}",
918
- "closeIconSize": "{palette.size.size24}",
919
- "closeIconColor": "{palette.color.black}"
920
- },
921
898
  "rules": [
922
899
  {
923
900
  "if": {
@@ -932,54 +909,48 @@
932
909
  "viewport": ["md", "lg", "xl"]
933
910
  },
934
911
  "tokens": {
935
- "maxWidth": "{system.integer.576}",
912
+ "containerPaddingBottom": "{palette.size.size32}",
936
913
  "containerPaddingTop": "{palette.size.size32}",
937
- "containerPaddingBottom": "{palette.size.size32}"
914
+ "maxWidth": "{system.size.viewportSm}"
938
915
  }
939
916
  },
940
917
  {
941
918
  "if": {
942
- "viewport": ["md", "lg", "xl"],
943
- "maxWidth": true
919
+ "maxWidth": true,
920
+ "viewport": ["md", "lg", "xl"]
944
921
  },
945
922
  "tokens": {
946
- "maxWidth": "{system.size.twoThirds}",
947
923
  "containerPaddingLeft": "{palette.size.size16}",
948
- "containerPaddingRight": "{palette.size.size16}"
924
+ "containerPaddingRight": "{palette.size.size16}",
925
+ "maxWidth": "{system.size.twoThirds}"
949
926
  }
950
927
  }
951
- ]
928
+ ],
929
+ "tokens": {
930
+ "backdropColor": "{palette.color.black}",
931
+ "backdropOpacity": "{palette.opacity.opacity5}",
932
+ "backgroundColor": "{palette.color.white}",
933
+ "borderRadius": "{palette.radius.radius4}",
934
+ "closeIcon": "{palette.icon.Times}",
935
+ "closeIconColor": "{palette.color.black}",
936
+ "closeIconSize": "{palette.size.size24}",
937
+ "containerPaddingBottom": "{system.size.zero}",
938
+ "containerPaddingLeft": "{system.size.zero}",
939
+ "containerPaddingRight": "{system.size.zero}",
940
+ "containerPaddingTop": "{system.size.zero}",
941
+ "height": "{system.size.none}",
942
+ "maxWidth": "{system.size.full}",
943
+ "paddingBottom": "{palette.size.size16}",
944
+ "paddingLeft": "{palette.size.size16}",
945
+ "paddingRight": "{palette.size.size16}",
946
+ "paddingTop": "{palette.size.size16}",
947
+ "shadow": "{palette.shadow.none}"
948
+ }
952
949
  },
953
950
  "Notification": {
954
951
  "appearances": {
955
- "system": "{appearances.Notification.system}",
956
- "style": "{appearances.Notification.style}"
957
- },
958
- "tokens": {
959
- "backgroundColor": "{palette.color.gallery}",
960
- "borderBottomWidth": "{palette.border.border1}",
961
- "borderTopWidth": "{palette.border.border1}",
962
- "borderLeftWidth": "{palette.border.border1}",
963
- "borderRightWidth": "{palette.border.border1}",
964
- "borderColor": "{palette.color.mortar}",
965
- "borderRadius": "{palette.radius.radius4}",
966
- "paddingTop": "{palette.size.size12}",
967
- "paddingBottom": "{palette.size.size12}",
968
- "paddingLeft": "{palette.size.size12}",
969
- "paddingRight": "{palette.size.size12}",
970
- "color": "{palette.color.dove}",
971
- "fontSize": "{palette.fontSize.size16}",
972
- "lineHeight": "{palette.lineHeight.multiply150}",
973
- "fontName": "{palette.fontName.StagSans}",
974
- "fontWeight": "{palette.fontWeight.weight400}",
975
- "icon": "{system.icon.none}",
976
- "iconColor": "{system.color.none}",
977
- "iconSize": "{palette.size.size24}",
978
- "iconGap": "{palette.size.size16}",
979
- "dismissIcon": "{palette.icon.Times}",
980
- "dismissIconColor": "{palette.color.dove}",
981
- "dismissIconSize": "{palette.size.size16}",
982
- "dismissButtonGap": "{palette.size.size16}"
952
+ "style": "{appearances.Notification.style}",
953
+ "system": "{appearances.Notification.system}"
983
954
  },
984
955
  "rules": [
985
956
  {
@@ -987,15 +958,15 @@
987
958
  "system": true
988
959
  },
989
960
  "tokens": {
990
- "borderTopWidth": "{system.border.zero}",
991
961
  "borderLeftWidth": "{system.border.zero}",
992
- "borderRightWidth": "{system.border.zero}",
993
962
  "borderRadius": "{system.radius.zero}",
994
- "paddingTop": "{palette.size.size16}",
963
+ "borderRightWidth": "{system.border.zero}",
964
+ "borderTopWidth": "{system.border.zero}",
965
+ "iconGap": "{palette.size.size12}",
995
966
  "paddingBottom": "{palette.size.size16}",
996
967
  "paddingLeft": "{palette.size.size16}",
997
968
  "paddingRight": "{palette.size.size16}",
998
- "iconGap": "{palette.size.size12}"
969
+ "paddingTop": "{palette.size.size16}"
999
970
  }
1000
971
  },
1001
972
  {
@@ -1031,20 +1002,37 @@
1031
1002
  "iconColor": "{palette.color.trinidad}"
1032
1003
  }
1033
1004
  }
1034
- ]
1035
- },
1036
- "Pagination": {
1037
- "appearances": {
1038
- "viewport": "{appearances.system.viewport}"
1039
- },
1005
+ ],
1040
1006
  "tokens": {
1041
- "gap": "{system.integer.2}",
1042
- "truncateAbove": "{system.integer.4}",
1007
+ "backgroundColor": "{palette.color.gallery}",
1008
+ "borderBottomWidth": "{palette.border.border1}",
1009
+ "borderColor": "{palette.color.mortar}",
1010
+ "borderLeftWidth": "{palette.border.border1}",
1011
+ "borderRadius": "{palette.radius.radius4}",
1012
+ "borderRightWidth": "{palette.border.border1}",
1013
+ "borderTopWidth": "{palette.border.border1}",
1043
1014
  "color": "{palette.color.dove}",
1015
+ "dismissButtonGap": "{palette.size.size16}",
1016
+ "dismissIcon": "{palette.icon.Times}",
1017
+ "dismissIconColor": "{palette.color.dove}",
1018
+ "dismissIconSize": "{palette.size.size16}",
1044
1019
  "fontName": "{palette.fontName.StagSans}",
1045
- "fontWeight": "{palette.fontWeight.weight400}",
1046
1020
  "fontSize": "{palette.fontSize.size16}",
1047
- "lineHeight": "{palette.lineHeight.multiply150}"
1021
+ "fontWeight": "{palette.fontWeight.weight400}",
1022
+ "icon": "{system.icon.none}",
1023
+ "iconColor": "{system.color.none}",
1024
+ "iconGap": "{palette.size.size16}",
1025
+ "iconSize": "{palette.size.size24}",
1026
+ "lineHeight": "{palette.lineHeight.multiply150}",
1027
+ "paddingBottom": "{palette.size.size12}",
1028
+ "paddingLeft": "{palette.size.size12}",
1029
+ "paddingRight": "{palette.size.size12}",
1030
+ "paddingTop": "{palette.size.size12}"
1031
+ }
1032
+ },
1033
+ "Pagination": {
1034
+ "appearances": {
1035
+ "viewport": "{appearances.system.viewport}"
1048
1036
  },
1049
1037
  "rules": [
1050
1038
  {
@@ -1055,7 +1043,16 @@
1055
1043
  "truncateAbove": "{system.integer.6}"
1056
1044
  }
1057
1045
  }
1058
- ]
1046
+ ],
1047
+ "tokens": {
1048
+ "color": "{palette.color.dove}",
1049
+ "fontName": "{palette.fontName.StagSans}",
1050
+ "fontSize": "{palette.fontSize.size16}",
1051
+ "fontWeight": "{palette.fontWeight.weight400}",
1052
+ "gap": "{palette.size.size2}",
1053
+ "lineHeight": "{palette.lineHeight.multiply150}",
1054
+ "truncateAbove": "{system.integer.4}"
1055
+ }
1059
1056
  },
1060
1057
  "PaginationPageButton": {
1061
1058
  "appearances": {
@@ -1064,27 +1061,6 @@
1064
1061
  "pressed": "{appearances.PaginationPageButton.pressed}",
1065
1062
  "selected": "{appearances.PaginationPageButton.selected}"
1066
1063
  },
1067
- "tokens": {
1068
- "borderColor": "{palette.color.transparent}",
1069
- "borderWidth": "{palette.border.border1}",
1070
- "borderRadius": "{palette.radius.pill32}",
1071
- "backgroundColor": "{palette.color.transparent}",
1072
- "paddingLeft": "{palette.size.size8}",
1073
- "paddingRight": "{palette.size.size8}",
1074
- "paddingTop": "{palette.size.size4}",
1075
- "paddingBottom": "{palette.size.size4}",
1076
- "width": "{palette.size.size32}",
1077
- "outerBorderColor": "{palette.color.transparent}",
1078
- "outerBorderWidth": "{palette.border.border4}",
1079
- "outerBorderGap": "{palette.border.border4}",
1080
- "color": "{palette.color.dove}",
1081
- "fontName": "{palette.fontName.StagSans}",
1082
- "fontWeight": "{palette.fontWeight.weight400}",
1083
- "fontSize": "{palette.fontSize.size16}",
1084
- "lineHeight": "{palette.lineHeight.multiply150}",
1085
- "textLine": "{system.textLine.underline}",
1086
- "textAlign": "{system.flexJustifyContent.center}"
1087
- },
1088
1064
  "rules": [
1089
1065
  {
1090
1066
  "if": {
@@ -1123,38 +1099,37 @@
1123
1099
  "color": "{palette.color.white}"
1124
1100
  }
1125
1101
  }
1126
- ]
1127
- },
1128
- "PaginationSideButton": {
1129
- "appearances": {
1130
- "viewport": "{appearances.system.viewport}",
1131
- "focus": "{appearances.PaginationSideButton.focus}",
1132
- "hover": "{appearances.PaginationSideButton.hover}",
1133
- "pressed": "{appearances.PaginationSideButton.pressed}",
1134
- "selected": "{appearances.PaginationSideButton.selected}",
1135
- "direction": "{appearances.PaginationSideButton.direction}"
1136
- },
1102
+ ],
1137
1103
  "tokens": {
1104
+ "backgroundColor": "{palette.color.transparent}",
1138
1105
  "borderColor": "{palette.color.transparent}",
1106
+ "borderRadius": "{palette.radius.pill32}",
1139
1107
  "borderWidth": "{palette.border.border1}",
1140
- "borderRadius": "{palette.radius.radius4}",
1141
- "backgroundColor": "{palette.color.transparent}",
1142
- "paddingLeft": "{palette.size.size8}",
1143
- "paddingRight": "{palette.size.size8}",
1144
- "paddingTop": "{palette.size.size10}",
1145
- "paddingBottom": "{palette.size.size10}",
1146
- "outerBorderColor": "{system.color.transparent}",
1147
1108
  "color": "{palette.color.dove}",
1148
1109
  "fontName": "{palette.fontName.StagSans}",
1149
- "fontWeight": "{palette.fontWeight.weight400}",
1150
1110
  "fontSize": "{palette.fontSize.size16}",
1111
+ "fontWeight": "{palette.fontWeight.weight400}",
1151
1112
  "lineHeight": "{palette.lineHeight.multiply150}",
1113
+ "outerBorderColor": "{palette.color.transparent}",
1114
+ "outerBorderGap": "{palette.size.size4}",
1115
+ "outerBorderWidth": "{palette.border.border4}",
1116
+ "paddingBottom": "{palette.size.size4}",
1117
+ "paddingLeft": "{palette.size.size8}",
1118
+ "paddingRight": "{palette.size.size8}",
1119
+ "paddingTop": "{palette.size.size4}",
1120
+ "textAlign": "{system.flexJustifyContent.center}",
1152
1121
  "textLine": "{system.textLine.underline}",
1153
- "icon": "{system.icon.none}",
1154
- "iconSize": "{palette.fontSize.size14}",
1155
- "iconDisplace": "{palette.size.size0}",
1156
- "width": "{system.size.none}",
1157
- "textAlign": "{system.flexJustifyContent.center}"
1122
+ "width": "{palette.size.size32}"
1123
+ }
1124
+ },
1125
+ "PaginationSideButton": {
1126
+ "appearances": {
1127
+ "direction": "{appearances.PaginationSideButton.direction}",
1128
+ "focus": "{appearances.PaginationSideButton.focus}",
1129
+ "hover": "{appearances.PaginationSideButton.hover}",
1130
+ "pressed": "{appearances.PaginationSideButton.pressed}",
1131
+ "selected": "{appearances.PaginationSideButton.selected}",
1132
+ "viewport": "{appearances.system.viewport}"
1158
1133
  },
1159
1134
  "rules": [
1160
1135
  {
@@ -1163,8 +1138,8 @@
1163
1138
  },
1164
1139
  "tokens": {
1165
1140
  "borderRadius": "{palette.radius.pill32}",
1166
- "paddingTop": "{palette.size.size4}",
1167
1141
  "paddingBottom": "{palette.size.size4}",
1142
+ "paddingTop": "{palette.size.size4}",
1168
1143
  "width": "{palette.size.size32}"
1169
1144
  }
1170
1145
  },
@@ -1174,8 +1149,8 @@
1174
1149
  },
1175
1150
  "tokens": {
1176
1151
  "borderColor": "{palette.color.dove}",
1177
- "textLine": "{system.textLine.none}",
1178
- "iconDisplace": "{palette.size.size4}"
1152
+ "iconDisplace": "{palette.size.size4}",
1153
+ "textLine": "{system.textLine.none}"
1179
1154
  }
1180
1155
  },
1181
1156
  {
@@ -1222,22 +1197,37 @@
1222
1197
  "icon": "{palette.icon.ChevronRight}"
1223
1198
  }
1224
1199
  }
1225
- ]
1200
+ ],
1201
+ "tokens": {
1202
+ "backgroundColor": "{palette.color.transparent}",
1203
+ "borderColor": "{palette.color.transparent}",
1204
+ "borderRadius": "{palette.radius.radius4}",
1205
+ "borderWidth": "{palette.border.border1}",
1206
+ "color": "{palette.color.dove}",
1207
+ "fontName": "{palette.fontName.StagSans}",
1208
+ "fontSize": "{palette.fontSize.size16}",
1209
+ "fontWeight": "{palette.fontWeight.weight400}",
1210
+ "icon": "{system.icon.none}",
1211
+ "iconDisplace": "{palette.size.size0}",
1212
+ "iconSize": "{palette.size.size14}",
1213
+ "lineHeight": "{palette.lineHeight.multiply150}",
1214
+ "outerBorderColor": "{system.color.transparent}",
1215
+ "paddingBottom": "{palette.size.size10}",
1216
+ "paddingLeft": "{palette.size.size8}",
1217
+ "paddingRight": "{palette.size.size8}",
1218
+ "paddingTop": "{palette.size.size10}",
1219
+ "textAlign": "{system.flexJustifyContent.center}",
1220
+ "textLine": "{system.textLine.underline}",
1221
+ "width": "{system.size.none}"
1222
+ }
1226
1223
  },
1227
1224
  "Progress": {
1228
1225
  "appearances": {
1229
1226
  "size": {
1230
- "values": ["mini"],
1231
- "type": "variant"
1227
+ "type": "variant",
1228
+ "values": ["mini"]
1232
1229
  }
1233
1230
  },
1234
- "tokens": {
1235
- "backgroundColor": "{palette.color.white}",
1236
- "borderRadius": "{palette.radius.radius12}",
1237
- "borderWidth": "{palette.border.border1}",
1238
- "borderColor": "{palette.color.mosque}",
1239
- "height": "{palette.size.size16}"
1240
- },
1241
1231
  "rules": [
1242
1232
  {
1243
1233
  "if": {
@@ -1247,23 +1237,23 @@
1247
1237
  "height": "{palette.size.size8}"
1248
1238
  }
1249
1239
  }
1250
- ]
1240
+ ],
1241
+ "tokens": {
1242
+ "backgroundColor": "{palette.color.white}",
1243
+ "borderColor": "{palette.color.mosque}",
1244
+ "borderRadius": "{palette.radius.radius12}",
1245
+ "borderWidth": "{palette.border.border1}",
1246
+ "height": "{palette.size.size16}"
1247
+ }
1251
1248
  },
1252
1249
  "ProgressBar": {
1253
1250
  "appearances": {
1254
1251
  "inactive": "{appearances.ProgressBar.inactive}",
1255
1252
  "negative": {
1256
- "values": [true],
1257
- "type": "variant"
1253
+ "type": "variant",
1254
+ "values": [true]
1258
1255
  }
1259
1256
  },
1260
- "tokens": {
1261
- "backgroundColor": "{palette.color.mosque}",
1262
- "borderRadius": "{palette.radius.radius12}",
1263
- "gradient": "{system.gradient.none}",
1264
- "outlineColor": "{palette.color.darkMosque}",
1265
- "outlineWidth": "{palette.border.border1}"
1266
- },
1267
1257
  "rules": [
1268
1258
  {
1269
1259
  "if": {
@@ -1283,7 +1273,14 @@
1283
1273
  "outlineColor": "{palette.color.wellRead}"
1284
1274
  }
1285
1275
  }
1286
- ]
1276
+ ],
1277
+ "tokens": {
1278
+ "backgroundColor": "{palette.color.mosque}",
1279
+ "borderRadius": "{palette.radius.radius12}",
1280
+ "gradient": "{system.gradient.none}",
1281
+ "outlineColor": "{palette.color.darkMosque}",
1282
+ "outlineWidth": "{palette.border.border1}"
1283
+ }
1287
1284
  },
1288
1285
  "Radio": {
1289
1286
  "appearances": {
@@ -1293,6 +1290,17 @@
1293
1290
  "hover": "{appearances.Radio.hover}",
1294
1291
  "inactive": "{appearances.Radio.inactive}"
1295
1292
  },
1293
+ "rules": [
1294
+ {
1295
+ "if": {
1296
+ "focus": true
1297
+ },
1298
+ "tokens": {
1299
+ "inputOutlineColor": "{palette.color.silver}",
1300
+ "inputOutlineWidth": "{palette.border.border2}"
1301
+ }
1302
+ }
1303
+ ],
1296
1304
  "tokens": {
1297
1305
  "checkedBackgroundColor": "{palette.color.mosque}",
1298
1306
  "checkedSize": "{palette.size.size12}",
@@ -1313,86 +1321,39 @@
1313
1321
  "inputOutlineColor": "{palette.color.transparent}",
1314
1322
  "inputOutlineWidth": "{palette.border.none}",
1315
1323
  "inputSize": "{palette.size.size20}",
1316
- "outerBorderWidth": "{system.border.zero}",
1317
- "outerBorderColor": "{system.color.transparent}",
1318
- "outerBorderGap": "{system.size.zero}",
1319
1324
  "labelColor": "{palette.color.black}",
1320
1325
  "labelFontName": "{palette.fontName.StagSans}",
1321
- "labelFontWeight": "{palette.fontWeight.weight400}",
1322
1326
  "labelFontSize": "{palette.fontSize.size16}",
1327
+ "labelFontWeight": "{palette.fontWeight.weight400}",
1323
1328
  "labelLineHeight": "{palette.lineHeight.multiply150}",
1324
- "labelMarginLeft": "{palette.size.size8}"
1325
- },
1326
- "rules": [
1327
- {
1328
- "if": {
1329
- "focus": true
1330
- },
1331
- "tokens": {
1332
- "inputOutlineColor": "{palette.color.silver}",
1333
- "inputOutlineWidth": "{palette.border.border2}"
1334
- }
1335
- }
1336
- ]
1329
+ "labelMarginLeft": "{palette.size.size8}",
1330
+ "outerBorderColor": "{system.color.transparent}",
1331
+ "outerBorderGap": "{system.size.zero}",
1332
+ "outerBorderWidth": "{system.border.zero}"
1333
+ }
1337
1334
  },
1338
1335
  "RadioCard": {
1339
1336
  "appearances": {
1340
- "pressed": "{appearances.RadioCard.pressed}",
1341
- "hover": "{appearances.RadioCard.hover}",
1342
- "focus": "{appearances.RadioCard.focus}",
1343
1337
  "checked": "{appearances.RadioCard.checked}",
1344
- "inactive": "{appearances.RadioCard.inactive}",
1345
1338
  "error": "{appearances.RadioCard.error}",
1339
+ "focus": "{appearances.RadioCard.focus}",
1340
+ "hover": "{appearances.RadioCard.hover}",
1341
+ "inactive": "{appearances.RadioCard.inactive}",
1342
+ "pressed": "{appearances.RadioCard.pressed}",
1346
1343
  "viewport": "{appearances.system.viewport}"
1347
1344
  },
1348
- "tokens": {
1349
- "outerBorderColor": "{system.color.transparent}",
1350
- "outerBorderWidth": "{system.border.zero}",
1351
- "outerBorderGap": "{system.size.zero}",
1352
- "flex": "{system.integer.1}",
1353
- "backgroundColor": "{palette.color.white}",
1354
- "borderColor": "{palette.color.silver}",
1355
- "borderRadius": "{palette.radius.radius4}",
1356
- "borderWidth": "{palette.border.border1}",
1357
- "paddingBottom": "{palette.size.size16}",
1358
- "paddingLeft": "{palette.size.size10}",
1359
- "paddingRight": "{palette.size.size16}",
1360
- "paddingTop": "{palette.size.size16}",
1361
- "minWidth": "{palette.size.size120}",
1362
- "shadow": "{system.shadow.none}",
1363
- "radioCheckedBackgroundColor": "{palette.color.mosque}",
1364
- "radioCheckedSize": "{palette.size.size12}",
1365
- "radioInputBackgroundColor": "{palette.color.white}",
1366
- "radioInputBorderColor": "{palette.color.mosque}",
1367
- "radioInputBorderWidth": "{palette.border.border2}",
1368
- "radioInputOutlineColor": "{palette.color.transparent}",
1369
- "radioInputOutlineWidth": "{palette.border.none}",
1370
- "radioInputSize": "{palette.size.size20}",
1371
- "radioOuterBorderColor": "{system.color.transparent}",
1372
- "radioOuterBorderWidth": "{system.border.zero}",
1373
- "radioOuterBorderGap": "{system.size.zero}",
1374
- "fontSize": "{palette.fontSize.size20}",
1375
- "lineHeight": "{palette.lineHeight.multiply140}",
1376
- "color": "{palette.color.black}",
1377
- "letterSpacing": "{system.letterSpacing.none}",
1378
- "textTransform": "{system.textTransform.none}",
1379
- "fontName": "{palette.fontName.StagSans}",
1380
- "fontWeight": "{palette.fontWeight.weight700}",
1381
- "radioSpace": "{system.integer.2}",
1382
- "contentSpace": "{system.integer.2}"
1383
- },
1384
1345
  "rules": [
1385
1346
  {
1386
1347
  "if": {
1387
1348
  "viewport": ["lg", "xl"]
1388
1349
  },
1389
1350
  "tokens": {
1351
+ "fontSize": "{palette.fontSize.size24}",
1352
+ "lineHeight": "{palette.lineHeight.multiply130}",
1390
1353
  "paddingBottom": "{palette.size.size24}",
1391
1354
  "paddingLeft": "{palette.size.size16}",
1392
1355
  "paddingRight": "{palette.size.size24}",
1393
- "paddingTop": "{palette.size.size16}",
1394
- "fontSize": "{palette.fontSize.size24}",
1395
- "lineHeight": "{palette.lineHeight.multiply130}"
1356
+ "paddingTop": "{palette.size.size16}"
1396
1357
  }
1397
1358
  },
1398
1359
  {
@@ -1407,10 +1368,10 @@
1407
1368
  }
1408
1369
  },
1409
1370
  {
1371
+ "description": "Pressed state matches hover state plus light grey background",
1410
1372
  "if": {
1411
1373
  "pressed": true
1412
1374
  },
1413
- "description": "Pressed state matches hover state plus light grey background",
1414
1375
  "tokens": {
1415
1376
  "backgroundColor": "{palette.color.gallery}",
1416
1377
  "borderColor": "{palette.color.dove}",
@@ -1425,8 +1386,8 @@
1425
1386
  },
1426
1387
  "tokens": {
1427
1388
  "outerBorderColor": "{palette.color.dove}",
1428
- "outerBorderWidth": "{palette.border.border2}",
1429
1389
  "outerBorderGap": "{palette.size.size4}",
1390
+ "outerBorderWidth": "{palette.border.border2}",
1430
1391
  "radioInputBorderColor": "{palette.color.darkMosque}"
1431
1392
  }
1432
1393
  },
@@ -1437,9 +1398,9 @@
1437
1398
  "tokens": {
1438
1399
  "backgroundColor": "{palette.color.gallery}",
1439
1400
  "borderColor": "{system.color.transparent}",
1440
- "radioInputBorderColor": "{palette.color.silver}",
1401
+ "color": "{palette.color.dove}",
1441
1402
  "radioInputBackgroundColor": "{palette.color.gallery}",
1442
- "color": "{palette.color.dove}"
1403
+ "radioInputBorderColor": "{palette.color.silver}"
1443
1404
  }
1444
1405
  },
1445
1406
  {
@@ -1448,21 +1409,52 @@
1448
1409
  },
1449
1410
  "tokens": {
1450
1411
  "borderColor": "{palette.color.trinidad}",
1451
- "radioInputBorderColor": "{palette.color.trinidad}",
1452
- "color": "{palette.color.trinidad}"
1412
+ "color": "{palette.color.trinidad}",
1413
+ "radioInputBorderColor": "{palette.color.trinidad}"
1453
1414
  }
1454
1415
  }
1455
- ]
1416
+ ],
1417
+ "tokens": {
1418
+ "backgroundColor": "{palette.color.white}",
1419
+ "borderColor": "{palette.color.silver}",
1420
+ "borderRadius": "{palette.radius.radius4}",
1421
+ "borderWidth": "{palette.border.border1}",
1422
+ "color": "{palette.color.black}",
1423
+ "contentSpace": "{system.integer.2}",
1424
+ "flex": "{system.integer.1}",
1425
+ "fontName": "{palette.fontName.StagSans}",
1426
+ "fontSize": "{palette.fontSize.size20}",
1427
+ "fontWeight": "{palette.fontWeight.weight700}",
1428
+ "letterSpacing": "{system.letterSpacing.none}",
1429
+ "lineHeight": "{palette.lineHeight.multiply140}",
1430
+ "minWidth": "{palette.size.size120}",
1431
+ "outerBorderColor": "{system.color.transparent}",
1432
+ "outerBorderGap": "{system.size.zero}",
1433
+ "outerBorderWidth": "{system.border.zero}",
1434
+ "paddingBottom": "{palette.size.size16}",
1435
+ "paddingLeft": "{palette.size.size10}",
1436
+ "paddingRight": "{palette.size.size16}",
1437
+ "paddingTop": "{palette.size.size16}",
1438
+ "radioCheckedBackgroundColor": "{palette.color.mosque}",
1439
+ "radioCheckedSize": "{palette.size.size12}",
1440
+ "radioInputBackgroundColor": "{palette.color.white}",
1441
+ "radioInputBorderColor": "{palette.color.mosque}",
1442
+ "radioInputBorderWidth": "{palette.border.border2}",
1443
+ "radioInputOutlineColor": "{palette.color.transparent}",
1444
+ "radioInputOutlineWidth": "{palette.border.none}",
1445
+ "radioInputSize": "{palette.size.size20}",
1446
+ "radioOuterBorderColor": "{system.color.transparent}",
1447
+ "radioOuterBorderGap": "{system.size.zero}",
1448
+ "radioOuterBorderWidth": "{system.border.zero}",
1449
+ "radioSpace": "{system.integer.2}",
1450
+ "shadow": "{system.shadow.none}",
1451
+ "textTransform": "{system.textTransform.none}"
1452
+ }
1456
1453
  },
1457
1454
  "RadioCardGroup": {
1458
1455
  "appearances": {
1459
1456
  "viewport": "{appearances.system.viewport}"
1460
1457
  },
1461
- "tokens": {
1462
- "direction": "{system.direction.row}",
1463
- "fieldSpace": "{system.integer.2}",
1464
- "space": "{system.integer.2}"
1465
- },
1466
1458
  "rules": [
1467
1459
  {
1468
1460
  "if": {
@@ -1472,45 +1464,27 @@
1472
1464
  "direction": "{system.direction.column}"
1473
1465
  }
1474
1466
  }
1475
- ]
1467
+ ],
1468
+ "tokens": {
1469
+ "direction": "{system.direction.row}",
1470
+ "fieldSpace": "{system.integer.2}",
1471
+ "space": "{system.integer.2}"
1472
+ }
1476
1473
  },
1477
1474
  "RadioGroup": {
1478
1475
  "appearances": {},
1476
+ "rules": [],
1479
1477
  "tokens": {
1480
- "space": "{system.integer.2}",
1481
- "fieldSpace": "{system.integer.2}"
1482
- },
1483
- "rules": []
1478
+ "fieldSpace": "{system.integer.2}",
1479
+ "space": "{system.integer.2}"
1480
+ }
1484
1481
  },
1485
1482
  "Search": {
1486
1483
  "appearances": {
1487
- "hover": "{appearances.Search.hover}",
1488
1484
  "focus": "{appearances.Search.focus}",
1485
+ "hover": "{appearances.Search.hover}",
1489
1486
  "inactive": "{appearances.Search.inactive}"
1490
1487
  },
1491
- "tokens": {
1492
- "backgroundColor": "{palette.color.white}",
1493
- "color": "{palette.color.dove}",
1494
- "borderWidth": "{palette.border.border1}",
1495
- "borderColor": "{palette.color.silver}",
1496
- "borderRadius": "{palette.radius.pill32}",
1497
- "paddingTop": "{palette.size.size10}",
1498
- "paddingBottom": "{palette.size.size10}",
1499
- "paddingLeft": "{palette.size.size24}",
1500
- "paddingRight": "{palette.size.size4}",
1501
- "outerBackgroundColor": "{palette.color.transparent}",
1502
- "outerBorderWidth": "{palette.border.border2}",
1503
- "outerBorderColor": "{palette.color.transparent}",
1504
- "outerBorderRadius": "{palette.radius.pill32}",
1505
- "fontName": "{palette.fontName.StagSans}",
1506
- "fontWeight": "{palette.fontWeight.weight400}",
1507
- "fontSize": "{palette.fontSize.size16}",
1508
- "lineHeight": "{palette.lineHeight.multiply150}",
1509
- "placeholderColor": "{palette.color.dove}",
1510
- "buttonsGap": "{system.integer.1}",
1511
- "clearButtonIcon": "{palette.icon.Times}",
1512
- "submitButtonIcon": "{palette.icon.Spyglass}"
1513
- },
1514
1488
  "rules": [
1515
1489
  {
1516
1490
  "if": {
@@ -1518,8 +1492,8 @@
1518
1492
  "inactive": null
1519
1493
  },
1520
1494
  "tokens": {
1521
- "outerBorderColor": "{palette.color.gallery}",
1522
- "outerBackgroundColor": "{palette.color.gallery}"
1495
+ "outerBackgroundColor": "{palette.color.gallery}",
1496
+ "outerBorderColor": "{palette.color.gallery}"
1523
1497
  }
1524
1498
  },
1525
1499
  {
@@ -1541,34 +1515,43 @@
1541
1515
  "borderColor": "{palette.color.gallery}"
1542
1516
  }
1543
1517
  }
1544
- ]
1545
- },
1546
- "SearchButton": {
1547
- "appearances": {
1548
- "hover": "{appearances.SearchButton.hover}",
1518
+ ],
1519
+ "tokens": {
1520
+ "backgroundColor": "{palette.color.white}",
1521
+ "borderColor": "{palette.color.silver}",
1522
+ "borderRadius": "{palette.radius.pill32}",
1523
+ "borderWidth": "{palette.border.border1}",
1524
+ "buttonsGap": "{palette.size.size1}",
1525
+ "clearButtonIcon": "{palette.icon.Times}",
1526
+ "color": "{palette.color.dove}",
1527
+ "fontName": "{palette.fontName.StagSans}",
1528
+ "fontSize": "{palette.fontSize.size16}",
1529
+ "fontWeight": "{palette.fontWeight.weight400}",
1530
+ "lineHeight": "{palette.lineHeight.multiply150}",
1531
+ "outerBackgroundColor": "{palette.color.transparent}",
1532
+ "outerBorderColor": "{palette.color.transparent}",
1533
+ "outerBorderRadius": "{palette.radius.pill32}",
1534
+ "outerBorderWidth": "{palette.border.border2}",
1535
+ "paddingBottom": "{palette.size.size10}",
1536
+ "paddingLeft": "{palette.size.size24}",
1537
+ "paddingRight": "{palette.size.size4}",
1538
+ "paddingTop": "{palette.size.size10}",
1539
+ "placeholderColor": "{palette.color.dove}",
1540
+ "submitButtonIcon": "{palette.icon.Spyglass}"
1541
+ }
1542
+ },
1543
+ "SearchButton": {
1544
+ "appearances": {
1549
1545
  "focus": "{appearances.SearchButton.focus}",
1546
+ "hover": "{appearances.SearchButton.hover}",
1550
1547
  "inactive": "{appearances.SearchButton.inactive}",
1551
1548
  "pressed": "{appearances.SearchButton.pressed}",
1552
1549
  "priority": {
1553
1550
  "description": "",
1554
- "values": ["high"],
1555
- "type": "variant"
1551
+ "type": "variant",
1552
+ "values": ["high"]
1556
1553
  }
1557
1554
  },
1558
- "tokens": {
1559
- "borderColor": "{system.color.none}",
1560
- "borderWidth": "{system.border.zero}",
1561
- "borderRadius": "{palette.radius.pill32}",
1562
- "backgroundColor": "{system.color.none}",
1563
- "paddingLeft": "{palette.size.size8}",
1564
- "paddingRight": "{palette.size.size8}",
1565
- "paddingBottom": "{palette.size.size8}",
1566
- "paddingTop": "{palette.size.size8}",
1567
- "opacity": "{system.opacity.opaque}",
1568
- "shadow": "{system.shadow.none}",
1569
- "iconSize": "{palette.size.size20}",
1570
- "iconColor": "{palette.color.dove}"
1571
- },
1572
1555
  "rules": [
1573
1556
  {
1574
1557
  "if": {
@@ -1584,8 +1567,8 @@
1584
1567
  "hover": true
1585
1568
  },
1586
1569
  "tokens": {
1587
- "borderColor": "{palette.color.darkMosque}",
1588
1570
  "backgroundColor": "{palette.color.darkMosque}",
1571
+ "borderColor": "{palette.color.darkMosque}",
1589
1572
  "iconColor": "{palette.color.white}"
1590
1573
  }
1591
1574
  },
@@ -1594,10 +1577,10 @@
1594
1577
  "focus": true
1595
1578
  },
1596
1579
  "tokens": {
1580
+ "backgroundColor": "{system.color.transparent}",
1597
1581
  "borderColor": "{palette.color.mosque}",
1598
1582
  "borderWidth": "{palette.border.border2}",
1599
- "iconColor": "{palette.color.mosque}",
1600
- "backgroundColor": "{system.color.transparent}"
1583
+ "iconColor": "{palette.color.mosque}"
1601
1584
  }
1602
1585
  },
1603
1586
  {
@@ -1605,10 +1588,10 @@
1605
1588
  "pressed": true
1606
1589
  },
1607
1590
  "tokens": {
1608
- "iconColor": "{palette.color.white}",
1609
- "borderColor": "{system.color.none}",
1610
1591
  "backgroundColor": "{palette.color.mosque}",
1611
- "borderWidth": "{system.border.zero}"
1592
+ "borderColor": "{system.color.none}",
1593
+ "borderWidth": "{system.border.zero}",
1594
+ "iconColor": "{palette.color.white}"
1612
1595
  }
1613
1596
  },
1614
1597
  {
@@ -1619,38 +1602,28 @@
1619
1602
  "opacity": "{palette.opacity.opacity3}"
1620
1603
  }
1621
1604
  }
1622
- ]
1605
+ ],
1606
+ "tokens": {
1607
+ "backgroundColor": "{system.color.none}",
1608
+ "borderColor": "{system.color.none}",
1609
+ "borderRadius": "{palette.radius.pill32}",
1610
+ "borderWidth": "{system.border.zero}",
1611
+ "iconColor": "{palette.color.dove}",
1612
+ "iconSize": "{palette.size.size20}",
1613
+ "opacity": "{system.opacity.opaque}",
1614
+ "paddingBottom": "{palette.size.size8}",
1615
+ "paddingLeft": "{palette.size.size8}",
1616
+ "paddingRight": "{palette.size.size8}",
1617
+ "paddingTop": "{palette.size.size8}",
1618
+ "shadow": "{system.shadow.none}"
1619
+ }
1623
1620
  },
1624
1621
  "Select": {
1625
1622
  "appearances": {
1626
- "validation": "{appearances.Select.validation}",
1627
- "hover": "{appearances.Select.hover}",
1628
1623
  "focus": "{appearances.Select.focus}",
1629
- "inactive": "{appearances.Select.inactive}"
1630
- },
1631
- "tokens": {
1632
- "backgroundColor": "{palette.color.white}",
1633
- "color": "{palette.color.dove}",
1634
- "borderWidth": "{palette.border.border1}",
1635
- "borderColor": "{palette.color.silver}",
1636
- "borderRadius": "{palette.radius.radius4}",
1637
- "paddingTop": "{palette.size.size10}",
1638
- "paddingBottom": "{palette.size.size10}",
1639
- "paddingLeft": "{palette.size.size16}",
1640
- "paddingRight": "{palette.size.size16}",
1641
- "height": "{palette.size.size48}",
1642
- "outerBackgroundColor": "{palette.color.transparent}",
1643
- "outerBorderWidth": "{palette.border.border2}",
1644
- "outerBorderColor": "{palette.color.transparent}",
1645
- "fontName": "{palette.fontName.StagSans}",
1646
- "fontWeight": "{palette.fontWeight.weight400}",
1647
- "fontSize": "{palette.fontSize.size16}",
1648
- "icon": "{palette.icon.ChevronDown}",
1649
- "iconSize": "{palette.fontSize.size24}",
1650
- "iconColor": "{palette.color.dove}",
1651
- "validationIcon": "{system.icon.none}",
1652
- "validationIconSize": "{palette.fontSize.size24}",
1653
- "validationIconColor": "{palette.color.transparent}"
1624
+ "hover": "{appearances.Select.hover}",
1625
+ "inactive": "{appearances.Select.inactive}",
1626
+ "validation": "{appearances.Select.validation}"
1654
1627
  },
1655
1628
  "rules": [
1656
1629
  {
@@ -1659,8 +1632,8 @@
1659
1632
  "inactive": null
1660
1633
  },
1661
1634
  "tokens": {
1662
- "outerBorderColor": "{palette.color.gallery}",
1663
- "outerBackgroundColor": "{palette.color.gallery}"
1635
+ "outerBackgroundColor": "{palette.color.gallery}",
1636
+ "outerBorderColor": "{palette.color.gallery}"
1664
1637
  }
1665
1638
  },
1666
1639
  {
@@ -1702,43 +1675,47 @@
1702
1675
  "borderColor": "{palette.color.gallery}"
1703
1676
  }
1704
1677
  }
1705
- ]
1678
+ ],
1679
+ "tokens": {
1680
+ "backgroundColor": "{palette.color.white}",
1681
+ "borderColor": "{palette.color.silver}",
1682
+ "borderRadius": "{palette.radius.radius4}",
1683
+ "borderWidth": "{palette.border.border1}",
1684
+ "color": "{palette.color.dove}",
1685
+ "fontName": "{palette.fontName.StagSans}",
1686
+ "fontSize": "{palette.fontSize.size16}",
1687
+ "fontWeight": "{palette.fontWeight.weight400}",
1688
+ "height": "{palette.size.size48}",
1689
+ "icon": "{palette.icon.ChevronDown}",
1690
+ "iconColor": "{palette.color.dove}",
1691
+ "iconSize": "{palette.size.size24}",
1692
+ "outerBackgroundColor": "{palette.color.transparent}",
1693
+ "outerBorderColor": "{palette.color.transparent}",
1694
+ "outerBorderWidth": "{palette.border.border2}",
1695
+ "paddingBottom": "{palette.size.size10}",
1696
+ "paddingLeft": "{palette.size.size16}",
1697
+ "paddingRight": "{palette.size.size16}",
1698
+ "paddingTop": "{palette.size.size10}",
1699
+ "validationIcon": "{system.icon.none}",
1700
+ "validationIconColor": "{palette.color.transparent}",
1701
+ "validationIconSize": "{palette.size.size24}"
1702
+ }
1706
1703
  },
1707
1704
  "SideNav": {
1708
1705
  "appearances": {},
1706
+ "rules": [],
1709
1707
  "tokens": {
1710
1708
  "borderColor": "{palette.color.silver}",
1711
- "borderWidth": "{palette.border.border1}",
1712
- "borderStyle": "{system.borderStyle.solid}"
1713
- },
1714
- "rules": []
1709
+ "borderStyle": "{system.borderStyle.solid}",
1710
+ "borderWidth": "{palette.border.border1}"
1711
+ }
1715
1712
  },
1716
1713
  "SideNavItem": {
1717
1714
  "appearances": {
1718
1715
  "active": "{appearances.SideNavItem.active}",
1719
- "type": "{appearances.SideNavItem.type}",
1720
1716
  "expanded": "{appearances.SideNavItem.expanded}",
1721
- "hover": "{appearances.SideNavItem.hover}"
1722
- },
1723
- "tokens": {
1724
- "borderColor": "{palette.color.silver}",
1725
- "borderWidth": "{palette.border.border1}",
1726
- "borderStyle": "{system.borderStyle.solid}",
1727
- "paddingLeft": "{palette.size.size16}",
1728
- "paddingRight": "{palette.size.size16}",
1729
- "paddingTop": "{palette.size.size16}",
1730
- "paddingBottom": "{palette.size.size16}",
1731
- "justifyContent": "{system.flexJustifyContent.spaceBetween}",
1732
- "color": "{palette.color.dove}",
1733
- "accentOffset": "{system.size.zero}",
1734
- "accentPadding": "{system.size.zero}",
1735
- "accentWidth": "{palette.size.size4}",
1736
- "accentBackgroundColor": "{palette.color.transparent}",
1737
- "fontSize": "{palette.fontSize.size16}",
1738
- "fontWeight": "{palette.fontWeight.weight400}",
1739
- "fontName": "{palette.fontName.StagSans}",
1740
- "lineHeight": "{palette.lineHeight.multiply150}",
1741
- "backgroundColor": "{system.color.transparent}"
1717
+ "hover": "{appearances.SideNavItem.hover}",
1718
+ "type": "{appearances.SideNavItem.type}"
1742
1719
  },
1743
1720
  "rules": [
1744
1721
  {
@@ -1746,10 +1723,10 @@
1746
1723
  "active": true
1747
1724
  },
1748
1725
  "tokens": {
1749
- "paddingLeft": "{palette.size.size10}",
1750
- "backgroundColor": "{palette.color.mintTulip}",
1751
1726
  "accentBackgroundColor": "{palette.color.mosque}",
1752
- "color": "{palette.color.mosque}"
1727
+ "backgroundColor": "{palette.color.mintTulip}",
1728
+ "color": "{palette.color.mosque}",
1729
+ "paddingLeft": "{palette.size.size10}"
1753
1730
  }
1754
1731
  },
1755
1732
  {
@@ -1757,16 +1734,16 @@
1757
1734
  "type": "child"
1758
1735
  },
1759
1736
  "tokens": {
1760
- "paddingLeft": "{palette.size.size36}",
1761
- "borderWidth": "{palette.border.none}",
1762
1737
  "accentBackgroundColor": "{palette.color.mintTulip}",
1763
- "accentOffset": "{palette.size.size16}"
1738
+ "accentOffset": "{palette.size.size16}",
1739
+ "borderWidth": "{palette.border.none}",
1740
+ "paddingLeft": "{palette.size.size36}"
1764
1741
  }
1765
1742
  },
1766
1743
  {
1767
1744
  "if": {
1768
- "type": "parent",
1769
- "active": true
1745
+ "active": true,
1746
+ "type": "parent"
1770
1747
  },
1771
1748
  "tokens": {
1772
1749
  "paddingLeft": "{palette.size.size10}"
@@ -1774,15 +1751,15 @@
1774
1751
  },
1775
1752
  {
1776
1753
  "if": {
1777
- "type": "parent",
1778
1754
  "active": true,
1779
- "expanded": true
1755
+ "expanded": true,
1756
+ "type": "parent"
1780
1757
  },
1781
1758
  "tokens": {
1782
- "paddingLeft": "{palette.size.size16}",
1783
- "backgroundColor": "{palette.color.transparent}",
1784
1759
  "accentBackgroundColor": "{palette.color.transparent}",
1785
- "color": "{palette.color.dove}"
1760
+ "backgroundColor": "{palette.color.transparent}",
1761
+ "color": "{palette.color.dove}",
1762
+ "paddingLeft": "{palette.size.size16}"
1786
1763
  }
1787
1764
  },
1788
1765
  {
@@ -1796,93 +1773,124 @@
1796
1773
  },
1797
1774
  {
1798
1775
  "if": {
1799
- "type": "child",
1800
- "active": true
1776
+ "active": true,
1777
+ "type": "child"
1801
1778
  },
1802
1779
  "tokens": {
1803
- "backgroundColor": "{palette.color.mintTulip}",
1804
- "color": "{palette.color.mosque}",
1780
+ "accentBackgroundColor": "{palette.color.mosque}",
1805
1781
  "accentPadding": "{palette.size.size16}",
1806
- "accentBackgroundColor": "{palette.color.mosque}"
1782
+ "backgroundColor": "{palette.color.mintTulip}",
1783
+ "color": "{palette.color.mosque}"
1807
1784
  }
1808
1785
  },
1809
1786
  {
1810
1787
  "if": {
1811
- "type": "child",
1812
1788
  "active": false,
1813
- "hover": true
1789
+ "hover": true,
1790
+ "type": "child"
1814
1791
  },
1815
1792
  "tokens": {
1816
1793
  "accentBackgroundColor": "{palette.color.white}",
1817
- "color": "{palette.color.dove}",
1818
1794
  "accentOffset": "{system.size.zero}",
1819
- "accentWidth": "{palette.size.size16}"
1795
+ "accentWidth": "{palette.size.size16}",
1796
+ "color": "{palette.color.dove}"
1820
1797
  }
1821
1798
  }
1822
- ]
1799
+ ],
1800
+ "tokens": {
1801
+ "accentBackgroundColor": "{palette.color.transparent}",
1802
+ "accentOffset": "{system.size.zero}",
1803
+ "accentPadding": "{system.size.zero}",
1804
+ "accentWidth": "{palette.size.size4}",
1805
+ "backgroundColor": "{system.color.transparent}",
1806
+ "borderColor": "{palette.color.silver}",
1807
+ "borderStyle": "{system.borderStyle.solid}",
1808
+ "borderWidth": "{palette.border.border1}",
1809
+ "color": "{palette.color.dove}",
1810
+ "fontName": "{palette.fontName.StagSans}",
1811
+ "fontSize": "{palette.fontSize.size16}",
1812
+ "fontWeight": "{palette.fontWeight.weight400}",
1813
+ "justifyContent": "{system.flexJustifyContent.spaceBetween}",
1814
+ "lineHeight": "{palette.lineHeight.multiply150}",
1815
+ "paddingBottom": "{palette.size.size16}",
1816
+ "paddingLeft": "{palette.size.size16}",
1817
+ "paddingRight": "{palette.size.size16}",
1818
+ "paddingTop": "{palette.size.size16}"
1819
+ }
1823
1820
  },
1824
1821
  "SideNavItemsGroup": {
1825
1822
  "appearances": {},
1823
+ "rules": [],
1826
1824
  "tokens": {
1827
- "expandDuration": "{palette.duration.duration300}",
1828
1825
  "collapseDuration": "{palette.duration.duration250}",
1829
- "icon": "{system.icon.none}",
1830
- "iconColor": "{system.color.none}",
1831
- "iconGap": "{palette.size.size8}",
1832
- "iconSize": "{palette.size.size10}",
1826
+ "contentPaddingBottom": "{palette.size.size0}",
1833
1827
  "contentPaddingLeft": "{palette.size.size0}",
1834
1828
  "contentPaddingRight": "{palette.size.size0}",
1835
1829
  "contentPaddingTop": "{palette.size.size0}",
1836
- "contentPaddingBottom": "{palette.size.size0}",
1830
+ "expandDuration": "{palette.duration.duration300}",
1831
+ "icon": "{system.icon.none}",
1832
+ "iconColor": "{system.color.none}",
1833
+ "iconGap": "{palette.size.size8}",
1837
1834
  "iconPosition": "{system.position.right}",
1838
- "verticalAlign": "{system.verticalAlign.middle}",
1839
- "justifyContent": "{system.flexJustifyContent.spaceBetween}"
1840
- },
1841
- "rules": []
1835
+ "iconSize": "{palette.size.size10}",
1836
+ "justifyContent": "{system.flexJustifyContent.spaceBetween}",
1837
+ "verticalAlign": "{system.verticalAlign.middle}"
1838
+ }
1842
1839
  },
1843
1840
  "Skeleton": {
1844
1841
  "appearances": {},
1842
+ "rules": [],
1845
1843
  "tokens": {
1846
- "color": "{palette.color.dove}",
1847
- "size": "{palette.border.border2}",
1848
- "radius": "{palette.size.size120}",
1849
1844
  "baseWidth": "{palette.size.size40}",
1850
1845
  "characters": "{palette.size.size10}",
1846
+ "color": "{palette.color.dove}",
1847
+ "radius": "{system.radius.round}",
1848
+ "size": "{palette.size.size2}",
1851
1849
  "spaceBetweenLines": "{palette.size.size4}",
1852
- "squareRadius": "{palette.size.size4}"
1853
- },
1854
- "rules": []
1850
+ "squareRadius": "{palette.radius.radius4}"
1851
+ }
1855
1852
  },
1856
1853
  "StackView": {
1857
1854
  "appearances": {},
1855
+ "rules": [],
1858
1856
  "tokens": {
1859
1857
  "alignItems": "{system.flexAlign.stretch}",
1860
- "justifyContent": "{system.flexJustifyContent.flexStart}",
1861
1858
  "flexGrow": "{system.integer.0}",
1862
- "flexShrink": "{system.integer.0}"
1863
- },
1864
- "rules": []
1859
+ "flexShrink": "{system.integer.0}",
1860
+ "justifyContent": "{system.flexJustifyContent.flexStart}"
1861
+ }
1865
1862
  },
1866
1863
  "StepTracker": {
1867
1864
  "appearances": {
1868
1865
  "viewport": "{appearances.system.viewport}"
1869
1866
  },
1867
+ "rules": [
1868
+ {
1869
+ "if": {
1870
+ "viewport": ["lg", "xl"]
1871
+ },
1872
+ "tokens": {
1873
+ "showStepLabel": "{system.show.true}",
1874
+ "showStepTrackerLabel": "{system.show.false}"
1875
+ }
1876
+ }
1877
+ ],
1870
1878
  "tokens": {
1871
1879
  "completedIcon": "{palette.icon.Check}",
1872
1880
  "completedIconColor": "{palette.color.white}",
1873
1881
  "completedIconSize": "{palette.size.size10}",
1874
1882
  "connectorColor": "{palette.color.mosque}",
1883
+ "connectorCompletedColor": "{palette.color.mosque}",
1884
+ "connectorCompletedHeight": "{palette.border.border1}",
1875
1885
  "connectorHeight": "{palette.border.border1}",
1876
1886
  "connectorMinWidth": "{palette.size.size16}",
1877
- "connectorCompletedHeight": "{palette.border.border1}",
1878
- "connectorCompletedColor": "{palette.color.mosque}",
1879
1887
  "containerPaddingBottom": "{system.size.none}",
1880
1888
  "containerPaddingLeft": "{system.size.none}",
1881
1889
  "containerPaddingRight": "{system.size.none}",
1882
1890
  "containerPaddingTop": "{system.size.none}",
1883
1891
  "knobBackgroundColor": "{palette.color.transparent}",
1884
- "knobBorderWidth": "{palette.border.border1}",
1885
1892
  "knobBorderColor": "{palette.color.mosque}",
1893
+ "knobBorderWidth": "{palette.border.border1}",
1886
1894
  "knobCompletedBackgroundColor": "{palette.color.mosque}",
1887
1895
  "knobCompletedBorderColor": "{palette.color.mosque}",
1888
1896
  "knobCompletedPaddingLeft": "{palette.size.size2}",
@@ -1894,78 +1902,43 @@
1894
1902
  "knobCurrentInnerSize": "{system.size.none}",
1895
1903
  "knobCurrentPaddingLeft": "{system.size.none}",
1896
1904
  "knobCurrentPaddingTop": "{system.size.none}",
1897
- "knobSize": "{palette.size.size16}",
1905
+ "knobSize": "{palette.size.size15}",
1898
1906
  "labelColor": "{palette.color.mosque}",
1899
- "labelCurrentFontWeight": "{palette.fontWeight.weight600}",
1900
- "labelCurrentFontName": "{palette.fontName.StagSans}",
1901
1907
  "labelCurrentColor": "{palette.color.mosque}",
1908
+ "labelCurrentFontName": "{palette.fontName.StagSans}",
1909
+ "labelCurrentFontWeight": "{palette.fontWeight.weight700}",
1902
1910
  "labelDirection": "{system.direction.row}",
1911
+ "labelFontName": "{palette.fontName.StagSans}",
1903
1912
  "labelFontSize": "{palette.fontSize.size16}",
1904
1913
  "labelFontWeight": "{palette.fontWeight.weight400}",
1905
- "labelFontName": "{palette.fontName.StagSans}",
1906
1914
  "labelGap": "{palette.size.size4}",
1907
1915
  "labelLineHeight": "{palette.lineHeight.multiply150}",
1908
- "labelMarginTop": "{palette.size.size8}",
1916
+ "labelMarginTop": "{palette.size.size10}",
1909
1917
  "labelPaddingLeft": "{palette.size.size16}",
1910
1918
  "labelPaddingRight": "{palette.size.size16}",
1911
1919
  "showStepLabel": "{system.show.false}",
1912
- "showStepTrackerLabel": "{system.show.true}",
1913
- "showStepName": "{system.show.true}"
1914
- },
1915
- "rules": [
1916
- {
1917
- "if": {
1918
- "viewport": ["lg", "xl"]
1919
- },
1920
- "tokens": {
1921
- "showStepLabel": "{system.show.true}",
1922
- "showStepTrackerLabel": "{system.show.false}"
1923
- }
1924
- }
1925
- ]
1920
+ "showStepName": "{system.show.true}",
1921
+ "showStepTrackerLabel": "{system.show.true}"
1922
+ }
1926
1923
  },
1927
1924
  "Tabs": {
1928
1925
  "appearances": {},
1926
+ "rules": [],
1929
1927
  "tokens": {
1928
+ "borderBottomColor": "{system.color.transparent}",
1929
+ "borderBottomWidth": "{system.border.zero}",
1930
+ "buttonClearance": "{palette.size.size32}",
1931
+ "gutter": "{palette.size.size16}",
1930
1932
  "nextIcon": "{palette.icon.ChevronRight}",
1931
1933
  "previousIcon": "{palette.icon.ChevronLeft}",
1932
- "gutter": "{palette.size.size16}",
1933
- "buttonClearance": "{palette.size.size32}",
1934
- "space": "{system.integer.0}",
1935
- "borderBottomColor": "{system.color.transparent}",
1936
- "borderBottomWidth": "{system.border.zero}"
1937
- },
1938
- "rules": []
1934
+ "space": "{system.integer.0}"
1935
+ }
1939
1936
  },
1940
1937
  "TabsItem": {
1941
1938
  "appearances": {
1942
- "selected": "{appearances.TabsItem.pressed}",
1939
+ "focus": "{appearances.TabsItem.focus}",
1943
1940
  "hover": "{appearances.TabsItem.hover}",
1944
- "focus": "{appearances.TabsItem.focus}"
1945
- },
1946
- "tokens": {
1947
- "highlightColor": "{system.color.transparent}",
1948
- "highlightBarHeight": "{system.size.zero}",
1949
- "highlightBarBorderRadius": "{system.radius.zero}",
1950
- "highlightBarBorderWidth": "{system.border.zero}",
1951
- "highlightTriangleSize": "{system.size.zero}",
1952
- "backgroundColor": "{palette.color.gallery}",
1953
- "borderColor": "{palette.color.silver}",
1954
- "borderWidth": "{palette.border.border1}",
1955
- "borderRadius": "{system.radius.zero}",
1956
- "maxWidth": "{system.size.none}",
1957
- "space": "{system.integer.0}",
1958
- "paddingHorizontal": "{palette.size.size16}",
1959
- "paddingVertical": "{palette.size.size16}",
1960
- "textAlign": "{system.textAlign.center}",
1961
- "fontSize": "{palette.fontSize.size16}",
1962
- "color": "{palette.color.black}",
1963
- "lineHeight": "{palette.lineHeight.multiply110}",
1964
- "letterSpacing": "{system.letterSpacing.none}",
1965
- "textTransform": "{system.textTransform.none}",
1966
- "fontScaleCap": "{palette.fontSize.size64}",
1967
- "fontWeight": "{palette.fontWeight.weight700}",
1968
- "fontName": "{palette.fontName.StagSans}"
1941
+ "selected": "{appearances.TabsItem.pressed}"
1969
1942
  },
1970
1943
  "rules": [
1971
1944
  {
@@ -1989,70 +1962,58 @@
1989
1962
  "selected": true
1990
1963
  },
1991
1964
  "tokens": {
1992
- "color": "{palette.color.white}",
1993
1965
  "backgroundColor": "{palette.color.mosque}",
1994
1966
  "borderWidth": "{system.border.zero}",
1995
- "highlightTriangleSize": "{palette.size.size8}",
1996
- "highlightColor": "{palette.color.mosque}"
1967
+ "color": "{palette.color.white}",
1968
+ "highlightColor": "{palette.color.mosque}",
1969
+ "highlightTriangleSize": "{palette.size.size8}"
1997
1970
  }
1998
1971
  }
1999
- ]
2000
- },
2001
- "Tags": {
2002
- "appearances": {},
2003
- "tokens": {
2004
- "space": "{system.integer.3}",
2005
- "direction": "{system.direction.row}",
2006
- "alignItems": "{system.flexAlign.center}",
2007
- "justifyContent": "{system.flexJustifyContent.flexStart}",
2008
- "flexGrow": "{system.integer.0}",
2009
- "flexShrink": "{system.integer.0}"
2010
- },
2011
- "rules": []
2012
- },
2013
- "TagsItem": {
2014
- "appearances": {
2015
- "hover": "{appearances.TagsItem.hover}",
2016
- "focus": "{appearances.TagsItem.focus}",
2017
- "pressed": "{appearances.TagsItem.pressed}",
2018
- "selected": "{appearances.TagsItem.selected}",
2019
- "inactive": "{appearances.TagsItem.inactive}"
2020
- },
1972
+ ],
2021
1973
  "tokens": {
2022
- "iconSize": "{palette.size.size20}",
2023
- "iconColor": "{palette.color.mosque}",
2024
- "iconTranslateX": "{system.integer.0}",
2025
- "iconTranslateY": "{system.integer.0}",
2026
- "icon": "{palette.icon.CheckCircledNotFilled}",
2027
- "iconPosition": "{system.position.right}",
2028
- "iconSpace": "{system.integer.3}",
2029
- "iconBackground": "{palette.color.white}",
2030
- "iconBorderRadius": "{palette.radius.pill32}",
2031
- "iconAlignSelf": "{system.flexAlign.center}",
2032
- "iconPadding": "{palette.size.size4}",
2033
- "borderColor": "{palette.color.darkMosque}",
2034
- "borderWidth": "{palette.border.none}",
2035
- "borderRadius": "{palette.radius.radius4}",
2036
- "shadow": "{system.shadow.none}",
2037
- "fontSize": "{palette.fontSize.size14}",
2038
- "color": "{palette.color.white}",
2039
- "lineHeight": "{palette.lineHeight.multiply150}",
1974
+ "backgroundColor": "{palette.color.gallery}",
1975
+ "borderColor": "{palette.color.silver}",
1976
+ "borderRadius": "{system.radius.zero}",
1977
+ "borderWidth": "{palette.border.border1}",
1978
+ "color": "{palette.color.black}",
2040
1979
  "fontName": "{palette.fontName.StagSans}",
2041
- "fontWeight": "{palette.fontWeight.weight600}",
2042
- "textAlign": "{system.flexJustifyContent.center}",
2043
- "alignSelf": "{system.flexAlign.center}",
2044
- "backgroundColor": "{palette.color.mosque}",
2045
- "opacity": "{system.opacity.opaque}",
2046
- "paddingLeft": "{palette.size.size24}",
2047
- "paddingRight": "{palette.size.size16}",
2048
- "paddingTop": "{palette.size.size8}",
2049
- "paddingBottom": "{palette.size.size8}",
2050
- "width": "{system.size.none}",
2051
- "minWidth": "{system.size.zero}",
2052
- "outerBorderColor": "{palette.color.transparent}",
2053
- "outerBorderWidth": "{palette.border.border2}",
2054
- "outerBorderGap": "{palette.border.border2}",
2055
- "outerBackgroundColor": "{palette.color.transparent}"
1980
+ "fontScaleCap": "{palette.fontSize.size64}",
1981
+ "fontSize": "{palette.fontSize.size16}",
1982
+ "fontWeight": "{palette.fontWeight.weight700}",
1983
+ "highlightBarBorderRadius": "{system.radius.zero}",
1984
+ "highlightBarBorderWidth": "{system.border.zero}",
1985
+ "highlightBarHeight": "{system.border.zero}",
1986
+ "highlightColor": "{system.color.transparent}",
1987
+ "highlightTriangleSize": "{system.size.zero}",
1988
+ "letterSpacing": "{system.letterSpacing.none}",
1989
+ "lineHeight": "{palette.lineHeight.multiply110}",
1990
+ "maxWidth": "{system.size.none}",
1991
+ "paddingHorizontal": "{palette.size.size16}",
1992
+ "paddingVertical": "{palette.size.size16}",
1993
+ "space": "{system.integer.0}",
1994
+ "textAlign": "{system.textAlign.center}",
1995
+ "textTransform": "{system.textTransform.none}"
1996
+ }
1997
+ },
1998
+ "Tags": {
1999
+ "appearances": {},
2000
+ "rules": [],
2001
+ "tokens": {
2002
+ "alignItems": "{system.flexAlign.center}",
2003
+ "direction": "{system.direction.row}",
2004
+ "flexGrow": "{system.integer.0}",
2005
+ "flexShrink": "{system.integer.0}",
2006
+ "justifyContent": "{system.flexJustifyContent.flexStart}",
2007
+ "space": "{system.integer.3}"
2008
+ }
2009
+ },
2010
+ "TagsItem": {
2011
+ "appearances": {
2012
+ "focus": "{appearances.TagsItem.focus}",
2013
+ "hover": "{appearances.TagsItem.hover}",
2014
+ "inactive": "{appearances.TagsItem.inactive}",
2015
+ "pressed": "{appearances.TagsItem.pressed}",
2016
+ "selected": "{appearances.TagsItem.selected}"
2056
2017
  },
2057
2018
  "rules": [
2058
2019
  {
@@ -2060,9 +2021,9 @@
2060
2021
  "pressed": true
2061
2022
  },
2062
2023
  "tokens": {
2063
- "color": "{palette.color.white}",
2024
+ "backgroundColor": "{palette.color.mosque}",
2064
2025
  "borderColor": "{palette.color.mosque}",
2065
- "backgroundColor": "{palette.color.mosque}"
2026
+ "color": "{palette.color.white}"
2066
2027
  }
2067
2028
  },
2068
2029
  {
@@ -2087,11 +2048,11 @@
2087
2048
  "selected": true
2088
2049
  },
2089
2050
  "tokens": {
2051
+ "icon": "{palette.icon.CheckCircledFilled}",
2090
2052
  "opacity": "{palette.opacity.opacity8}",
2091
2053
  "outerBorderColor": "{palette.color.mosque}",
2092
- "outerBorderGap": "{palette.border.border1}",
2093
- "outerBorderWidth": "{palette.border.border4}",
2094
- "icon": "{palette.icon.CheckCircledFilled}"
2054
+ "outerBorderGap": "{palette.size.size1}",
2055
+ "outerBorderWidth": "{palette.border.border4}"
2095
2056
  }
2096
2057
  },
2097
2058
  {
@@ -2109,8 +2070,8 @@
2109
2070
  },
2110
2071
  "tokens": {
2111
2072
  "backgroundColor": "{palette.color.dove}",
2112
- "color": "{palette.color.white}",
2113
2073
  "borderWidth": "{system.border.zero}",
2074
+ "color": "{palette.color.white}",
2114
2075
  "iconColor": "{palette.color.dove}"
2115
2076
  }
2116
2077
  },
@@ -2121,56 +2082,71 @@
2121
2082
  "tokens": {
2122
2083
  "opacity": "{palette.opacity.opacity8}",
2123
2084
  "outerBorderColor": "{palette.color.mosque}",
2124
- "outerBorderGap": "{palette.border.border1}",
2085
+ "outerBorderGap": "{palette.size.size1}",
2125
2086
  "outerBorderWidth": "{palette.border.border4}"
2126
2087
  }
2127
2088
  },
2128
2089
  {
2129
2090
  "if": {
2130
- "selected": true,
2131
- "focus": true
2091
+ "focus": true,
2092
+ "selected": true
2132
2093
  },
2133
2094
  "tokens": {
2134
2095
  "outerBorderColor": "{palette.color.darkMosque}"
2135
2096
  }
2136
2097
  }
2137
- ]
2098
+ ],
2099
+ "tokens": {
2100
+ "alignSelf": "{system.flexAlign.center}",
2101
+ "backgroundColor": "{palette.color.mosque}",
2102
+ "borderColor": "{palette.color.darkMosque}",
2103
+ "borderRadius": "{palette.radius.radius4}",
2104
+ "borderWidth": "{palette.border.none}",
2105
+ "color": "{palette.color.white}",
2106
+ "fontName": "{palette.fontName.StagSans}",
2107
+ "fontSize": "{palette.fontSize.size14}",
2108
+ "fontWeight": "{palette.fontWeight.weight600}",
2109
+ "icon": "{palette.icon.CheckCircledNotFilled}",
2110
+ "iconAlignSelf": "{system.flexAlign.center}",
2111
+ "iconBackground": "{palette.color.white}",
2112
+ "iconBorderRadius": "{palette.radius.pill32}",
2113
+ "iconColor": "{palette.color.mosque}",
2114
+ "iconPadding": "{palette.size.size4}",
2115
+ "iconPosition": "{system.position.right}",
2116
+ "iconSize": "{palette.size.size20}",
2117
+ "iconSpace": "{system.integer.3}",
2118
+ "iconTranslateX": "{palette.size.size0}",
2119
+ "iconTranslateY": "{palette.size.size0}",
2120
+ "lineHeight": "{palette.lineHeight.multiply150}",
2121
+ "minWidth": "{system.size.zero}",
2122
+ "opacity": "{system.opacity.opaque}",
2123
+ "outerBackgroundColor": "{palette.color.transparent}",
2124
+ "outerBorderColor": "{palette.color.transparent}",
2125
+ "outerBorderGap": "{palette.size.size2}",
2126
+ "outerBorderWidth": "{palette.border.border2}",
2127
+ "paddingBottom": "{palette.size.size8}",
2128
+ "paddingLeft": "{palette.size.size24}",
2129
+ "paddingRight": "{palette.size.size16}",
2130
+ "paddingTop": "{palette.size.size8}",
2131
+ "shadow": "{system.shadow.none}",
2132
+ "textAlign": "{system.flexJustifyContent.center}",
2133
+ "width": "{system.size.none}"
2134
+ }
2138
2135
  },
2139
2136
  "TextArea": {
2140
2137
  "appearances": {},
2138
+ "rules": [],
2141
2139
  "tokens": {
2142
- "minLines": "{system.integer.2}",
2143
- "maxLines": "{system.integer.4}"
2144
- },
2145
- "rules": []
2140
+ "maxLines": "{system.integer.4}",
2141
+ "minLines": "{system.integer.2}"
2142
+ }
2146
2143
  },
2147
2144
  "TextInput": {
2148
2145
  "appearances": {
2149
- "validation": "{appearances.TextInput.validation}",
2150
- "hover": "{appearances.TextInput.hover}",
2151
2146
  "focus": "{appearances.TextInput.focus}",
2152
- "inactive": "{appearances.TextInput.inactive}"
2153
- },
2154
- "tokens": {
2155
- "backgroundColor": "{palette.color.white}",
2156
- "color": "{palette.color.dove}",
2157
- "borderWidth": "{palette.border.border1}",
2158
- "borderColor": "{palette.color.silver}",
2159
- "borderRadius": "{palette.radius.radius4}",
2160
- "paddingTop": "{palette.size.size10}",
2161
- "paddingBottom": "{palette.size.size10}",
2162
- "paddingLeft": "{palette.size.size16}",
2163
- "paddingRight": "{palette.size.size16}",
2164
- "outerBackgroundColor": "{palette.color.transparent}",
2165
- "outerBorderWidth": "{palette.border.border2}",
2166
- "outerBorderColor": "{palette.color.transparent}",
2167
- "fontName": "{palette.fontName.StagSans}",
2168
- "fontWeight": "{palette.fontWeight.weight400}",
2169
- "fontSize": "{palette.fontSize.size16}",
2170
- "lineHeight": "{palette.lineHeight.multiply150}",
2171
- "icon": "{system.icon.none}",
2172
- "iconSize": "{palette.fontSize.size24}",
2173
- "iconColor": "{palette.color.transparent}"
2147
+ "hover": "{appearances.TextInput.hover}",
2148
+ "inactive": "{appearances.TextInput.inactive}",
2149
+ "validation": "{appearances.TextInput.validation}"
2174
2150
  },
2175
2151
  "rules": [
2176
2152
  {
@@ -2179,8 +2155,8 @@
2179
2155
  "inactive": null
2180
2156
  },
2181
2157
  "tokens": {
2182
- "outerBorderColor": "{palette.color.gallery}",
2183
- "outerBackgroundColor": "{palette.color.gallery}"
2158
+ "outerBackgroundColor": "{palette.color.gallery}",
2159
+ "outerBorderColor": "{palette.color.gallery}"
2184
2160
  }
2185
2161
  },
2186
2162
  {
@@ -2223,46 +2199,37 @@
2223
2199
  "borderColor": "{palette.color.gallery}"
2224
2200
  }
2225
2201
  }
2226
- ]
2202
+ ],
2203
+ "tokens": {
2204
+ "backgroundColor": "{palette.color.white}",
2205
+ "borderColor": "{palette.color.silver}",
2206
+ "borderRadius": "{palette.radius.radius4}",
2207
+ "borderWidth": "{palette.border.border1}",
2208
+ "color": "{palette.color.dove}",
2209
+ "fontName": "{palette.fontName.StagSans}",
2210
+ "fontSize": "{palette.fontSize.size16}",
2211
+ "fontWeight": "{palette.fontWeight.weight400}",
2212
+ "icon": "{system.icon.none}",
2213
+ "iconColor": "{palette.color.transparent}",
2214
+ "iconSize": "{palette.size.size24}",
2215
+ "lineHeight": "{palette.lineHeight.multiply150}",
2216
+ "outerBackgroundColor": "{palette.color.transparent}",
2217
+ "outerBorderColor": "{palette.color.transparent}",
2218
+ "outerBorderWidth": "{palette.border.border2}",
2219
+ "paddingBottom": "{palette.size.size10}",
2220
+ "paddingLeft": "{palette.size.size16}",
2221
+ "paddingRight": "{palette.size.size16}",
2222
+ "paddingTop": "{palette.size.size10}"
2223
+ }
2227
2224
  },
2228
2225
  "ToggleSwitch": {
2229
2226
  "appearances": {
2230
2227
  "focus": "{appearances.ToggleSwitch.focus}",
2231
2228
  "hover": "{appearances.ToggleSwitch.hover}",
2232
- "pressed": "{appearances.ToggleSwitch.pressed}",
2233
2229
  "inactive": "{appearances.ToggleSwitch.inactive}",
2230
+ "pressed": "{appearances.ToggleSwitch.pressed}",
2234
2231
  "selected": "{appearances.ToggleSwitch.selected}"
2235
2232
  },
2236
- "tokens": {
2237
- "borderColor": "{palette.color.transparent}",
2238
- "borderWidth": "{palette.border.none}",
2239
- "borderRadius": "{palette.radius.radius4}",
2240
- "outerBorderColor": "{palette.color.transparent}",
2241
- "outerBorderWidth": "{palette.border.none}",
2242
- "outerBorderGap": "{palette.size.size0}",
2243
- "outerBackgroundColor": "{palette.color.transparent}",
2244
- "backgroundColor": "{palette.color.mosque}",
2245
- "opacity": "{system.opacity.opaque}",
2246
- "paddingLeft": "{palette.size.size8}",
2247
- "paddingRight": "{palette.size.size8}",
2248
- "paddingTop": "{palette.size.size4}",
2249
- "paddingBottom": "{palette.size.size4}",
2250
- "shadow": "{system.shadow.none}",
2251
- "alignSelf": "{system.flexAlign.flexStart}",
2252
- "icon": "{system.icon.none}",
2253
- "width": "{palette.size.size64}",
2254
- "trackBorderWidth": "{palette.border.none}",
2255
- "trackBorderColor": "{palette.color.transparent}",
2256
- "trackBorderRadius": "{palette.radius.none}",
2257
- "iconSize": "{palette.size.size16}",
2258
- "iconColor": "{palette.color.transparent}",
2259
- "switchSize": "{palette.size.size24}",
2260
- "switchColor": "{palette.color.white}",
2261
- "switchBorderColor": "{palette.color.transparent}",
2262
- "switchBorderWidth": "{palette.border.none}",
2263
- "switchBorderRadius": "{palette.radius.pill32}",
2264
- "switchShadow": "{system.shadow.none}"
2265
- },
2266
2233
  "rules": [
2267
2234
  {
2268
2235
  "if": {
@@ -2298,8 +2265,8 @@
2298
2265
  },
2299
2266
  {
2300
2267
  "if": {
2301
- "selected": true,
2302
- "hover": true
2268
+ "hover": true,
2269
+ "selected": true
2303
2270
  },
2304
2271
  "tokens": {
2305
2272
  "backgroundColor": "{palette.color.darkBlue}"
@@ -2307,8 +2274,8 @@
2307
2274
  },
2308
2275
  {
2309
2276
  "if": {
2310
- "selected": true,
2311
- "pressed": true
2277
+ "pressed": true,
2278
+ "selected": true
2312
2279
  },
2313
2280
  "tokens": {
2314
2281
  "backgroundColor": "{palette.color.onahau}"
@@ -2316,8 +2283,8 @@
2316
2283
  },
2317
2284
  {
2318
2285
  "if": {
2319
- "selected": true,
2320
- "focus": true
2286
+ "focus": true,
2287
+ "selected": true
2321
2288
  },
2322
2289
  "tokens": {
2323
2290
  "outerBorderColor": "{palette.color.blue}"
@@ -2325,9 +2292,9 @@
2325
2292
  },
2326
2293
  {
2327
2294
  "if": {
2328
- "selected": true,
2329
2295
  "focus": true,
2330
- "pressed": true
2296
+ "pressed": true,
2297
+ "selected": true
2331
2298
  },
2332
2299
  "tokens": {
2333
2300
  "outerBorderColor": "{palette.color.onahau}"
@@ -2341,28 +2308,76 @@
2341
2308
  "opacity": "{palette.opacity.opacity5}"
2342
2309
  }
2343
2310
  }
2344
- ]
2311
+ ],
2312
+ "tokens": {
2313
+ "alignSelf": "{system.flexAlign.flexStart}",
2314
+ "backgroundColor": "{palette.color.mosque}",
2315
+ "borderColor": "{palette.color.transparent}",
2316
+ "borderRadius": "{palette.radius.radius4}",
2317
+ "borderWidth": "{palette.border.none}",
2318
+ "icon": "{system.icon.none}",
2319
+ "iconColor": "{palette.color.transparent}",
2320
+ "iconSize": "{palette.size.size16}",
2321
+ "labelColor": "{palette.color.black}",
2322
+ "labelFontName": "{palette.fontName.StagSans}",
2323
+ "labelFontSize": "{palette.fontSize.size16}",
2324
+ "labelFontWeight": "{palette.fontWeight.weight400}",
2325
+ "labelLineHeight": "{palette.lineHeight.multiply150}",
2326
+ "labelMarginLeft": "{palette.size.size8}",
2327
+ "opacity": "{system.opacity.opaque}",
2328
+ "outerBackgroundColor": "{palette.color.transparent}",
2329
+ "outerBorderColor": "{palette.color.transparent}",
2330
+ "outerBorderGap": "{palette.size.size0}",
2331
+ "outerBorderWidth": "{palette.border.none}",
2332
+ "paddingBottom": "{palette.size.size4}",
2333
+ "paddingLeft": "{palette.size.size8}",
2334
+ "paddingRight": "{palette.size.size8}",
2335
+ "paddingTop": "{palette.size.size4}",
2336
+ "shadow": "{system.shadow.none}",
2337
+ "switchBorderColor": "{palette.color.transparent}",
2338
+ "switchBorderRadius": "{palette.radius.pill32}",
2339
+ "switchBorderWidth": "{palette.border.none}",
2340
+ "switchColor": "{palette.color.white}",
2341
+ "switchShadow": "{system.shadow.none}",
2342
+ "switchSize": "{palette.size.size24}",
2343
+ "trackBorderColor": "{palette.color.transparent}",
2344
+ "trackBorderRadius": "{palette.radius.none}",
2345
+ "trackBorderWidth": "{palette.border.none}",
2346
+ "width": "{palette.size.size64}"
2347
+ }
2348
+ },
2349
+ "ToggleSwitchGroup": {
2350
+ "appearances": {},
2351
+ "rules": [],
2352
+ "tokens": {
2353
+ "alignItems": "{system.flexAlign.flexStart}",
2354
+ "direction": "{system.direction.column}",
2355
+ "flexGrow": "{system.integer.0}",
2356
+ "flexShrink": "{system.integer.0}",
2357
+ "justifyContent": "{system.flexJustifyContent.flexStart}",
2358
+ "space": "{system.integer.3}"
2359
+ }
2345
2360
  },
2346
2361
  "Tooltip": {
2347
2362
  "appearances": {},
2363
+ "rules": [],
2348
2364
  "tokens": {
2365
+ "arrowBorderRadius": "{palette.radius.none}",
2366
+ "arrowOffset": "{palette.size.size4}",
2367
+ "arrowWidth": "{palette.size.size8}",
2349
2368
  "backgroundColor": "{palette.color.darkMosque}",
2350
- "paddingTop": "{palette.size.size8}",
2351
- "paddingBottom": "{palette.size.size8}",
2352
- "paddingLeft": "{palette.size.size16}",
2353
- "paddingRight": "{palette.size.size16}",
2354
2369
  "borderRadius": "{palette.radius.radius4}",
2355
- "shadow": "{palette.shadow.none}",
2356
2370
  "color": "{palette.color.white}",
2357
- "fontSize": "{palette.fontSize.size14}",
2358
- "lineHeight": "{palette.lineHeight.multiply140}",
2359
2371
  "fontName": "{palette.fontName.StagSans}",
2372
+ "fontSize": "{palette.fontSize.size14}",
2360
2373
  "fontWeight": "{palette.fontWeight.weight400}",
2361
- "arrowWidth": "{palette.size.size8}",
2362
- "arrowBorderRadius": "{palette.radius.none}",
2363
- "arrowOffset": "{palette.size.size4}"
2364
- },
2365
- "rules": []
2374
+ "lineHeight": "{palette.lineHeight.multiply140}",
2375
+ "paddingBottom": "{palette.size.size8}",
2376
+ "paddingLeft": "{palette.size.size16}",
2377
+ "paddingRight": "{palette.size.size16}",
2378
+ "paddingTop": "{palette.size.size8}",
2379
+ "shadow": "{palette.shadow.none}"
2380
+ }
2366
2381
  },
2367
2382
  "TooltipButton": {
2368
2383
  "appearances": {
@@ -2370,17 +2385,6 @@
2370
2385
  "hover": "{appearances.TooltipButton.hover}",
2371
2386
  "pressed": "{appearances.TooltipButton.pressed}"
2372
2387
  },
2373
- "tokens": {
2374
- "outerBorderColor": "{palette.color.transparent}",
2375
- "outerBorderWidth": "{palette.border.border1}",
2376
- "outerBorderGap": "{palette.size.size4}",
2377
- "borderRadius": "{palette.radius.pill32}",
2378
- "width": "{palette.size.size16}",
2379
- "icon": "{palette.icon.Info}",
2380
- "iconSize": "{palette.size.size16}",
2381
- "iconScale": "{system.iconScale.scale1}",
2382
- "iconColor": "{palette.color.amaranth}"
2383
- },
2384
2388
  "rules": [
2385
2389
  {
2386
2390
  "if": {
@@ -2406,39 +2410,40 @@
2406
2410
  "outerBorderColor": "{palette.color.darkMosque}"
2407
2411
  }
2408
2412
  }
2409
- ]
2413
+ ],
2414
+ "tokens": {
2415
+ "borderRadius": "{palette.radius.pill32}",
2416
+ "icon": "{palette.icon.Info}",
2417
+ "iconColor": "{palette.color.amaranth}",
2418
+ "iconScale": "{system.iconScale.scale1}",
2419
+ "iconSize": "{palette.size.size16}",
2420
+ "outerBorderColor": "{palette.color.transparent}",
2421
+ "outerBorderGap": "{palette.size.size4}",
2422
+ "outerBorderWidth": "{palette.border.border1}",
2423
+ "width": "{palette.size.size16}"
2424
+ }
2410
2425
  },
2411
2426
  "Typography": {
2412
2427
  "appearances": {
2413
- "weight": {
2414
- "description": "Sets the font weight, default is regular 400 weight. Does not change accessibility properties.",
2415
- "values": ["semibold", "bold"],
2416
- "type": "variant"
2417
- },
2418
- "size": {
2419
- "values": ["small", "large", "h1", "h2", "h3", "h4", "display"],
2420
- "type": "variant"
2421
- },
2422
2428
  "colour": {
2423
- "values": ["red"],
2424
- "type": "variant"
2429
+ "type": "variant",
2430
+ "values": ["red"]
2425
2431
  },
2426
2432
  "inverse": {
2427
2433
  "description": "Styles the link white for use on dark backgrounds.",
2428
- "values": [true],
2429
- "type": "variant"
2434
+ "type": "variant",
2435
+ "values": [true]
2430
2436
  },
2431
- "viewport": "{appearances.system.viewport}"
2432
- },
2433
- "tokens": {
2434
- "fontSize": "{palette.fontSize.size16}",
2435
- "color": "{palette.color.black}",
2436
- "lineHeight": "{palette.lineHeight.multiply150}",
2437
- "letterSpacing": "{system.letterSpacing.none}",
2438
- "textTransform": "{system.textTransform.none}",
2439
- "fontWeight": "{palette.fontWeight.weight400}",
2440
- "fontName": "{palette.fontName.StagSans}",
2441
- "fontScaleCap": "{palette.fontSize.size64}"
2437
+ "size": {
2438
+ "type": "variant",
2439
+ "values": ["small", "large", "h1", "h2", "h3", "h4", "display"]
2440
+ },
2441
+ "viewport": "{appearances.system.viewport}",
2442
+ "weight": {
2443
+ "description": "Sets the font weight, default is regular 400 weight. Does not change accessibility properties.",
2444
+ "type": "variant",
2445
+ "values": ["semibold", "bold"]
2446
+ }
2442
2447
  },
2443
2448
  "rules": [
2444
2449
  {
@@ -2446,8 +2451,8 @@
2446
2451
  "weight": "semibold"
2447
2452
  },
2448
2453
  "tokens": {
2449
- "fontWeight": "{palette.fontWeight.weight600}",
2450
- "fontName": "{palette.fontName.StagSans}"
2454
+ "fontName": "{palette.fontName.StagSans}",
2455
+ "fontWeight": "{palette.fontWeight.weight600}"
2451
2456
  }
2452
2457
  },
2453
2458
  {
@@ -2455,8 +2460,8 @@
2455
2460
  "weight": "bold"
2456
2461
  },
2457
2462
  "tokens": {
2458
- "fontWeight": "{palette.fontWeight.weight700}",
2459
- "fontName": "{palette.fontName.StagSans}"
2463
+ "fontName": "{palette.fontName.StagSans}",
2464
+ "fontWeight": "{palette.fontWeight.weight700}"
2460
2465
  }
2461
2466
  },
2462
2467
  {
@@ -2482,9 +2487,9 @@
2482
2487
  "size": "display"
2483
2488
  },
2484
2489
  "tokens": {
2490
+ "fontName": "{palette.fontName.StagSans}",
2485
2491
  "fontSize": "{palette.fontSize.size48}",
2486
2492
  "fontWeight": "{palette.fontWeight.weight700}",
2487
- "fontName": "{palette.fontName.StagSans}",
2488
2493
  "lineHeight": "{palette.lineHeight.multiply120}"
2489
2494
  }
2490
2495
  },
@@ -2503,9 +2508,9 @@
2503
2508
  "size": "h1"
2504
2509
  },
2505
2510
  "tokens": {
2511
+ "fontName": "{palette.fontName.StagSans}",
2506
2512
  "fontSize": "{palette.fontSize.size44}",
2507
2513
  "fontWeight": "{palette.fontWeight.weight700}",
2508
- "fontName": "{palette.fontName.StagSans}",
2509
2514
  "lineHeight": "{palette.lineHeight.multiply120}"
2510
2515
  }
2511
2516
  },
@@ -2524,10 +2529,10 @@
2524
2529
  "size": "h2"
2525
2530
  },
2526
2531
  "tokens": {
2527
- "fontSize": "{palette.fontSize.size28}",
2528
2532
  "color": "{palette.color.black}",
2529
- "fontWeight": "{palette.fontWeight.weight700}",
2530
2533
  "fontName": "{palette.fontName.StagSans}",
2534
+ "fontSize": "{palette.fontSize.size28}",
2535
+ "fontWeight": "{palette.fontWeight.weight700}",
2531
2536
  "lineHeight": "{palette.lineHeight.multiply130}"
2532
2537
  }
2533
2538
  },
@@ -2545,9 +2550,9 @@
2545
2550
  "size": "h3"
2546
2551
  },
2547
2552
  "tokens": {
2553
+ "fontName": "{palette.fontName.StagSans}",
2548
2554
  "fontSize": "{palette.fontSize.size20}",
2549
2555
  "fontWeight": "{palette.fontWeight.weight700}",
2550
- "fontName": "{palette.fontName.StagSans}",
2551
2556
  "lineHeight": "{palette.lineHeight.multiply140}"
2552
2557
  }
2553
2558
  },
@@ -2566,9 +2571,9 @@
2566
2571
  "size": "h4"
2567
2572
  },
2568
2573
  "tokens": {
2574
+ "fontName": "{palette.fontName.StagSans}",
2569
2575
  "fontSize": "{palette.fontSize.size16}",
2570
2576
  "fontWeight": "{palette.fontWeight.weight700}",
2571
- "fontName": "{palette.fontName.StagSans}",
2572
2577
  "lineHeight": "{palette.lineHeight.multiply150}"
2573
2578
  }
2574
2579
  },
@@ -2588,16 +2593,23 @@
2588
2593
  "color": "{palette.color.trinidad}"
2589
2594
  }
2590
2595
  }
2591
- ]
2596
+ ],
2597
+ "tokens": {
2598
+ "color": "{palette.color.black}",
2599
+ "fontName": "{palette.fontName.StagSans}",
2600
+ "fontScaleCap": "{palette.fontSize.size64}",
2601
+ "fontSize": "{palette.fontSize.size16}",
2602
+ "fontWeight": "{palette.fontWeight.weight400}",
2603
+ "letterSpacing": "{system.letterSpacing.none}",
2604
+ "lineHeight": "{palette.lineHeight.multiply150}",
2605
+ "textTransform": "{system.textTransform.none}"
2606
+ }
2592
2607
  },
2593
2608
  "spacingScale": {
2594
2609
  "appearances": {
2595
2610
  "space": "{appearances.spacingScale.space}",
2596
2611
  "viewport": "{appearances.system.viewport}"
2597
2612
  },
2598
- "tokens": {
2599
- "size": "{palette.size.size96}"
2600
- },
2601
2613
  "rules": [
2602
2614
  {
2603
2615
  "if": {
@@ -2731,7 +2743,10 @@
2731
2743
  "size": "{palette.size.size0}"
2732
2744
  }
2733
2745
  }
2734
- ]
2746
+ ],
2747
+ "tokens": {
2748
+ "size": "{palette.size.size96}"
2749
+ }
2735
2750
  }
2736
2751
  }
2737
2752
  }