@telus-uds/theme-koodo 3.7.1 → 3.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.
@@ -1,13 +1,29 @@
1
1
  {
2
2
  "components": {
3
3
  "ActivityIndicator": {
4
- "appearances": {},
5
- "rules": [],
4
+ "appearances": {
5
+ "size": {
6
+ "description": "used for full-screen spinners",
7
+ "type": "variant",
8
+ "values": ["large"]
9
+ }
10
+ },
11
+ "rules": [
12
+ {
13
+ "if": {
14
+ "size": "large"
15
+ },
16
+ "tokens": {
17
+ "size": 48,
18
+ "thickness": 4
19
+ }
20
+ }
21
+ ],
6
22
  "tokens": {
7
23
  "color": {
8
24
  "red": 0.00392,
9
- "green": 0.28235,
10
- "blue": 0.27843,
25
+ "green": 0.41961,
26
+ "blue": 0.41569,
11
27
  "alpha": 1
12
28
  },
13
29
  "size": 40,
@@ -17,8 +33,26 @@
17
33
  "Box": {
18
34
  "appearances": {
19
35
  "background": {
20
- "description": "Background colour of box. Transparent if not specified.",
21
- "values": ["light", "lightest", "black"]
36
+ "description": "Background colour of box. White if not specified.",
37
+ "values": [
38
+ "lightest",
39
+ "lighter",
40
+ "light",
41
+ "dark",
42
+ "darker",
43
+ "darkest",
44
+ "critical",
45
+ "danger",
46
+ "warning",
47
+ "positive",
48
+ "brand",
49
+ "white",
50
+ "black",
51
+ "featurePrimary",
52
+ "featureSecondary",
53
+ "featureNeutral",
54
+ "featureBrand"
55
+ ]
22
56
  }
23
57
  },
24
58
  "rules": [
@@ -35,6 +69,19 @@
35
69
  }
36
70
  }
37
71
  },
72
+ {
73
+ "if": {
74
+ "background": "lighter"
75
+ },
76
+ "tokens": {
77
+ "backgroundColor": {
78
+ "red": 0.98039,
79
+ "green": 0.98039,
80
+ "blue": 0.98039,
81
+ "alpha": 1
82
+ }
83
+ }
84
+ },
38
85
  {
39
86
  "if": {
40
87
  "background": "light"
@@ -48,6 +95,123 @@
48
95
  }
49
96
  }
50
97
  },
98
+ {
99
+ "if": {
100
+ "background": "dark"
101
+ },
102
+ "tokens": {
103
+ "backgroundColor": {
104
+ "red": 0.4,
105
+ "green": 0.4,
106
+ "blue": 0.4,
107
+ "alpha": 1
108
+ }
109
+ }
110
+ },
111
+ {
112
+ "if": {
113
+ "background": "darker"
114
+ },
115
+ "tokens": {
116
+ "backgroundColor": {
117
+ "red": 0.34902,
118
+ "green": 0.34902,
119
+ "blue": 0.34902,
120
+ "alpha": 1
121
+ }
122
+ }
123
+ },
124
+ {
125
+ "if": {
126
+ "background": "darkest"
127
+ },
128
+ "tokens": {
129
+ "backgroundColor": {
130
+ "red": 0,
131
+ "green": 0,
132
+ "blue": 0,
133
+ "alpha": 1
134
+ }
135
+ }
136
+ },
137
+ {
138
+ "if": {
139
+ "background": "critical"
140
+ },
141
+ "tokens": {
142
+ "backgroundColor": {
143
+ "red": 0.72157,
144
+ "green": 0.21569,
145
+ "blue": 0.24314,
146
+ "alpha": 1
147
+ }
148
+ }
149
+ },
150
+ {
151
+ "if": {
152
+ "background": "danger"
153
+ },
154
+ "tokens": {
155
+ "backgroundColor": {
156
+ "red": 0.97255,
157
+ "green": 0.86667,
158
+ "blue": 0.8902,
159
+ "alpha": 1
160
+ }
161
+ }
162
+ },
163
+ {
164
+ "if": {
165
+ "background": "warning"
166
+ },
167
+ "tokens": {
168
+ "backgroundColor": {
169
+ "red": 0.99608,
170
+ "green": 0.93333,
171
+ "blue": 0.78039,
172
+ "alpha": 1
173
+ }
174
+ }
175
+ },
176
+ {
177
+ "if": {
178
+ "background": "positive"
179
+ },
180
+ "tokens": {
181
+ "backgroundColor": {
182
+ "red": 0.89804,
183
+ "green": 0.96863,
184
+ "blue": 0.98431,
185
+ "alpha": 1
186
+ }
187
+ }
188
+ },
189
+ {
190
+ "if": {
191
+ "background": "brand"
192
+ },
193
+ "tokens": {
194
+ "backgroundColor": {
195
+ "red": 0.00392,
196
+ "green": 0.41961,
197
+ "blue": 0.41569,
198
+ "alpha": 1
199
+ }
200
+ }
201
+ },
202
+ {
203
+ "if": {
204
+ "background": "white"
205
+ },
206
+ "tokens": {
207
+ "backgroundColor": {
208
+ "red": 1,
209
+ "green": 1,
210
+ "blue": 1,
211
+ "alpha": 1
212
+ }
213
+ }
214
+ },
51
215
  {
52
216
  "if": {
53
217
  "background": "black"
@@ -60,14 +224,66 @@
60
224
  "alpha": 1
61
225
  }
62
226
  }
227
+ },
228
+ {
229
+ "if": {
230
+ "background": "featurePrimary"
231
+ },
232
+ "tokens": {
233
+ "backgroundColor": {
234
+ "red": 0.48627,
235
+ "green": 0.07451,
236
+ "blue": 0.4,
237
+ "alpha": 1
238
+ }
239
+ }
240
+ },
241
+ {
242
+ "if": {
243
+ "background": "featureSecondary"
244
+ },
245
+ "tokens": {
246
+ "backgroundColor": {
247
+ "red": 0.0902,
248
+ "green": 0.21176,
249
+ "blue": 0.4902,
250
+ "alpha": 1
251
+ }
252
+ }
253
+ },
254
+ {
255
+ "if": {
256
+ "background": "featureNeutral"
257
+ },
258
+ "tokens": {
259
+ "backgroundColor": {
260
+ "red": 0.34902,
261
+ "green": 0.34902,
262
+ "blue": 0.34902,
263
+ "alpha": 1
264
+ }
265
+ }
266
+ },
267
+ {
268
+ "if": {
269
+ "background": "featureBrand"
270
+ },
271
+ "tokens": {
272
+ "backgroundColor": {
273
+ "red": 0.00392,
274
+ "green": 0.41961,
275
+ "blue": 0.41569,
276
+ "alpha": 1
277
+ }
278
+ }
63
279
  }
64
280
  ],
