@telus-uds/theme-allium 0.0.2-prerelease.5 → 1.0.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/CHANGELOG.md +1946 -0
- package/README.md +3 -9
- package/build/schema.json +8279 -0
- package/build/theme.js +2994 -0
- package/package.json +12 -15
- package/theme.json +3731 -0
- package/lib/components/ActivityIndicator.js +0 -35
- package/lib/components/Box.js +0 -89
- package/lib/components/Button.js +0 -252
- package/lib/components/ButtonGroup.js +0 -34
- package/lib/components/ButtonGroupItem.js +0 -108
- package/lib/components/Card.js +0 -120
- package/lib/components/Checkbox.js +0 -80
- package/lib/components/ChevronLink.js +0 -39
- package/lib/components/Divider.js +0 -44
- package/lib/components/ExpandCollapse.js +0 -23
- package/lib/components/ExpandCollapseControl.js +0 -49
- package/lib/components/ExpandCollapsePanel.js +0 -25
- package/lib/components/Feedback.js +0 -89
- package/lib/components/Icon.js +0 -47
- package/lib/components/InputLabel.js +0 -33
- package/lib/components/InputSupports.js +0 -19
- package/lib/components/Link.js +0 -241
- package/lib/components/List.js +0 -86
- package/lib/components/Pagination.js +0 -40
- package/lib/components/PaginationPageButton.js +0 -82
- package/lib/components/PaginationSideButton.js +0 -113
- package/lib/components/Radio.js +0 -78
- package/lib/components/Select.js +0 -102
- package/lib/components/SideNav.js +0 -23
- package/lib/components/SideNavItem.js +0 -118
- package/lib/components/SideNavItemsGroup.js +0 -49
- package/lib/components/Skeleton.js +0 -26
- package/lib/components/StackView.js +0 -22
- package/lib/components/Tags.js +0 -34
- package/lib/components/TagsItem.js +0 -133
- package/lib/components/TextArea.js +0 -20
- package/lib/components/TextInput.js +0 -97
- package/lib/components/ToggleSwitch.js +0 -144
- package/lib/components/Tooltip.js +0 -48
- package/lib/components/TooltipButton.js +0 -86
- package/lib/components/Typography.js +0 -370
- package/lib/components/index.js +0 -303
- package/lib/components/spacingScale.js +0 -163
- package/lib/index.js +0 -30
- package/src/components/ActivityIndicator.js +0 -25
- package/src/components/Box.js +0 -35
- package/src/components/Button.js +0 -174
- package/src/components/ButtonGroup.js +0 -16
- package/src/components/ButtonGroupItem.js +0 -88
- package/src/components/Card.js +0 -99
- package/src/components/Checkbox.js +0 -65
- package/src/components/ChevronLink.js +0 -19
- package/src/components/Divider.js +0 -34
- package/src/components/ExpandCollapse.js +0 -12
- package/src/components/ExpandCollapseControl.js +0 -29
- package/src/components/ExpandCollapsePanel.js +0 -15
- package/src/components/Feedback.js +0 -75
- package/src/components/Icon.js +0 -35
- package/src/components/InputLabel.js +0 -29
- package/src/components/InputSupports.js +0 -9
- package/src/components/Link.js +0 -211
- package/src/components/List.js +0 -70
- package/src/components/Pagination.js +0 -30
- package/src/components/PaginationPageButton.js +0 -71
- package/src/components/PaginationSideButton.js +0 -99
- package/src/components/Radio.js +0 -64
- package/src/components/Select.js +0 -88
- package/src/components/SideNav.js +0 -12
- package/src/components/SideNavItem.js +0 -115
- package/src/components/SideNavItemsGroup.js +0 -34
- package/src/components/Skeleton.js +0 -16
- package/src/components/StackView.js +0 -12
- package/src/components/Tags.js +0 -16
- package/src/components/TagsItem.js +0 -118
- package/src/components/TextArea.js +0 -10
- package/src/components/TextInput.js +0 -83
- package/src/components/ToggleSwitch.js +0 -118
- package/src/components/Tooltip.js +0 -41
- package/src/components/TooltipButton.js +0 -68
- package/src/components/Typography.js +0 -355
- package/src/components/index.js +0 -37
- package/src/components/spacingScale.js +0 -36
- package/src/index.js +0 -17
package/lib/components/List.js
DELETED
|
@@ -1,86 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
|
|
8
|
-
var _paletteAllium = _interopRequireDefault(require("@telus-uds/palette-allium"));
|
|
9
|
-
|
|
10
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
-
|
|
12
|
-
var _default = {
|
|
13
|
-
appearances: {
|
|
14
|
-
size: {
|
|
15
|
-
description: 'Indicates list item text size.',
|
|
16
|
-
values: ['large', 'small'],
|
|
17
|
-
type: 'variant'
|
|
18
|
-
},
|
|
19
|
-
compact: {
|
|
20
|
-
description: 'When true it will reduce the line height of the list item.',
|
|
21
|
-
values: [true],
|
|
22
|
-
type: 'variant'
|
|
23
|
-
}
|
|
24
|
-
},
|
|
25
|
-
tokens: {
|
|
26
|
-
itemFontWeight: '400',
|
|
27
|
-
itemFontSize: _paletteAllium.default.fontSize.size16,
|
|
28
|
-
itemLineHeight: _paletteAllium.default.lineHeight.ratio3to2,
|
|
29
|
-
itemFontName: Object.keys(_paletteAllium.default.font)[0],
|
|
30
|
-
interItemMargin: _paletteAllium.default.size.size8,
|
|
31
|
-
interItemMarginWithDivider: _paletteAllium.default.size.size16,
|
|
32
|
-
dividerColor: _paletteAllium.default.color.greyCloud,
|
|
33
|
-
dividerSize: _paletteAllium.default.border.border1,
|
|
34
|
-
itemBulletContainerWidth: _paletteAllium.default.size.size16,
|
|
35
|
-
itemBulletContainerAlign: 'center',
|
|
36
|
-
itemBulletWidth: _paletteAllium.default.size.size4,
|
|
37
|
-
itemBulletHeight: _paletteAllium.default.size.size4,
|
|
38
|
-
itemBulletColor: _paletteAllium.default.color.purpleTelus,
|
|
39
|
-
itemIconSize: _paletteAllium.default.size.size16,
|
|
40
|
-
itemIconColor: _paletteAllium.default.color.purpleTelus,
|
|
41
|
-
listGutter: _paletteAllium.default.size.size12
|
|
42
|
-
},
|
|
43
|
-
rules: [{
|
|
44
|
-
if: {
|
|
45
|
-
size: 'large'
|
|
46
|
-
},
|
|
47
|
-
tokens: {
|
|
48
|
-
itemFontSize: _paletteAllium.default.fontSize.size20,
|
|
49
|
-
itemLineHeight: _paletteAllium.default.lineHeight.ratio8to5,
|
|
50
|
-
listGutter: _paletteAllium.default.size.size12
|
|
51
|
-
}
|
|
52
|
-
}, {
|
|
53
|
-
if: {
|
|
54
|
-
size: 'small'
|
|
55
|
-
},
|
|
56
|
-
tokens: {
|
|
57
|
-
itemFontSize: _paletteAllium.default.fontSize.size14,
|
|
58
|
-
itemLineHeight: _paletteAllium.default.lineHeight.ratio10to7,
|
|
59
|
-
listGutter: _paletteAllium.default.size.size12
|
|
60
|
-
}
|
|
61
|
-
}, {
|
|
62
|
-
if: {
|
|
63
|
-
compact: true
|
|
64
|
-
},
|
|
65
|
-
tokens: {
|
|
66
|
-
itemLineHeight: _paletteAllium.default.lineHeight.ratio5to4
|
|
67
|
-
}
|
|
68
|
-
}, {
|
|
69
|
-
if: {
|
|
70
|
-
compact: true,
|
|
71
|
-
size: 'small'
|
|
72
|
-
},
|
|
73
|
-
tokens: {
|
|
74
|
-
itemLineHeight: _paletteAllium.default.lineHeight.ratio8to7
|
|
75
|
-
}
|
|
76
|
-
}, {
|
|
77
|
-
if: {
|
|
78
|
-
compact: true,
|
|
79
|
-
size: 'large'
|
|
80
|
-
},
|
|
81
|
-
tokens: {
|
|
82
|
-
itemLineHeight: _paletteAllium.default.lineHeight.ratio6to5
|
|
83
|
-
}
|
|
84
|
-
}]
|
|
85
|
-
};
|
|
86
|
-
exports.default = _default;
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
|
|
8
|
-
var _paletteAllium = _interopRequireDefault(require("@telus-uds/palette-allium"));
|
|
9
|
-
|
|
10
|
-
var _rn = _interopRequireDefault(require("@telus-uds/system-themes/src/tokens/rn"));
|
|
11
|
-
|
|
12
|
-
var _schema = require("@telus-uds/system-themes/schema");
|
|
13
|
-
|
|
14
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
-
|
|
16
|
-
var _default = {
|
|
17
|
-
appearances: {
|
|
18
|
-
viewport: _schema.appearances.system.viewport
|
|
19
|
-
},
|
|
20
|
-
tokens: {
|
|
21
|
-
gap: _rn.default.integer[2],
|
|
22
|
-
truncateAbove: _rn.default.integer[4],
|
|
23
|
-
color: _paletteAllium.default.color.greyShuttle,
|
|
24
|
-
// TODO: replace with font token
|
|
25
|
-
fontName: Object.keys(_paletteAllium.default.font)[0],
|
|
26
|
-
fontWeight: '400',
|
|
27
|
-
// font: palette.font.HelveticaNow[400]
|
|
28
|
-
fontSize: _paletteAllium.default.fontSize.size16,
|
|
29
|
-
lineHeight: _paletteAllium.default.lineHeight.ratio3to2
|
|
30
|
-
},
|
|
31
|
-
rules: [{
|
|
32
|
-
if: {
|
|
33
|
-
viewport: ['md', 'lg', 'xl']
|
|
34
|
-
},
|
|
35
|
-
tokens: {
|
|
36
|
-
truncateAbove: _rn.default.integer[6]
|
|
37
|
-
}
|
|
38
|
-
}]
|
|
39
|
-
};
|
|
40
|
-
exports.default = _default;
|
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
|
|
8
|
-
var _paletteAllium = _interopRequireDefault(require("@telus-uds/palette-allium"));
|
|
9
|
-
|
|
10
|
-
var _rn = _interopRequireDefault(require("@telus-uds/system-themes/src/tokens/rn"));
|
|
11
|
-
|
|
12
|
-
var _schema = require("@telus-uds/system-themes/schema");
|
|
13
|
-
|
|
14
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
-
|
|
16
|
-
var _default = {
|
|
17
|
-
appearances: {
|
|
18
|
-
focus: _schema.appearances.PaginationPageButton.focus,
|
|
19
|
-
hover: _schema.appearances.PaginationPageButton.hover,
|
|
20
|
-
pressed: _schema.appearances.PaginationPageButton.pressed,
|
|
21
|
-
selected: _schema.appearances.PaginationPageButton.selected
|
|
22
|
-
},
|
|
23
|
-
tokens: {
|
|
24
|
-
borderColor: _paletteAllium.default.color.transparent,
|
|
25
|
-
borderWidth: _paletteAllium.default.border.border1,
|
|
26
|
-
borderRadius: _paletteAllium.default.radius.pill32,
|
|
27
|
-
backgroundColor: _paletteAllium.default.color.transparent,
|
|
28
|
-
paddingLeft: _paletteAllium.default.size.size8,
|
|
29
|
-
paddingRight: _paletteAllium.default.size.size8,
|
|
30
|
-
paddingTop: _paletteAllium.default.size.size4,
|
|
31
|
-
paddingBottom: _paletteAllium.default.size.size4,
|
|
32
|
-
width: _paletteAllium.default.size.size32,
|
|
33
|
-
// never visible - used only to increase the click area size
|
|
34
|
-
outerBorderColor: _paletteAllium.default.color.transparent,
|
|
35
|
-
outerBorderWidth: _paletteAllium.default.border.border4,
|
|
36
|
-
outerBorderGap: _paletteAllium.default.border.border4,
|
|
37
|
-
color: _paletteAllium.default.color.greyShuttle,
|
|
38
|
-
// TODO: replace this with font token
|
|
39
|
-
fontName: Object.keys(_paletteAllium.default.font)[0],
|
|
40
|
-
fontWeight: '400',
|
|
41
|
-
// font: palette.font.HelveticaNow[400]
|
|
42
|
-
fontSize: _paletteAllium.default.fontSize.size16,
|
|
43
|
-
lineHeight: _paletteAllium.default.lineHeight.ratio3to2,
|
|
44
|
-
textLine: _rn.default.textLine.underline,
|
|
45
|
-
textAlign: _rn.default.flexJustifyContent.center
|
|
46
|
-
},
|
|
47
|
-
rules: [{
|
|
48
|
-
if: {
|
|
49
|
-
hover: true
|
|
50
|
-
},
|
|
51
|
-
tokens: {
|
|
52
|
-
borderColor: _paletteAllium.default.color.greyShuttle,
|
|
53
|
-
textLine: _rn.default.textLine.none
|
|
54
|
-
}
|
|
55
|
-
}, {
|
|
56
|
-
if: {
|
|
57
|
-
focus: true
|
|
58
|
-
},
|
|
59
|
-
tokens: {
|
|
60
|
-
borderColor: _paletteAllium.default.color.greyShuttle,
|
|
61
|
-
borderWidth: _paletteAllium.default.border.border3
|
|
62
|
-
}
|
|
63
|
-
}, {
|
|
64
|
-
if: {
|
|
65
|
-
selected: true
|
|
66
|
-
},
|
|
67
|
-
tokens: {
|
|
68
|
-
backgroundColor: _paletteAllium.default.color.greyShuttle,
|
|
69
|
-
color: _paletteAllium.default.color.white,
|
|
70
|
-
textLine: _rn.default.textLine.none
|
|
71
|
-
}
|
|
72
|
-
}, {
|
|
73
|
-
if: {
|
|
74
|
-
pressed: true
|
|
75
|
-
},
|
|
76
|
-
tokens: {
|
|
77
|
-
backgroundColor: _paletteAllium.default.color.greyShuttle,
|
|
78
|
-
color: _paletteAllium.default.color.white
|
|
79
|
-
}
|
|
80
|
-
}]
|
|
81
|
-
};
|
|
82
|
-
exports.default = _default;
|
|
@@ -1,113 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
|
|
8
|
-
var _paletteAllium = _interopRequireDefault(require("@telus-uds/palette-allium"));
|
|
9
|
-
|
|
10
|
-
var _rn = _interopRequireDefault(require("@telus-uds/system-themes/src/tokens/rn"));
|
|
11
|
-
|
|
12
|
-
var _schema = require("@telus-uds/system-themes/schema");
|
|
13
|
-
|
|
14
|
-
var _arrowLeftIcon = _interopRequireDefault(require("@telus-uds/palette-allium/build/rn/icons/arrow-left.icon.svg"));
|
|
15
|
-
|
|
16
|
-
var _arrowRightIcon = _interopRequireDefault(require("@telus-uds/palette-allium/build/rn/icons/arrow-right.icon.svg"));
|
|
17
|
-
|
|
18
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
-
|
|
20
|
-
var _default = {
|
|
21
|
-
appearances: {
|
|
22
|
-
viewport: _schema.appearances.system.viewport,
|
|
23
|
-
focus: _schema.appearances.PaginationSideButton.focus,
|
|
24
|
-
hover: _schema.appearances.PaginationSideButton.hover,
|
|
25
|
-
pressed: _schema.appearances.PaginationSideButton.pressed,
|
|
26
|
-
selected: _schema.appearances.PaginationSideButton.selected,
|
|
27
|
-
direction: _schema.appearances.PaginationSideButton.direction
|
|
28
|
-
},
|
|
29
|
-
tokens: {
|
|
30
|
-
borderColor: _paletteAllium.default.color.transparent,
|
|
31
|
-
borderWidth: _paletteAllium.default.border.border1,
|
|
32
|
-
borderRadius: _paletteAllium.default.radius.radius4,
|
|
33
|
-
backgroundColor: _paletteAllium.default.color.transparent,
|
|
34
|
-
paddingLeft: _paletteAllium.default.size.size8,
|
|
35
|
-
paddingRight: _paletteAllium.default.size.size8,
|
|
36
|
-
paddingTop: _paletteAllium.default.size.size12,
|
|
37
|
-
paddingBottom: _paletteAllium.default.size.size12,
|
|
38
|
-
outerBorderColor: _paletteAllium.default.color.transparent,
|
|
39
|
-
color: _paletteAllium.default.color.greyShuttle,
|
|
40
|
-
// TODO replace with font token
|
|
41
|
-
fontName: Object.keys(_paletteAllium.default.font)[0],
|
|
42
|
-
fontWeight: '400',
|
|
43
|
-
// font: palette.font.HelveticaNow[400]
|
|
44
|
-
fontSize: _paletteAllium.default.fontSize.size16,
|
|
45
|
-
lineHeight: _paletteAllium.default.lineHeight.ratio3to2,
|
|
46
|
-
textLine: _rn.default.textLine.underline,
|
|
47
|
-
icon: _rn.default.icon.none,
|
|
48
|
-
iconSize: _paletteAllium.default.fontSize.size24,
|
|
49
|
-
iconDisplace: _paletteAllium.default.size.size0,
|
|
50
|
-
width: _rn.default.size.none,
|
|
51
|
-
textAlign: _rn.default.flexJustifyContent.center
|
|
52
|
-
},
|
|
53
|
-
rules: [{
|
|
54
|
-
if: {
|
|
55
|
-
viewport: ['xs', 'sm']
|
|
56
|
-
},
|
|
57
|
-
tokens: {
|
|
58
|
-
borderRadius: _paletteAllium.default.radius.pill32,
|
|
59
|
-
paddingTop: _paletteAllium.default.size.size4,
|
|
60
|
-
paddingBottom: _paletteAllium.default.size.size4,
|
|
61
|
-
width: _paletteAllium.default.size.size32
|
|
62
|
-
}
|
|
63
|
-
}, {
|
|
64
|
-
if: {
|
|
65
|
-
hover: true
|
|
66
|
-
},
|
|
67
|
-
tokens: {
|
|
68
|
-
borderColor: _paletteAllium.default.color.greyShuttle,
|
|
69
|
-
textLine: _rn.default.textLine.none,
|
|
70
|
-
iconDisplace: _paletteAllium.default.size.size4
|
|
71
|
-
}
|
|
72
|
-
}, {
|
|
73
|
-
if: {
|
|
74
|
-
focus: true
|
|
75
|
-
},
|
|
76
|
-
tokens: {
|
|
77
|
-
borderColor: _paletteAllium.default.color.greyShuttle,
|
|
78
|
-
borderWidth: _paletteAllium.default.border.border3
|
|
79
|
-
}
|
|
80
|
-
}, {
|
|
81
|
-
if: {
|
|
82
|
-
selected: true
|
|
83
|
-
},
|
|
84
|
-
tokens: {
|
|
85
|
-
backgroundColor: _paletteAllium.default.color.greyShuttle,
|
|
86
|
-
color: _paletteAllium.default.color.white,
|
|
87
|
-
textLine: _rn.default.textLine.none
|
|
88
|
-
}
|
|
89
|
-
}, {
|
|
90
|
-
if: {
|
|
91
|
-
pressed: true
|
|
92
|
-
},
|
|
93
|
-
tokens: {
|
|
94
|
-
backgroundColor: _paletteAllium.default.color.greyShuttle,
|
|
95
|
-
color: _paletteAllium.default.color.white
|
|
96
|
-
}
|
|
97
|
-
}, {
|
|
98
|
-
if: {
|
|
99
|
-
direction: 'previous'
|
|
100
|
-
},
|
|
101
|
-
tokens: {
|
|
102
|
-
icon: _arrowLeftIcon.default
|
|
103
|
-
}
|
|
104
|
-
}, {
|
|
105
|
-
if: {
|
|
106
|
-
direction: 'next'
|
|
107
|
-
},
|
|
108
|
-
tokens: {
|
|
109
|
-
icon: _arrowRightIcon.default
|
|
110
|
-
}
|
|
111
|
-
}]
|
|
112
|
-
};
|
|
113
|
-
exports.default = _default;
|
package/lib/components/Radio.js
DELETED
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
|
|
8
|
-
var _paletteAllium = _interopRequireDefault(require("@telus-uds/palette-allium"));
|
|
9
|
-
|
|
10
|
-
var _rn = _interopRequireDefault(require("@telus-uds/system-themes/src/tokens/rn"));
|
|
11
|
-
|
|
12
|
-
var _schema = require("@telus-uds/system-themes/schema");
|
|
13
|
-
|
|
14
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
-
|
|
16
|
-
var _default = {
|
|
17
|
-
appearances: {
|
|
18
|
-
checked: _schema.appearances.Radio.checked,
|
|
19
|
-
error: _schema.appearances.Radio.error,
|
|
20
|
-
focus: _schema.appearances.Radio.focus,
|
|
21
|
-
hover: _schema.appearances.Radio.hover,
|
|
22
|
-
inactive: _schema.appearances.Radio.inactive
|
|
23
|
-
},
|
|
24
|
-
tokens: {
|
|
25
|
-
checkedBackgroundColor: _paletteAllium.default.color.purpleDeluge,
|
|
26
|
-
checkedSize: _paletteAllium.default.size.size12,
|
|
27
|
-
containerBackgroundColor: _paletteAllium.default.color.transparent,
|
|
28
|
-
containerBorderRadius: _paletteAllium.default.radius.none,
|
|
29
|
-
containerMarginBottom: _paletteAllium.default.size.size8,
|
|
30
|
-
containerOpacity: _rn.default.opacity.opaque,
|
|
31
|
-
containerPaddingBottom: _paletteAllium.default.size.size0,
|
|
32
|
-
containerPaddingLeft: _paletteAllium.default.size.size0,
|
|
33
|
-
containerPaddingRight: _paletteAllium.default.size.size0,
|
|
34
|
-
containerPaddingTop: _paletteAllium.default.size.size0,
|
|
35
|
-
containerShadow: _rn.default.shadow.none,
|
|
36
|
-
descriptionFontSize: _paletteAllium.default.fontSize.size14,
|
|
37
|
-
descriptionLineHeight: _paletteAllium.default.lineHeight.ratio10to7,
|
|
38
|
-
descriptionMarginLeft: _rn.default.size.none,
|
|
39
|
-
inputBackgroundColor: _paletteAllium.default.color.white,
|
|
40
|
-
inputBorderColor: _paletteAllium.default.color.greyShuttle,
|
|
41
|
-
inputBorderWidth: _paletteAllium.default.border.border1,
|
|
42
|
-
inputOutlineColor: _paletteAllium.default.color.transparent,
|
|
43
|
-
inputOutlineWidth: _paletteAllium.default.border.none,
|
|
44
|
-
inputSize: _paletteAllium.default.size.size20,
|
|
45
|
-
labelColor: _paletteAllium.default.color.greyCharcoal,
|
|
46
|
-
labelFontName: Object.keys(_paletteAllium.default.font)[0],
|
|
47
|
-
labelFontSize: _paletteAllium.default.fontSize.size16,
|
|
48
|
-
labelFontWeight: '400',
|
|
49
|
-
labelLineHeight: _paletteAllium.default.lineHeight.ratio3to2,
|
|
50
|
-
labelMarginLeft: _paletteAllium.default.size.size10
|
|
51
|
-
},
|
|
52
|
-
rules: [{
|
|
53
|
-
if: {
|
|
54
|
-
error: true
|
|
55
|
-
},
|
|
56
|
-
tokens: {
|
|
57
|
-
inputBorderColor: _paletteAllium.default.color.red
|
|
58
|
-
}
|
|
59
|
-
}, {
|
|
60
|
-
if: {
|
|
61
|
-
focus: true
|
|
62
|
-
},
|
|
63
|
-
tokens: {
|
|
64
|
-
inputBorderColor: _paletteAllium.default.color.purpleDeluge,
|
|
65
|
-
inputBorderWidth: _paletteAllium.default.border.border3
|
|
66
|
-
}
|
|
67
|
-
}, {
|
|
68
|
-
if: {
|
|
69
|
-
inactive: true
|
|
70
|
-
},
|
|
71
|
-
tokens: {
|
|
72
|
-
inputBorderColor: _paletteAllium.default.color.transparent,
|
|
73
|
-
inputBackgroundColor: _paletteAllium.default.color.greyMystic,
|
|
74
|
-
labelColor: _paletteAllium.default.color.greyShuttle
|
|
75
|
-
}
|
|
76
|
-
}]
|
|
77
|
-
};
|
|
78
|
-
exports.default = _default;
|
package/lib/components/Select.js
DELETED
|
@@ -1,102 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
|
|
8
|
-
var _paletteAllium = _interopRequireDefault(require("@telus-uds/palette-allium"));
|
|
9
|
-
|
|
10
|
-
var _rn = _interopRequireDefault(require("@telus-uds/system-themes/src/tokens/rn"));
|
|
11
|
-
|
|
12
|
-
var _schema = require("@telus-uds/system-themes/schema");
|
|
13
|
-
|
|
14
|
-
var _notificationErrorIcon = _interopRequireDefault(require("@telus-uds/palette-allium/build/rn/icons/notification-error.icon.svg"));
|
|
15
|
-
|
|
16
|
-
var _notificationSuccessIcon = _interopRequireDefault(require("@telus-uds/palette-allium/build/rn/icons/notification-success.icon.svg"));
|
|
17
|
-
|
|
18
|
-
var _caretDownIcon = _interopRequireDefault(require("@telus-uds/palette-allium/build/rn/icons/caret-down.icon.svg"));
|
|
19
|
-
|
|
20
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
|
-
|
|
22
|
-
const Select = {
|
|
23
|
-
appearances: {
|
|
24
|
-
validation: _schema.appearances.Select.validation,
|
|
25
|
-
hover: _schema.appearances.Select.hover,
|
|
26
|
-
focus: _schema.appearances.Select.focus,
|
|
27
|
-
inactive: _schema.appearances.Select.inactive
|
|
28
|
-
},
|
|
29
|
-
tokens: {
|
|
30
|
-
backgroundColor: _paletteAllium.default.color.white,
|
|
31
|
-
color: _paletteAllium.default.color.greyCharcoal,
|
|
32
|
-
borderWidth: _paletteAllium.default.border.border1,
|
|
33
|
-
borderColor: _paletteAllium.default.color.greyShuttle,
|
|
34
|
-
borderRadius: _paletteAllium.default.radius.radius4,
|
|
35
|
-
paddingTop: _paletteAllium.default.size.size12,
|
|
36
|
-
paddingBottom: _paletteAllium.default.size.size12,
|
|
37
|
-
paddingLeft: _paletteAllium.default.size.size16,
|
|
38
|
-
paddingRight: _paletteAllium.default.size.size16,
|
|
39
|
-
height: _paletteAllium.default.size.size48,
|
|
40
|
-
outerBackgroundColor: _paletteAllium.default.color.transparent,
|
|
41
|
-
outerBorderWidth: _paletteAllium.default.border.border2,
|
|
42
|
-
outerBorderColor: _paletteAllium.default.color.transparent,
|
|
43
|
-
outerBorderRadius: _paletteAllium.default.radius.radius4,
|
|
44
|
-
fontSize: _paletteAllium.default.fontSize.size16,
|
|
45
|
-
// TODO replace with font token
|
|
46
|
-
fontName: Object.keys(_paletteAllium.default.font)[0],
|
|
47
|
-
fontWeight: '400',
|
|
48
|
-
icon: _caretDownIcon.default,
|
|
49
|
-
iconSize: _paletteAllium.default.fontSize.size24,
|
|
50
|
-
iconColor: _paletteAllium.default.color.greenAccessible,
|
|
51
|
-
validationIcon: _rn.default.icon.none,
|
|
52
|
-
validationIconSize: _paletteAllium.default.fontSize.size24,
|
|
53
|
-
validationIconColor: _paletteAllium.default.color.transparent
|
|
54
|
-
},
|
|
55
|
-
rules: [{
|
|
56
|
-
if: {
|
|
57
|
-
hover: true,
|
|
58
|
-
inactive: null
|
|
59
|
-
},
|
|
60
|
-
tokens: {
|
|
61
|
-
outerBorderColor: _paletteAllium.default.color.greyMystic,
|
|
62
|
-
outerBackgroundColor: _paletteAllium.default.color.greyMystic
|
|
63
|
-
}
|
|
64
|
-
}, {
|
|
65
|
-
if: {
|
|
66
|
-
validation: 'success'
|
|
67
|
-
},
|
|
68
|
-
tokens: {
|
|
69
|
-
borderColor: _paletteAllium.default.color.greenAccessible,
|
|
70
|
-
validationIcon: _notificationSuccessIcon.default,
|
|
71
|
-
validationIconColor: _paletteAllium.default.color.greenAccessible
|
|
72
|
-
}
|
|
73
|
-
}, {
|
|
74
|
-
if: {
|
|
75
|
-
validation: 'error'
|
|
76
|
-
},
|
|
77
|
-
tokens: {
|
|
78
|
-
borderColor: _paletteAllium.default.color.red,
|
|
79
|
-
validationIcon: _notificationErrorIcon.default,
|
|
80
|
-
validationIconColor: _paletteAllium.default.color.red
|
|
81
|
-
}
|
|
82
|
-
}, {
|
|
83
|
-
if: {
|
|
84
|
-
focus: true
|
|
85
|
-
},
|
|
86
|
-
tokens: {
|
|
87
|
-
borderColor: _paletteAllium.default.color.purpleDeluge,
|
|
88
|
-
borderWidth: _paletteAllium.default.border.border3,
|
|
89
|
-
validationIcon: _rn.default.icon.none
|
|
90
|
-
}
|
|
91
|
-
}, {
|
|
92
|
-
if: {
|
|
93
|
-
inactive: true
|
|
94
|
-
},
|
|
95
|
-
tokens: {
|
|
96
|
-
backgroundColor: _paletteAllium.default.color.greyAthens,
|
|
97
|
-
borderColor: _paletteAllium.default.color.greyAthens
|
|
98
|
-
}
|
|
99
|
-
}]
|
|
100
|
-
};
|
|
101
|
-
var _default = Select;
|
|
102
|
-
exports.default = _default;
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
|
|
8
|
-
var _paletteAllium = _interopRequireDefault(require("@telus-uds/palette-allium"));
|
|
9
|
-
|
|
10
|
-
var _rn = _interopRequireDefault(require("@telus-uds/system-themes/src/tokens/rn"));
|
|
11
|
-
|
|
12
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
-
|
|
14
|
-
var _default = {
|
|
15
|
-
appearances: {},
|
|
16
|
-
tokens: {
|
|
17
|
-
borderColor: _paletteAllium.default.color.greyCloud,
|
|
18
|
-
borderWidth: _paletteAllium.default.border.border1,
|
|
19
|
-
borderStyle: _rn.default.borderStyle.solid
|
|
20
|
-
},
|
|
21
|
-
rules: []
|
|
22
|
-
};
|
|
23
|
-
exports.default = _default;
|
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
|
|
8
|
-
var _paletteAllium = _interopRequireDefault(require("@telus-uds/palette-allium"));
|
|
9
|
-
|
|
10
|
-
var _rn = _interopRequireDefault(require("@telus-uds/system-themes/src/tokens/rn"));
|
|
11
|
-
|
|
12
|
-
var _schema = require("@telus-uds/system-themes/schema");
|
|
13
|
-
|
|
14
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
-
|
|
16
|
-
var _default = {
|
|
17
|
-
appearances: {
|
|
18
|
-
active: _schema.appearances.SideNavItem.active,
|
|
19
|
-
type: _schema.appearances.SideNavItem.type,
|
|
20
|
-
expanded: _schema.appearances.SideNavItem.expanded,
|
|
21
|
-
hover: _schema.appearances.SideNavItem.hover
|
|
22
|
-
},
|
|
23
|
-
tokens: {
|
|
24
|
-
borderColor: _paletteAllium.default.color.greyCloud,
|
|
25
|
-
borderWidth: _paletteAllium.default.border.border1,
|
|
26
|
-
borderStyle: _rn.default.borderStyle.solid,
|
|
27
|
-
paddingLeft: _paletteAllium.default.size.size16,
|
|
28
|
-
paddingRight: _paletteAllium.default.size.size16,
|
|
29
|
-
paddingTop: _paletteAllium.default.size.size16,
|
|
30
|
-
paddingBottom: _paletteAllium.default.size.size16,
|
|
31
|
-
justifyContent: _rn.default.flexJustifyContent.spaceBetween,
|
|
32
|
-
color: _paletteAllium.default.color.greyCharcoal,
|
|
33
|
-
accentOffset: _rn.default.size.zero,
|
|
34
|
-
accentPadding: _rn.default.size.zero,
|
|
35
|
-
accentWidth: _paletteAllium.default.size.size4,
|
|
36
|
-
accentBackgroundColor: _paletteAllium.default.color.transparent,
|
|
37
|
-
fontSize: _paletteAllium.default.fontSize.size16,
|
|
38
|
-
fontWeight: '400',
|
|
39
|
-
lineHeight: _paletteAllium.default.lineHeight.ratio3to2,
|
|
40
|
-
backgroundColor: _paletteAllium.default.color.transparent
|
|
41
|
-
},
|
|
42
|
-
rules: [{
|
|
43
|
-
if: {
|
|
44
|
-
active: true
|
|
45
|
-
},
|
|
46
|
-
tokens: {
|
|
47
|
-
paddingLeft: _paletteAllium.default.size.size12,
|
|
48
|
-
accentBackgroundColor: _paletteAllium.default.color.purpleTelus,
|
|
49
|
-
color: _paletteAllium.default.color.purpleTelus,
|
|
50
|
-
// TODO: replace with font token
|
|
51
|
-
fontWeight: '700' // font: palette.font.HelveticaNow[700]
|
|
52
|
-
|
|
53
|
-
}
|
|
54
|
-
}, {
|
|
55
|
-
if: {
|
|
56
|
-
type: 'child'
|
|
57
|
-
},
|
|
58
|
-
tokens: {
|
|
59
|
-
paddingLeft: _paletteAllium.default.size.size36,
|
|
60
|
-
borderWidth: _paletteAllium.default.border.none,
|
|
61
|
-
accentBackgroundColor: _paletteAllium.default.color.greyAthens,
|
|
62
|
-
accentOffset: _paletteAllium.default.size.size16,
|
|
63
|
-
fontSize: _paletteAllium.default.fontSize.size14,
|
|
64
|
-
lineHeight: _paletteAllium.default.lineHeight.ratio7to5
|
|
65
|
-
}
|
|
66
|
-
}, {
|
|
67
|
-
if: {
|
|
68
|
-
type: 'parent',
|
|
69
|
-
active: true
|
|
70
|
-
},
|
|
71
|
-
tokens: {
|
|
72
|
-
paddingLeft: _paletteAllium.default.size.size12
|
|
73
|
-
}
|
|
74
|
-
}, {
|
|
75
|
-
if: {
|
|
76
|
-
type: 'parent',
|
|
77
|
-
active: true,
|
|
78
|
-
expanded: true
|
|
79
|
-
},
|
|
80
|
-
tokens: {
|
|
81
|
-
paddingLeft: _paletteAllium.default.size.size16,
|
|
82
|
-
accentBackgroundColor: _paletteAllium.default.color.transparent,
|
|
83
|
-
color: _paletteAllium.default.color.greyCharcoal
|
|
84
|
-
}
|
|
85
|
-
}, {
|
|
86
|
-
if: {
|
|
87
|
-
hover: true
|
|
88
|
-
},
|
|
89
|
-
tokens: {
|
|
90
|
-
backgroundColor: _paletteAllium.default.color.greyAthens,
|
|
91
|
-
color: _paletteAllium.default.color.purpleTelus
|
|
92
|
-
}
|
|
93
|
-
}, {
|
|
94
|
-
if: {
|
|
95
|
-
type: 'child',
|
|
96
|
-
active: true
|
|
97
|
-
},
|
|
98
|
-
tokens: {
|
|
99
|
-
backgroundColor: _paletteAllium.default.color.greyAthens,
|
|
100
|
-
color: _paletteAllium.default.color.purpleTelus,
|
|
101
|
-
accentPadding: _paletteAllium.default.size.size16,
|
|
102
|
-
accentBackgroundColor: _paletteAllium.default.color.purpleTelus
|
|
103
|
-
}
|
|
104
|
-
}, {
|
|
105
|
-
if: {
|
|
106
|
-
type: 'child',
|
|
107
|
-
active: false,
|
|
108
|
-
hover: true
|
|
109
|
-
},
|
|
110
|
-
tokens: {
|
|
111
|
-
accentBackgroundColor: _paletteAllium.default.color.white,
|
|
112
|
-
color: _paletteAllium.default.color.greyCharcoal,
|
|
113
|
-
accentOffset: _rn.default.size.zero,
|
|
114
|
-
accentWidth: _paletteAllium.default.size.size16
|
|
115
|
-
}
|
|
116
|
-
}]
|
|
117
|
-
};
|
|
118
|
-
exports.default = _default;
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
|
|
8
|
-
var _paletteAllium = _interopRequireDefault(require("@telus-uds/palette-allium"));
|
|
9
|
-
|
|
10
|
-
var _rn = _interopRequireDefault(require("@telus-uds/system-themes/src/tokens/rn"));
|
|
11
|
-
|
|
12
|
-
var _schema = require("@telus-uds/system-themes/schema");
|
|
13
|
-
|
|
14
|
-
var _caretUpIcon = _interopRequireDefault(require("@telus-uds/palette-allium/build/rn/icons/caret-up.icon.svg"));
|
|
15
|
-
|
|
16
|
-
var _caretDownIcon = _interopRequireDefault(require("@telus-uds/palette-allium/build/rn/icons/caret-down.icon.svg"));
|
|
17
|
-
|
|
18
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
-
|
|
20
|
-
var _default = {
|
|
21
|
-
appearances: {
|
|
22
|
-
expanded: _schema.appearances.SideNavItemGroup.expanded
|
|
23
|
-
},
|
|
24
|
-
tokens: {
|
|
25
|
-
// animate slightly faster when closing
|
|
26
|
-
expandDuration: _paletteAllium.default.duration.duration300,
|
|
27
|
-
collapseDuration: _paletteAllium.default.duration.duration250,
|
|
28
|
-
contentPaddingLeft: _paletteAllium.default.size.size0,
|
|
29
|
-
contentPaddingRight: _paletteAllium.default.size.size0,
|
|
30
|
-
contentPaddingTop: _paletteAllium.default.size.size0,
|
|
31
|
-
contentPaddingBottom: _paletteAllium.default.size.size0,
|
|
32
|
-
icon: _caretDownIcon.default,
|
|
33
|
-
iconColor: _paletteAllium.default.color.purpleTelus,
|
|
34
|
-
iconGap: _paletteAllium.default.size.size8,
|
|
35
|
-
iconSize: _paletteAllium.default.size.size24,
|
|
36
|
-
iconPosition: _rn.default.position.right,
|
|
37
|
-
verticalAlign: _rn.default.verticalAlign.middle,
|
|
38
|
-
justifyContent: _rn.default.flexJustifyContent.spaceBetween
|
|
39
|
-
},
|
|
40
|
-
rules: [{
|
|
41
|
-
if: {
|
|
42
|
-
expanded: true
|
|
43
|
-
},
|
|
44
|
-
tokens: {
|
|
45
|
-
icon: _caretUpIcon.default
|
|
46
|
-
}
|
|
47
|
-
}]
|
|
48
|
-
};
|
|
49
|
-
exports.default = _default;
|