@telus-uds/theme-allium 4.13.1 → 4.15.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.
@@ -36,6 +36,10 @@
36
36
  "type": "variant",
37
37
  "values": [true]
38
38
  },
39
+ "inverse": {
40
+ "type": "variant",
41
+ "values": [true]
42
+ },
39
43
  "outline": {
40
44
  "type": "variant",
41
45
  "values": [true]
@@ -46,6 +50,31 @@
46
50
  }
47
51
  },
48
52
  "rules": [
53
+ {
54
+ "if": {
55
+ "inverse": true
56
+ },
57
+ "tokens": {
58
+ "backgroundColor": {
59
+ "red": 0,
60
+ "green": 0,
61
+ "blue": 0,
62
+ "alpha": 0
63
+ },
64
+ "borderColor": {
65
+ "red": 1,
66
+ "green": 1,
67
+ "blue": 1,
68
+ "alpha": 1
69
+ },
70
+ "color": {
71
+ "red": 1,
72
+ "green": 1,
73
+ "blue": 1,
74
+ "alpha": 1
75
+ }
76
+ }
77
+ },
49
78
  {
50
79
  "if": {
51
80
  "outline": true
@@ -2685,6 +2714,265 @@
2685
2714
  "labelMarginLeft": 10
2686
2715
  }
2687
2716
  },
2717
+ "CheckboxCard": {
2718
+ "appearances": {
2719
+ "checked": {
2720
+ "description": "Corresponds to a selected state for a checkbox or radio",
2721
+ "values": [true],
2722
+ "type": "state"
2723
+ },
2724
+ "error": {
2725
+ "values": [true],
2726
+ "type": "state"
2727
+ },
2728
+ "inactive": {
2729
+ "description": "Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.",
2730
+ "values": [true],
2731
+ "type": "state"
2732
+ },
2733
+ "pressed": {
2734
+ "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.",
2735
+ "values": [true, false],
2736
+ "type": "state"
2737
+ },
2738
+ "viewport": {
2739
+ "description": "The size label for the current screen viewport based on the current screen width",
2740
+ "values": ["xs", "sm", "md", "lg", "xl"],
2741
+ "type": "state"
2742
+ }
2743
+ },
2744
+ "rules": [
2745
+ {
2746
+ "if": {
2747
+ "viewport": ["lg", "xl"]
2748
+ },
2749
+ "tokens": {
2750
+ "fontSize": 24,
2751
+ "lineHeight": 1.33333333333,
2752
+ "paddingBottom": 24,
2753
+ "paddingLeft": 16,
2754
+ "paddingRight": 24,
2755
+ "paddingTop": 16
2756
+ }
2757
+ },
2758
+ {
2759
+ "description": "Pressed state matches hover state plus light grey background",
2760
+ "if": {
2761
+ "pressed": true
2762
+ },
2763
+ "tokens": {
2764
+ "backgroundColor": {
2765
+ "red": 0.95686,
2766
+ "green": 0.95686,
2767
+ "blue": 0.96863,
2768
+ "alpha": 1
2769
+ },
2770
+ "borderColor": {
2771
+ "red": 0.40392,
2772
+ "green": 0.43137,
2773
+ "blue": 0.45098,
2774
+ "alpha": 1
2775
+ },
2776
+ "checkboxInputBorderColor": {
2777
+ "red": 0.40392,
2778
+ "green": 0.43137,
2779
+ "blue": 0.45098,
2780
+ "alpha": 1
2781
+ },
2782
+ "checkboxInputBorderWidth": 1,
2783
+ "checkboxOuterBorderColor": {
2784
+ "red": 0.8902,
2785
+ "green": 0.90196,
2786
+ "blue": 0.9098,
2787
+ "alpha": 1
2788
+ },
2789
+ "checkboxOuterBorderWidth": 3,
2790
+ "outerBorderColor": {
2791
+ "red": 0.8902,
2792
+ "green": 0.90196,
2793
+ "blue": 0.9098,
2794
+ "alpha": 1
2795
+ },
2796
+ "outerBorderGap": 0
2797
+ }
2798
+ },
2799
+ {
2800
+ "if": {
2801
+ "checked": true
2802
+ },
2803
+ "tokens": {
2804
+ "borderColor": {
2805
+ "red": 0.48627,
2806
+ "green": 0.32549,
2807
+ "blue": 0.64706,
2808
+ "alpha": 1
2809
+ }
2810
+ }
2811
+ },
2812
+ {
2813
+ "if": {
2814
+ "error": true
2815
+ },
2816
+ "tokens": {
2817
+ "borderColor": {
2818
+ "red": 0.88235,
2819
+ "green": 0.13725,
2820
+ "blue": 0.22353,
2821
+ "alpha": 1
2822
+ },
2823
+ "checkboxInputBorderColor": {
2824
+ "red": 0.88235,
2825
+ "green": 0.13725,
2826
+ "blue": 0.22353,
2827
+ "alpha": 1
2828
+ },
2829
+ "color": {
2830
+ "red": 0.88235,
2831
+ "green": 0.13725,
2832
+ "blue": 0.22353,
2833
+ "alpha": 1
2834
+ }
2835
+ }
2836
+ },
2837
+ {
2838
+ "if": {
2839
+ "inactive": true
2840
+ },
2841
+ "tokens": {
2842
+ "backgroundColor": {
2843
+ "red": 0.95686,
2844
+ "green": 0.95686,
2845
+ "blue": 0.96863,
2846
+ "alpha": 1
2847
+ },
2848
+ "borderColor": {
2849
+ "red": 0,
2850
+ "green": 0,
2851
+ "blue": 0,
2852
+ "alpha": 0
2853
+ },
2854
+ "checkboxCheckedBackgroundColor": {
2855
+ "red": 0.40392,
2856
+ "green": 0.43137,
2857
+ "blue": 0.45098,
2858
+ "alpha": 1
2859
+ },
2860
+ "checkboxInputBackgroundColor": {
2861
+ "red": 0.69804,
2862
+ "green": 0.72549,
2863
+ "blue": 0.74902,
2864
+ "alpha": 1
2865
+ },
2866
+ "checkboxInputBorderColor": {
2867
+ "red": 0,
2868
+ "green": 0,
2869
+ "blue": 0,
2870
+ "alpha": 0
2871
+ },
2872
+ "checkboxInputSize": 12,
2873
+ "checkboxOuterBorderColor": {
2874
+ "red": 0.69804,
2875
+ "green": 0.72549,
2876
+ "blue": 0.74902,
2877
+ "alpha": 1
2878
+ },
2879
+ "checkboxOuterBorderGap": 2,
2880
+ "checkboxOuterBorderWidth": 1,
2881
+ "color": {
2882
+ "red": 0.40392,
2883
+ "green": 0.43137,
2884
+ "blue": 0.45098,
2885
+ "alpha": 1
2886
+ }
2887
+ }
2888
+ }
2889
+ ],
2890
+ "tokens": {
2891
+ "backgroundColor": {
2892
+ "red": 1,
2893
+ "green": 1,
2894
+ "blue": 1,
2895
+ "alpha": 1
2896
+ },
2897
+ "borderColor": {
2898
+ "red": 0.69804,
2899
+ "green": 0.72549,
2900
+ "blue": 0.74902,
2901
+ "alpha": 1
2902
+ },
2903
+ "borderRadius": 6,
2904
+ "borderWidth": 1,
2905
+ "checkboxCheckedBackgroundColor": {
2906
+ "red": 0.48627,
2907
+ "green": 0.32549,
2908
+ "blue": 0.64706,
2909
+ "alpha": 1
2910
+ },
2911
+ "checkboxCheckedSize": 12,
2912
+ "checkboxInputBackgroundColor": {
2913
+ "red": 1,
2914
+ "green": 1,
2915
+ "blue": 1,
2916
+ "alpha": 1
2917
+ },
2918
+ "checkboxInputBorderColor": {
2919
+ "red": 0.40392,
2920
+ "green": 0.43137,
2921
+ "blue": 0.45098,
2922
+ "alpha": 1
2923
+ },
2924
+ "checkboxInputBorderWidth": 1,
2925
+ "checkboxInputOutlineColor": {
2926
+ "red": 0,
2927
+ "green": 0,
2928
+ "blue": 0,
2929
+ "alpha": 0
2930
+ },
2931
+ "checkboxInputOutlineWidth": 0,
2932
+ "checkboxInputSize": 20,
2933
+ "checkboxOuterBorderColor": {
2934
+ "red": 0,
2935
+ "green": 0,
2936
+ "blue": 0,
2937
+ "alpha": 0
2938
+ },
2939
+ "checkboxOuterBorderGap": 0,
2940
+ "checkboxOuterBorderWidth": 0,
2941
+ "checkboxSpace": 2,
2942
+ "color": {
2943
+ "red": 0.17255,
2944
+ "green": 0.18039,
2945
+ "blue": 0.18824,
2946
+ "alpha": 1
2947
+ },
2948
+ "contentAlignItems": "stretch",
2949
+ "contentFlexGrow": 0,
2950
+ "contentFlexShrink": 1,
2951
+ "contentJustifyContent": "flex-start",
2952
+ "contentSpace": 2,
2953
+ "flex": 1,
2954
+ "fontName": "HelveticaNow",
2955
+ "fontSize": 20,
2956
+ "fontWeight": 500,
2957
+ "letterSpacing": 0,
2958
+ "lineHeight": 1.4,
2959
+ "minWidth": 264,
2960
+ "outerBorderColor": {
2961
+ "red": 0,
2962
+ "green": 0,
2963
+ "blue": 0,
2964
+ "alpha": 0
2965
+ },
2966
+ "outerBorderGap": 0,
2967
+ "outerBorderWidth": 2,
2968
+ "paddingBottom": 16,
2969
+ "paddingLeft": 10,
2970
+ "paddingRight": 16,
2971
+ "paddingTop": 16,
2972
+ "shadow": null,
2973
+ "textTransform": "none"
2974
+ }
2975
+ },
2688
2976
  "CheckboxGroup": {
2689
2977
  "appearances": {},
2690
2978
  "rules": [],
@@ -3683,16 +3971,16 @@
3683
3971
  ],
3684
3972
  "tokens": {
3685
3973
  "backgroundColor": {
3686
- "red": 0.95686,
3687
- "green": 0.95686,
3688
- "blue": 0.96863,
3974
+ "red": 0.93725,
3975
+ "green": 0.92941,
3976
+ "blue": 1,
3689
3977
  "alpha": 1
3690
3978
  },
3691
3979
  "borderColor": {
3692
- "red": 0.8902,
3693
- "green": 0.90196,
3694
- "blue": 0.9098,
3695
- "alpha": 1
3980
+ "red": 0,
3981
+ "green": 0,
3982
+ "blue": 0,
3983
+ "alpha": 0
3696
3984
  },
3697
3985
  "borderRadius": 4,
3698
3986
  "borderWidth": 1,
@@ -3765,8 +4053,60 @@
3765
4053
  }
3766
4054
  },
