@dxc-technology/halstack-react 0.0.0-d30020b → 0.0.0-d3ac293
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/BackgroundColorContext.d.ts +2 -2
- package/BackgroundColorContext.js +1 -1
- package/HalstackContext.d.ts +1336 -0
- package/HalstackContext.js +335 -0
- package/accordion/Accordion.d.ts +1 -1
- package/accordion/Accordion.js +118 -126
- package/accordion/Accordion.stories.tsx +115 -27
- package/accordion/Accordion.test.js +71 -0
- package/accordion/types.d.ts +9 -4
- package/accordion-group/AccordionGroup.d.ts +1 -1
- package/accordion-group/AccordionGroup.js +17 -38
- package/accordion-group/AccordionGroup.stories.tsx +28 -2
- package/accordion-group/AccordionGroup.test.js +126 -0
- package/accordion-group/types.d.ts +14 -3
- package/alert/Alert.js +7 -4
- package/alert/Alert.stories.tsx +28 -0
- package/alert/Alert.test.js +92 -0
- package/badge/Badge.d.ts +4 -0
- package/badge/Badge.js +5 -3
- package/badge/types.d.ts +5 -0
- package/bleed/Bleed.js +1 -34
- package/bleed/Bleed.stories.tsx +94 -95
- package/bleed/types.d.ts +25 -1
- package/box/Box.js +25 -37
- package/box/Box.stories.tsx +15 -0
- package/box/Box.test.js +18 -0
- package/box/types.d.ts +1 -0
- package/bulleted-list/BulletedList.d.ts +7 -0
- package/bulleted-list/BulletedList.js +123 -0
- package/bulleted-list/BulletedList.stories.tsx +200 -0
- package/bulleted-list/types.d.ts +11 -0
- package/button/Button.js +52 -69
- package/button/Button.stories.tsx +159 -8
- package/button/Button.test.js +35 -0
- package/button/types.d.ts +7 -7
- package/card/Card.js +25 -28
- package/card/Card.test.js +50 -0
- package/card/types.d.ts +1 -0
- package/checkbox/Checkbox.d.ts +2 -2
- package/checkbox/Checkbox.js +107 -110
- package/checkbox/Checkbox.stories.tsx +198 -130
- package/checkbox/Checkbox.test.js +155 -0
- package/checkbox/types.d.ts +13 -5
- package/chip/Chip.js +18 -24
- package/chip/Chip.stories.tsx +96 -9
- package/chip/Chip.test.js +54 -0
- package/chip/types.d.ts +1 -1
- package/common/utils.d.ts +1 -0
- package/common/utils.js +4 -4
- package/common/variables.d.ts +1625 -0
- package/common/variables.js +476 -583
- package/date-input/Calendar.d.ts +4 -0
- package/date-input/Calendar.js +258 -0
- package/date-input/DateInput.js +169 -258
- package/date-input/DateInput.stories.tsx +199 -33
- package/date-input/DateInput.test.js +835 -0
- package/date-input/DatePicker.d.ts +4 -0
- package/date-input/DatePicker.js +146 -0
- package/date-input/Icons.d.ts +6 -0
- package/date-input/Icons.js +75 -0
- package/date-input/YearPicker.d.ts +4 -0
- package/date-input/YearPicker.js +126 -0
- package/date-input/types.d.ts +67 -9
- package/dialog/Dialog.js +76 -93
- package/dialog/Dialog.stories.tsx +230 -123
- package/dialog/Dialog.test.js +369 -0
- package/dialog/types.d.ts +3 -2
- package/dropdown/Dropdown.d.ts +1 -1
- package/dropdown/Dropdown.js +246 -253
- package/dropdown/Dropdown.stories.tsx +245 -56
- package/dropdown/Dropdown.test.js +586 -0
- package/dropdown/DropdownMenu.d.ts +4 -0
- package/dropdown/DropdownMenu.js +70 -0
- package/dropdown/DropdownMenuItem.d.ts +4 -0
- package/dropdown/DropdownMenuItem.js +81 -0
- package/dropdown/types.d.ts +25 -5
- package/file-input/FileInput.d.ts +2 -2
- package/file-input/FileInput.js +181 -223
- package/file-input/FileInput.stories.tsx +122 -11
- package/file-input/FileInput.test.js +457 -0
- package/file-input/FileItem.d.ts +4 -14
- package/file-input/FileItem.js +44 -66
- package/file-input/types.d.ts +17 -0
- package/flex/Flex.d.ts +4 -0
- package/flex/Flex.js +69 -0
- package/flex/Flex.stories.tsx +103 -0
- package/flex/types.d.ts +32 -0
- package/footer/Footer.js +16 -89
- package/footer/Footer.stories.tsx +99 -1
- package/footer/Footer.test.js +97 -0
- package/footer/Icons.js +1 -1
- package/footer/types.d.ts +2 -1
- package/header/Header.js +108 -129
- package/header/Header.stories.tsx +189 -36
- package/header/Header.test.js +79 -0
- package/header/Icons.js +2 -2
- package/header/types.d.ts +3 -2
- package/heading/Heading.js +1 -1
- package/heading/Heading.test.js +186 -0
- package/inset/Inset.js +1 -34
- package/inset/Inset.stories.tsx +36 -36
- package/inset/types.d.ts +25 -1
- package/layout/ApplicationLayout.d.ts +16 -6
- package/layout/ApplicationLayout.js +72 -132
- package/layout/ApplicationLayout.stories.tsx +84 -93
- package/layout/Icons.d.ts +5 -0
- package/layout/Icons.js +13 -2
- package/layout/SidenavContext.d.ts +5 -0
- package/layout/SidenavContext.js +19 -0
- package/layout/types.d.ts +18 -33
- package/link/Link.d.ts +3 -2
- package/link/Link.js +59 -76
- package/link/Link.stories.tsx +155 -53
- package/link/Link.test.js +81 -0
- package/link/types.d.ts +7 -23
- package/main.d.ts +10 -15
- package/main.js +48 -82
- package/nav-tabs/NavTabs.d.ts +8 -0
- package/nav-tabs/NavTabs.js +125 -0
- package/nav-tabs/NavTabs.stories.tsx +260 -0
- package/nav-tabs/NavTabs.test.js +82 -0
- package/nav-tabs/Tab.d.ts +4 -0
- package/nav-tabs/Tab.js +150 -0
- package/nav-tabs/types.d.ts +53 -0
- package/number-input/NumberInput.js +11 -18
- package/number-input/NumberInput.stories.tsx +5 -5
- package/number-input/NumberInput.test.js +542 -0
- package/number-input/types.d.ts +17 -10
- package/package.json +20 -23
- package/paginator/Icons.d.ts +5 -0
- package/paginator/Icons.js +16 -28
- package/paginator/Paginator.js +19 -46
- package/paginator/Paginator.stories.tsx +24 -0
- package/paginator/Paginator.test.js +305 -0
- package/paragraph/Paragraph.d.ts +6 -0
- package/paragraph/Paragraph.js +38 -0
- package/paragraph/Paragraph.stories.tsx +44 -0
- package/password-input/PasswordInput.js +7 -4
- package/password-input/PasswordInput.test.js +181 -0
- package/password-input/types.d.ts +14 -11
- package/progress-bar/ProgressBar.d.ts +2 -2
- package/progress-bar/ProgressBar.js +61 -55
- package/progress-bar/ProgressBar.stories.jsx +47 -12
- package/progress-bar/ProgressBar.test.js +110 -0
- package/progress-bar/types.d.ts +3 -4
- package/quick-nav/QuickNav.d.ts +4 -0
- package/quick-nav/QuickNav.js +117 -0
- package/quick-nav/QuickNav.stories.tsx +356 -0
- package/quick-nav/types.d.ts +21 -0
- package/quick-nav/types.js +5 -0
- package/radio-group/Radio.d.ts +1 -1
- package/radio-group/Radio.js +53 -37
- package/radio-group/RadioGroup.js +67 -57
- package/radio-group/RadioGroup.stories.tsx +171 -36
- package/radio-group/RadioGroup.test.js +563 -89
- package/radio-group/types.d.ts +82 -4
- package/resultsetTable/Icons.d.ts +7 -0
- package/resultsetTable/Icons.js +51 -0
- package/resultsetTable/ResultsetTable.js +49 -108
- package/resultsetTable/ResultsetTable.stories.tsx +50 -25
- package/resultsetTable/ResultsetTable.test.js +325 -0
- package/resultsetTable/types.d.ts +2 -2
- package/select/Icons.d.ts +10 -0
- package/select/Icons.js +93 -0
- package/select/Listbox.d.ts +4 -0
- package/select/Listbox.js +169 -0
- package/select/Option.d.ts +4 -0
- package/select/Option.js +97 -0
- package/select/Select.js +185 -384
- package/select/Select.stories.tsx +600 -201
- package/select/Select.test.js +2228 -0
- package/select/types.d.ts +53 -13
- package/sidenav/Sidenav.d.ts +6 -5
- package/sidenav/Sidenav.js +183 -53
- package/sidenav/Sidenav.stories.tsx +249 -149
- package/sidenav/Sidenav.test.js +44 -0
- package/sidenav/types.d.ts +50 -27
- package/slider/Slider.d.ts +2 -2
- package/slider/Slider.js +124 -98
- package/slider/Slider.stories.tsx +72 -9
- package/slider/Slider.test.js +250 -0
- package/slider/types.d.ts +10 -2
- package/spinner/Spinner.js +4 -4
- package/spinner/Spinner.stories.jsx +27 -1
- package/spinner/Spinner.test.js +64 -0
- package/switch/Switch.d.ts +2 -2
- package/switch/Switch.js +152 -69
- package/switch/Switch.stories.tsx +53 -42
- package/switch/Switch.test.js +225 -0
- package/switch/types.d.ts +12 -4
- package/table/Table.js +3 -3
- package/table/Table.stories.jsx +80 -1
- package/table/Table.test.js +26 -0
- package/tabs/Tab.d.ts +4 -0
- package/tabs/Tab.js +133 -0
- package/tabs/Tabs.d.ts +1 -1
- package/tabs/Tabs.js +363 -109
- package/tabs/Tabs.stories.tsx +119 -13
- package/tabs/Tabs.test.js +350 -0
- package/tabs/types.d.ts +19 -5
- package/tag/Tag.js +17 -22
- package/tag/Tag.stories.tsx +25 -8
- package/tag/Tag.test.js +60 -0
- package/tag/types.d.ts +1 -1
- package/text-input/Icons.d.ts +8 -0
- package/text-input/Icons.js +60 -0
- package/text-input/Suggestion.d.ts +4 -0
- package/text-input/Suggestion.js +84 -0
- package/text-input/Suggestions.d.ts +4 -0
- package/text-input/Suggestions.js +134 -0
- package/text-input/TextInput.js +224 -345
- package/text-input/TextInput.stories.tsx +310 -197
- package/text-input/TextInput.test.js +1723 -0
- package/text-input/types.d.ts +50 -12
- package/textarea/Textarea.js +22 -29
- package/textarea/Textarea.stories.jsx +93 -13
- package/textarea/Textarea.test.js +437 -0
- package/textarea/types.d.ts +18 -11
- package/toggle-group/ToggleGroup.d.ts +1 -1
- package/toggle-group/ToggleGroup.js +6 -5
- package/toggle-group/ToggleGroup.stories.tsx +46 -4
- package/toggle-group/ToggleGroup.test.js +156 -0
- package/toggle-group/types.d.ts +9 -1
- package/typography/Typography.d.ts +4 -0
- package/typography/Typography.js +32 -0
- package/typography/Typography.stories.tsx +198 -0
- package/typography/types.d.ts +18 -0
- package/typography/types.js +5 -0
- package/useTheme.d.ts +1234 -1
- package/useTheme.js +3 -3
- package/useTranslatedLabels.d.ts +85 -0
- package/useTranslatedLabels.js +20 -0
- package/utils/BaseTypography.d.ts +21 -0
- package/utils/BaseTypography.js +108 -0
- package/utils/FocusLock.d.ts +13 -0
- package/utils/FocusLock.js +139 -0
- package/wizard/Wizard.d.ts +1 -1
- package/wizard/Wizard.js +59 -55
- package/wizard/Wizard.stories.tsx +48 -19
- package/wizard/Wizard.test.js +141 -0
- package/wizard/types.d.ts +10 -5
- package/ThemeContext.d.ts +0 -15
- package/ThemeContext.js +0 -243
- package/V3Select/V3Select.js +0 -455
- package/V3Select/index.d.ts +0 -27
- package/V3Textarea/V3Textarea.js +0 -260
- package/V3Textarea/index.d.ts +0 -27
- package/common/RequiredComponent.js +0 -32
- package/date/Date.js +0 -373
- package/date/index.d.ts +0 -27
- package/input-text/Icons.js +0 -22
- package/input-text/InputText.js +0 -611
- package/input-text/index.d.ts +0 -36
- package/list/List.d.ts +0 -4
- package/list/List.js +0 -47
- package/list/List.stories.tsx +0 -95
- package/list/types.d.ts +0 -7
- package/radio/Radio.d.ts +0 -4
- package/radio/Radio.js +0 -174
- package/radio/Radio.stories.tsx +0 -192
- package/radio/types.d.ts +0 -54
- package/row/Row.d.ts +0 -3
- package/row/Row.js +0 -127
- package/row/Row.stories.tsx +0 -237
- package/row/types.d.ts +0 -10
- package/stack/Stack.d.ts +0 -3
- package/stack/Stack.js +0 -97
- package/stack/Stack.stories.tsx +0 -164
- package/stack/types.d.ts +0 -9
- package/text/Text.d.ts +0 -7
- package/text/Text.js +0 -30
- package/text/Text.stories.tsx +0 -19
- package/toggle/Toggle.js +0 -186
- package/toggle/index.d.ts +0 -21
- package/upload/Upload.js +0 -201
- package/upload/buttons-upload/ButtonsUpload.js +0 -111
- package/upload/buttons-upload/Icons.js +0 -40
- package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
- package/upload/dragAndDropArea/Icons.js +0 -39
- package/upload/file-upload/FileToUpload.js +0 -115
- package/upload/file-upload/Icons.js +0 -66
- package/upload/files-upload/FilesToUpload.js +0 -109
- package/upload/index.d.ts +0 -15
- package/upload/transaction/Icons.js +0 -160
- package/upload/transaction/Transaction.js +0 -104
- package/upload/transactions/Transactions.js +0 -94
- /package/{list → badge}/types.js +0 -0
- /package/{radio → bulleted-list}/types.js +0 -0
- /package/{row → flex}/types.js +0 -0
- /package/{stack → nav-tabs}/types.js +0 -0
package/common/variables.js
CHANGED
|
@@ -3,14 +3,9 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
7
|
-
|
|
8
|
-
var _Icons = require("../header/Icons");
|
|
9
|
-
|
|
10
|
-
var _Icons2 = require("../footer/Icons");
|
|
11
|
-
|
|
6
|
+
exports.spaces = exports.responsiveSizes = exports.globalTokens = exports.defaultTranslatedComponentLabels = exports.componentTokens = void 0;
|
|
12
7
|
var globalTokens = {
|
|
13
|
-
//
|
|
8
|
+
// Color
|
|
14
9
|
inherit: "inherit",
|
|
15
10
|
transparent: "transparent",
|
|
16
11
|
hal_white: "#ffffff",
|
|
@@ -24,13 +19,19 @@ var globalTokens = {
|
|
|
24
19
|
color_grey_800: "#4d4d4d",
|
|
25
20
|
color_grey_600: "#808080",
|
|
26
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
27
|
hal_purple_l_95: "#f2eafa",
|
|
28
28
|
hal_purple_l_90: "#e5d5f6",
|
|
29
29
|
hal_purple_l_65: "#a46ede",
|
|
30
30
|
hal_purple_s_38: "#5f249f",
|
|
31
31
|
hal_purple_d_30: "#4b1c7d",
|
|
32
32
|
hal_purple_d_20: "#321353",
|
|
33
|
-
|
|
33
|
+
hal_purple_d_70: "#9A6bb2",
|
|
34
|
+
color_purple_600: "#7d2fd0",
|
|
34
35
|
color_purple_300: "#cbacec",
|
|
35
36
|
hal_blue_l_95: "#e6f4ff",
|
|
36
37
|
hal_blue_l_80: "#99d5ff",
|
|
@@ -39,7 +40,7 @@ var globalTokens = {
|
|
|
39
40
|
hal_blue_s_35: "#0067b3",
|
|
40
41
|
hal_blue_d_20: "#003c66",
|
|
41
42
|
color_blue_200: "#cceaff",
|
|
42
|
-
color_blue_500: "#
|
|
43
|
+
color_blue_500: "#33aaff",
|
|
43
44
|
color_blue_50: "#f5fbff",
|
|
44
45
|
hal_red_l_95: "#ffe6e9",
|
|
45
46
|
hal_red_l_80: "#fe9aa7",
|
|
@@ -48,7 +49,7 @@ var globalTokens = {
|
|
|
48
49
|
hal_red_d_30: "#980115",
|
|
49
50
|
hal_red_d_20: "#65010e",
|
|
50
51
|
color_red_700: "#ffccd3",
|
|
51
|
-
color_red_50: "#
|
|
52
|
+
color_red_50: "#fff5f6",
|
|
52
53
|
color_red_600: "#fe0123",
|
|
53
54
|
hal_green_l_95: "#eafaef",
|
|
54
55
|
hal_green_l_80: "#acecbe",
|
|
@@ -61,36 +62,28 @@ var globalTokens = {
|
|
|
61
62
|
hal_yellow_d_40: "#c59f07",
|
|
62
63
|
hal_yellow_d_30: "#947705",
|
|
63
64
|
hal_orange_s_54: "#f38f20",
|
|
64
|
-
black: "#000000",
|
|
65
65
|
lightBlack: "#212121",
|
|
66
|
-
yellow: "#
|
|
67
|
-
lightGrey: "#
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
violet: "#8800F6",
|
|
78
|
-
darkBlue: "#006BF6",
|
|
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",
|
|
79
77
|
purple: "#6f2c91",
|
|
80
78
|
mediumPurple: "#ead8f3",
|
|
81
79
|
lightPurple: "#f5ebf9",
|
|
82
80
|
lighterPurple: "#d0bddb",
|
|
83
|
-
white: "#ffffff",
|
|
84
|
-
darkGrey: "#666666",
|
|
85
|
-
mediumGrey: "#bfbfbf",
|
|
86
81
|
mediumWhite: "#f9f9f9",
|
|
87
|
-
mediumBlue: "#0067b3",
|
|
88
82
|
softBlue: "#b1cee6",
|
|
89
83
|
darkWhite: "#eeeeee",
|
|
90
84
|
lighterBlack: "#b1b1b1",
|
|
91
85
|
mediumBlack: "#676767",
|
|
92
86
|
mediumGreyBlack: "#dbdbdb",
|
|
93
|
-
lightWhite: "#f2f2f2",
|
|
94
87
|
softGrey: "#cecece",
|
|
95
88
|
softBlack: "#565656",
|
|
96
89
|
// Typography
|
|
@@ -112,7 +105,7 @@ var globalTokens = {
|
|
|
112
105
|
type_normal: "normal",
|
|
113
106
|
type_spacing_tight_02: "-0.05em",
|
|
114
107
|
type_spacing_tight_01: "-0.025em",
|
|
115
|
-
type_spacing_normal: "
|
|
108
|
+
type_spacing_normal: "0em",
|
|
116
109
|
type_spacing_wide_01: "0.025em",
|
|
117
110
|
type_spacing_wide_02: "0.05em",
|
|
118
111
|
type_spacing_wide_03: "0.1em",
|
|
@@ -181,27 +174,27 @@ var componentTokens = {
|
|
|
181
174
|
titleLabelFontStyle: globalTokens.type_normal,
|
|
182
175
|
titleLabelFontColor: globalTokens.hal_black,
|
|
183
176
|
disabledTitleLabelFontColor: globalTokens.hal_grey_l_60,
|
|
184
|
-
titleLabelPaddingLeft: "0px",
|
|
185
|
-
titleLabelPaddingRight: "16px",
|
|
186
177
|
titleLabelPaddingTop: "0px",
|
|
187
178
|
titleLabelPaddingBottom: "0px",
|
|
188
|
-
|
|
189
|
-
|
|
179
|
+
titleLabelPaddingLeft: "0px",
|
|
180
|
+
titleLabelPaddingRight: "16px",
|
|
190
181
|
focusBorderColor: globalTokens.hal_blue_l_50,
|
|
182
|
+
focusBorderStyle: globalTokens.border_solid,
|
|
183
|
+
focusBorderThickness: "2px",
|
|
191
184
|
borderRadius: "4px",
|
|
192
185
|
boxShadowOffsetX: "0px",
|
|
193
186
|
boxShadowOffsetY: "6px",
|
|
194
187
|
boxShadowBlur: "10px",
|
|
195
|
-
boxShadowColor:
|
|
188
|
+
boxShadowColor: globalTokens.color_grey_a_200,
|
|
196
189
|
iconColor: globalTokens.hal_purple_s_38,
|
|
197
190
|
disabledIconColor: globalTokens.hal_grey_l_60,
|
|
198
191
|
iconSize: "24px",
|
|
199
192
|
iconMarginLeft: "0px",
|
|
200
193
|
iconMarginRigth: "12px",
|
|
201
|
-
accordionGroupSeparatorBorderColor:
|
|
194
|
+
accordionGroupSeparatorBorderColor: globalTokens.color_grey_a_200,
|
|
202
195
|
accordionGroupSeparatorBorderThickness: "1px",
|
|
203
196
|
accordionGroupSeparatorBorderRadius: "0px",
|
|
204
|
-
accordionGroupSeparatorBorderStyle:
|
|
197
|
+
accordionGroupSeparatorBorderStyle: globalTokens.border_solid
|
|
205
198
|
},
|
|
206
199
|
alert: {
|
|
207
200
|
titleFontFamily: globalTokens.type_sans,
|
|
@@ -224,7 +217,7 @@ var componentTokens = {
|
|
|
224
217
|
contentPaddingTop: "20px",
|
|
225
218
|
contentPaddingBottom: "30px",
|
|
226
219
|
borderRadius: "4px",
|
|
227
|
-
borderStyle:
|
|
220
|
+
borderStyle: globalTokens.border_solid,
|
|
228
221
|
borderThickness: "1px",
|
|
229
222
|
infoBorderColor: globalTokens.hal_blue_s_35,
|
|
230
223
|
successBorderColor: globalTokens.hal_green_s_39,
|
|
@@ -241,17 +234,16 @@ var componentTokens = {
|
|
|
241
234
|
successBackgroundColor: globalTokens.hal_green_l_95,
|
|
242
235
|
warningBackgroundColor: globalTokens.hal_yellow_l_95,
|
|
243
236
|
errorBackgroundColor: globalTokens.hal_red_l_95,
|
|
244
|
-
hoverActionBackgroundColor:
|
|
245
|
-
activeActionBackgroundColor:
|
|
237
|
+
hoverActionBackgroundColor: globalTokens.color_grey_a_100,
|
|
238
|
+
activeActionBackgroundColor: globalTokens.color_grey_a_200,
|
|
246
239
|
focusActionBorderColor: globalTokens.hal_blue_l_50,
|
|
247
|
-
overlayColor:
|
|
240
|
+
overlayColor: globalTokens.color_grey_a_800
|
|
248
241
|
},
|
|
249
242
|
box: {
|
|
250
|
-
backgroundColor: globalTokens.
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
borderStyle: "none",
|
|
243
|
+
backgroundColor: globalTokens.hal_white,
|
|
244
|
+
borderRadius: globalTokens.border_radius_medium,
|
|
245
|
+
borderThickness: globalTokens.border_width_0,
|
|
246
|
+
borderStyle: globalTokens.border_none,
|
|
255
247
|
borderColor: globalTokens.transparent,
|
|
256
248
|
noneShadowDepthShadowOffsetX: "none",
|
|
257
249
|
noneShadowDepthShadowOffsetY: "none",
|
|
@@ -262,12 +254,21 @@ var componentTokens = {
|
|
|
262
254
|
oneShadowDepthShadowOffsetY: "3px",
|
|
263
255
|
oneShadowDepthShadowBlur: "6px",
|
|
264
256
|
oneShadowDepthShadowSpread: "0px",
|
|
265
|
-
oneShadowDepthShadowColor:
|
|
257
|
+
oneShadowDepthShadowColor: globalTokens.color_grey_a_300,
|
|
266
258
|
twoShadowDepthShadowOffsetX: "0px",
|
|
267
259
|
twoShadowDepthShadowOffsetY: "3px",
|
|
268
260
|
twoShadowDepthShadowBlur: "10px",
|
|
269
261
|
twoShadowDepthShadowSpread: "0px",
|
|
270
|
-
twoShadowDepthShadowColor:
|
|
262
|
+
twoShadowDepthShadowColor: globalTokens.color_grey_a_300
|
|
263
|
+
},
|
|
264
|
+
bulletedList: {
|
|
265
|
+
fontColor: globalTokens.hal_black,
|
|
266
|
+
fontColorOnDark: globalTokens.hal_white,
|
|
267
|
+
bulletIconHeight: "1.5rem",
|
|
268
|
+
bulletIconWidth: "1.5rem",
|
|
269
|
+
bulletHeight: "5px",
|
|
270
|
+
bulletWidth: "5px",
|
|
271
|
+
bulletMarginRight: "0.5rem"
|
|
271
272
|
},
|
|
272
273
|
button: {
|
|
273
274
|
labelFontLineHeight: globalTokens.type_leading_normal,
|
|
@@ -347,7 +348,7 @@ var componentTokens = {
|
|
|
347
348
|
backgroundColorChecked: globalTokens.hal_blue_s_35,
|
|
348
349
|
backgroundColorCheckedOnDark: globalTokens.hal_grey_l_90,
|
|
349
350
|
hoverBackgroundColorChecked: globalTokens.hal_blue_d_20,
|
|
350
|
-
hoverBackgroundColorCheckedOnDark:
|
|
351
|
+
hoverBackgroundColorCheckedOnDark: globalTokens.hal_white,
|
|
351
352
|
disabledBackgroundColorChecked: globalTokens.hal_grey_l_60,
|
|
352
353
|
disabledBackgroundColorCheckedOnDark: globalTokens.color_grey_800,
|
|
353
354
|
borderColor: globalTokens.hal_blue_s_35,
|
|
@@ -382,70 +383,71 @@ var componentTokens = {
|
|
|
382
383
|
disabledFontColor: globalTokens.hal_grey_l_60,
|
|
383
384
|
borderColor: globalTokens.transparent,
|
|
384
385
|
borderRadius: "80px",
|
|
385
|
-
borderThickness:
|
|
386
|
-
borderStyle:
|
|
386
|
+
borderThickness: globalTokens.border_width_0,
|
|
387
|
+
borderStyle: globalTokens.border_solid,
|
|
387
388
|
contentPaddingLeft: "16px",
|
|
388
389
|
contentPaddingRight: "16px",
|
|
389
390
|
contentPaddingTop: "0px",
|
|
390
391
|
contentPaddingBottom: "0px",
|
|
391
392
|
iconSize: "24px",
|
|
392
393
|
iconSpacing: "8px",
|
|
393
|
-
iconColor: globalTokens.
|
|
394
|
+
iconColor: globalTokens.color_grey_800,
|
|
395
|
+
hoverIconColor: globalTokens.color_grey_a_900,
|
|
396
|
+
activeIconColor: globalTokens.hal_black,
|
|
394
397
|
disabledIconColor: globalTokens.hal_grey_l_60,
|
|
395
|
-
focusColor: globalTokens.hal_blue_l_50
|
|
396
|
-
},
|
|
397
|
-
date: {
|
|
398
|
-
pickerSelectedDateBackgroundColor: globalTokens.purple,
|
|
399
|
-
pickerSelectedDateColor: globalTokens.hal_white,
|
|
400
|
-
pickerBackgroundColor: globalTokens.hal_white,
|
|
401
|
-
pickerFontColor: globalTokens.hal_black,
|
|
402
|
-
pickerHoverDateBackgroundColor: globalTokens.lighterPurple,
|
|
403
|
-
pickerHoverDateFontColor: globalTokens.hal_black,
|
|
404
|
-
pickerActualDateColor: globalTokens.lightGrey,
|
|
405
|
-
pickerYearColor: globalTokens.hal_black,
|
|
406
|
-
pickerMonthColor: globalTokens.hal_black,
|
|
407
|
-
pickerWeekLabelColor: globalTokens.hal_black,
|
|
408
|
-
pickerBackgroundColorMonthArrows: globalTokens.transparent,
|
|
409
398
|
focusColor: globalTokens.hal_blue_l_50,
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
399
|
+
focusBorderStyle: globalTokens.border_solid,
|
|
400
|
+
focusBorderThickness: globalTokens.border_width_2,
|
|
401
|
+
focusBorderRadius: globalTokens.border_radius_medium
|
|
413
402
|
},
|
|
414
403
|
dateInput: {
|
|
415
|
-
pickerFontFamily: globalTokens.type_sans,
|
|
416
404
|
pickerBackgroundColor: globalTokens.hal_white,
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
405
|
+
pickerFontColor: globalTokens.hal_black,
|
|
406
|
+
pickerBorderColor: globalTokens.hal_grey_l_75,
|
|
407
|
+
pickerSelectedBackgroundColor: globalTokens.hal_purple_s_38,
|
|
408
|
+
pickerSelectedFontColor: globalTokens.hal_white,
|
|
409
|
+
pickerHoverBackgroundColor: globalTokens.hal_purple_l_90,
|
|
410
|
+
pickerHoverFontColor: globalTokens.hal_black,
|
|
411
|
+
pickerActiveBackgroundColor: globalTokens.hal_purple_d_30,
|
|
412
|
+
pickerActiveFontColor: globalTokens.hal_white,
|
|
413
|
+
pickerNonCurrentMonthFontColor: globalTokens.hal_grey_l_60,
|
|
414
|
+
pickerCurrentDateBorderColor: globalTokens.color_purple_300,
|
|
415
|
+
pickerCurrentDateFontColor: globalTokens.hal_black,
|
|
416
|
+
pickerCurrentYearFontColor: globalTokens.hal_purple_s_38,
|
|
417
|
+
pickerHeaderBackgroundColor: globalTokens.transparent,
|
|
418
|
+
pickerHeaderFontColor: globalTokens.hal_black,
|
|
419
|
+
pickerHeaderHoverBackgroundColor: globalTokens.hal_purple_l_90,
|
|
420
|
+
pickerHeaderHoverFontColor: globalTokens.hal_black,
|
|
421
|
+
pickerHeaderActiveBackgroundColor: globalTokens.hal_purple_d_30,
|
|
422
|
+
pickerHeaderActiveFontColor: globalTokens.hal_white,
|
|
427
423
|
pickerFocusColor: globalTokens.hal_blue_l_50,
|
|
428
|
-
|
|
429
|
-
|
|
424
|
+
pickerBorderWidth: globalTokens.border_width_1,
|
|
425
|
+
pickerBorderStyle: globalTokens.border_solid,
|
|
426
|
+
pickerFocusWidth: globalTokens.border_width_2,
|
|
427
|
+
pickerCurrentDateBorderWidth: globalTokens.border_width_1,
|
|
428
|
+
pickerFontFamily: globalTokens.type_sans,
|
|
429
|
+
pickerFontSize: globalTokens.type_scale_02,
|
|
430
|
+
pickerFontWeight: globalTokens.type_regular,
|
|
431
|
+
pickerInteractedYearFontSize: globalTokens.type_scale_05,
|
|
432
|
+
pickerHeaderFontSize: globalTokens.type_scale_02
|
|
430
433
|
},
|
|
431
434
|
dialog: {
|
|
432
|
-
overlayColor: globalTokens.
|
|
435
|
+
overlayColor: globalTokens.color_grey_a_800,
|
|
433
436
|
backgroundColor: globalTokens.hal_white,
|
|
434
437
|
closeIconWidth: "24px",
|
|
435
438
|
closeIconHeight: "24px",
|
|
436
439
|
closeIconTopPosition: "20px",
|
|
437
440
|
closeIconRightPosition: "20px",
|
|
438
|
-
closeIconBackgroundColor:
|
|
439
|
-
closeIconBorderColor:
|
|
441
|
+
closeIconBackgroundColor: globalTokens.transparent,
|
|
442
|
+
closeIconBorderColor: globalTokens.border_none,
|
|
440
443
|
closeIconColor: globalTokens.hal_black,
|
|
441
|
-
closeIconBorderThickness:
|
|
442
|
-
closeIconBorderStyle:
|
|
443
|
-
closeIconBorderRadius: "
|
|
444
|
+
closeIconBorderThickness: globalTokens.border_width_0,
|
|
445
|
+
closeIconBorderStyle: globalTokens.border_solid,
|
|
446
|
+
closeIconBorderRadius: "2px",
|
|
444
447
|
boxShadowOffsetX: "0px",
|
|
445
448
|
boxShadowOffsetY: "1px",
|
|
446
449
|
boxShadowBlur: "3px",
|
|
447
|
-
boxShadowColor:
|
|
448
|
-
overlayOpacity: "0.7"
|
|
450
|
+
boxShadowColor: globalTokens.color_grey_a_300
|
|
449
451
|
},
|
|
450
452
|
dropdown: {
|
|
451
453
|
buttonBackgroundColor: globalTokens.hal_white,
|
|
@@ -463,12 +465,12 @@ var componentTokens = {
|
|
|
463
465
|
buttonPaddingBottom: "0px",
|
|
464
466
|
buttonPaddingLeft: "16px",
|
|
465
467
|
buttonPaddingRight: "16px",
|
|
466
|
-
disabledColor: globalTokens.
|
|
468
|
+
disabledColor: globalTokens.hal_grey_l_60,
|
|
467
469
|
disabledButtonBackgroundColor: globalTokens.transparent,
|
|
468
470
|
disabledBorderColor: globalTokens.lighterBlack,
|
|
469
471
|
optionBackgroundColor: globalTokens.hal_white,
|
|
470
472
|
hoverOptionBackgroundColor: globalTokens.hal_grey_l_95,
|
|
471
|
-
activeOptionBackgroundColor: globalTokens.
|
|
473
|
+
activeOptionBackgroundColor: globalTokens.hal_grey_l_80,
|
|
472
474
|
optionFontFamily: globalTokens.type_sans,
|
|
473
475
|
optionFontSize: globalTokens.type_scale_root,
|
|
474
476
|
optionFontStyle: globalTokens.type_normal,
|
|
@@ -485,8 +487,8 @@ var componentTokens = {
|
|
|
485
487
|
caretIconColor: globalTokens.hal_black,
|
|
486
488
|
caretIconSpacing: "12px",
|
|
487
489
|
borderRadius: "4px",
|
|
488
|
-
borderStyle:
|
|
489
|
-
borderThickness:
|
|
490
|
+
borderStyle: globalTokens.border_none,
|
|
491
|
+
borderThickness: globalTokens.border_width_0,
|
|
490
492
|
borderColor: globalTokens.transparent,
|
|
491
493
|
scrollBarThumbColor: globalTokens.hal_grey_s_40,
|
|
492
494
|
scrollBarTrackColor: globalTokens.lightGrey,
|
|
@@ -505,14 +507,13 @@ var componentTokens = {
|
|
|
505
507
|
focusDropBorderColor: globalTokens.hal_blue_l_50,
|
|
506
508
|
disabledDropBorderColor: globalTokens.hal_grey_l_60,
|
|
507
509
|
dragoverDropBackgroundColor: globalTokens.color_blue_50,
|
|
508
|
-
hoverFileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
|
|
509
510
|
activeFileItemIconBackgrounColor: globalTokens.hal_grey_l_80,
|
|
510
511
|
errorFileItemBorderColor: globalTokens.hal_red_s_41,
|
|
511
512
|
errorFileItemBackgroundColor: globalTokens.color_red_50,
|
|
512
|
-
|
|
513
|
+
errorFilePreviewBackgroundColor: globalTokens.color_red_700,
|
|
513
514
|
errorFileItemIconColor: globalTokens.hal_red_s_41,
|
|
514
515
|
fileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
|
|
515
|
-
|
|
516
|
+
deleteFileItemColor: globalTokens.hal_black,
|
|
516
517
|
errorMessageFontColor: globalTokens.hal_red_s_41,
|
|
517
518
|
labelFontFamily: globalTokens.type_sans,
|
|
518
519
|
labelFontSize: globalTokens.type_scale_02,
|
|
@@ -539,16 +540,19 @@ var componentTokens = {
|
|
|
539
540
|
fileItemBorderThickness: globalTokens.border_width_1,
|
|
540
541
|
fileItemBorderStyle: globalTokens.border_solid,
|
|
541
542
|
fileItemBorderRadius: globalTokens.border_radius_medium,
|
|
542
|
-
hoverDeleteFileItemBackgroundColor:
|
|
543
|
-
activeDeleteFileItemBackgroundColor:
|
|
544
|
-
|
|
543
|
+
hoverDeleteFileItemBackgroundColor: globalTokens.color_grey_a_100,
|
|
544
|
+
activeDeleteFileItemBackgroundColor: globalTokens.color_grey_a_300,
|
|
545
|
+
focusDeleteFileItemBorderColor: globalTokens.hal_blue_l_50,
|
|
546
|
+
filePreviewBackgroundColor: globalTokens.hal_grey_l_95,
|
|
547
|
+
filePreviewIconColor: globalTokens.color_grey_600,
|
|
548
|
+
errorFilePreviewIconColor: globalTokens.hal_red_s_41
|
|
545
549
|
},
|
|
546
550
|
footer: {
|
|
547
551
|
height: "124px",
|
|
548
552
|
backgroundColor: globalTokens.hal_black,
|
|
549
553
|
bottomLinksDividerColor: globalTokens.hal_blue_l_50,
|
|
550
554
|
bottomLinksDividerThickness: "1px",
|
|
551
|
-
bottomLinksDividerStyle:
|
|
555
|
+
bottomLinksDividerStyle: globalTokens.border_solid,
|
|
552
556
|
bottomLinksDividerSpacing: "8px",
|
|
553
557
|
bottomLinksFontFamily: globalTokens.type_sans,
|
|
554
558
|
bottomLinksFontSize: globalTokens.type_scale_01,
|
|
@@ -578,7 +582,7 @@ var componentTokens = {
|
|
|
578
582
|
hamburguerFontWeight: globalTokens.type_semibold,
|
|
579
583
|
hamburguerTextTransform: globalTokens.type_uppercase,
|
|
580
584
|
hamburguerIconColor: globalTokens.hal_black,
|
|
581
|
-
hamburguerHoverColor: globalTokens.
|
|
585
|
+
hamburguerHoverColor: globalTokens.hal_grey_l_90,
|
|
582
586
|
logo: "",
|
|
583
587
|
logoResponsive: "",
|
|
584
588
|
logoHeight: "40px",
|
|
@@ -588,7 +592,7 @@ var componentTokens = {
|
|
|
588
592
|
menuTabletWidth: "60vw",
|
|
589
593
|
menuMobileWidth: "100vw",
|
|
590
594
|
minHeight: "64px",
|
|
591
|
-
overlayColor: globalTokens.
|
|
595
|
+
overlayColor: globalTokens.color_grey_a_800,
|
|
592
596
|
overlayOpacity: "0.7",
|
|
593
597
|
overlayZindex: "1600",
|
|
594
598
|
paddingTop: "0px",
|
|
@@ -597,7 +601,7 @@ var componentTokens = {
|
|
|
597
601
|
paddingLeft: "24px",
|
|
598
602
|
underlinedColor: globalTokens.hal_black,
|
|
599
603
|
underlinedThickness: "2px",
|
|
600
|
-
underlinedStyle:
|
|
604
|
+
underlinedStyle: globalTokens.border_solid,
|
|
601
605
|
contentColor: globalTokens.hal_black,
|
|
602
606
|
contentColorOnDark: globalTokens.hal_white
|
|
603
607
|
},
|
|
@@ -638,216 +642,90 @@ var componentTokens = {
|
|
|
638
642
|
level5LineHeight: globalTokens.type_leading_normal,
|
|
639
643
|
level5LetterSpacing: globalTokens.type_spacing_wide_01
|
|
640
644
|
},
|
|
641
|
-
inputText: {
|
|
642
|
-
fontFamily: globalTokens.type_sans,
|
|
643
|
-
assistiveTextFontColor: globalTokens.black,
|
|
644
|
-
assistiveTextFontColorOnDark: globalTokens.white,
|
|
645
|
-
assistiveTextFontSize: globalTokens.type_scale_01,
|
|
646
|
-
assistiveTextFontStyle: globalTokens.type_normal,
|
|
647
|
-
assistiveTextFontWeight: globalTokens.type_regular,
|
|
648
|
-
disabledColor: globalTokens.lighterBlack,
|
|
649
|
-
disabledColorOnDark: "#575757",
|
|
650
|
-
errorColor: globalTokens.red,
|
|
651
|
-
errorColorOnDark: globalTokens.hal_red_l_60,
|
|
652
|
-
optionBackgroundColor: globalTokens.white,
|
|
653
|
-
optionBorderColor: globalTokens.black,
|
|
654
|
-
optionBorderThickness: "0px",
|
|
655
|
-
optionBorderStyle: "solid",
|
|
656
|
-
optionFontColor: globalTokens.black,
|
|
657
|
-
optionFontColorOnDark: globalTokens.white,
|
|
658
|
-
optionFontSize: globalTokens.type_scale_03,
|
|
659
|
-
optionFontStyle: globalTokens.type_normal,
|
|
660
|
-
optionFontWeight: globalTokens.type_regular,
|
|
661
|
-
optionPaddingBottom: "6px",
|
|
662
|
-
optionPaddingTop: "6px",
|
|
663
|
-
scrollBarThumbColor: globalTokens.darkGrey,
|
|
664
|
-
scrollBarTrackColor: globalTokens.lightGrey,
|
|
665
|
-
hoverOptionColor: globalTokens.black,
|
|
666
|
-
hoverOptionBackgroundColor: globalTokens.lightWhite,
|
|
667
|
-
hoverOptionBackgroundColorOnDark: globalTokens.mediumGrey,
|
|
668
|
-
selectedOptionBackgroundColor: globalTokens.lightGrey,
|
|
669
|
-
selectedOptionBackgroundColorOnDark: globalTokens.lightGrey,
|
|
670
|
-
labelFontColor: globalTokens.black,
|
|
671
|
-
labelFontColorOnDark: globalTokens.white,
|
|
672
|
-
labelFontSize: globalTokens.type_scale_03,
|
|
673
|
-
labelFontStyle: globalTokens.type_normal,
|
|
674
|
-
labelFontWeight: globalTokens.type_regular,
|
|
675
|
-
valueFontColor: globalTokens.black,
|
|
676
|
-
valueFontColorOnDark: globalTokens.white,
|
|
677
|
-
valueFontSize: globalTokens.type_scale_03,
|
|
678
|
-
valueFontStyle: globalTokens.type_normal,
|
|
679
|
-
valueFontWeight: globalTokens.type_regular,
|
|
680
|
-
prefixIconColor: globalTokens.black,
|
|
681
|
-
prefixIconColorOnDark: globalTokens.white,
|
|
682
|
-
prefixLabelFontColor: globalTokens.black,
|
|
683
|
-
prefixLabelFontColorOnDark: globalTokens.white,
|
|
684
|
-
prefixLabelFontSize: globalTokens.type_scale_03,
|
|
685
|
-
prefixLabelFontStyle: globalTokens.type_normal,
|
|
686
|
-
prefixLabelFontWeight: globalTokens.type_regular,
|
|
687
|
-
suffixIconColor: globalTokens.black,
|
|
688
|
-
suffixIconColorOnDark: globalTokens.white,
|
|
689
|
-
suffixLabelFontColor: globalTokens.black,
|
|
690
|
-
suffixLabelFontColorOnDark: globalTokens.white,
|
|
691
|
-
suffixLabelFontSize: globalTokens.type_scale_03,
|
|
692
|
-
suffixLabelFontStyle: globalTokens.type_normal,
|
|
693
|
-
suffixLabelFontWeight: globalTokens.type_regular,
|
|
694
|
-
underlineColor: globalTokens.black,
|
|
695
|
-
underlineColorOnDark: globalTokens.white,
|
|
696
|
-
underlineFocusColor: globalTokens.black,
|
|
697
|
-
underlineFocusColorOnDark: globalTokens.white,
|
|
698
|
-
underlineThickness: "1px"
|
|
699
|
-
},
|
|
700
|
-
textInput: {
|
|
701
|
-
fontFamily: globalTokens.type_sans,
|
|
702
|
-
enabledBorderColor: globalTokens.hal_black,
|
|
703
|
-
enabledBorderColorOnDark: globalTokens.hal_white,
|
|
704
|
-
hoverBorderColor: globalTokens.hal_purple_l_65,
|
|
705
|
-
hoverBorderColorOnDark: globalTokens.hal_purple_l_65,
|
|
706
|
-
focusBorderColor: globalTokens.hal_blue_l_50,
|
|
707
|
-
focusBorderColorOnDark: globalTokens.hal_blue_l_50,
|
|
708
|
-
disabledBorderColor: globalTokens.hal_grey_l_60,
|
|
709
|
-
disabledBorderColorOnDark: globalTokens.hal_grey_l_60,
|
|
710
|
-
disabledContainerFillColor: globalTokens.hal_grey_l_95,
|
|
711
|
-
disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
|
|
712
|
-
errorBorderColor: globalTokens.hal_red_s_41,
|
|
713
|
-
errorBorderColorOnDark: globalTokens.hal_red_l_60,
|
|
714
|
-
hoverErrorBorderColor: globalTokens.color_red_600,
|
|
715
|
-
hoverErrorBorderColorOnDark: "#fe677b",
|
|
716
|
-
inputMarginTop: globalTokens.spacing_02,
|
|
717
|
-
inputMarginBottom: globalTokens.spacing_02,
|
|
718
|
-
errorMessageColor: globalTokens.hal_red_s_41,
|
|
719
|
-
errorMessageColorOnDark: globalTokens.hal_red_l_60,
|
|
720
|
-
errorIconColor: globalTokens.hal_red_s_41,
|
|
721
|
-
errorIconColorOnDark: globalTokens.hal_red_l_60,
|
|
722
|
-
labelFontColor: globalTokens.hal_black,
|
|
723
|
-
labelFontColorOnDark: globalTokens.hal_white,
|
|
724
|
-
labelFontSize: globalTokens.type_scale_02,
|
|
725
|
-
labelFontStyle: globalTokens.type_normal,
|
|
726
|
-
labelFontWeight: globalTokens.type_semibold,
|
|
727
|
-
labelLineHeight: globalTokens.type_leading_loose_01,
|
|
728
|
-
disabledLabelFontColor: globalTokens.hal_grey_l_60,
|
|
729
|
-
disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
|
|
730
|
-
optionalLabelFontWeight: globalTokens.type_regular,
|
|
731
|
-
helperTextFontColor: globalTokens.hal_black,
|
|
732
|
-
helperTextFontColorOnDark: globalTokens.hal_white,
|
|
733
|
-
helperTextFontSize: globalTokens.type_scale_01,
|
|
734
|
-
helperTextFontStyle: globalTokens.type_normal,
|
|
735
|
-
helperTextFontWeight: globalTokens.type_regular,
|
|
736
|
-
helperTextLineHeight: globalTokens.type_leading_normal,
|
|
737
|
-
disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
|
|
738
|
-
disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
|
|
739
|
-
prefixColor: globalTokens.hal_grey_s_40,
|
|
740
|
-
prefixColorOnDark: globalTokens.hal_white,
|
|
741
|
-
suffixColor: globalTokens.hal_grey_s_40,
|
|
742
|
-
suffixColorOnDark: globalTokens.hal_white,
|
|
743
|
-
disabledPrefixColor: globalTokens.hal_grey_l_75,
|
|
744
|
-
disabledSuffixColor: globalTokens.hal_grey_l_75,
|
|
745
|
-
disabledPrefixColorOnDark: globalTokens.hal_grey_l_60,
|
|
746
|
-
disabledSuffixColorOnDark: globalTokens.hal_grey_l_60,
|
|
747
|
-
placeholderFontColor: "#000000b3",
|
|
748
|
-
placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
|
|
749
|
-
disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
|
|
750
|
-
disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
|
|
751
|
-
valueFontColor: globalTokens.hal_black,
|
|
752
|
-
valueFontColorOnDark: globalTokens.hal_white,
|
|
753
|
-
valueFontSize: globalTokens.type_scale_03,
|
|
754
|
-
valueFontStyle: globalTokens.type_normal,
|
|
755
|
-
valueFontWeight: globalTokens.type_regular,
|
|
756
|
-
disabledValueFontColor: globalTokens.hal_grey_l_60,
|
|
757
|
-
disabledValueFontColorOnDark: globalTokens.hal_grey_l_60,
|
|
758
|
-
actionIconColor: globalTokens.hal_black,
|
|
759
|
-
actionIconColorOnDark: globalTokens.hal_white,
|
|
760
|
-
disabledActionIconColor: globalTokens.hal_grey_l_60,
|
|
761
|
-
disabledActionIconColorOnDark: globalTokens.hal_grey_l_60,
|
|
762
|
-
hoverActionIconColor: globalTokens.hal_black,
|
|
763
|
-
hoverActionIconColorOnDark: globalTokens.hal_white,
|
|
764
|
-
focusActionIconColor: globalTokens.hal_black,
|
|
765
|
-
focusActionIconColorOnDark: globalTokens.hal_white,
|
|
766
|
-
activeActionIconColor: globalTokens.hal_black,
|
|
767
|
-
activeActionIconColorOnDark: globalTokens.hal_black,
|
|
768
|
-
actionBackgroundColor: globalTokens.transparent,
|
|
769
|
-
actionBackgroundColorOnDark: globalTokens.transparent,
|
|
770
|
-
disabledActionBackgroundColor: globalTokens.transparent,
|
|
771
|
-
disabledActionBackgroundColorOnDark: globalTokens.transparent,
|
|
772
|
-
hoverActionBackgroundColor: globalTokens.hal_grey_l_95,
|
|
773
|
-
hoverActionBackgroundColorOnDark: globalTokens.hal_grey_s_40,
|
|
774
|
-
focusActionBorderColor: globalTokens.hal_blue_l_50,
|
|
775
|
-
focusActionBorderColorOnDark: globalTokens.hal_blue_l_50,
|
|
776
|
-
activeActionBackgroundColor: globalTokens.hal_grey_l_80,
|
|
777
|
-
activeActionBackgroundColorOnDark: globalTokens.hal_grey_l_60,
|
|
778
|
-
listDialogBackgroundColor: globalTokens.hal_white,
|
|
779
|
-
listDialogBorderColor: globalTokens.hal_grey_l_75,
|
|
780
|
-
listOptionDividerColor: globalTokens.hal_grey_l_90,
|
|
781
|
-
listOptionFontColor: globalTokens.hal_black,
|
|
782
|
-
listOptionFontSize: globalTokens.type_scale_02,
|
|
783
|
-
listOptionFontStyle: globalTokens.type_normal,
|
|
784
|
-
listOptionFontWeight: globalTokens.type_regular,
|
|
785
|
-
systemMessageFontColor: globalTokens.hal_grey_s_40,
|
|
786
|
-
errorListDialogFontColor: globalTokens.hal_black,
|
|
787
|
-
errorListDialogBackgroundColor: globalTokens.color_red_50,
|
|
788
|
-
errorListDialogBorderColor: globalTokens.hal_red_s_41,
|
|
789
|
-
hoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
|
|
790
|
-
activeListOptionBackgroundColor: globalTokens.hal_grey_l_80,
|
|
791
|
-
focusListOptionBorderColor: globalTokens.hal_blue_l_50
|
|
792
|
-
},
|
|
793
645
|
link: {
|
|
794
646
|
fontColor: globalTokens.hal_blue_s_35,
|
|
795
647
|
fontFamily: globalTokens.inherit,
|
|
796
|
-
fontSize: globalTokens.
|
|
648
|
+
fontSize: globalTokens.inherit,
|
|
797
649
|
fontStyle: globalTokens.type_normal,
|
|
798
650
|
fontWeight: globalTokens.type_regular,
|
|
799
651
|
iconSize: "16px",
|
|
800
652
|
iconSpacing: "4px",
|
|
801
653
|
underlineSpacing: "0px",
|
|
802
|
-
underlineStyle:
|
|
654
|
+
underlineStyle: globalTokens.border_solid,
|
|
803
655
|
underlineThickness: "1px",
|
|
804
656
|
disabledColor: globalTokens.lightGrey,
|
|
805
657
|
hoverFontColor: globalTokens.hal_blue_s_35,
|
|
806
658
|
hoverUnderlineColor: globalTokens.hal_blue_s_35,
|
|
807
|
-
visitedFontColor: globalTokens.
|
|
808
|
-
visitedUnderlineColor: globalTokens.
|
|
809
|
-
activeFontColor: globalTokens.
|
|
810
|
-
activeUnderlineColor: globalTokens.
|
|
659
|
+
visitedFontColor: globalTokens.hal_purple_s_38,
|
|
660
|
+
visitedUnderlineColor: globalTokens.hal_purple_s_38,
|
|
661
|
+
activeFontColor: globalTokens.hal_black,
|
|
662
|
+
activeUnderlineColor: globalTokens.hal_black,
|
|
811
663
|
focusColor: globalTokens.hal_blue_l_50
|
|
812
664
|
},
|
|
665
|
+
navTabs: {
|
|
666
|
+
selectedBackgroundColor: globalTokens.hal_white,
|
|
667
|
+
unselectedBackgroundColor: globalTokens.hal_white,
|
|
668
|
+
hoverBackgroundColor: globalTokens.hal_grey_l_95,
|
|
669
|
+
pressedBackgroundColor: globalTokens.hal_grey_l_90,
|
|
670
|
+
selectedFontColor: globalTokens.hal_grey_s_40,
|
|
671
|
+
unselectedFontColor: globalTokens.hal_grey_s_40,
|
|
672
|
+
disabledFontColor: globalTokens.hal_grey_l_60,
|
|
673
|
+
focusOutline: globalTokens.hal_blue_l_50,
|
|
674
|
+
selectedUnderlineColor: globalTokens.hal_purple_s_38,
|
|
675
|
+
dividerColor: globalTokens.hal_grey_l_75,
|
|
676
|
+
fontFamily: globalTokens.type_sans,
|
|
677
|
+
fontSize: globalTokens.type_scale_03,
|
|
678
|
+
fontStyle: globalTokens.type_normal,
|
|
679
|
+
fontWeight: globalTokens.type_regular,
|
|
680
|
+
selectedIconColor: globalTokens.hal_grey_s_40,
|
|
681
|
+
unselectedIconColor: globalTokens.hal_grey_s_40,
|
|
682
|
+
disabledIconColor: globalTokens.hal_grey_l_60
|
|
683
|
+
},
|
|
813
684
|
paginator: {
|
|
814
|
-
backgroundColor: globalTokens.
|
|
685
|
+
backgroundColor: globalTokens.hal_grey_l_95,
|
|
815
686
|
fontColor: globalTokens.hal_black,
|
|
816
687
|
fontFamily: globalTokens.type_sans,
|
|
817
688
|
fontSize: globalTokens.type_scale_02,
|
|
818
689
|
fontStyle: globalTokens.type_normal,
|
|
819
690
|
fontWeight: globalTokens.type_regular,
|
|
820
691
|
fontTextTransform: "none",
|
|
821
|
-
|
|
822
|
-
|
|
692
|
+
verticalPadding: "0.75rem",
|
|
693
|
+
horizontalPadding: "2rem",
|
|
823
694
|
marginRight: "40px",
|
|
824
695
|
marginLeft: "20px",
|
|
825
696
|
itemsPerPageSelectorMarginLeft: "0px",
|
|
826
|
-
itemsPerPageSelectorMarginRight: "
|
|
697
|
+
itemsPerPageSelectorMarginRight: "0.5rem",
|
|
827
698
|
pageSelectorMarginRight: "30px",
|
|
828
699
|
pageSelectorMarginLeft: "0px",
|
|
829
|
-
totalItemsContainerMarginRight: "
|
|
700
|
+
totalItemsContainerMarginRight: "2.5rem",
|
|
830
701
|
totalItemsContainerMarginLeft: "0px"
|
|
831
702
|
},
|
|
703
|
+
paragraph: {
|
|
704
|
+
fontColor: globalTokens.hal_black,
|
|
705
|
+
fontColorOnDark: globalTokens.hal_white,
|
|
706
|
+
display: "block",
|
|
707
|
+
fontSize: globalTokens.type_scale_03,
|
|
708
|
+
fontWeight: globalTokens.type_regular
|
|
709
|
+
},
|
|
832
710
|
progressBar: {
|
|
833
711
|
trackLineColor: globalTokens.hal_purple_s_38,
|
|
834
712
|
trackLineColorOnDark: globalTokens.hal_purple_l_65,
|
|
835
|
-
totalLineColor: globalTokens.
|
|
713
|
+
totalLineColor: globalTokens.hal_grey_l_90,
|
|
836
714
|
labelFontFamily: globalTokens.type_sans,
|
|
837
715
|
labelFontSize: globalTokens.type_scale_01,
|
|
838
716
|
labelFontStyle: globalTokens.type_normal,
|
|
839
717
|
labelFontWeight: globalTokens.type_regular,
|
|
840
|
-
labelFontColor: globalTokens.
|
|
718
|
+
labelFontColor: globalTokens.hal_black,
|
|
841
719
|
labelFontColorOnDark: globalTokens.hal_white,
|
|
842
720
|
labelFontTextTransform: globalTokens.type_uppercase,
|
|
843
721
|
valueFontFamily: globalTokens.type_sans,
|
|
844
722
|
valueFontSize: globalTokens.type_scale_01,
|
|
845
723
|
valueFontStyle: globalTokens.type_normal,
|
|
846
724
|
valueFontWeight: globalTokens.type_regular,
|
|
847
|
-
valueFontColor: globalTokens.
|
|
725
|
+
valueFontColor: globalTokens.hal_black,
|
|
848
726
|
valueFontColorOnDark: globalTokens.hal_white,
|
|
849
727
|
valueFontTextTransform: globalTokens.type_uppercase,
|
|
850
|
-
helperTextFontColor: globalTokens.
|
|
728
|
+
helperTextFontColor: globalTokens.hal_black,
|
|
851
729
|
helperTextFontColorOnDark: globalTokens.hal_white,
|
|
852
730
|
helperTextFontSize: globalTokens.type_scale_01,
|
|
853
731
|
helperTextFontStyle: globalTokens.type_normal,
|
|
@@ -855,24 +733,23 @@ var componentTokens = {
|
|
|
855
733
|
helperTextFontFamily: globalTokens.type_sans,
|
|
856
734
|
thickness: "9px",
|
|
857
735
|
borderRadius: "5px",
|
|
858
|
-
overlayColor: globalTokens.
|
|
859
|
-
|
|
736
|
+
overlayColor: globalTokens.color_grey_a_800,
|
|
737
|
+
overlayFontColor: globalTokens.hal_white
|
|
860
738
|
},
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
fontColorOnDark: globalTokens.white,
|
|
739
|
+
quickNav: {
|
|
740
|
+
fontColor: globalTokens.hal_grey_s_40,
|
|
741
|
+
hoverFontColor: globalTokens.hal_purple_d_70,
|
|
742
|
+
dividerBorderColor: globalTokens.hal_grey_l_75,
|
|
743
|
+
focusBorderColor: globalTokens.hal_blue_l_50,
|
|
744
|
+
focusBorderStyle: globalTokens.border_solid,
|
|
745
|
+
focusBorderThickness: globalTokens.border_width_2,
|
|
746
|
+
focusBorderRadius: globalTokens.border_width_2,
|
|
747
|
+
paddingTop: globalTokens.spacing_03,
|
|
748
|
+
paddingBottom: globalTokens.spacing_03,
|
|
749
|
+
paddingLeft: globalTokens.spacing_05,
|
|
750
|
+
paddingRight: globalTokens.spacing_05,
|
|
874
751
|
fontFamily: globalTokens.type_sans,
|
|
875
|
-
fontSize: globalTokens.
|
|
752
|
+
fontSize: globalTokens.type_scale_02,
|
|
876
753
|
fontStyle: globalTokens.type_normal,
|
|
877
754
|
fontWeight: globalTokens.type_regular
|
|
878
755
|
},
|
|
@@ -939,7 +816,7 @@ var componentTokens = {
|
|
|
939
816
|
helperTextFontStyle: globalTokens.type_normal,
|
|
940
817
|
helperTextFontWeight: globalTokens.type_regular,
|
|
941
818
|
helperTextLineHeight: globalTokens.type_leading_normal,
|
|
942
|
-
placeholderFontColor:
|
|
819
|
+
placeholderFontColor: globalTokens.color_grey_a_800,
|
|
943
820
|
valueFontColor: globalTokens.hal_black,
|
|
944
821
|
valueFontSize: globalTokens.type_scale_03,
|
|
945
822
|
valueFontStyle: globalTokens.type_normal,
|
|
@@ -981,88 +858,38 @@ var componentTokens = {
|
|
|
981
858
|
activeSelectionIndicatorActionBackgroundColor: globalTokens.hal_grey_l_80,
|
|
982
859
|
activeSelectionIndicatorActionIconColor: globalTokens.hal_black
|
|
983
860
|
},
|
|
984
|
-
V3Select: {
|
|
985
|
-
fontFamily: globalTokens.type_sans,
|
|
986
|
-
assistiveTextFontColor: globalTokens.hal_black,
|
|
987
|
-
assistiveTextFontColorOnDark: globalTokens.hal_white,
|
|
988
|
-
assistiveTextFontSize: globalTokens.type_scale_01,
|
|
989
|
-
assistiveTextFontStyle: globalTokens.type_normal,
|
|
990
|
-
assistiveTextFontWeight: globalTokens.type_regular,
|
|
991
|
-
labelFontColor: globalTokens.hal_black,
|
|
992
|
-
labelFontColorOnDark: globalTokens.hal_white,
|
|
993
|
-
labelFontSize: globalTokens.type_scale_03,
|
|
994
|
-
labelFontStyle: globalTokens.type_normal,
|
|
995
|
-
labelFontWeight: globalTokens.type_regular,
|
|
996
|
-
disabledColor: globalTokens.lighterBlack,
|
|
997
|
-
disabledColorOnDark: "#575757",
|
|
998
|
-
errorColor: globalTokens.red,
|
|
999
|
-
errorColorOnDark: globalTokens.hal_red_l_60,
|
|
1000
|
-
optionBackgroundColor: globalTokens.hal_white,
|
|
1001
|
-
optionBorderColor: globalTokens.hal_black,
|
|
1002
|
-
optionBorderThickness: "0px",
|
|
1003
|
-
optionBorderStyle: "solid",
|
|
1004
|
-
optionFontColor: globalTokens.hal_black,
|
|
1005
|
-
optionFontColorOnDark: globalTokens.hal_white,
|
|
1006
|
-
optionFontSize: globalTokens.type_scale_root,
|
|
1007
|
-
optionFontStyle: globalTokens.type_normal,
|
|
1008
|
-
optionFontWeight: globalTokens.type_regular,
|
|
1009
|
-
optionPaddingBottom: "6px",
|
|
1010
|
-
optionPaddingTop: "6px",
|
|
1011
|
-
scrollBarThumbColor: globalTokens.hal_grey_s_40,
|
|
1012
|
-
scrollBarTrackColor: globalTokens.lightGrey,
|
|
1013
|
-
optionIconColor: globalTokens.hal_black,
|
|
1014
|
-
optionIconColorOnDark: globalTokens.hal_white,
|
|
1015
|
-
optionIconSpacing: "12px",
|
|
1016
|
-
optionIconSize: "20px",
|
|
1017
|
-
optionCheckboxSpacing: "12px",
|
|
1018
|
-
hoverOptionBackgroundColor: globalTokens.hal_grey_l_95,
|
|
1019
|
-
hoverOptionBackgroundColorOnDark: globalTokens.hal_grey_l_95,
|
|
1020
|
-
activeOptionBackgroundColor: globalTokens.hal_grey_l_80,
|
|
1021
|
-
activeOptionBackgroundColorOnDark: globalTokens.hal_grey_l_80,
|
|
1022
|
-
selectedOptionBackgroundColor: globalTokens.lightGrey,
|
|
1023
|
-
selectedOptionBackgroundColorOnDark: globalTokens.lightGrey,
|
|
1024
|
-
underlineColor: globalTokens.hal_black,
|
|
1025
|
-
underlineColorOnDark: globalTokens.hal_white,
|
|
1026
|
-
underlineFocusColor: globalTokens.hal_black,
|
|
1027
|
-
underlineFocusColorOnDark: globalTokens.hal_white,
|
|
1028
|
-
underlineThickness: "1px",
|
|
1029
|
-
valueFontColor: globalTokens.hal_black,
|
|
1030
|
-
valueFontColorOnDark: globalTokens.hal_white,
|
|
1031
|
-
valueFontSize: globalTokens.type_scale_03,
|
|
1032
|
-
valueFontStyle: globalTokens.type_normal,
|
|
1033
|
-
valueFontWeight: globalTokens.type_regular,
|
|
1034
|
-
valueIconColor: globalTokens.hal_black,
|
|
1035
|
-
valueIconColorOnDark: globalTokens.hal_white,
|
|
1036
|
-
valueIconSize: "20px",
|
|
1037
|
-
valueIconSpacing: "12px",
|
|
1038
|
-
arrowColor: globalTokens.hal_black,
|
|
1039
|
-
arrowColorOnDark: globalTokens.hal_white,
|
|
1040
|
-
focusColor: globalTokens.hal_blue_l_50,
|
|
1041
|
-
focusColorOnDark: globalTokens.hal_blue_l_50
|
|
1042
|
-
},
|
|
1043
861
|
sidenav: {
|
|
1044
862
|
backgroundColor: globalTokens.hal_grey_l_95,
|
|
1045
|
-
arrowContainerColor: globalTokens.hal_grey_l_90,
|
|
1046
|
-
arrowColor: globalTokens.hal_black,
|
|
1047
863
|
titleFontFamily: globalTokens.type_sans,
|
|
1048
|
-
titleFontSize: globalTokens.
|
|
864
|
+
titleFontSize: globalTokens.type_scale_04,
|
|
1049
865
|
titleFontStyle: globalTokens.type_normal,
|
|
1050
|
-
titleFontWeight: globalTokens.
|
|
1051
|
-
titleFontColor: globalTokens.
|
|
866
|
+
titleFontWeight: globalTokens.type_semibold,
|
|
867
|
+
titleFontColor: globalTokens.color_grey_800,
|
|
1052
868
|
titleFontTextTransform: "none",
|
|
1053
869
|
titleFontLetterSpacing: globalTokens.type_spacing_normal,
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
870
|
+
groupTitleFontFamily: globalTokens.type_sans,
|
|
871
|
+
groupTitleFontSize: globalTokens.type_scale_02,
|
|
872
|
+
groupTitleFontStyle: globalTokens.type_normal,
|
|
873
|
+
groupTitleFontWeight: globalTokens.type_semibold,
|
|
874
|
+
groupTitleFontColor: globalTokens.hal_black,
|
|
875
|
+
groupTitleHoverBackgroundColor: globalTokens.hal_grey_l_90,
|
|
876
|
+
groupTitleActiveBackgroundColor: globalTokens.hal_grey_l_80,
|
|
877
|
+
groupTitleSelectedFontColor: globalTokens.hal_white,
|
|
878
|
+
groupTitleSelectedBackgroundColor: globalTokens.color_grey_800,
|
|
879
|
+
groupTitleSelectedHoverFontColor: globalTokens.hal_white,
|
|
880
|
+
groupTitleSelectedHoverBackgroundColor: globalTokens.color_grey_600,
|
|
881
|
+
groupTitleFontTextTransform: globalTokens.type_uppercase,
|
|
882
|
+
groupTitleFontLetterSpacing: globalTokens.type_spacing_wide_02,
|
|
1061
883
|
linkFontFamily: globalTokens.type_sans,
|
|
1062
884
|
linkFontSize: globalTokens.type_scale_02,
|
|
1063
885
|
linkFontStyle: globalTokens.type_normal,
|
|
1064
886
|
linkFontWeight: globalTokens.type_regular,
|
|
1065
887
|
linkFontColor: globalTokens.color_grey_800,
|
|
888
|
+
linkHoverBackgroundColor: globalTokens.hal_grey_l_90,
|
|
889
|
+
linkSelectedFontColor: globalTokens.hal_white,
|
|
890
|
+
linkSelectedBackgroundColor: globalTokens.color_grey_800,
|
|
891
|
+
linkSelectedHoverFontColor: globalTokens.hal_white,
|
|
892
|
+
linkSelectedHoverBackgroundColor: globalTokens.color_grey_600,
|
|
1066
893
|
linkFontTextTransform: "none",
|
|
1067
894
|
linkFontLetterSpacing: globalTokens.type_spacing_wide_01,
|
|
1068
895
|
linkTextDecoration: globalTokens.type_no_line,
|
|
@@ -1071,7 +898,7 @@ var componentTokens = {
|
|
|
1071
898
|
linkMarginRight: "16px",
|
|
1072
899
|
linkMarginLeft: "16px",
|
|
1073
900
|
linkFocusColor: globalTokens.hal_blue_l_50,
|
|
1074
|
-
scrollBarThumbColor:
|
|
901
|
+
scrollBarThumbColor: globalTokens.color_grey_a_200,
|
|
1075
902
|
scrollBarTrackColor: globalTokens.transparent
|
|
1076
903
|
},
|
|
1077
904
|
slider: {
|
|
@@ -1130,7 +957,7 @@ var componentTokens = {
|
|
|
1130
957
|
trackLineColorOnDark: globalTokens.hal_blue_l_50,
|
|
1131
958
|
totalLineThickness: "2px",
|
|
1132
959
|
totalLineVerticalPosition: "50%",
|
|
1133
|
-
totalLineColor: globalTokens.
|
|
960
|
+
totalLineColor: globalTokens.color_grey_a_200,
|
|
1134
961
|
totalLineColorOnDark: globalTokens.hal_grey_l_75,
|
|
1135
962
|
disabledThumbVerticalPosition: "10px",
|
|
1136
963
|
disabledThumbBackgroundColor: globalTokens.hal_grey_l_60,
|
|
@@ -1149,36 +976,36 @@ var componentTokens = {
|
|
|
1149
976
|
inputMarginLeft: globalTokens.type_scale_06
|
|
1150
977
|
},
|
|
1151
978
|
spinner: {
|
|
1152
|
-
trackCircleColor:
|
|
1153
|
-
|
|
1154
|
-
totalCircleColor: globalTokens.
|
|
979
|
+
trackCircleColor: globalTokens.hal_purple_s_38,
|
|
980
|
+
trackCircleColorOverlay: globalTokens.hal_purple_l_65,
|
|
981
|
+
totalCircleColor: globalTokens.hal_white,
|
|
1155
982
|
labelFontFamily: globalTokens.type_sans,
|
|
1156
983
|
labelFontSize: globalTokens.type_scale_02,
|
|
1157
984
|
labelFontStyle: globalTokens.type_normal,
|
|
1158
985
|
labelFontWeight: globalTokens.type_regular,
|
|
1159
|
-
labelFontColor: globalTokens.
|
|
1160
|
-
labelFontColorOnDark: globalTokens.
|
|
986
|
+
labelFontColor: globalTokens.hal_black,
|
|
987
|
+
labelFontColorOnDark: globalTokens.hal_white,
|
|
1161
988
|
labelTextAlign: "center",
|
|
1162
989
|
progressValueFontFamily: globalTokens.type_sans,
|
|
1163
990
|
progressValueFontSize: globalTokens.type_scale_02,
|
|
1164
991
|
progressValueFontStyle: globalTokens.type_normal,
|
|
1165
992
|
progressValueFontWeight: globalTokens.type_bold,
|
|
1166
993
|
progressValueFontColor: globalTokens.inherit,
|
|
1167
|
-
progressValueFontColorOnDark: globalTokens.
|
|
994
|
+
progressValueFontColorOnDark: globalTokens.hal_white,
|
|
1168
995
|
progressValueTextAlign: "center",
|
|
1169
|
-
overlayBackgroundColor: globalTokens.
|
|
996
|
+
overlayBackgroundColor: globalTokens.hal_black,
|
|
1170
997
|
overlayOpacity: "0.8",
|
|
1171
998
|
overlayLabelFontFamily: globalTokens.type_sans,
|
|
1172
999
|
overlayLabelFontSize: globalTokens.type_scale_02,
|
|
1173
1000
|
overlayLabelFontStyle: globalTokens.type_normal,
|
|
1174
1001
|
overlayLabelFontWeight: globalTokens.type_regular,
|
|
1175
|
-
overlayLabelFontColor: globalTokens.
|
|
1002
|
+
overlayLabelFontColor: globalTokens.hal_white,
|
|
1176
1003
|
overlayLabelTextAlign: "center",
|
|
1177
1004
|
overlayProgressValueFontFamily: globalTokens.type_sans,
|
|
1178
1005
|
overlayProgressValueFontSize: globalTokens.type_scale_02,
|
|
1179
1006
|
overlayProgressValueFontStyle: globalTokens.type_normal,
|
|
1180
1007
|
overlayProgressValueFontWeight: globalTokens.type_bold,
|
|
1181
|
-
overlayProgressValueFontColor: globalTokens.
|
|
1008
|
+
overlayProgressValueFontColor: globalTokens.hal_white,
|
|
1182
1009
|
overlayProgressValueTextAlign: "center"
|
|
1183
1010
|
},
|
|
1184
1011
|
"switch": {
|
|
@@ -1208,41 +1035,24 @@ var componentTokens = {
|
|
|
1208
1035
|
labelFontColor: globalTokens.hal_black,
|
|
1209
1036
|
labelFontColorOnDark: globalTokens.hal_white,
|
|
1210
1037
|
thumbFocusColor: globalTokens.hal_blue_l_50,
|
|
1211
|
-
thumbFocusColorOnDark: "#
|
|
1038
|
+
thumbFocusColorOnDark: "#1682ff",
|
|
1212
1039
|
thumbHeight: "24px",
|
|
1213
1040
|
thumbWidth: "24px",
|
|
1214
|
-
thumbShift: "
|
|
1041
|
+
thumbShift: "1.25rem",
|
|
1215
1042
|
trackHeight: "12px",
|
|
1216
|
-
trackWidth: "
|
|
1217
|
-
spaceBetweenLabelSwitch: "
|
|
1218
|
-
},
|
|
1219
|
-
tag: {
|
|
1220
|
-
fontFamily: globalTokens.type_sans,
|
|
1221
|
-
fontColor: globalTokens.hal_black,
|
|
1222
|
-
fontSize: globalTokens.type_scale_02,
|
|
1223
|
-
fontStyle: globalTokens.type_normal,
|
|
1224
|
-
fontWeight: globalTokens.type_regular,
|
|
1225
|
-
labelPaddingTop: "0px",
|
|
1226
|
-
labelPaddingBottom: "0px",
|
|
1227
|
-
labelPaddingLeft: "16px",
|
|
1228
|
-
labelPaddingRight: "16px",
|
|
1229
|
-
height: "40px",
|
|
1230
|
-
iconColor: globalTokens.hal_white,
|
|
1231
|
-
iconSectionWidth: "40px",
|
|
1232
|
-
iconHeight: "24px",
|
|
1233
|
-
iconWidth: "auto",
|
|
1234
|
-
focusColor: globalTokens.hal_blue_l_50
|
|
1043
|
+
trackWidth: "36px",
|
|
1044
|
+
spaceBetweenLabelSwitch: "8px"
|
|
1235
1045
|
},
|
|
1236
1046
|
table: {
|
|
1237
1047
|
rowSeparatorThickness: "1px",
|
|
1238
|
-
rowSeparatorStyle:
|
|
1239
|
-
rowSeparatorColor: globalTokens.
|
|
1240
|
-
dataBackgroundColor: globalTokens.
|
|
1048
|
+
rowSeparatorStyle: globalTokens.border_solid,
|
|
1049
|
+
rowSeparatorColor: globalTokens.hal_grey_l_80,
|
|
1050
|
+
dataBackgroundColor: globalTokens.hal_white,
|
|
1241
1051
|
dataFontFamily: globalTokens.type_sans,
|
|
1242
1052
|
dataFontSize: globalTokens.type_scale_02,
|
|
1243
1053
|
dataFontStyle: globalTokens.type_normal,
|
|
1244
1054
|
dataFontWeight: globalTokens.type_regular,
|
|
1245
|
-
dataFontColor: globalTokens.
|
|
1055
|
+
dataFontColor: globalTokens.hal_black,
|
|
1246
1056
|
dataFontTextTransform: "none",
|
|
1247
1057
|
dataPaddingTop: "14px",
|
|
1248
1058
|
dataPaddingBottom: "12px",
|
|
@@ -1256,7 +1066,7 @@ var componentTokens = {
|
|
|
1256
1066
|
headerFontSize: globalTokens.type_scale_02,
|
|
1257
1067
|
headerFontStyle: globalTokens.type_normal,
|
|
1258
1068
|
headerFontWeight: globalTokens.type_regular,
|
|
1259
|
-
headerFontColor: globalTokens.
|
|
1069
|
+
headerFontColor: globalTokens.hal_white,
|
|
1260
1070
|
headerFontTextTransform: "none",
|
|
1261
1071
|
headerPaddingTop: "16px",
|
|
1262
1072
|
headerPaddingBottom: "16px",
|
|
@@ -1264,9 +1074,9 @@ var componentTokens = {
|
|
|
1264
1074
|
headerPaddingLeft: "40px",
|
|
1265
1075
|
headerTextAlign: "left",
|
|
1266
1076
|
headerTextLineHeight: "normal",
|
|
1267
|
-
scrollBarThumbColor: globalTokens.
|
|
1268
|
-
scrollBarTrackColor: globalTokens.
|
|
1269
|
-
sortIconColor: globalTokens.
|
|
1077
|
+
scrollBarThumbColor: globalTokens.hal_grey_s_40,
|
|
1078
|
+
scrollBarTrackColor: globalTokens.hal_grey_l_80,
|
|
1079
|
+
sortIconColor: globalTokens.hal_white
|
|
1270
1080
|
},
|
|
1271
1081
|
tabs: {
|
|
1272
1082
|
fontFamily: globalTokens.type_sans,
|
|
@@ -1274,30 +1084,31 @@ var componentTokens = {
|
|
|
1274
1084
|
fontStyle: globalTokens.type_normal,
|
|
1275
1085
|
fontWeight: globalTokens.type_semibold,
|
|
1276
1086
|
fontTextTransform: "none",
|
|
1277
|
-
selectedBackgroundColor: globalTokens.
|
|
1278
|
-
selectedFontColor:
|
|
1279
|
-
selectedIconColor:
|
|
1280
|
-
selectedUnderlineColor:
|
|
1087
|
+
selectedBackgroundColor: globalTokens.hal_white,
|
|
1088
|
+
selectedFontColor: globalTokens.hal_purple_s_38,
|
|
1089
|
+
selectedIconColor: globalTokens.hal_purple_s_38,
|
|
1090
|
+
selectedUnderlineColor: globalTokens.hal_purple_s_38,
|
|
1281
1091
|
selectedUnderlineThickness: "2px",
|
|
1282
|
-
unselectedBackgroundColor: globalTokens.
|
|
1283
|
-
unselectedFontColor: globalTokens.
|
|
1284
|
-
unselectedIconColor: globalTokens.
|
|
1285
|
-
disabledFontColor:
|
|
1286
|
-
disabledIconColor:
|
|
1092
|
+
unselectedBackgroundColor: globalTokens.hal_white,
|
|
1093
|
+
unselectedFontColor: globalTokens.hal_grey_s_40,
|
|
1094
|
+
unselectedIconColor: globalTokens.hal_grey_s_40,
|
|
1095
|
+
disabledFontColor: globalTokens.hal_grey_l_60,
|
|
1096
|
+
disabledIconColor: globalTokens.hal_grey_l_60,
|
|
1287
1097
|
disabledFontStyle: globalTokens.type_normal,
|
|
1288
|
-
|
|
1289
|
-
|
|
1098
|
+
disabledBadgeBackgroundColor: "#0000004d",
|
|
1099
|
+
hoverBackgroundColor: globalTokens.hal_purple_l_95,
|
|
1100
|
+
pressedBackgroundColor: globalTokens.hal_purple_l_90,
|
|
1290
1101
|
pressedFontWeight: globalTokens.type_semibold,
|
|
1291
|
-
dividerColor: globalTokens.
|
|
1102
|
+
dividerColor: globalTokens.hal_grey_l_75,
|
|
1292
1103
|
dividerThickness: "1px",
|
|
1293
|
-
focusOutline:
|
|
1104
|
+
focusOutline: globalTokens.hal_purple_s_38,
|
|
1294
1105
|
scrollButtonsWidth: "48px",
|
|
1295
|
-
badgeBackgroundColor: globalTokens.
|
|
1106
|
+
badgeBackgroundColor: globalTokens.hal_red_s_41,
|
|
1296
1107
|
badgeFontFamily: globalTokens.type_sans,
|
|
1297
1108
|
badgeFontSize: "10px",
|
|
1298
1109
|
badgeFontStyle: globalTokens.type_normal,
|
|
1299
1110
|
badgeFontWeight: "500",
|
|
1300
|
-
badgeFontColor: globalTokens.
|
|
1111
|
+
badgeFontColor: globalTokens.hal_white,
|
|
1301
1112
|
badgeLetterSpacing: globalTokens.type_spacing_wide_02,
|
|
1302
1113
|
badgeWidth: "16px",
|
|
1303
1114
|
badgeHeight: "16px",
|
|
@@ -1306,6 +1117,23 @@ var componentTokens = {
|
|
|
1306
1117
|
badgeHeightWithNotificationNumber: "17px",
|
|
1307
1118
|
badgeRadiusWithNotificationNumber: "10px"
|
|
1308
1119
|
},
|
|
1120
|
+
tag: {
|
|
1121
|
+
fontFamily: globalTokens.type_sans,
|
|
1122
|
+
fontColor: globalTokens.hal_black,
|
|
1123
|
+
fontSize: globalTokens.type_scale_02,
|
|
1124
|
+
fontStyle: globalTokens.type_normal,
|
|
1125
|
+
fontWeight: globalTokens.type_regular,
|
|
1126
|
+
labelPaddingTop: "0px",
|
|
1127
|
+
labelPaddingBottom: "0px",
|
|
1128
|
+
labelPaddingLeft: "16px",
|
|
1129
|
+
labelPaddingRight: "16px",
|
|
1130
|
+
height: "40px",
|
|
1131
|
+
iconColor: globalTokens.hal_white,
|
|
1132
|
+
iconSectionWidth: "40px",
|
|
1133
|
+
iconHeight: "24px",
|
|
1134
|
+
iconWidth: "auto",
|
|
1135
|
+
focusColor: globalTokens.hal_blue_l_50
|
|
1136
|
+
},
|
|
1309
1137
|
textarea: {
|
|
1310
1138
|
fontFamily: globalTokens.type_sans,
|
|
1311
1139
|
enabledBorderColor: globalTokens.hal_black,
|
|
@@ -1343,7 +1171,7 @@ var componentTokens = {
|
|
|
1343
1171
|
helperTextLineHeight: globalTokens.type_leading_normal,
|
|
1344
1172
|
disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
|
|
1345
1173
|
disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
|
|
1346
|
-
placeholderFontColor:
|
|
1174
|
+
placeholderFontColor: globalTokens.color_grey_a_800,
|
|
1347
1175
|
placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
|
|
1348
1176
|
disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
|
|
1349
1177
|
disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
|
|
@@ -1355,40 +1183,98 @@ var componentTokens = {
|
|
|
1355
1183
|
disabledValueFontColor: globalTokens.hal_grey_l_60,
|
|
1356
1184
|
disabledValueFontColorOnDark: globalTokens.hal_grey_l_60
|
|
1357
1185
|
},
|
|
1358
|
-
|
|
1186
|
+
textInput: {
|
|
1359
1187
|
fontFamily: globalTokens.type_sans,
|
|
1360
|
-
|
|
1361
|
-
|
|
1362
|
-
|
|
1363
|
-
|
|
1364
|
-
|
|
1365
|
-
|
|
1366
|
-
|
|
1367
|
-
|
|
1368
|
-
|
|
1369
|
-
|
|
1370
|
-
|
|
1371
|
-
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
|
|
1188
|
+
enabledBorderColor: globalTokens.hal_black,
|
|
1189
|
+
enabledBorderColorOnDark: globalTokens.hal_white,
|
|
1190
|
+
hoverBorderColor: globalTokens.hal_purple_l_65,
|
|
1191
|
+
hoverBorderColorOnDark: globalTokens.hal_purple_l_65,
|
|
1192
|
+
focusBorderColor: globalTokens.hal_blue_l_50,
|
|
1193
|
+
focusBorderColorOnDark: globalTokens.hal_blue_l_50,
|
|
1194
|
+
disabledBorderColor: globalTokens.hal_grey_l_60,
|
|
1195
|
+
disabledBorderColorOnDark: globalTokens.hal_grey_l_60,
|
|
1196
|
+
disabledContainerFillColor: globalTokens.hal_grey_l_95,
|
|
1197
|
+
disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
|
|
1198
|
+
errorBorderColor: globalTokens.hal_red_s_41,
|
|
1199
|
+
errorBorderColorOnDark: globalTokens.hal_red_l_60,
|
|
1200
|
+
hoverErrorBorderColor: globalTokens.color_red_600,
|
|
1201
|
+
hoverErrorBorderColorOnDark: "#fe677b",
|
|
1202
|
+
inputMarginTop: globalTokens.spacing_02,
|
|
1203
|
+
inputMarginBottom: globalTokens.spacing_02,
|
|
1204
|
+
errorMessageColor: globalTokens.hal_red_s_41,
|
|
1205
|
+
errorMessageColorOnDark: globalTokens.hal_red_l_60,
|
|
1206
|
+
errorIconColor: globalTokens.hal_red_s_41,
|
|
1207
|
+
errorIconColorOnDark: globalTokens.hal_red_l_60,
|
|
1208
|
+
labelFontColor: globalTokens.hal_black,
|
|
1209
|
+
labelFontColorOnDark: globalTokens.hal_white,
|
|
1210
|
+
labelFontSize: globalTokens.type_scale_02,
|
|
1375
1211
|
labelFontStyle: globalTokens.type_normal,
|
|
1376
|
-
labelFontWeight: globalTokens.
|
|
1377
|
-
|
|
1378
|
-
|
|
1379
|
-
|
|
1212
|
+
labelFontWeight: globalTokens.type_semibold,
|
|
1213
|
+
labelLineHeight: globalTokens.type_leading_loose_01,
|
|
1214
|
+
disabledLabelFontColor: globalTokens.hal_grey_l_60,
|
|
1215
|
+
disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
|
|
1216
|
+
optionalLabelFontWeight: globalTokens.type_regular,
|
|
1217
|
+
helperTextFontColor: globalTokens.hal_black,
|
|
1218
|
+
helperTextFontColorOnDark: globalTokens.hal_white,
|
|
1219
|
+
helperTextFontSize: globalTokens.type_scale_01,
|
|
1220
|
+
helperTextFontStyle: globalTokens.type_normal,
|
|
1221
|
+
helperTextFontWeight: globalTokens.type_regular,
|
|
1222
|
+
helperTextLineHeight: globalTokens.type_leading_normal,
|
|
1223
|
+
disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
|
|
1224
|
+
disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
|
|
1225
|
+
prefixColor: globalTokens.hal_grey_s_40,
|
|
1226
|
+
prefixColorOnDark: globalTokens.hal_white,
|
|
1227
|
+
suffixColor: globalTokens.hal_grey_s_40,
|
|
1228
|
+
suffixColorOnDark: globalTokens.hal_white,
|
|
1229
|
+
disabledPrefixColor: globalTokens.hal_grey_l_75,
|
|
1230
|
+
disabledSuffixColor: globalTokens.hal_grey_l_75,
|
|
1231
|
+
disabledPrefixColorOnDark: globalTokens.hal_grey_l_60,
|
|
1232
|
+
disabledSuffixColorOnDark: globalTokens.hal_grey_l_60,
|
|
1233
|
+
placeholderFontColor: globalTokens.color_grey_a_800,
|
|
1234
|
+
placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
|
|
1235
|
+
disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
|
|
1236
|
+
disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
|
|
1237
|
+
valueFontColor: globalTokens.hal_black,
|
|
1238
|
+
valueFontColorOnDark: globalTokens.hal_white,
|
|
1380
1239
|
valueFontSize: globalTokens.type_scale_03,
|
|
1381
1240
|
valueFontStyle: globalTokens.type_normal,
|
|
1382
1241
|
valueFontWeight: globalTokens.type_regular,
|
|
1383
|
-
|
|
1384
|
-
|
|
1385
|
-
|
|
1386
|
-
|
|
1387
|
-
|
|
1388
|
-
|
|
1389
|
-
|
|
1390
|
-
|
|
1391
|
-
|
|
1242
|
+
disabledValueFontColor: globalTokens.hal_grey_l_60,
|
|
1243
|
+
disabledValueFontColorOnDark: globalTokens.hal_grey_l_60,
|
|
1244
|
+
actionIconColor: globalTokens.hal_black,
|
|
1245
|
+
actionIconColorOnDark: globalTokens.hal_white,
|
|
1246
|
+
disabledActionIconColor: globalTokens.hal_grey_l_60,
|
|
1247
|
+
disabledActionIconColorOnDark: globalTokens.hal_grey_l_60,
|
|
1248
|
+
hoverActionIconColor: globalTokens.hal_black,
|
|
1249
|
+
hoverActionIconColorOnDark: globalTokens.hal_white,
|
|
1250
|
+
focusActionIconColor: globalTokens.hal_black,
|
|
1251
|
+
focusActionIconColorOnDark: globalTokens.hal_white,
|
|
1252
|
+
activeActionIconColor: globalTokens.hal_black,
|
|
1253
|
+
activeActionIconColorOnDark: globalTokens.hal_black,
|
|
1254
|
+
actionBackgroundColor: globalTokens.transparent,
|
|
1255
|
+
actionBackgroundColorOnDark: globalTokens.transparent,
|
|
1256
|
+
disabledActionBackgroundColor: globalTokens.transparent,
|
|
1257
|
+
disabledActionBackgroundColorOnDark: globalTokens.transparent,
|
|
1258
|
+
hoverActionBackgroundColor: globalTokens.hal_grey_l_95,
|
|
1259
|
+
hoverActionBackgroundColorOnDark: globalTokens.hal_grey_s_40,
|
|
1260
|
+
focusActionBorderColor: globalTokens.hal_blue_l_50,
|
|
1261
|
+
focusActionBorderColorOnDark: globalTokens.hal_blue_l_50,
|
|
1262
|
+
activeActionBackgroundColor: globalTokens.hal_grey_l_80,
|
|
1263
|
+
activeActionBackgroundColorOnDark: globalTokens.hal_grey_l_60,
|
|
1264
|
+
listDialogBackgroundColor: globalTokens.hal_white,
|
|
1265
|
+
listDialogBorderColor: globalTokens.hal_grey_l_75,
|
|
1266
|
+
listOptionDividerColor: globalTokens.hal_grey_l_90,
|
|
1267
|
+
listOptionFontColor: globalTokens.hal_black,
|
|
1268
|
+
listOptionFontSize: globalTokens.type_scale_02,
|
|
1269
|
+
listOptionFontStyle: globalTokens.type_normal,
|
|
1270
|
+
listOptionFontWeight: globalTokens.type_regular,
|
|
1271
|
+
systemMessageFontColor: globalTokens.hal_grey_s_40,
|
|
1272
|
+
errorListDialogFontColor: globalTokens.hal_black,
|
|
1273
|
+
errorListDialogBackgroundColor: globalTokens.color_red_50,
|
|
1274
|
+
errorListDialogBorderColor: globalTokens.hal_red_s_41,
|
|
1275
|
+
hoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
|
|
1276
|
+
activeListOptionBackgroundColor: globalTokens.hal_grey_l_80,
|
|
1277
|
+
focusListOptionBorderColor: globalTokens.hal_blue_l_50
|
|
1392
1278
|
},
|
|
1393
1279
|
toggleGroup: {
|
|
1394
1280
|
containerBackgroundColor: globalTokens.color_grey_50,
|
|
@@ -1438,121 +1324,65 @@ var componentTokens = {
|
|
|
1438
1324
|
containerBorderRadius: globalTokens.border_radius_large,
|
|
1439
1325
|
optionFocusBorderThickness: globalTokens.border_width_2
|
|
1440
1326
|
},
|
|
1441
|
-
upload: {
|
|
1442
|
-
fontFamily: globalTokens.type_sans,
|
|
1443
|
-
shadowColor: globalTokens.lightWhite,
|
|
1444
|
-
scrollBarThumbColor: globalTokens.darkGrey,
|
|
1445
|
-
scrollBarTrackColor: globalTokens.lightGrey,
|
|
1446
|
-
errorColor: globalTokens.red,
|
|
1447
|
-
backgroundColor: globalTokens.white,
|
|
1448
|
-
draggingStateBackgroundColor: globalTokens.lightWhite,
|
|
1449
|
-
dragAndDropIconColor: globalTokens.black,
|
|
1450
|
-
dragAndDropIconSize: "43.5px",
|
|
1451
|
-
dragAndDropTitleFontSize: globalTokens.type_scale_04,
|
|
1452
|
-
dragAndDropTitleFontStyle: globalTokens.type_normal,
|
|
1453
|
-
dragAndDropTitleFontWeight: globalTokens.type_bold,
|
|
1454
|
-
dragAndDropTitleFontTextTransform: "none",
|
|
1455
|
-
dragAndDropTitleFontColor: globalTokens.black,
|
|
1456
|
-
dragAndDropDescriptionFontSize: globalTokens.type_scale_03,
|
|
1457
|
-
dragAndDropDescriptionFontStyle: globalTokens.type_italic,
|
|
1458
|
-
dragAndDropDescriptionFontWeight: globalTokens.type_regular,
|
|
1459
|
-
dragAndDropDescriptionFontTextTransform: "none",
|
|
1460
|
-
dragAndDropDescriptionFontColor: globalTokens.darkGrey,
|
|
1461
|
-
dragAndDropDraggingStateIconColor: globalTokens.darkGrey,
|
|
1462
|
-
dragAndDropDraggingStateIconSize: "74.5px",
|
|
1463
|
-
dragAndDropDraggingStateFontSize: globalTokens.type_scale_03,
|
|
1464
|
-
dragAndDropDraggingStateFontStyle: globalTokens.type_italic,
|
|
1465
|
-
dragAndDropDraggingStateFontWeight: globalTokens.type_regular,
|
|
1466
|
-
dragAndDropDraggingStateFontTextTransform: "none",
|
|
1467
|
-
dragAndDropDraggingStateFontColor: globalTokens.darkGrey,
|
|
1468
|
-
dragAndDropAreaIconColor: globalTokens.darkGrey,
|
|
1469
|
-
dragAndDropAreaIconSize: "24px",
|
|
1470
|
-
dragAndDropAreaTextFontSize: globalTokens.type_scale_01,
|
|
1471
|
-
dragAndDropAreaTextFontStyle: globalTokens.type_italic,
|
|
1472
|
-
dragAndDropAreaTextFontWeight: globalTokens.type_regular,
|
|
1473
|
-
dragAndDropAreaTextFontTextTransform: "none",
|
|
1474
|
-
dragAndDropAreaTextFontColor: globalTokens.darkGrey,
|
|
1475
|
-
fileDeleteIconColor: globalTokens.black,
|
|
1476
|
-
fileDeleteIconSize: "30px",
|
|
1477
|
-
fileUnderlineColor: globalTokens.lightGrey,
|
|
1478
|
-
fileUnderlineThickness: "1px",
|
|
1479
|
-
fileNameFontSize: globalTokens.type_scale_03,
|
|
1480
|
-
fileNameFontStyle: globalTokens.type_normal,
|
|
1481
|
-
fileNameFontWeight: globalTokens.type_regular,
|
|
1482
|
-
fileNameFontTextTransform: "none",
|
|
1483
|
-
fileNameFontColor: globalTokens.black,
|
|
1484
|
-
fileTypeFontSize: globalTokens.type_scale_01,
|
|
1485
|
-
fileTypeFontStyle: globalTokens.type_normal,
|
|
1486
|
-
fileTypeFontWeight: globalTokens.type_regular,
|
|
1487
|
-
fileTypeFontTextTransform: globalTokens.type_uppercase,
|
|
1488
|
-
fileTypeFontColor: globalTokens.darkGrey,
|
|
1489
|
-
hoverFileColor: globalTokens.darkWhite,
|
|
1490
|
-
uploadedFileIconColor: globalTokens.lightGrey,
|
|
1491
|
-
uploadedFileIconSize: "24px",
|
|
1492
|
-
uploadedFilesTitleFontSize: globalTokens.type_scale_04,
|
|
1493
|
-
uploadedFilesTitleFontStyle: globalTokens.type_normal,
|
|
1494
|
-
uploadedFilesTitleFontWeight: globalTokens.type_regular,
|
|
1495
|
-
uploadedFilesTitleFontTextTransform: "none",
|
|
1496
|
-
uploadedFilesTitleFontColor: globalTokens.black,
|
|
1497
|
-
uploadedFilesSubtitleFontSize: globalTokens.type_scale_01,
|
|
1498
|
-
uploadedFilesSubtitleFontStyle: globalTokens.type_normal,
|
|
1499
|
-
uploadedFilesSubtitleFontWeight: globalTokens.type_regular,
|
|
1500
|
-
uploadedFilesSubtitleFontTextTransform: "none",
|
|
1501
|
-
uploadedFilesSubtitleFontColor: globalTokens.darkGrey,
|
|
1502
|
-
uploadedFilesNumberFontWeight: globalTokens.type_bold
|
|
1503
|
-
},
|
|
1504
1327
|
wizard: {
|
|
1505
|
-
|
|
1506
|
-
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
|
|
1328
|
+
visitedStepFontColor: globalTokens.hal_black,
|
|
1329
|
+
visitedStepBackgroundColor: globalTokens.hal_white,
|
|
1330
|
+
visitedStepBorderColor: globalTokens.hal_black,
|
|
1331
|
+
unvisitedStepFontColor: globalTokens.hal_grey_s_40,
|
|
1332
|
+
unvisitedLabelFontColor: globalTokens.hal_grey_s_40,
|
|
1333
|
+
unvisitedHelperTextFontColor: globalTokens.hal_grey_s_40,
|
|
1334
|
+
unvisitedStepBackgroundColor: globalTokens.transparent,
|
|
1335
|
+
unvisitedStepBorderColor: globalTokens.hal_grey_s_40,
|
|
1336
|
+
selectedStepFontColor: globalTokens.hal_white,
|
|
1337
|
+
selectedStepBackgroundColor: globalTokens.hal_purple_s_38,
|
|
1338
|
+
selectedStepBorderColor: globalTokens.hal_purple_s_38,
|
|
1339
|
+
selectedLabelFontColor: globalTokens.hal_black,
|
|
1340
|
+
selectedHelperTextFontColor: globalTokens.hal_black,
|
|
1341
|
+
selectedStepWidth: "32px",
|
|
1342
|
+
selectedStepHeight: "32px",
|
|
1343
|
+
selectedStepBorderThickness: "2px",
|
|
1344
|
+
selectedStepBorderStyle: globalTokens.border_solid,
|
|
1345
|
+
selectedStepBorderRadius: "45px",
|
|
1346
|
+
stepFontSize: globalTokens.type_scale_03,
|
|
1347
|
+
stepFontFamily: globalTokens.type_sans,
|
|
1348
|
+
stepFontStyle: globalTokens.type_normal,
|
|
1349
|
+
stepFontWeight: globalTokens.type_regular,
|
|
1350
|
+
stepFontTracking: globalTokens.type_spacing_wide_02,
|
|
1351
|
+
stepIconSize: "20px",
|
|
1352
|
+
stepWidth: "32px",
|
|
1353
|
+
stepHeight: "32px",
|
|
1354
|
+
stepBorderThickness: "2px",
|
|
1355
|
+
stepBorderStyle: globalTokens.border_solid,
|
|
1356
|
+
stepBorderRadius: "45px",
|
|
1357
|
+
visitedLabelFontColor: globalTokens.hal_black,
|
|
1517
1358
|
labelFontSize: globalTokens.type_scale_03,
|
|
1518
1359
|
labelFontFamily: globalTokens.type_sans,
|
|
1519
1360
|
labelFontStyle: globalTokens.type_normal,
|
|
1520
1361
|
labelFontWeight: globalTokens.type_regular,
|
|
1521
|
-
|
|
1362
|
+
labelFontTracking: globalTokens.type_spacing_normal,
|
|
1522
1363
|
labelFontTextTransform: "none",
|
|
1523
1364
|
labelTextAlign: "left",
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
|
|
1528
|
-
|
|
1529
|
-
|
|
1530
|
-
|
|
1531
|
-
|
|
1532
|
-
|
|
1533
|
-
|
|
1534
|
-
|
|
1535
|
-
|
|
1536
|
-
|
|
1537
|
-
|
|
1538
|
-
|
|
1539
|
-
|
|
1540
|
-
|
|
1541
|
-
|
|
1542
|
-
selectedCircleHeight: "32px",
|
|
1543
|
-
selectedCircleBorderThickness: "2px",
|
|
1544
|
-
selectedCircleBorderStyle: "solid",
|
|
1545
|
-
selectedCircleBorderRadius: "45px",
|
|
1546
|
-
selectedCircleBorderColor: globalTokens.purple,
|
|
1547
|
-
disabledCircleWidth: "32px",
|
|
1548
|
-
disabledCircleHeight: "32px",
|
|
1549
|
-
disabledCircleBorderThickness: "2px",
|
|
1550
|
-
disabledCircleBorderStyle: "solid",
|
|
1551
|
-
disabledCircleBorderRadius: "45px",
|
|
1552
|
-
disabledCircleBorderColor: globalTokens.lightGrey,
|
|
1365
|
+
helperTextFontSize: globalTokens.type_scale_02,
|
|
1366
|
+
helperTextFontFamily: globalTokens.type_sans,
|
|
1367
|
+
helperTextFontStyle: globalTokens.type_normal,
|
|
1368
|
+
helperTextFontWeight: globalTokens.type_regular,
|
|
1369
|
+
helperTextFontTracking: globalTokens.type_spacing_normal,
|
|
1370
|
+
helperTextFontTextTransform: "none",
|
|
1371
|
+
visitedHelperTextFontColor: globalTokens.hal_black,
|
|
1372
|
+
helperTextTextAlign: "left",
|
|
1373
|
+
disabledStepBackgroundColor: globalTokens.hal_grey_l_95,
|
|
1374
|
+
disabledStepFontColor: globalTokens.hal_grey_l_60,
|
|
1375
|
+
disabledLabelFontColor: globalTokens.hal_grey_l_60,
|
|
1376
|
+
disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
|
|
1377
|
+
disabledStepBorderColor: globalTokens.hal_grey_l_95,
|
|
1378
|
+
disabledStepWidth: "32px",
|
|
1379
|
+
disabledStepHeight: "32px",
|
|
1380
|
+
disabledStepBorderThickness: "2px",
|
|
1381
|
+
disabledStepBorderStyle: globalTokens.border_solid,
|
|
1382
|
+
disabledStepBorderRadius: "45px",
|
|
1553
1383
|
separatorBorderThickness: "1px",
|
|
1554
|
-
separatorBorderStyle:
|
|
1555
|
-
separatorColor: globalTokens.
|
|
1384
|
+
separatorBorderStyle: globalTokens.border_solid,
|
|
1385
|
+
separatorColor: globalTokens.hal_grey_s_40,
|
|
1556
1386
|
focusColor: globalTokens.hal_blue_l_50
|
|
1557
1387
|
}
|
|
1558
1388
|
};
|
|
@@ -1568,44 +1398,107 @@ var spaces = {
|
|
|
1568
1398
|
};
|
|
1569
1399
|
exports.spaces = spaces;
|
|
1570
1400
|
var responsiveSizes = {
|
|
1571
|
-
|
|
1572
|
-
|
|
1573
|
-
|
|
1574
|
-
|
|
1575
|
-
|
|
1576
|
-
desktop: "1440"
|
|
1401
|
+
xsmall: "20",
|
|
1402
|
+
small: "30",
|
|
1403
|
+
medium: "45",
|
|
1404
|
+
large: "66",
|
|
1405
|
+
xlarge: "90"
|
|
1577
1406
|
};
|
|
1578
1407
|
exports.responsiveSizes = responsiveSizes;
|
|
1579
|
-
var
|
|
1580
|
-
|
|
1581
|
-
|
|
1582
|
-
|
|
1583
|
-
|
|
1408
|
+
var defaultTranslatedComponentLabels = {
|
|
1409
|
+
formFields: {
|
|
1410
|
+
optionalLabel: "(Optional)",
|
|
1411
|
+
requiredSelectionErrorMessage: "This field is required. Please, choose an option.",
|
|
1412
|
+
requiredValueErrorMessage: "This field is required. Please, enter a value.",
|
|
1413
|
+
formatRequestedErrorMessage: "Please match the format requested.",
|
|
1414
|
+
lengthErrorMessage: function lengthErrorMessage(minLength, maxLength) {
|
|
1415
|
+
return "Min length ".concat(minLength, ", max length ").concat(maxLength, ".");
|
|
1416
|
+
},
|
|
1417
|
+
logoAlternativeText: "Logo"
|
|
1418
|
+
},
|
|
1419
|
+
applicationLayout: {
|
|
1420
|
+
visibilityToggleTitle: "Toggle visibility sidenav"
|
|
1584
1421
|
},
|
|
1585
|
-
|
|
1586
|
-
|
|
1587
|
-
|
|
1588
|
-
|
|
1422
|
+
alert: {
|
|
1423
|
+
infoTitleText: "information",
|
|
1424
|
+
successTitleText: "success",
|
|
1425
|
+
warningTitleText: "warning",
|
|
1426
|
+
errorTitleText: "error"
|
|
1427
|
+
},
|
|
1428
|
+
dateInput: {
|
|
1429
|
+
invalidDateErrorMessage: "Invalid date."
|
|
1589
1430
|
},
|
|
1590
|
-
|
|
1591
|
-
|
|
1592
|
-
letterSpacing: "0.15",
|
|
1593
|
-
textTransform: "initial"
|
|
1431
|
+
dialog: {
|
|
1432
|
+
closeIconAriaLabel: "Close dialog"
|
|
1594
1433
|
},
|
|
1595
|
-
|
|
1596
|
-
|
|
1597
|
-
|
|
1598
|
-
|
|
1434
|
+
fileInput: {
|
|
1435
|
+
fileSizeGreaterThanErrorMessage: "File size must be greater than min size.",
|
|
1436
|
+
fileSizeLessThanErrorMessage: "File size must be less than max size.",
|
|
1437
|
+
multipleButtonLabelDefault: "Select files",
|
|
1438
|
+
singleButtonLabelDefault: "Select file",
|
|
1439
|
+
dropAreaButtonLabelDefault: "Select",
|
|
1440
|
+
multipleDropAreaLabelDefault: "or drop files",
|
|
1441
|
+
singleDropAreaLabelDefault: "or drop a file",
|
|
1442
|
+
deleteFileActionTitle: "Remove file"
|
|
1599
1443
|
},
|
|
1600
|
-
|
|
1601
|
-
|
|
1602
|
-
|
|
1603
|
-
|
|
1444
|
+
footer: {
|
|
1445
|
+
copyrightText: function copyrightText(year) {
|
|
1446
|
+
return "\xA9 DXC Technology ".concat(year, ". All rights reserved.");
|
|
1447
|
+
}
|
|
1448
|
+
},
|
|
1449
|
+
header: {
|
|
1450
|
+
closeIcon: "Close menu",
|
|
1451
|
+
hamburguerTitle: "Menu"
|
|
1452
|
+
},
|
|
1453
|
+
numberInput: {
|
|
1454
|
+
valueGreaterThanOrEqualToErrorMessage: function valueGreaterThanOrEqualToErrorMessage(value) {
|
|
1455
|
+
return "Value must be greater than or equal to ".concat(value, ".");
|
|
1456
|
+
},
|
|
1457
|
+
valueLessThanOrEqualToErrorMessage: function valueLessThanOrEqualToErrorMessage(value) {
|
|
1458
|
+
return "Value must be less than or equal to ".concat(value, ".");
|
|
1459
|
+
},
|
|
1460
|
+
decrementValueTitle: "Decrement value",
|
|
1461
|
+
incrementValueTitle: "Increment value"
|
|
1462
|
+
},
|
|
1463
|
+
paginator: {
|
|
1464
|
+
itemsPerPageText: "Items per page: ",
|
|
1465
|
+
minToMaxOfText: function minToMaxOfText(minNumberOfItems, maxNumberOfItems, totalItems) {
|
|
1466
|
+
return "".concat(minNumberOfItems, " to ").concat(maxNumberOfItems, " of ").concat(totalItems);
|
|
1467
|
+
},
|
|
1468
|
+
goToPageText: "Go to page:",
|
|
1469
|
+
pageOfText: function pageOfText(pageNumber, totalPagesNumber) {
|
|
1470
|
+
return "Page: ".concat(pageNumber, " of ").concat(totalPagesNumber);
|
|
1471
|
+
}
|
|
1472
|
+
},
|
|
1473
|
+
passwordInput: {
|
|
1474
|
+
inputShowPasswordTitle: "Show password",
|
|
1475
|
+
inputHidePasswordTitle: "Hide password"
|
|
1476
|
+
},
|
|
1477
|
+
quickNav: {
|
|
1478
|
+
contentTitle: "Contents"
|
|
1479
|
+
},
|
|
1480
|
+
radioGroup: {
|
|
1481
|
+
optionalItemLabelDefault: "N/A"
|
|
1482
|
+
},
|
|
1483
|
+
select: {
|
|
1484
|
+
noMatchesErrorMessage: "No matches found",
|
|
1485
|
+
actionClearSelectionTitle: "Clear selection",
|
|
1486
|
+
actionClearSearchTitle: "Clear search"
|
|
1487
|
+
},
|
|
1488
|
+
tabs: {
|
|
1489
|
+
scrollLeft: "Scroll left",
|
|
1490
|
+
scrollRight: "Scroll right"
|
|
1491
|
+
},
|
|
1492
|
+
textInput: {
|
|
1493
|
+
clearFieldActionTitle: "Clear field",
|
|
1494
|
+
searchingMessage: "Searching...",
|
|
1495
|
+
fetchingDataErrorMessage: "Error fetching data"
|
|
1604
1496
|
},
|
|
1605
|
-
|
|
1606
|
-
|
|
1607
|
-
|
|
1608
|
-
|
|
1497
|
+
calendar: {
|
|
1498
|
+
daysShort: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
|
|
1499
|
+
months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
|
|
1500
|
+
previousMonthTitle: "Previous month",
|
|
1501
|
+
nextMonthTitle: "Next month"
|
|
1609
1502
|
}
|
|
1610
1503
|
};
|
|
1611
|
-
exports.
|
|
1504
|
+
exports.defaultTranslatedComponentLabels = defaultTranslatedComponentLabels;
|