@telus-uds/theme-allium 3.8.2 → 3.10.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/{schema.json → android/schema.json} +1190 -822
- package/build/android/theme.json +6761 -0
- package/build/ios/schema.json +11779 -0
- package/build/ios/theme.json +6761 -0
- package/build/rn/schema.json +11779 -0
- package/build/{theme.js → rn/theme.js} +410 -16
- package/package.json +6 -6
- package/theme.json +499 -4
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
/*
|
|
2
2
|
*
|
|
3
3
|
* Do not edit directly
|
|
4
|
-
* Generated on
|
|
4
|
+
* Generated on Tue, 08 Nov 2022 01:31:50 GMT
|
|
5
5
|
*
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
+
const PaletteIconCaretDown = require('@telus-uds/palette-allium/build/rn/icons/CaretDown')
|
|
9
|
+
const PaletteIconCaretUp = require('@telus-uds/palette-allium/build/rn/icons/CaretUp')
|
|
8
10
|
const PaletteIconArrowRight = require('@telus-uds/palette-allium/build/rn/icons/ArrowRight')
|
|
9
11
|
const PaletteIconArrowLeft = require('@telus-uds/palette-allium/build/rn/icons/ArrowLeft')
|
|
10
12
|
const PaletteIconCheckmark = require('@telus-uds/palette-allium/build/rn/icons/Checkmark')
|
|
11
|
-
const PaletteIconCaretDown = require('@telus-uds/palette-allium/build/rn/icons/CaretDown')
|
|
12
|
-
const PaletteIconCaretUp = require('@telus-uds/palette-allium/build/rn/icons/CaretUp')
|
|
13
13
|
const PaletteIconStatusSuccess = require('@telus-uds/palette-allium/build/rn/icons/StatusSuccess')
|
|
14
14
|
const PaletteIconStatusError = require('@telus-uds/palette-allium/build/rn/icons/StatusError')
|
|
15
15
|
const PaletteIconClose = require('@telus-uds/palette-allium/build/rn/icons/Close')
|
|
@@ -37,11 +37,13 @@ module.exports = {
|
|
|
37
37
|
background: {
|
|
38
38
|
description: 'Background colour of box. Transparent if not specified.',
|
|
39
39
|
values: [
|
|
40
|
-
'light',
|
|
41
|
-
'dark',
|
|
42
|
-
'critical',
|
|
43
|
-
'warning',
|
|
44
|
-
'brand'
|
|
40
|
+
'light', 'lightest',
|
|
41
|
+
'dark', 'darkest',
|
|
42
|
+
'critical', 'danger',
|
|
43
|
+
'warning', 'positive',
|
|
44
|
+
'brand', 'black',
|
|
45
|
+
'brandGradient', 'greenGradient',
|
|
46
|
+
'neutralGradient', 'purpleGradient'
|
|
45
47
|
]
|
|
46
48
|
}
|
|
47
49
|
},
|
|
@@ -50,6 +52,10 @@ module.exports = {
|
|
|
50
52
|
if: { background: 'lightest' },
|
|
51
53
|
tokens: { backgroundColor: '#ffffff' }
|
|
52
54
|
},
|
|
55
|
+
{
|
|
56
|
+
if: { background: 'black' },
|
|
57
|
+
tokens: { backgroundColor: '#000000' }
|
|
58
|
+
},
|
|
53
59
|
{
|
|
54
60
|
if: { background: 'light' },
|
|
55
61
|
tokens: { backgroundColor: '#f4f4f7' }
|
|
@@ -81,9 +87,65 @@ module.exports = {
|
|
|
81
87
|
{
|
|
82
88
|
if: { background: 'brand' },
|
|
83
89
|
tokens: { backgroundColor: '#4b286d' }
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
if: { background: 'brandGradient' },
|
|
93
|
+
tokens: {
|
|
94
|
+
backgroundColor: null,
|
|
95
|
+
gradient: {
|
|
96
|
+
angle: 135,
|
|
97
|
+
stops: [
|
|
98
|
+
{ color: '#4b286d', stop: 0 },
|
|
99
|
+
{ color: '#613889', stop: 1 }
|
|
100
|
+
],
|
|
101
|
+
type: 'linear'
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
if: { background: 'greenGradient' },
|
|
107
|
+
tokens: {
|
|
108
|
+
backgroundColor: null,
|
|
109
|
+
gradient: {
|
|
110
|
+
angle: 135,
|
|
111
|
+
stops: [
|
|
112
|
+
{ color: '#00784a', stop: 0 },
|
|
113
|
+
{ color: '#66cc00', stop: 1 }
|
|
114
|
+
],
|
|
115
|
+
type: 'linear'
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
if: { background: 'neutralGradient' },
|
|
121
|
+
tokens: {
|
|
122
|
+
backgroundColor: null,
|
|
123
|
+
gradient: {
|
|
124
|
+
angle: 180,
|
|
125
|
+
stops: [
|
|
126
|
+
{ color: '#ffffff', stop: 0 },
|
|
127
|
+
{ color: '#f4f4f7', stop: 1 }
|
|
128
|
+
],
|
|
129
|
+
type: 'linear'
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
if: { background: 'purpleGradient' },
|
|
135
|
+
tokens: {
|
|
136
|
+
backgroundColor: null,
|
|
137
|
+
gradient: {
|
|
138
|
+
angle: 135,
|
|
139
|
+
stops: [
|
|
140
|
+
{ color: '#4b286d', stop: 0 },
|
|
141
|
+
{ color: '#e53293', stop: 1 }
|
|
142
|
+
],
|
|
143
|
+
type: 'linear'
|
|
144
|
+
}
|
|
145
|
+
}
|
|
84
146
|
}
|
|
85
147
|
],
|
|
86
|
-
tokens: { backgroundColor: null }
|
|
148
|
+
tokens: { backgroundColor: null, gradient: null }
|
|
87
149
|
},
|
|
88
150
|
Button: {
|
|
89
151
|
appearances: {
|
|
@@ -94,11 +156,13 @@ module.exports = {
|
|
|
94
156
|
},
|
|
95
157
|
focus: {
|
|
96
158
|
description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
|
|
159
|
+
platforms: [ 'rn' ],
|
|
97
160
|
type: 'state',
|
|
98
161
|
values: [ true ]
|
|
99
162
|
},
|
|
100
163
|
hover: {
|
|
101
164
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
165
|
+
platforms: [ 'rn' ],
|
|
102
166
|
type: 'state',
|
|
103
167
|
values: [ true ]
|
|
104
168
|
},
|
|
@@ -120,9 +184,14 @@ module.exports = {
|
|
|
120
184
|
priority: {
|
|
121
185
|
description: 'Indicates the importance of the call-to-action. Limit the amount of high priority buttons on a page to prioritize meaningful user flows. Low priority styles are applied by default.',
|
|
122
186
|
type: 'variant',
|
|
123
|
-
values: [ 'high' ]
|
|
187
|
+
values: [ 'high', 'low' ]
|
|
124
188
|
},
|
|
125
189
|
size: { type: 'variant', values: [ 'small' ] },
|
|
190
|
+
text: {
|
|
191
|
+
description: 'Text variant visually deprioritize the button styles',
|
|
192
|
+
type: 'variant',
|
|
193
|
+
values: [ true ]
|
|
194
|
+
},
|
|
126
195
|
width: {
|
|
127
196
|
description: 'Available in default or full-width. Default-width expands based on content Full-width expands to width of the container.',
|
|
128
197
|
type: 'variant',
|
|
@@ -226,6 +295,117 @@ module.exports = {
|
|
|
226
295
|
backgroundColor: 'rgba(255, 255, 255, 0.6)',
|
|
227
296
|
color: '#414547'
|
|
228
297
|
}
|
|
298
|
+
},
|
|
299
|
+
{
|
|
300
|
+
if: { text: true },
|
|
301
|
+
tokens: {
|
|
302
|
+
backgroundColor: 'rgba(0, 0, 0, 0)',
|
|
303
|
+
borderColor: 'rgba(0, 0, 0, 0)',
|
|
304
|
+
borderWidth: 0,
|
|
305
|
+
minWidth: 0,
|
|
306
|
+
outerBorderColor: 'rgba(0, 0, 0, 0)',
|
|
307
|
+
paddingLeft: 0,
|
|
308
|
+
paddingRight: 0,
|
|
309
|
+
textLine: 'underline'
|
|
310
|
+
}
|
|
311
|
+
},
|
|
312
|
+
{
|
|
313
|
+
if: { hover: true, text: true },
|
|
314
|
+
tokens: { textLine: 'none' }
|
|
315
|
+
},
|
|
316
|
+
{
|
|
317
|
+
if: { priority: 'high', text: true },
|
|
318
|
+
tokens: { color: '#2b8000' }
|
|
319
|
+
},
|
|
320
|
+
{
|
|
321
|
+
if: { priority: 'low', text: true },
|
|
322
|
+
tokens: { color: '#414547' }
|
|
323
|
+
},
|
|
324
|
+
{
|
|
325
|
+
if: { focus: true, text: true },
|
|
326
|
+
tokens: {
|
|
327
|
+
borderRadius: 0,
|
|
328
|
+
color: '#2b8000',
|
|
329
|
+
outerBorderColor: '#2b8000'
|
|
330
|
+
}
|
|
331
|
+
},
|
|
332
|
+
{
|
|
333
|
+
if: { hover: true, priority: 'high', text: true },
|
|
334
|
+
tokens: { color: '#1f5c09' }
|
|
335
|
+
},
|
|
336
|
+
{
|
|
337
|
+
if: { hover: true, priority: null, text: true },
|
|
338
|
+
tokens: { color: '#1f5c09' }
|
|
339
|
+
},
|
|
340
|
+
{
|
|
341
|
+
if: { hover: true, priority: 'low', text: true },
|
|
342
|
+
tokens: { color: '#414547' }
|
|
343
|
+
},
|
|
344
|
+
{
|
|
345
|
+
if: { danger: true, hover: true, text: true },
|
|
346
|
+
tokens: { color: '#c12335' }
|
|
347
|
+
},
|
|
348
|
+
{
|
|
349
|
+
if: { pressed: true, text: true },
|
|
350
|
+
tokens: {
|
|
351
|
+
borderColor: 'rgba(0, 0, 0, 0)',
|
|
352
|
+
color: '#163e06',
|
|
353
|
+
outerBorderColor: 'rgba(0, 0, 0, 0)',
|
|
354
|
+
textLine: 'none'
|
|
355
|
+
}
|
|
356
|
+
},
|
|
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
|
+
{
|
|
366
|
+
if: { focus: true, pressed: true, text: true },
|
|
367
|
+
tokens: {
|
|
368
|
+
borderColor: 'rgba(0, 0, 0, 0)',
|
|
369
|
+
color: '#163e06',
|
|
370
|
+
outerBorderColor: '#163e06',
|
|
371
|
+
textLine: 'none'
|
|
372
|
+
}
|
|
373
|
+
},
|
|
374
|
+
{
|
|
375
|
+
if: { inactive: true, text: true },
|
|
376
|
+
tokens: {
|
|
377
|
+
borderColor: 'rgba(0, 0, 0, 0)',
|
|
378
|
+
color: '#b2b9bf',
|
|
379
|
+
outerBorderColor: 'rgba(0, 0, 0, 0)',
|
|
380
|
+
textLine: 'none'
|
|
381
|
+
}
|
|
382
|
+
},
|
|
383
|
+
{
|
|
384
|
+
if: { inverse: true, text: true },
|
|
385
|
+
tokens: { borderRadius: 0, color: '#ffffff' }
|
|
386
|
+
},
|
|
387
|
+
{
|
|
388
|
+
if: { focus: true, inverse: true, text: true },
|
|
389
|
+
tokens: {
|
|
390
|
+
borderColor: 'rgba(0, 0, 0, 0)',
|
|
391
|
+
outerBorderColor: '#ffffff'
|
|
392
|
+
}
|
|
393
|
+
},
|
|
394
|
+
{
|
|
395
|
+
if: { focus: true, inverse: true, pressed: true, text: true },
|
|
396
|
+
tokens: {
|
|
397
|
+
borderColor: 'rgba(0, 0, 0, 0)',
|
|
398
|
+
color: '#b2b9bf',
|
|
399
|
+
outerBorderColor: '#b2b9bf'
|
|
400
|
+
}
|
|
401
|
+
},
|
|
402
|
+
{
|
|
403
|
+
if: { inactive: true, inverse: true, text: true },
|
|
404
|
+
tokens: {
|
|
405
|
+
borderColor: 'rgba(0, 0, 0, 0)',
|
|
406
|
+
color: '#b2b9bf',
|
|
407
|
+
outerBorderColor: 'rgba(0, 0, 0, 0)'
|
|
408
|
+
}
|
|
229
409
|
}
|
|
230
410
|
],
|
|
231
411
|
tokens: {
|
|
@@ -254,6 +434,138 @@ module.exports = {
|
|
|
254
434
|
paddingTop: 12,
|
|
255
435
|
shadow: null,
|
|
256
436
|
textAlign: 'center',
|
|
437
|
+
textLine: 'none',
|
|
438
|
+
textLineStyle: 'solid',
|
|
439
|
+
width: null
|
|
440
|
+
}
|
|
441
|
+
},
|
|
442
|
+
ButtonDropdown: {
|
|
443
|
+
appearances: {
|
|
444
|
+
focus: {
|
|
445
|
+
description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
|
|
446
|
+
platforms: [ 'rn' ],
|
|
447
|
+
type: 'state',
|
|
448
|
+
values: [ true ]
|
|
449
|
+
},
|
|
450
|
+
hover: {
|
|
451
|
+
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
452
|
+
platforms: [ 'rn' ],
|
|
453
|
+
type: 'state',
|
|
454
|
+
values: [ true ]
|
|
455
|
+
},
|
|
456
|
+
inactive: {
|
|
457
|
+
description: 'Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.',
|
|
458
|
+
type: 'state',
|
|
459
|
+
values: [ true ]
|
|
460
|
+
},
|
|
461
|
+
open: {
|
|
462
|
+
description: 'Applies when a ButtonDropdown is open.',
|
|
463
|
+
type: 'state',
|
|
464
|
+
values: [ true ]
|
|
465
|
+
},
|
|
466
|
+
pressed: {
|
|
467
|
+
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.',
|
|
468
|
+
type: 'state',
|
|
469
|
+
values: [ true ]
|
|
470
|
+
},
|
|
471
|
+
selected: {
|
|
472
|
+
description: 'Applies while an interactive component is the currently selected one in a set of states or components, for example a button in a `ButtonGroup`.',
|
|
473
|
+
type: 'state',
|
|
474
|
+
values: [ true ]
|
|
475
|
+
}
|
|
476
|
+
},
|
|
477
|
+
rules: [
|
|
478
|
+
{ if: { open: true }, tokens: { icon: PaletteIconCaretUp } },
|
|
479
|
+
{
|
|
480
|
+
if: { pressed: true },
|
|
481
|
+
tokens: {
|
|
482
|
+
backgroundColor: '#676e73',
|
|
483
|
+
borderColor: '#676e73',
|
|
484
|
+
borderWidth: 0,
|
|
485
|
+
color: '#ffffff',
|
|
486
|
+
iconBackground: '#414547',
|
|
487
|
+
iconColor: '#ffffff'
|
|
488
|
+
}
|
|
489
|
+
},
|
|
490
|
+
{
|
|
491
|
+
if: { focus: true },
|
|
492
|
+
tokens: {
|
|
493
|
+
borderColor: '#676e73',
|
|
494
|
+
outerBorderColor: '#676e73',
|
|
495
|
+
outerBorderGap: 2,
|
|
496
|
+
outerBorderWidth: 2
|
|
497
|
+
}
|
|
498
|
+
},
|
|
499
|
+
{ if: { hover: true }, tokens: { borderWidth: 3 } },
|
|
500
|
+
{
|
|
501
|
+
if: { selected: true },
|
|
502
|
+
tokens: {
|
|
503
|
+
backgroundColor: '#4b286d',
|
|
504
|
+
borderWidth: 0,
|
|
505
|
+
color: '#ffffff',
|
|
506
|
+
iconBackground: '#7c53a5',
|
|
507
|
+
iconColor: '#ffffff'
|
|
508
|
+
}
|
|
509
|
+
},
|
|
510
|
+
{
|
|
511
|
+
if: { hover: true, selected: true },
|
|
512
|
+
tokens: { backgroundColor: '#7c53a5', iconBackground: '#4b286d' }
|
|
513
|
+
},
|
|
514
|
+
{
|
|
515
|
+
if: { pressed: true, selected: true },
|
|
516
|
+
tokens: { backgroundColor: '#3f2a54', iconBackground: '#7c53a5' }
|
|
517
|
+
},
|
|
518
|
+
{
|
|
519
|
+
if: { focus: true, selected: true },
|
|
520
|
+
tokens: { outerBorderColor: '#4b286d' }
|
|
521
|
+
},
|
|
522
|
+
{
|
|
523
|
+
if: { focus: true, pressed: true, selected: true },
|
|
524
|
+
tokens: { iconBackground: '#7c53a5', outerBorderColor: '#3f2a54' }
|
|
525
|
+
},
|
|
526
|
+
{
|
|
527
|
+
if: { inactive: true },
|
|
528
|
+
tokens: {
|
|
529
|
+
backgroundColor: '#b2b9bf',
|
|
530
|
+
borderWidth: 0,
|
|
531
|
+
color: '#ffffff'
|
|
532
|
+
}
|
|
533
|
+
}
|
|
534
|
+
],
|
|
535
|
+
tokens: {
|
|
536
|
+
alignSelf: 'flex-start',
|
|
537
|
+
backgroundColor: '#ffffff',
|
|
538
|
+
borderColor: '#b2b9bf',
|
|
539
|
+
borderRadius: 32,
|
|
540
|
+
borderWidth: 1,
|
|
541
|
+
color: '#676e73',
|
|
542
|
+
fontName: 'HelveticaNow',
|
|
543
|
+
fontSize: 14,
|
|
544
|
+
fontWeight: '700',
|
|
545
|
+
icon: PaletteIconCaretDown,
|
|
546
|
+
iconAlignSelf: 'center',
|
|
547
|
+
iconBackground: '#f4f4f7',
|
|
548
|
+
iconBorderRadius: 32,
|
|
549
|
+
iconColor: '#2c2e30',
|
|
550
|
+
iconPadding: 2,
|
|
551
|
+
iconPosition: 'right',
|
|
552
|
+
iconSize: 16,
|
|
553
|
+
iconSpace: 2,
|
|
554
|
+
iconTranslateX: 0,
|
|
555
|
+
iconTranslateY: 0,
|
|
556
|
+
lineHeight: 1.42857142857,
|
|
557
|
+
minWidth: 0,
|
|
558
|
+
opacity: 1,
|
|
559
|
+
outerBackgroundColor: 'rgba(0, 0, 0, 0)',
|
|
560
|
+
outerBorderColor: 'rgba(0, 0, 0, 0)',
|
|
561
|
+
outerBorderGap: 2,
|
|
562
|
+
outerBorderWidth: 2,
|
|
563
|
+
paddingBottom: 8,
|
|
564
|
+
paddingLeft: 16,
|
|
565
|
+
paddingRight: 8,
|
|
566
|
+
paddingTop: 8,
|
|
567
|
+
shadow: null,
|
|
568
|
+
textAlign: 'center',
|
|
257
569
|
width: null
|
|
258
570
|
}
|
|
259
571
|
},
|
|
@@ -280,11 +592,13 @@ module.exports = {
|
|
|
280
592
|
appearances: {
|
|
281
593
|
focus: {
|
|
282
594
|
description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
|
|
595
|
+
platforms: [ 'rn' ],
|
|
283
596
|
type: 'state',
|
|
284
597
|
values: [ true ]
|
|
285
598
|
},
|
|
286
599
|
hover: {
|
|
287
600
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
601
|
+
platforms: [ 'rn' ],
|
|
288
602
|
type: 'state',
|
|
289
603
|
values: [ true ]
|
|
290
604
|
},
|
|
@@ -509,6 +823,7 @@ module.exports = {
|
|
|
509
823
|
}
|
|
510
824
|
],
|
|
511
825
|
tokens: {
|
|
826
|
+
backgroundColor: 'rgba(0, 0, 0, 0)',
|
|
512
827
|
nextIcon: PaletteIconArrowRight,
|
|
513
828
|
previousIcon: PaletteIconArrowLeft,
|
|
514
829
|
showPanelNavigation: true,
|
|
@@ -531,11 +846,13 @@ module.exports = {
|
|
|
531
846
|
appearances: {
|
|
532
847
|
focus: {
|
|
533
848
|
description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
|
|
849
|
+
platforms: [ 'rn' ],
|
|
534
850
|
type: 'state',
|
|
535
851
|
values: [ true ]
|
|
536
852
|
},
|
|
537
853
|
hover: {
|
|
538
854
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
855
|
+
platforms: [ 'rn' ],
|
|
539
856
|
type: 'state',
|
|
540
857
|
values: [ true ]
|
|
541
858
|
},
|
|
@@ -544,6 +861,7 @@ module.exports = {
|
|
|
544
861
|
type: 'state',
|
|
545
862
|
values: [ true ]
|
|
546
863
|
},
|
|
864
|
+
inverse: { type: 'variant', values: [ true ] },
|
|
547
865
|
pressed: {
|
|
548
866
|
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.',
|
|
549
867
|
type: 'state',
|
|
@@ -601,6 +919,27 @@ module.exports = {
|
|
|
601
919
|
fontName: 'HelveticaNow',
|
|
602
920
|
fontWeight: '400'
|
|
603
921
|
}
|
|
922
|
+
},
|
|
923
|
+
{ if: { inverse: true }, tokens: { color: '#ffffff' } },
|
|
924
|
+
{
|
|
925
|
+
if: { hover: true, inverse: true },
|
|
926
|
+
tokens: { borderBottomColor: '#66cc00', color: '#66cc00' }
|
|
927
|
+
},
|
|
928
|
+
{
|
|
929
|
+
if: { inverse: true, pressed: true },
|
|
930
|
+
tokens: { borderBottomColor: '#676e73', color: '#676e73' }
|
|
931
|
+
},
|
|
932
|
+
{
|
|
933
|
+
if: { focus: true, inverse: true },
|
|
934
|
+
tokens: { borderBottomColor: '#66cc00', color: '#66cc00' }
|
|
935
|
+
},
|
|
936
|
+
{
|
|
937
|
+
if: { focus: true, inverse: true, pressed: true },
|
|
938
|
+
tokens: { borderBottomColor: '#676e73', color: '#676e73' }
|
|
939
|
+
},
|
|
940
|
+
{
|
|
941
|
+
if: { inverse: true, selected: true },
|
|
942
|
+
tokens: { borderBottomColor: '#bfe797', color: '#66cc00' }
|
|
604
943
|
}
|
|
605
944
|
],
|
|
606
945
|
tokens: {
|
|
@@ -633,11 +972,13 @@ module.exports = {
|
|
|
633
972
|
error: { type: 'state', values: [ true ] },
|
|
634
973
|
focus: {
|
|
635
974
|
description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
|
|
975
|
+
platforms: [ 'rn' ],
|
|
636
976
|
type: 'state',
|
|
637
977
|
values: [ true ]
|
|
638
978
|
},
|
|
639
979
|
hover: {
|
|
640
980
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
981
|
+
platforms: [ 'rn' ],
|
|
641
982
|
type: 'state',
|
|
642
983
|
values: [ true ]
|
|
643
984
|
},
|
|
@@ -665,6 +1006,10 @@ module.exports = {
|
|
|
665
1006
|
inputBorderColor: 'rgba(0, 0, 0, 0)',
|
|
666
1007
|
labelColor: '#676e73'
|
|
667
1008
|
}
|
|
1009
|
+
},
|
|
1010
|
+
{
|
|
1011
|
+
if: { hover: true },
|
|
1012
|
+
tokens: { inputOutlineColor: '#e3e6e8', inputOutlineWidth: 2 }
|
|
668
1013
|
}
|
|
669
1014
|
],
|
|
670
1015
|
tokens: {
|
|
@@ -698,6 +1043,7 @@ module.exports = {
|
|
|
698
1043
|
appearances: {
|
|
699
1044
|
hover: {
|
|
700
1045
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
1046
|
+
platforms: [ 'rn' ],
|
|
701
1047
|
type: 'state',
|
|
702
1048
|
values: [ true ]
|
|
703
1049
|
},
|
|
@@ -846,11 +1192,13 @@ module.exports = {
|
|
|
846
1192
|
appearances: {
|
|
847
1193
|
focus: {
|
|
848
1194
|
description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
|
|
1195
|
+
platforms: [ 'rn' ],
|
|
849
1196
|
type: 'state',
|
|
850
1197
|
values: [ true ]
|
|
851
1198
|
},
|
|
852
1199
|
hover: {
|
|
853
1200
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
1201
|
+
platforms: [ 'rn' ],
|
|
854
1202
|
type: 'state',
|
|
855
1203
|
values: [ true ]
|
|
856
1204
|
},
|
|
@@ -935,13 +1283,20 @@ module.exports = {
|
|
|
935
1283
|
},
|
|
936
1284
|
IconButton: {
|
|
937
1285
|
appearances: {
|
|
1286
|
+
compact: {
|
|
1287
|
+
description: 'Without the outer border gap',
|
|
1288
|
+
type: 'variant',
|
|
1289
|
+
values: [ true ]
|
|
1290
|
+
},
|
|
938
1291
|
focus: {
|
|
939
1292
|
description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
|
|
1293
|
+
platforms: [ 'rn' ],
|
|
940
1294
|
type: 'state',
|
|
941
1295
|
values: [ true ]
|
|
942
1296
|
},
|
|
943
1297
|
hover: {
|
|
944
1298
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
1299
|
+
platforms: [ 'rn' ],
|
|
945
1300
|
type: 'state',
|
|
946
1301
|
values: [ true ]
|
|
947
1302
|
},
|
|
@@ -1059,7 +1414,8 @@ module.exports = {
|
|
|
1059
1414
|
{
|
|
1060
1415
|
if: { focus: true, raised: true },
|
|
1061
1416
|
tokens: { borderColor: '#4b286d', borderWidth: 3 }
|
|
1062
|
-
}
|
|
1417
|
+
},
|
|
1418
|
+
{ if: { compact: true }, tokens: { outerBorderGap: 0 } }
|
|
1063
1419
|
],
|
|
1064
1420
|
tokens: {
|
|
1065
1421
|
backgroundColor: 'transparent',
|
|
@@ -1105,11 +1461,13 @@ module.exports = {
|
|
|
1105
1461
|
},
|
|
1106
1462
|
focus: {
|
|
1107
1463
|
description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
|
|
1464
|
+
platforms: [ 'rn' ],
|
|
1108
1465
|
type: 'state',
|
|
1109
1466
|
values: [ true ]
|
|
1110
1467
|
},
|
|
1111
1468
|
hover: {
|
|
1112
1469
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
1470
|
+
platforms: [ 'rn' ],
|
|
1113
1471
|
type: 'state',
|
|
1114
1472
|
values: [ true ]
|
|
1115
1473
|
},
|
|
@@ -1524,11 +1882,13 @@ module.exports = {
|
|
|
1524
1882
|
appearances: {
|
|
1525
1883
|
focus: {
|
|
1526
1884
|
description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
|
|
1885
|
+
platforms: [ 'rn' ],
|
|
1527
1886
|
type: 'state',
|
|
1528
1887
|
values: [ true ]
|
|
1529
1888
|
},
|
|
1530
1889
|
hover: {
|
|
1531
1890
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
1891
|
+
platforms: [ 'rn' ],
|
|
1532
1892
|
type: 'state',
|
|
1533
1893
|
values: [ true ]
|
|
1534
1894
|
},
|
|
@@ -1589,6 +1949,11 @@ module.exports = {
|
|
|
1589
1949
|
},
|
|
1590
1950
|
PaginationSideButton: {
|
|
1591
1951
|
appearances: {
|
|
1952
|
+
compact: {
|
|
1953
|
+
description: 'Determines if the "Next" and "Previous" labels should be omitted',
|
|
1954
|
+
type: 'state',
|
|
1955
|
+
values: [ true ]
|
|
1956
|
+
},
|
|
1592
1957
|
direction: {
|
|
1593
1958
|
description: "Determines which way does the button navigate in Pagination's context",
|
|
1594
1959
|
type: 'state',
|
|
@@ -1596,11 +1961,13 @@ module.exports = {
|
|
|
1596
1961
|
},
|
|
1597
1962
|
focus: {
|
|
1598
1963
|
description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
|
|
1964
|
+
platforms: [ 'rn' ],
|
|
1599
1965
|
type: 'state',
|
|
1600
1966
|
values: [ true ]
|
|
1601
1967
|
},
|
|
1602
1968
|
hover: {
|
|
1603
1969
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
1970
|
+
platforms: [ 'rn' ],
|
|
1604
1971
|
type: 'state',
|
|
1605
1972
|
values: [ true ]
|
|
1606
1973
|
},
|
|
@@ -1621,10 +1988,12 @@ module.exports = {
|
|
|
1621
1988
|
}
|
|
1622
1989
|
},
|
|
1623
1990
|
rules: [
|
|
1991
|
+
{ if: { compact: true }, tokens: { displayLabel: false } },
|
|
1624
1992
|
{
|
|
1625
1993
|
if: { viewport: [ 'xs', 'sm' ] },
|
|
1626
1994
|
tokens: {
|
|
1627
1995
|
borderRadius: 32,
|
|
1996
|
+
displayLabel: false,
|
|
1628
1997
|
paddingBottom: 4,
|
|
1629
1998
|
paddingTop: 4,
|
|
1630
1999
|
width: 32
|
|
@@ -1665,6 +2034,7 @@ module.exports = {
|
|
|
1665
2034
|
borderRadius: 4,
|
|
1666
2035
|
borderWidth: 1,
|
|
1667
2036
|
color: '#676e73',
|
|
2037
|
+
displayLabel: true,
|
|
1668
2038
|
fontName: 'HelveticaNow',
|
|
1669
2039
|
fontSize: 16,
|
|
1670
2040
|
fontWeight: '400',
|
|
@@ -1762,11 +2132,13 @@ module.exports = {
|
|
|
1762
2132
|
appearances: {
|
|
1763
2133
|
focus: {
|
|
1764
2134
|
description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
|
|
2135
|
+
platforms: [ 'rn' ],
|
|
1765
2136
|
type: 'state',
|
|
1766
2137
|
values: [ true ]
|
|
1767
2138
|
},
|
|
1768
2139
|
hover: {
|
|
1769
2140
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
2141
|
+
platforms: [ 'rn' ],
|
|
1770
2142
|
type: 'state',
|
|
1771
2143
|
values: [ true ]
|
|
1772
2144
|
},
|
|
@@ -1842,11 +2214,13 @@ module.exports = {
|
|
|
1842
2214
|
appearances: {
|
|
1843
2215
|
focus: {
|
|
1844
2216
|
description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
|
|
2217
|
+
platforms: [ 'rn' ],
|
|
1845
2218
|
type: 'state',
|
|
1846
2219
|
values: [ true ]
|
|
1847
2220
|
},
|
|
1848
2221
|
hover: {
|
|
1849
2222
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
2223
|
+
platforms: [ 'rn' ],
|
|
1850
2224
|
type: 'state',
|
|
1851
2225
|
values: [ true ]
|
|
1852
2226
|
},
|
|
@@ -1899,11 +2273,13 @@ module.exports = {
|
|
|
1899
2273
|
error: { type: 'state', values: [ true ] },
|
|
1900
2274
|
focus: {
|
|
1901
2275
|
description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
|
|
2276
|
+
platforms: [ 'rn' ],
|
|
1902
2277
|
type: 'state',
|
|
1903
2278
|
values: [ true ]
|
|
1904
2279
|
},
|
|
1905
2280
|
hover: {
|
|
1906
2281
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
2282
|
+
platforms: [ 'rn' ],
|
|
1907
2283
|
type: 'state',
|
|
1908
2284
|
values: [ true ]
|
|
1909
2285
|
},
|
|
@@ -1976,11 +2352,13 @@ module.exports = {
|
|
|
1976
2352
|
error: { type: 'state', values: [ true ] },
|
|
1977
2353
|
focus: {
|
|
1978
2354
|
description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
|
|
2355
|
+
platforms: [ 'rn' ],
|
|
1979
2356
|
type: 'state',
|
|
1980
2357
|
values: [ true ]
|
|
1981
2358
|
},
|
|
1982
2359
|
hover: {
|
|
1983
2360
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
2361
|
+
platforms: [ 'rn' ],
|
|
1984
2362
|
type: 'state',
|
|
1985
2363
|
values: [ true ]
|
|
1986
2364
|
},
|
|
@@ -2129,12 +2507,13 @@ module.exports = {
|
|
|
2129
2507
|
Search: {
|
|
2130
2508
|
appearances: {
|
|
2131
2509
|
focus: {
|
|
2132
|
-
description:
|
|
2510
|
+
description: 'Focus states for some input elements are well supported across web, RN, ios and android',
|
|
2133
2511
|
type: 'state',
|
|
2134
2512
|
values: [ true ]
|
|
2135
2513
|
},
|
|
2136
2514
|
hover: {
|
|
2137
2515
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
2516
|
+
platforms: [ 'rn' ],
|
|
2138
2517
|
type: 'state',
|
|
2139
2518
|
values: [ true ]
|
|
2140
2519
|
},
|
|
@@ -2189,11 +2568,13 @@ module.exports = {
|
|
|
2189
2568
|
appearances: {
|
|
2190
2569
|
focus: {
|
|
2191
2570
|
description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
|
|
2571
|
+
platforms: [ 'rn' ],
|
|
2192
2572
|
type: 'state',
|
|
2193
2573
|
values: [ true ]
|
|
2194
2574
|
},
|
|
2195
2575
|
hover: {
|
|
2196
2576
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
2577
|
+
platforms: [ 'rn' ],
|
|
2197
2578
|
type: 'state',
|
|
2198
2579
|
values: [ true ]
|
|
2199
2580
|
},
|
|
@@ -2266,12 +2647,13 @@ module.exports = {
|
|
|
2266
2647
|
Select: {
|
|
2267
2648
|
appearances: {
|
|
2268
2649
|
focus: {
|
|
2269
|
-
description:
|
|
2650
|
+
description: 'Focus states for some input elements are well supported across web, RN, ios and android',
|
|
2270
2651
|
type: 'state',
|
|
2271
2652
|
values: [ true ]
|
|
2272
2653
|
},
|
|
2273
2654
|
hover: {
|
|
2274
2655
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
2656
|
+
platforms: [ 'rn' ],
|
|
2275
2657
|
type: 'state',
|
|
2276
2658
|
values: [ true ]
|
|
2277
2659
|
},
|
|
@@ -2367,6 +2749,7 @@ module.exports = {
|
|
|
2367
2749
|
},
|
|
2368
2750
|
hover: {
|
|
2369
2751
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
2752
|
+
platforms: [ 'rn' ],
|
|
2370
2753
|
type: 'state',
|
|
2371
2754
|
values: [ true ]
|
|
2372
2755
|
},
|
|
@@ -2740,11 +3123,13 @@ module.exports = {
|
|
|
2740
3123
|
appearances: {
|
|
2741
3124
|
focus: {
|
|
2742
3125
|
description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
|
|
3126
|
+
platforms: [ 'rn' ],
|
|
2743
3127
|
type: 'state',
|
|
2744
3128
|
values: [ true ]
|
|
2745
3129
|
},
|
|
2746
3130
|
hover: {
|
|
2747
3131
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
3132
|
+
platforms: [ 'rn' ],
|
|
2748
3133
|
type: 'state',
|
|
2749
3134
|
values: [ true ]
|
|
2750
3135
|
},
|
|
@@ -2867,12 +3252,13 @@ module.exports = {
|
|
|
2867
3252
|
TextInput: {
|
|
2868
3253
|
appearances: {
|
|
2869
3254
|
focus: {
|
|
2870
|
-
description:
|
|
3255
|
+
description: 'Focus states for some input elements are well supported across web, RN, ios and android',
|
|
2871
3256
|
type: 'state',
|
|
2872
3257
|
values: [ true ]
|
|
2873
3258
|
},
|
|
2874
3259
|
hover: {
|
|
2875
3260
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
3261
|
+
platforms: [ 'rn' ],
|
|
2876
3262
|
type: 'state',
|
|
2877
3263
|
values: [ true ]
|
|
2878
3264
|
},
|
|
@@ -2925,6 +3311,10 @@ module.exports = {
|
|
|
2925
3311
|
borderColor: '#676e73',
|
|
2926
3312
|
borderRadius: 4,
|
|
2927
3313
|
borderWidth: 1,
|
|
3314
|
+
buttonSize: 32,
|
|
3315
|
+
buttonsGap: 1,
|
|
3316
|
+
buttonsPaddingRight: 8,
|
|
3317
|
+
clearButtonIcon: PaletteIconTimes,
|
|
2928
3318
|
color: '#414547',
|
|
2929
3319
|
fontName: 'HelveticaNow',
|
|
2930
3320
|
fontSize: 16,
|
|
@@ -2994,11 +3384,13 @@ module.exports = {
|
|
|
2994
3384
|
appearances: {
|
|
2995
3385
|
focus: {
|
|
2996
3386
|
description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
|
|
3387
|
+
platforms: [ 'rn' ],
|
|
2997
3388
|
type: 'state',
|
|
2998
3389
|
values: [ true ]
|
|
2999
3390
|
},
|
|
3000
3391
|
hover: {
|
|
3001
3392
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
3393
|
+
platforms: [ 'rn' ],
|
|
3002
3394
|
type: 'state',
|
|
3003
3395
|
values: [ true ]
|
|
3004
3396
|
},
|
|
@@ -3178,11 +3570,13 @@ module.exports = {
|
|
|
3178
3570
|
appearances: {
|
|
3179
3571
|
focus: {
|
|
3180
3572
|
description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
|
|
3573
|
+
platforms: [ 'rn' ],
|
|
3181
3574
|
type: 'state',
|
|
3182
3575
|
values: [ true ]
|
|
3183
3576
|
},
|
|
3184
3577
|
hover: {
|
|
3185
3578
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
3579
|
+
platforms: [ 'rn' ],
|
|
3186
3580
|
type: 'state',
|
|
3187
3581
|
values: [ true ]
|
|
3188
3582
|
},
|
|
@@ -3285,7 +3679,7 @@ module.exports = {
|
|
|
3285
3679
|
{ if: { size: 'eyebrow' }, tokens: { color: '#414547' } },
|
|
3286
3680
|
{
|
|
3287
3681
|
if: { colour: 'secondary', size: 'eyebrow' },
|
|
3288
|
-
tokens: { color: '#
|
|
3682
|
+
tokens: { color: '#7c53a5' }
|
|
3289
3683
|
},
|
|
3290
3684
|
{ if: { inverse: true }, tokens: { color: '#ffffff' } },
|
|
3291
3685
|
{
|
|
@@ -3557,5 +3951,5 @@ module.exports = {
|
|
|
3557
3951
|
tokens: { size: 96 }
|
|
3558
3952
|
}
|
|
3559
3953
|
},
|
|
3560
|
-
metadata: { name: 'theme-allium', themeTokensVersion: '2.
|
|
3954
|
+
metadata: { name: 'theme-allium', themeTokensVersion: '2.8.0' }
|
|
3561
3955
|
}
|