@spaced-out/ui-design-system 0.1.47 → 0.1.48-beta.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/.cspell/custom-words.txt +2 -0
- package/.github/workflows/publish_to_npm.yml +1 -1
- package/CHANGELOG.md +14 -0
- package/design-tokens/color/app-color.json +3 -0
- package/lib/components/Badge/Badge.js +6 -1
- package/lib/components/Badge/Badge.js.flow +10 -0
- package/lib/components/SubMenu/SubMenu.js +18 -156
- package/lib/components/SubMenu/SubMenu.js.flow +37 -239
- package/lib/components/SubMenu/SubMenu.module.css +131 -25
- package/lib/components/SubMenu/SubMenuGroup.js +108 -0
- package/lib/components/SubMenu/SubMenuGroup.js.flow +156 -0
- package/lib/components/SubMenu/SubMenuItem.js +121 -0
- package/lib/components/SubMenu/SubMenuItem.js.flow +170 -0
- package/lib/components/SubMenu/SubMenuLink.js +62 -0
- package/lib/components/SubMenu/SubMenuLink.js.flow +89 -0
- package/lib/components/SubMenu/index.js +41 -34
- package/lib/components/SubMenu/index.js.flow +4 -9
- package/lib/styles/index.css +2 -0
- package/lib/styles/index.js +5 -3
- package/lib/styles/index.js.flow +2 -0
- package/lib/styles/variables/_color.css +2 -0
- package/lib/styles/variables/_color.js +3 -1
- package/lib/styles/variables/_color.js.flow +2 -0
- package/package.json +1 -1
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
//@flow strict
|
|
2
|
+
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
|
|
5
|
+
import type {ColorTypes} from '../../types/typography';
|
|
6
|
+
import classify from '../../utils/classify';
|
|
7
|
+
import type {IconProps} from '../Icon';
|
|
8
|
+
import {Icon} from '../Icon';
|
|
9
|
+
import type {TextProps} from '../Text';
|
|
10
|
+
import {ButtonTextMedium, TEXT_COLORS} from '../Text';
|
|
11
|
+
import {Truncate} from '../Truncate';
|
|
12
|
+
|
|
13
|
+
import css from './SubMenu.module.css';
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
export const SubMenuItemIcon = ({
|
|
17
|
+
className,
|
|
18
|
+
...props
|
|
19
|
+
}: IconProps): React.Node => (
|
|
20
|
+
<Icon
|
|
21
|
+
{...props}
|
|
22
|
+
size="small"
|
|
23
|
+
color={TEXT_COLORS.inverseSecondary}
|
|
24
|
+
className={classify(css.menuIcon, className)}
|
|
25
|
+
/>
|
|
26
|
+
);
|
|
27
|
+
|
|
28
|
+
SubMenuItemIcon.displayName = 'SubMenuItemIcon';
|
|
29
|
+
|
|
30
|
+
export const SubMenuItemText = ({
|
|
31
|
+
children,
|
|
32
|
+
className,
|
|
33
|
+
...props
|
|
34
|
+
}: TextProps): React.Node => (
|
|
35
|
+
<ButtonTextMedium
|
|
36
|
+
{...props}
|
|
37
|
+
className={classify(css.subMenuItemText, className)}
|
|
38
|
+
color={TEXT_COLORS.inversePrimary}
|
|
39
|
+
>
|
|
40
|
+
<Truncate showFullTextOnHover={true}>{children}</Truncate>
|
|
41
|
+
</ButtonTextMedium>
|
|
42
|
+
);
|
|
43
|
+
SubMenuItemText.displayName = 'SubMenuItemText';
|
|
44
|
+
|
|
45
|
+
export type SubMenuItemBadgesProps = {
|
|
46
|
+
children?: React.Node,
|
|
47
|
+
className?: string,
|
|
48
|
+
...
|
|
49
|
+
};
|
|
50
|
+
export const SubMenuItemBadges = ({
|
|
51
|
+
children,
|
|
52
|
+
className,
|
|
53
|
+
...props
|
|
54
|
+
}: SubMenuItemBadgesProps): React.Node => (
|
|
55
|
+
<div {...props} className={classify(css.subMenuItemBadges, className)}>
|
|
56
|
+
{children}
|
|
57
|
+
</div>
|
|
58
|
+
);
|
|
59
|
+
SubMenuItemBadges.displayName = 'SubMenuItemBadges';
|
|
60
|
+
|
|
61
|
+
export type SubMenuItemActionProps = {
|
|
62
|
+
isMenuItemSelected?: boolean,
|
|
63
|
+
children?: React.Node,
|
|
64
|
+
color?: ColorTypes,
|
|
65
|
+
className?: string,
|
|
66
|
+
...
|
|
67
|
+
};
|
|
68
|
+
export const SubMenuItemAction: React$AbstractComponent<
|
|
69
|
+
SubMenuItemActionProps,
|
|
70
|
+
HTMLElement,
|
|
71
|
+
> = React.forwardRef(
|
|
72
|
+
(
|
|
73
|
+
{children, className, ...props}: SubMenuItemActionProps,
|
|
74
|
+
ref,
|
|
75
|
+
): React.Node => (
|
|
76
|
+
<div {...props} className={classify(css.actionItems, className)} ref={ref}>
|
|
77
|
+
{children}
|
|
78
|
+
</div>
|
|
79
|
+
),
|
|
80
|
+
);
|
|
81
|
+
SubMenuItemAction.displayName = 'SubMenuItemAction';
|
|
82
|
+
|
|
83
|
+
type ClassNames = $ReadOnly<{wrapper?: string}>;
|
|
84
|
+
|
|
85
|
+
export type SubMenuItemProps = {
|
|
86
|
+
classNames?: ClassNames,
|
|
87
|
+
children?: React.Node,
|
|
88
|
+
selectedMenuKey?: string,
|
|
89
|
+
disabled?: boolean,
|
|
90
|
+
onChange?: (selectedMenuKey: string) => mixed,
|
|
91
|
+
menuKey: string,
|
|
92
|
+
...
|
|
93
|
+
};
|
|
94
|
+
|
|
95
|
+
export const SubMenuItem: React$AbstractComponent<
|
|
96
|
+
SubMenuItemProps,
|
|
97
|
+
HTMLElement,
|
|
98
|
+
> = React.forwardRef(
|
|
99
|
+
(
|
|
100
|
+
{
|
|
101
|
+
children,
|
|
102
|
+
selectedMenuKey,
|
|
103
|
+
disabled,
|
|
104
|
+
classNames,
|
|
105
|
+
onChange,
|
|
106
|
+
menuKey,
|
|
107
|
+
...props
|
|
108
|
+
}: SubMenuItemProps,
|
|
109
|
+
ref,
|
|
110
|
+
): React.Node => {
|
|
111
|
+
const onChangeHandler = () => {
|
|
112
|
+
if (!disabled) {
|
|
113
|
+
onChange?.(menuKey);
|
|
114
|
+
}
|
|
115
|
+
};
|
|
116
|
+
|
|
117
|
+
const onKeyDownHandler = (e) => {
|
|
118
|
+
if (e.key === 'Enter') {
|
|
119
|
+
onChangeHandler();
|
|
120
|
+
}
|
|
121
|
+
};
|
|
122
|
+
|
|
123
|
+
const selected = selectedMenuKey === menuKey;
|
|
124
|
+
|
|
125
|
+
const getNamedComp = (comp: string) => {
|
|
126
|
+
const childrenArray = React.Children.toArray(children);
|
|
127
|
+
if (childrenArray.length) {
|
|
128
|
+
const nodes: React.Node[] = [];
|
|
129
|
+
for (const child of childrenArray) {
|
|
130
|
+
if (child?.type?.displayName === comp) {
|
|
131
|
+
nodes.push(
|
|
132
|
+
React.cloneElement(child, {
|
|
133
|
+
selected,
|
|
134
|
+
disabled,
|
|
135
|
+
}),
|
|
136
|
+
);
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
return nodes.length > 1 ? nodes : nodes[0];
|
|
140
|
+
}
|
|
141
|
+
return null;
|
|
142
|
+
};
|
|
143
|
+
|
|
144
|
+
return (
|
|
145
|
+
<div
|
|
146
|
+
{...props}
|
|
147
|
+
className={classify(
|
|
148
|
+
css.menuItem,
|
|
149
|
+
{
|
|
150
|
+
[css.selected]: selected,
|
|
151
|
+
[css.disabled]: disabled,
|
|
152
|
+
},
|
|
153
|
+
classNames?.wrapper,
|
|
154
|
+
)}
|
|
155
|
+
onKeyDown={onKeyDownHandler}
|
|
156
|
+
onClick={onChangeHandler}
|
|
157
|
+
tabIndex={disabled ? '-1' : 0}
|
|
158
|
+
disabled={disabled}
|
|
159
|
+
ref={ref}
|
|
160
|
+
>
|
|
161
|
+
<div className={css.menuIconName}>
|
|
162
|
+
{getNamedComp('SubMenuItemIcon')}
|
|
163
|
+
{getNamedComp('SubMenuItemText')}
|
|
164
|
+
{getNamedComp('SubMenuItemBadges')}
|
|
165
|
+
</div>
|
|
166
|
+
{getNamedComp('SubMenuItemAction')}
|
|
167
|
+
</div>
|
|
168
|
+
);
|
|
169
|
+
},
|
|
170
|
+
);
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.SubMenuLink = void 0;
|
|
7
|
+
var React = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _classify = _interopRequireDefault(require("../../utils/classify"));
|
|
9
|
+
var _Icon = require("../Icon");
|
|
10
|
+
var _Text = require("../Text");
|
|
11
|
+
var _Truncate = require("../Truncate");
|
|
12
|
+
var _SubMenuModule = _interopRequireDefault(require("./SubMenu.module.css"));
|
|
13
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
15
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
16
|
+
|
|
17
|
+
const SubMenuLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
18
|
+
let {
|
|
19
|
+
menuLinkTitle,
|
|
20
|
+
menuLinkIcon,
|
|
21
|
+
menuLinkIconSize = 'medium',
|
|
22
|
+
menuLinkIconType,
|
|
23
|
+
menuKey,
|
|
24
|
+
selectedMenuKey,
|
|
25
|
+
disabled = false,
|
|
26
|
+
onChange
|
|
27
|
+
} = _ref;
|
|
28
|
+
const isMenuLinkSelected = selectedMenuKey === menuKey;
|
|
29
|
+
const onChangeHandler = () => {
|
|
30
|
+
if (!disabled) {
|
|
31
|
+
onChange && onChange(menuKey);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
const onKeyDownHandler = e => {
|
|
35
|
+
if (e.key === 'Enter') {
|
|
36
|
+
onChangeHandler();
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
40
|
+
className: (0, _classify.default)(_SubMenuModule.default.subMenuLinkWrapper)
|
|
41
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
42
|
+
className: (0, _classify.default)(_SubMenuModule.default.subMenuLink, {
|
|
43
|
+
[_SubMenuModule.default.highlightedMenu]: isMenuLinkSelected
|
|
44
|
+
}),
|
|
45
|
+
onKeyDown: onKeyDownHandler,
|
|
46
|
+
onClick: onChangeHandler,
|
|
47
|
+
ref: ref,
|
|
48
|
+
tabIndex: disabled ? '-1' : 0
|
|
49
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
50
|
+
className: _SubMenuModule.default.groupTitleWrapper
|
|
51
|
+
}, !!menuLinkIcon && /*#__PURE__*/React.createElement(_Icon.Icon, {
|
|
52
|
+
color: _Text.TEXT_COLORS.inverseSecondary,
|
|
53
|
+
name: menuLinkIcon,
|
|
54
|
+
size: menuLinkIconSize,
|
|
55
|
+
type: menuLinkIconType,
|
|
56
|
+
className: _SubMenuModule.default.menuLinkIcon
|
|
57
|
+
}), /*#__PURE__*/React.createElement(_Text.ButtonTextMedium, {
|
|
58
|
+
color: _Text.TEXT_COLORS.inverseSecondary,
|
|
59
|
+
className: _SubMenuModule.default.menuLinkTitle
|
|
60
|
+
}, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, menuLinkTitle)))));
|
|
61
|
+
});
|
|
62
|
+
exports.SubMenuLink = SubMenuLink;
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
//@flow strict
|
|
2
|
+
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
|
|
5
|
+
import classify from '../../utils/classify';
|
|
6
|
+
import type {IconSize, IconType} from '../Icon';
|
|
7
|
+
import {Icon} from '../Icon';
|
|
8
|
+
import {ButtonTextMedium, TEXT_COLORS} from '../Text';
|
|
9
|
+
import {Truncate} from '../Truncate';
|
|
10
|
+
|
|
11
|
+
import css from './SubMenu.module.css';
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
export type SubMenuLinkProps = {
|
|
15
|
+
menuLinkTitle?: string,
|
|
16
|
+
menuLinkIcon: string,
|
|
17
|
+
menuLinkIconSize?: IconSize,
|
|
18
|
+
menuLinkIconType?: IconType,
|
|
19
|
+
menuKey: string,
|
|
20
|
+
selectedMenuKey?: string,
|
|
21
|
+
disabled?: boolean,
|
|
22
|
+
onChange?: (selectedMenuLinkKey: string) => mixed,
|
|
23
|
+
...
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
export const SubMenuLink: React$AbstractComponent<
|
|
27
|
+
SubMenuLinkProps,
|
|
28
|
+
HTMLElement,
|
|
29
|
+
> = React.forwardRef(
|
|
30
|
+
(
|
|
31
|
+
{
|
|
32
|
+
menuLinkTitle,
|
|
33
|
+
menuLinkIcon,
|
|
34
|
+
menuLinkIconSize = 'medium',
|
|
35
|
+
menuLinkIconType,
|
|
36
|
+
menuKey,
|
|
37
|
+
selectedMenuKey,
|
|
38
|
+
disabled = false,
|
|
39
|
+
onChange,
|
|
40
|
+
}: SubMenuLinkProps,
|
|
41
|
+
ref,
|
|
42
|
+
): React.Node => {
|
|
43
|
+
const isMenuLinkSelected = selectedMenuKey === menuKey;
|
|
44
|
+
|
|
45
|
+
const onChangeHandler = () => {
|
|
46
|
+
if (!disabled) {
|
|
47
|
+
onChange && onChange(menuKey);
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
const onKeyDownHandler = (e) => {
|
|
52
|
+
if (e.key === 'Enter') {
|
|
53
|
+
onChangeHandler();
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
return (
|
|
58
|
+
<div className={classify(css.subMenuLinkWrapper)}>
|
|
59
|
+
<div
|
|
60
|
+
className={classify(css.subMenuLink, {
|
|
61
|
+
[css.highlightedMenu]: isMenuLinkSelected,
|
|
62
|
+
})}
|
|
63
|
+
onKeyDown={onKeyDownHandler}
|
|
64
|
+
onClick={onChangeHandler}
|
|
65
|
+
ref={ref}
|
|
66
|
+
tabIndex={disabled ? '-1' : 0}
|
|
67
|
+
>
|
|
68
|
+
<div className={css.groupTitleWrapper}>
|
|
69
|
+
{!!menuLinkIcon && (
|
|
70
|
+
<Icon
|
|
71
|
+
color={TEXT_COLORS.inverseSecondary}
|
|
72
|
+
name={menuLinkIcon}
|
|
73
|
+
size={menuLinkIconSize}
|
|
74
|
+
type={menuLinkIconType}
|
|
75
|
+
className={css.menuLinkIcon}
|
|
76
|
+
/>
|
|
77
|
+
)}
|
|
78
|
+
<ButtonTextMedium
|
|
79
|
+
color={TEXT_COLORS.inverseSecondary}
|
|
80
|
+
className={css.menuLinkTitle}
|
|
81
|
+
>
|
|
82
|
+
<Truncate>{menuLinkTitle}</Truncate>
|
|
83
|
+
</ButtonTextMedium>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
);
|
|
88
|
+
},
|
|
89
|
+
);
|
|
@@ -3,40 +3,47 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
6
|
+
var _SubMenu = require("./SubMenu");
|
|
7
|
+
Object.keys(_SubMenu).forEach(function (key) {
|
|
8
|
+
if (key === "default" || key === "__esModule") return;
|
|
9
|
+
if (key in exports && exports[key] === _SubMenu[key]) return;
|
|
10
|
+
Object.defineProperty(exports, key, {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: function () {
|
|
13
|
+
return _SubMenu[key];
|
|
14
|
+
}
|
|
15
|
+
});
|
|
11
16
|
});
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
+
var _SubMenuGroup = require("./SubMenuGroup");
|
|
18
|
+
Object.keys(_SubMenuGroup).forEach(function (key) {
|
|
19
|
+
if (key === "default" || key === "__esModule") return;
|
|
20
|
+
if (key in exports && exports[key] === _SubMenuGroup[key]) return;
|
|
21
|
+
Object.defineProperty(exports, key, {
|
|
22
|
+
enumerable: true,
|
|
23
|
+
get: function () {
|
|
24
|
+
return _SubMenuGroup[key];
|
|
25
|
+
}
|
|
26
|
+
});
|
|
17
27
|
});
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
28
|
+
var _SubMenuItem = require("./SubMenuItem");
|
|
29
|
+
Object.keys(_SubMenuItem).forEach(function (key) {
|
|
30
|
+
if (key === "default" || key === "__esModule") return;
|
|
31
|
+
if (key in exports && exports[key] === _SubMenuItem[key]) return;
|
|
32
|
+
Object.defineProperty(exports, key, {
|
|
33
|
+
enumerable: true,
|
|
34
|
+
get: function () {
|
|
35
|
+
return _SubMenuItem[key];
|
|
36
|
+
}
|
|
37
|
+
});
|
|
23
38
|
});
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
});
|
|
36
|
-
Object.defineProperty(exports, "SubMenuItemText", {
|
|
37
|
-
enumerable: true,
|
|
38
|
-
get: function () {
|
|
39
|
-
return _SubMenu.SubMenuItemText;
|
|
40
|
-
}
|
|
41
|
-
});
|
|
42
|
-
var _SubMenu = require("./SubMenu");
|
|
39
|
+
var _SubMenuLink = require("./SubMenuLink");
|
|
40
|
+
Object.keys(_SubMenuLink).forEach(function (key) {
|
|
41
|
+
if (key === "default" || key === "__esModule") return;
|
|
42
|
+
if (key in exports && exports[key] === _SubMenuLink[key]) return;
|
|
43
|
+
Object.defineProperty(exports, key, {
|
|
44
|
+
enumerable: true,
|
|
45
|
+
get: function () {
|
|
46
|
+
return _SubMenuLink[key];
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
});
|
|
@@ -1,11 +1,6 @@
|
|
|
1
1
|
// @flow strict
|
|
2
2
|
|
|
3
|
-
export
|
|
4
|
-
export
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
SubMenuItem,
|
|
8
|
-
SubMenuItemAction,
|
|
9
|
-
SubMenuItemIcon,
|
|
10
|
-
SubMenuItemText,
|
|
11
|
-
} from './SubMenu';
|
|
3
|
+
export * from './SubMenu';
|
|
4
|
+
export * from './SubMenuGroup';
|
|
5
|
+
export * from './SubMenuItem';
|
|
6
|
+
export * from './SubMenuLink';
|
package/lib/styles/index.css
CHANGED
package/lib/styles/index.js
CHANGED
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
7
|
-
exports.
|
|
8
|
-
exports.spaceXXSmall = exports.spaceXXLarge = exports.spaceXSmall = exports.spaceXLarge = exports.spaceSmall = exports.spaceNone = exports.spaceNegHalfFluid = exports.spaceNegFluid = exports.spaceMedium = exports.spaceLarge = exports.spaceHalfFluid = exports.spaceFluid = exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size8 = exports.size720 = exports.size70 = void 0;
|
|
6
|
+
exports.fontLetterSpacingMinus2 = exports.fontLetterSpacingMinus1 = exports.fontLetterSpacing4 = exports.fontLetterSpacing2 = exports.fontLetterSpacing1 = exports.fontLetterSpacing0 = exports.fontFamilyCentra = exports.elevationTooltip = exports.elevationToast = exports.elevationNone = exports.elevationModal = exports.elevationMenu = exports.elevationCard = exports.elevationBackdrop = exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextDisabled = exports.colorTextDanger = exports.colorTextClickable = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorSubMenuStar = exports.colorSubMenuBackgroundDefault = exports.colorSideMenuIconDefault = exports.colorSideMenuIconActive = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGrayLightest = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillInversePrimary = exports.colorFillDisabled = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillSecondaryPressed = exports.colorButtonFillSecondaryHovered = exports.colorButtonFillSecondaryEnabled = exports.colorButtonFillPrimaryPressed = exports.colorButtonFillPrimaryHovered = exports.colorButtonFillPrimaryEnabled = exports.colorButtonFillGhostPressed = exports.colorButtonFillGhostHovered = exports.colorButtonFillGhostEnabled = exports.colorButtonFillDangerPressed = exports.colorButtonFillDangerHovered = exports.colorButtonFillDangerEnabled = exports.colorBorderTertiary = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackgroundBrand = exports.colorBackdropFill = exports.borderWidthTertiary = exports.borderWidthSecondary = exports.borderWidthPrimary = exports.borderWidthNone = exports.borderRadiusXSmall = exports.borderRadiusXLarge = exports.borderRadiusSmall = exports.borderRadiusRadioButton = exports.borderRadiusNone = exports.borderRadiusMedium = exports.borderRadiusLarge = exports.borderRadiusCircle = void 0;
|
|
7
|
+
exports.size60 = exports.size580 = exports.size58 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size300 = exports.size30 = exports.size276 = exports.size260 = exports.size26 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size18 = exports.size160 = exports.size140 = exports.size125 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = exports.shadowBoxShadow4Y = exports.shadowBoxShadow4X = exports.shadowBoxShadow4Type = exports.shadowBoxShadow4Spread = exports.shadowBoxShadow4Color = exports.shadowBoxShadow4Blur = exports.shadowBoxShadow3Y = exports.shadowBoxShadow3X = exports.shadowBoxShadow3Type = exports.shadowBoxShadow3Spread = exports.shadowBoxShadow3Color = exports.shadowBoxShadow3Blur = exports.shadowBoxShadow2Y = exports.shadowBoxShadow2X = exports.shadowBoxShadow2Type = exports.shadowBoxShadow2Spread = exports.shadowBoxShadow2Color = exports.shadowBoxShadow2Blur = exports.shadowBoxShadow1Y = exports.shadowBoxShadow1X = exports.shadowBoxShadow1Type = exports.shadowBoxShadow1Spread = exports.shadowBoxShadow1Color = exports.shadowBoxShadow1Blur = exports.opacity95 = exports.opacity90 = exports.opacity85 = exports.opacity80 = exports.opacity70 = exports.opacity60 = exports.opacity50 = exports.opacity5 = exports.opacity40 = exports.opacity30 = exports.opacity20 = exports.opacity15 = exports.opacity100 = exports.opacity10 = exports.opacity0 = exports.motionEaseInEaseOut = exports.motionDurationSlowest = exports.motionDurationSlower = exports.motionDurationSlow = exports.motionDurationNormal = exports.motionDurationFast = exports.fontWeightMedium = exports.fontWeightBook = exports.fontTextDecorationNone = exports.fontTextCaseNone = exports.fontSize46 = exports.fontSize26 = exports.fontSize18 = exports.fontSize16 = exports.fontSize14 = exports.fontSize13 = exports.fontSize12 = exports.fontParagraphSpacing0 = exports.fontLineHeight170 = exports.fontLineHeight150 = exports.fontLineHeight140 = exports.fontLineHeight130 = exports.fontLineHeight120 = exports.fontLineHeight100 = exports.fontLetterSpacingMinus4 = void 0;
|
|
8
|
+
exports.spaceXXSmall = exports.spaceXXLarge = exports.spaceXSmall = exports.spaceXLarge = exports.spaceSmall = exports.spaceNone = exports.spaceNegHalfFluid = exports.spaceNegFluid = exports.spaceMedium = exports.spaceLarge = exports.spaceHalfFluid = exports.spaceFluid = exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size8 = exports.size720 = exports.size70 = exports.size640 = void 0;
|
|
9
9
|
|
|
10
10
|
const borderWidthNone = '0px';
|
|
11
11
|
exports.borderWidthNone = borderWidthNone;
|
|
@@ -125,6 +125,8 @@ const colorSideMenuIconActive = '#ffffff';
|
|
|
125
125
|
exports.colorSideMenuIconActive = colorSideMenuIconActive;
|
|
126
126
|
const colorSubMenuBackgroundDefault = '#1F1F36';
|
|
127
127
|
exports.colorSubMenuBackgroundDefault = colorSubMenuBackgroundDefault;
|
|
128
|
+
const colorSubMenuStar = '#DFBD0D';
|
|
129
|
+
exports.colorSubMenuStar = colorSubMenuStar;
|
|
128
130
|
const colorGrayLightest = '#EBEBEB';
|
|
129
131
|
exports.colorGrayLightest = colorGrayLightest;
|
|
130
132
|
const colorNeutral = '#706F9B';
|
package/lib/styles/index.js.flow
CHANGED
|
@@ -118,6 +118,8 @@ export const colorSideMenuIconActive = '#ffffff';
|
|
|
118
118
|
|
|
119
119
|
export const colorSubMenuBackgroundDefault = '#1F1F36';
|
|
120
120
|
|
|
121
|
+
export const colorSubMenuStar = '#DFBD0D';
|
|
122
|
+
|
|
121
123
|
export const colorGrayLightest = '#EBEBEB';
|
|
122
124
|
|
|
123
125
|
export const colorNeutral = '#706F9B';
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextDisabled = exports.colorTextDanger = exports.colorTextClickable = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorSubMenuBackgroundDefault = exports.colorSideMenuIconDefault = exports.colorSideMenuIconActive = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGrayLightest = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillInversePrimary = exports.colorFillDisabled = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillSecondaryPressed = exports.colorButtonFillSecondaryHovered = exports.colorButtonFillSecondaryEnabled = exports.colorButtonFillPrimaryPressed = exports.colorButtonFillPrimaryHovered = exports.colorButtonFillPrimaryEnabled = exports.colorButtonFillGhostPressed = exports.colorButtonFillGhostHovered = exports.colorButtonFillGhostEnabled = exports.colorButtonFillDangerPressed = exports.colorButtonFillDangerHovered = exports.colorButtonFillDangerEnabled = exports.colorBorderTertiary = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackgroundBrand = exports.colorBackdropFill = void 0;
|
|
6
|
+
exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextDisabled = exports.colorTextDanger = exports.colorTextClickable = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorSubMenuStar = exports.colorSubMenuBackgroundDefault = exports.colorSideMenuIconDefault = exports.colorSideMenuIconActive = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGrayLightest = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillInversePrimary = exports.colorFillDisabled = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillSecondaryPressed = exports.colorButtonFillSecondaryHovered = exports.colorButtonFillSecondaryEnabled = exports.colorButtonFillPrimaryPressed = exports.colorButtonFillPrimaryHovered = exports.colorButtonFillPrimaryEnabled = exports.colorButtonFillGhostPressed = exports.colorButtonFillGhostHovered = exports.colorButtonFillGhostEnabled = exports.colorButtonFillDangerPressed = exports.colorButtonFillDangerHovered = exports.colorButtonFillDangerEnabled = exports.colorBorderTertiary = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackgroundBrand = exports.colorBackdropFill = void 0;
|
|
7
7
|
|
|
8
8
|
const colorTextPrimary = '#17172A';
|
|
9
9
|
exports.colorTextPrimary = colorTextPrimary;
|
|
@@ -99,6 +99,8 @@ const colorSideMenuIconActive = '#ffffff';
|
|
|
99
99
|
exports.colorSideMenuIconActive = colorSideMenuIconActive;
|
|
100
100
|
const colorSubMenuBackgroundDefault = '#1F1F36';
|
|
101
101
|
exports.colorSubMenuBackgroundDefault = colorSubMenuBackgroundDefault;
|
|
102
|
+
const colorSubMenuStar = '#DFBD0D';
|
|
103
|
+
exports.colorSubMenuStar = colorSubMenuStar;
|
|
102
104
|
const colorGrayLightest = '#EBEBEB';
|
|
103
105
|
exports.colorGrayLightest = colorGrayLightest;
|
|
104
106
|
const colorNeutral = '#706F9B';
|