3767
4055
  "Footnote": {
3768
- "appearances": {},
3769
- "rules": [],
4056
+ "appearances": {
4057
+ "viewport": {
4058
+ "description": "The size label for the current screen viewport based on the current screen width",
4059
+ "values": ["xs", "sm", "md", "lg", "xl"],
4060
+ "type": "state"
4061
+ }
4062
+ },
4063
+ "rules": [
4064
+ {
4065
+ "if": {
4066
+ "viewport": ["xs"]
4067
+ },
4068
+ "tokens": {
4069
+ "footnoteBodyPaddingBottom": 32,
4070
+ "footnoteBodyPaddingLeft": 16,
4071
+ "footnoteBodyPaddingRight": 16,
4072
+ "footnoteBodyPaddingTop": 0,
4073
+ "footnoteHeaderPaddingBottom": 16,
4074
+ "footnoteHeaderPaddingLeft": 16,
4075
+ "footnoteHeaderPaddingRight": 4,
4076
+ "footnoteHeaderPaddingTop": 16
4077
+ }
4078
+ },
4079
+ {
4080
+ "if": {
4081
+ "viewport": ["md", "lg"]
4082
+ },
4083
+ "tokens": {
4084
+ "footnoteBodyPaddingBottom": 40,
4085
+ "footnoteBodyPaddingLeft": 16,
4086
+ "footnoteBodyPaddingRight": 16,
4087
+ "footnoteBodyPaddingTop": 0,
4088
+ "footnoteHeaderPaddingBottom": 24,
4089
+ "footnoteHeaderPaddingLeft": 16,
4090
+ "footnoteHeaderPaddingRight": 4,
4091
+ "footnoteHeaderPaddingTop": 24
4092
+ }
4093
+ },
4094
+ {
4095
+ "if": {
4096
+ "viewport": ["xl"]
4097
+ },
4098
+ "tokens": {
4099
+ "footnoteBodyPaddingBottom": 40,
4100
+ "footnoteBodyPaddingLeft": 16,
4101
+ "footnoteBodyPaddingRight": 16,
4102
+ "footnoteBodyPaddingTop": 0,
4103
+ "footnoteHeaderPaddingBottom": 24,
4104
+ "footnoteHeaderPaddingLeft": 16,
4105
+ "footnoteHeaderPaddingRight": 16,
4106
+ "footnoteHeaderPaddingTop": 24
4107
+ }
4108
+ }
4109
+ ],
3770
4110
  "tokens": {
3771
4111
  "closeButtonBackgroundColor": {
3772
4112
  "red": 0.95686,
@@ -3801,7 +4141,7 @@
3801
4141
  "blue": 0.96863,
3802
4142
  "alpha": 1
3803
4143
  },
3804
- "footnoteBodyPaddingBottom": 32,
4144
+ "footnoteBodyPaddingBottom": 40,
3805
4145
  "footnoteBodyPaddingLeft": 16,
3806
4146
  "footnoteBodyPaddingRight": 16,
3807
4147
  "footnoteBodyPaddingTop": 0,
@@ -3812,10 +4152,10 @@
3812
4152
  "alpha": 1
3813
4153
  },
3814
4154
  "footnoteBorderTopSizeMd": 1,
3815
- "footnoteHeaderPaddingBottom": 16,
4155
+ "footnoteHeaderPaddingBottom": 24,
3816
4156
  "footnoteHeaderPaddingLeft": 16,
3817
- "footnoteHeaderPaddingRight": 16,
3818
- "footnoteHeaderPaddingTop": 16,
4157
+ "footnoteHeaderPaddingRight": 4,
4158
+ "footnoteHeaderPaddingTop": 24,
3819
4159
  "headerFontName": "HelveticaNow",
3820
4160
  "headerFontSize": 16,
3821
4161
  "headerFontWeight": 500,
@@ -5695,16 +6035,16 @@
5695
6035
  ],