65
281
  "tokens": {
66
282
  "backgroundColor": {
67
- "red": 0,
68
- "green": 0,
69
- "blue": 0,
70
- "alpha": 0
283
+ "red": 1,
284
+ "green": 1,
285
+ "blue": 1,
286
+ "alpha": 1
71
287
  },
72
288
  "gradient": null
73
289
  }
@@ -461,6 +677,12 @@
461
677
  "blue": 1,
462
678
  "alpha": 1
463
679
  },
680
+ "dividerColor": {
681
+ "red": 0.00392,
682
+ "green": 0.41961,
683
+ "blue": 0.41569,
684
+ "alpha": 1
685
+ },
464
686
  "fontName": "StagSans",
465
687
  "fontSize": 14,
466
688
  "fontWeight": 600,
@@ -507,6 +729,12 @@
507
729
  "paddingRight": 16,
508
730
  "paddingTop": 8,
509
731
  "shadow": null,
732
+ "subtitleColor": {
733
+ "red": 0.00392,
734
+ "green": 0.28235,
735
+ "blue": 0.27843,
736
+ "alpha": 1
737
+ },
510
738
  "textAlign": "center",
511
739
  "width": null
512
740
  }
@@ -526,6 +754,11 @@
526
754
  },
527
755
  "ButtonGroupItem": {
528
756
  "appearances": {
757
+ "iconPosition": {
758
+ "description": "Theme styles to be applied to icon links depending on where the icon is in relation to the link text",
759
+ "values": ["left", "right"],
760
+ "type": "state"
761
+ },
529
762
  "inactive": {
530
763
  "description": "Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.",
531
764
  "values": [true],
@@ -619,6 +852,14 @@
619
852
  "outerBorderGap": 1,
620
853
  "outerBorderWidth": 4
621
854
  }
855
+ },
856
+ {
857
+ "if": {
858
+ "iconPosition": "right"
859
+ },
860
+ "tokens": {
861
+ "iconSpace": 1
862
+ }
622
863
  }
623
864
  ],
624
865
  "tokens": {
@@ -646,9 +887,10 @@
646
887
  "fontName": "StagSans",
647
888
  "fontSize": 14,
648
889
  "fontWeight": 600,
890
+ "height": 36,
649
891
  "iconSize": 20,
650
892
  "iconSpace": 3,
651
- "lineHeight": 1.5,
893
+ "lineHeight": 1.4,
652
894
  "minWidth": 0,
653
895
  "opacity": 1,
654
896
  "outerBackgroundColor": {
@@ -968,8 +1210,57 @@
968
1210
  }
969
1211
  },
