@telus-uds/theme-allium 3.9.0 → 3.10.1
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} +1145 -820
- package/build/android/theme.json +6771 -0
- package/build/ios/schema.json +11779 -0
- package/build/ios/theme.json +6771 -0
- package/build/rn/schema.json +11779 -0
- package/build/{theme.js → rn/theme.js} +279 -14
- package/package.json +6 -6
- package/theme.json +290 -2
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
/*
|
|
2
2
|
*
|
|
3
3
|
* Do not edit directly
|
|
4
|
-
* Generated on
|
|
4
|
+
* Generated on Wed, 23 Nov 2022 21:41:00 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
|
},
|
|
@@ -85,9 +87,65 @@ module.exports = {
|
|
|
85
87
|
{
|
|
86
88
|
if: { background: 'brand' },
|
|
87
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
|
+
}
|
|
88
146
|
}
|
|
89
147
|
],
|
|
90
|
-
tokens: { backgroundColor: null }
|
|
148
|
+
tokens: { backgroundColor: null, gradient: null }
|
|
91
149
|
},
|
|
92
150
|
Button: {
|
|
93
151
|
appearances: {
|
|
@@ -98,11 +156,13 @@ module.exports = {
|
|
|
98
156
|
},
|
|
99
157
|
focus: {
|
|
100
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' ],
|
|
101
160
|
type: 'state',
|
|
102
161
|
values: [ true ]
|
|
103
162
|
},
|
|
104
163
|
hover: {
|
|
105
164
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
165
|
+
platforms: [ 'rn' ],
|
|
106
166
|
type: 'state',
|
|
107
167
|
values: [ true ]
|
|
108
168
|
},
|
|
@@ -379,6 +439,136 @@ module.exports = {
|
|
|
379
439
|
width: null
|
|
380
440
|
}
|
|
381
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',
|
|
569
|
+
width: null
|
|
570
|
+
}
|
|
571
|
+
},
|
|
382
572
|
ButtonGroup: {
|
|
383
573
|
appearances: {
|
|
384
574
|
viewport: {
|
|
@@ -402,11 +592,13 @@ module.exports = {
|
|
|
402
592
|
appearances: {
|
|
403
593
|
focus: {
|
|
404
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' ],
|
|
405
596
|
type: 'state',
|
|
406
597
|
values: [ true ]
|
|
407
598
|
},
|
|
408
599
|
hover: {
|
|
409
600
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
601
|
+
platforms: [ 'rn' ],
|
|
410
602
|
type: 'state',
|
|
411
603
|
values: [ true ]
|
|
412
604
|
},
|
|
@@ -631,6 +823,7 @@ module.exports = {
|
|
|
631
823
|
}
|
|
632
824
|
],
|
|
633
825
|
tokens: {
|
|
826
|
+
backgroundColor: 'rgba(0, 0, 0, 0)',
|
|
634
827
|
nextIcon: PaletteIconArrowRight,
|
|
635
828
|
previousIcon: PaletteIconArrowLeft,
|
|
636
829
|
showPanelNavigation: true,
|
|
@@ -653,11 +846,13 @@ module.exports = {
|
|
|
653
846
|
appearances: {
|
|
654
847
|
focus: {
|
|
655
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' ],
|
|
656
850
|
type: 'state',
|
|
657
851
|
values: [ true ]
|
|
658
852
|
},
|
|
659
853
|
hover: {
|
|
660
854
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
855
|
+
platforms: [ 'rn' ],
|
|
661
856
|
type: 'state',
|
|
662
857
|
values: [ true ]
|
|
663
858
|
},
|
|
@@ -666,6 +861,7 @@ module.exports = {
|
|
|
666
861
|
type: 'state',
|
|
667
862
|
values: [ true ]
|
|
668
863
|
},
|
|
864
|
+
inverse: { type: 'variant', values: [ true ] },
|
|
669
865
|
pressed: {
|
|
670
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.',
|
|
671
867
|
type: 'state',
|
|
@@ -723,6 +919,27 @@ module.exports = {
|
|
|
723
919
|
fontName: 'HelveticaNow',
|
|
724
920
|
fontWeight: '400'
|
|
725
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' }
|
|
726
943
|
}
|
|
727
944
|
],
|
|
728
945
|
tokens: {
|
|
@@ -755,11 +972,13 @@ module.exports = {
|
|
|
755
972
|
error: { type: 'state', values: [ true ] },
|
|
756
973
|
focus: {
|
|
757
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' ],
|
|
758
976
|
type: 'state',
|
|
759
977
|
values: [ true ]
|
|
760
978
|
},
|
|
761
979
|
hover: {
|
|
762
980
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
981
|
+
platforms: [ 'rn' ],
|
|
763
982
|
type: 'state',
|
|
764
983
|
values: [ true ]
|
|
765
984
|
},
|
|
@@ -787,6 +1006,10 @@ module.exports = {
|
|
|
787
1006
|
inputBorderColor: 'rgba(0, 0, 0, 0)',
|
|
788
1007
|
labelColor: '#676e73'
|
|
789
1008
|
}
|
|
1009
|
+
},
|
|
1010
|
+
{
|
|
1011
|
+
if: { hover: true },
|
|
1012
|
+
tokens: { inputOutlineColor: '#e3e6e8', inputOutlineWidth: 2 }
|
|
790
1013
|
}
|
|
791
1014
|
],
|
|
792
1015
|
tokens: {
|
|
@@ -820,6 +1043,7 @@ module.exports = {
|
|
|
820
1043
|
appearances: {
|
|
821
1044
|
hover: {
|
|
822
1045
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
1046
|
+
platforms: [ 'rn' ],
|
|
823
1047
|
type: 'state',
|
|
824
1048
|
values: [ true ]
|
|
825
1049
|
},
|
|
@@ -968,11 +1192,13 @@ module.exports = {
|
|
|
968
1192
|
appearances: {
|
|
969
1193
|
focus: {
|
|
970
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' ],
|
|
971
1196
|
type: 'state',
|
|
972
1197
|
values: [ true ]
|
|
973
1198
|
},
|
|
974
1199
|
hover: {
|
|
975
1200
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
1201
|
+
platforms: [ 'rn' ],
|
|
976
1202
|
type: 'state',
|
|
977
1203
|
values: [ true ]
|
|
978
1204
|
},
|
|
@@ -1057,13 +1283,20 @@ module.exports = {
|
|
|
1057
1283
|
},
|
|
1058
1284
|
IconButton: {
|
|
1059
1285
|
appearances: {
|
|
1286
|
+
compact: {
|
|
1287
|
+
description: 'Without the outer border gap',
|
|
1288
|
+
type: 'variant',
|
|
1289
|
+
values: [ true ]
|
|
1290
|
+
},
|
|
1060
1291
|
focus: {
|
|
1061
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' ],
|
|
1062
1294
|
type: 'state',
|
|
1063
1295
|
values: [ true ]
|
|
1064
1296
|
},
|
|
1065
1297
|
hover: {
|
|
1066
1298
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
1299
|
+
platforms: [ 'rn' ],
|
|
1067
1300
|
type: 'state',
|
|
1068
1301
|
values: [ true ]
|
|
1069
1302
|
},
|
|
@@ -1181,7 +1414,8 @@ module.exports = {
|
|
|
1181
1414
|
{
|
|
1182
1415
|
if: { focus: true, raised: true },
|
|
1183
1416
|
tokens: { borderColor: '#4b286d', borderWidth: 3 }
|
|
1184
|
-
}
|
|
1417
|
+
},
|
|
1418
|
+
{ if: { compact: true }, tokens: { outerBorderGap: 0 } }
|
|
1185
1419
|
],
|
|
1186
1420
|
tokens: {
|
|
1187
1421
|
backgroundColor: 'transparent',
|
|
@@ -1227,11 +1461,13 @@ module.exports = {
|
|
|
1227
1461
|
},
|
|
1228
1462
|
focus: {
|
|
1229
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' ],
|
|
1230
1465
|
type: 'state',
|
|
1231
1466
|
values: [ true ]
|
|
1232
1467
|
},
|
|
1233
1468
|
hover: {
|
|
1234
1469
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
1470
|
+
platforms: [ 'rn' ],
|
|
1235
1471
|
type: 'state',
|
|
1236
1472
|
values: [ true ]
|
|
1237
1473
|
},
|
|
@@ -1646,11 +1882,13 @@ module.exports = {
|
|
|
1646
1882
|
appearances: {
|
|
1647
1883
|
focus: {
|
|
1648
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' ],
|
|
1649
1886
|
type: 'state',
|
|
1650
1887
|
values: [ true ]
|
|
1651
1888
|
},
|
|
1652
1889
|
hover: {
|
|
1653
1890
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
1891
|
+
platforms: [ 'rn' ],
|
|
1654
1892
|
type: 'state',
|
|
1655
1893
|
values: [ true ]
|
|
1656
1894
|
},
|
|
@@ -1723,11 +1961,13 @@ module.exports = {
|
|
|
1723
1961
|
},
|
|
1724
1962
|
focus: {
|
|
1725
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' ],
|
|
1726
1965
|
type: 'state',
|
|
1727
1966
|
values: [ true ]
|
|
1728
1967
|
},
|
|
1729
1968
|
hover: {
|
|
1730
1969
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
1970
|
+
platforms: [ 'rn' ],
|
|
1731
1971
|
type: 'state',
|
|
1732
1972
|
values: [ true ]
|
|
1733
1973
|
},
|
|
@@ -1892,11 +2132,13 @@ module.exports = {
|
|
|
1892
2132
|
appearances: {
|
|
1893
2133
|
focus: {
|
|
1894
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' ],
|
|
1895
2136
|
type: 'state',
|
|
1896
2137
|
values: [ true ]
|
|
1897
2138
|
},
|
|
1898
2139
|
hover: {
|
|
1899
2140
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
2141
|
+
platforms: [ 'rn' ],
|
|
1900
2142
|
type: 'state',
|
|
1901
2143
|
values: [ true ]
|
|
1902
2144
|
},
|
|
@@ -1972,11 +2214,13 @@ module.exports = {
|
|
|
1972
2214
|
appearances: {
|
|
1973
2215
|
focus: {
|
|
1974
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' ],
|
|
1975
2218
|
type: 'state',
|
|
1976
2219
|
values: [ true ]
|
|
1977
2220
|
},
|
|
1978
2221
|
hover: {
|
|
1979
2222
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
2223
|
+
platforms: [ 'rn' ],
|
|
1980
2224
|
type: 'state',
|
|
1981
2225
|
values: [ true ]
|
|
1982
2226
|
},
|
|
@@ -2029,11 +2273,13 @@ module.exports = {
|
|
|
2029
2273
|
error: { type: 'state', values: [ true ] },
|
|
2030
2274
|
focus: {
|
|
2031
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' ],
|
|
2032
2277
|
type: 'state',
|
|
2033
2278
|
values: [ true ]
|
|
2034
2279
|
},
|
|
2035
2280
|
hover: {
|
|
2036
2281
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
2282
|
+
platforms: [ 'rn' ],
|
|
2037
2283
|
type: 'state',
|
|
2038
2284
|
values: [ true ]
|
|
2039
2285
|
},
|
|
@@ -2106,11 +2352,13 @@ module.exports = {
|
|
|
2106
2352
|
error: { type: 'state', values: [ true ] },
|
|
2107
2353
|
focus: {
|
|
2108
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' ],
|
|
2109
2356
|
type: 'state',
|
|
2110
2357
|
values: [ true ]
|
|
2111
2358
|
},
|
|
2112
2359
|
hover: {
|
|
2113
2360
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
2361
|
+
platforms: [ 'rn' ],
|
|
2114
2362
|
type: 'state',
|
|
2115
2363
|
values: [ true ]
|
|
2116
2364
|
},
|
|
@@ -2259,12 +2507,13 @@ module.exports = {
|
|
|
2259
2507
|
Search: {
|
|
2260
2508
|
appearances: {
|
|
2261
2509
|
focus: {
|
|
2262
|
-
description:
|
|
2510
|
+
description: 'Focus states for some input elements are well supported across web, RN, ios and android',
|
|
2263
2511
|
type: 'state',
|
|
2264
2512
|
values: [ true ]
|
|
2265
2513
|
},
|
|
2266
2514
|
hover: {
|
|
2267
2515
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
2516
|
+
platforms: [ 'rn' ],
|
|
2268
2517
|
type: 'state',
|
|
2269
2518
|
values: [ true ]
|
|
2270
2519
|
},
|
|
@@ -2319,11 +2568,13 @@ module.exports = {
|
|
|
2319
2568
|
appearances: {
|
|
2320
2569
|
focus: {
|
|
2321
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' ],
|
|
2322
2572
|
type: 'state',
|
|
2323
2573
|
values: [ true ]
|
|
2324
2574
|
},
|
|
2325
2575
|
hover: {
|
|
2326
2576
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
2577
|
+
platforms: [ 'rn' ],
|
|
2327
2578
|
type: 'state',
|
|
2328
2579
|
values: [ true ]
|
|
2329
2580
|
},
|
|
@@ -2396,12 +2647,13 @@ module.exports = {
|
|
|
2396
2647
|
Select: {
|
|
2397
2648
|
appearances: {
|
|
2398
2649
|
focus: {
|
|
2399
|
-
description:
|
|
2650
|
+
description: 'Focus states for some input elements are well supported across web, RN, ios and android',
|
|
2400
2651
|
type: 'state',
|
|
2401
2652
|
values: [ true ]
|
|
2402
2653
|
},
|
|
2403
2654
|
hover: {
|
|
2404
2655
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
2656
|
+
platforms: [ 'rn' ],
|
|
2405
2657
|
type: 'state',
|
|
2406
2658
|
values: [ true ]
|
|
2407
2659
|
},
|
|
@@ -2497,6 +2749,7 @@ module.exports = {
|
|
|
2497
2749
|
},
|
|
2498
2750
|
hover: {
|
|
2499
2751
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
2752
|
+
platforms: [ 'rn' ],
|
|
2500
2753
|
type: 'state',
|
|
2501
2754
|
values: [ true ]
|
|
2502
2755
|
},
|
|
@@ -2870,11 +3123,13 @@ module.exports = {
|
|
|
2870
3123
|
appearances: {
|
|
2871
3124
|
focus: {
|
|
2872
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' ],
|
|
2873
3127
|
type: 'state',
|
|
2874
3128
|
values: [ true ]
|
|
2875
3129
|
},
|
|
2876
3130
|
hover: {
|
|
2877
3131
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
3132
|
+
platforms: [ 'rn' ],
|
|
2878
3133
|
type: 'state',
|
|
2879
3134
|
values: [ true ]
|
|
2880
3135
|
},
|
|
@@ -2997,12 +3252,13 @@ module.exports = {
|
|
|
2997
3252
|
TextInput: {
|
|
2998
3253
|
appearances: {
|
|
2999
3254
|
focus: {
|
|
3000
|
-
description:
|
|
3255
|
+
description: 'Focus states for some input elements are well supported across web, RN, ios and android',
|
|
3001
3256
|
type: 'state',
|
|
3002
3257
|
values: [ true ]
|
|
3003
3258
|
},
|
|
3004
3259
|
hover: {
|
|
3005
3260
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
3261
|
+
platforms: [ 'rn' ],
|
|
3006
3262
|
type: 'state',
|
|
3007
3263
|
values: [ true ]
|
|
3008
3264
|
},
|
|
@@ -3058,6 +3314,7 @@ module.exports = {
|
|
|
3058
3314
|
buttonSize: 32,
|
|
3059
3315
|
buttonsGap: 1,
|
|
3060
3316
|
buttonsPaddingRight: 8,
|
|
3317
|
+
clearButtonIcon: PaletteIconTimes,
|
|
3061
3318
|
color: '#414547',
|
|
3062
3319
|
fontName: 'HelveticaNow',
|
|
3063
3320
|
fontSize: 16,
|
|
@@ -3127,11 +3384,13 @@ module.exports = {
|
|
|
3127
3384
|
appearances: {
|
|
3128
3385
|
focus: {
|
|
3129
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' ],
|
|
3130
3388
|
type: 'state',
|
|
3131
3389
|
values: [ true ]
|
|
3132
3390
|
},
|
|
3133
3391
|
hover: {
|
|
3134
3392
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
3393
|
+
platforms: [ 'rn' ],
|
|
3135
3394
|
type: 'state',
|
|
3136
3395
|
values: [ true ]
|
|
3137
3396
|
},
|
|
@@ -3311,11 +3570,13 @@ module.exports = {
|
|
|
3311
3570
|
appearances: {
|
|
3312
3571
|
focus: {
|
|
3313
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' ],
|
|
3314
3574
|
type: 'state',
|
|
3315
3575
|
values: [ true ]
|
|
3316
3576
|
},
|
|
3317
3577
|
hover: {
|
|
3318
3578
|
description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
|
|
3579
|
+
platforms: [ 'rn' ],
|
|
3319
3580
|
type: 'state',
|
|
3320
3581
|
values: [ true ]
|
|
3321
3582
|
},
|
|
@@ -3575,6 +3836,10 @@ module.exports = {
|
|
|
3575
3836
|
if: { bold: true },
|
|
3576
3837
|
tokens: { fontName: 'HelveticaNow', fontWeight: '700' }
|
|
3577
3838
|
},
|
|
3839
|
+
{
|
|
3840
|
+
if: { bold: true, size: 'micro' },
|
|
3841
|
+
tokens: { fontName: 'HelveticaNow', fontWeight: '700' }
|
|
3842
|
+
},
|
|
3578
3843
|
{
|
|
3579
3844
|
if: { bold: true, size: 'display1' },
|
|
3580
3845
|
tokens: { fontName: 'HelveticaNow', fontWeight: '400' }
|
|
@@ -3690,5 +3955,5 @@ module.exports = {
|
|
|
3690
3955
|
tokens: { size: 96 }
|
|
3691
3956
|
}
|
|
3692
3957
|
},
|
|
3693
|
-
metadata: { name: 'theme-allium', themeTokensVersion: '2.
|
|
3958
|
+
metadata: { name: 'theme-allium', themeTokensVersion: '2.8.0' }
|
|
3694
3959
|
}
|
package/package.json
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@telus-uds/theme-allium",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.10.1",
|
|
4
4
|
"description": "Allium theme",
|
|
5
5
|
"author": "TELUS Digital",
|
|
6
6
|
"homepage": "https://github.com/telus/allium-design-system#readme",
|
|
7
7
|
"license": "UNLICENSED",
|
|
8
|
-
"main": "build/theme.js",
|
|
8
|
+
"main": "build/rn/theme.js",
|
|
9
9
|
"dependencies": {},
|
|
10
10
|
"devDependencies": {
|
|
11
|
-
"@telus-uds/palette-allium": "^2.8.
|
|
12
|
-
"@telus-uds/system-theme-tokens": "^2.
|
|
13
|
-
"@telus-uds/system-tokens": "^0.
|
|
11
|
+
"@telus-uds/palette-allium": "^2.8.2",
|
|
12
|
+
"@telus-uds/system-theme-tokens": "^2.8.0",
|
|
13
|
+
"@telus-uds/system-tokens": "^0.6.0"
|
|
14
14
|
},
|
|
15
15
|
"peerDependencies": {
|
|
16
|
-
"@telus-uds/palette-allium": "^2.8.
|
|
16
|
+
"@telus-uds/palette-allium": "^2.8.2"
|
|
17
17
|
},
|
|
18
18
|
"files": [
|
|
19
19
|
"build",
|