@telus-uds/theme-allium 3.12.0 → 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/rn/theme.js CHANGED
@@ -1,7 +1,7 @@
1
1
  /*
2
2
  *
3
3
  * Do not edit directly
4
- * Generated on Thu, 09 Feb 2023 23:33:39 GMT
4
+ * Generated on Thu, 23 Feb 2023 17:20:07 GMT
5
5
  *
6
6
  */
7
7
 
@@ -37,13 +37,17 @@ module.exports = {
37
37
  background: {
38
38
  description: 'Background colour of box. Transparent if not specified.',
39
39
  values: [
40
- 'light', 'lightest',
41
- 'dark', 'darkest',
42
- 'critical', 'danger',
43
- 'warning', 'positive',
44
- 'brand', 'black',
45
- 'brandGradient', 'greenGradient',
46
- 'neutralGradient', 'purpleGradient'
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: 'black' },
57
- tokens: { backgroundColor: '#000000' }
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: 'darkest' },
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: {
@@ -1307,7 +1372,7 @@ module.exports = {
1307
1372
  { if: { color: 'brand' }, tokens: { color: '#4b286d' } },
1308
1373
  { if: { color: 'default' }, tokens: { color: '#414547' } },
1309
1374
  { if: { color: 'subtle' }, tokens: { color: '#676e73' } },
1310
- { if: { color: 'success' }, tokens: { color: '#66cc00' } },
1375
+ { if: { color: 'success' }, tokens: { color: '#2b8000' } },
1311
1376
  { if: { color: 'danger' }, tokens: { color: '#c12335' } },
1312
1377
  { if: { color: 'warning' }, tokens: { color: '#b4872c' } },
1313
1378
  { if: { color: 'inverse' }, tokens: { color: '#ffffff' } },
@@ -4020,9 +4085,9 @@ module.exports = {
4020
4085
  description: 'Index of the intended position on the spacing scale',
4021
4086
  type: 'state',
4022
4087
  values: [
4023
- 0, 1, 2, 3, 4,
4024
- 5, 6, 7, 8, 9,
4025
- 10, 11
4088
+ 0, 1, 2, 3, 4, 5,
4089
+ 6, 7, 8, 9, 10, 11,
4090
+ 12
4026
4091
  ]
4027
4092
  },
4028
4093
  viewport: {
@@ -4034,6 +4099,7 @@ module.exports = {
4034
4099
  rules: [
4035
4100
  { if: { viewport: [ 'lg', 'xl' ] }, tokens: { size: 120 } },
4036
4101
  { if: { space: 11 }, tokens: { size: 96 } },
4102
+ { if: { space: 12 }, tokens: { size: 120 } },
4037
4103
  { if: { space: 10 }, tokens: { size: 80 } },
4038
4104
  { if: { space: 9 }, tokens: { size: 64 } },
4039
4105
  { if: { space: 8 }, tokens: { size: 48 } },
@@ -4073,5 +4139,5 @@ module.exports = {
4073
4139
  tokens: { size: 96 }
4074
4140
  }
4075
4141
  },
4076
- metadata: { name: 'theme-allium', themeTokensVersion: '2.10.0' }
4142
+ metadata: { name: 'theme-allium', themeTokensVersion: '2.11.0' }
4077
4143
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@telus-uds/theme-allium",
3
- "version": "3.12.0",
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.10.0",
12
- "@telus-uds/system-theme-tokens": "^2.10.0",
13
- "@telus-uds/system-tokens": "^0.6.2"
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.10.0"
16
+ "@telus-uds/palette-allium": "^2.10.1"
17
17
  },
18
18
  "files": [
19
19
  "build",
package/theme.json CHANGED
@@ -30,20 +30,27 @@
30
30
  "background": {
31
31
  "description": "Background colour of box. Transparent if not specified.",
32
32
  "values": [
33
- "light",
34
33
  "lightest",
34
+ "lighter",
35
+ "light",
35
36
  "dark",
37
+ "darker",
36
38
  "darkest",
37
39
  "critical",
38
40
  "danger",
39
41
  "warning",
40
42
  "positive",
41
43
  "brand",
44
+ "white",
42
45
  "black",
43
- "brandGradient",
46
+ "purpleGradient",
44
47
  "greenGradient",
45
48
  "neutralGradient",
46
- "purpleGradient"
49
+ "brandGradient",
50
+ "featurePrimary",
51
+ "featureSecondary",
52
+ "featureNeutral",
53
+ "featureBrand"
47
54
  ]
48
55
  }
49
56
  },
@@ -58,10 +65,10 @@
58
65
  },
59
66
  {
60
67
  "if": {
61
- "background": "black"
68
+ "background": "lighter"
62
69
  },
63
70
  "tokens": {
64
- "backgroundColor": "{palette.color.black}"
71
+ "backgroundColor": "{palette.color.white}"
65
72
  }
66
73
  },
67
74
  {
@@ -82,12 +89,20 @@
82
89
  },
83
90
  {
84
91
  "if": {
85
- "background": "darkest"
92
+ "background": "darker"
86
93
  },
87
94
  "tokens": {
88
95
  "backgroundColor": "{palette.color.greyThunder}"
89
96
  }
90
97
  },
98
+ {
99
+ "if": {
100
+ "background": "darkest"
101
+ },
102
+ "tokens": {
103
+ "backgroundColor": "{palette.color.black}"
104
+ }
105
+ },
91
106
  {
92
107
  "if": {
93
108
  "background": "critical"
@@ -128,6 +143,22 @@
128
143
  "backgroundColor": "{palette.color.purpleTelus}"
129
144
  }
130
145
  },
146
+ {
147
+ "if": {
148
+ "background": "white"
149
+ },
150
+ "tokens": {
151
+ "backgroundColor": "{palette.color.white}"
152
+ }
153
+ },
154
+ {
155
+ "if": {
156
+ "background": "black"
157
+ },
158
+ "tokens": {
159
+ "backgroundColor": "{palette.color.black}"
160
+ }
161
+ },
131
162
  {
132
163
  "if": {
133
164
  "background": "brandGradient"
@@ -163,6 +194,42 @@
163
194
  "backgroundColor": "{system.color.none}",
164
195
  "gradient": "{palette.gradient.purple}"
165
196
  }
197
+ },
198
+ {
199
+ "if": {
200
+ "background": "featurePrimary"
201
+ },
202
+ "tokens": {
203
+ "backgroundColor": "{system.color.none}",
204
+ "gradient": "{palette.gradient.purple}"
205
+ }
206
+ },
207
+ {
208
+ "if": {
209
+ "background": "featureSecondary"
210
+ },
211
+ "tokens": {
212
+ "backgroundColor": "{system.color.none}",
213
+ "gradient": "{palette.gradient.green}"
214
+ }
215
+ },
216
+ {
217
+ "if": {
218
+ "background": "featureNeutral"
219
+ },
220
+ "tokens": {
221
+ "backgroundColor": "{system.color.none}",
222
+ "gradient": "{palette.gradient.neutral}"
223
+ }
224
+ },
225
+ {
226
+ "if": {
227
+ "background": "featureBrand"
228
+ },
229
+ "tokens": {
230
+ "backgroundColor": "{system.color.none}",
231
+ "gradient": "{palette.gradient.brand}"
232
+ }
166
233
  }
167
234
  ],
168
235
  "tokens": {
@@ -225,15 +292,6 @@
225
292
  "color": "{palette.color.white}"
226
293
  }
227
294
  },
228
- {
229
- "if": {
230
- "hover": true,
231
- "priority": "high"
232
- },
233
- "tokens": {
234
- "backgroundColor": "{palette.color.greenSanFelix}"
235
- }
236
- },
237
295
  {
238
296
  "if": {
239
297
  "pressed": true
@@ -254,21 +312,30 @@
254
312
  },
255
313
  {
256
314
  "if": {
257
- "focus": true,
258
- "pressed": true
315
+ "inverse": true
259
316
  },
260
317
  "tokens": {
261
- "outerBorderColor": "{palette.color.greenDarkFern}"
318
+ "backgroundColor": "{system.color.none}",
319
+ "borderColor": "{palette.color.white}",
320
+ "color": "{palette.color.white}"
262
321
  }
263
322
  },
264
323
  {
265
324
  "if": {
266
- "inverse": true
325
+ "hover": true,
326
+ "priority": "high"
267
327
  },
268
328
  "tokens": {
269
- "backgroundColor": "{system.color.none}",
270
- "borderColor": "{palette.color.white}",
271
- "color": "{palette.color.white}"
329
+ "backgroundColor": "{palette.color.greenSanFelix}"
330
+ }
331
+ },
332
+ {
333
+ "if": {
334
+ "focus": true,
335
+ "pressed": true
336
+ },
337
+ "tokens": {
338
+ "outerBorderColor": "{palette.color.greenDarkFern}"
272
339
  }
273
340
  },
274
341
  {
@@ -449,6 +516,7 @@
449
516
  "text": true
450
517
  },
451
518
  "tokens": {
519
+ "borderColor": "{palette.color.transparent}",
452
520
  "borderRadius": "{palette.radius.none}",
453
521
  "color": "{palette.color.greenAccessible}",
454
522
  "outerBorderColor": "{palette.color.greenAccessible}"
@@ -506,17 +574,6 @@
506
574
  "textLine": "{system.textLine.none}"
507
575
  }
508
576
  },
509
- {
510
- "if": {
511
- "focus": true,
512
- "text": true
513
- },
514
- "tokens": {
515
- "borderColor": "{palette.color.transparent}",
516
- "color": "{palette.color.greenAccessible}",
517
- "outerBorderColor": "{palette.color.greenAccessible}"
518
- }
519
- },
520
577
  {
521
578
  "if": {
522
579
  "focus": true,
@@ -1672,7 +1729,7 @@
1672
1729
  "color": "success"
1673
1730
  },
1674
1731
  "tokens": {
1675
- "color": "{palette.color.greenTelus}"
1732
+ "color": "{palette.color.greenAccessible}"
1676
1733
  }
1677
1734
  },
1678
1735
  {
@@ -4968,6 +5025,14 @@
4968
5025
  "size": "{palette.size.size96}"
4969
5026
  }
4970
5027
  },
5028
+ {
5029
+ "if": {
5030
+ "space": 12
5031
+ },
5032
+ "tokens": {
5033
+ "size": "{palette.size.size120}"
5034
+ }
5035
+ },
4971
5036
  {
4972
5037
  "if": {
4973
5038
  "space": 10