@telus-uds/theme-allium 4.8.0 → 4.9.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.
@@ -255,6 +255,7 @@
255
255
  "alpha": 1
256
256
  },
257
257
  "fontName": "HelveticaNow",
258
+ "fontSize": 12,
258
259
  "fontWeight": 700,
259
260
  "gradient": null,
260
261
  "paddingBottom": 2,
@@ -2264,8 +2265,7 @@
2264
2265
  },
2265
2266
  "tokens": {
2266
2267
  "showPanelTabs": false,
2267
- "showPreviousNextNavigation": false,
2268
- "thumbnailSize": 48
2268
+ "showPreviousNextNavigation": false
2269
2269
  }
2270
2270
  }
2271
2271
  ],
@@ -2283,25 +2283,12 @@
2283
2283
  "showPreviousNextNavigation": true,
2284
2284
  "spaceBetweenSlideAndPanelNavigation": 32,
2285
2285
  "spaceBetweenSlideAndPreviousNextNavigation": 24,
2286
- "thumbnailBorderColor": {
2287
- "red": 0.8902,
2288
- "green": 0.90196,
2289
- "blue": 0.9098,
2290
- "alpha": 1
2291
- },
2292
- "thumbnailBorderRadius": 4,
2293
- "thumbnailBorderWidth": 1,
2294
- "thumbnailContainerPaddingTop": 24,
2295
- "thumbnailMargin": 4,
2296
- "thumbnailPadding": 8,
2297
- "thumbnailSelectedBorderColor": {
2298
- "red": 0.40392,
2299
- "green": 0.43137,
2300
- "blue": 0.45098,
2301
- "alpha": 1
2302
- },
2303
- "thumbnailSelectedBorderWidth": 2,
2304
- "thumbnailSize": 56
2286
+ "stepTrackerCurrentBackgroundColor": {
2287
+ "red": 0,
2288
+ "green": 0,
2289
+ "blue": 0,
2290
+ "alpha": 0
2291
+ }
2305
2292
  }
2306
2293
  },
2307
2294
  "CarouselTabsPanelItem": {
@@ -2441,7 +2428,9 @@
2441
2428
  "green": 1,
2442
2429
  "blue": 1,
2443
2430
  "alpha": 1
2444
- }
2431
+ },
2432
+ "fontName": "HelveticaNow",
2433
+ "fontWeight": 700
2445
2434
  }
2446
2435
  }
2447
2436
  ],
@@ -2468,13 +2457,74 @@
2468
2457
  "fontWeight": 400,
2469
2458
  "justifyContent": "flex-start",
2470
2459
  "letterSpacing": 0,
2471
- "lineHeight": 1.125,
2460
+ "lineHeight": 1.45,
2472
2461
  "paddingBottom": 16,
2473
2462
  "paddingLeft": 0,
2474
2463
  "paddingRight": 0,
2475
2464
  "paddingTop": 0
2476
2465
  }
2477
2466
  },
