@spaced-out/ui-design-system 0.3.31 → 0.3.32
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 +7 -0
- package/design-tokens/color/app-color.json +8 -0
- package/lib/components/Icon/Icon.js +3 -1
- package/lib/components/Icon/Icon.js.flow +3 -0
- package/lib/components/PageTitle/PageTitle.js +27 -41
- package/lib/components/PageTitle/PageTitle.js.flow +10 -21
- package/lib/styles/index.css +4 -0
- package/lib/styles/index.js +7 -3
- package/lib/styles/index.js.flow +4 -0
- package/lib/styles/variables/_color.css +4 -0
- package/lib/styles/variables/_color.js +6 -2
- package/lib/styles/variables/_color.js.flow +4 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
### [0.3.32](https://github.com/spaced-out/ui-design-system/compare/v0.3.31...v0.3.32) (2025-03-21)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* [GDS-358] support style in icon ([#330](https://github.com/spaced-out/ui-design-system/issues/330)) ([9547add](https://github.com/spaced-out/ui-design-system/commit/9547adde03639bfe6dccb8b0d1bb383dcaf796b4))
|
|
11
|
+
|
|
5
12
|
### [0.3.31](https://github.com/spaced-out/ui-design-system/compare/v0.3.30...v0.3.31) (2025-03-19)
|
|
6
13
|
|
|
7
14
|
|
|
@@ -43,6 +43,14 @@
|
|
|
43
43
|
"value": "{baseColor.yellow.500.value}"
|
|
44
44
|
}
|
|
45
45
|
},
|
|
46
|
+
"icon": {
|
|
47
|
+
"primary": {
|
|
48
|
+
"value": "{baseColor.indigo.400.value}"
|
|
49
|
+
},
|
|
50
|
+
"secondary": {
|
|
51
|
+
"value": "{baseColor.indigo.800.value}"
|
|
52
|
+
}
|
|
53
|
+
},
|
|
46
54
|
"border": {
|
|
47
55
|
"primary": {
|
|
48
56
|
"value": "{baseColor.gray.100.value}"
|
|
@@ -32,6 +32,7 @@ const Icon = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
|
|
|
32
32
|
size = 'medium',
|
|
33
33
|
color = _typography.TEXT_COLORS.primary,
|
|
34
34
|
className,
|
|
35
|
+
style,
|
|
35
36
|
onClick,
|
|
36
37
|
swapOpacity
|
|
37
38
|
} = _ref;
|
|
@@ -42,7 +43,8 @@ const Icon = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
|
|
|
42
43
|
}, /*#__PURE__*/React.createElement("i", {
|
|
43
44
|
className: (0, _classify.default)(`fa-${type} fa-${name} `, {
|
|
44
45
|
['fa-swap-opacity']: swapOpacity
|
|
45
|
-
})
|
|
46
|
+
}),
|
|
47
|
+
style: style
|
|
46
48
|
})));
|
|
47
49
|
});
|
|
48
50
|
exports.Icon = Icon;
|
|
@@ -34,6 +34,7 @@ export type IconProps = {
|
|
|
34
34
|
onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
|
|
35
35
|
ariaLabel?: string,
|
|
36
36
|
swapOpacity?: boolean,
|
|
37
|
+
style?: {[string]: string},
|
|
37
38
|
};
|
|
38
39
|
|
|
39
40
|
export const Icon: React$AbstractComponent<IconProps, HTMLDivElement> =
|
|
@@ -45,6 +46,7 @@ export const Icon: React$AbstractComponent<IconProps, HTMLDivElement> =
|
|
|
45
46
|
size = 'medium',
|
|
46
47
|
color = TEXT_COLORS.primary,
|
|
47
48
|
className,
|
|
49
|
+
style,
|
|
48
50
|
onClick,
|
|
49
51
|
swapOpacity,
|
|
50
52
|
}: IconProps,
|
|
@@ -66,6 +68,7 @@ export const Icon: React$AbstractComponent<IconProps, HTMLDivElement> =
|
|
|
66
68
|
className={classify(`fa-${type} fa-${name} `, {
|
|
67
69
|
['fa-swap-opacity']: swapOpacity,
|
|
68
70
|
})}
|
|
71
|
+
style={style}
|
|
69
72
|
/>
|
|
70
73
|
</div>
|
|
71
74
|
)}
|
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.TabSlot = exports.RightSlot = exports.PageTitle = exports.PageName = exports.PAGE_NAME_LIST = void 0;
|
|
7
7
|
var React = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _color = require("../../styles/variables/_color");
|
|
8
9
|
var _classify = _interopRequireDefault(require("../../utils/classify"));
|
|
9
10
|
var _Button = require("../Button");
|
|
10
11
|
var _Icon = require("../Icon");
|
|
@@ -19,116 +20,97 @@ const PAGE_NAME_LIST = Object.freeze({
|
|
|
19
20
|
dashboard: {
|
|
20
21
|
title: 'Dashboard',
|
|
21
22
|
iconName: 'house',
|
|
22
|
-
iconType: 'duotone'
|
|
23
|
-
iconSwapOpacity: true
|
|
23
|
+
iconType: 'duotone'
|
|
24
24
|
},
|
|
25
25
|
engage: {
|
|
26
26
|
title: 'Engage',
|
|
27
27
|
iconName: 'bullseye-pointer',
|
|
28
|
-
iconType: 'duotone'
|
|
29
|
-
iconSwapOpacity: true
|
|
28
|
+
iconType: 'duotone'
|
|
30
29
|
},
|
|
31
30
|
journeys: {
|
|
32
31
|
title: 'Journeys',
|
|
33
32
|
iconName: 'bullseye-pointer',
|
|
34
|
-
iconType: 'duotone'
|
|
35
|
-
iconSwapOpacity: true
|
|
33
|
+
iconType: 'duotone'
|
|
36
34
|
},
|
|
37
35
|
workflows: {
|
|
38
36
|
title: 'Workflows',
|
|
39
37
|
iconName: 'bullseye-pointer',
|
|
40
|
-
iconType: 'duotone'
|
|
41
|
-
iconSwapOpacity: true
|
|
38
|
+
iconType: 'duotone'
|
|
42
39
|
},
|
|
43
40
|
trm: {
|
|
44
41
|
title: 'TRM',
|
|
45
42
|
iconName: 'screen-users',
|
|
46
|
-
iconType: 'duotone'
|
|
47
|
-
iconSwapOpacity: true
|
|
43
|
+
iconType: 'duotone'
|
|
48
44
|
},
|
|
49
45
|
analytics: {
|
|
50
46
|
title: 'Analytics',
|
|
51
47
|
iconName: 'chart-column',
|
|
52
|
-
iconType: 'duotone'
|
|
53
|
-
iconSwapOpacity: true
|
|
48
|
+
iconType: 'duotone'
|
|
54
49
|
},
|
|
55
50
|
messaging: {
|
|
56
51
|
title: 'Messaging',
|
|
57
52
|
iconName: 'messages',
|
|
58
|
-
iconType: 'duotone'
|
|
59
|
-
iconSwapOpacity: true
|
|
53
|
+
iconType: 'duotone'
|
|
60
54
|
},
|
|
61
55
|
chatbot: {
|
|
62
56
|
title: 'Chatbot',
|
|
63
57
|
iconName: 'message-bot',
|
|
64
|
-
iconType: 'duotone'
|
|
65
|
-
iconSwapOpacity: true
|
|
58
|
+
iconType: 'duotone'
|
|
66
59
|
},
|
|
67
60
|
referrals: {
|
|
68
61
|
title: 'Referrals',
|
|
69
62
|
iconName: 'user-check',
|
|
70
|
-
iconType: 'duotone'
|
|
71
|
-
iconSwapOpacity: true
|
|
63
|
+
iconType: 'duotone'
|
|
72
64
|
},
|
|
73
65
|
records: {
|
|
74
66
|
title: 'Records',
|
|
75
67
|
iconName: 'folder-open',
|
|
76
|
-
iconType: 'duotone'
|
|
77
|
-
iconSwapOpacity: true
|
|
68
|
+
iconType: 'duotone'
|
|
78
69
|
},
|
|
79
70
|
bulkCleanup: {
|
|
80
71
|
title: 'Bulk Cleanup',
|
|
81
72
|
iconName: 'retweet',
|
|
82
|
-
iconType: 'duotone'
|
|
83
|
-
iconSwapOpacity: true
|
|
73
|
+
iconType: 'duotone'
|
|
84
74
|
},
|
|
85
75
|
support: {
|
|
86
76
|
title: 'Support',
|
|
87
77
|
iconName: 'headset',
|
|
88
|
-
iconType: 'duotone'
|
|
89
|
-
iconSwapOpacity: true
|
|
78
|
+
iconType: 'duotone'
|
|
90
79
|
},
|
|
91
80
|
audit: {
|
|
92
81
|
title: 'Audit',
|
|
93
82
|
iconName: 'print-magnifying-glass',
|
|
94
|
-
iconType: 'duotone'
|
|
95
|
-
iconSwapOpacity: true
|
|
83
|
+
iconType: 'duotone'
|
|
96
84
|
},
|
|
97
85
|
timeline: {
|
|
98
86
|
title: 'Timeline',
|
|
99
87
|
iconName: 'timeline',
|
|
100
|
-
iconType: 'duotone'
|
|
101
|
-
iconSwapOpacity: true
|
|
88
|
+
iconType: 'duotone'
|
|
102
89
|
},
|
|
103
90
|
people: {
|
|
104
91
|
title: 'People',
|
|
105
92
|
iconName: 'people-group',
|
|
106
|
-
iconType: 'duotone'
|
|
107
|
-
iconSwapOpacity: true
|
|
93
|
+
iconType: 'duotone'
|
|
108
94
|
},
|
|
109
95
|
jobs: {
|
|
110
96
|
title: 'Jobs',
|
|
111
97
|
iconName: 'briefcase',
|
|
112
|
-
iconType: 'duotone'
|
|
113
|
-
iconSwapOpacity: true
|
|
98
|
+
iconType: 'duotone'
|
|
114
99
|
},
|
|
115
100
|
contacts: {
|
|
116
101
|
title: 'Contacts',
|
|
117
102
|
iconName: 'address-card',
|
|
118
|
-
iconType: 'duotone'
|
|
119
|
-
iconSwapOpacity: true
|
|
103
|
+
iconType: 'duotone'
|
|
120
104
|
},
|
|
121
105
|
meetings: {
|
|
122
106
|
title: 'Meetings',
|
|
123
107
|
iconName: 'calendars',
|
|
124
|
-
iconType: 'duotone'
|
|
125
|
-
iconSwapOpacity: true
|
|
108
|
+
iconType: 'duotone'
|
|
126
109
|
},
|
|
127
110
|
contacts3: {
|
|
128
111
|
title: 'Contacts',
|
|
129
112
|
iconName: 'browser',
|
|
130
|
-
iconType: 'duotone'
|
|
131
|
-
iconSwapOpacity: true
|
|
113
|
+
iconType: 'duotone'
|
|
132
114
|
},
|
|
133
115
|
tracking: {
|
|
134
116
|
title: 'Tracking',
|
|
@@ -148,8 +130,7 @@ const PAGE_NAME_LIST = Object.freeze({
|
|
|
148
130
|
broadcast: {
|
|
149
131
|
title: 'Broadcast',
|
|
150
132
|
iconName: 'bullhorn',
|
|
151
|
-
iconType: 'duotone'
|
|
152
|
-
iconSwapOpacity: true
|
|
133
|
+
iconType: 'duotone'
|
|
153
134
|
}
|
|
154
135
|
});
|
|
155
136
|
exports.PAGE_NAME_LIST = PAGE_NAME_LIST;
|
|
@@ -231,7 +212,12 @@ const PageTitle = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
|
|
|
231
212
|
name: PAGE_NAME_LIST[pageNameKey].iconName,
|
|
232
213
|
size: "medium",
|
|
233
214
|
color: _Text.TEXT_COLORS.primary,
|
|
234
|
-
|
|
215
|
+
style: {
|
|
216
|
+
'--fa-primary-color': _color.colorIconPrimary,
|
|
217
|
+
'--fa-secondary-color': _color.colorIconSecondary,
|
|
218
|
+
'--fa-primary-opacity': '1.0',
|
|
219
|
+
'--fa-secondary-opacity': '1.0'
|
|
220
|
+
}
|
|
235
221
|
})) : getNamedComp('PageName')), getNamedComp('TabSlot')), /*#__PURE__*/React.createElement("div", {
|
|
236
222
|
className: (0, _classify.default)(_PageTitleModule.default.rightSlot, classNames?.rightSlot)
|
|
237
223
|
}, getNamedComp('RightSlot')));
|
|
@@ -2,6 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
|
|
5
|
+
import {
|
|
6
|
+
colorIconPrimary,
|
|
7
|
+
colorIconSecondary,
|
|
8
|
+
} from '../../styles/variables/_color';
|
|
5
9
|
import classify from '../../utils/classify';
|
|
6
10
|
import {Button} from '../Button';
|
|
7
11
|
import {Icon} from '../Icon';
|
|
@@ -30,115 +34,96 @@ export const PAGE_NAME_LIST = Object.freeze({
|
|
|
30
34
|
title: 'Dashboard',
|
|
31
35
|
iconName: 'house',
|
|
32
36
|
iconType: 'duotone',
|
|
33
|
-
iconSwapOpacity: true,
|
|
34
37
|
},
|
|
35
38
|
engage: {
|
|
36
39
|
title: 'Engage',
|
|
37
40
|
iconName: 'bullseye-pointer',
|
|
38
41
|
iconType: 'duotone',
|
|
39
|
-
iconSwapOpacity: true,
|
|
40
42
|
},
|
|
41
43
|
journeys: {
|
|
42
44
|
title: 'Journeys',
|
|
43
45
|
iconName: 'bullseye-pointer',
|
|
44
46
|
iconType: 'duotone',
|
|
45
|
-
iconSwapOpacity: true,
|
|
46
47
|
},
|
|
47
48
|
workflows: {
|
|
48
49
|
title: 'Workflows',
|
|
49
50
|
iconName: 'bullseye-pointer',
|
|
50
51
|
iconType: 'duotone',
|
|
51
|
-
iconSwapOpacity: true,
|
|
52
52
|
},
|
|
53
53
|
trm: {
|
|
54
54
|
title: 'TRM',
|
|
55
55
|
iconName: 'screen-users',
|
|
56
56
|
iconType: 'duotone',
|
|
57
|
-
iconSwapOpacity: true,
|
|
58
57
|
},
|
|
59
58
|
analytics: {
|
|
60
59
|
title: 'Analytics',
|
|
61
60
|
iconName: 'chart-column',
|
|
62
61
|
iconType: 'duotone',
|
|
63
|
-
iconSwapOpacity: true,
|
|
64
62
|
},
|
|
65
63
|
messaging: {
|
|
66
64
|
title: 'Messaging',
|
|
67
65
|
iconName: 'messages',
|
|
68
66
|
iconType: 'duotone',
|
|
69
|
-
iconSwapOpacity: true,
|
|
70
67
|
},
|
|
71
68
|
chatbot: {
|
|
72
69
|
title: 'Chatbot',
|
|
73
70
|
iconName: 'message-bot',
|
|
74
71
|
iconType: 'duotone',
|
|
75
|
-
iconSwapOpacity: true,
|
|
76
72
|
},
|
|
77
73
|
referrals: {
|
|
78
74
|
title: 'Referrals',
|
|
79
75
|
iconName: 'user-check',
|
|
80
76
|
iconType: 'duotone',
|
|
81
|
-
iconSwapOpacity: true,
|
|
82
77
|
},
|
|
83
78
|
records: {
|
|
84
79
|
title: 'Records',
|
|
85
80
|
iconName: 'folder-open',
|
|
86
81
|
iconType: 'duotone',
|
|
87
|
-
iconSwapOpacity: true,
|
|
88
82
|
},
|
|
89
83
|
bulkCleanup: {
|
|
90
84
|
title: 'Bulk Cleanup',
|
|
91
85
|
iconName: 'retweet',
|
|
92
86
|
iconType: 'duotone',
|
|
93
|
-
iconSwapOpacity: true,
|
|
94
87
|
},
|
|
95
88
|
support: {
|
|
96
89
|
title: 'Support',
|
|
97
90
|
iconName: 'headset',
|
|
98
91
|
iconType: 'duotone',
|
|
99
|
-
iconSwapOpacity: true,
|
|
100
92
|
},
|
|
101
93
|
audit: {
|
|
102
94
|
title: 'Audit',
|
|
103
95
|
iconName: 'print-magnifying-glass',
|
|
104
96
|
iconType: 'duotone',
|
|
105
|
-
iconSwapOpacity: true,
|
|
106
97
|
},
|
|
107
98
|
timeline: {
|
|
108
99
|
title: 'Timeline',
|
|
109
100
|
iconName: 'timeline',
|
|
110
101
|
iconType: 'duotone',
|
|
111
|
-
iconSwapOpacity: true,
|
|
112
102
|
},
|
|
113
103
|
people: {
|
|
114
104
|
title: 'People',
|
|
115
105
|
iconName: 'people-group',
|
|
116
106
|
iconType: 'duotone',
|
|
117
|
-
iconSwapOpacity: true,
|
|
118
107
|
},
|
|
119
108
|
jobs: {
|
|
120
109
|
title: 'Jobs',
|
|
121
110
|
iconName: 'briefcase',
|
|
122
111
|
iconType: 'duotone',
|
|
123
|
-
iconSwapOpacity: true,
|
|
124
112
|
},
|
|
125
113
|
contacts: {
|
|
126
114
|
title: 'Contacts',
|
|
127
115
|
iconName: 'address-card',
|
|
128
116
|
iconType: 'duotone',
|
|
129
|
-
iconSwapOpacity: true,
|
|
130
117
|
},
|
|
131
118
|
meetings: {
|
|
132
119
|
title: 'Meetings',
|
|
133
120
|
iconName: 'calendars',
|
|
134
121
|
iconType: 'duotone',
|
|
135
|
-
iconSwapOpacity: true,
|
|
136
122
|
},
|
|
137
123
|
contacts3: {
|
|
138
124
|
title: 'Contacts',
|
|
139
125
|
iconName: 'browser',
|
|
140
126
|
iconType: 'duotone',
|
|
141
|
-
iconSwapOpacity: true,
|
|
142
127
|
},
|
|
143
128
|
tracking: {
|
|
144
129
|
title: 'Tracking',
|
|
@@ -159,7 +144,6 @@ export const PAGE_NAME_LIST = Object.freeze({
|
|
|
159
144
|
title: 'Broadcast',
|
|
160
145
|
iconName: 'bullhorn',
|
|
161
146
|
iconType: 'duotone',
|
|
162
|
-
iconSwapOpacity: true,
|
|
163
147
|
},
|
|
164
148
|
});
|
|
165
149
|
|
|
@@ -260,7 +244,12 @@ export const PageTitle: React$AbstractComponent<
|
|
|
260
244
|
name={PAGE_NAME_LIST[pageNameKey].iconName}
|
|
261
245
|
size="medium"
|
|
262
246
|
color={TEXT_COLORS.primary}
|
|
263
|
-
|
|
247
|
+
style={{
|
|
248
|
+
'--fa-primary-color': colorIconPrimary,
|
|
249
|
+
'--fa-secondary-color': colorIconSecondary,
|
|
250
|
+
'--fa-primary-opacity': '1.0',
|
|
251
|
+
'--fa-secondary-opacity': '1.0',
|
|
252
|
+
}}
|
|
264
253
|
/>
|
|
265
254
|
</PageName>
|
|
266
255
|
) : (
|
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.size880 = exports.size800 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size66 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size44 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size32 = exports.size300 = exports.size30 = exports.size28 = exports.size276 = exports.size260 = exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size200 = exports.size20 = exports.size2 = exports.size180 = exports.size18 = exports.size160 = exports.size140 = exports.size1280 = exports.size125 = void 0;
|
|
6
|
+
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.colorSideMenuBackgroundSelected = exports.colorSideMenuBackgroundHovered = exports.colorSideMenuBackgroundDefault = exports.colorSideMenuAccountBarFill = exports.colorScoreBarLevel5 = exports.colorScoreBarLevel4 = exports.colorScoreBarLevel3 = exports.colorScoreBarLevel2 = exports.colorScoreBarLevel1 = exports.colorScoreBarInactive = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorIconSecondary = exports.colorIconPrimary = exports.colorGroupMenuTextDefault = exports.colorGroupMenuBackgroundSelected = exports.colorGroupMenuBackgroundHovered = exports.colorGroupMenuBackgroundDefault = exports.colorGrayLightest = exports.colorFocusSecondary = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillInversePrimary = exports.colorFillDisabled = exports.colorDataViz8 = exports.colorDataViz7 = exports.colorDataViz6 = exports.colorDataViz5 = exports.colorDataViz4 = exports.colorDataViz3 = exports.colorDataViz2 = exports.colorDataViz1 = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillTableActionPressed = exports.colorButtonFillTableActionHovered = exports.colorButtonFillTableActionEnabled = exports.colorButtonFillTableActionBorder = 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.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.fontSize36 = exports.fontSize26 = exports.fontSize24 = exports.fontSize18 = exports.fontSize16 = exports.fontSize14 = exports.fontSize13 = exports.fontSize12 = exports.fontParagraphSpacing0 = exports.fontLineHeight170 = exports.fontLineHeight150 = exports.fontLineHeight140 = exports.fontLineHeight130 = exports.fontLineHeight125 = exports.fontLineHeight120 = exports.fontLineHeight100 = exports.fontLetterSpacingMinus4 = exports.fontLetterSpacingMinus3 = 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.colorTextFavorite = 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.size880 = exports.size800 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size66 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size44 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size32 = exports.size300 = exports.size30 = exports.size28 = exports.size276 = exports.size260 = exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size200 = exports.size20 = exports.size2 = exports.size180 = exports.size18 = exports.size160 = exports.size140 = exports.size1280 = exports.size125 = exports.size12 = exports.size110 = void 0;
|
|
9
9
|
|
|
10
10
|
const borderWidthNone = '0px';
|
|
11
11
|
exports.borderWidthNone = borderWidthNone;
|
|
@@ -57,6 +57,10 @@ const colorTextInverseSecondary = '#9F9FBC';
|
|
|
57
57
|
exports.colorTextInverseSecondary = colorTextInverseSecondary;
|
|
58
58
|
const colorTextFavorite = '#DFBD0D';
|
|
59
59
|
exports.colorTextFavorite = colorTextFavorite;
|
|
60
|
+
const colorIconPrimary = '#8D8CAF';
|
|
61
|
+
exports.colorIconPrimary = colorIconPrimary;
|
|
62
|
+
const colorIconSecondary = '#3E3D55';
|
|
63
|
+
exports.colorIconSecondary = colorIconSecondary;
|
|
60
64
|
const colorBorderPrimary = '#e1e1e1';
|
|
61
65
|
exports.colorBorderPrimary = colorBorderPrimary;
|
|
62
66
|
const colorBorderSecondary = '#d1d1d1';
|
package/lib/styles/index.js.flow
CHANGED
|
@@ -50,6 +50,10 @@ export const colorTextInverseSecondary = '#9F9FBC';
|
|
|
50
50
|
|
|
51
51
|
export const colorTextFavorite = '#DFBD0D';
|
|
52
52
|
|
|
53
|
+
export const colorIconPrimary = '#8D8CAF';
|
|
54
|
+
|
|
55
|
+
export const colorIconSecondary = '#3E3D55';
|
|
56
|
+
|
|
53
57
|
export const colorBorderPrimary = '#e1e1e1';
|
|
54
58
|
|
|
55
59
|
export const colorBorderSecondary = '#d1d1d1';
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
7
|
-
exports.colorWarningLightest = exports.colorWarningLight = void 0;
|
|
6
|
+
exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextFavorite = 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.colorSideMenuBackgroundSelected = exports.colorSideMenuBackgroundHovered = exports.colorSideMenuBackgroundDefault = exports.colorSideMenuAccountBarFill = exports.colorScoreBarLevel5 = exports.colorScoreBarLevel4 = exports.colorScoreBarLevel3 = exports.colorScoreBarLevel2 = exports.colorScoreBarLevel1 = exports.colorScoreBarInactive = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorIconSecondary = exports.colorIconPrimary = exports.colorGroupMenuTextDefault = exports.colorGroupMenuBackgroundSelected = exports.colorGroupMenuBackgroundHovered = exports.colorGroupMenuBackgroundDefault = exports.colorGrayLightest = exports.colorFocusSecondary = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillInversePrimary = exports.colorFillDisabled = exports.colorDataViz8 = exports.colorDataViz7 = exports.colorDataViz6 = exports.colorDataViz5 = exports.colorDataViz4 = exports.colorDataViz3 = exports.colorDataViz2 = exports.colorDataViz1 = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillTableActionPressed = exports.colorButtonFillTableActionHovered = exports.colorButtonFillTableActionEnabled = exports.colorButtonFillTableActionBorder = 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
|
+
exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = void 0;
|
|
8
8
|
|
|
9
9
|
const colorTextPrimary = '#17172A';
|
|
10
10
|
exports.colorTextPrimary = colorTextPrimary;
|
|
@@ -32,6 +32,10 @@ const colorTextInverseSecondary = '#9F9FBC';
|
|
|
32
32
|
exports.colorTextInverseSecondary = colorTextInverseSecondary;
|
|
33
33
|
const colorTextFavorite = '#DFBD0D';
|
|
34
34
|
exports.colorTextFavorite = colorTextFavorite;
|
|
35
|
+
const colorIconPrimary = '#8D8CAF';
|
|
36
|
+
exports.colorIconPrimary = colorIconPrimary;
|
|
37
|
+
const colorIconSecondary = '#3E3D55';
|
|
38
|
+
exports.colorIconSecondary = colorIconSecondary;
|
|
35
39
|
const colorBorderPrimary = '#e1e1e1';
|
|
36
40
|
exports.colorBorderPrimary = colorBorderPrimary;
|
|
37
41
|
const colorBorderSecondary = '#d1d1d1';
|
|
@@ -26,6 +26,10 @@ export const colorTextInverseSecondary = '#9F9FBC';
|
|
|
26
26
|
|
|
27
27
|
export const colorTextFavorite = '#DFBD0D';
|
|
28
28
|
|
|
29
|
+
export const colorIconPrimary = '#8D8CAF';
|
|
30
|
+
|
|
31
|
+
export const colorIconSecondary = '#3E3D55';
|
|
32
|
+
|
|
29
33
|
export const colorBorderPrimary = '#e1e1e1';
|
|
30
34
|
|
|
31
35
|
export const colorBorderSecondary = '#d1d1d1';
|