@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.
Files changed (84) hide show
  1. package/CHANGELOG.md +1946 -0
  2. package/README.md +3 -9
  3. package/build/schema.json +8279 -0
  4. package/build/theme.js +2994 -0
  5. package/package.json +12 -15
  6. package/theme.json +3731 -0
  7. package/lib/components/ActivityIndicator.js +0 -35
  8. package/lib/components/Box.js +0 -89
  9. package/lib/components/Button.js +0 -252
  10. package/lib/components/ButtonGroup.js +0 -34
  11. package/lib/components/ButtonGroupItem.js +0 -108
  12. package/lib/components/Card.js +0 -120
  13. package/lib/components/Checkbox.js +0 -80
  14. package/lib/components/ChevronLink.js +0 -39
  15. package/lib/components/Divider.js +0 -44
  16. package/lib/components/ExpandCollapse.js +0 -23
  17. package/lib/components/ExpandCollapseControl.js +0 -49
  18. package/lib/components/ExpandCollapsePanel.js +0 -25
  19. package/lib/components/Feedback.js +0 -89
  20. package/lib/components/Icon.js +0 -47
  21. package/lib/components/InputLabel.js +0 -33
  22. package/lib/components/InputSupports.js +0 -19
  23. package/lib/components/Link.js +0 -241
  24. package/lib/components/List.js +0 -86
  25. package/lib/components/Pagination.js +0 -40
  26. package/lib/components/PaginationPageButton.js +0 -82
  27. package/lib/components/PaginationSideButton.js +0 -113
  28. package/lib/components/Radio.js +0 -78
  29. package/lib/components/Select.js +0 -102
  30. package/lib/components/SideNav.js +0 -23
  31. package/lib/components/SideNavItem.js +0 -118
  32. package/lib/components/SideNavItemsGroup.js +0 -49
  33. package/lib/components/Skeleton.js +0 -26
  34. package/lib/components/StackView.js +0 -22
  35. package/lib/components/Tags.js +0 -34
  36. package/lib/components/TagsItem.js +0 -133
  37. package/lib/components/TextArea.js +0 -20
  38. package/lib/components/TextInput.js +0 -97
  39. package/lib/components/ToggleSwitch.js +0 -144
  40. package/lib/components/Tooltip.js +0 -48
  41. package/lib/components/TooltipButton.js +0 -86
  42. package/lib/components/Typography.js +0 -370
  43. package/lib/components/index.js +0 -303
  44. package/lib/components/spacingScale.js +0 -163
  45. package/lib/index.js +0 -30
  46. package/src/components/ActivityIndicator.js +0 -25
  47. package/src/components/Box.js +0 -35
  48. package/src/components/Button.js +0 -174
  49. package/src/components/ButtonGroup.js +0 -16
  50. package/src/components/ButtonGroupItem.js +0 -88
  51. package/src/components/Card.js +0 -99
  52. package/src/components/Checkbox.js +0 -65
  53. package/src/components/ChevronLink.js +0 -19
  54. package/src/components/Divider.js +0 -34
  55. package/src/components/ExpandCollapse.js +0 -12
  56. package/src/components/ExpandCollapseControl.js +0 -29
  57. package/src/components/ExpandCollapsePanel.js +0 -15
  58. package/src/components/Feedback.js +0 -75
  59. package/src/components/Icon.js +0 -35
  60. package/src/components/InputLabel.js +0 -29
  61. package/src/components/InputSupports.js +0 -9
  62. package/src/components/Link.js +0 -211
  63. package/src/components/List.js +0 -70
  64. package/src/components/Pagination.js +0 -30
  65. package/src/components/PaginationPageButton.js +0 -71
  66. package/src/components/PaginationSideButton.js +0 -99
  67. package/src/components/Radio.js +0 -64
  68. package/src/components/Select.js +0 -88
  69. package/src/components/SideNav.js +0 -12
  70. package/src/components/SideNavItem.js +0 -115
  71. package/src/components/SideNavItemsGroup.js +0 -34
  72. package/src/components/Skeleton.js +0 -16
  73. package/src/components/StackView.js +0 -12
  74. package/src/components/Tags.js +0 -16
  75. package/src/components/TagsItem.js +0 -118
  76. package/src/components/TextArea.js +0 -10
  77. package/src/components/TextInput.js +0 -83
  78. package/src/components/ToggleSwitch.js +0 -118
  79. package/src/components/Tooltip.js +0 -41
  80. package/src/components/TooltipButton.js +0 -68
  81. package/src/components/Typography.js +0 -355
  82. package/src/components/index.js +0 -37
  83. package/src/components/spacingScale.js +0 -36
  84. package/src/index.js +0 -17
@@ -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;
@@ -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;
@@ -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;