2467
+ "CarouselThumbnail": {
2468
+ "appearances": {
2469
+ "pressed": {
2470
+ "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
2471
+ "values": [true, false],
2472
+ "type": "state"
2473
+ },
2474
+ "viewport": {
2475
+ "description": "The size label for the current screen viewport based on the current screen width",
2476
+ "values": ["xs", "sm", "md", "lg", "xl"],
2477
+ "type": "state"
2478
+ }
2479
+ },
2480
+ "rules": [
2481
+ {
2482
+ "if": {
2483
+ "viewport": ["xs", "sm"]
2484
+ },
2485
+ "tokens": {
2486
+ "alignItems": "flex-start",
2487
+ "size": 48
2488
+ }
2489
+ },
2490
+ {
2491
+ "if": {
2492
+ "pressed": true
2493
+ },
2494
+ "tokens": {
2495
+ "borderColor": {
2496
+ "red": 0.12157,
2497
+ "green": 0.36078,
2498
+ "blue": 0.03529,
2499
+ "alpha": 1
2500
+ },
2501
+ "borderWidth": 2
2502
+ }
2503
+ }
2504
+ ],
2505
+ "tokens": {
2506
+ "alignItems": "center",
2507
+ "borderColor": {
2508
+ "red": 0.8902,
2509
+ "green": 0.90196,
2510
+ "blue": 0.9098,
2511
+ "alpha": 1
2512
+ },
2513
+ "borderRadius": 4,
2514
+ "borderWidth": 1,
2515
+ "containerPaddingTop": 24,
2516
+ "margin": 4,
2517
+ "padding": 8,
2518
+ "selectedBorderColor": {
2519
+ "red": 0.40392,
2520
+ "green": 0.43137,
2521
+ "blue": 0.45098,
2522
+ "alpha": 1
2523
+ },
2524
+ "selectedBorderWidth": 2,
2525
+ "size": 72
2526
+ }
2527
+ },
2478
2528
  "Checkbox": {
2479
2529
  "appearances": {
2480
2530
  "checked": {
@@ -2944,15 +2994,15 @@
2944
2994
  "alpha": 1
2945
2995
  },
2946
2996
  "calendarDayBlockedCalendarHoverBackground": {
2947
- "red": 0.98039,
2948
- "green": 0.98039,
2949
- "blue": 0.98039,
2997
+ "red": 0.95686,
2998
+ "green": 0.95686,
2999
+ "blue": 0.96863,
2950
3000
  "alpha": 1
2951
3001
  },
2952
3002
  "calendarDayBlockedCalendarHoverColor": {
2953
- "red": 0.40392,
2954
- "green": 0.43137,
2955
- "blue": 0.45098,
3003
+ "red": 0.69804,
3004
+ "green": 0.72549,
3005
+ "blue": 0.74902,
2956
3006
  "alpha": 1
2957
3007
  },
2958
3008
  "calendarDayDefaultBackgroundColor": {
@@ -3204,7 +3254,7 @@
3204
3254
  },
3205
3255
  "expanded": {
3206
3256
  "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
3207
- "values": [true],
3257
+ "values": [true, false],
3208
3258
  "type": "state"
3209
3259
  },
3210
3260
  "mini": {
@@ -3295,7 +3345,7 @@
3295
3345
  },
3296
3346
  "expanded": {
3297
3347
  "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
3298
- "values": [true],
3348
+ "values": [true, false],
3299
3349
  "type": "state"
3300
3350
  },
3301
3351
  "inverse": {
@@ -4464,13 +4514,21 @@
4464
4514
  "blue": 0,
4465
4515
  "alpha": 0
4466
4516
  },
4517
+ "borderBottomLeftRadius": null,
4518
+ "borderBottomRightRadius": null,
4519
+ "borderBottomWidth": null,
4467
4520
  "borderColor": {
4468
4521
  "red": 0.40392,
4469
4522
  "green": 0.43137,
4470
4523
  "blue": 0.45098,
4471
4524
  "alpha": 1
4472
4525
  },
4526
+ "borderLeftWidth": null,
4473
4527
  "borderRadius": 99999999999999,
4528
+ "borderRightWidth": null,
4529
+ "borderTopLeftRadius": null,
4530
+ "borderTopRightRadius": null,
4531
+ "borderTopWidth": null,
4474
4532
  "borderWidth": 1,
4475
4533
  "icon": null,
4476
4534
  "iconColor": {
@@ -4490,7 +4548,7 @@
4490
4548
  "alpha": 0
4491
4549
  },
4492
4550
  "outerBorderGap": 0,
4493
- "outerBorderWidth": 0,
4551
+ "outerBorderWidth": null,
4494
4552
  "padding": 4,
4495
4553
  "shadow": null
4496
4554
  }
@@ -4833,7 +4891,7 @@
4833
4891
  },
4834
4892
  "expanded": {
4835
4893
  "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
4836
- "values": [true],
4894
+ "values": [true, false],
4837
4895
  "type": "state"
4838
4896
  },
