@telus-uds/theme-allium 3.11.3 → 3.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/android/schema.json +920 -834
- package/build/android/theme.json +254 -22
- package/build/ios/schema.json +920 -834
- package/build/ios/theme.json +254 -22
- package/build/rn/schema.json +920 -834
- package/build/rn/theme.js +148 -42
- package/package.json +5 -5
- package/theme.json +140 -44
package/build/rn/theme.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*
|
|
2
2
|
*
|
|
3
3
|
* Do not edit directly
|
|
4
|
-
* Generated on Thu,
|
|
4
|
+
* Generated on Thu, 23 Feb 2023 17:20:07 GMT
|
|
5
5
|
*
|
|
6
6
|
*/
|
|
7
7
|
|
|
@@ -29,21 +29,25 @@ module.exports = {
|
|
|
29
29
|
values: [ 'large' ]
|
|
30
30
|
}
|
|
31
31
|
},
|
|
32
|
-
rules: [ { if: { size: 'large' }, tokens: { size:
|
|
33
|
-
tokens: { color: '#2b8000', size:
|
|
32
|
+
rules: [ { if: { size: 'large' }, tokens: { size: 48, thickness: 4 } } ],
|
|
33
|
+
tokens: { color: '#2b8000', size: 24, thickness: 2 }
|
|
34
34
|
},
|
|
35
35
|
Box: {
|
|
36
36
|
appearances: {
|
|
37
37
|
background: {
|
|
38
38
|
description: 'Background colour of box. Transparent if not specified.',
|
|
39
39
|
values: [
|
|
40
|
-
'
|
|
41
|
-
'
|
|
42
|
-
'
|
|
43
|
-
'
|
|
44
|
-
'
|
|
45
|
-
'
|
|
46
|
-
'
|
|
40
|
+
'lightest', 'lighter',
|
|
41
|
+
'light', 'dark',
|
|
42
|
+
'darker', 'darkest',
|
|
43
|
+
'critical', 'danger',
|
|
44
|
+
'warning', 'positive',
|
|
45
|
+
'brand', 'white',
|
|
46
|
+
'black', 'purpleGradient',
|
|
47
|
+
'greenGradient', 'neutralGradient',
|
|
48
|
+
'brandGradient', 'featurePrimary',
|
|
49
|
+
'featureSecondary', 'featureNeutral',
|
|
50
|
+
'featureBrand'
|
|
47
51
|
]
|
|
48
52
|
}
|
|
49
53
|
},
|
|
@@ -53,8 +57,8 @@ module.exports = {
|
|
|
53
57
|
tokens: { backgroundColor: '#ffffff' }
|
|
54
58
|
},
|
|
55
59
|
{
|
|
56
|
-
if: { background: '
|
|
57
|
-
tokens: { backgroundColor: '#
|
|
60
|
+
if: { background: 'lighter' },
|
|
61
|
+
tokens: { backgroundColor: '#ffffff' }
|
|
58
62
|
},
|
|
59
63
|
{
|
|
60
64
|
if: { background: 'light' },
|
|
@@ -65,9 +69,13 @@ module.exports = {
|
|
|
65
69
|
tokens: { backgroundColor: '#414547' }
|
|
66
70
|
},
|
|
67
71
|
{
|
|
68
|
-
if: { background: '
|
|
72
|
+
if: { background: 'darker' },
|
|
69
73
|
tokens: { backgroundColor: '#2c2e30' }
|
|
70
74
|
},
|
|
75
|
+
{
|
|
76
|
+
if: { background: 'darkest' },
|
|
77
|
+
tokens: { backgroundColor: '#000000' }
|
|
78
|
+
},
|
|
71
79
|
{
|
|
72
80
|
if: { background: 'critical' },
|
|
73
81
|
tokens: { backgroundColor: '#c12335' }
|
|
@@ -88,6 +96,14 @@ module.exports = {
|
|
|
88
96
|
if: { background: 'brand' },
|
|
89
97
|
tokens: { backgroundColor: '#4b286d' }
|
|
90
98
|
},
|
|
99
|
+
{
|
|
100
|
+
if: { background: 'white' },
|
|
101
|
+
tokens: { backgroundColor: '#ffffff' }
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
if: { background: 'black' },
|
|
105
|
+
tokens: { backgroundColor: '#000000' }
|
|
106
|
+
},
|
|
91
107
|
{
|
|
92
108
|
if: { background: 'brandGradient' },
|
|
93
109
|
tokens: {
|
|
@@ -143,6 +159,62 @@ module.exports = {
|
|
|
143
159
|
type: 'linear'
|
|
144
160
|
}
|
|
145
161
|
}
|
|
162
|
+
},
|
|
163
|
+
{
|
|
164
|
+
if: { background: 'featurePrimary' },
|
|
165
|
+
tokens: {
|
|
166
|
+
backgroundColor: null,
|
|
167
|
+
gradient: {
|
|
168
|
+
angle: 135,
|
|
169
|
+
stops: [
|
|
170
|
+
{ color: '#4b286d', stop: 0 },
|
|
171
|
+
{ color: '#e53293', stop: 1 }
|
|
172
|
+
],
|
|
173
|
+
type: 'linear'
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
},
|
|
177
|
+
{
|
|
178
|
+
if: { background: 'featureSecondary' },
|
|
179
|
+
tokens: {
|
|
180
|
+
backgroundColor: null,
|
|
181
|
+
gradient: {
|
|
182
|
+
angle: 135,
|
|
183
|
+
stops: [
|
|
184
|
+
{ color: '#00784a', stop: 0 },
|
|
185
|
+
{ color: '#66cc00', stop: 1 }
|
|
186
|
+
],
|
|
187
|
+
type: 'linear'
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
},
|
|
191
|
+
{
|
|
192
|
+
if: { background: 'featureNeutral' },
|
|
193
|
+
tokens: {
|
|
194
|
+
backgroundColor: null,
|
|
195
|
+
gradient: {
|
|
196
|
+
angle: 180,
|
|
197
|
+
stops: [
|
|
198
|
+
{ color: '#ffffff', stop: 0 },
|
|
199
|
+
{ color: '#f4f4f7', stop: 1 }
|
|
200
|
+
],
|
|
201
|
+
type: 'linear'
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
},
|
|
205
|
+
{
|
|
206
|
+
if: { background: 'featureBrand' },
|
|
207
|
+
tokens: {
|
|
208
|
+
backgroundColor: null,
|
|
209
|
+
gradient: {
|
|
210
|
+
angle: 135,
|
|
211
|
+
stops: [
|
|
212
|
+
{ color: '#4b286d', stop: 0 },
|
|
213
|
+
{ color: '#613889', stop: 1 }
|
|
214
|
+
],
|
|
215
|
+
type: 'linear'
|
|
216
|
+
}
|
|
217
|
+
}
|
|
146
218
|
}
|
|
147
219
|
],
|
|
148
220
|
tokens: { backgroundColor: null, gradient: null }
|
|
@@ -208,10 +280,6 @@ module.exports = {
|
|
|
208
280
|
color: '#ffffff'
|
|
209
281
|
}
|
|
210
282
|
},
|
|
211
|
-
{
|
|
212
|
-
if: { hover: true, priority: 'high' },
|
|
213
|
-
tokens: { backgroundColor: '#1f5c09' }
|
|
214
|
-
},
|
|
215
283
|
{
|
|
216
284
|
if: { pressed: true },
|
|
217
285
|
tokens: {
|
|
@@ -224,10 +292,6 @@ module.exports = {
|
|
|
224
292
|
if: { focus: true },
|
|
225
293
|
tokens: { outerBorderColor: '#2b8000' }
|
|
226
294
|
},
|
|
227
|
-
{
|
|
228
|
-
if: { focus: true, pressed: true },
|
|
229
|
-
tokens: { outerBorderColor: '#163e06' }
|
|
230
|
-
},
|
|
231
295
|
{
|
|
232
296
|
if: { inverse: true },
|
|
233
297
|
tokens: {
|
|
@@ -236,6 +300,14 @@ module.exports = {
|
|
|
236
300
|
color: '#ffffff'
|
|
237
301
|
}
|
|
238
302
|
},
|
|
303
|
+
{
|
|
304
|
+
if: { hover: true, priority: 'high' },
|
|
305
|
+
tokens: { backgroundColor: '#1f5c09' }
|
|
306
|
+
},
|
|
307
|
+
{
|
|
308
|
+
if: { focus: true, pressed: true },
|
|
309
|
+
tokens: { outerBorderColor: '#163e06' }
|
|
310
|
+
},
|
|
239
311
|
{
|
|
240
312
|
if: { inverse: true, priority: 'high' },
|
|
241
313
|
tokens: { backgroundColor: '#ffffff', color: '#414547' }
|
|
@@ -324,6 +396,7 @@ module.exports = {
|
|
|
324
396
|
{
|
|
325
397
|
if: { focus: true, text: true },
|
|
326
398
|
tokens: {
|
|
399
|
+
borderColor: 'rgba(0, 0, 0, 0)',
|
|
327
400
|
borderRadius: 0,
|
|
328
401
|
color: '#2b8000',
|
|
329
402
|
outerBorderColor: '#2b8000'
|
|
@@ -354,14 +427,6 @@ module.exports = {
|
|
|
354
427
|
textLine: 'none'
|
|
355
428
|
}
|
|
356
429
|
},
|
|
357
|
-
{
|
|
358
|
-
if: { focus: true, text: true },
|
|
359
|
-
tokens: {
|
|
360
|
-
borderColor: 'rgba(0, 0, 0, 0)',
|
|
361
|
-
color: '#2b8000',
|
|
362
|
-
outerBorderColor: '#2b8000'
|
|
363
|
-
}
|
|
364
|
-
},
|
|
365
430
|
{
|
|
366
431
|
if: { focus: true, pressed: true, text: true },
|
|
367
432
|
tokens: {
|
|
@@ -539,6 +604,7 @@ module.exports = {
|
|
|
539
604
|
borderRadius: 32,
|
|
540
605
|
borderWidth: 1,
|
|
541
606
|
color: '#676e73',
|
|
607
|
+
dividerColor: '#e3e6e8',
|
|
542
608
|
fontName: 'HelveticaNow',
|
|
543
609
|
fontSize: 14,
|
|
544
610
|
fontWeight: '700',
|
|
@@ -565,6 +631,7 @@ module.exports = {
|
|
|
565
631
|
paddingRight: 8,
|
|
566
632
|
paddingTop: 8,
|
|
567
633
|
shadow: null,
|
|
634
|
+
subtitleColor: '#676e73',
|
|
568
635
|
textAlign: 'center',
|
|
569
636
|
width: null
|
|
570
637
|
}
|
|
@@ -602,6 +669,11 @@ module.exports = {
|
|
|
602
669
|
type: 'state',
|
|
603
670
|
values: [ true ]
|
|
604
671
|
},
|
|
672
|
+
iconPosition: {
|
|
673
|
+
description: 'Theme styles to be applied to icon links depending on where the icon is in relation to the link text',
|
|
674
|
+
type: 'state',
|
|
675
|
+
values: [ 'left', 'right' ]
|
|
676
|
+
},
|
|
605
677
|
inactive: {
|
|
606
678
|
description: 'Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.',
|
|
607
679
|
type: 'state',
|
|
@@ -669,7 +741,8 @@ module.exports = {
|
|
|
669
741
|
borderWidth: 0,
|
|
670
742
|
color: '#ffffff'
|
|
671
743
|
}
|
|
672
|
-
}
|
|
744
|
+
},
|
|
745
|
+
{ if: { iconPosition: 'right' }, tokens: { iconSpace: 1 } }
|
|
673
746
|
],
|
|
674
747
|
tokens: {
|
|
675
748
|
alignSelf: 'flex-start',
|
|
@@ -681,9 +754,10 @@ module.exports = {
|
|
|
681
754
|
fontName: 'HelveticaNow',
|
|
682
755
|
fontSize: 14,
|
|
683
756
|
fontWeight: '700',
|
|
757
|
+
height: 36,
|
|
684
758
|
iconSize: 20,
|
|
685
759
|
iconSpace: 2,
|
|
686
|
-
lineHeight: 1.
|
|
760
|
+
lineHeight: 1.42857142857,
|
|
687
761
|
minWidth: 0,
|
|
688
762
|
opacity: 1,
|
|
689
763
|
outerBackgroundColor: 'rgba(0, 0, 0, 0)',
|
|
@@ -916,7 +990,7 @@ module.exports = {
|
|
|
916
990
|
if: { selected: true },
|
|
917
991
|
tokens: {
|
|
918
992
|
borderBottomColor: '#676e73',
|
|
919
|
-
borderBottomWidth:
|
|
993
|
+
borderBottomWidth: 4,
|
|
920
994
|
color: '#676e73',
|
|
921
995
|
fontName: 'HelveticaNow',
|
|
922
996
|
fontWeight: '400'
|
|
@@ -925,23 +999,43 @@ module.exports = {
|
|
|
925
999
|
{ if: { inverse: true }, tokens: { color: '#ffffff' } },
|
|
926
1000
|
{
|
|
927
1001
|
if: { hover: true, inverse: true },
|
|
928
|
-
tokens: {
|
|
1002
|
+
tokens: {
|
|
1003
|
+
borderBottomColor: '#ffffff',
|
|
1004
|
+
borderBottomWidth: 2,
|
|
1005
|
+
color: '#ffffff'
|
|
1006
|
+
}
|
|
929
1007
|
},
|
|
930
1008
|
{
|
|
931
1009
|
if: { inverse: true, pressed: true },
|
|
932
|
-
tokens: {
|
|
1010
|
+
tokens: {
|
|
1011
|
+
borderBottomColor: '#676e73',
|
|
1012
|
+
borderBottomWidth: 2,
|
|
1013
|
+
color: '#676e73'
|
|
1014
|
+
}
|
|
933
1015
|
},
|
|
934
1016
|
{
|
|
935
1017
|
if: { focus: true, inverse: true },
|
|
936
|
-
tokens: {
|
|
1018
|
+
tokens: {
|
|
1019
|
+
borderBottomColor: '#ffffff',
|
|
1020
|
+
borderBottomWidth: 4,
|
|
1021
|
+
color: '#ffffff'
|
|
1022
|
+
}
|
|
937
1023
|
},
|
|
938
1024
|
{
|
|
939
1025
|
if: { focus: true, inverse: true, pressed: true },
|
|
940
|
-
tokens: {
|
|
1026
|
+
tokens: {
|
|
1027
|
+
borderBottomColor: '#676e73',
|
|
1028
|
+
borderBottomWidth: 4,
|
|
1029
|
+
color: '#676e73'
|
|
1030
|
+
}
|
|
941
1031
|
},
|
|
942
1032
|
{
|
|
943
1033
|
if: { inverse: true, selected: true },
|
|
944
|
-
tokens: {
|
|
1034
|
+
tokens: {
|
|
1035
|
+
borderBottomColor: '#ffffff',
|
|
1036
|
+
borderBottomWidth: 4,
|
|
1037
|
+
color: '#ffffff'
|
|
1038
|
+
}
|
|
945
1039
|
}
|
|
946
1040
|
],
|
|
947
1041
|
tokens: {
|
|
@@ -1012,6 +1106,15 @@ module.exports = {
|
|
|
1012
1106
|
{
|
|
1013
1107
|
if: { hover: true },
|
|
1014
1108
|
tokens: { inputOutlineColor: '#e3e6e8', inputOutlineWidth: 2 }
|
|
1109
|
+
},
|
|
1110
|
+
{
|
|
1111
|
+
if: { checked: true, focus: true },
|
|
1112
|
+
tokens: {
|
|
1113
|
+
inputBorderColor: '#ffffff',
|
|
1114
|
+
inputBorderWidth: 2,
|
|
1115
|
+
inputOutlineColor: '#7c53a5',
|
|
1116
|
+
inputOutlineWidth: 3
|
|
1117
|
+
}
|
|
1015
1118
|
}
|
|
1016
1119
|
],
|
|
1017
1120
|
tokens: {
|
|
@@ -1269,7 +1372,7 @@ module.exports = {
|
|
|
1269
1372
|
{ if: { color: 'brand' }, tokens: { color: '#4b286d' } },
|
|
1270
1373
|
{ if: { color: 'default' }, tokens: { color: '#414547' } },
|
|
1271
1374
|
{ if: { color: 'subtle' }, tokens: { color: '#676e73' } },
|
|
1272
|
-
{ if: { color: 'success' }, tokens: { color: '#
|
|
1375
|
+
{ if: { color: 'success' }, tokens: { color: '#2b8000' } },
|
|
1273
1376
|
{ if: { color: 'danger' }, tokens: { color: '#c12335' } },
|
|
1274
1377
|
{ if: { color: 'warning' }, tokens: { color: '#b4872c' } },
|
|
1275
1378
|
{ if: { color: 'inverse' }, tokens: { color: '#ffffff' } },
|
|
@@ -1620,6 +1723,7 @@ module.exports = {
|
|
|
1620
1723
|
tokens: {
|
|
1621
1724
|
iconMarginTop: 8,
|
|
1622
1725
|
itemFontSize: 20,
|
|
1726
|
+
itemIconSize: 20,
|
|
1623
1727
|
itemLineHeight: 1.6,
|
|
1624
1728
|
listGutter: 12
|
|
1625
1729
|
}
|
|
@@ -1629,6 +1733,7 @@ module.exports = {
|
|
|
1629
1733
|
tokens: {
|
|
1630
1734
|
iconMarginTop: 2,
|
|
1631
1735
|
itemFontSize: 14,
|
|
1736
|
+
itemIconSize: 14,
|
|
1632
1737
|
itemLineHeight: 1.42857142857,
|
|
1633
1738
|
listGutter: 12
|
|
1634
1739
|
}
|
|
@@ -3980,9 +4085,9 @@ module.exports = {
|
|
|
3980
4085
|
description: 'Index of the intended position on the spacing scale',
|
|
3981
4086
|
type: 'state',
|
|
3982
4087
|
values: [
|
|
3983
|
-
0,
|
|
3984
|
-
|
|
3985
|
-
|
|
4088
|
+
0, 1, 2, 3, 4, 5,
|
|
4089
|
+
6, 7, 8, 9, 10, 11,
|
|
4090
|
+
12
|
|
3986
4091
|
]
|
|
3987
4092
|
},
|
|
3988
4093
|
viewport: {
|
|
@@ -3994,6 +4099,7 @@ module.exports = {
|
|
|
3994
4099
|
rules: [
|
|
3995
4100
|
{ if: { viewport: [ 'lg', 'xl' ] }, tokens: { size: 120 } },
|
|
3996
4101
|
{ if: { space: 11 }, tokens: { size: 96 } },
|
|
4102
|
+
{ if: { space: 12 }, tokens: { size: 120 } },
|
|
3997
4103
|
{ if: { space: 10 }, tokens: { size: 80 } },
|
|
3998
4104
|
{ if: { space: 9 }, tokens: { size: 64 } },
|
|
3999
4105
|
{ if: { space: 8 }, tokens: { size: 48 } },
|
|
@@ -4033,5 +4139,5 @@ module.exports = {
|
|
|
4033
4139
|
tokens: { size: 96 }
|
|
4034
4140
|
}
|
|
4035
4141
|
},
|
|
4036
|
-
metadata: { name: 'theme-allium', themeTokensVersion: '2.
|
|
4142
|
+
metadata: { name: 'theme-allium', themeTokensVersion: '2.11.0' }
|
|
4037
4143
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@telus-uds/theme-allium",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.13.0",
|
|
4
4
|
"description": "Allium theme",
|
|
5
5
|
"author": "TELUS Digital",
|
|
6
6
|
"homepage": "https://github.com/telus/allium-design-system#readme",
|
|
@@ -8,12 +8,12 @@
|
|
|
8
8
|
"main": "build/rn/theme.js",
|
|
9
9
|
"dependencies": {},
|
|
10
10
|
"devDependencies": {
|
|
11
|
-
"@telus-uds/palette-allium": "^2.
|
|
12
|
-
"@telus-uds/system-theme-tokens": "^2.
|
|
13
|
-
"@telus-uds/system-tokens": "^0.6.
|
|
11
|
+
"@telus-uds/palette-allium": "^2.10.1",
|
|
12
|
+
"@telus-uds/system-theme-tokens": "^2.11.0",
|
|
13
|
+
"@telus-uds/system-tokens": "^0.6.3"
|
|
14
14
|
},
|
|
15
15
|
"peerDependencies": {
|
|
16
|
-
"@telus-uds/palette-allium": "^2.
|
|
16
|
+
"@telus-uds/palette-allium": "^2.10.1"
|
|
17
17
|
},
|
|
18
18
|
"files": [
|
|
19
19
|
"build",
|