970
1212
  "Divider": {
971
- "appearances": {},
972
- "rules": [],
1213
+ "appearances": {
1214
+ "decorative": {
1215
+ "description": "Use a decorative divider to highlight an element. Non-decorative dividers are for clearly identifying separation of content.",
1216
+ "type": "variant",
1217
+ "values": [true]
1218
+ },
1219
+ "inverse": {
1220
+ "type": "variant",
1221
+ "values": [true]
1222
+ },
1223
+ "weight": {
1224
+ "type": "variant",
1225
+ "values": ["thick"]
1226
+ }
1227
+ },
1228
+ "rules": [
1229
+ {
1230
+ "if": {
1231
+ "weight": "thick"
1232
+ },
1233
+ "tokens": {
1234
+ "width": 2
1235
+ }
1236
+ },
1237
+ {
1238
+ "if": {
1239
+ "decorative": true
1240
+ },
1241
+ "tokens": {
1242
+ "color": {
1243
+ "red": 0.93725,
1244
+ "green": 0.93725,
1245
+ "blue": 0.93725,
1246
+ "alpha": 1
1247
+ }
1248
+ }
1249
+ },
1250
+ {
1251
+ "if": {
1252
+ "inverse": true
1253
+ },
1254
+ "tokens": {
1255
+ "color": {
1256
+ "red": 1,
1257
+ "green": 1,
1258
+ "blue": 1,
1259
+ "alpha": 1
1260
+ }
1261
+ }
1262
+ }
1263
+ ],
973
1264
  "tokens": {
974
1265
  "color": {
975
1266
  "red": 0.78824,
@@ -1568,6 +1859,7 @@
1568
1859
  },
1569
1860
  "tokens": {
1570
1861
  "itemFontSize": 20,
1862
+ "itemIconSize": 20,
1571
1863
  "itemLineHeight": 1.4,
1572
1864
  "listGutter": 16
1573
1865
  }
@@ -1578,6 +1870,7 @@
1578
1870
  },
1579
1871
  "tokens": {
1580
1872
  "itemFontSize": 14,
1873
+ "itemIconSize": 14,
1581
1874
  "listGutter": 10
1582
1875
  }
1583
1876
  },
@@ -1766,16 +2059,22 @@
1766
2059
  },
1767
2060
  "tokens": {
1768
2061
  "backgroundColor": {
1769
- "red": 0.75686,
1770
- "green": 0.94902,
1771
- "blue": 0.9098,
2062
+ "red": 0.89804,
2063
+ "green": 0.96863,
2064
+ "blue": 0.98431,
2065
+ "alpha": 1
2066
+ },
2067
+ "color": {
2068
+ "red": 0,
2069
+ "green": 0,
2070
+ "blue": 0,
1772
2071
  "alpha": 1
1773
2072
  },
1774
2073
  "icon": "PaletteIconCheckCircledFilled",
1775
2074
  "iconColor": {
1776
- "red": 0.1451,
1777
- "green": 0.5451,
1778
- "blue": 0.04314,
2075
+ "red": 0.00392,
2076
+ "green": 0.41961,
2077
+ "blue": 0.41569,
1779
2078
  "alpha": 1
1780
2079
  }
1781
2080
  }
@@ -1791,11 +2090,17 @@
1791
2090
  "blue": 0.78039,
1792
2091
  "alpha": 1
1793
2092
  },
2093
+ "color": {
2094
+ "red": 0,
2095
+ "green": 0,
2096
+ "blue": 0,
2097
+ "alpha": 1
2098
+ },
1794
2099
  "icon": "PaletteIconExclamationTriangle",
1795
2100
  "iconColor": {
1796
- "red": 0.98431,
1797
- "green": 0.68627,
1798
- "blue": 0.20392,
2101
+ "red": 0.93333,
2102
+ "green": 0.17255,
2103
+ "blue": 0.4549,
1799
2104
  "alpha": 1
1800
2105
  }
1801
2106
  }
@@ -1811,6 +2116,12 @@
1811
2116
  "blue": 0.8902,
1812
2117
  "alpha": 1
1813
2118
  },
2119
+ "color": {
2120
+ "red": 0,
2121
+ "green": 0,
2122
+ "blue": 0,
2123
+ "alpha": 1
2124
+ },
1814
2125
  "icon": "PaletteIconExclamationOctagon",
1815
2126
  "iconColor": {
1816
2127
  "red": 0.87451,
@@ -1823,9 +2134,9 @@
1823
2134
  ],
