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