@dxc-technology/halstack-react 9.0.1 → 10.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/HalstackContext.d.ts +2 -2
- package/HalstackContext.js +2 -2
- package/accordion/Accordion.d.ts +1 -1
- package/accordion/Accordion.js +2 -14
- package/accordion/Accordion.stories.tsx +3 -101
- package/accordion/types.d.ts +0 -12
- package/accordion-group/AccordionGroup.d.ts +4 -3
- package/accordion-group/AccordionGroup.js +21 -42
- package/accordion-group/AccordionGroup.stories.tsx +77 -76
- package/accordion-group/AccordionGroup.test.js +6 -16
- package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
- package/accordion-group/AccordionGroupAccordion.js +43 -0
- package/accordion-group/types.d.ts +0 -12
- package/alert/Alert.js +1 -3
- package/bleed/Bleed.stories.tsx +1 -0
- package/box/Box.d.ts +1 -1
- package/box/Box.js +5 -22
- package/box/Box.stories.tsx +25 -53
- package/box/types.d.ts +0 -12
- package/bulleted-list/BulletedList.js +4 -2
- package/bulleted-list/BulletedList.stories.tsx +7 -1
- package/bulleted-list/types.d.ts +31 -4
- package/button/Button.d.ts +1 -1
- package/button/Button.js +45 -55
- package/button/Button.stories.tsx +4 -4
- package/button/Button.test.js +11 -0
- package/button/types.d.ts +4 -0
- package/card/Card.d.ts +1 -1
- package/card/Card.js +18 -35
- package/card/Card.stories.tsx +0 -29
- package/card/types.d.ts +1 -7
- package/chip/Chip.js +23 -36
- package/chip/Chip.stories.tsx +25 -17
- package/common/OpenSans.css +68 -80
- package/common/coreTokens.d.ts +146 -0
- package/common/coreTokens.js +167 -0
- package/common/variables.d.ts +1 -144
- package/common/variables.js +952 -1095
- package/date-input/Calendar.js +2 -2
- package/dialog/Dialog.d.ts +1 -1
- package/dialog/Dialog.js +4 -22
- package/dialog/Dialog.stories.tsx +52 -176
- package/dialog/types.d.ts +0 -13
- package/dropdown/DropdownMenu.js +5 -1
- package/file-input/FileItem.js +2 -2
- package/file-input/types.d.ts +1 -1
- package/flex/Flex.js +4 -2
- package/flex/Flex.stories.tsx +35 -26
- package/flex/types.d.ts +70 -5
- package/footer/Footer.d.ts +1 -1
- package/footer/Footer.js +43 -61
- package/footer/Footer.stories.tsx +12 -89
- package/footer/Footer.test.js +3 -1
- package/footer/types.d.ts +10 -12
- package/grid/Grid.d.ts +7 -0
- package/grid/Grid.js +91 -0
- package/grid/Grid.stories.tsx +219 -0
- package/grid/types.d.ts +115 -0
- package/grid/types.js +5 -0
- package/header/Header.d.ts +1 -1
- package/header/Header.js +3 -30
- package/header/Header.stories.tsx +7 -71
- package/header/types.d.ts +0 -14
- package/inset/Inset.stories.tsx +2 -1
- package/layout/ApplicationLayout.d.ts +4 -4
- package/layout/ApplicationLayout.js +7 -4
- package/layout/types.d.ts +2 -3
- package/link/Link.js +1 -1
- package/main.d.ts +2 -1
- package/main.js +8 -0
- package/nav-tabs/NavTabs.d.ts +2 -2
- package/nav-tabs/NavTabs.js +7 -10
- package/nav-tabs/NavTabs.stories.tsx +14 -0
- package/nav-tabs/Tab.js +22 -26
- package/nav-tabs/types.d.ts +8 -9
- package/package.json +1 -1
- package/paginator/Paginator.js +1 -1
- package/paginator/Paginator.test.js +13 -0
- package/radio-group/Radio.js +10 -10
- package/radio-group/RadioGroup.js +8 -10
- package/sidenav/Icons.d.ts +7 -0
- package/sidenav/Icons.js +51 -0
- package/sidenav/Sidenav.d.ts +2 -2
- package/sidenav/Sidenav.js +65 -93
- package/sidenav/Sidenav.stories.tsx +60 -60
- package/sidenav/types.d.ts +21 -18
- package/tabs/Tab.js +1 -2
- package/tabs/Tabs.js +10 -14
- package/text-input/TextInput.js +1 -1
- package/text-input/TextInput.stories.tsx +1 -1
- package/textarea/Textarea.js +0 -1
- package/textarea/Textarea.test.js +1 -3
- package/toggle-group/ToggleGroup.d.ts +2 -2
- package/useTheme.d.ts +1 -1
- package/utils/FocusLock.js +3 -4
- package/card/ice-cream.jpg +0 -0
package/common/variables.js
CHANGED
|
@@ -1,215 +1,72 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
3
5
|
Object.defineProperty(exports, "__esModule", {
|
|
4
6
|
value: true
|
|
5
7
|
});
|
|
6
|
-
exports.spaces = exports.responsiveSizes = exports.
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
transparent: "transparent",
|
|
11
|
-
hal_white: "#ffffff",
|
|
12
|
-
hal_grey_l_95: "#f2f2f2",
|
|
13
|
-
hal_grey_l_90: "#e6e6e6",
|
|
14
|
-
hal_grey_l_80: "#cccccc",
|
|
15
|
-
hal_grey_l_75: "#bfbfbf",
|
|
16
|
-
hal_grey_l_60: "#999999",
|
|
17
|
-
hal_grey_s_40: "#666666",
|
|
18
|
-
hal_black: "#000000",
|
|
19
|
-
color_grey_800: "#4d4d4d",
|
|
20
|
-
color_grey_600: "#808080",
|
|
21
|
-
color_grey_50: "#fafafa",
|
|
22
|
-
color_grey_a_100: "#0000000d",
|
|
23
|
-
color_grey_a_200: "#0000001a",
|
|
24
|
-
color_grey_a_300: "#00000033",
|
|
25
|
-
color_grey_a_800: "#000000b3",
|
|
26
|
-
color_grey_a_900: "#333333",
|
|
27
|
-
hal_purple_l_95: "#f2eafa",
|
|
28
|
-
hal_purple_l_90: "#e5d5f6",
|
|
29
|
-
hal_purple_l_65: "#a46ede",
|
|
30
|
-
hal_purple_s_38: "#5f249f",
|
|
31
|
-
hal_purple_d_30: "#4b1c7d",
|
|
32
|
-
hal_purple_d_20: "#321353",
|
|
33
|
-
hal_purple_d_70: "#9A6bb2",
|
|
34
|
-
color_purple_600: "#7d2fd0",
|
|
35
|
-
color_purple_300: "#cbacec",
|
|
36
|
-
hal_blue_l_95: "#e6f4ff",
|
|
37
|
-
hal_blue_l_80: "#99d5ff",
|
|
38
|
-
hal_blue_l_50: "#0095ff",
|
|
39
|
-
hal_blue_l_45: "#0086e6",
|
|
40
|
-
hal_blue_s_35: "#0067b3",
|
|
41
|
-
hal_blue_d_20: "#003c66",
|
|
42
|
-
color_blue_200: "#cceaff",
|
|
43
|
-
color_blue_500: "#33aaff",
|
|
44
|
-
color_blue_50: "#f5fbff",
|
|
45
|
-
hal_red_l_95: "#ffe6e9",
|
|
46
|
-
hal_red_l_80: "#fe9aa7",
|
|
47
|
-
hal_red_l_60: "#fe344f",
|
|
48
|
-
hal_red_s_41: "#d0011b",
|
|
49
|
-
hal_red_d_30: "#980115",
|
|
50
|
-
hal_red_d_20: "#65010e",
|
|
51
|
-
color_red_700: "#ffccd3",
|
|
52
|
-
color_red_50: "#fff5f6",
|
|
53
|
-
color_red_600: "#fe0123",
|
|
54
|
-
hal_green_l_95: "#eafaef",
|
|
55
|
-
hal_green_l_80: "#acecbe",
|
|
56
|
-
hal_green_s_39: "#24a148",
|
|
57
|
-
hal_green_d_30: "#1c7d38",
|
|
58
|
-
hal_green_d_20: "#135325",
|
|
59
|
-
hal_yellow_l_95: "#fef9e6",
|
|
60
|
-
hal_yellow_l_80: "#fbe89d",
|
|
61
|
-
hal_yellow_s_57: "#f7cf2b",
|
|
62
|
-
hal_yellow_d_40: "#c59f07",
|
|
63
|
-
hal_yellow_d_30: "#947705",
|
|
64
|
-
hal_orange_s_54: "#f38f20",
|
|
65
|
-
lightBlack: "#212121",
|
|
66
|
-
yellow: "#ffed00",
|
|
67
|
-
lightGrey: "#d9d9d9",
|
|
68
|
-
lightRed: "#ff6161",
|
|
69
|
-
lightBlue: "#cee0f5",
|
|
70
|
-
lightYellow: "#fcf2bd",
|
|
71
|
-
lightPink: "#f9cfcf",
|
|
72
|
-
lightGreen: "#dbf1c4",
|
|
73
|
-
blue: "#005fcc",
|
|
74
|
-
lighterGrey: "#f8f8f8",
|
|
75
|
-
violet: "#8800f6",
|
|
76
|
-
darkBlue: "#006bf6",
|
|
77
|
-
purple: "#6f2c91",
|
|
78
|
-
mediumPurple: "#ead8f3",
|
|
79
|
-
lightPurple: "#f5ebf9",
|
|
80
|
-
lighterPurple: "#d0bddb",
|
|
81
|
-
mediumWhite: "#f9f9f9",
|
|
82
|
-
softBlue: "#b1cee6",
|
|
83
|
-
darkWhite: "#eeeeee",
|
|
84
|
-
lighterBlack: "#b1b1b1",
|
|
85
|
-
mediumBlack: "#676767",
|
|
86
|
-
mediumGreyBlack: "#dbdbdb",
|
|
87
|
-
softGrey: "#cecece",
|
|
88
|
-
softBlack: "#565656",
|
|
89
|
-
// Typography
|
|
90
|
-
type_sans: "Open Sans, sans-serif",
|
|
91
|
-
type_scale_root: "16px",
|
|
92
|
-
type_scale_08: "3.75rem",
|
|
93
|
-
type_scale_07: "2.5rem",
|
|
94
|
-
type_scale_06: "2rem",
|
|
95
|
-
type_scale_05: "1.5rem",
|
|
96
|
-
type_scale_04: "1.25rem",
|
|
97
|
-
type_scale_03: "1rem",
|
|
98
|
-
type_scale_02: "0.875rem",
|
|
99
|
-
type_scale_01: "0.75rem",
|
|
100
|
-
type_light: "300",
|
|
101
|
-
type_regular: "400",
|
|
102
|
-
type_semibold: "600",
|
|
103
|
-
type_bold: "bold",
|
|
104
|
-
type_italic: "italic",
|
|
105
|
-
type_normal: "normal",
|
|
106
|
-
type_spacing_tight_02: "-0.05em",
|
|
107
|
-
type_spacing_tight_01: "-0.025em",
|
|
108
|
-
type_spacing_normal: "0em",
|
|
109
|
-
type_spacing_wide_01: "0.025em",
|
|
110
|
-
type_spacing_wide_02: "0.05em",
|
|
111
|
-
type_spacing_wide_03: "0.1em",
|
|
112
|
-
type_initial: "initial",
|
|
113
|
-
type_uppercase: "uppercase",
|
|
114
|
-
type_no_line: "none",
|
|
115
|
-
type_underline: "underline",
|
|
116
|
-
type_line_through: "line-through",
|
|
117
|
-
type_leading_compact_03: "1em",
|
|
118
|
-
type_leading_compact_02: "1.25em",
|
|
119
|
-
type_leading_compact_01: "1.365em",
|
|
120
|
-
type_leading_normal: "1.5em",
|
|
121
|
-
type_leading_loose_01: "1.715em",
|
|
122
|
-
type_leading_loose_02: "2em",
|
|
123
|
-
fontSize10: "10px",
|
|
124
|
-
// Spacing
|
|
125
|
-
spacing_00: "0rem",
|
|
126
|
-
spacing_01: "0.125rem",
|
|
127
|
-
spacing_02: "0.25rem",
|
|
128
|
-
spacing_03: "0.5rem",
|
|
129
|
-
spacing_04: "0.75rem",
|
|
130
|
-
spacing_05: "1rem",
|
|
131
|
-
spacing_06: "1.5rem",
|
|
132
|
-
spacing_07: "2rem",
|
|
133
|
-
spacing_08: "2.5rem",
|
|
134
|
-
spacing_09: "3rem",
|
|
135
|
-
spacing_10: "3.5rem",
|
|
136
|
-
spacing_11: "4rem",
|
|
137
|
-
spacing_12: "5rem",
|
|
138
|
-
spacing_13: "6rem",
|
|
139
|
-
spacing_14: "7rem",
|
|
140
|
-
// Border
|
|
141
|
-
border_width_0: "0px",
|
|
142
|
-
border_width_1: "1px",
|
|
143
|
-
border_width_2: "2px",
|
|
144
|
-
border_width_4: "4px",
|
|
145
|
-
border_radius_none: "0rem",
|
|
146
|
-
border_radius_small: "0.125rem",
|
|
147
|
-
border_radius_medium: "0.25rem",
|
|
148
|
-
border_radius_large: "0.375rem",
|
|
149
|
-
border_radius_full: "9999px",
|
|
150
|
-
border_solid: "solid",
|
|
151
|
-
border_dashed: "dashed",
|
|
152
|
-
border_none: "none"
|
|
153
|
-
};
|
|
154
|
-
exports.globalTokens = globalTokens;
|
|
8
|
+
exports.spaces = exports.responsiveSizes = exports.defaultTranslatedComponentLabels = exports.componentTokens = void 0;
|
|
9
|
+
|
|
10
|
+
var _coreTokens = _interopRequireDefault(require("./coreTokens"));
|
|
11
|
+
|
|
155
12
|
var componentTokens = {
|
|
156
13
|
accordion: {
|
|
157
|
-
backgroundColor:
|
|
158
|
-
hoverBackgroundColor:
|
|
159
|
-
arrowColor:
|
|
160
|
-
disabledArrowColor:
|
|
161
|
-
assistiveTextFontFamily:
|
|
162
|
-
assistiveTextFontSize:
|
|
163
|
-
assistiveTextFontWeight:
|
|
164
|
-
assistiveTextFontStyle:
|
|
165
|
-
assistiveTextLetterSpacing:
|
|
166
|
-
assistiveTextFontColor:
|
|
167
|
-
disabledAssistiveTextFontColor:
|
|
14
|
+
backgroundColor: _coreTokens["default"].color_white,
|
|
15
|
+
hoverBackgroundColor: _coreTokens["default"].color_purple_100,
|
|
16
|
+
arrowColor: _coreTokens["default"].color_purple_700,
|
|
17
|
+
disabledArrowColor: _coreTokens["default"].color_grey_500,
|
|
18
|
+
assistiveTextFontFamily: _coreTokens["default"].type_sans,
|
|
19
|
+
assistiveTextFontSize: _coreTokens["default"].type_scale_03,
|
|
20
|
+
assistiveTextFontWeight: _coreTokens["default"].type_light,
|
|
21
|
+
assistiveTextFontStyle: _coreTokens["default"].type_italic,
|
|
22
|
+
assistiveTextLetterSpacing: _coreTokens["default"].type_spacing_wide_01,
|
|
23
|
+
assistiveTextFontColor: _coreTokens["default"].color_grey_700,
|
|
24
|
+
disabledAssistiveTextFontColor: _coreTokens["default"].color_grey_500,
|
|
168
25
|
assistiveTextMinWidth: "100px",
|
|
169
26
|
assistiveTextPaddingRight: "24px",
|
|
170
27
|
assistiveTextPaddingLeft: "0px",
|
|
171
|
-
titleLabelFontFamily:
|
|
172
|
-
titleLabelFontSize:
|
|
173
|
-
titleLabelFontWeight:
|
|
174
|
-
titleLabelFontStyle:
|
|
175
|
-
titleLabelFontColor:
|
|
176
|
-
disabledTitleLabelFontColor:
|
|
28
|
+
titleLabelFontFamily: _coreTokens["default"].type_sans,
|
|
29
|
+
titleLabelFontSize: _coreTokens["default"].type_scale_03,
|
|
30
|
+
titleLabelFontWeight: _coreTokens["default"].type_regular,
|
|
31
|
+
titleLabelFontStyle: _coreTokens["default"].type_normal,
|
|
32
|
+
titleLabelFontColor: _coreTokens["default"].color_black,
|
|
33
|
+
disabledTitleLabelFontColor: _coreTokens["default"].color_grey_500,
|
|
177
34
|
titleLabelPaddingTop: "0px",
|
|
178
35
|
titleLabelPaddingBottom: "0px",
|
|
179
36
|
titleLabelPaddingLeft: "0px",
|
|
180
37
|
titleLabelPaddingRight: "16px",
|
|
181
|
-
focusBorderColor:
|
|
182
|
-
focusBorderStyle:
|
|
38
|
+
focusBorderColor: _coreTokens["default"].color_blue_600,
|
|
39
|
+
focusBorderStyle: _coreTokens["default"].border_solid,
|
|
183
40
|
focusBorderThickness: "2px",
|
|
184
41
|
borderRadius: "4px",
|
|
185
42
|
boxShadowOffsetX: "0px",
|
|
186
43
|
boxShadowOffsetY: "6px",
|
|
187
44
|
boxShadowBlur: "10px",
|
|
188
|
-
boxShadowColor:
|
|
189
|
-
iconColor:
|
|
190
|
-
disabledIconColor:
|
|
45
|
+
boxShadowColor: _coreTokens["default"].color_grey_200_a,
|
|
46
|
+
iconColor: _coreTokens["default"].color_purple_700,
|
|
47
|
+
disabledIconColor: _coreTokens["default"].color_grey_500,
|
|
191
48
|
iconSize: "24px",
|
|
192
49
|
iconMarginLeft: "0px",
|
|
193
50
|
iconMarginRigth: "12px",
|
|
194
|
-
accordionGroupSeparatorBorderColor:
|
|
51
|
+
accordionGroupSeparatorBorderColor: _coreTokens["default"].color_grey_200_a,
|
|
195
52
|
accordionGroupSeparatorBorderThickness: "1px",
|
|
196
53
|
accordionGroupSeparatorBorderRadius: "0px",
|
|
197
|
-
accordionGroupSeparatorBorderStyle:
|
|
54
|
+
accordionGroupSeparatorBorderStyle: _coreTokens["default"].border_solid
|
|
198
55
|
},
|
|
199
56
|
alert: {
|
|
200
|
-
titleFontFamily:
|
|
201
|
-
titleFontColor:
|
|
202
|
-
titleFontSize:
|
|
203
|
-
titleFontStyle:
|
|
204
|
-
titleFontWeight:
|
|
205
|
-
titleTextTransform:
|
|
57
|
+
titleFontFamily: _coreTokens["default"].type_sans,
|
|
58
|
+
titleFontColor: _coreTokens["default"].color_black,
|
|
59
|
+
titleFontSize: _coreTokens["default"].type_scale_01,
|
|
60
|
+
titleFontStyle: _coreTokens["default"].type_normal,
|
|
61
|
+
titleFontWeight: _coreTokens["default"].type_bold,
|
|
62
|
+
titleTextTransform: _coreTokens["default"].type_uppercase,
|
|
206
63
|
titlePaddingRight: "0px",
|
|
207
64
|
titlePaddingLeft: "0px",
|
|
208
|
-
inlineTextFontFamily:
|
|
209
|
-
inlineTextFontColor:
|
|
210
|
-
inlineTextFontSize:
|
|
211
|
-
inlineTextFontStyle:
|
|
212
|
-
inlineTextFontWeight:
|
|
65
|
+
inlineTextFontFamily: _coreTokens["default"].type_sans,
|
|
66
|
+
inlineTextFontColor: _coreTokens["default"].color_black,
|
|
67
|
+
inlineTextFontSize: _coreTokens["default"].type_scale_01,
|
|
68
|
+
inlineTextFontStyle: _coreTokens["default"].type_normal,
|
|
69
|
+
inlineTextFontWeight: _coreTokens["default"].type_regular,
|
|
213
70
|
inlineTextPaddingLeft: "0px",
|
|
214
71
|
inlineTextPaddingRight: "0px",
|
|
215
72
|
contentPaddingLeft: "0px",
|
|
@@ -217,53 +74,53 @@ var componentTokens = {
|
|
|
217
74
|
contentPaddingTop: "20px",
|
|
218
75
|
contentPaddingBottom: "30px",
|
|
219
76
|
borderRadius: "4px",
|
|
220
|
-
borderStyle:
|
|
77
|
+
borderStyle: _coreTokens["default"].border_solid,
|
|
221
78
|
borderThickness: "1px",
|
|
222
|
-
infoBorderColor:
|
|
223
|
-
successBorderColor:
|
|
224
|
-
warningBorderColor:
|
|
225
|
-
errorBorderColor:
|
|
79
|
+
infoBorderColor: _coreTokens["default"].color_blue_800,
|
|
80
|
+
successBorderColor: _coreTokens["default"].color_green_700,
|
|
81
|
+
warningBorderColor: _coreTokens["default"].color_yellow_700,
|
|
82
|
+
errorBorderColor: _coreTokens["default"].color_red_700,
|
|
226
83
|
iconSize: "24px",
|
|
227
84
|
iconPaddingLeft: "0px",
|
|
228
85
|
iconPaddingRight: "0px",
|
|
229
|
-
infoIconColor:
|
|
230
|
-
successIconColor:
|
|
231
|
-
warningIconColor:
|
|
232
|
-
errorIconColor:
|
|
233
|
-
infoBackgroundColor:
|
|
234
|
-
successBackgroundColor:
|
|
235
|
-
warningBackgroundColor:
|
|
236
|
-
errorBackgroundColor:
|
|
237
|
-
hoverActionBackgroundColor:
|
|
238
|
-
activeActionBackgroundColor:
|
|
239
|
-
focusActionBorderColor:
|
|
240
|
-
overlayColor:
|
|
86
|
+
infoIconColor: _coreTokens["default"].color_blue_800,
|
|
87
|
+
successIconColor: _coreTokens["default"].color_green_700,
|
|
88
|
+
warningIconColor: _coreTokens["default"].color_yellow_700,
|
|
89
|
+
errorIconColor: _coreTokens["default"].color_red_700,
|
|
90
|
+
infoBackgroundColor: _coreTokens["default"].color_blue_100,
|
|
91
|
+
successBackgroundColor: _coreTokens["default"].color_green_100,
|
|
92
|
+
warningBackgroundColor: _coreTokens["default"].color_yellow_100,
|
|
93
|
+
errorBackgroundColor: _coreTokens["default"].color_red_100,
|
|
94
|
+
hoverActionBackgroundColor: _coreTokens["default"].color_grey_100_a,
|
|
95
|
+
activeActionBackgroundColor: _coreTokens["default"].color_grey_200_a,
|
|
96
|
+
focusActionBorderColor: _coreTokens["default"].color_blue_600,
|
|
97
|
+
overlayColor: _coreTokens["default"].color_grey_800_a
|
|
241
98
|
},
|
|
242
99
|
box: {
|
|
243
|
-
backgroundColor:
|
|
244
|
-
borderRadius:
|
|
245
|
-
borderThickness:
|
|
246
|
-
borderStyle:
|
|
247
|
-
borderColor:
|
|
100
|
+
backgroundColor: _coreTokens["default"].color_white,
|
|
101
|
+
borderRadius: _coreTokens["default"].border_radius_medium,
|
|
102
|
+
borderThickness: _coreTokens["default"].border_width_0,
|
|
103
|
+
borderStyle: _coreTokens["default"].border_none,
|
|
104
|
+
borderColor: _coreTokens["default"].color_transparent,
|
|
248
105
|
noneShadowDepthShadowOffsetX: "none",
|
|
249
106
|
noneShadowDepthShadowOffsetY: "none",
|
|
250
107
|
noneShadowDepthShadowBlur: "none",
|
|
251
108
|
noneShadowDepthShadowSpread: "none",
|
|
252
|
-
noneShadowDepthShadowColor:
|
|
109
|
+
noneShadowDepthShadowColor: _coreTokens["default"].color_transparent,
|
|
253
110
|
oneShadowDepthShadowOffsetX: "0px",
|
|
254
111
|
oneShadowDepthShadowOffsetY: "3px",
|
|
255
112
|
oneShadowDepthShadowBlur: "6px",
|
|
256
113
|
oneShadowDepthShadowSpread: "0px",
|
|
257
|
-
oneShadowDepthShadowColor:
|
|
114
|
+
oneShadowDepthShadowColor: _coreTokens["default"].color_grey_300_a,
|
|
258
115
|
twoShadowDepthShadowOffsetX: "0px",
|
|
259
116
|
twoShadowDepthShadowOffsetY: "3px",
|
|
260
117
|
twoShadowDepthShadowBlur: "10px",
|
|
261
118
|
twoShadowDepthShadowSpread: "0px",
|
|
262
|
-
twoShadowDepthShadowColor:
|
|
119
|
+
twoShadowDepthShadowColor: _coreTokens["default"].color_grey_300_a
|
|
263
120
|
},
|
|
264
121
|
bulletedList: {
|
|
265
|
-
fontColor:
|
|
266
|
-
fontColorOnDark:
|
|
122
|
+
fontColor: _coreTokens["default"].color_black,
|
|
123
|
+
fontColorOnDark: _coreTokens["default"].color_white,
|
|
267
124
|
bulletIconHeight: "1.5rem",
|
|
268
125
|
bulletIconWidth: "1.5rem",
|
|
269
126
|
bulletHeight: "5px",
|
|
@@ -271,423 +128,423 @@ var componentTokens = {
|
|
|
271
128
|
bulletMarginRight: "0.5rem"
|
|
272
129
|
},
|
|
273
130
|
button: {
|
|
274
|
-
labelFontLineHeight:
|
|
275
|
-
labelLetterSpacing:
|
|
276
|
-
paddingLeft:
|
|
277
|
-
paddingRight:
|
|
278
|
-
paddingTop:
|
|
279
|
-
paddingBottom:
|
|
280
|
-
focusBorderColor:
|
|
281
|
-
focusBorderColorOnDark:
|
|
282
|
-
primaryBackgroundColor:
|
|
283
|
-
primaryBackgroundColorOnDark:
|
|
284
|
-
primaryFontColor:
|
|
285
|
-
primaryFontColorOnDark:
|
|
286
|
-
primaryHoverBackgroundColor:
|
|
287
|
-
primaryHoverBackgroundColorOnDark:
|
|
288
|
-
primaryActiveBackgroundColor:
|
|
289
|
-
primaryActiveBackgroundColorOnDark:
|
|
290
|
-
primaryDisabledBackgroundColor:
|
|
291
|
-
primaryDisabledBackgroundColorOnDark:
|
|
292
|
-
primaryDisabledFontColor:
|
|
293
|
-
primaryDisabledFontColorOnDark:
|
|
294
|
-
primaryBorderThickness:
|
|
295
|
-
primaryBorderStyle:
|
|
296
|
-
primaryBorderRadius:
|
|
297
|
-
primaryFontFamily:
|
|
298
|
-
primaryFontSize:
|
|
299
|
-
primaryFontWeight:
|
|
300
|
-
secondaryBackgroundColor:
|
|
301
|
-
secondaryBackgroundColorOnDark:
|
|
302
|
-
secondaryFontColor:
|
|
303
|
-
secondaryFontColorOnDark:
|
|
304
|
-
secondaryHoverFontColor:
|
|
305
|
-
secondaryHoverFontColorOnDark:
|
|
306
|
-
secondaryBorderColor:
|
|
307
|
-
secondaryBorderColorOnDark:
|
|
308
|
-
secondaryHoverBackgroundColor:
|
|
309
|
-
secondaryHoverBackgroundColorOnDark:
|
|
310
|
-
secondaryActiveBackgroundColor:
|
|
311
|
-
secondaryActiveBackgroundColorOnDark:
|
|
312
|
-
secondaryDisabledBackgroundColor:
|
|
313
|
-
secondaryDisabledBackgroundColorOnDark:
|
|
314
|
-
secondaryDisabledFontColor:
|
|
315
|
-
secondaryDisabledFontColorOnDark:
|
|
316
|
-
secondaryDisabledBorderColor:
|
|
317
|
-
secondaryDisabledBorderColorOnDark:
|
|
318
|
-
secondaryBorderThickness:
|
|
319
|
-
secondaryBorderStyle:
|
|
320
|
-
secondaryBorderRadius:
|
|
321
|
-
secondaryFontFamily:
|
|
322
|
-
secondaryFontSize:
|
|
323
|
-
secondaryFontWeight:
|
|
324
|
-
textBackgroundColor:
|
|
325
|
-
textBackgroundColorOnDark:
|
|
326
|
-
textFontColor:
|
|
327
|
-
textFontColorOnDark:
|
|
328
|
-
textHoverBackgroundColor:
|
|
329
|
-
textHoverBackgroundColorOnDark:
|
|
330
|
-
textActiveBackgroundColor:
|
|
331
|
-
textActiveBackgroundColorOnDark:
|
|
332
|
-
textDisabledBackgroundColor:
|
|
333
|
-
textDisabledBackgroundColorOnDark:
|
|
334
|
-
textDisabledFontColor:
|
|
335
|
-
textDisabledFontColorOnDark:
|
|
336
|
-
textBorderThickness:
|
|
337
|
-
textBorderStyle:
|
|
338
|
-
textBorderRadius:
|
|
339
|
-
textFontFamily:
|
|
340
|
-
textFontSize:
|
|
341
|
-
textFontWeight:
|
|
131
|
+
labelFontLineHeight: _coreTokens["default"].type_leading_normal,
|
|
132
|
+
labelLetterSpacing: _coreTokens["default"].type_spacing_wide_01,
|
|
133
|
+
paddingLeft: _coreTokens["default"].spacing_8,
|
|
134
|
+
paddingRight: _coreTokens["default"].spacing_8,
|
|
135
|
+
paddingTop: _coreTokens["default"].spacing_8,
|
|
136
|
+
paddingBottom: _coreTokens["default"].spacing_8,
|
|
137
|
+
focusBorderColor: _coreTokens["default"].color_blue_600,
|
|
138
|
+
focusBorderColorOnDark: _coreTokens["default"].color_blue_600,
|
|
139
|
+
primaryBackgroundColor: _coreTokens["default"].color_purple_700,
|
|
140
|
+
primaryBackgroundColorOnDark: _coreTokens["default"].color_purple_700,
|
|
141
|
+
primaryFontColor: _coreTokens["default"].color_white,
|
|
142
|
+
primaryFontColorOnDark: _coreTokens["default"].color_white,
|
|
143
|
+
primaryHoverBackgroundColor: _coreTokens["default"].color_purple_800,
|
|
144
|
+
primaryHoverBackgroundColorOnDark: _coreTokens["default"].color_purple_600,
|
|
145
|
+
primaryActiveBackgroundColor: _coreTokens["default"].color_purple_900,
|
|
146
|
+
primaryActiveBackgroundColorOnDark: _coreTokens["default"].color_purple_800,
|
|
147
|
+
primaryDisabledBackgroundColor: _coreTokens["default"].color_grey_100,
|
|
148
|
+
primaryDisabledBackgroundColorOnDark: _coreTokens["default"].color_grey_800,
|
|
149
|
+
primaryDisabledFontColor: _coreTokens["default"].color_grey_500,
|
|
150
|
+
primaryDisabledFontColorOnDark: _coreTokens["default"].color_grey_500,
|
|
151
|
+
primaryBorderThickness: _coreTokens["default"].border_width_0,
|
|
152
|
+
primaryBorderStyle: _coreTokens["default"].border_none,
|
|
153
|
+
primaryBorderRadius: _coreTokens["default"].border_radius_medium,
|
|
154
|
+
primaryFontFamily: _coreTokens["default"].type_sans,
|
|
155
|
+
primaryFontSize: _coreTokens["default"].type_scale_03,
|
|
156
|
+
primaryFontWeight: _coreTokens["default"].type_regular,
|
|
157
|
+
secondaryBackgroundColor: _coreTokens["default"].color_transparent,
|
|
158
|
+
secondaryBackgroundColorOnDark: _coreTokens["default"].color_transparent,
|
|
159
|
+
secondaryFontColor: _coreTokens["default"].color_purple_700,
|
|
160
|
+
secondaryFontColorOnDark: _coreTokens["default"].color_white,
|
|
161
|
+
secondaryHoverFontColor: _coreTokens["default"].color_white,
|
|
162
|
+
secondaryHoverFontColorOnDark: _coreTokens["default"].color_black,
|
|
163
|
+
secondaryBorderColor: _coreTokens["default"].color_purple_700,
|
|
164
|
+
secondaryBorderColorOnDark: _coreTokens["default"].color_white,
|
|
165
|
+
secondaryHoverBackgroundColor: _coreTokens["default"].color_purple_700,
|
|
166
|
+
secondaryHoverBackgroundColorOnDark: _coreTokens["default"].color_white,
|
|
167
|
+
secondaryActiveBackgroundColor: _coreTokens["default"].color_purple_900,
|
|
168
|
+
secondaryActiveBackgroundColorOnDark: _coreTokens["default"].color_grey_200,
|
|
169
|
+
secondaryDisabledBackgroundColor: _coreTokens["default"].color_transparent,
|
|
170
|
+
secondaryDisabledBackgroundColorOnDark: _coreTokens["default"].color_transparent,
|
|
171
|
+
secondaryDisabledFontColor: _coreTokens["default"].color_grey_500,
|
|
172
|
+
secondaryDisabledFontColorOnDark: _coreTokens["default"].color_grey_500,
|
|
173
|
+
secondaryDisabledBorderColor: _coreTokens["default"].color_grey_500,
|
|
174
|
+
secondaryDisabledBorderColorOnDark: _coreTokens["default"].color_grey_500,
|
|
175
|
+
secondaryBorderThickness: _coreTokens["default"].border_width_1,
|
|
176
|
+
secondaryBorderStyle: _coreTokens["default"].border_solid,
|
|
177
|
+
secondaryBorderRadius: _coreTokens["default"].border_radius_medium,
|
|
178
|
+
secondaryFontFamily: _coreTokens["default"].type_sans,
|
|
179
|
+
secondaryFontSize: _coreTokens["default"].type_scale_03,
|
|
180
|
+
secondaryFontWeight: _coreTokens["default"].type_regular,
|
|
181
|
+
textBackgroundColor: _coreTokens["default"].color_transparent,
|
|
182
|
+
textBackgroundColorOnDark: _coreTokens["default"].color_transparent,
|
|
183
|
+
textFontColor: _coreTokens["default"].color_purple_700,
|
|
184
|
+
textFontColorOnDark: _coreTokens["default"].color_white,
|
|
185
|
+
textHoverBackgroundColor: _coreTokens["default"].color_purple_100,
|
|
186
|
+
textHoverBackgroundColorOnDark: _coreTokens["default"].color_grey_800,
|
|
187
|
+
textActiveBackgroundColor: _coreTokens["default"].color_purple_200,
|
|
188
|
+
textActiveBackgroundColorOnDark: _coreTokens["default"].color_grey_700,
|
|
189
|
+
textDisabledBackgroundColor: _coreTokens["default"].color_transparent,
|
|
190
|
+
textDisabledBackgroundColorOnDark: _coreTokens["default"].color_transparent,
|
|
191
|
+
textDisabledFontColor: _coreTokens["default"].color_grey_500,
|
|
192
|
+
textDisabledFontColorOnDark: _coreTokens["default"].color_grey_500,
|
|
193
|
+
textBorderThickness: _coreTokens["default"].border_width_0,
|
|
194
|
+
textBorderStyle: _coreTokens["default"].border_none,
|
|
195
|
+
textBorderRadius: _coreTokens["default"].border_radius_medium,
|
|
196
|
+
textFontFamily: _coreTokens["default"].type_sans,
|
|
197
|
+
textFontSize: _coreTokens["default"].type_scale_03,
|
|
198
|
+
textFontWeight: _coreTokens["default"].type_regular
|
|
342
199
|
},
|
|
343
200
|
card: {
|
|
344
201
|
height: "220px",
|
|
345
202
|
width: "400px"
|
|
346
203
|
},
|
|
347
204
|
checkbox: {
|
|
348
|
-
backgroundColorChecked:
|
|
349
|
-
backgroundColorCheckedOnDark:
|
|
350
|
-
hoverBackgroundColorChecked:
|
|
351
|
-
hoverBackgroundColorCheckedOnDark:
|
|
352
|
-
disabledBackgroundColorChecked:
|
|
353
|
-
disabledBackgroundColorCheckedOnDark:
|
|
354
|
-
borderColor:
|
|
355
|
-
borderColorOnDark:
|
|
356
|
-
hoverBorderColor:
|
|
357
|
-
hoverBorderColorOnDark:
|
|
358
|
-
disabledBorderColor:
|
|
359
|
-
disabledBorderColorOnDark:
|
|
360
|
-
checkColor:
|
|
361
|
-
checkColorOnDark:
|
|
362
|
-
disabledCheckColor:
|
|
363
|
-
disabledCheckColorOnDark:
|
|
364
|
-
fontFamily:
|
|
365
|
-
fontSize:
|
|
366
|
-
fontWeight:
|
|
367
|
-
fontColor:
|
|
368
|
-
fontColorOnDark:
|
|
369
|
-
disabledFontColor:
|
|
370
|
-
disabledFontColorOnDark:
|
|
371
|
-
focusColor:
|
|
372
|
-
focusColorOnDark:
|
|
205
|
+
backgroundColorChecked: _coreTokens["default"].color_blue_800,
|
|
206
|
+
backgroundColorCheckedOnDark: _coreTokens["default"].color_grey_200,
|
|
207
|
+
hoverBackgroundColorChecked: _coreTokens["default"].color_blue_900,
|
|
208
|
+
hoverBackgroundColorCheckedOnDark: _coreTokens["default"].color_white,
|
|
209
|
+
disabledBackgroundColorChecked: _coreTokens["default"].color_grey_500,
|
|
210
|
+
disabledBackgroundColorCheckedOnDark: _coreTokens["default"].color_grey_800,
|
|
211
|
+
borderColor: _coreTokens["default"].color_blue_800,
|
|
212
|
+
borderColorOnDark: _coreTokens["default"].color_grey_200,
|
|
213
|
+
hoverBorderColor: _coreTokens["default"].color_blue_900,
|
|
214
|
+
hoverBorderColorOnDark: _coreTokens["default"].color_white,
|
|
215
|
+
disabledBorderColor: _coreTokens["default"].color_grey_500,
|
|
216
|
+
disabledBorderColorOnDark: _coreTokens["default"].color_grey_800,
|
|
217
|
+
checkColor: _coreTokens["default"].color_white,
|
|
218
|
+
checkColorOnDark: _coreTokens["default"].color_black,
|
|
219
|
+
disabledCheckColor: _coreTokens["default"].color_white,
|
|
220
|
+
disabledCheckColorOnDark: _coreTokens["default"].color_grey_500,
|
|
221
|
+
fontFamily: _coreTokens["default"].type_sans,
|
|
222
|
+
fontSize: _coreTokens["default"].type_scale_02,
|
|
223
|
+
fontWeight: _coreTokens["default"].type_regular,
|
|
224
|
+
fontColor: _coreTokens["default"].color_black,
|
|
225
|
+
fontColorOnDark: _coreTokens["default"].color_white,
|
|
226
|
+
disabledFontColor: _coreTokens["default"].color_grey_500,
|
|
227
|
+
disabledFontColorOnDark: _coreTokens["default"].color_grey_500,
|
|
228
|
+
focusColor: _coreTokens["default"].color_blue_600,
|
|
229
|
+
focusColorOnDark: _coreTokens["default"].color_blue_600,
|
|
373
230
|
checkLabelSpacing: "8px"
|
|
374
231
|
},
|
|
375
232
|
chip: {
|
|
376
|
-
backgroundColor:
|
|
377
|
-
disabledBackgroundColor:
|
|
378
|
-
fontFamily:
|
|
379
|
-
fontSize:
|
|
380
|
-
fontStyle:
|
|
381
|
-
fontWeight:
|
|
382
|
-
fontColor:
|
|
383
|
-
disabledFontColor:
|
|
384
|
-
borderColor:
|
|
233
|
+
backgroundColor: _coreTokens["default"].color_grey_200,
|
|
234
|
+
disabledBackgroundColor: _coreTokens["default"].color_grey_100,
|
|
235
|
+
fontFamily: _coreTokens["default"].type_sans,
|
|
236
|
+
fontSize: _coreTokens["default"].type_scale_03,
|
|
237
|
+
fontStyle: _coreTokens["default"].type_normal,
|
|
238
|
+
fontWeight: _coreTokens["default"].type_regular,
|
|
239
|
+
fontColor: _coreTokens["default"].color_black,
|
|
240
|
+
disabledFontColor: _coreTokens["default"].color_grey_500,
|
|
241
|
+
borderColor: _coreTokens["default"].color_transparent,
|
|
385
242
|
borderRadius: "80px",
|
|
386
|
-
borderThickness:
|
|
387
|
-
borderStyle:
|
|
243
|
+
borderThickness: _coreTokens["default"].border_width_0,
|
|
244
|
+
borderStyle: _coreTokens["default"].border_solid,
|
|
388
245
|
contentPaddingLeft: "16px",
|
|
389
246
|
contentPaddingRight: "16px",
|
|
390
247
|
contentPaddingTop: "0px",
|
|
391
248
|
contentPaddingBottom: "0px",
|
|
392
249
|
iconSize: "24px",
|
|
393
250
|
iconSpacing: "8px",
|
|
394
|
-
iconColor:
|
|
395
|
-
hoverIconColor:
|
|
396
|
-
activeIconColor:
|
|
397
|
-
disabledIconColor:
|
|
398
|
-
focusColor:
|
|
399
|
-
focusBorderStyle:
|
|
400
|
-
focusBorderThickness:
|
|
401
|
-
focusBorderRadius:
|
|
251
|
+
iconColor: _coreTokens["default"].color_grey_800,
|
|
252
|
+
hoverIconColor: _coreTokens["default"].color_grey_900,
|
|
253
|
+
activeIconColor: _coreTokens["default"].color_black,
|
|
254
|
+
disabledIconColor: _coreTokens["default"].color_grey_500,
|
|
255
|
+
focusColor: _coreTokens["default"].color_blue_600,
|
|
256
|
+
focusBorderStyle: _coreTokens["default"].border_solid,
|
|
257
|
+
focusBorderThickness: _coreTokens["default"].border_width_2,
|
|
258
|
+
focusBorderRadius: _coreTokens["default"].border_radius_medium
|
|
402
259
|
},
|
|
403
260
|
dateInput: {
|
|
404
|
-
pickerBackgroundColor:
|
|
405
|
-
pickerFontColor:
|
|
406
|
-
pickerBorderColor:
|
|
407
|
-
pickerSelectedBackgroundColor:
|
|
408
|
-
pickerSelectedFontColor:
|
|
409
|
-
pickerHoverBackgroundColor:
|
|
410
|
-
pickerHoverFontColor:
|
|
411
|
-
pickerActiveBackgroundColor:
|
|
412
|
-
pickerActiveFontColor:
|
|
413
|
-
pickerNonCurrentMonthFontColor:
|
|
414
|
-
pickerCurrentDateBorderColor:
|
|
415
|
-
pickerCurrentDateFontColor:
|
|
416
|
-
pickerCurrentYearFontColor:
|
|
417
|
-
pickerHeaderBackgroundColor:
|
|
418
|
-
pickerHeaderFontColor:
|
|
419
|
-
pickerHeaderHoverBackgroundColor:
|
|
420
|
-
pickerHeaderHoverFontColor:
|
|
421
|
-
pickerHeaderActiveBackgroundColor:
|
|
422
|
-
pickerHeaderActiveFontColor:
|
|
423
|
-
pickerFocusColor:
|
|
424
|
-
pickerBorderWidth:
|
|
425
|
-
pickerBorderStyle:
|
|
426
|
-
pickerFocusWidth:
|
|
427
|
-
pickerCurrentDateBorderWidth:
|
|
428
|
-
pickerFontFamily:
|
|
429
|
-
pickerFontSize:
|
|
430
|
-
pickerFontWeight:
|
|
431
|
-
pickerInteractedYearFontSize:
|
|
432
|
-
pickerHeaderFontSize:
|
|
261
|
+
pickerBackgroundColor: _coreTokens["default"].color_white,
|
|
262
|
+
pickerFontColor: _coreTokens["default"].color_black,
|
|
263
|
+
pickerBorderColor: _coreTokens["default"].color_grey_400,
|
|
264
|
+
pickerSelectedBackgroundColor: _coreTokens["default"].color_purple_700,
|
|
265
|
+
pickerSelectedFontColor: _coreTokens["default"].color_white,
|
|
266
|
+
pickerHoverBackgroundColor: _coreTokens["default"].color_purple_200,
|
|
267
|
+
pickerHoverFontColor: _coreTokens["default"].color_black,
|
|
268
|
+
pickerActiveBackgroundColor: _coreTokens["default"].color_purple_800,
|
|
269
|
+
pickerActiveFontColor: _coreTokens["default"].color_white,
|
|
270
|
+
pickerNonCurrentMonthFontColor: _coreTokens["default"].color_grey_500,
|
|
271
|
+
pickerCurrentDateBorderColor: _coreTokens["default"].color_purple_300,
|
|
272
|
+
pickerCurrentDateFontColor: _coreTokens["default"].color_black,
|
|
273
|
+
pickerCurrentYearFontColor: _coreTokens["default"].color_purple_700,
|
|
274
|
+
pickerHeaderBackgroundColor: _coreTokens["default"].color_transparent,
|
|
275
|
+
pickerHeaderFontColor: _coreTokens["default"].color_black,
|
|
276
|
+
pickerHeaderHoverBackgroundColor: _coreTokens["default"].color_purple_200,
|
|
277
|
+
pickerHeaderHoverFontColor: _coreTokens["default"].color_black,
|
|
278
|
+
pickerHeaderActiveBackgroundColor: _coreTokens["default"].color_purple_800,
|
|
279
|
+
pickerHeaderActiveFontColor: _coreTokens["default"].color_white,
|
|
280
|
+
pickerFocusColor: _coreTokens["default"].color_blue_600,
|
|
281
|
+
pickerBorderWidth: _coreTokens["default"].border_width_1,
|
|
282
|
+
pickerBorderStyle: _coreTokens["default"].border_solid,
|
|
283
|
+
pickerFocusWidth: _coreTokens["default"].border_width_2,
|
|
284
|
+
pickerCurrentDateBorderWidth: _coreTokens["default"].border_width_1,
|
|
285
|
+
pickerFontFamily: _coreTokens["default"].type_sans,
|
|
286
|
+
pickerFontSize: _coreTokens["default"].type_scale_02,
|
|
287
|
+
pickerFontWeight: _coreTokens["default"].type_regular,
|
|
288
|
+
pickerInteractedYearFontSize: _coreTokens["default"].type_scale_05,
|
|
289
|
+
pickerHeaderFontSize: _coreTokens["default"].type_scale_02
|
|
433
290
|
},
|
|
434
291
|
dialog: {
|
|
435
|
-
overlayColor:
|
|
436
|
-
backgroundColor:
|
|
292
|
+
overlayColor: _coreTokens["default"].color_grey_800_a,
|
|
293
|
+
backgroundColor: _coreTokens["default"].color_white,
|
|
437
294
|
closeIconWidth: "24px",
|
|
438
295
|
closeIconHeight: "24px",
|
|
439
296
|
closeIconTopPosition: "20px",
|
|
440
297
|
closeIconRightPosition: "20px",
|
|
441
|
-
closeIconBackgroundColor:
|
|
442
|
-
closeIconBorderColor:
|
|
443
|
-
closeIconColor:
|
|
444
|
-
closeIconBorderThickness:
|
|
445
|
-
closeIconBorderStyle:
|
|
298
|
+
closeIconBackgroundColor: _coreTokens["default"].color_transparent,
|
|
299
|
+
closeIconBorderColor: _coreTokens["default"].border_none,
|
|
300
|
+
closeIconColor: _coreTokens["default"].color_black,
|
|
301
|
+
closeIconBorderThickness: _coreTokens["default"].border_width_0,
|
|
302
|
+
closeIconBorderStyle: _coreTokens["default"].border_solid,
|
|
446
303
|
closeIconBorderRadius: "2px",
|
|
447
304
|
boxShadowOffsetX: "0px",
|
|
448
305
|
boxShadowOffsetY: "1px",
|
|
449
306
|
boxShadowBlur: "3px",
|
|
450
|
-
boxShadowColor:
|
|
307
|
+
boxShadowColor: _coreTokens["default"].color_grey_300_a
|
|
451
308
|
},
|
|
452
309
|
dropdown: {
|
|
453
|
-
buttonBackgroundColor:
|
|
454
|
-
hoverButtonBackgroundColor:
|
|
455
|
-
activeButtonBackgroundColor:
|
|
456
|
-
buttonFontFamily:
|
|
457
|
-
buttonFontSize:
|
|
458
|
-
buttonFontStyle:
|
|
459
|
-
buttonFontWeight:
|
|
460
|
-
buttonFontColor:
|
|
310
|
+
buttonBackgroundColor: _coreTokens["default"].color_white,
|
|
311
|
+
hoverButtonBackgroundColor: _coreTokens["default"].color_grey_100,
|
|
312
|
+
activeButtonBackgroundColor: _coreTokens["default"].color_grey_300,
|
|
313
|
+
buttonFontFamily: _coreTokens["default"].type_sans,
|
|
314
|
+
buttonFontSize: _coreTokens["default"].type_scale_03,
|
|
315
|
+
buttonFontStyle: _coreTokens["default"].type_normal,
|
|
316
|
+
buttonFontWeight: _coreTokens["default"].type_regular,
|
|
317
|
+
buttonFontColor: _coreTokens["default"].color_black,
|
|
461
318
|
buttonIconSize: "20px",
|
|
462
319
|
buttonIconSpacing: "10px",
|
|
463
|
-
buttonIconColor:
|
|
320
|
+
buttonIconColor: _coreTokens["default"].color_black,
|
|
464
321
|
buttonPaddingTop: "0px",
|
|
465
322
|
buttonPaddingBottom: "0px",
|
|
466
323
|
buttonPaddingLeft: "16px",
|
|
467
324
|
buttonPaddingRight: "16px",
|
|
468
|
-
disabledColor:
|
|
469
|
-
disabledButtonBackgroundColor:
|
|
470
|
-
disabledBorderColor:
|
|
471
|
-
optionBackgroundColor:
|
|
472
|
-
hoverOptionBackgroundColor:
|
|
473
|
-
activeOptionBackgroundColor:
|
|
474
|
-
optionFontFamily:
|
|
475
|
-
optionFontSize:
|
|
476
|
-
optionFontStyle:
|
|
477
|
-
optionFontWeight:
|
|
478
|
-
optionFontColor:
|
|
325
|
+
disabledColor: _coreTokens["default"].color_grey_500,
|
|
326
|
+
disabledButtonBackgroundColor: _coreTokens["default"].color_transparent,
|
|
327
|
+
disabledBorderColor: _coreTokens["default"].color_transparent,
|
|
328
|
+
optionBackgroundColor: _coreTokens["default"].color_white,
|
|
329
|
+
hoverOptionBackgroundColor: _coreTokens["default"].color_grey_100,
|
|
330
|
+
activeOptionBackgroundColor: _coreTokens["default"].color_grey_300,
|
|
331
|
+
optionFontFamily: _coreTokens["default"].type_sans,
|
|
332
|
+
optionFontSize: _coreTokens["default"].type_scale_root,
|
|
333
|
+
optionFontStyle: _coreTokens["default"].type_normal,
|
|
334
|
+
optionFontWeight: _coreTokens["default"].type_regular,
|
|
335
|
+
optionFontColor: _coreTokens["default"].color_black,
|
|
479
336
|
optionIconSize: "20px",
|
|
480
337
|
optionIconSpacing: "10px",
|
|
481
|
-
optionIconColor:
|
|
338
|
+
optionIconColor: _coreTokens["default"].color_black,
|
|
482
339
|
optionPaddingTop: "6px",
|
|
483
340
|
optionPaddingBottom: "6px",
|
|
484
341
|
optionPaddingLeft: "16px",
|
|
485
342
|
optionPaddingRight: "16px",
|
|
486
343
|
caretIconSize: "24px",
|
|
487
|
-
caretIconColor:
|
|
344
|
+
caretIconColor: _coreTokens["default"].color_black,
|
|
488
345
|
caretIconSpacing: "12px",
|
|
489
346
|
borderRadius: "4px",
|
|
490
|
-
borderStyle:
|
|
491
|
-
borderThickness:
|
|
492
|
-
borderColor:
|
|
493
|
-
scrollBarThumbColor:
|
|
494
|
-
scrollBarTrackColor:
|
|
495
|
-
focusColor:
|
|
347
|
+
borderStyle: _coreTokens["default"].border_none,
|
|
348
|
+
borderThickness: _coreTokens["default"].border_width_0,
|
|
349
|
+
borderColor: _coreTokens["default"].color_transparent,
|
|
350
|
+
scrollBarThumbColor: _coreTokens["default"].color_grey_700,
|
|
351
|
+
scrollBarTrackColor: _coreTokens["default"].color_grey_300,
|
|
352
|
+
focusColor: _coreTokens["default"].color_blue_600
|
|
496
353
|
},
|
|
497
354
|
fileInput: {
|
|
498
|
-
dropBorderColor:
|
|
499
|
-
fileItemBorderColor:
|
|
500
|
-
fileNameFontColor:
|
|
501
|
-
labelFontColor:
|
|
502
|
-
helperTextFontColor:
|
|
503
|
-
dropLabelFontColor:
|
|
504
|
-
disabledLabelFontColor:
|
|
505
|
-
disabledHelperTextFontcolor:
|
|
506
|
-
disabledDropLabelFontColor:
|
|
507
|
-
focusDropBorderColor:
|
|
508
|
-
disabledDropBorderColor:
|
|
509
|
-
dragoverDropBackgroundColor:
|
|
510
|
-
activeFileItemIconBackgrounColor:
|
|
511
|
-
errorFileItemBorderColor:
|
|
512
|
-
errorFileItemBackgroundColor:
|
|
513
|
-
errorFilePreviewBackgroundColor:
|
|
514
|
-
errorFileItemIconColor:
|
|
515
|
-
fileItemIconBackgroundColor:
|
|
516
|
-
deleteFileItemColor:
|
|
517
|
-
errorMessageFontColor:
|
|
518
|
-
labelFontFamily:
|
|
519
|
-
labelFontSize:
|
|
520
|
-
labelFontWeight:
|
|
521
|
-
labelLineHeight:
|
|
522
|
-
fileItemFontFamily:
|
|
523
|
-
fileItemFontSize:
|
|
524
|
-
fileItemFontWeight:
|
|
525
|
-
fileItemLineHeight:
|
|
526
|
-
helperTextFontFamily:
|
|
527
|
-
helperTextFontSize:
|
|
528
|
-
helperTextFontWeight:
|
|
529
|
-
helperTextLineHeight:
|
|
530
|
-
dropLabelFontFamily:
|
|
531
|
-
dropLabelFontSize:
|
|
532
|
-
dropLabelFontWeight:
|
|
533
|
-
errorMessageFontFamily:
|
|
534
|
-
errorMessageFontSize:
|
|
535
|
-
errorMessageFontWeight:
|
|
536
|
-
errorMessageLineHeight:
|
|
537
|
-
dropBorderThickness:
|
|
538
|
-
dropBorderStyle:
|
|
539
|
-
dropBorderRadius:
|
|
540
|
-
fileItemBorderThickness:
|
|
541
|
-
fileItemBorderStyle:
|
|
542
|
-
fileItemBorderRadius:
|
|
543
|
-
hoverDeleteFileItemBackgroundColor:
|
|
544
|
-
activeDeleteFileItemBackgroundColor:
|
|
545
|
-
focusDeleteFileItemBorderColor:
|
|
546
|
-
filePreviewBackgroundColor:
|
|
547
|
-
filePreviewIconColor:
|
|
548
|
-
errorFilePreviewIconColor:
|
|
355
|
+
dropBorderColor: _coreTokens["default"].color_black,
|
|
356
|
+
fileItemBorderColor: _coreTokens["default"].color_grey_300,
|
|
357
|
+
fileNameFontColor: _coreTokens["default"].color_black,
|
|
358
|
+
labelFontColor: _coreTokens["default"].color_black,
|
|
359
|
+
helperTextFontColor: _coreTokens["default"].color_black,
|
|
360
|
+
dropLabelFontColor: _coreTokens["default"].color_black,
|
|
361
|
+
disabledLabelFontColor: _coreTokens["default"].color_grey_500,
|
|
362
|
+
disabledHelperTextFontcolor: _coreTokens["default"].color_grey_500,
|
|
363
|
+
disabledDropLabelFontColor: _coreTokens["default"].color_grey_500,
|
|
364
|
+
focusDropBorderColor: _coreTokens["default"].color_blue_600,
|
|
365
|
+
disabledDropBorderColor: _coreTokens["default"].color_grey_500,
|
|
366
|
+
dragoverDropBackgroundColor: _coreTokens["default"].color_blue_50,
|
|
367
|
+
activeFileItemIconBackgrounColor: _coreTokens["default"].color_grey_300,
|
|
368
|
+
errorFileItemBorderColor: _coreTokens["default"].color_red_700,
|
|
369
|
+
errorFileItemBackgroundColor: _coreTokens["default"].color_red_50,
|
|
370
|
+
errorFilePreviewBackgroundColor: _coreTokens["default"].color_red_200,
|
|
371
|
+
errorFileItemIconColor: _coreTokens["default"].color_red_700,
|
|
372
|
+
fileItemIconBackgroundColor: _coreTokens["default"].color_grey_100,
|
|
373
|
+
deleteFileItemColor: _coreTokens["default"].color_black,
|
|
374
|
+
errorMessageFontColor: _coreTokens["default"].color_red_700,
|
|
375
|
+
labelFontFamily: _coreTokens["default"].type_sans,
|
|
376
|
+
labelFontSize: _coreTokens["default"].type_scale_02,
|
|
377
|
+
labelFontWeight: _coreTokens["default"].type_semibold,
|
|
378
|
+
labelLineHeight: _coreTokens["default"].type_leading_loose_01,
|
|
379
|
+
fileItemFontFamily: _coreTokens["default"].type_sans,
|
|
380
|
+
fileItemFontSize: _coreTokens["default"].type_scale_02,
|
|
381
|
+
fileItemFontWeight: _coreTokens["default"].type_regular,
|
|
382
|
+
fileItemLineHeight: _coreTokens["default"].type_leading_normal,
|
|
383
|
+
helperTextFontFamily: _coreTokens["default"].type_sans,
|
|
384
|
+
helperTextFontSize: _coreTokens["default"].type_scale_01,
|
|
385
|
+
helperTextFontWeight: _coreTokens["default"].type_regular,
|
|
386
|
+
helperTextLineHeight: _coreTokens["default"].type_leading_normal,
|
|
387
|
+
dropLabelFontFamily: _coreTokens["default"].type_sans,
|
|
388
|
+
dropLabelFontSize: _coreTokens["default"].type_scale_03,
|
|
389
|
+
dropLabelFontWeight: _coreTokens["default"].type_regular,
|
|
390
|
+
errorMessageFontFamily: _coreTokens["default"].type_sans,
|
|
391
|
+
errorMessageFontSize: _coreTokens["default"].type_scale_01,
|
|
392
|
+
errorMessageFontWeight: _coreTokens["default"].type_regular,
|
|
393
|
+
errorMessageLineHeight: _coreTokens["default"].type_leading_normal,
|
|
394
|
+
dropBorderThickness: _coreTokens["default"].border_width_1,
|
|
395
|
+
dropBorderStyle: _coreTokens["default"].border_dashed,
|
|
396
|
+
dropBorderRadius: _coreTokens["default"].border_radius_large,
|
|
397
|
+
fileItemBorderThickness: _coreTokens["default"].border_width_1,
|
|
398
|
+
fileItemBorderStyle: _coreTokens["default"].border_solid,
|
|
399
|
+
fileItemBorderRadius: _coreTokens["default"].border_radius_medium,
|
|
400
|
+
hoverDeleteFileItemBackgroundColor: _coreTokens["default"].color_grey_100_a,
|
|
401
|
+
activeDeleteFileItemBackgroundColor: _coreTokens["default"].color_grey_300_a,
|
|
402
|
+
focusDeleteFileItemBorderColor: _coreTokens["default"].color_blue_600,
|
|
403
|
+
filePreviewBackgroundColor: _coreTokens["default"].color_grey_100,
|
|
404
|
+
filePreviewIconColor: _coreTokens["default"].color_grey_600,
|
|
405
|
+
errorFilePreviewIconColor: _coreTokens["default"].color_red_700
|
|
549
406
|
},
|
|
550
407
|
footer: {
|
|
551
408
|
height: "124px",
|
|
552
|
-
backgroundColor:
|
|
553
|
-
bottomLinksDividerColor:
|
|
409
|
+
backgroundColor: _coreTokens["default"].color_black,
|
|
410
|
+
bottomLinksDividerColor: _coreTokens["default"].color_blue_600,
|
|
554
411
|
bottomLinksDividerThickness: "1px",
|
|
555
|
-
bottomLinksDividerStyle:
|
|
412
|
+
bottomLinksDividerStyle: _coreTokens["default"].border_solid,
|
|
556
413
|
bottomLinksDividerSpacing: "8px",
|
|
557
|
-
bottomLinksFontFamily:
|
|
558
|
-
bottomLinksFontSize:
|
|
559
|
-
bottomLinksFontStyle:
|
|
560
|
-
bottomLinksFontWeight:
|
|
561
|
-
bottomLinksFontColor:
|
|
562
|
-
bottomLinksTextDecoration:
|
|
563
|
-
copyrightFontFamily:
|
|
564
|
-
copyrightFontSize:
|
|
565
|
-
copyrightFontStyle:
|
|
566
|
-
copyrightFontWeight:
|
|
567
|
-
copyrightFontColor:
|
|
414
|
+
bottomLinksFontFamily: _coreTokens["default"].type_sans,
|
|
415
|
+
bottomLinksFontSize: _coreTokens["default"].type_scale_01,
|
|
416
|
+
bottomLinksFontStyle: _coreTokens["default"].type_normal,
|
|
417
|
+
bottomLinksFontWeight: _coreTokens["default"].type_regular,
|
|
418
|
+
bottomLinksFontColor: _coreTokens["default"].color_white,
|
|
419
|
+
bottomLinksTextDecoration: _coreTokens["default"].type_no_line,
|
|
420
|
+
copyrightFontFamily: _coreTokens["default"].type_sans,
|
|
421
|
+
copyrightFontSize: _coreTokens["default"].type_scale_01,
|
|
422
|
+
copyrightFontStyle: _coreTokens["default"].type_normal,
|
|
423
|
+
copyrightFontWeight: _coreTokens["default"].type_regular,
|
|
424
|
+
copyrightFontColor: _coreTokens["default"].color_white,
|
|
568
425
|
logo: "",
|
|
569
426
|
logoHeight: "32px",
|
|
570
427
|
logoWidth: "auto",
|
|
571
428
|
socialLinksSize: "24px",
|
|
572
429
|
socialLinksGutter: "16px",
|
|
573
|
-
socialLinksColor:
|
|
430
|
+
socialLinksColor: _coreTokens["default"].color_white
|
|
574
431
|
},
|
|
575
432
|
header: {
|
|
576
|
-
backgroundColor:
|
|
577
|
-
hamburguerFocusColor:
|
|
578
|
-
hamburguerFontFamily:
|
|
579
|
-
hamburguerFontStyle:
|
|
580
|
-
hamburguerFontColor:
|
|
433
|
+
backgroundColor: _coreTokens["default"].color_white,
|
|
434
|
+
hamburguerFocusColor: _coreTokens["default"].color_blue_600,
|
|
435
|
+
hamburguerFontFamily: _coreTokens["default"].type_sans,
|
|
436
|
+
hamburguerFontStyle: _coreTokens["default"].type_normal,
|
|
437
|
+
hamburguerFontColor: _coreTokens["default"].color_black,
|
|
581
438
|
hamburguerFontSize: "10px",
|
|
582
|
-
hamburguerFontWeight:
|
|
583
|
-
hamburguerTextTransform:
|
|
584
|
-
hamburguerIconColor:
|
|
585
|
-
hamburguerHoverColor:
|
|
439
|
+
hamburguerFontWeight: _coreTokens["default"].type_semibold,
|
|
440
|
+
hamburguerTextTransform: _coreTokens["default"].type_uppercase,
|
|
441
|
+
hamburguerIconColor: _coreTokens["default"].color_black,
|
|
442
|
+
hamburguerHoverColor: _coreTokens["default"].color_grey_200,
|
|
586
443
|
logo: "",
|
|
587
444
|
logoResponsive: "",
|
|
588
445
|
logoHeight: "40px",
|
|
589
446
|
logoWidth: "auto",
|
|
590
|
-
menuBackgroundColor:
|
|
447
|
+
menuBackgroundColor: _coreTokens["default"].color_white,
|
|
591
448
|
menuZindex: "2000",
|
|
592
449
|
menuTabletWidth: "60vw",
|
|
593
450
|
menuMobileWidth: "100vw",
|
|
594
451
|
minHeight: "64px",
|
|
595
|
-
overlayColor:
|
|
452
|
+
overlayColor: _coreTokens["default"].color_grey_800_a,
|
|
596
453
|
overlayOpacity: "0.7",
|
|
597
454
|
overlayZindex: "1600",
|
|
598
455
|
paddingTop: "0px",
|
|
599
456
|
paddingBottom: "0px",
|
|
600
457
|
paddingRight: "24px",
|
|
601
458
|
paddingLeft: "24px",
|
|
602
|
-
underlinedColor:
|
|
459
|
+
underlinedColor: _coreTokens["default"].color_black,
|
|
603
460
|
underlinedThickness: "2px",
|
|
604
|
-
underlinedStyle:
|
|
605
|
-
contentColor:
|
|
606
|
-
contentColorOnDark:
|
|
461
|
+
underlinedStyle: _coreTokens["default"].border_solid,
|
|
462
|
+
contentColor: _coreTokens["default"].color_black,
|
|
463
|
+
contentColorOnDark: _coreTokens["default"].color_white
|
|
607
464
|
},
|
|
608
465
|
heading: {
|
|
609
|
-
level1FontColor:
|
|
610
|
-
level1FontFamily:
|
|
611
|
-
level1FontSize:
|
|
612
|
-
level1FontStyle:
|
|
613
|
-
level1FontWeight:
|
|
614
|
-
level1LineHeight:
|
|
615
|
-
level1LetterSpacing:
|
|
616
|
-
level2FontColor:
|
|
617
|
-
level2FontFamily:
|
|
618
|
-
level2FontSize:
|
|
619
|
-
level2FontStyle:
|
|
620
|
-
level2FontWeight:
|
|
621
|
-
level2LineHeight:
|
|
622
|
-
level2LetterSpacing:
|
|
623
|
-
level3FontColor:
|
|
624
|
-
level3FontFamily:
|
|
625
|
-
level3FontSize:
|
|
626
|
-
level3FontStyle:
|
|
627
|
-
level3FontWeight:
|
|
628
|
-
level3LineHeight:
|
|
629
|
-
level3LetterSpacing:
|
|
630
|
-
level4FontColor:
|
|
631
|
-
level4FontFamily:
|
|
632
|
-
level4FontSize:
|
|
633
|
-
level4FontStyle:
|
|
634
|
-
level4FontWeight:
|
|
635
|
-
level4LineHeight:
|
|
636
|
-
level4LetterSpacing:
|
|
637
|
-
level5FontColor:
|
|
638
|
-
level5FontFamily:
|
|
639
|
-
level5FontSize:
|
|
640
|
-
level5FontStyle:
|
|
641
|
-
level5FontWeight:
|
|
642
|
-
level5LineHeight:
|
|
643
|
-
level5LetterSpacing:
|
|
466
|
+
level1FontColor: _coreTokens["default"].inherit,
|
|
467
|
+
level1FontFamily: _coreTokens["default"].type_sans,
|
|
468
|
+
level1FontSize: _coreTokens["default"].type_scale_07,
|
|
469
|
+
level1FontStyle: _coreTokens["default"].type_normal,
|
|
470
|
+
level1FontWeight: _coreTokens["default"].type_semibold,
|
|
471
|
+
level1LineHeight: _coreTokens["default"].type_leading_compact_01,
|
|
472
|
+
level1LetterSpacing: _coreTokens["default"].type_spacing_tight_01,
|
|
473
|
+
level2FontColor: _coreTokens["default"].inherit,
|
|
474
|
+
level2FontFamily: _coreTokens["default"].type_sans,
|
|
475
|
+
level2FontSize: _coreTokens["default"].type_scale_05,
|
|
476
|
+
level2FontStyle: _coreTokens["default"].type_normal,
|
|
477
|
+
level2FontWeight: _coreTokens["default"].type_semibold,
|
|
478
|
+
level2LineHeight: _coreTokens["default"].type_leading_normal,
|
|
479
|
+
level2LetterSpacing: _coreTokens["default"].type_spacing_normal,
|
|
480
|
+
level3FontColor: _coreTokens["default"].inherit,
|
|
481
|
+
level3FontFamily: _coreTokens["default"].type_sans,
|
|
482
|
+
level3FontSize: _coreTokens["default"].type_scale_04,
|
|
483
|
+
level3FontStyle: _coreTokens["default"].type_normal,
|
|
484
|
+
level3FontWeight: _coreTokens["default"].type_semibold,
|
|
485
|
+
level3LineHeight: _coreTokens["default"].type_leading_compact_01,
|
|
486
|
+
level3LetterSpacing: _coreTokens["default"].type_spacing_wide_01,
|
|
487
|
+
level4FontColor: _coreTokens["default"].inherit,
|
|
488
|
+
level4FontFamily: _coreTokens["default"].type_sans,
|
|
489
|
+
level4FontSize: _coreTokens["default"].type_scale_03,
|
|
490
|
+
level4FontStyle: _coreTokens["default"].type_normal,
|
|
491
|
+
level4FontWeight: _coreTokens["default"].type_semibold,
|
|
492
|
+
level4LineHeight: _coreTokens["default"].type_leading_normal,
|
|
493
|
+
level4LetterSpacing: _coreTokens["default"].type_spacing_normal,
|
|
494
|
+
level5FontColor: _coreTokens["default"].inherit,
|
|
495
|
+
level5FontFamily: _coreTokens["default"].type_sans,
|
|
496
|
+
level5FontSize: _coreTokens["default"].type_scale_02,
|
|
497
|
+
level5FontStyle: _coreTokens["default"].type_normal,
|
|
498
|
+
level5FontWeight: _coreTokens["default"].type_semibold,
|
|
499
|
+
level5LineHeight: _coreTokens["default"].type_leading_normal,
|
|
500
|
+
level5LetterSpacing: _coreTokens["default"].type_spacing_wide_01
|
|
644
501
|
},
|
|
645
502
|
link: {
|
|
646
|
-
fontColor:
|
|
647
|
-
fontFamily:
|
|
648
|
-
fontSize:
|
|
649
|
-
fontStyle:
|
|
650
|
-
fontWeight:
|
|
503
|
+
fontColor: _coreTokens["default"].color_blue_800,
|
|
504
|
+
fontFamily: _coreTokens["default"].inherit,
|
|
505
|
+
fontSize: _coreTokens["default"].inherit,
|
|
506
|
+
fontStyle: _coreTokens["default"].type_normal,
|
|
507
|
+
fontWeight: _coreTokens["default"].type_regular,
|
|
651
508
|
iconSize: "16px",
|
|
652
509
|
iconSpacing: "4px",
|
|
653
510
|
underlineSpacing: "0px",
|
|
654
|
-
underlineStyle:
|
|
511
|
+
underlineStyle: _coreTokens["default"].border_solid,
|
|
655
512
|
underlineThickness: "1px",
|
|
656
|
-
|
|
657
|
-
hoverFontColor:
|
|
658
|
-
hoverUnderlineColor:
|
|
659
|
-
visitedFontColor:
|
|
660
|
-
visitedUnderlineColor:
|
|
661
|
-
activeFontColor:
|
|
662
|
-
activeUnderlineColor:
|
|
663
|
-
focusColor:
|
|
513
|
+
disabledFontColor: _coreTokens["default"].color_grey_500,
|
|
514
|
+
hoverFontColor: _coreTokens["default"].color_blue_800,
|
|
515
|
+
hoverUnderlineColor: _coreTokens["default"].color_blue_800,
|
|
516
|
+
visitedFontColor: _coreTokens["default"].color_purple_700,
|
|
517
|
+
visitedUnderlineColor: _coreTokens["default"].color_purple_700,
|
|
518
|
+
activeFontColor: _coreTokens["default"].color_black,
|
|
519
|
+
activeUnderlineColor: _coreTokens["default"].color_black,
|
|
520
|
+
focusColor: _coreTokens["default"].color_blue_600
|
|
664
521
|
},
|
|
665
522
|
navTabs: {
|
|
666
|
-
selectedBackgroundColor:
|
|
667
|
-
unselectedBackgroundColor:
|
|
668
|
-
hoverBackgroundColor:
|
|
669
|
-
pressedBackgroundColor:
|
|
670
|
-
selectedFontColor:
|
|
671
|
-
unselectedFontColor:
|
|
672
|
-
disabledFontColor:
|
|
673
|
-
focusOutline:
|
|
674
|
-
selectedUnderlineColor:
|
|
675
|
-
dividerColor:
|
|
676
|
-
fontFamily:
|
|
677
|
-
fontSize:
|
|
678
|
-
fontStyle:
|
|
679
|
-
fontWeight:
|
|
680
|
-
selectedIconColor:
|
|
681
|
-
unselectedIconColor:
|
|
682
|
-
disabledIconColor:
|
|
523
|
+
selectedBackgroundColor: _coreTokens["default"].color_white,
|
|
524
|
+
unselectedBackgroundColor: _coreTokens["default"].color_white,
|
|
525
|
+
hoverBackgroundColor: _coreTokens["default"].color_grey_100,
|
|
526
|
+
pressedBackgroundColor: _coreTokens["default"].color_grey_200,
|
|
527
|
+
selectedFontColor: _coreTokens["default"].color_grey_700,
|
|
528
|
+
unselectedFontColor: _coreTokens["default"].color_grey_700,
|
|
529
|
+
disabledFontColor: _coreTokens["default"].color_grey_500,
|
|
530
|
+
focusOutline: _coreTokens["default"].color_blue_600,
|
|
531
|
+
selectedUnderlineColor: _coreTokens["default"].color_purple_700,
|
|
532
|
+
dividerColor: _coreTokens["default"].color_grey_400,
|
|
533
|
+
fontFamily: _coreTokens["default"].type_sans,
|
|
534
|
+
fontSize: _coreTokens["default"].type_scale_03,
|
|
535
|
+
fontStyle: _coreTokens["default"].type_normal,
|
|
536
|
+
fontWeight: _coreTokens["default"].type_regular,
|
|
537
|
+
selectedIconColor: _coreTokens["default"].color_grey_700,
|
|
538
|
+
unselectedIconColor: _coreTokens["default"].color_grey_700,
|
|
539
|
+
disabledIconColor: _coreTokens["default"].color_grey_500
|
|
683
540
|
},
|
|
684
541
|
paginator: {
|
|
685
|
-
backgroundColor:
|
|
686
|
-
fontColor:
|
|
687
|
-
fontFamily:
|
|
688
|
-
fontSize:
|
|
689
|
-
fontStyle:
|
|
690
|
-
fontWeight:
|
|
542
|
+
backgroundColor: _coreTokens["default"].color_grey_100,
|
|
543
|
+
fontColor: _coreTokens["default"].color_black,
|
|
544
|
+
fontFamily: _coreTokens["default"].type_sans,
|
|
545
|
+
fontSize: _coreTokens["default"].type_scale_02,
|
|
546
|
+
fontStyle: _coreTokens["default"].type_normal,
|
|
547
|
+
fontWeight: _coreTokens["default"].type_regular,
|
|
691
548
|
fontTextTransform: "none",
|
|
692
549
|
verticalPadding: "0.75rem",
|
|
693
550
|
horizontalPadding: "2rem",
|
|
@@ -701,340 +558,340 @@ var componentTokens = {
|
|
|
701
558
|
totalItemsContainerMarginLeft: "0px"
|
|
702
559
|
},
|
|
703
560
|
paragraph: {
|
|
704
|
-
fontColor:
|
|
705
|
-
fontColorOnDark:
|
|
561
|
+
fontColor: _coreTokens["default"].color_black,
|
|
562
|
+
fontColorOnDark: _coreTokens["default"].color_white,
|
|
706
563
|
display: "block",
|
|
707
|
-
fontSize:
|
|
708
|
-
fontWeight:
|
|
564
|
+
fontSize: _coreTokens["default"].type_scale_03,
|
|
565
|
+
fontWeight: _coreTokens["default"].type_regular
|
|
709
566
|
},
|
|
710
567
|
progressBar: {
|
|
711
|
-
trackLineColor:
|
|
712
|
-
trackLineColorOnDark:
|
|
713
|
-
totalLineColor:
|
|
714
|
-
labelFontFamily:
|
|
715
|
-
labelFontSize:
|
|
716
|
-
labelFontStyle:
|
|
717
|
-
labelFontWeight:
|
|
718
|
-
labelFontColor:
|
|
719
|
-
labelFontColorOnDark:
|
|
720
|
-
labelFontTextTransform:
|
|
721
|
-
valueFontFamily:
|
|
722
|
-
valueFontSize:
|
|
723
|
-
valueFontStyle:
|
|
724
|
-
valueFontWeight:
|
|
725
|
-
valueFontColor:
|
|
726
|
-
valueFontColorOnDark:
|
|
727
|
-
valueFontTextTransform:
|
|
728
|
-
helperTextFontColor:
|
|
729
|
-
helperTextFontColorOnDark:
|
|
730
|
-
helperTextFontSize:
|
|
731
|
-
helperTextFontStyle:
|
|
732
|
-
helperTextFontWeight:
|
|
733
|
-
helperTextFontFamily:
|
|
568
|
+
trackLineColor: _coreTokens["default"].color_purple_700,
|
|
569
|
+
trackLineColorOnDark: _coreTokens["default"].color_purple_500,
|
|
570
|
+
totalLineColor: _coreTokens["default"].color_grey_200,
|
|
571
|
+
labelFontFamily: _coreTokens["default"].type_sans,
|
|
572
|
+
labelFontSize: _coreTokens["default"].type_scale_01,
|
|
573
|
+
labelFontStyle: _coreTokens["default"].type_normal,
|
|
574
|
+
labelFontWeight: _coreTokens["default"].type_regular,
|
|
575
|
+
labelFontColor: _coreTokens["default"].color_black,
|
|
576
|
+
labelFontColorOnDark: _coreTokens["default"].color_white,
|
|
577
|
+
labelFontTextTransform: _coreTokens["default"].type_uppercase,
|
|
578
|
+
valueFontFamily: _coreTokens["default"].type_sans,
|
|
579
|
+
valueFontSize: _coreTokens["default"].type_scale_01,
|
|
580
|
+
valueFontStyle: _coreTokens["default"].type_normal,
|
|
581
|
+
valueFontWeight: _coreTokens["default"].type_regular,
|
|
582
|
+
valueFontColor: _coreTokens["default"].color_black,
|
|
583
|
+
valueFontColorOnDark: _coreTokens["default"].color_white,
|
|
584
|
+
valueFontTextTransform: _coreTokens["default"].type_uppercase,
|
|
585
|
+
helperTextFontColor: _coreTokens["default"].color_black,
|
|
586
|
+
helperTextFontColorOnDark: _coreTokens["default"].color_white,
|
|
587
|
+
helperTextFontSize: _coreTokens["default"].type_scale_01,
|
|
588
|
+
helperTextFontStyle: _coreTokens["default"].type_normal,
|
|
589
|
+
helperTextFontWeight: _coreTokens["default"].type_regular,
|
|
590
|
+
helperTextFontFamily: _coreTokens["default"].type_sans,
|
|
734
591
|
thickness: "9px",
|
|
735
592
|
borderRadius: "5px",
|
|
736
|
-
overlayColor:
|
|
737
|
-
overlayFontColor:
|
|
593
|
+
overlayColor: _coreTokens["default"].color_grey_800_a,
|
|
594
|
+
overlayFontColor: _coreTokens["default"].color_white
|
|
738
595
|
},
|
|
739
596
|
quickNav: {
|
|
740
|
-
fontColor:
|
|
741
|
-
hoverFontColor:
|
|
742
|
-
dividerBorderColor:
|
|
743
|
-
focusBorderColor:
|
|
744
|
-
focusBorderStyle:
|
|
745
|
-
focusBorderThickness:
|
|
746
|
-
focusBorderRadius:
|
|
747
|
-
paddingTop:
|
|
748
|
-
paddingBottom:
|
|
749
|
-
paddingLeft:
|
|
750
|
-
paddingRight:
|
|
751
|
-
fontFamily:
|
|
752
|
-
fontSize:
|
|
753
|
-
fontStyle:
|
|
754
|
-
fontWeight:
|
|
597
|
+
fontColor: _coreTokens["default"].color_grey_700,
|
|
598
|
+
hoverFontColor: _coreTokens["default"].color_purple_600,
|
|
599
|
+
dividerBorderColor: _coreTokens["default"].color_grey_400,
|
|
600
|
+
focusBorderColor: _coreTokens["default"].color_blue_600,
|
|
601
|
+
focusBorderStyle: _coreTokens["default"].border_solid,
|
|
602
|
+
focusBorderThickness: _coreTokens["default"].border_width_2,
|
|
603
|
+
focusBorderRadius: _coreTokens["default"].border_width_2,
|
|
604
|
+
paddingTop: _coreTokens["default"].spacing_8,
|
|
605
|
+
paddingBottom: _coreTokens["default"].spacing_8,
|
|
606
|
+
paddingLeft: _coreTokens["default"].spacing_16,
|
|
607
|
+
paddingRight: _coreTokens["default"].spacing_16,
|
|
608
|
+
fontFamily: _coreTokens["default"].type_sans,
|
|
609
|
+
fontSize: _coreTokens["default"].type_scale_02,
|
|
610
|
+
fontStyle: _coreTokens["default"].type_normal,
|
|
611
|
+
fontWeight: _coreTokens["default"].type_regular
|
|
755
612
|
},
|
|
756
613
|
radioGroup: {
|
|
757
|
-
fontFamily:
|
|
758
|
-
radioInputColor:
|
|
759
|
-
hoverRadioInputColor:
|
|
760
|
-
focusBorderColor:
|
|
761
|
-
activeRadioInputColor:
|
|
762
|
-
errorRadioInputColor:
|
|
763
|
-
hoverErrorRadioInputColor:
|
|
764
|
-
activeErrorRadioInputColor:
|
|
765
|
-
readonlyRadioInputColor:
|
|
766
|
-
hoverReadonlyRadioInputColor:
|
|
767
|
-
activeReadonlyRadioInputColor:
|
|
768
|
-
disabledRadioInputColor:
|
|
769
|
-
disabledLabelFontColor:
|
|
770
|
-
disabledHelperTextFontColor:
|
|
771
|
-
disabledRadioInputLabelFontColor:
|
|
772
|
-
errorMessageColor:
|
|
773
|
-
labelFontColor:
|
|
774
|
-
labelFontSize:
|
|
775
|
-
labelFontStyle:
|
|
776
|
-
labelFontWeight:
|
|
777
|
-
labelLineHeight:
|
|
778
|
-
optionalLabelFontWeight:
|
|
779
|
-
helperTextFontColor:
|
|
780
|
-
helperTextFontSize:
|
|
781
|
-
helperTextFontStyle:
|
|
782
|
-
helperTextFontWeight:
|
|
783
|
-
helperTextLineHeight:
|
|
784
|
-
radioInputLabelFontColor:
|
|
785
|
-
radioInputLabelFontSize:
|
|
786
|
-
radioInputLabelFontStyle:
|
|
787
|
-
radioInputLabelFontWeight:
|
|
788
|
-
radioInputLabelLineHeight:
|
|
789
|
-
groupLabelMargin:
|
|
790
|
-
radioInputLabelMargin:
|
|
791
|
-
groupVerticalGutter:
|
|
792
|
-
groupHorizontalGutter:
|
|
614
|
+
fontFamily: _coreTokens["default"].type_sans,
|
|
615
|
+
radioInputColor: _coreTokens["default"].color_blue_700,
|
|
616
|
+
hoverRadioInputColor: _coreTokens["default"].color_blue_800,
|
|
617
|
+
focusBorderColor: _coreTokens["default"].color_blue_600,
|
|
618
|
+
activeRadioInputColor: _coreTokens["default"].color_blue_900,
|
|
619
|
+
errorRadioInputColor: _coreTokens["default"].color_red_700,
|
|
620
|
+
hoverErrorRadioInputColor: _coreTokens["default"].color_red_800,
|
|
621
|
+
activeErrorRadioInputColor: _coreTokens["default"].color_red_900,
|
|
622
|
+
readonlyRadioInputColor: _coreTokens["default"].color_grey_500,
|
|
623
|
+
hoverReadonlyRadioInputColor: _coreTokens["default"].color_grey_600,
|
|
624
|
+
activeReadonlyRadioInputColor: _coreTokens["default"].color_grey_700,
|
|
625
|
+
disabledRadioInputColor: _coreTokens["default"].color_grey_500,
|
|
626
|
+
disabledLabelFontColor: _coreTokens["default"].color_grey_500,
|
|
627
|
+
disabledHelperTextFontColor: _coreTokens["default"].color_grey_500,
|
|
628
|
+
disabledRadioInputLabelFontColor: _coreTokens["default"].color_grey_500,
|
|
629
|
+
errorMessageColor: _coreTokens["default"].color_red_700,
|
|
630
|
+
labelFontColor: _coreTokens["default"].color_black,
|
|
631
|
+
labelFontSize: _coreTokens["default"].type_scale_02,
|
|
632
|
+
labelFontStyle: _coreTokens["default"].type_normal,
|
|
633
|
+
labelFontWeight: _coreTokens["default"].type_semibold,
|
|
634
|
+
labelLineHeight: _coreTokens["default"].type_leading_loose_01,
|
|
635
|
+
optionalLabelFontWeight: _coreTokens["default"].type_regular,
|
|
636
|
+
helperTextFontColor: _coreTokens["default"].color_black,
|
|
637
|
+
helperTextFontSize: _coreTokens["default"].type_scale_01,
|
|
638
|
+
helperTextFontStyle: _coreTokens["default"].type_normal,
|
|
639
|
+
helperTextFontWeight: _coreTokens["default"].type_regular,
|
|
640
|
+
helperTextLineHeight: _coreTokens["default"].type_leading_normal,
|
|
641
|
+
radioInputLabelFontColor: _coreTokens["default"].color_black,
|
|
642
|
+
radioInputLabelFontSize: _coreTokens["default"].type_scale_02,
|
|
643
|
+
radioInputLabelFontStyle: _coreTokens["default"].type_normal,
|
|
644
|
+
radioInputLabelFontWeight: _coreTokens["default"].type_regular,
|
|
645
|
+
radioInputLabelLineHeight: _coreTokens["default"].type_leading_loose_01,
|
|
646
|
+
groupLabelMargin: _coreTokens["default"].spacing_8,
|
|
647
|
+
radioInputLabelMargin: _coreTokens["default"].spacing_8,
|
|
648
|
+
groupVerticalGutter: _coreTokens["default"].spacing_4,
|
|
649
|
+
groupHorizontalGutter: _coreTokens["default"].spacing_32
|
|
793
650
|
},
|
|
794
651
|
select: {
|
|
795
|
-
fontFamily:
|
|
796
|
-
disabledColor:
|
|
797
|
-
enabledInputBorderColor:
|
|
798
|
-
hoverInputBorderColor:
|
|
799
|
-
focusInputBorderColor:
|
|
800
|
-
errorInputBorderColor:
|
|
801
|
-
hoverInputErrorBorderColor:
|
|
802
|
-
disabledInputBorderColor:
|
|
803
|
-
disabledInputBackgroundColor:
|
|
804
|
-
inputMarginTop:
|
|
805
|
-
inputMarginBottom:
|
|
806
|
-
errorMessageColor:
|
|
807
|
-
errorIconColor:
|
|
808
|
-
labelFontColor:
|
|
809
|
-
labelFontSize:
|
|
810
|
-
labelFontStyle:
|
|
811
|
-
labelFontWeight:
|
|
812
|
-
labelLineHeight:
|
|
813
|
-
optionalLabelFontWeight:
|
|
814
|
-
helperTextFontColor:
|
|
815
|
-
helperTextFontSize:
|
|
816
|
-
helperTextFontStyle:
|
|
817
|
-
helperTextFontWeight:
|
|
818
|
-
helperTextLineHeight:
|
|
819
|
-
placeholderFontColor:
|
|
820
|
-
valueFontColor:
|
|
821
|
-
valueFontSize:
|
|
822
|
-
valueFontStyle:
|
|
823
|
-
valueFontWeight:
|
|
824
|
-
actionIconColor:
|
|
825
|
-
hoverActionIconColor:
|
|
826
|
-
activeActionIconColor:
|
|
827
|
-
actionBackgroundColor:
|
|
828
|
-
hoverActionBackgroundColor:
|
|
829
|
-
activeActionBackgroundColor:
|
|
830
|
-
listOptionFontColor:
|
|
831
|
-
listOptionFontSize:
|
|
832
|
-
listOptionFontStyle:
|
|
833
|
-
listOptionFontWeight:
|
|
834
|
-
listOptionIconColor:
|
|
835
|
-
listOptionDividerColor:
|
|
836
|
-
listGroupLabelFontWeight:
|
|
837
|
-
focusListOptionBorderColor:
|
|
838
|
-
systemMessageFontColor:
|
|
839
|
-
collapseIndicatorColor:
|
|
840
|
-
listDialogBackgroundColor:
|
|
841
|
-
listDialogBorderColor:
|
|
842
|
-
selectedListOptionBackgroundColor:
|
|
843
|
-
selectedHoverListOptionBackgroundColor:
|
|
844
|
-
selectedActiveListOptionBackgroundColor:
|
|
845
|
-
selectedListOptionIconColor:
|
|
846
|
-
unselectedHoverListOptionBackgroundColor:
|
|
847
|
-
unselectedActiveListOptionBackgroundColor:
|
|
848
|
-
selectionIndicatorFontColor:
|
|
849
|
-
selectionIndicatorFontSize:
|
|
850
|
-
selectionIndicatorFontStyle:
|
|
851
|
-
selectionIndicatorFontWeight:
|
|
852
|
-
selectionIndicatorBorderColor:
|
|
853
|
-
selectionIndicatorBackgroundColor:
|
|
854
|
-
enabledSelectionIndicatorActionBackgroundColor:
|
|
855
|
-
enabledSelectionIndicatorActionIconColor:
|
|
856
|
-
hoverSelectionIndicatorActionBackgroundColor:
|
|
857
|
-
hoverSelectionIndicatorActionIconColor:
|
|
858
|
-
activeSelectionIndicatorActionBackgroundColor:
|
|
859
|
-
activeSelectionIndicatorActionIconColor:
|
|
652
|
+
fontFamily: _coreTokens["default"].type_sans,
|
|
653
|
+
disabledColor: _coreTokens["default"].color_grey_500,
|
|
654
|
+
enabledInputBorderColor: _coreTokens["default"].color_black,
|
|
655
|
+
hoverInputBorderColor: _coreTokens["default"].color_purple_500,
|
|
656
|
+
focusInputBorderColor: _coreTokens["default"].color_blue_600,
|
|
657
|
+
errorInputBorderColor: _coreTokens["default"].color_red_700,
|
|
658
|
+
hoverInputErrorBorderColor: _coreTokens["default"].color_red_600,
|
|
659
|
+
disabledInputBorderColor: _coreTokens["default"].color_grey_500,
|
|
660
|
+
disabledInputBackgroundColor: _coreTokens["default"].color_grey_100,
|
|
661
|
+
inputMarginTop: _coreTokens["default"].spacing_4,
|
|
662
|
+
inputMarginBottom: _coreTokens["default"].spacing_4,
|
|
663
|
+
errorMessageColor: _coreTokens["default"].color_red_700,
|
|
664
|
+
errorIconColor: _coreTokens["default"].color_red_700,
|
|
665
|
+
labelFontColor: _coreTokens["default"].color_black,
|
|
666
|
+
labelFontSize: _coreTokens["default"].type_scale_02,
|
|
667
|
+
labelFontStyle: _coreTokens["default"].type_normal,
|
|
668
|
+
labelFontWeight: _coreTokens["default"].type_semibold,
|
|
669
|
+
labelLineHeight: _coreTokens["default"].type_leading_loose_01,
|
|
670
|
+
optionalLabelFontWeight: _coreTokens["default"].type_regular,
|
|
671
|
+
helperTextFontColor: _coreTokens["default"].color_black,
|
|
672
|
+
helperTextFontSize: _coreTokens["default"].type_scale_01,
|
|
673
|
+
helperTextFontStyle: _coreTokens["default"].type_normal,
|
|
674
|
+
helperTextFontWeight: _coreTokens["default"].type_regular,
|
|
675
|
+
helperTextLineHeight: _coreTokens["default"].type_leading_normal,
|
|
676
|
+
placeholderFontColor: _coreTokens["default"].color_grey_800_a,
|
|
677
|
+
valueFontColor: _coreTokens["default"].color_black,
|
|
678
|
+
valueFontSize: _coreTokens["default"].type_scale_03,
|
|
679
|
+
valueFontStyle: _coreTokens["default"].type_normal,
|
|
680
|
+
valueFontWeight: _coreTokens["default"].type_regular,
|
|
681
|
+
actionIconColor: _coreTokens["default"].color_black,
|
|
682
|
+
hoverActionIconColor: _coreTokens["default"].color_black,
|
|
683
|
+
activeActionIconColor: _coreTokens["default"].color_black,
|
|
684
|
+
actionBackgroundColor: _coreTokens["default"].color_transparent,
|
|
685
|
+
hoverActionBackgroundColor: _coreTokens["default"].color_grey_100,
|
|
686
|
+
activeActionBackgroundColor: _coreTokens["default"].color_grey_300,
|
|
687
|
+
listOptionFontColor: _coreTokens["default"].color_black,
|
|
688
|
+
listOptionFontSize: _coreTokens["default"].type_scale_02,
|
|
689
|
+
listOptionFontStyle: _coreTokens["default"].type_normal,
|
|
690
|
+
listOptionFontWeight: _coreTokens["default"].type_regular,
|
|
691
|
+
listOptionIconColor: _coreTokens["default"].color_black,
|
|
692
|
+
listOptionDividerColor: _coreTokens["default"].color_grey_200,
|
|
693
|
+
listGroupLabelFontWeight: _coreTokens["default"].type_semibold,
|
|
694
|
+
focusListOptionBorderColor: _coreTokens["default"].color_blue_600,
|
|
695
|
+
systemMessageFontColor: _coreTokens["default"].color_grey_700,
|
|
696
|
+
collapseIndicatorColor: _coreTokens["default"].color_black,
|
|
697
|
+
listDialogBackgroundColor: _coreTokens["default"].color_white,
|
|
698
|
+
listDialogBorderColor: _coreTokens["default"].color_grey_400,
|
|
699
|
+
selectedListOptionBackgroundColor: _coreTokens["default"].color_blue_100,
|
|
700
|
+
selectedHoverListOptionBackgroundColor: _coreTokens["default"].color_blue_200,
|
|
701
|
+
selectedActiveListOptionBackgroundColor: _coreTokens["default"].color_blue_300,
|
|
702
|
+
selectedListOptionIconColor: _coreTokens["default"].color_blue_900,
|
|
703
|
+
unselectedHoverListOptionBackgroundColor: _coreTokens["default"].color_grey_100,
|
|
704
|
+
unselectedActiveListOptionBackgroundColor: _coreTokens["default"].color_grey_200,
|
|
705
|
+
selectionIndicatorFontColor: _coreTokens["default"].color_black,
|
|
706
|
+
selectionIndicatorFontSize: _coreTokens["default"].type_scale_01,
|
|
707
|
+
selectionIndicatorFontStyle: _coreTokens["default"].type_regular,
|
|
708
|
+
selectionIndicatorFontWeight: _coreTokens["default"].type_normal,
|
|
709
|
+
selectionIndicatorBorderColor: _coreTokens["default"].color_grey_400,
|
|
710
|
+
selectionIndicatorBackgroundColor: _coreTokens["default"].color_grey_50,
|
|
711
|
+
enabledSelectionIndicatorActionBackgroundColor: _coreTokens["default"].color_transparent,
|
|
712
|
+
enabledSelectionIndicatorActionIconColor: _coreTokens["default"].color_black,
|
|
713
|
+
hoverSelectionIndicatorActionBackgroundColor: _coreTokens["default"].color_grey_100,
|
|
714
|
+
hoverSelectionIndicatorActionIconColor: _coreTokens["default"].color_black,
|
|
715
|
+
activeSelectionIndicatorActionBackgroundColor: _coreTokens["default"].color_grey_300,
|
|
716
|
+
activeSelectionIndicatorActionIconColor: _coreTokens["default"].color_black
|
|
860
717
|
},
|
|
861
718
|
sidenav: {
|
|
862
|
-
backgroundColor:
|
|
863
|
-
titleFontFamily:
|
|
864
|
-
titleFontSize:
|
|
865
|
-
titleFontStyle:
|
|
866
|
-
titleFontWeight:
|
|
867
|
-
titleFontColor:
|
|
719
|
+
backgroundColor: _coreTokens["default"].color_grey_100,
|
|
720
|
+
titleFontFamily: _coreTokens["default"].type_sans,
|
|
721
|
+
titleFontSize: _coreTokens["default"].type_scale_04,
|
|
722
|
+
titleFontStyle: _coreTokens["default"].type_normal,
|
|
723
|
+
titleFontWeight: _coreTokens["default"].type_semibold,
|
|
724
|
+
titleFontColor: _coreTokens["default"].color_grey_800,
|
|
868
725
|
titleFontTextTransform: "none",
|
|
869
|
-
titleFontLetterSpacing:
|
|
870
|
-
groupTitleFontFamily:
|
|
871
|
-
groupTitleFontSize:
|
|
872
|
-
groupTitleFontStyle:
|
|
873
|
-
groupTitleFontWeight:
|
|
874
|
-
groupTitleFontColor:
|
|
875
|
-
groupTitleHoverBackgroundColor:
|
|
876
|
-
groupTitleActiveBackgroundColor:
|
|
877
|
-
groupTitleSelectedFontColor:
|
|
878
|
-
groupTitleSelectedBackgroundColor:
|
|
879
|
-
groupTitleSelectedHoverFontColor:
|
|
880
|
-
groupTitleSelectedHoverBackgroundColor:
|
|
881
|
-
groupTitleFontTextTransform:
|
|
882
|
-
groupTitleFontLetterSpacing:
|
|
883
|
-
linkFontFamily:
|
|
884
|
-
linkFontSize:
|
|
885
|
-
linkFontStyle:
|
|
886
|
-
linkFontWeight:
|
|
887
|
-
linkFontColor:
|
|
888
|
-
linkHoverBackgroundColor:
|
|
889
|
-
linkSelectedFontColor:
|
|
890
|
-
linkSelectedBackgroundColor:
|
|
891
|
-
linkSelectedHoverFontColor:
|
|
892
|
-
linkSelectedHoverBackgroundColor:
|
|
726
|
+
titleFontLetterSpacing: _coreTokens["default"].type_spacing_normal,
|
|
727
|
+
groupTitleFontFamily: _coreTokens["default"].type_sans,
|
|
728
|
+
groupTitleFontSize: _coreTokens["default"].type_scale_02,
|
|
729
|
+
groupTitleFontStyle: _coreTokens["default"].type_normal,
|
|
730
|
+
groupTitleFontWeight: _coreTokens["default"].type_semibold,
|
|
731
|
+
groupTitleFontColor: _coreTokens["default"].color_black,
|
|
732
|
+
groupTitleHoverBackgroundColor: _coreTokens["default"].color_grey_200,
|
|
733
|
+
groupTitleActiveBackgroundColor: _coreTokens["default"].color_grey_800,
|
|
734
|
+
groupTitleSelectedFontColor: _coreTokens["default"].color_white,
|
|
735
|
+
groupTitleSelectedBackgroundColor: _coreTokens["default"].color_grey_800,
|
|
736
|
+
groupTitleSelectedHoverFontColor: _coreTokens["default"].color_white,
|
|
737
|
+
groupTitleSelectedHoverBackgroundColor: _coreTokens["default"].color_grey_900,
|
|
738
|
+
groupTitleFontTextTransform: _coreTokens["default"].type_uppercase,
|
|
739
|
+
groupTitleFontLetterSpacing: _coreTokens["default"].type_spacing_wide_02,
|
|
740
|
+
linkFontFamily: _coreTokens["default"].type_sans,
|
|
741
|
+
linkFontSize: _coreTokens["default"].type_scale_02,
|
|
742
|
+
linkFontStyle: _coreTokens["default"].type_normal,
|
|
743
|
+
linkFontWeight: _coreTokens["default"].type_regular,
|
|
744
|
+
linkFontColor: _coreTokens["default"].color_grey_800,
|
|
745
|
+
linkHoverBackgroundColor: _coreTokens["default"].color_grey_200,
|
|
746
|
+
linkSelectedFontColor: _coreTokens["default"].color_white,
|
|
747
|
+
linkSelectedBackgroundColor: _coreTokens["default"].color_grey_800,
|
|
748
|
+
linkSelectedHoverFontColor: _coreTokens["default"].color_white,
|
|
749
|
+
linkSelectedHoverBackgroundColor: _coreTokens["default"].color_grey_900,
|
|
893
750
|
linkFontTextTransform: "none",
|
|
894
|
-
linkFontLetterSpacing:
|
|
895
|
-
linkTextDecoration:
|
|
751
|
+
linkFontLetterSpacing: _coreTokens["default"].type_spacing_wide_01,
|
|
752
|
+
linkTextDecoration: _coreTokens["default"].type_no_line,
|
|
896
753
|
linkMarginTop: "4px",
|
|
897
754
|
linkMarginBottom: "4px",
|
|
898
755
|
linkMarginRight: "16px",
|
|
899
756
|
linkMarginLeft: "16px",
|
|
900
|
-
linkFocusColor:
|
|
901
|
-
scrollBarThumbColor:
|
|
902
|
-
scrollBarTrackColor:
|
|
757
|
+
linkFocusColor: _coreTokens["default"].color_blue_600,
|
|
758
|
+
scrollBarThumbColor: _coreTokens["default"].color_grey_200_a,
|
|
759
|
+
scrollBarTrackColor: _coreTokens["default"].color_transparent
|
|
903
760
|
},
|
|
904
761
|
slider: {
|
|
905
|
-
fontFamily:
|
|
906
|
-
limitValuesFontColor:
|
|
907
|
-
limitValuesFontColorOnDark:
|
|
908
|
-
limitValuesFontSize:
|
|
909
|
-
limitValuesFontStyle:
|
|
910
|
-
limitValuesFontWeight:
|
|
911
|
-
limitValuesFontLetterSpacing:
|
|
912
|
-
disabledLimitValuesFontColor:
|
|
913
|
-
labelFontFamily:
|
|
914
|
-
labelFontSize:
|
|
915
|
-
labelFontStyle:
|
|
916
|
-
labelFontWeight:
|
|
917
|
-
labelLineHeight:
|
|
918
|
-
helperTextFontFamily:
|
|
919
|
-
helperTextFontSize:
|
|
920
|
-
helperTextFontStyle:
|
|
921
|
-
helperTextFontWeight:
|
|
922
|
-
helperTextLineHeight:
|
|
923
|
-
fontColor:
|
|
924
|
-
fontColorOnDark:
|
|
925
|
-
labelFontColor:
|
|
926
|
-
labelFontColorOnDark:
|
|
927
|
-
helperTextFontColor:
|
|
928
|
-
helperTextFontColorOnDark:
|
|
929
|
-
disabledLabelFontColor:
|
|
930
|
-
disabledLabelFontColorOnDark:
|
|
931
|
-
disabledHelperTextFontColor:
|
|
932
|
-
disabledHelperTextFontColorOnDark:
|
|
762
|
+
fontFamily: _coreTokens["default"].type_sans,
|
|
763
|
+
limitValuesFontColor: _coreTokens["default"].color_black,
|
|
764
|
+
limitValuesFontColorOnDark: _coreTokens["default"].color_white,
|
|
765
|
+
limitValuesFontSize: _coreTokens["default"].type_scale_03,
|
|
766
|
+
limitValuesFontStyle: _coreTokens["default"].type_normal,
|
|
767
|
+
limitValuesFontWeight: _coreTokens["default"].type_regular,
|
|
768
|
+
limitValuesFontLetterSpacing: _coreTokens["default"].type_spacing_normal,
|
|
769
|
+
disabledLimitValuesFontColor: _coreTokens["default"].color_grey_500,
|
|
770
|
+
labelFontFamily: _coreTokens["default"].type_sans,
|
|
771
|
+
labelFontSize: _coreTokens["default"].type_scale_02,
|
|
772
|
+
labelFontStyle: _coreTokens["default"].type_normal,
|
|
773
|
+
labelFontWeight: _coreTokens["default"].type_semibold,
|
|
774
|
+
labelLineHeight: _coreTokens["default"].type_leading_loose_01,
|
|
775
|
+
helperTextFontFamily: _coreTokens["default"].type_sans,
|
|
776
|
+
helperTextFontSize: _coreTokens["default"].type_scale_01,
|
|
777
|
+
helperTextFontStyle: _coreTokens["default"].type_normal,
|
|
778
|
+
helperTextFontWeight: _coreTokens["default"].type_regular,
|
|
779
|
+
helperTextLineHeight: _coreTokens["default"].type_leading_normal,
|
|
780
|
+
fontColor: _coreTokens["default"].color_black,
|
|
781
|
+
fontColorOnDark: _coreTokens["default"].color_white,
|
|
782
|
+
labelFontColor: _coreTokens["default"].color_black,
|
|
783
|
+
labelFontColorOnDark: _coreTokens["default"].color_white,
|
|
784
|
+
helperTextFontColor: _coreTokens["default"].color_black,
|
|
785
|
+
helperTextFontColorOnDark: _coreTokens["default"].color_white,
|
|
786
|
+
disabledLabelFontColor: _coreTokens["default"].color_grey_500,
|
|
787
|
+
disabledLabelFontColorOnDark: _coreTokens["default"].color_grey_500,
|
|
788
|
+
disabledHelperTextFontColor: _coreTokens["default"].color_grey_500,
|
|
789
|
+
disabledHelperTextFontColorOnDark: _coreTokens["default"].color_grey_500,
|
|
933
790
|
thumbHeight: "12px",
|
|
934
791
|
thumbWidth: "12px",
|
|
935
792
|
hoverThumbHeight: "14px",
|
|
936
793
|
hoverThumbWidth: "14px",
|
|
937
794
|
thumbVerticalPosition: "12px",
|
|
938
795
|
hoverThumbVerticalPosition: "11px",
|
|
939
|
-
thumbBackgroundColor:
|
|
940
|
-
thumbBackgroundColorOnDark:
|
|
796
|
+
thumbBackgroundColor: _coreTokens["default"].color_blue_800,
|
|
797
|
+
thumbBackgroundColorOnDark: _coreTokens["default"].color_blue_600,
|
|
941
798
|
hoverThumbScale: "1.166666",
|
|
942
|
-
hoverThumbBackgroundColor:
|
|
943
|
-
hoverThumbBackgroundColorOnDark:
|
|
799
|
+
hoverThumbBackgroundColor: _coreTokens["default"].color_blue_900,
|
|
800
|
+
hoverThumbBackgroundColorOnDark: _coreTokens["default"].color_blue_900,
|
|
944
801
|
activeThumbScale: "1.166666",
|
|
945
|
-
activeThumbBackgroundColor:
|
|
946
|
-
activeThumbBackgroundColorOnDark:
|
|
947
|
-
focusThumbBackgroundColor:
|
|
948
|
-
focusThumbBackgroundColorOnDark:
|
|
802
|
+
activeThumbBackgroundColor: _coreTokens["default"].color_blue_900,
|
|
803
|
+
activeThumbBackgroundColorOnDark: _coreTokens["default"].color_blue_900,
|
|
804
|
+
focusThumbBackgroundColor: _coreTokens["default"].color_blue_800,
|
|
805
|
+
focusThumbBackgroundColorOnDark: _coreTokens["default"].color_blue_600,
|
|
949
806
|
tickHeight: "4px",
|
|
950
807
|
tickWidth: "4px",
|
|
951
808
|
tickVerticalPosition: "11px",
|
|
952
|
-
tickBackgroundColor:
|
|
953
|
-
tickBackgroundColorOnDark:
|
|
809
|
+
tickBackgroundColor: _coreTokens["default"].color_blue_800,
|
|
810
|
+
tickBackgroundColorOnDark: _coreTokens["default"].color_blue_600,
|
|
954
811
|
trackLineThickness: "2px",
|
|
955
812
|
trackLineVerticalPosition: "50%",
|
|
956
|
-
trackLineColor:
|
|
957
|
-
trackLineColorOnDark:
|
|
813
|
+
trackLineColor: _coreTokens["default"].color_blue_800,
|
|
814
|
+
trackLineColorOnDark: _coreTokens["default"].color_blue_600,
|
|
958
815
|
totalLineThickness: "2px",
|
|
959
816
|
totalLineVerticalPosition: "50%",
|
|
960
|
-
totalLineColor:
|
|
961
|
-
totalLineColorOnDark:
|
|
817
|
+
totalLineColor: _coreTokens["default"].color_grey_200_a,
|
|
818
|
+
totalLineColorOnDark: _coreTokens["default"].color_grey_400,
|
|
962
819
|
disabledThumbVerticalPosition: "10px",
|
|
963
|
-
disabledThumbBackgroundColor:
|
|
820
|
+
disabledThumbBackgroundColor: _coreTokens["default"].color_grey_500,
|
|
964
821
|
disabledThumbBackgroundColorOnDark: "#575757",
|
|
965
822
|
disabledTickVerticalPosition: "11px",
|
|
966
|
-
disabledTickBackgroundColor:
|
|
967
|
-
disabledTickBackgroundColorOnDark:
|
|
968
|
-
disabledTrackLineColor:
|
|
969
|
-
disabledTrackLineColorOnDark:
|
|
970
|
-
disabledTotalLineColor:
|
|
971
|
-
disabledTotalLineColorOnDark:
|
|
972
|
-
focusColor:
|
|
973
|
-
focusColorOnDark:
|
|
974
|
-
floorLabelMarginRight:
|
|
975
|
-
ceilLabelMarginLeft:
|
|
976
|
-
inputMarginLeft:
|
|
823
|
+
disabledTickBackgroundColor: _coreTokens["default"].color_grey_500,
|
|
824
|
+
disabledTickBackgroundColorOnDark: _coreTokens["default"].color_grey_500,
|
|
825
|
+
disabledTrackLineColor: _coreTokens["default"].color_grey_500,
|
|
826
|
+
disabledTrackLineColorOnDark: _coreTokens["default"].color_grey_500,
|
|
827
|
+
disabledTotalLineColor: _coreTokens["default"].color_grey_100,
|
|
828
|
+
disabledTotalLineColorOnDark: _coreTokens["default"].color_grey_700,
|
|
829
|
+
focusColor: _coreTokens["default"].color_blue_600,
|
|
830
|
+
focusColorOnDark: _coreTokens["default"].color_blue_600,
|
|
831
|
+
floorLabelMarginRight: _coreTokens["default"].type_scale_03,
|
|
832
|
+
ceilLabelMarginLeft: _coreTokens["default"].type_scale_03,
|
|
833
|
+
inputMarginLeft: _coreTokens["default"].type_scale_06
|
|
977
834
|
},
|
|
978
835
|
spinner: {
|
|
979
|
-
trackCircleColor:
|
|
980
|
-
trackCircleColorOverlay:
|
|
981
|
-
totalCircleColor:
|
|
982
|
-
labelFontFamily:
|
|
983
|
-
labelFontSize:
|
|
984
|
-
labelFontStyle:
|
|
985
|
-
labelFontWeight:
|
|
986
|
-
labelFontColor:
|
|
987
|
-
labelFontColorOnDark:
|
|
836
|
+
trackCircleColor: _coreTokens["default"].color_purple_700,
|
|
837
|
+
trackCircleColorOverlay: _coreTokens["default"].color_purple_500,
|
|
838
|
+
totalCircleColor: _coreTokens["default"].color_white,
|
|
839
|
+
labelFontFamily: _coreTokens["default"].type_sans,
|
|
840
|
+
labelFontSize: _coreTokens["default"].type_scale_02,
|
|
841
|
+
labelFontStyle: _coreTokens["default"].type_normal,
|
|
842
|
+
labelFontWeight: _coreTokens["default"].type_regular,
|
|
843
|
+
labelFontColor: _coreTokens["default"].color_black,
|
|
844
|
+
labelFontColorOnDark: _coreTokens["default"].color_white,
|
|
988
845
|
labelTextAlign: "center",
|
|
989
|
-
progressValueFontFamily:
|
|
990
|
-
progressValueFontSize:
|
|
991
|
-
progressValueFontStyle:
|
|
992
|
-
progressValueFontWeight:
|
|
993
|
-
progressValueFontColor:
|
|
994
|
-
progressValueFontColorOnDark:
|
|
846
|
+
progressValueFontFamily: _coreTokens["default"].type_sans,
|
|
847
|
+
progressValueFontSize: _coreTokens["default"].type_scale_02,
|
|
848
|
+
progressValueFontStyle: _coreTokens["default"].type_normal,
|
|
849
|
+
progressValueFontWeight: _coreTokens["default"].type_bold,
|
|
850
|
+
progressValueFontColor: _coreTokens["default"].inherit,
|
|
851
|
+
progressValueFontColorOnDark: _coreTokens["default"].color_white,
|
|
995
852
|
progressValueTextAlign: "center",
|
|
996
|
-
overlayBackgroundColor:
|
|
853
|
+
overlayBackgroundColor: _coreTokens["default"].color_black,
|
|
997
854
|
overlayOpacity: "0.8",
|
|
998
|
-
overlayLabelFontFamily:
|
|
999
|
-
overlayLabelFontSize:
|
|
1000
|
-
overlayLabelFontStyle:
|
|
1001
|
-
overlayLabelFontWeight:
|
|
1002
|
-
overlayLabelFontColor:
|
|
855
|
+
overlayLabelFontFamily: _coreTokens["default"].type_sans,
|
|
856
|
+
overlayLabelFontSize: _coreTokens["default"].type_scale_02,
|
|
857
|
+
overlayLabelFontStyle: _coreTokens["default"].type_normal,
|
|
858
|
+
overlayLabelFontWeight: _coreTokens["default"].type_regular,
|
|
859
|
+
overlayLabelFontColor: _coreTokens["default"].color_white,
|
|
1003
860
|
overlayLabelTextAlign: "center",
|
|
1004
|
-
overlayProgressValueFontFamily:
|
|
1005
|
-
overlayProgressValueFontSize:
|
|
1006
|
-
overlayProgressValueFontStyle:
|
|
1007
|
-
overlayProgressValueFontWeight:
|
|
1008
|
-
overlayProgressValueFontColor:
|
|
861
|
+
overlayProgressValueFontFamily: _coreTokens["default"].type_sans,
|
|
862
|
+
overlayProgressValueFontSize: _coreTokens["default"].type_scale_02,
|
|
863
|
+
overlayProgressValueFontStyle: _coreTokens["default"].type_normal,
|
|
864
|
+
overlayProgressValueFontWeight: _coreTokens["default"].type_bold,
|
|
865
|
+
overlayProgressValueFontColor: _coreTokens["default"].color_white,
|
|
1009
866
|
overlayProgressValueTextAlign: "center"
|
|
1010
867
|
},
|
|
1011
868
|
"switch": {
|
|
1012
|
-
checkedTrackBackgroundColor:
|
|
1013
|
-
checkedTrackBackgroundColorOnDark:
|
|
1014
|
-
checkedThumbBackgroundColor:
|
|
1015
|
-
checkedThumbBackgroundColorOnDark:
|
|
1016
|
-
uncheckedTrackBackgroundColor:
|
|
1017
|
-
uncheckedTrackBackgroundColorOnDark:
|
|
1018
|
-
uncheckedThumbBackgroundColor:
|
|
1019
|
-
uncheckedThumbBackgroundColorOnDark:
|
|
1020
|
-
disabledCheckedTrackBackgroundColor:
|
|
869
|
+
checkedTrackBackgroundColor: _coreTokens["default"].color_purple_700,
|
|
870
|
+
checkedTrackBackgroundColorOnDark: _coreTokens["default"].color_purple_700,
|
|
871
|
+
checkedThumbBackgroundColor: _coreTokens["default"].color_white,
|
|
872
|
+
checkedThumbBackgroundColorOnDark: _coreTokens["default"].color_white,
|
|
873
|
+
uncheckedTrackBackgroundColor: _coreTokens["default"].color_grey_400,
|
|
874
|
+
uncheckedTrackBackgroundColorOnDark: _coreTokens["default"].color_grey_400,
|
|
875
|
+
uncheckedThumbBackgroundColor: _coreTokens["default"].color_white,
|
|
876
|
+
uncheckedThumbBackgroundColorOnDark: _coreTokens["default"].color_white,
|
|
877
|
+
disabledCheckedTrackBackgroundColor: _coreTokens["default"].color_purple_100,
|
|
1021
878
|
disabledCheckedTrackBackgroundColorOnDark: "#1c0b24",
|
|
1022
|
-
disabledCheckedThumbBackgroundColor:
|
|
1023
|
-
disabledCheckedThumbBackgroundColorOnDark:
|
|
1024
|
-
disabledUncheckedTrackBackgroundColor:
|
|
879
|
+
disabledCheckedThumbBackgroundColor: _coreTokens["default"].color_white,
|
|
880
|
+
disabledCheckedThumbBackgroundColorOnDark: _coreTokens["default"].color_white,
|
|
881
|
+
disabledUncheckedTrackBackgroundColor: _coreTokens["default"].color_grey_100,
|
|
1025
882
|
disabledUncheckedTrackBackgroundColorOnDark: "#363636",
|
|
1026
|
-
disabledUncheckedThumbBackgroundColor:
|
|
1027
|
-
disabledUncheckedThumbBackgroundColorOnDark:
|
|
1028
|
-
disabledLabelFontColor:
|
|
883
|
+
disabledUncheckedThumbBackgroundColor: _coreTokens["default"].color_white,
|
|
884
|
+
disabledUncheckedThumbBackgroundColorOnDark: _coreTokens["default"].color_white,
|
|
885
|
+
disabledLabelFontColor: _coreTokens["default"].color_grey_500,
|
|
1029
886
|
disabledLabelFontColorOnDark: "#575757",
|
|
1030
|
-
disabledLabelFontStyle:
|
|
1031
|
-
labelFontFamily:
|
|
1032
|
-
labelFontSize:
|
|
1033
|
-
labelFontStyle:
|
|
1034
|
-
labelFontWeight:
|
|
1035
|
-
labelFontColor:
|
|
1036
|
-
labelFontColorOnDark:
|
|
1037
|
-
thumbFocusColor:
|
|
887
|
+
disabledLabelFontStyle: _coreTokens["default"].type_normal,
|
|
888
|
+
labelFontFamily: _coreTokens["default"].type_sans,
|
|
889
|
+
labelFontSize: _coreTokens["default"].type_scale_root,
|
|
890
|
+
labelFontStyle: _coreTokens["default"].type_normal,
|
|
891
|
+
labelFontWeight: _coreTokens["default"].type_regular,
|
|
892
|
+
labelFontColor: _coreTokens["default"].color_black,
|
|
893
|
+
labelFontColorOnDark: _coreTokens["default"].color_white,
|
|
894
|
+
thumbFocusColor: _coreTokens["default"].color_blue_600,
|
|
1038
895
|
thumbFocusColorOnDark: "#1682ff",
|
|
1039
896
|
thumbHeight: "24px",
|
|
1040
897
|
thumbWidth: "24px",
|
|
@@ -1045,14 +902,14 @@ var componentTokens = {
|
|
|
1045
902
|
},
|
|
1046
903
|
table: {
|
|
1047
904
|
rowSeparatorThickness: "1px",
|
|
1048
|
-
rowSeparatorStyle:
|
|
1049
|
-
rowSeparatorColor:
|
|
1050
|
-
dataBackgroundColor:
|
|
1051
|
-
dataFontFamily:
|
|
1052
|
-
dataFontSize:
|
|
1053
|
-
dataFontStyle:
|
|
1054
|
-
dataFontWeight:
|
|
1055
|
-
dataFontColor:
|
|
905
|
+
rowSeparatorStyle: _coreTokens["default"].border_solid,
|
|
906
|
+
rowSeparatorColor: _coreTokens["default"].color_grey_300,
|
|
907
|
+
dataBackgroundColor: _coreTokens["default"].color_white,
|
|
908
|
+
dataFontFamily: _coreTokens["default"].type_sans,
|
|
909
|
+
dataFontSize: _coreTokens["default"].type_scale_02,
|
|
910
|
+
dataFontStyle: _coreTokens["default"].type_normal,
|
|
911
|
+
dataFontWeight: _coreTokens["default"].type_regular,
|
|
912
|
+
dataFontColor: _coreTokens["default"].color_black,
|
|
1056
913
|
dataFontTextTransform: "none",
|
|
1057
914
|
dataPaddingTop: "14px",
|
|
1058
915
|
dataPaddingBottom: "12px",
|
|
@@ -1060,13 +917,13 @@ var componentTokens = {
|
|
|
1060
917
|
dataPaddingLeft: "40px",
|
|
1061
918
|
dataTextAlign: "left",
|
|
1062
919
|
dataTextLineHeight: "normal",
|
|
1063
|
-
headerBackgroundColor:
|
|
920
|
+
headerBackgroundColor: _coreTokens["default"].color_purple_700,
|
|
1064
921
|
headerBorderRadius: "4px",
|
|
1065
|
-
headerFontFamily:
|
|
1066
|
-
headerFontSize:
|
|
1067
|
-
headerFontStyle:
|
|
1068
|
-
headerFontWeight:
|
|
1069
|
-
headerFontColor:
|
|
922
|
+
headerFontFamily: _coreTokens["default"].type_sans,
|
|
923
|
+
headerFontSize: _coreTokens["default"].type_scale_02,
|
|
924
|
+
headerFontStyle: _coreTokens["default"].type_normal,
|
|
925
|
+
headerFontWeight: _coreTokens["default"].type_regular,
|
|
926
|
+
headerFontColor: _coreTokens["default"].color_white,
|
|
1070
927
|
headerFontTextTransform: "none",
|
|
1071
928
|
headerPaddingTop: "16px",
|
|
1072
929
|
headerPaddingBottom: "16px",
|
|
@@ -1074,42 +931,42 @@ var componentTokens = {
|
|
|
1074
931
|
headerPaddingLeft: "40px",
|
|
1075
932
|
headerTextAlign: "left",
|
|
1076
933
|
headerTextLineHeight: "normal",
|
|
1077
|
-
scrollBarThumbColor:
|
|
1078
|
-
scrollBarTrackColor:
|
|
1079
|
-
sortIconColor:
|
|
934
|
+
scrollBarThumbColor: _coreTokens["default"].color_grey_700,
|
|
935
|
+
scrollBarTrackColor: _coreTokens["default"].color_grey_300,
|
|
936
|
+
sortIconColor: _coreTokens["default"].color_white
|
|
1080
937
|
},
|
|
1081
938
|
tabs: {
|
|
1082
|
-
fontFamily:
|
|
1083
|
-
fontSize:
|
|
1084
|
-
fontStyle:
|
|
1085
|
-
fontWeight:
|
|
939
|
+
fontFamily: _coreTokens["default"].type_sans,
|
|
940
|
+
fontSize: _coreTokens["default"].type_scale_03,
|
|
941
|
+
fontStyle: _coreTokens["default"].type_normal,
|
|
942
|
+
fontWeight: _coreTokens["default"].type_semibold,
|
|
1086
943
|
fontTextTransform: "none",
|
|
1087
|
-
selectedBackgroundColor:
|
|
1088
|
-
selectedFontColor:
|
|
1089
|
-
selectedIconColor:
|
|
1090
|
-
selectedUnderlineColor:
|
|
944
|
+
selectedBackgroundColor: _coreTokens["default"].color_white,
|
|
945
|
+
selectedFontColor: _coreTokens["default"].color_purple_700,
|
|
946
|
+
selectedIconColor: _coreTokens["default"].color_purple_700,
|
|
947
|
+
selectedUnderlineColor: _coreTokens["default"].color_purple_700,
|
|
1091
948
|
selectedUnderlineThickness: "2px",
|
|
1092
|
-
unselectedBackgroundColor:
|
|
1093
|
-
unselectedFontColor:
|
|
1094
|
-
unselectedIconColor:
|
|
1095
|
-
disabledFontColor:
|
|
1096
|
-
disabledIconColor:
|
|
1097
|
-
disabledFontStyle:
|
|
949
|
+
unselectedBackgroundColor: _coreTokens["default"].color_white,
|
|
950
|
+
unselectedFontColor: _coreTokens["default"].color_grey_700,
|
|
951
|
+
unselectedIconColor: _coreTokens["default"].color_grey_700,
|
|
952
|
+
disabledFontColor: _coreTokens["default"].color_grey_500,
|
|
953
|
+
disabledIconColor: _coreTokens["default"].color_grey_500,
|
|
954
|
+
disabledFontStyle: _coreTokens["default"].type_normal,
|
|
1098
955
|
disabledBadgeBackgroundColor: "#0000004d",
|
|
1099
|
-
hoverBackgroundColor:
|
|
1100
|
-
pressedBackgroundColor:
|
|
1101
|
-
pressedFontWeight:
|
|
1102
|
-
dividerColor:
|
|
956
|
+
hoverBackgroundColor: _coreTokens["default"].color_purple_100,
|
|
957
|
+
pressedBackgroundColor: _coreTokens["default"].color_purple_200,
|
|
958
|
+
pressedFontWeight: _coreTokens["default"].type_semibold,
|
|
959
|
+
dividerColor: _coreTokens["default"].color_grey_400,
|
|
1103
960
|
dividerThickness: "1px",
|
|
1104
|
-
focusOutline:
|
|
961
|
+
focusOutline: _coreTokens["default"].color_purple_700,
|
|
1105
962
|
scrollButtonsWidth: "48px",
|
|
1106
|
-
badgeBackgroundColor:
|
|
1107
|
-
badgeFontFamily:
|
|
963
|
+
badgeBackgroundColor: _coreTokens["default"].color_red_700,
|
|
964
|
+
badgeFontFamily: _coreTokens["default"].type_sans,
|
|
1108
965
|
badgeFontSize: "10px",
|
|
1109
|
-
badgeFontStyle:
|
|
966
|
+
badgeFontStyle: _coreTokens["default"].type_normal,
|
|
1110
967
|
badgeFontWeight: "500",
|
|
1111
|
-
badgeFontColor:
|
|
1112
|
-
badgeLetterSpacing:
|
|
968
|
+
badgeFontColor: _coreTokens["default"].color_white,
|
|
969
|
+
badgeLetterSpacing: _coreTokens["default"].type_spacing_wide_02,
|
|
1113
970
|
badgeWidth: "16px",
|
|
1114
971
|
badgeHeight: "16px",
|
|
1115
972
|
badgeRadius: "10px",
|
|
@@ -1118,272 +975,272 @@ var componentTokens = {
|
|
|
1118
975
|
badgeRadiusWithNotificationNumber: "10px"
|
|
1119
976
|
},
|
|
1120
977
|
tag: {
|
|
1121
|
-
fontFamily:
|
|
1122
|
-
fontColor:
|
|
1123
|
-
fontSize:
|
|
1124
|
-
fontStyle:
|
|
1125
|
-
fontWeight:
|
|
978
|
+
fontFamily: _coreTokens["default"].type_sans,
|
|
979
|
+
fontColor: _coreTokens["default"].color_black,
|
|
980
|
+
fontSize: _coreTokens["default"].type_scale_02,
|
|
981
|
+
fontStyle: _coreTokens["default"].type_normal,
|
|
982
|
+
fontWeight: _coreTokens["default"].type_regular,
|
|
1126
983
|
labelPaddingTop: "0px",
|
|
1127
984
|
labelPaddingBottom: "0px",
|
|
1128
985
|
labelPaddingLeft: "16px",
|
|
1129
986
|
labelPaddingRight: "16px",
|
|
1130
987
|
height: "40px",
|
|
1131
|
-
iconColor:
|
|
988
|
+
iconColor: _coreTokens["default"].color_white,
|
|
1132
989
|
iconSectionWidth: "40px",
|
|
1133
990
|
iconHeight: "24px",
|
|
1134
991
|
iconWidth: "auto",
|
|
1135
|
-
focusColor:
|
|
992
|
+
focusColor: _coreTokens["default"].color_blue_600
|
|
1136
993
|
},
|
|
1137
994
|
textarea: {
|
|
1138
|
-
fontFamily:
|
|
1139
|
-
enabledBorderColor:
|
|
1140
|
-
enabledBorderColorOnDark:
|
|
1141
|
-
hoverBorderColor:
|
|
1142
|
-
hoverBorderColorOnDark:
|
|
1143
|
-
focusBorderColor:
|
|
1144
|
-
focusBorderColorOnDark:
|
|
1145
|
-
disabledBorderColor:
|
|
1146
|
-
disabledBorderColorOnDark:
|
|
1147
|
-
disabledContainerFillColor:
|
|
1148
|
-
disabledContainerFillColorOnDark:
|
|
1149
|
-
errorBorderColor:
|
|
1150
|
-
errorBorderColorOnDark:
|
|
1151
|
-
hoverErrorBorderColor:
|
|
995
|
+
fontFamily: _coreTokens["default"].type_sans,
|
|
996
|
+
enabledBorderColor: _coreTokens["default"].color_black,
|
|
997
|
+
enabledBorderColorOnDark: _coreTokens["default"].color_white,
|
|
998
|
+
hoverBorderColor: _coreTokens["default"].color_purple_500,
|
|
999
|
+
hoverBorderColorOnDark: _coreTokens["default"].color_purple_500,
|
|
1000
|
+
focusBorderColor: _coreTokens["default"].color_blue_600,
|
|
1001
|
+
focusBorderColorOnDark: _coreTokens["default"].color_blue_600,
|
|
1002
|
+
disabledBorderColor: _coreTokens["default"].color_grey_500,
|
|
1003
|
+
disabledBorderColorOnDark: _coreTokens["default"].color_grey_500,
|
|
1004
|
+
disabledContainerFillColor: _coreTokens["default"].color_grey_100,
|
|
1005
|
+
disabledContainerFillColorOnDark: _coreTokens["default"].color_grey_700,
|
|
1006
|
+
errorBorderColor: _coreTokens["default"].color_red_700,
|
|
1007
|
+
errorBorderColorOnDark: _coreTokens["default"].color_red_500,
|
|
1008
|
+
hoverErrorBorderColor: _coreTokens["default"].color_red_600,
|
|
1152
1009
|
hoverErrorBorderColorOnDark: "#fe677b",
|
|
1153
|
-
inputMarginTop:
|
|
1154
|
-
inputMarginBottom:
|
|
1155
|
-
errorMessageColor:
|
|
1156
|
-
errorMessageColorOnDark:
|
|
1157
|
-
labelFontColor:
|
|
1158
|
-
labelFontColorOnDark:
|
|
1159
|
-
labelFontSize:
|
|
1160
|
-
labelFontStyle:
|
|
1161
|
-
labelFontWeight:
|
|
1162
|
-
labelLineHeight:
|
|
1163
|
-
disabledLabelFontColor:
|
|
1164
|
-
disabledLabelFontColorOnDark:
|
|
1165
|
-
optionalLabelFontWeight:
|
|
1166
|
-
helperTextFontColor:
|
|
1167
|
-
helperTextFontColorOnDark:
|
|
1168
|
-
helperTextFontSize:
|
|
1169
|
-
helperTextFontStyle:
|
|
1170
|
-
helperTextFontWeight:
|
|
1171
|
-
helperTextLineHeight:
|
|
1172
|
-
disabledHelperTextFontColor:
|
|
1173
|
-
disabledHelperTextFontColorOnDark:
|
|
1174
|
-
placeholderFontColor:
|
|
1175
|
-
placeholderFontColorOnDark:
|
|
1176
|
-
disabledPlaceholderFontColor:
|
|
1177
|
-
disabledPlaceholderFontColorOnDark:
|
|
1178
|
-
valueFontColor:
|
|
1179
|
-
valueFontColorOnDark:
|
|
1180
|
-
valueFontSize:
|
|
1181
|
-
valueFontStyle:
|
|
1182
|
-
valueFontWeight:
|
|
1183
|
-
disabledValueFontColor:
|
|
1184
|
-
disabledValueFontColorOnDark:
|
|
1010
|
+
inputMarginTop: _coreTokens["default"].spacing_4,
|
|
1011
|
+
inputMarginBottom: _coreTokens["default"].spacing_4,
|
|
1012
|
+
errorMessageColor: _coreTokens["default"].color_red_700,
|
|
1013
|
+
errorMessageColorOnDark: _coreTokens["default"].color_red_500,
|
|
1014
|
+
labelFontColor: _coreTokens["default"].color_black,
|
|
1015
|
+
labelFontColorOnDark: _coreTokens["default"].color_white,
|
|
1016
|
+
labelFontSize: _coreTokens["default"].type_scale_02,
|
|
1017
|
+
labelFontStyle: _coreTokens["default"].type_normal,
|
|
1018
|
+
labelFontWeight: _coreTokens["default"].type_semibold,
|
|
1019
|
+
labelLineHeight: _coreTokens["default"].type_leading_loose_01,
|
|
1020
|
+
disabledLabelFontColor: _coreTokens["default"].color_grey_500,
|
|
1021
|
+
disabledLabelFontColorOnDark: _coreTokens["default"].color_grey_500,
|
|
1022
|
+
optionalLabelFontWeight: _coreTokens["default"].type_regular,
|
|
1023
|
+
helperTextFontColor: _coreTokens["default"].color_black,
|
|
1024
|
+
helperTextFontColorOnDark: _coreTokens["default"].color_white,
|
|
1025
|
+
helperTextFontSize: _coreTokens["default"].type_scale_01,
|
|
1026
|
+
helperTextFontStyle: _coreTokens["default"].type_normal,
|
|
1027
|
+
helperTextFontWeight: _coreTokens["default"].type_regular,
|
|
1028
|
+
helperTextLineHeight: _coreTokens["default"].type_leading_normal,
|
|
1029
|
+
disabledHelperTextFontColor: _coreTokens["default"].color_grey_500,
|
|
1030
|
+
disabledHelperTextFontColorOnDark: _coreTokens["default"].color_grey_500,
|
|
1031
|
+
placeholderFontColor: _coreTokens["default"].color_grey_800_a,
|
|
1032
|
+
placeholderFontColorOnDark: _coreTokens["default"].color_grey_100,
|
|
1033
|
+
disabledPlaceholderFontColor: _coreTokens["default"].color_grey_500,
|
|
1034
|
+
disabledPlaceholderFontColorOnDark: _coreTokens["default"].color_grey_500,
|
|
1035
|
+
valueFontColor: _coreTokens["default"].color_black,
|
|
1036
|
+
valueFontColorOnDark: _coreTokens["default"].color_white,
|
|
1037
|
+
valueFontSize: _coreTokens["default"].type_scale_03,
|
|
1038
|
+
valueFontStyle: _coreTokens["default"].type_normal,
|
|
1039
|
+
valueFontWeight: _coreTokens["default"].type_regular,
|
|
1040
|
+
disabledValueFontColor: _coreTokens["default"].color_grey_500,
|
|
1041
|
+
disabledValueFontColorOnDark: _coreTokens["default"].color_grey_500
|
|
1185
1042
|
},
|
|
1186
1043
|
textInput: {
|
|
1187
|
-
fontFamily:
|
|
1188
|
-
enabledBorderColor:
|
|
1189
|
-
enabledBorderColorOnDark:
|
|
1190
|
-
hoverBorderColor:
|
|
1191
|
-
hoverBorderColorOnDark:
|
|
1192
|
-
focusBorderColor:
|
|
1193
|
-
focusBorderColorOnDark:
|
|
1194
|
-
disabledBorderColor:
|
|
1195
|
-
disabledBorderColorOnDark:
|
|
1196
|
-
disabledContainerFillColor:
|
|
1197
|
-
disabledContainerFillColorOnDark:
|
|
1198
|
-
errorBorderColor:
|
|
1199
|
-
errorBorderColorOnDark:
|
|
1200
|
-
hoverErrorBorderColor:
|
|
1044
|
+
fontFamily: _coreTokens["default"].type_sans,
|
|
1045
|
+
enabledBorderColor: _coreTokens["default"].color_black,
|
|
1046
|
+
enabledBorderColorOnDark: _coreTokens["default"].color_white,
|
|
1047
|
+
hoverBorderColor: _coreTokens["default"].color_purple_500,
|
|
1048
|
+
hoverBorderColorOnDark: _coreTokens["default"].color_purple_500,
|
|
1049
|
+
focusBorderColor: _coreTokens["default"].color_blue_600,
|
|
1050
|
+
focusBorderColorOnDark: _coreTokens["default"].color_blue_600,
|
|
1051
|
+
disabledBorderColor: _coreTokens["default"].color_grey_500,
|
|
1052
|
+
disabledBorderColorOnDark: _coreTokens["default"].color_grey_500,
|
|
1053
|
+
disabledContainerFillColor: _coreTokens["default"].color_grey_100,
|
|
1054
|
+
disabledContainerFillColorOnDark: _coreTokens["default"].color_grey_700,
|
|
1055
|
+
errorBorderColor: _coreTokens["default"].color_red_700,
|
|
1056
|
+
errorBorderColorOnDark: _coreTokens["default"].color_red_500,
|
|
1057
|
+
hoverErrorBorderColor: _coreTokens["default"].color_red_600,
|
|
1201
1058
|
hoverErrorBorderColorOnDark: "#fe677b",
|
|
1202
|
-
inputMarginTop:
|
|
1203
|
-
inputMarginBottom:
|
|
1204
|
-
errorMessageColor:
|
|
1205
|
-
errorMessageColorOnDark:
|
|
1206
|
-
errorIconColor:
|
|
1207
|
-
errorIconColorOnDark:
|
|
1208
|
-
labelFontColor:
|
|
1209
|
-
labelFontColorOnDark:
|
|
1210
|
-
labelFontSize:
|
|
1211
|
-
labelFontStyle:
|
|
1212
|
-
labelFontWeight:
|
|
1213
|
-
labelLineHeight:
|
|
1214
|
-
disabledLabelFontColor:
|
|
1215
|
-
disabledLabelFontColorOnDark:
|
|
1216
|
-
optionalLabelFontWeight:
|
|
1217
|
-
helperTextFontColor:
|
|
1218
|
-
helperTextFontColorOnDark:
|
|
1219
|
-
helperTextFontSize:
|
|
1220
|
-
helperTextFontStyle:
|
|
1221
|
-
helperTextFontWeight:
|
|
1222
|
-
helperTextLineHeight:
|
|
1223
|
-
disabledHelperTextFontColor:
|
|
1224
|
-
disabledHelperTextFontColorOnDark:
|
|
1225
|
-
prefixColor:
|
|
1226
|
-
prefixColorOnDark:
|
|
1227
|
-
suffixColor:
|
|
1228
|
-
suffixColorOnDark:
|
|
1229
|
-
disabledPrefixColor:
|
|
1230
|
-
disabledSuffixColor:
|
|
1231
|
-
disabledPrefixColorOnDark:
|
|
1232
|
-
disabledSuffixColorOnDark:
|
|
1233
|
-
placeholderFontColor:
|
|
1234
|
-
placeholderFontColorOnDark:
|
|
1235
|
-
disabledPlaceholderFontColor:
|
|
1236
|
-
disabledPlaceholderFontColorOnDark:
|
|
1237
|
-
valueFontColor:
|
|
1238
|
-
valueFontColorOnDark:
|
|
1239
|
-
valueFontSize:
|
|
1240
|
-
valueFontStyle:
|
|
1241
|
-
valueFontWeight:
|
|
1242
|
-
disabledValueFontColor:
|
|
1243
|
-
disabledValueFontColorOnDark:
|
|
1244
|
-
actionIconColor:
|
|
1245
|
-
actionIconColorOnDark:
|
|
1246
|
-
disabledActionIconColor:
|
|
1247
|
-
disabledActionIconColorOnDark:
|
|
1248
|
-
hoverActionIconColor:
|
|
1249
|
-
hoverActionIconColorOnDark:
|
|
1250
|
-
focusActionIconColor:
|
|
1251
|
-
focusActionIconColorOnDark:
|
|
1252
|
-
activeActionIconColor:
|
|
1253
|
-
activeActionIconColorOnDark:
|
|
1254
|
-
actionBackgroundColor:
|
|
1255
|
-
actionBackgroundColorOnDark:
|
|
1256
|
-
disabledActionBackgroundColor:
|
|
1257
|
-
disabledActionBackgroundColorOnDark:
|
|
1258
|
-
hoverActionBackgroundColor:
|
|
1259
|
-
hoverActionBackgroundColorOnDark:
|
|
1260
|
-
focusActionBorderColor:
|
|
1261
|
-
focusActionBorderColorOnDark:
|
|
1262
|
-
activeActionBackgroundColor:
|
|
1263
|
-
activeActionBackgroundColorOnDark:
|
|
1264
|
-
listDialogBackgroundColor:
|
|
1265
|
-
listDialogBorderColor:
|
|
1266
|
-
listOptionDividerColor:
|
|
1267
|
-
listOptionFontColor:
|
|
1268
|
-
listOptionFontSize:
|
|
1269
|
-
listOptionFontStyle:
|
|
1270
|
-
listOptionFontWeight:
|
|
1271
|
-
systemMessageFontColor:
|
|
1272
|
-
errorListDialogFontColor:
|
|
1273
|
-
errorListDialogBackgroundColor:
|
|
1274
|
-
errorListDialogBorderColor:
|
|
1275
|
-
hoverListOptionBackgroundColor:
|
|
1276
|
-
activeListOptionBackgroundColor:
|
|
1277
|
-
focusListOptionBorderColor:
|
|
1059
|
+
inputMarginTop: _coreTokens["default"].spacing_4,
|
|
1060
|
+
inputMarginBottom: _coreTokens["default"].spacing_4,
|
|
1061
|
+
errorMessageColor: _coreTokens["default"].color_red_700,
|
|
1062
|
+
errorMessageColorOnDark: _coreTokens["default"].color_red_500,
|
|
1063
|
+
errorIconColor: _coreTokens["default"].color_red_700,
|
|
1064
|
+
errorIconColorOnDark: _coreTokens["default"].color_red_500,
|
|
1065
|
+
labelFontColor: _coreTokens["default"].color_black,
|
|
1066
|
+
labelFontColorOnDark: _coreTokens["default"].color_white,
|
|
1067
|
+
labelFontSize: _coreTokens["default"].type_scale_02,
|
|
1068
|
+
labelFontStyle: _coreTokens["default"].type_normal,
|
|
1069
|
+
labelFontWeight: _coreTokens["default"].type_semibold,
|
|
1070
|
+
labelLineHeight: _coreTokens["default"].type_leading_loose_01,
|
|
1071
|
+
disabledLabelFontColor: _coreTokens["default"].color_grey_500,
|
|
1072
|
+
disabledLabelFontColorOnDark: _coreTokens["default"].color_grey_500,
|
|
1073
|
+
optionalLabelFontWeight: _coreTokens["default"].type_regular,
|
|
1074
|
+
helperTextFontColor: _coreTokens["default"].color_black,
|
|
1075
|
+
helperTextFontColorOnDark: _coreTokens["default"].color_white,
|
|
1076
|
+
helperTextFontSize: _coreTokens["default"].type_scale_01,
|
|
1077
|
+
helperTextFontStyle: _coreTokens["default"].type_normal,
|
|
1078
|
+
helperTextFontWeight: _coreTokens["default"].type_regular,
|
|
1079
|
+
helperTextLineHeight: _coreTokens["default"].type_leading_normal,
|
|
1080
|
+
disabledHelperTextFontColor: _coreTokens["default"].color_grey_500,
|
|
1081
|
+
disabledHelperTextFontColorOnDark: _coreTokens["default"].color_grey_500,
|
|
1082
|
+
prefixColor: _coreTokens["default"].color_grey_700,
|
|
1083
|
+
prefixColorOnDark: _coreTokens["default"].color_white,
|
|
1084
|
+
suffixColor: _coreTokens["default"].color_grey_700,
|
|
1085
|
+
suffixColorOnDark: _coreTokens["default"].color_white,
|
|
1086
|
+
disabledPrefixColor: _coreTokens["default"].color_grey_400,
|
|
1087
|
+
disabledSuffixColor: _coreTokens["default"].color_grey_400,
|
|
1088
|
+
disabledPrefixColorOnDark: _coreTokens["default"].color_grey_500,
|
|
1089
|
+
disabledSuffixColorOnDark: _coreTokens["default"].color_grey_500,
|
|
1090
|
+
placeholderFontColor: _coreTokens["default"].color_grey_800_a,
|
|
1091
|
+
placeholderFontColorOnDark: _coreTokens["default"].color_grey_100,
|
|
1092
|
+
disabledPlaceholderFontColor: _coreTokens["default"].color_grey_500,
|
|
1093
|
+
disabledPlaceholderFontColorOnDark: _coreTokens["default"].color_grey_500,
|
|
1094
|
+
valueFontColor: _coreTokens["default"].color_black,
|
|
1095
|
+
valueFontColorOnDark: _coreTokens["default"].color_white,
|
|
1096
|
+
valueFontSize: _coreTokens["default"].type_scale_03,
|
|
1097
|
+
valueFontStyle: _coreTokens["default"].type_normal,
|
|
1098
|
+
valueFontWeight: _coreTokens["default"].type_regular,
|
|
1099
|
+
disabledValueFontColor: _coreTokens["default"].color_grey_500,
|
|
1100
|
+
disabledValueFontColorOnDark: _coreTokens["default"].color_grey_500,
|
|
1101
|
+
actionIconColor: _coreTokens["default"].color_black,
|
|
1102
|
+
actionIconColorOnDark: _coreTokens["default"].color_white,
|
|
1103
|
+
disabledActionIconColor: _coreTokens["default"].color_grey_500,
|
|
1104
|
+
disabledActionIconColorOnDark: _coreTokens["default"].color_grey_500,
|
|
1105
|
+
hoverActionIconColor: _coreTokens["default"].color_black,
|
|
1106
|
+
hoverActionIconColorOnDark: _coreTokens["default"].color_white,
|
|
1107
|
+
focusActionIconColor: _coreTokens["default"].color_black,
|
|
1108
|
+
focusActionIconColorOnDark: _coreTokens["default"].color_white,
|
|
1109
|
+
activeActionIconColor: _coreTokens["default"].color_black,
|
|
1110
|
+
activeActionIconColorOnDark: _coreTokens["default"].color_black,
|
|
1111
|
+
actionBackgroundColor: _coreTokens["default"].color_transparent,
|
|
1112
|
+
actionBackgroundColorOnDark: _coreTokens["default"].color_transparent,
|
|
1113
|
+
disabledActionBackgroundColor: _coreTokens["default"].color_transparent,
|
|
1114
|
+
disabledActionBackgroundColorOnDark: _coreTokens["default"].color_transparent,
|
|
1115
|
+
hoverActionBackgroundColor: _coreTokens["default"].color_grey_100,
|
|
1116
|
+
hoverActionBackgroundColorOnDark: _coreTokens["default"].color_grey_700,
|
|
1117
|
+
focusActionBorderColor: _coreTokens["default"].color_blue_600,
|
|
1118
|
+
focusActionBorderColorOnDark: _coreTokens["default"].color_blue_600,
|
|
1119
|
+
activeActionBackgroundColor: _coreTokens["default"].color_grey_300,
|
|
1120
|
+
activeActionBackgroundColorOnDark: _coreTokens["default"].color_grey_500,
|
|
1121
|
+
listDialogBackgroundColor: _coreTokens["default"].color_white,
|
|
1122
|
+
listDialogBorderColor: _coreTokens["default"].color_grey_400,
|
|
1123
|
+
listOptionDividerColor: _coreTokens["default"].color_grey_200,
|
|
1124
|
+
listOptionFontColor: _coreTokens["default"].color_black,
|
|
1125
|
+
listOptionFontSize: _coreTokens["default"].type_scale_02,
|
|
1126
|
+
listOptionFontStyle: _coreTokens["default"].type_normal,
|
|
1127
|
+
listOptionFontWeight: _coreTokens["default"].type_regular,
|
|
1128
|
+
systemMessageFontColor: _coreTokens["default"].color_grey_700,
|
|
1129
|
+
errorListDialogFontColor: _coreTokens["default"].color_black,
|
|
1130
|
+
errorListDialogBackgroundColor: _coreTokens["default"].color_red_50,
|
|
1131
|
+
errorListDialogBorderColor: _coreTokens["default"].color_red_700,
|
|
1132
|
+
hoverListOptionBackgroundColor: _coreTokens["default"].color_grey_100,
|
|
1133
|
+
activeListOptionBackgroundColor: _coreTokens["default"].color_grey_300,
|
|
1134
|
+
focusListOptionBorderColor: _coreTokens["default"].color_blue_600
|
|
1278
1135
|
},
|
|
1279
1136
|
toggleGroup: {
|
|
1280
|
-
containerBackgroundColor:
|
|
1281
|
-
containerBorderColor:
|
|
1282
|
-
labelFontColor:
|
|
1283
|
-
disabledLabelFontColor:
|
|
1284
|
-
helperTextFontColor:
|
|
1285
|
-
disabledHelperTextFontcolor:
|
|
1286
|
-
unselectedBackgroundColor:
|
|
1287
|
-
unselectedHoverBackgroundColor:
|
|
1288
|
-
unselectedActiveBackgroundColor:
|
|
1289
|
-
unselectedDisabledBackgroundColor:
|
|
1290
|
-
unselectedFontColor:
|
|
1291
|
-
unselectedDisabledFontColor:
|
|
1292
|
-
selectedBackgroundColor:
|
|
1293
|
-
selectedHoverBackgroundColor:
|
|
1294
|
-
selectedActiveBackgroundColor:
|
|
1295
|
-
selectedDisabledBackgroundColor:
|
|
1296
|
-
selectedFontColor:
|
|
1297
|
-
selectedDisabledFontColor:
|
|
1298
|
-
focusColor:
|
|
1299
|
-
labelFontFamily:
|
|
1300
|
-
labelFontSize:
|
|
1301
|
-
labelFontStyle:
|
|
1302
|
-
labelFontWeight:
|
|
1303
|
-
labelLineHeight:
|
|
1304
|
-
helperTextFontFamily:
|
|
1305
|
-
helperTextFontSize:
|
|
1306
|
-
helperTextFontStyle:
|
|
1307
|
-
helperTextFontWeight:
|
|
1308
|
-
helperTextLineHeight:
|
|
1309
|
-
optionLabelFontFamily:
|
|
1310
|
-
optionLabelFontSize:
|
|
1311
|
-
optionLabelFontStyle:
|
|
1312
|
-
optionLabelFontWeight:
|
|
1313
|
-
iconPaddingRight:
|
|
1314
|
-
iconPaddingLeft:
|
|
1315
|
-
labelPaddingLeft:
|
|
1316
|
-
labelPaddingRight:
|
|
1317
|
-
iconMarginRight:
|
|
1318
|
-
containerMarginTop:
|
|
1319
|
-
optionBorderThickness:
|
|
1320
|
-
optionBorderStyle:
|
|
1321
|
-
optionBorderRadius:
|
|
1322
|
-
containerBorderThickness:
|
|
1323
|
-
containerBorderStyle:
|
|
1324
|
-
containerBorderRadius:
|
|
1325
|
-
optionFocusBorderThickness:
|
|
1137
|
+
containerBackgroundColor: _coreTokens["default"].color_grey_50,
|
|
1138
|
+
containerBorderColor: _coreTokens["default"].color_grey_500,
|
|
1139
|
+
labelFontColor: _coreTokens["default"].color_black,
|
|
1140
|
+
disabledLabelFontColor: _coreTokens["default"].color_grey_500,
|
|
1141
|
+
helperTextFontColor: _coreTokens["default"].color_black,
|
|
1142
|
+
disabledHelperTextFontcolor: _coreTokens["default"].color_grey_500,
|
|
1143
|
+
unselectedBackgroundColor: _coreTokens["default"].color_grey_200,
|
|
1144
|
+
unselectedHoverBackgroundColor: _coreTokens["default"].color_grey_300,
|
|
1145
|
+
unselectedActiveBackgroundColor: _coreTokens["default"].color_purple_700,
|
|
1146
|
+
unselectedDisabledBackgroundColor: _coreTokens["default"].color_grey_100,
|
|
1147
|
+
unselectedFontColor: _coreTokens["default"].color_black,
|
|
1148
|
+
unselectedDisabledFontColor: _coreTokens["default"].color_grey_500,
|
|
1149
|
+
selectedBackgroundColor: _coreTokens["default"].color_purple_700,
|
|
1150
|
+
selectedHoverBackgroundColor: _coreTokens["default"].color_purple_800,
|
|
1151
|
+
selectedActiveBackgroundColor: _coreTokens["default"].color_purple_900,
|
|
1152
|
+
selectedDisabledBackgroundColor: _coreTokens["default"].color_purple_100,
|
|
1153
|
+
selectedFontColor: _coreTokens["default"].color_white,
|
|
1154
|
+
selectedDisabledFontColor: _coreTokens["default"].color_purple_300,
|
|
1155
|
+
focusColor: _coreTokens["default"].color_blue_600,
|
|
1156
|
+
labelFontFamily: _coreTokens["default"].type_sans,
|
|
1157
|
+
labelFontSize: _coreTokens["default"].type_scale_02,
|
|
1158
|
+
labelFontStyle: _coreTokens["default"].type_normal,
|
|
1159
|
+
labelFontWeight: _coreTokens["default"].type_semibold,
|
|
1160
|
+
labelLineHeight: _coreTokens["default"].type_leading_loose_01,
|
|
1161
|
+
helperTextFontFamily: _coreTokens["default"].type_sans,
|
|
1162
|
+
helperTextFontSize: _coreTokens["default"].type_scale_01,
|
|
1163
|
+
helperTextFontStyle: _coreTokens["default"].type_normal,
|
|
1164
|
+
helperTextFontWeight: _coreTokens["default"].type_regular,
|
|
1165
|
+
helperTextLineHeight: _coreTokens["default"].type_leading_normal,
|
|
1166
|
+
optionLabelFontFamily: _coreTokens["default"].type_sans,
|
|
1167
|
+
optionLabelFontSize: _coreTokens["default"].type_scale_03,
|
|
1168
|
+
optionLabelFontStyle: _coreTokens["default"].type_normal,
|
|
1169
|
+
optionLabelFontWeight: _coreTokens["default"].type_regular,
|
|
1170
|
+
iconPaddingRight: _coreTokens["default"].spacing_8,
|
|
1171
|
+
iconPaddingLeft: _coreTokens["default"].spacing_8,
|
|
1172
|
+
labelPaddingLeft: _coreTokens["default"].spacing_24,
|
|
1173
|
+
labelPaddingRight: _coreTokens["default"].spacing_24,
|
|
1174
|
+
iconMarginRight: _coreTokens["default"].spacing_8,
|
|
1175
|
+
containerMarginTop: _coreTokens["default"].spacing_4,
|
|
1176
|
+
optionBorderThickness: _coreTokens["default"].border_width_0,
|
|
1177
|
+
optionBorderStyle: _coreTokens["default"].border_none,
|
|
1178
|
+
optionBorderRadius: _coreTokens["default"].border_radius_medium,
|
|
1179
|
+
containerBorderThickness: _coreTokens["default"].border_width_1,
|
|
1180
|
+
containerBorderStyle: _coreTokens["default"].border_solid,
|
|
1181
|
+
containerBorderRadius: _coreTokens["default"].border_radius_large,
|
|
1182
|
+
optionFocusBorderThickness: _coreTokens["default"].border_width_2
|
|
1326
1183
|
},
|
|
1327
1184
|
wizard: {
|
|
1328
|
-
visitedStepFontColor:
|
|
1329
|
-
visitedStepBackgroundColor:
|
|
1330
|
-
visitedStepBorderColor:
|
|
1331
|
-
unvisitedStepFontColor:
|
|
1332
|
-
unvisitedLabelFontColor:
|
|
1333
|
-
unvisitedHelperTextFontColor:
|
|
1334
|
-
unvisitedStepBackgroundColor:
|
|
1335
|
-
unvisitedStepBorderColor:
|
|
1336
|
-
selectedStepFontColor:
|
|
1337
|
-
selectedStepBackgroundColor:
|
|
1338
|
-
selectedStepBorderColor:
|
|
1339
|
-
selectedLabelFontColor:
|
|
1340
|
-
selectedHelperTextFontColor:
|
|
1185
|
+
visitedStepFontColor: _coreTokens["default"].color_black,
|
|
1186
|
+
visitedStepBackgroundColor: _coreTokens["default"].color_white,
|
|
1187
|
+
visitedStepBorderColor: _coreTokens["default"].color_black,
|
|
1188
|
+
unvisitedStepFontColor: _coreTokens["default"].color_grey_700,
|
|
1189
|
+
unvisitedLabelFontColor: _coreTokens["default"].color_grey_700,
|
|
1190
|
+
unvisitedHelperTextFontColor: _coreTokens["default"].color_grey_700,
|
|
1191
|
+
unvisitedStepBackgroundColor: _coreTokens["default"].color_transparent,
|
|
1192
|
+
unvisitedStepBorderColor: _coreTokens["default"].color_grey_700,
|
|
1193
|
+
selectedStepFontColor: _coreTokens["default"].color_white,
|
|
1194
|
+
selectedStepBackgroundColor: _coreTokens["default"].color_purple_700,
|
|
1195
|
+
selectedStepBorderColor: _coreTokens["default"].color_purple_700,
|
|
1196
|
+
selectedLabelFontColor: _coreTokens["default"].color_black,
|
|
1197
|
+
selectedHelperTextFontColor: _coreTokens["default"].color_black,
|
|
1341
1198
|
selectedStepWidth: "32px",
|
|
1342
1199
|
selectedStepHeight: "32px",
|
|
1343
1200
|
selectedStepBorderThickness: "2px",
|
|
1344
|
-
selectedStepBorderStyle:
|
|
1201
|
+
selectedStepBorderStyle: _coreTokens["default"].border_solid,
|
|
1345
1202
|
selectedStepBorderRadius: "45px",
|
|
1346
|
-
stepFontSize:
|
|
1347
|
-
stepFontFamily:
|
|
1348
|
-
stepFontStyle:
|
|
1349
|
-
stepFontWeight:
|
|
1350
|
-
stepFontTracking:
|
|
1203
|
+
stepFontSize: _coreTokens["default"].type_scale_03,
|
|
1204
|
+
stepFontFamily: _coreTokens["default"].type_sans,
|
|
1205
|
+
stepFontStyle: _coreTokens["default"].type_normal,
|
|
1206
|
+
stepFontWeight: _coreTokens["default"].type_regular,
|
|
1207
|
+
stepFontTracking: _coreTokens["default"].type_spacing_wide_02,
|
|
1351
1208
|
stepIconSize: "20px",
|
|
1352
1209
|
stepWidth: "32px",
|
|
1353
1210
|
stepHeight: "32px",
|
|
1354
1211
|
stepBorderThickness: "2px",
|
|
1355
|
-
stepBorderStyle:
|
|
1212
|
+
stepBorderStyle: _coreTokens["default"].border_solid,
|
|
1356
1213
|
stepBorderRadius: "45px",
|
|
1357
|
-
visitedLabelFontColor:
|
|
1358
|
-
labelFontSize:
|
|
1359
|
-
labelFontFamily:
|
|
1360
|
-
labelFontStyle:
|
|
1361
|
-
labelFontWeight:
|
|
1362
|
-
labelFontTracking:
|
|
1214
|
+
visitedLabelFontColor: _coreTokens["default"].color_black,
|
|
1215
|
+
labelFontSize: _coreTokens["default"].type_scale_03,
|
|
1216
|
+
labelFontFamily: _coreTokens["default"].type_sans,
|
|
1217
|
+
labelFontStyle: _coreTokens["default"].type_normal,
|
|
1218
|
+
labelFontWeight: _coreTokens["default"].type_regular,
|
|
1219
|
+
labelFontTracking: _coreTokens["default"].type_spacing_normal,
|
|
1363
1220
|
labelFontTextTransform: "none",
|
|
1364
1221
|
labelTextAlign: "left",
|
|
1365
|
-
helperTextFontSize:
|
|
1366
|
-
helperTextFontFamily:
|
|
1367
|
-
helperTextFontStyle:
|
|
1368
|
-
helperTextFontWeight:
|
|
1369
|
-
helperTextFontTracking:
|
|
1222
|
+
helperTextFontSize: _coreTokens["default"].type_scale_02,
|
|
1223
|
+
helperTextFontFamily: _coreTokens["default"].type_sans,
|
|
1224
|
+
helperTextFontStyle: _coreTokens["default"].type_normal,
|
|
1225
|
+
helperTextFontWeight: _coreTokens["default"].type_regular,
|
|
1226
|
+
helperTextFontTracking: _coreTokens["default"].type_spacing_normal,
|
|
1370
1227
|
helperTextFontTextTransform: "none",
|
|
1371
|
-
visitedHelperTextFontColor:
|
|
1228
|
+
visitedHelperTextFontColor: _coreTokens["default"].color_black,
|
|
1372
1229
|
helperTextTextAlign: "left",
|
|
1373
|
-
disabledStepBackgroundColor:
|
|
1374
|
-
disabledStepFontColor:
|
|
1375
|
-
disabledLabelFontColor:
|
|
1376
|
-
disabledHelperTextFontColor:
|
|
1377
|
-
disabledStepBorderColor:
|
|
1230
|
+
disabledStepBackgroundColor: _coreTokens["default"].color_grey_100,
|
|
1231
|
+
disabledStepFontColor: _coreTokens["default"].color_grey_500,
|
|
1232
|
+
disabledLabelFontColor: _coreTokens["default"].color_grey_500,
|
|
1233
|
+
disabledHelperTextFontColor: _coreTokens["default"].color_grey_500,
|
|
1234
|
+
disabledStepBorderColor: _coreTokens["default"].color_grey_100,
|
|
1378
1235
|
disabledStepWidth: "32px",
|
|
1379
1236
|
disabledStepHeight: "32px",
|
|
1380
1237
|
disabledStepBorderThickness: "2px",
|
|
1381
|
-
disabledStepBorderStyle:
|
|
1238
|
+
disabledStepBorderStyle: _coreTokens["default"].border_solid,
|
|
1382
1239
|
disabledStepBorderRadius: "45px",
|
|
1383
1240
|
separatorBorderThickness: "1px",
|
|
1384
|
-
separatorBorderStyle:
|
|
1385
|
-
separatorColor:
|
|
1386
|
-
focusColor:
|
|
1241
|
+
separatorBorderStyle: _coreTokens["default"].border_solid,
|
|
1242
|
+
separatorColor: _coreTokens["default"].color_grey_700,
|
|
1243
|
+
focusColor: _coreTokens["default"].color_blue_600
|
|
1387
1244
|
}
|
|
1388
1245
|
};
|
|
1389
1246
|
exports.componentTokens = componentTokens;
|