1824
2135
  "tokens": {
1825
2136
  "backgroundColor": {
1826
- "red": 0.93725,
1827
- "green": 0.93725,
1828
- "blue": 0.93725,
2137
+ "red": 0.98039,
2138
+ "green": 0.90196,
2139
+ "blue": 0.95686,
1829
2140
  "alpha": 1
1830
2141
  },
1831
2142
  "borderBottomWidth": 0,
@@ -1840,9 +2151,9 @@
1840
2151
  "borderRightWidth": 0,
1841
2152
  "borderTopWidth": 0,
1842
2153
  "color": {
1843
- "red": 0,
1844
- "green": 0,
1845
- "blue": 0,
2154
+ "red": 0.48627,
2155
+ "green": 0.07451,
2156
+ "blue": 0.4,
1846
2157
  "alpha": 1
1847
2158
  },
1848
2159
  "dismissButtonGap": 16,
@@ -4352,8 +4663,33 @@
4352
4663
  }
4353
4664
  },
4354
4665
  "Tooltip": {
4355
- "appearances": {},
4356
- "rules": [],
4666
+ "appearances": {
4667
+ "inverse": {
4668
+ "type": "variant",
4669
+ "values": [true]
4670
+ }
4671
+ },
4672
+ "rules": [
4673
+ {
4674
+ "if": {
4675
+ "inverse": true
4676
+ },
4677
+ "tokens": {
4678
+ "backgroundColor": {
4679
+ "red": 1,
4680
+ "green": 1,
4681
+ "blue": 1,
4682
+ "alpha": 1
4683
+ },
4684
+ "color": {
4685
+ "red": 0.00392,
4686
+ "green": 0.28235,
4687
+ "blue": 0.27843,
4688
+ "alpha": 1
4689
+ }
4690
+ }
4691
+ }
4692
+ ],
4357
4693
  "tokens": {
4358
4694
  "arrowBorderRadius": 0,
4359
4695
  "arrowOffset": 4,
@@ -4649,7 +4985,7 @@
4649
4985
  "appearances": {
4650
4986
  "space": {
4651
4987
  "description": "Index of the intended position on the spacing scale",
4652
- "values": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
4988
+ "values": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
4653
4989
  "type": "state"
4654
4990
  },
4655
4991
  "viewport": {
@@ -4667,6 +5003,22 @@
4667
5003
  "size": 120
4668
5004
  }
4669
5005
  },
5006
+ {
5007
+ "if": {
5008
+ "space": 12
5009
+ },
5010
+ "tokens": {
5011
+ "size": 120
5012
+ }
5013
+ },
5014
+ {
5015
+ "if": {
5016
+ "space": 11
5017
+ },
5018
+ "tokens": {
5019
+ "size": 120
5020
+ }
5021
+ },
4670
5022
  {
4671
5023
  "if": {
4672
5024
  "space": 10
@@ -4749,7 +5101,7 @@
4749
5101
  },
4750
5102
  {
4751
5103
  "if": {
4752
- "space": 10,
5104
+ "space": 11,
4753
5105
  "viewport": ["lg", "xl"]
4754
5106
  },
4755
5107
  "tokens": {
@@ -4758,7 +5110,7 @@
4758
5110
  },
4759
5111
  {
4760
5112
  "if": {
4761
- "space": 9,
5113
+ "space": 10,
4762
5114
  "viewport": ["lg", "xl"]
4763
5115
  },
4764
5116
  "tokens": {
@@ -4767,7 +5119,7 @@
4767
5119
  },
4768
5120
  {
4769
5121
  "if": {
4770
- "space": 8,
5122
+ "space": 9,
4771
5123
  "viewport": ["lg", "xl"]
4772
5124
  },
4773
5125
  "tokens": {
@@ -4776,13 +5128,31 @@
4776
5128
  },
4777
5129
  {
4778
5130
  "if": {
4779
- "space": 7,
5131
+ "space": 8,
4780
5132
  "viewport": ["lg", "xl"]
4781
5133
  },
4782
5134
  "tokens": {
4783
5135
  "size": 64
4784
5136
  }
4785
5137
  },
5138
+ {
5139
+ "if": {
5140
+ "space": 7,
5141
+ "viewport": ["lg", "xl"]
5142
+ },
5143
+ "tokens": {
5144
+ "size": 48
5145
+ }
5146
+ },
5147
+ {
5148
+ "if": {
5149
+ "space": 6,
5150
+ "viewport": ["lg", "xl"]
5151
+ },
5152
+ "tokens": {
5153
+ "size": 40
5154
+ }
5155
+ },
4786
5156
  {
4787
5157
  "if": {
4788
5158
  "space": 0
@@ -4798,7 +5168,7 @@
4798
5168
  }
4799
5169
  },
4800
5170
  "metadata": {
4801
- "themeTokensVersion": "2.9.0",
5171
+ "themeTokensVersion": "2.11.0",
4802
5172
  "name": "theme-koodo"
4803
5173
  }
4804
5174
  }