4839
4897
  "isChild": {
@@ -5331,7 +5389,7 @@
5331
5389
  "appearances": {
5332
5390
  "expanded": {
5333
5391
  "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
5334
- "values": [true],
5392
+ "values": [true, false],
5335
5393
  "type": "state"
5336
5394
  },
5337
5395
  "pressed": {
@@ -6370,7 +6428,8 @@
6370
6428
  "alternative": true
6371
6429
  },
6372
6430
  "tokens": {
6373
- "padding": 0
6431
+ "paddingBottom": 8,
6432
+ "paddingTop": 8
6374
6433
  }
6375
6434
  },
6376
6435
  {
@@ -6378,12 +6437,6 @@
6378
6437
  "hover": true
6379
6438
  },
6380
6439
  "tokens": {
6381
- "backgroundColor": {
6382
- "red": 0.95686,
6383
- "green": 0.95686,
6384
- "blue": 0.96863,
6385
- "alpha": 1
6386
- },
6387
6440
  "inputBackgroundColor": {
6388
6441
  "red": 0.95686,
6389
6442
  "green": 0.95686,
@@ -6397,16 +6450,16 @@
6397
6450
  "disabled": true
6398
6451
  },
6399
6452
  "tokens": {
6400
- "backgroundColor": {
6453
+ "inputBackgroundColor": {
6401
6454
  "red": 0.98039,
6402
6455
  "green": 0.98039,
6403
6456
  "blue": 0.98039,
6404
6457
  "alpha": 1
6405
6458
  },
6406
- "iconColor": {
6407
- "red": 0.8902,
6408
- "green": 0.90196,
6409
- "blue": 0.9098,
6459
+ "textColor": {
6460
+ "red": 0.69804,
6461
+ "green": 0.72549,
6462
+ "blue": 0.74902,
6410
6463
  "alpha": 1
6411
6464
  }
6412
6465
  }
@@ -6416,7 +6469,7 @@
6416
6469
  "pressed": true
6417
6470
  },
6418
6471
  "tokens": {
6419
- "backgroundColor": {
6472
+ "inputBackgroundColor": {
6420
6473
  "red": 0.69804,
6421
6474
  "green": 0.72549,
6422
6475
  "blue": 0.74902,
@@ -6440,47 +6493,230 @@
6440
6493
  }
6441
6494
  ],
6442
6495
  "tokens": {
6443
- "backgroundColor": {
6444
- "red": 0,
6445
- "green": 0,
6446
- "blue": 0,
6447
- "alpha": 0
6496
+ "fontSize": 16,
6497
+ "inputBackgroundColor": {
6498
+ "red": 1,
6499
+ "green": 1,
6500
+ "blue": 1,
6501
+ "alpha": 1
6448
6502
  },
6449
- "borderColor": {
6503
+ "inputBorderColor": {
6450
6504
  "red": 0.40392,
6451
6505
  "green": 0.43137,
6452
6506
  "blue": 0.45098,
6453
6507
  "alpha": 1
6454
6508
  },
6455
- "iconColor": {
6456
- "red": 0.40392,
6457
- "green": 0.43137,
6458
- "blue": 0.45098,
6509
+ "inputBorderWidth": 1,
6510
+ "inputWidth": 64,
6511
+ "lineHeight": 1.5,
6512
+ "padding": 12,
6513
+ "paddingBottom": 12,
6514
+ "paddingLeft": 12,
6515
+ "paddingRight": 12,
6516
+ "paddingTop": 12,
6517
+ "textColor": {
6518
+ "red": 0.2549,
6519
+ "green": 0.27059,
6520
+ "blue": 0.27843,
6459
6521
  "alpha": 1
6522
+ }
6523
+ }
6524
+ },
6525
+ "QuantitySelectorSideButton": {
6526
+ "appearances": {
6527
+ "alternative": {
6528
+ "type": "variant",
6529
+ "values": [true, false]
6460
6530
  },
6461
- "iconSize": 16,
6462
- "inputBackgroundColor": {
6531
+ "decrease": {
6532
+ "type": "variant",
6533
+ "values": [true]
6534
+ },
6535
+ "disabled": {
6536
+ "type": "variant",
6537
+ "values": [true]
6538
+ },
6539
+ "focus": {
6540
+ "type": "variant",
6541
+ "values": [true]
6542
+ },
6543
+ "hover": {
6544
+ "type": "variant",
6545
+ "values": [true]
6546
+ },
6547
+ "increase": {
6548
+ "type": "variant",
6549
+ "values": [true]
6550
+ },
6551
+ "pressed": {
6552
+ "type": "variant",
6553
+ "values": [true]
6554
+ }
6555
+ },
6556
+ "rules": [
6557
+ {
6558
+ "if": {
6559
+ "hover": true
6560
+ },
6561
+ "tokens": {
6562
+ "backgroundColor": {
6563
+ "red": 0.95686,
6564
+ "green": 0.95686,
6565
+ "blue": 0.96863,
6566
+ "alpha": 1
6567
+ }
6568
+ }
6569
+ },
6570
+ {
6571
+ "if": {
6572
+ "pressed": true
6573
+ },
6574
+ "tokens": {
6575
+ "backgroundColor": {
6576
+ "red": 0.69804,
6577
+ "green": 0.72549,
6578
+ "blue": 0.74902,
6579
+ "alpha": 1
6580
+ },
6581
+ "iconColor": {
6582
+ "red": 0.40392,
6583
+ "green": 0.43137,
6584
+ "blue": 0.45098,
6585
+ "alpha": 1
6586
+ }
6587
+ }
6588
+ },
6589
+ {
6590
+ "if": {
6591
+ "decrease": true
6592
+ },
6593
+ "tokens": {
6594
+ "borderBottomLeftRadius": 4,
6595
+ "borderRightWidth": 0,
6596
+ "borderTopLeftRadius": 4,
6597
+ "icon": "PaletteIconSubtract"
6598
+ }
6599
+ },
6600
+ {
6601
+ "if": {
6602
+ "increase": true
6603
+ },
6604
+ "tokens": {
6605
+ "borderBottomRightRadius": 4,
6606
+ "borderLeftWidth": 0,
6607
+ "borderTopRightRadius": 4,
6608
+ "icon": "PaletteIconAdd"
6609
+ }
6610
+ },
6611
+ {
6612
+ "if": {
6613
+ "focus": true,
6614
+ "increase": true
6615
+ },
6616
+ "tokens": {
6617
+ "borderBottomWidth": 3,
6618
+ "borderLeftWidth": 2,
6619
+ "borderRightWidth": 3,
6620
+ "borderTopWidth": 3
6621
+ }
6622
+ },
6623
+ {
6624
+ "if": {
6625
+ "decrease": true,
6626
+ "focus": true
6627
+ },
6628
+ "tokens": {
6629
+ "borderBottomWidth": 3,
6630
+ "borderLeftWidth": 3,
6631
+ "borderRightWidth": 2,
6632
+ "borderTopWidth": 3
6633
+ }
6634
+ },
6635
+ {
6636
+ "if": {
6637
+ "disabled": true
6638
+ },
6639
+ "tokens": {
6640
+ "backgroundColor": {
6641
+ "red": 0.98039,
6642
+ "green": 0.98039,
6643
+ "blue": 0.98039,
6644
+ "alpha": 1
6645
+ },
6646
+ "iconColor": {
6647
+ "red": 0.8902,
6648
+ "green": 0.90196,
6649
+ "blue": 0.9098,
6650
+ "alpha": 1
6651
+ }
6652
+ }
6653
+ },
6654
+ {
6655
+ "if": {
6656
+ "alternative": true
6657
+ },
6658
+ "tokens": {
6659
+ "paddingBottom": 12,
6660
+ "paddingTop": 12
6661
+ }
6662
+ },
6663
+ {
6664
+ "if": {
6665
+ "alternative": true,
6666
+ "increase": true
6667
+ },
6668
+ "tokens": {
6669
+ "borderBottomRightRadius": 24,
6670
+ "borderTopRightRadius": 24
6671
+ }
6672
+ },
6673
+ {
6674
+ "if": {
6675
+ "alternative": true,
6676
+ "decrease": true
6677
+ },
6678
+ "tokens": {
6679
+ "borderBottomLeftRadius": 24,
6680
+ "borderTopLeftRadius": 24
6681
+ }
6682
+ }
6683
+ ],
6684
+ "tokens": {
6685
+ "backgroundColor": {
6463
6686
  "red": 1,
6464
6687
  "green": 1,
6465
6688
  "blue": 1,
6466
6689
  "alpha": 1
6467
6690
  },
6468
- "inputBorderColor": {
6691
+ "borderBottomLeftRadius": 0,
6692
+ "borderBottomRightRadius": 0,
6693
+ "borderBottomWidth": 1,
6694
+ "borderColor": {
6469
6695
  "red": 0.40392,
6470
6696
  "green": 0.43137,
6471
6697
  "blue": 0.45098,
6472
6698
  "alpha": 1
6473
6699
  },
6474
- "inputBorderWidth": 1,
6475
- "leftIcon": "PaletteIconSubtract",
6476
- "padding": 16,
6477
- "rightIcon": "PaletteIconAdd",
6478
- "textColor": {
6479
- "red": 0.69804,
6480
- "green": 0.72549,
6481
- "blue": 0.74902,
6700
+ "borderLeftWidth": 1,
6701
+ "borderRadius": 0,
6702
+ "borderRightWidth": 1,
6703
+ "borderTopLeftRadius": 0,
6704
+ "borderTopRightRadius": 0,
6705
+ "borderTopWidth": 1,
6706
+ "borderWidth": 1,
6707
+ "icon": null,
6708
+ "iconColor": {
6709
+ "red": 0.2549,
6710
+ "green": 0.27059,
6711
+ "blue": 0.27843,
6482
6712
  "alpha": 1
6483
- }
6713
+ },
6714
+ "iconSize": 16,
6715
+ "padding": 16,
6716
+ "paddingBottom": 16,
6717
+ "paddingLeft": 16,
6718
+ "paddingRight": 16,
6719
+ "paddingTop": 16
6484
6720
  }
6485
6721
  },
6486
6722
  "QuickLinks": {
@@ -7800,7 +8036,7 @@
7800
8036
  },
7801
8037
  "expanded": {
7802
8038
  "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
7803
- "values": [true],
8039
+ "values": [true, false],
7804
8040
  "type": "state"
7805
8041
  },
7806
8042
  "type": {
@@ -7962,7 +8198,7 @@
7962
8198
  "appearances": {
7963
8199
  "expanded": {
7964
8200
  "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
7965
- "values": [true],
8201
+ "values": [true, false],
7966
8202
  "type": "state"
7967
8203
  }
7968
8204
  },
@@ -9240,7 +9476,7 @@
9240
9476
  "appearances": {
9241
9477
  "expanded": {
9242
9478
  "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
9243
- "values": [true],
9479
+ "values": [true, false],
9244
9480
  "type": "state"
9245
9481
  },
9246
9482
  "viewport": {
@@ -9353,9 +9589,35 @@
9353
9589
  }
9354
9590
  },
9355
9591
  "Testimonial": {
9356
- "appearances": {},
9357
- "rules": [],
9592
+ "appearances": {
9593
+ "viewport": {
9594
+ "description": "The size label for the current screen viewport based on the current screen width",
9595
+ "values": ["xs", "sm", "md", "lg", "xl"],
9596
+ "type": "state"
9597
+ }
9598
+ },
9599
+ "rules": [
9600
+ {
9601
+ "if": {
9602
+ "viewport": ["md", "lg", "xl"]
9603
+ },
9604
+ "tokens": {
9605
+ "testimonialFontNameHeading": "HelveticaNow",
9606
+ "testimonialFontSizeHeading": 28,
9607
+ "testimonialFontWeightHeading": 400,
9608
+ "testimonialLineHeightHeading": 1.28571428571
9609
+ }
9610
+ }
9611
+ ],
9358
9612
  "tokens": {
9613
+ "additionalFontName": "HelveticaNow",
9614
+ "additionalFontSize": 14,
9615
+ "additionalFontWeight": 400,
9616
+ "additionalLineHeight": 1.42857142857,
9617
+ "authorFontName": "HelveticaNow",
9618
+ "authorFontSize": 16,
9619
+ "authorFontWeight": 700,
9620
+ "authorLineHeight": 1.5,
9359
9621
  "dividerBackgroundColor": {
9360
9622
  "red": 0.69804,
9361
9623
  "green": 0.72549,
@@ -9371,9 +9633,18 @@
9371
9633
  "blue": 0.74902,
9372
9634
  "alpha": 1
9373
9635
  },
9636
+ "iconFr": "PaletteIconQuoteLeftArrow",
9374
9637
  "imageSize": 48,
9375
9638
  "quoteContainerGap": 4,
9376
9639
  "testimonialContainerGap": 12,
9640
+ "testimonialFontNameHeading": "HelveticaNow",
9641
+ "testimonialFontNameLarge": "HelveticaNow",
9642
+ "testimonialFontSizeHeading": 24,
9643
+ "testimonialFontSizeLarge": 20,
9644
+ "testimonialFontWeightHeading": 400,
9645
+ "testimonialFontWeightLarge": 400,
9646
+ "testimonialLineHeightHeading": 1.33333333333,
9647
+ "testimonialLineHeightLarge": 1.6,
9377
9648
  "textColor": {
9378
9649
  "red": 0.2549,
9379
9650
  "green": 0.27059,
@@ -10056,6 +10327,12 @@
10056
10327
  }
10057
10328
  ],
10058
10329
  "tokens": {
10330
+ "backgroundColor": {
10331
+ "red": 0,
10332
+ "green": 0,
10333
+ "blue": 0,
10334
+ "alpha": 0
10335
+ },
10059
10336
  "borderRadius": 32,
10060
10337
  "icon": "PaletteIconQuestion",
10061
10338
  "iconColor": {
@@ -11300,7 +11577,7 @@
11300
11577
  }
11301
11578
  },
11302
11579
  "metadata": {
11303
- "themeTokensVersion": "2.37.0",
11580
+ "themeTokensVersion": "2.38.0",
11304
11581
  "name": "theme-allium"
11305
11582
  }
11306
11583
  }