5696
6036
  "tokens": {
5697
6037
  "backgroundColor": {
5698
- "red": 0.95686,
5699
- "green": 0.95686,
5700
- "blue": 0.96863,
6038
+ "red": 0.93725,
6039
+ "green": 0.92941,
6040
+ "blue": 1,
5701
6041
  "alpha": 1
5702
6042
  },
5703
6043
  "borderBottomWidth": 1,
5704
6044
  "borderColor": {
5705
- "red": 0.40392,
5706
- "green": 0.43137,
5707
- "blue": 0.45098,
6045
+ "red": 0.48627,
6046
+ "green": 0.32549,
6047
+ "blue": 0.64706,
5708
6048
  "alpha": 1
5709
6049
  },
5710
6050
  "borderLeftWidth": 1,
@@ -8470,7 +8810,8 @@
8470
8810
  "alignItems": "stretch",
8471
8811
  "flexGrow": 0,
8472
8812
  "flexShrink": 0,
8473
- "justifyContent": "flex-start"
8813
+ "justifyContent": "flex-start",
8814
+ "width": null
8474
8815
  }
8475
8816
  },
8476
8817
  "StepTracker": {
@@ -8978,6 +9319,11 @@
8978
9319
  },
8979
9320
  "Tabs": {
8980
9321
  "appearances": {
9322
+ "equalWidth": {
9323
+ "description": "Divide the available width equally among `TabsItem`",
9324
+ "type": "variant",
9325
+ "values": [true]
9326
+ },
8981
9327
  "inverse": {
8982
9328
  "description": "Styles the link white for use on dark backgrounds.",
8983
9329
  "type": "variant",
@@ -9016,6 +9362,11 @@
9016
9362
  },
9017
9363
  "TabsItem": {
9018
9364
  "appearances": {
9365
+ "equalWidth": {
9366
+ "description": "Divide the available width equally among `TabsItem`",
9367
+ "type": "variant",
9368
+ "values": [true]
9369
+ },
9019
9370
  "focus": {
9020
9371
  "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.",
9021
9372
  "values": [true, false],
@@ -9049,10 +9400,10 @@
9049
9400
  },
9050
9401
  "tokens": {
9051
9402
  "backgroundColor": {
9052
- "red": 0.95686,
9053
- "green": 0.95686,
9054
- "blue": 0.96863,
9055
- "alpha": 1
9403
+ "red": 0,
9404
+ "green": 0,
9405
+ "blue": 0,
9406
+ "alpha": 0.05
9056
9407
  },
9057
9408
  "color": {
9058
9409
  "red": 0.29412,
@@ -9255,6 +9606,14 @@
9255
9606
  "alpha": 1
9256
9607
  }
9257
9608
  }
9609
+ },
9610
+ {
9611
+ "if": {
9612
+ "equalWidth": true
9613
+ },
9614
+ "tokens": {
9615
+ "maxWidth": null
9616
+ }
9258
9617
  }
9259
9618
  ],
9260
9619
  "tokens": {
@@ -11681,7 +12040,7 @@
11681
12040
  }
11682
12041
  },
11683
12042
  "metadata": {
11684
- "themeTokensVersion": "2.41.1",
12043
+ "themeTokensVersion": "2.42.0",
11685
12044
  "name": "theme-allium"
11686
12045
  }
11687
12046
  }