@dxc-technology/halstack-react 0.0.0-3466161 → 0.0.0-34d2259

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.
Files changed (106) hide show
  1. package/dist/ThemeContext.js +130 -98
  2. package/dist/accordion/Accordion.js +80 -83
  3. package/dist/accordion-group/AccordionGroup.js +1 -3
  4. package/dist/alert/Alert.js +123 -108
  5. package/dist/alert/index.d.ts +51 -0
  6. package/dist/badge/Badge.js +3 -1
  7. package/dist/box/Box.js +1 -9
  8. package/dist/button/Button.js +30 -20
  9. package/dist/card/Card.js +2 -4
  10. package/dist/checkbox/Checkbox.js +30 -21
  11. package/dist/chip/Chip.js +37 -49
  12. package/dist/common/variables.js +951 -590
  13. package/dist/date/Date.js +17 -29
  14. package/dist/dialog/Dialog.js +21 -39
  15. package/dist/dropdown/Dropdown.js +129 -83
  16. package/dist/file-input/FileInput.js +644 -0
  17. package/dist/file-input/FileItem.js +280 -0
  18. package/dist/file-input/index.d.ts +81 -0
  19. package/dist/footer/Footer.js +25 -35
  20. package/dist/footer/dxc_logo.svg +15 -0
  21. package/dist/header/Header.js +14 -42
  22. package/dist/header/dxc_logo_black.svg +8 -0
  23. package/dist/heading/Heading.js +1 -5
  24. package/dist/input-text/InputText.js +93 -55
  25. package/dist/layout/ApplicationLayout.js +1 -1
  26. package/dist/link/Link.js +71 -46
  27. package/dist/main.d.ts +8 -0
  28. package/dist/main.js +56 -0
  29. package/dist/new-date/NewDate.js +400 -0
  30. package/dist/new-date/index.d.ts +95 -0
  31. package/dist/new-input-text/NewInputText.js +967 -0
  32. package/dist/new-input-text/index.d.ts +135 -0
  33. package/dist/new-select/NewSelect.js +836 -0
  34. package/dist/new-select/index.d.ts +53 -0
  35. package/dist/new-textarea/NewTextarea.js +365 -0
  36. package/dist/new-textarea/index.d.ts +117 -0
  37. package/dist/number/Number.js +136 -0
  38. package/dist/number/NumberContext.js +16 -0
  39. package/dist/number/index.d.ts +113 -0
  40. package/dist/paginator/Paginator.js +10 -4
  41. package/dist/password/Password.js +200 -0
  42. package/dist/password/index.d.ts +94 -0
  43. package/dist/password/styles.css +3 -0
  44. package/dist/progress-bar/ProgressBar.js +63 -27
  45. package/dist/resultsetTable/ResultsetTable.js +5 -22
  46. package/dist/select/Select.js +189 -165
  47. package/dist/sidenav/Sidenav.js +11 -15
  48. package/dist/slider/Slider.js +60 -56
  49. package/dist/spinner/Spinner.js +226 -59
  50. package/dist/switch/Switch.js +3 -3
  51. package/dist/table/Table.js +15 -5
  52. package/dist/tabs/Tabs.js +4 -8
  53. package/dist/tag/Tag.js +38 -36
  54. package/dist/textarea/Textarea.js +26 -22
  55. package/dist/toggle-group/ToggleGroup.js +25 -43
  56. package/dist/upload/buttons-upload/ButtonsUpload.js +8 -4
  57. package/dist/upload/dragAndDropArea/DragAndDropArea.js +16 -12
  58. package/dist/upload/file-upload/FileToUpload.js +4 -4
  59. package/dist/upload/transaction/Transaction.js +13 -9
  60. package/dist/upload/transactions/Transactions.js +11 -11
  61. package/dist/wizard/Wizard.js +84 -56
  62. package/dist/wizard/invalid_icon.svg +4 -5
  63. package/dist/wizard/valid_icon.svg +4 -5
  64. package/package.json +4 -2
  65. package/test/Dropdown.test.js +15 -0
  66. package/test/FileInput.test.js +201 -0
  67. package/test/Link.test.js +3 -2
  68. package/test/NewDate.test.js +232 -0
  69. package/test/NewInputText.test.js +734 -0
  70. package/test/NewTextarea.test.js +195 -0
  71. package/test/Number.test.js +257 -0
  72. package/test/Paginator.test.js +1 -1
  73. package/test/Password.test.js +83 -0
  74. package/test/ResultsetTable.test.js +1 -2
  75. package/test/Select.test.js +44 -24
  76. package/test/Spinner.test.js +5 -0
  77. package/dist/accordion/Accordion.stories.js +0 -207
  78. package/dist/accordion/readme.md +0 -96
  79. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  80. package/dist/accordion-group/readme.md +0 -70
  81. package/dist/alert/Alert.stories.js +0 -158
  82. package/dist/alert/close.svg +0 -4
  83. package/dist/alert/error.svg +0 -4
  84. package/dist/alert/info.svg +0 -4
  85. package/dist/alert/readme.md +0 -43
  86. package/dist/alert/success.svg +0 -4
  87. package/dist/alert/warning.svg +0 -4
  88. package/dist/button/Button.stories.js +0 -224
  89. package/dist/button/readme.md +0 -93
  90. package/dist/date/calendar.svg +0 -1
  91. package/dist/date/calendar_dark.svg +0 -1
  92. package/dist/dialog/Dialog.stories.js +0 -217
  93. package/dist/dialog/readme.md +0 -32
  94. package/dist/dropdown/Dropdown.stories.js +0 -249
  95. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  96. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  97. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  98. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  99. package/dist/dropdown/readme.md +0 -69
  100. package/dist/footer/dxc_logo_wht.png +0 -0
  101. package/dist/header/dxc_logo_black.png +0 -0
  102. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  103. package/dist/header/dxc_logo_white.png +0 -0
  104. package/dist/select/Select.stories.js +0 -235
  105. package/dist/select/readme.md +0 -72
  106. package/dist/toggle-group/readme.md +0 -82
@@ -7,11 +7,58 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.typeface = exports.responsiveSizes = exports.spaces = exports.componentTokens = exports.globalTokens = void 0;
9
9
 
10
- var _dxc_logo_blk_rgb = _interopRequireDefault(require("../header/dxc_logo_blk_rgb.svg"));
10
+ var _dxc_logo_black = _interopRequireDefault(require("../header/dxc_logo_black.svg"));
11
11
 
12
- var _dxc_logo_wht = _interopRequireDefault(require("../footer/dxc_logo_wht.png"));
12
+ var _dxc_logo = _interopRequireDefault(require("../footer/dxc_logo.svg"));
13
13
 
14
14
  var globalTokens = {
15
+ // Color
16
+ inherit: "inherit",
17
+ transparent: "transparent",
18
+ hal_white: "#ffffff",
19
+ hal_grey_l_95: "#f2f2f2",
20
+ hal_grey_l_90: "#e6e6e6",
21
+ hal_grey_l_80: "#cccccc",
22
+ hal_grey_l_75: "#bfbfbf",
23
+ hal_grey_l_60: "#999999",
24
+ hal_grey_s_40: "#666666",
25
+ hal_black: "#000000",
26
+ color_grey_800: "#4d4d4d",
27
+ color_grey_600: "#808080",
28
+ hal_purple_l_95: "#f2eafa",
29
+ hal_purple_l_90: "#e5d5f6",
30
+ hal_purple_l_65: "#a46ede",
31
+ hal_purple_s_38: "#5f249f",
32
+ hal_purple_d_30: "#4b1c7d",
33
+ hal_purple_d_20: "#321353",
34
+ color_purple_600: "#7D2FD0",
35
+ hal_blue_l_95: "#e6f4ff",
36
+ hal_blue_l_80: "#99d5ff",
37
+ hal_blue_l_50: "#0095ff",
38
+ hal_blue_l_45: "#0086e6",
39
+ hal_blue_s_35: "#0067b3",
40
+ hal_blue_d_20: "#003c66",
41
+ color_blue_500: "#33AAFF",
42
+ color_blue_50: "#f5fbff",
43
+ hal_red_l_95: "#ffe6e9",
44
+ hal_red_l_80: "#fe9aa7",
45
+ hal_red_l_60: "#fe344f",
46
+ hal_red_s_41: "#d0011b",
47
+ hal_red_d_30: "#980115",
48
+ hal_red_d_20: "#65010e",
49
+ color_red_700: "#ffccd3",
50
+ color_red_50: "#FFF5F6",
51
+ hal_green_l_95: "#eafaef",
52
+ hal_green_l_80: "#acecbe",
53
+ hal_green_s_39: "#24a148",
54
+ hal_green_d_30: "#1c7d38",
55
+ hal_green_d_20: "#135325",
56
+ hal_yellow_l_95: "#fef9e6",
57
+ hal_yellow_l_80: "#fbe89d",
58
+ hal_yellow_s_57: "#f7cf2b",
59
+ hal_yellow_d_40: "#c59f07",
60
+ hal_yellow_d_30: "#947705",
61
+ hal_orange_s_54: "#f38f20",
15
62
  black: "#000000",
16
63
  lightBlack: "#212121",
17
64
  yellow: "#FFED00",
@@ -27,8 +74,6 @@ var globalTokens = {
27
74
  red: "#D0011B",
28
75
  violet: "#8800F6",
29
76
  darkBlue: "#006BF6",
30
- inherit: "inherit",
31
- transparent: "transparent",
32
77
  purple: "#6f2c91",
33
78
  mediumPurple: "#ead8f3",
34
79
  lightPurple: "#f5ebf9",
@@ -46,7 +91,7 @@ var globalTokens = {
46
91
  lightWhite: "#f2f2f2",
47
92
  softGrey: "#cecece",
48
93
  softBlack: "#565656",
49
- fontSize10: "10px",
94
+ // Typography
50
95
  type_sans: "Open Sans, sans-serif",
51
96
  type_scale_root: "16px",
52
97
  type_scale_08: "3.75rem",
@@ -79,317 +124,322 @@ var globalTokens = {
79
124
  type_leading_compact_01: "1.365em",
80
125
  type_leading_normal: "1.5em",
81
126
  type_leading_loose_01: "1.75em",
82
- type_leading_loose_02: "2em"
127
+ type_leading_loose_02: "2em",
128
+ fontSize10: "10px",
129
+ // Spacing
130
+ spacing_00: "0rem",
131
+ spacing_01: "0.125rem",
132
+ spacing_02: "0.25rem",
133
+ spacing_03: "0.5rem",
134
+ spacing_04: "0.75rem",
135
+ spacing_05: "1rem",
136
+ spacing_06: "1.5rem",
137
+ spacing_07: "2rem",
138
+ spacing_08: "2.5rem",
139
+ spacing_09: "3rem",
140
+ spacing_10: "3.5rem",
141
+ spacing_11: "4rem",
142
+ spacing_12: "5rem",
143
+ spacing_13: "6rem",
144
+ spacing_14: "7rem",
145
+ // Border
146
+ border_width_0: "0px",
147
+ border_width_1: "1px",
148
+ border_width_2: "2px",
149
+ border_width_4: "4px",
150
+ border_radius_none: "0rem",
151
+ border_radius_small: "0.125rem",
152
+ border_radius_medium: "0.25rem",
153
+ border_radius_large: "0.375rem",
154
+ border_radius_full: "9999px",
155
+ border_solid: "solid",
156
+ border_dashed: "dashed",
157
+ border_none: "none",
158
+ // Padding
159
+ padding_08: "8px",
160
+ padding_16: "16px"
83
161
  };
84
162
  exports.globalTokens = globalTokens;
85
163
  var componentTokens = {
86
164
  accordion: {
87
- backgroundColor: globalTokens.white,
88
- arrowColor: globalTokens.purple,
89
- fontColorBase: globalTokens.darkGrey,
90
- hoverBackgroundColor: globalTokens.lightPurple,
91
- disabledFontColor: globalTokens.mediumGrey,
92
- customContentFontFamily: globalTokens.type_sans,
93
- customContentFontSize: globalTokens.type_scale_03,
94
- customContentFontWeight: globalTokens.type_light,
95
- customContentFontColor: "",
165
+ backgroundColor: globalTokens.hal_white,
166
+ disabledBackgroundColor: globalTokens.transparent,
167
+ hoverBackgroundColor: globalTokens.hal_purple_l_95,
168
+ arrowColor: globalTokens.hal_purple_s_38,
169
+ disabledArrowColor: globalTokens.hal_grey_l_60,
96
170
  assistiveTextFontFamily: globalTokens.type_sans,
97
171
  assistiveTextFontSize: globalTokens.type_scale_03,
98
172
  assistiveTextFontWeight: globalTokens.type_light,
99
173
  assistiveTextFontStyle: globalTokens.type_italic,
100
- assistiveTextFontColor: "",
101
174
  assistiveTextLetterSpacing: globalTokens.type_spacing_wide_01,
175
+ assistiveTextFontColor: globalTokens.hal_grey_s_40,
176
+ disabledAssistiveTextFontColor: globalTokens.hal_grey_l_60,
102
177
  assistiveTextMinWidth: "100px",
103
- titleFontFamily: globalTokens.type_sans,
104
- titleFontSize: globalTokens.type_scale_03,
105
- titleFontWeight: globalTokens.type_regular,
106
- titleFontStyle: globalTokens.type_normal,
107
- titleFontColor: "",
108
- titleMarginRight: "48px",
109
- titleMarginLeft: "0px",
110
- titleMarginTop: "0px",
111
- titleMarginBottom: "0px",
112
- headerPaddingLeft: "16px",
113
- headerPaddingRight: "16px",
114
- headerPaddingTop: "0px",
115
- headerPaddingBottom: "0px",
116
- assistiveTextMarginRight: "0px",
117
- assistiveTextMarginLeft: "0px",
118
- assistiveTextMarginTop: "1px",
119
- assistiveTextMarginBottom: "0px",
178
+ assistiveTextPaddingRight: "24px",
179
+ assistiveTextPaddingLeft: "0px",
180
+ titleLabelFontFamily: globalTokens.type_sans,
181
+ titleLabelFontSize: globalTokens.type_scale_03,
182
+ titleLabelFontWeight: globalTokens.type_regular,
183
+ titleLabelFontStyle: globalTokens.type_normal,
184
+ titleLabelFontColor: globalTokens.hal_black,
185
+ disabledTitleLabelFontColor: globalTokens.hal_grey_l_60,
186
+ titleLabelPaddingLeft: "0px",
187
+ titleLabelPaddingRight: "16px",
188
+ titleLabelPaddingTop: "0px",
189
+ titleLabelPaddingBottom: "0px",
190
+ focusBorderStyle: "solid",
191
+ focusBorderThickness: "2px",
192
+ focusBorderColor: globalTokens.hal_blue_l_50,
120
193
  borderRadius: "4px",
121
- headerFocusBorderStyle: "solid",
122
- headerFocusBorderThickness: "1px",
123
- headerFocusBorderColor: globalTokens.purple,
124
- minHeight: "48px",
125
- minWidth: "280px",
126
194
  boxShadowOffsetX: "0px",
127
195
  boxShadowOffsetY: "6px",
128
196
  boxShadowBlur: "10px",
129
- boxShadowColor: "#00000024",
130
- iconMaxHeight: "24px",
131
- iconMaxWidth: "24px",
197
+ boxShadowColor: "#0000001a",
198
+ iconColor: globalTokens.hal_purple_s_38,
199
+ disabledIconColor: globalTokens.hal_grey_l_60,
200
+ iconSize: "24px",
132
201
  iconMarginLeft: "0px",
133
202
  iconMarginRigth: "12px",
134
- accordionGroupSeparatorBorderColor: "#00000024",
203
+ accordionGroupSeparatorBorderColor: "#0000001a",
135
204
  accordionGroupSeparatorBorderThickness: "1px",
136
205
  accordionGroupSeparatorBorderRadius: "0px",
137
206
  accordionGroupSeparatorBorderStyle: "solid"
138
207
  },
139
208
  alert: {
140
- overlayColor: globalTokens.black,
141
- infoColor: globalTokens.lightBlue,
142
- successColor: globalTokens.lightGreen,
143
- warningColor: globalTokens.lightYellow,
144
- errorColor: globalTokens.lightPink,
145
- focusColor: globalTokens.blue,
146
209
  titleFontFamily: globalTokens.type_sans,
210
+ titleFontColor: globalTokens.hal_black,
147
211
  titleFontSize: globalTokens.type_scale_01,
148
- titleFontColor: globalTokens.black,
212
+ titleFontStyle: globalTokens.type_normal,
149
213
  titleFontWeight: globalTokens.type_bold,
150
214
  titleTextTransform: globalTokens.type_uppercase,
151
- titleFontStyle: globalTokens.type_normal,
152
- titlePaddingRight: "10px",
215
+ titlePaddingRight: "0px",
153
216
  titlePaddingLeft: "0px",
154
- titlePaddingTop: "0px",
155
- titlePaddingBottom: "0px",
156
- contentFontFamily: globalTokens.type_sans,
157
- contentFontSize: globalTokens.type_scale_01,
158
- contentFontColor: globalTokens.black,
159
- contentFontWeight: globalTokens.type_normal,
160
- contentPaddingLeft: "46px",
161
- contentPaddingRight: "12px",
162
- contentPaddingTop: "8px",
163
- contentPaddingBottom: "20px",
164
- overlayOpacity: "0.8",
165
- boxShadowOffsetX: "0px",
166
- boxShadowOffsetY: "3px",
167
- boxShadowBlur: "6px",
168
- boxShadowColor: "#00000012",
217
+ inlineTextFontFamily: globalTokens.type_sans,
218
+ inlineTextFontColor: globalTokens.hal_black,
219
+ inlineTextFontSize: globalTokens.type_scale_01,
220
+ inlineTextFontStyle: globalTokens.type_normal,
221
+ inlineTextFontWeight: globalTokens.type_regular,
222
+ inlineTextPaddingLeft: "0px",
223
+ inlineTextPaddingRight: "0px",
224
+ contentPaddingLeft: "0px",
225
+ contentPaddingRight: "0px",
226
+ contentPaddingTop: "20px",
227
+ contentPaddingBottom: "30px",
169
228
  borderRadius: "4px",
170
- borderStyle: "none",
171
- borderThickness: "0px",
172
- borderColor: "transparent",
173
- height: "48px",
174
- inlineTextPaddingLeft: "10px",
175
- inlineTextPaddingRight: "10px",
176
- inlineTextPaddingTop: "0px",
177
- inlineTextPaddingBottom: "0px",
178
- iconPaddingLeft: "12px",
229
+ borderStyle: "solid",
230
+ borderThickness: "1px",
231
+ infoBorderColor: globalTokens.hal_blue_s_35,
232
+ successBorderColor: globalTokens.hal_green_s_39,
233
+ warningBorderColor: globalTokens.hal_yellow_d_40,
234
+ errorBorderColor: globalTokens.hal_red_s_41,
235
+ iconSize: "24px",
236
+ iconPaddingLeft: "0px",
179
237
  iconPaddingRight: "0px",
180
- iconPaddingTop: "0px",
181
- iconPaddingBottom: "0px",
182
- iconMaxWidth: "20px",
183
- iconMaxHeight: "20px",
184
- textPaddingLeft: "12px",
185
- textPaddingRight: "12px",
186
- textPaddingTop: "0px",
187
- textPaddingBottom: "0px"
188
- },
189
- button: {
190
- primaryBackgroundColor: globalTokens.purple,
191
- primaryBackgroundColorOnDark: "#581B81",
192
- primaryHoverBackgroundColor: globalTokens.black,
193
- primaryHoverBackgroundColorOnDark: "#581B81",
194
- primaryFontColor: globalTokens.white,
195
- primaryFontColorOnDark: "#000000",
196
- primaryHoverFontColor: globalTokens.white,
197
- primaryHoverFontColorOnDark: "#000000",
198
- primaryActiveBackgroundColor: globalTokens.mediumBlack,
199
- primaryActiveBackgroundColorOnDark: "#581B81",
200
- primaryDisabledBackgroundColor: globalTokens.lighterPurple,
201
- primaryDisabledBackgroundColorOnDark: "#ffffff57",
202
- primaryDisabledFontColor: globalTokens.white,
203
- primaryDisabledFontColorOnDark: "#000000",
204
- primaryBorderThickness: "0px",
205
- primaryBorderColor: "",
206
- primaryBorderColorOnDark: "",
207
- primaryBorderStyle: "none",
208
- primaryBorderRadius: "4px",
209
- primaryFontFamily: globalTokens.type_sans,
210
- primaryFontSize: globalTokens.type_scale_02,
211
- primaryFontWeight: globalTokens.type_regular,
212
- primaryPaddingTop: "12px",
213
- primaryPaddingBottom: "12px",
214
- secondaryOutlinedColor: globalTokens.purple,
215
- secondaryOutlinedColorOnDark: "#6A229A",
216
- secondaryBackgroundColor: globalTokens.transparent,
217
- secondaryBackgroundColorOnDark: "transparent",
218
- secondaryHoverOutlinedColor: globalTokens.black,
219
- secondaryHoverOutlinedColorOnDark: "#6A229A",
220
- secondaryFontColor: globalTokens.black,
221
- secondaryFontColorOnDark: "#FFFFFF",
222
- secondaryHoverFontColor: globalTokens.black,
223
- secondaryHoverFontColorOnDark: "#FFFFFF",
224
- secondaryActiveBackgroundColor: globalTokens.mediumGreyBlack,
225
- secondaryActiveBackgroundColorOnDark: "#FFFFFF29",
226
- secondaryHoverBackgroundColor: globalTokens.darkWhite,
227
- secondaryHoverBackgroundColorOnDark: "#FFFFFF14",
228
- secondaryDisabledOutlinedColor: globalTokens.lighterPurple,
229
- secondaryDisabledOutlinedColorOnDark: "#575757",
230
- secondaryDisabledFontColor: globalTokens.lighterBlack,
231
- secondaryDisabledFontColorOnDark: "#575757",
232
- secondaryBorderThickness: "2px",
233
- secondaryBorderStyle: "solid",
234
- secondaryBorderRadius: "4px",
235
- secondaryFontFamily: globalTokens.type_sans,
236
- secondaryFontSize: globalTokens.type_scale_02,
237
- secondaryFontWeight: globalTokens.type_regular,
238
- secondaryPaddingTop: "10px",
239
- secondaryPaddingBottom: "10px",
240
- textBackgroundColor: globalTokens.transparent,
241
- textBackgroundColorOnDark: "transparent",
242
- textHoverBackgroundColor: globalTokens.black,
243
- textHoverBackgroundColorOnDark: "#6A229A80",
244
- textFontColor: globalTokens.purple,
245
- textFontColorOnDark: "#FFFFFF",
246
- textHoverFontColor: globalTokens.white,
247
- textHoverFontColorOnDark: "#FFFFFF",
248
- textActiveBackgroundColor: globalTokens.mediumBlack,
249
- textActiveBackgroundColorOnDark: "#581B81",
250
- textDisabledFontColor: globalTokens.lighterPurple,
251
- textDisabledBackgroundColor: "transparent",
252
- textDisabledBackgroundColorOnDark: "transparent",
253
- textDisabledFontColorOnDark: "#FFFFFF80",
254
- textBorderThickness: "0px",
255
- textBorderColor: "",
256
- textBorderColorOnDark: "",
257
- textBorderStyle: "none",
258
- textBorderRadius: "4px",
259
- textFontFamily: globalTokens.type_sans,
260
- textFontSize: globalTokens.type_scale_02,
261
- textFontWeight: globalTokens.type_regular,
262
- textPaddingTop: "12px",
263
- textPaddingBottom: "12px",
264
- focusColor: globalTokens.blue,
265
- labelFontLineHeight: globalTokens.type_leading_normal,
266
- labelLetterSpacing: globalTokens.type_spacing_wide_01,
267
- labelTextTransform: globalTokens.type_uppercase,
268
- iconMaxHeight: "20px",
269
- iconMaxWidth: "20px",
270
- minHeight: "43px"
238
+ infoIconColor: globalTokens.hal_blue_s_35,
239
+ successIconColor: globalTokens.hal_green_s_39,
240
+ warningIconColor: globalTokens.hal_yellow_d_40,
241
+ errorIconColor: globalTokens.hal_red_s_41,
242
+ infoBackgroundColor: globalTokens.hal_blue_l_95,
243
+ successBackgroundColor: globalTokens.hal_green_l_95,
244
+ warningBackgroundColor: globalTokens.hal_yellow_l_95,
245
+ errorBackgroundColor: globalTokens.hal_red_l_95,
246
+ hoverActionBackgroundColor: "#0000000D",
247
+ activeActionBackgroundColor: "#0000001A",
248
+ focusActionBorderColor: globalTokens.hal_blue_l_50,
249
+ overlayColor: "#000000B3"
271
250
  },
272
251
  box: {
273
252
  backgroundColor: globalTokens.white,
274
- fontFamily: globalTokens.type_sans,
275
- fontSize: globalTokens.type_scale_02,
276
- fontWeight: globalTokens.type_regular,
277
- fontColor: globalTokens.black,
278
253
  letterSpacing: globalTokens.type_spacing_wide_01,
279
254
  borderRadius: "4px",
280
255
  borderThickness: "0px",
281
256
  borderStyle: "none",
282
- borderColor: "transparent",
283
- noneShadowDepthShadowOffsetX: "0px",
284
- noneShadowDepthShadowOffsetY: "6px",
285
- noneShadowDepthShadowBlur: "10px",
286
- noneShadowDepthShadowSpread: "0px",
287
- noneShadowDepthShadowColor: "#00000033",
257
+ borderColor: globalTokens.transparent,
258
+ noneShadowDepthShadowOffsetX: "none",
259
+ noneShadowDepthShadowOffsetY: "none",
260
+ noneShadowDepthShadowBlur: "none",
261
+ noneShadowDepthShadowSpread: "none",
262
+ noneShadowDepthShadowColor: globalTokens.transparent,
288
263
  oneShadowDepthShadowOffsetX: "0px",
289
- oneShadowDepthShadowOffsetY: "6px",
290
- oneShadowDepthShadowBlur: "10px",
291
- oneShadowDepthShadowSpread: "-1px",
264
+ oneShadowDepthShadowOffsetY: "3px",
265
+ oneShadowDepthShadowBlur: "6px",
266
+ oneShadowDepthShadowSpread: "0px",
292
267
  oneShadowDepthShadowColor: "#00000033",
293
268
  twoShadowDepthShadowOffsetX: "0px",
294
- twoShadowDepthShadowOffsetY: "6px",
269
+ twoShadowDepthShadowOffsetY: "3px",
295
270
  twoShadowDepthShadowBlur: "10px",
296
- twoShadowDepthShadowSpread: "-2px",
271
+ twoShadowDepthShadowSpread: "0px",
297
272
  twoShadowDepthShadowColor: "#00000033"
298
273
  },
274
+ button: {
275
+ labelFontLineHeight: globalTokens.type_leading_normal,
276
+ labelLetterSpacing: globalTokens.type_spacing_wide_01,
277
+ paddingLeft: globalTokens.padding_08,
278
+ paddingRight: globalTokens.padding_08,
279
+ paddingTop: globalTokens.padding_08,
280
+ paddingBottom: globalTokens.padding_08,
281
+ focusBorderColor: globalTokens.hal_blue_l_50,
282
+ focusBorderColorOnDark: globalTokens.hal_blue_l_50,
283
+ primaryBackgroundColor: globalTokens.hal_purple_s_38,
284
+ primaryBackgroundColorOnDark: globalTokens.hal_purple_s_38,
285
+ primaryFontColor: globalTokens.hal_white,
286
+ primaryFontColorOnDark: globalTokens.hal_white,
287
+ primaryHoverBackgroundColor: globalTokens.hal_purple_d_30,
288
+ primaryHoverBackgroundColorOnDark: globalTokens.color_purple_600,
289
+ primaryActiveBackgroundColor: globalTokens.hal_purple_d_20,
290
+ primaryActiveBackgroundColorOnDark: globalTokens.hal_purple_d_30,
291
+ primaryDisabledBackgroundColor: globalTokens.hal_grey_l_95,
292
+ primaryDisabledBackgroundColorOnDark: globalTokens.color_grey_800,
293
+ primaryDisabledFontColor: globalTokens.hal_grey_l_60,
294
+ primaryDisabledFontColorOnDark: globalTokens.hal_grey_l_60,
295
+ primaryBorderThickness: globalTokens.border_width_0,
296
+ primaryBorderStyle: globalTokens.border_none,
297
+ primaryBorderRadius: globalTokens.border_radius_medium,
298
+ primaryFontFamily: globalTokens.type_sans,
299
+ primaryFontSize: globalTokens.type_scale_03,
300
+ primaryFontWeight: globalTokens.type_regular,
301
+ secondaryBackgroundColor: globalTokens.transparent,
302
+ secondaryBackgroundColorOnDark: globalTokens.transparent,
303
+ secondaryFontColor: globalTokens.hal_purple_s_38,
304
+ secondaryFontColorOnDark: globalTokens.hal_white,
305
+ secondaryHoverFontColor: globalTokens.hal_white,
306
+ secondaryHoverFontColorOnDark: globalTokens.hal_black,
307
+ secondaryBorderColor: globalTokens.hal_purple_s_38,
308
+ secondaryBorderColorOnDark: globalTokens.hal_white,
309
+ secondaryHoverBackgroundColor: globalTokens.hal_purple_s_38,
310
+ secondaryHoverBackgroundColorOnDark: globalTokens.hal_white,
311
+ secondaryActiveBackgroundColor: globalTokens.hal_purple_d_20,
312
+ secondaryActiveBackgroundColorOnDark: globalTokens.hal_grey_l_90,
313
+ secondaryDisabledBackgroundColor: globalTokens.transparent,
314
+ secondaryDisabledBackgroundColorOnDark: globalTokens.transparent,
315
+ secondaryDisabledFontColor: globalTokens.lighterBlack,
316
+ secondaryDisabledFontColorOnDark: globalTokens.hal_grey_l_60,
317
+ secondaryDisabledBorderColor: globalTokens.hal_grey_l_60,
318
+ secondaryDisabledBorderColorOnDark: globalTokens.hal_grey_l_60,
319
+ secondaryBorderThickness: globalTokens.border_width_1,
320
+ secondaryBorderStyle: globalTokens.border_solid,
321
+ secondaryBorderRadius: globalTokens.border_radius_medium,
322
+ secondaryFontFamily: globalTokens.type_sans,
323
+ secondaryFontSize: globalTokens.type_scale_03,
324
+ secondaryFontWeight: globalTokens.type_regular,
325
+ textBackgroundColor: globalTokens.transparent,
326
+ textBackgroundColorOnDark: globalTokens.transparent,
327
+ textFontColor: globalTokens.hal_purple_s_38,
328
+ textFontColorOnDark: globalTokens.hal_white,
329
+ textHoverBackgroundColor: globalTokens.hal_purple_l_95,
330
+ textHoverBackgroundColorOnDark: globalTokens.color_grey_800,
331
+ textActiveBackgroundColor: globalTokens.hal_purple_l_90,
332
+ textActiveBackgroundColorOnDark: globalTokens.hal_grey_s_40,
333
+ textDisabledBackgroundColor: globalTokens.transparent,
334
+ textDisabledBackgroundColorOnDark: globalTokens.transparent,
335
+ textDisabledFontColor: globalTokens.hal_grey_l_60,
336
+ textDisabledFontColorOnDark: globalTokens.hal_grey_l_60,
337
+ textBorderThickness: globalTokens.border_width_0,
338
+ textBorderStyle: globalTokens.border_none,
339
+ textBorderRadius: globalTokens.border_radius_medium,
340
+ textFontFamily: globalTokens.type_sans,
341
+ textFontSize: globalTokens.type_scale_03,
342
+ textFontWeight: globalTokens.type_regular
343
+ },
299
344
  card: {
300
345
  height: "220px",
301
346
  width: "400px"
302
347
  },
303
348
  checkbox: {
304
- backgroundColorChecked: globalTokens.mediumBlue,
305
- backgroundHoverColorChecked: "#7BB0D6",
306
- backgroundColorCheckedOnDark: "#FFFFFF",
307
- backgroundHoverColorCheckedOnDark: "#B1B1B1",
308
- borderColor: globalTokens.mediumBlue,
309
- borderHoverColor: "#7BB0D6",
310
- borderColorOnDark: "#FFFFFF",
311
- borderHoverColorOnDark: "#B1B1B1",
312
- checkColor: globalTokens.white,
313
- checkColorOnDark: "#0067B3",
349
+ backgroundColorChecked: globalTokens.hal_blue_s_35,
350
+ backgroundColorCheckedOnDark: globalTokens.hal_grey_l_90,
351
+ hoverBackgroundColorChecked: globalTokens.hal_blue_d_20,
352
+ hoverBackgroundColorCheckedOnDark: global.hal_white,
353
+ disabledBackgroundColorChecked: globalTokens.hal_grey_l_60,
354
+ disabledBackgroundColorCheckedOnDark: globalTokens.color_grey_800,
355
+ borderColor: globalTokens.hal_blue_s_35,
356
+ borderColorOnDark: globalTokens.hal_grey_l_90,
357
+ hoverBorderColor: globalTokens.hal_blue_d_20,
358
+ hoverBorderColorOnDark: globalTokens.hal_white,
359
+ disabledBorderColor: globalTokens.hal_grey_l_60,
360
+ disabledBorderColorOnDark: globalTokens.color_grey_800,
361
+ checkColor: globalTokens.hal_white,
362
+ checkColorOnDark: globalTokens.hal_black,
363
+ disabledCheckColor: globalTokens.hal_white,
364
+ disabledCheckColorOnDark: globalTokens.hal_grey_l_60,
314
365
  fontFamily: globalTokens.type_sans,
315
- fontSize: globalTokens.type_scale_01,
316
- fontWeight: globalTokens.type_normal,
317
- fontColor: globalTokens.inherit,
318
- fontColorOnDark: "#FFFFFF",
319
- disabledBackgroundColorChecked: globalTokens.softBlue,
320
- disabledBackgroundColorCheckedOnDark: globalTokens.softBlue,
321
- disabledBorderColor: globalTokens.softBlue,
322
- disabledBorderColorOnDark: globalTokens.softBlue,
323
- disabledColorOnDark: "#BFBFBF",
324
- disabledCheckColor: globalTokens.white,
325
- disabledCheckColorOnDark: "#FFFFFF",
326
- disabledFontColor: globalTokens.lighterBlack,
327
- disabledFontColorOnDark: "#575757",
328
- focusColor: globalTokens.blue,
329
- checkLabelSpacing: "10px"
366
+ fontSize: globalTokens.type_scale_02,
367
+ fontWeight: globalTokens.type_regular,
368
+ fontColor: globalTokens.hal_black,
369
+ fontColorOnDark: globalTokens.hal_white,
370
+ disabledFontColor: globalTokens.hal_grey_l_60,
371
+ disabledFontColorOnDark: globalTokens.hal_grey_l_60,
372
+ focusColor: globalTokens.hal_blue_l_50,
373
+ focusColorOnDark: globalTokens.hal_blue_l_50,
374
+ checkLabelSpacing: "8px"
330
375
  },
331
376
  chip: {
332
- backgroundColor: globalTokens.darkWhite,
333
- borderColor: "transparent",
334
- fontColor: globalTokens.black,
335
- disabledBackgroundColor: globalTokens.mediumWhite,
336
- disabledFontColor: globalTokens.lighterBlack,
377
+ backgroundColor: globalTokens.hal_grey_l_90,
378
+ disabledBackgroundColor: globalTokens.hal_grey_l_95,
337
379
  fontFamily: globalTokens.type_sans,
338
380
  fontSize: globalTokens.type_scale_03,
339
- fontWeight: "400",
340
- fontStyle: "normal",
341
- borderRadius: "50px",
342
- borderThickness: "2px",
381
+ fontStyle: globalTokens.type_normal,
382
+ fontWeight: globalTokens.type_regular,
383
+ fontColor: globalTokens.hal_black,
384
+ disabledFontColor: globalTokens.hal_grey_l_60,
385
+ borderColor: globalTokens.transparent,
386
+ borderRadius: "80px",
387
+ borderThickness: "0px",
343
388
  borderStyle: "solid",
344
- height: "18px",
345
- contentPaddingLeft: "20px",
346
- contentPaddingRight: "20px",
347
- contentPaddingTop: "10px",
348
- contentPaddingBottom: "10px",
349
- iconMaxHeight: "24px",
350
- iconMaxWidth: "24px",
351
- suffixIconPaddingLeft: "0px",
352
- suffixIconPaddingRight: "0px",
353
- suffixIconPaddingTop: "0px",
354
- suffixIconPaddingBottom: "0px",
355
- prefixIconPaddingLeft: "0px",
356
- prefixIconPaddingRight: "0px",
357
- prefixIconPaddingTop: "0px",
358
- prefixIconPaddingBottom: "0px"
389
+ contentPaddingLeft: "16px",
390
+ contentPaddingRight: "16px",
391
+ contentPaddingTop: "0px",
392
+ contentPaddingBottom: "0px",
393
+ iconSize: "24px",
394
+ iconSpacing: "8px",
395
+ iconColor: globalTokens.hal_black,
396
+ disabledIconColor: globalTokens.hal_grey_l_60,
397
+ focusColor: globalTokens.hal_blue_l_50
359
398
  },
360
399
  date: {
361
400
  pickerSelectedDateBackgroundColor: globalTokens.purple,
362
- pickerSelectedDateColor: globalTokens.white,
363
- pickerBackgroundColor: globalTokens.white,
364
- pickerFontColor: globalTokens.black,
365
- pickerActualDate: globalTokens.lightGrey,
401
+ pickerSelectedDateColor: globalTokens.hal_white,
402
+ pickerBackgroundColor: globalTokens.hal_white,
403
+ pickerFontColor: globalTokens.hal_black,
366
404
  pickerHoverDateBackgroundColor: globalTokens.lighterPurple,
367
- pickerHoverDateFontColor: globalTokens.black,
368
- pickerYearColor: globalTokens.black,
369
- pickerMonthColor: globalTokens.black,
370
- pickerWeekLabelColor: globalTokens.black,
371
- pickerBackgroundColorMonthArrows: globalTokens.black,
372
- focusColor: globalTokens.blue,
405
+ pickerHoverDateFontColor: globalTokens.hal_black,
406
+ pickerActualDateColor: globalTokens.lightGrey,
407
+ pickerYearColor: globalTokens.hal_black,
408
+ pickerMonthColor: globalTokens.hal_black,
409
+ pickerWeekLabelColor: globalTokens.hal_black,
410
+ pickerBackgroundColorMonthArrows: globalTokens.transparent,
411
+ focusColor: globalTokens.hal_blue_l_50,
373
412
  fontFamily: globalTokens.type_sans,
374
413
  pickerHeight: "316px",
375
414
  pickerWidth: "290px"
376
415
  },
416
+ newDate: {
417
+ pickerFontFamily: globalTokens.type_sans,
418
+ pickerBackgroundColor: globalTokens.hal_white,
419
+ pickerHoverDateFontColor: globalTokens.hal_black,
420
+ pickerHoverDateBackgroundColor: globalTokens.hal_purple_l_90,
421
+ pickerSelectedDateColor: globalTokens.hal_white,
422
+ pickerSelectedDateBackgroundColor: globalTokens.hal_purple_s_38,
423
+ pickerActualDateFontColor: globalTokens.hal_grey_l_60,
424
+ pickerYearFontColor: globalTokens.hal_black,
425
+ pickerMonthFontColor: globalTokens.hal_black,
426
+ pickerWeekFontColor: globalTokens.hal_black,
427
+ pickerDayFontColor: globalTokens.hal_black,
428
+ pickerMonthArrowsBackgroundColor: globalTokens.transparent,
429
+ pickerFocusColor: globalTokens.hal_blue_l_50,
430
+ pickerHeight: "316px",
431
+ pickerWidth: "290px"
432
+ },
377
433
  dialog: {
378
- overlayColor: globalTokens.black,
379
- scrollBarThumbColor: globalTokens.darkGrey,
380
- scrollBarTrackColor: globalTokens.lightGrey,
381
- backgroundColor: globalTokens.white,
382
- fontFamily: globalTokens.type_sans,
383
- fontSize: globalTokens.type_scale_03,
384
- fontWeight: globalTokens.type_regular,
385
- fontColor: globalTokens.black,
386
- closeIconWidth: "34px",
387
- closeIconHeight: "34px",
434
+ overlayColor: globalTokens.hal_black,
435
+ backgroundColor: globalTokens.hal_white,
436
+ closeIconWidth: "24px",
437
+ closeIconHeight: "24px",
388
438
  closeIconTopPosition: "20px",
389
439
  closeIconRightPosition: "20px",
390
440
  closeIconBackgroundColor: "none",
391
441
  closeIconBorderColor: "none",
392
- closeIconColor: globalTokens.black,
442
+ closeIconColor: globalTokens.hal_black,
393
443
  closeIconBorderThickness: "0px",
394
444
  closeIconBorderStyle: "solid",
395
445
  closeIconBorderRadius: "0px",
@@ -397,151 +447,188 @@ var componentTokens = {
397
447
  boxShadowOffsetY: "1px",
398
448
  boxShadowBlur: "3px",
399
449
  boxShadowColor: "rgba(0, 0, 0, 0.2)",
400
- overlayOpacity: "0.8"
450
+ overlayOpacity: "0.7"
401
451
  },
402
452
  dropdown: {
403
- buttonBackgroundColor: globalTokens.white,
404
- buttonFontColor: globalTokens.black,
405
- optionsListBackgroundColor: globalTokens.white,
406
- optionsListFontColor: globalTokens.black,
407
- optionsListHoverBackgroundColor: globalTokens.white,
408
- buttonHoverBackgroundColor: globalTokens.white,
409
- scrollBarThumbColor: globalTokens.darkGrey,
410
- scrollBarTrackColor: globalTokens.lightGrey,
411
- focusColor: globalTokens.blue,
412
- fontFamily: globalTokens.type_sans,
413
- fontSize: globalTokens.type_scale_03,
453
+ buttonBackgroundColor: globalTokens.hal_white,
454
+ hoverButtonBackgroundColor: globalTokens.hal_grey_l_95,
455
+ activeButtonBackgroundColor: globalTokens.lightGrey,
456
+ buttonFontFamily: globalTokens.type_sans,
414
457
  buttonFontSize: globalTokens.type_scale_03,
415
458
  buttonFontStyle: globalTokens.type_normal,
416
459
  buttonFontWeight: globalTokens.type_regular,
417
- minHeight: "46px",
418
- minWidth: "230px",
419
- borderRadius: "2px",
460
+ buttonFontColor: globalTokens.hal_black,
461
+ buttonIconSize: "20px",
462
+ buttonIconSpacing: "10px",
463
+ buttonIconColor: globalTokens.hal_black,
464
+ buttonPaddingTop: "0px",
465
+ buttonPaddingBottom: "0px",
466
+ buttonPaddingLeft: "16px",
467
+ buttonPaddingRight: "16px",
468
+ disabledColor: globalTokens.lighterBlack,
469
+ disabledButtonBackgroundColor: globalTokens.transparent,
470
+ disabledBorderColor: globalTokens.lighterBlack,
471
+ optionBackgroundColor: globalTokens.hal_white,
472
+ hoverOptionBackgroundColor: globalTokens.hal_grey_l_95,
473
+ activeOptionBackgroundColor: globalTokens.lightGrey,
474
+ optionFontFamily: globalTokens.type_sans,
475
+ optionFontSize: globalTokens.type_scale_root,
476
+ optionFontStyle: globalTokens.type_normal,
477
+ optionFontWeight: globalTokens.type_regular,
478
+ optionFontColor: globalTokens.hal_black,
479
+ optionIconSize: "20px",
480
+ optionIconSpacing: "10px",
481
+ optionIconColor: globalTokens.hal_black,
482
+ optionPaddingTop: "6px",
483
+ optionPaddingBottom: "6px",
484
+ optionPaddingLeft: "16px",
485
+ optionPaddingRight: "16px",
486
+ caretIconSize: "24px",
487
+ caretIconColor: globalTokens.hal_black,
488
+ caretIconSpacing: "12px",
489
+ borderRadius: "4px",
420
490
  borderStyle: "none",
421
491
  borderThickness: "0px",
422
- borderColor: "transparent",
423
- optionsPaddingTop: "6px",
424
- optionsPaddingBottom: "6px",
425
- optionsPaddingLeft: "6px",
426
- optionsPaddingRight: "6px",
427
- caretIconMarginRight: "10px",
428
- caretIconMarginLeft: "10px",
429
- caretIconMarginTop: "0px",
430
- caretIconMarginBottom: "0px",
431
- optionsFontColor: "",
432
- optionsFontSize: globalTokens.type_scale_root,
433
- optionsFontStyle: globalTokens.type_normal,
434
- optionsFontWeight: globalTokens.type_regular
492
+ borderColor: globalTokens.transparent,
493
+ scrollBarThumbColor: globalTokens.hal_grey_s_40,
494
+ scrollBarTrackColor: globalTokens.lightGrey,
495
+ focusColor: globalTokens.hal_blue_l_50
496
+ },
497
+ fileInput: {
498
+ dropBorderColor: globalTokens.hal_black,
499
+ fileItemBorderColor: globalTokens.hal_grey_l_80,
500
+ fileNameFontColor: globalTokens.hal_black,
501
+ labelFontColor: globalTokens.hal_black,
502
+ helperTextFontColor: globalTokens.hal_black,
503
+ dropLabelFontColor: globalTokens.hal_black,
504
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
505
+ disabledHelperTextFontcolor: globalTokens.hal_grey_l_60,
506
+ disabledDropLabelFontColor: globalTokens.hal_grey_l_60,
507
+ focusDropBorderColor: globalTokens.hal_blue_l_50,
508
+ disabledDropBorderColor: globalTokens.hal_grey_l_60,
509
+ focusDropBackgroundColor: globalTokens.color_blue_50,
510
+ hoverFileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
511
+ activeFileItemIconBackgrounColor: globalTokens.hal_grey_l_80,
512
+ errorFileItemBorderColor: globalTokens.hal_red_s_41,
513
+ errorFileItemBackgroundColor: globalTokens.color_red_50,
514
+ errorFileItemIconBackgroundColor: globalTokens.color_red_700,
515
+ errorFileItemIconColor: globalTokens.hal_red_s_41,
516
+ fileItemIconBackgroundColor: globalTokens.hal_grey_l_95,
517
+ fileItemIconColor: globalTokens.color_grey_600,
518
+ errorMessageFontColor: globalTokens.hal_red_s_41,
519
+ labelFontFamily: globalTokens.type_sans,
520
+ labelFontSize: globalTokens.type_scale_02,
521
+ labelFontWeight: globalTokens.type_semibold,
522
+ labelLineHeight: globalTokens.type_leading_loose_01,
523
+ fileItemFontFamily: globalTokens.type_sans,
524
+ fileItemFontSize: globalTokens.type_scale_02,
525
+ fileItemFontWeight: globalTokens.type_regular,
526
+ fileItemLineHeight: globalTokens.type_leading_normal,
527
+ helperTextFontFamily: globalTokens.type_sans,
528
+ helperTextFontSize: globalTokens.type_scale_01,
529
+ helperTextFontWeight: globalTokens.type_regular,
530
+ helperTextLineHeight: globalTokens.type_scale_05,
531
+ dropLabelFontFamily: globalTokens.type_sans,
532
+ dropLabelFontSize: globalTokens.type_scale_03,
533
+ dropLabelFontWeight: globalTokens.type_regular,
534
+ errorMessageFontFamily: globalTokens.type_sans,
535
+ errorMessageFontSize: globalTokens.type_scale_01,
536
+ errorMessageFontWeight: globalTokens.type_regular,
537
+ errorMessageLineHeight: globalTokens.type_scale_05,
538
+ dropBorderThickness: globalTokens.border_width_1,
539
+ dropBorderStyle: globalTokens.border_dashed,
540
+ dropBorderRadius: globalTokens.border_radius_large,
541
+ fileItemBorderThickness: globalTokens.border_width_1,
542
+ fileItemBorderStyle: globalTokens.border_solid,
543
+ fileItemBorderRadius: globalTokens.border_radius_medium
435
544
  },
436
545
  footer: {
437
- backgroundColor: globalTokens.black,
438
- bottomLinksDividerColor: globalTokens.mediumBlue,
439
- bottomLinksDividerThickness: "2px",
546
+ height: "124px",
547
+ backgroundColor: globalTokens.hal_black,
548
+ bottomLinksDividerColor: globalTokens.hal_blue_l_50,
549
+ bottomLinksDividerThickness: "1px",
440
550
  bottomLinksDividerStyle: "solid",
441
- bottomLinksDividerSpacing: "6px",
551
+ bottomLinksDividerSpacing: "8px",
442
552
  bottomLinksFontFamily: globalTokens.type_sans,
443
553
  bottomLinksFontSize: globalTokens.type_scale_01,
444
554
  bottomLinksFontStyle: globalTokens.type_normal,
445
555
  bottomLinksFontWeight: globalTokens.type_regular,
446
- bottomLinksFontColor: "",
556
+ bottomLinksFontColor: globalTokens.hal_white,
447
557
  bottomLinksTextDecoration: globalTokens.type_no_line,
448
558
  copyrightFontFamily: globalTokens.type_sans,
449
559
  copyrightFontSize: globalTokens.type_scale_01,
450
560
  copyrightFontStyle: globalTokens.type_normal,
451
561
  copyrightFontWeight: globalTokens.type_regular,
452
- copyrightFontColor: "",
453
- customContentFontFamily: globalTokens.type_sans,
454
- customContentFontSize: globalTokens.type_scale_root,
455
- customContentFontStyle: globalTokens.type_normal,
456
- customContentFontWeight: globalTokens.type_regular,
457
- customContentFontColor: "",
458
- fontColorBase: globalTokens.white,
459
- logo: _dxc_logo_wht["default"],
460
- logoHeight: "34px",
562
+ copyrightFontColor: globalTokens.hal_white,
563
+ logo: _dxc_logo["default"],
564
+ logoHeight: "32px",
461
565
  logoWidth: "auto",
462
- minHeight: "120px",
463
- socialIconSize: "25px",
464
- socialIconsGutter: "15px"
566
+ socialLinksSize: "24px",
567
+ socialLinksGutter: "16px",
568
+ socialLinksColor: globalTokens.hal_white
465
569
  },
466
570
  header: {
467
- backgroundColor: globalTokens.white,
468
- customContentFontFamily: "",
469
- customContentFontStyle: globalTokens.type_normal,
470
- customContentFontColor: "",
471
- customContentFontSize: "",
472
- customContentFontWeight: globalTokens.type_regular,
473
- dropdownBackgroundColor: globalTokens.transparent,
474
- dropdownHoverBackgroundColor: globalTokens.transparent,
475
- fontColorBase: globalTokens.black,
476
- fontFamilyBase: globalTokens.type_sans,
477
- fontSizeBase: globalTokens.type_scale_root,
478
- hamburguerFocusColor: globalTokens.blue,
479
- hamburguerFontFamily: "",
571
+ backgroundColor: globalTokens.hal_white,
572
+ hamburguerFocusColor: globalTokens.hal_blue_l_50,
573
+ hamburguerFontFamily: globalTokens.type_sans,
480
574
  hamburguerFontStyle: globalTokens.type_normal,
481
- hamburguerFontColor: "",
482
- hamburguerFontSize: globalTokens.fontSize10,
575
+ hamburguerFontColor: globalTokens.hal_black,
576
+ hamburguerFontSize: "10px",
483
577
  hamburguerFontWeight: globalTokens.type_semibold,
484
- hamburguerColor: globalTokens.black,
485
- hamburguerHoverColor: globalTokens.mediumGreyBlack,
486
578
  hamburguerTextTransform: globalTokens.type_uppercase,
487
- logo: _dxc_logo_blk_rgb["default"],
488
- logoResponsive: _dxc_logo_blk_rgb["default"],
489
- logoHeight: "32px",
579
+ hamburguerIconColor: globalTokens.hal_black,
580
+ hamburguerHoverColor: globalTokens.mediumGreyBlack,
581
+ logo: _dxc_logo_black["default"],
582
+ logoResponsive: _dxc_logo_black["default"],
583
+ logoHeight: "40px",
490
584
  logoWidth: "auto",
491
- menuBackgroundColor: globalTokens.white,
585
+ menuBackgroundColor: globalTokens.hal_white,
492
586
  menuZindex: "2000",
493
587
  menuTabletWidth: "60vw",
494
588
  menuMobileWidth: "100vw",
495
- menuCustomContentFontFamily: "",
496
- menuCustomContentFontStyle: globalTokens.type_normal,
497
- menuCustomContentFontColor: "",
498
- menuCustomContentFontSize: "",
499
- menuCustomContentFontWeight: globalTokens.type_regular,
500
589
  minHeight: "64px",
501
590
  overlayColor: globalTokens.softBlack,
502
591
  overlayOpacity: "0.7",
503
592
  overlayZindex: "1600",
504
593
  paddingTop: "0px",
505
594
  paddingBottom: "0px",
506
- paddingRight: "0px",
507
- paddingLeft: "20px",
508
- underlinedColor: globalTokens.black,
595
+ paddingRight: "24px",
596
+ paddingLeft: "24px",
597
+ underlinedColor: globalTokens.hal_black,
509
598
  underlinedThickness: "2px",
510
599
  underlinedStyle: "solid"
511
600
  },
512
601
  heading: {
513
- fontColorBase: globalTokens.inherit,
514
- fontFamilyBase: globalTokens.type_sans,
515
- level1FontColor: "",
516
- level1FontFamily: "",
602
+ level1FontColor: globalTokens.inherit,
603
+ level1FontFamily: globalTokens.type_sans,
517
604
  level1FontSize: globalTokens.type_scale_08,
518
605
  level1FontStyle: globalTokens.type_normal,
519
606
  level1FontWeight: globalTokens.type_regular,
520
607
  level1LineHeight: globalTokens.type_leading_compact_01,
521
608
  level1LetterSpacing: globalTokens.type_spacing_tight_01,
522
- level2FontColor: "",
523
- level2FontFamily: "",
609
+ level2FontColor: globalTokens.inherit,
610
+ level2FontFamily: globalTokens.type_sans,
524
611
  level2FontSize: globalTokens.type_scale_07,
525
612
  level2FontStyle: globalTokens.type_normal,
526
613
  level2FontWeight: globalTokens.type_regular,
527
614
  level2LineHeight: globalTokens.type_leading_normal,
528
615
  level2LetterSpacing: globalTokens.type_spacing_normal,
529
- level3FontColor: "",
530
- level3FontFamily: "",
616
+ level3FontColor: globalTokens.inherit,
617
+ level3FontFamily: globalTokens.type_sans,
531
618
  level3FontSize: globalTokens.type_scale_06,
532
619
  level3FontStyle: globalTokens.type_normal,
533
620
  level3FontWeight: globalTokens.type_regular,
534
621
  level3LineHeight: globalTokens.type_leading_compact_01,
535
622
  level3LetterSpacing: globalTokens.type_spacing_wide_01,
536
- level4FontColor: "",
537
- level4FontFamily: "",
623
+ level4FontColor: globalTokens.inherit,
624
+ level4FontFamily: globalTokens.type_sans,
538
625
  level4FontSize: globalTokens.type_scale_05,
539
626
  level4FontStyle: globalTokens.type_normal,
540
627
  level4FontWeight: globalTokens.type_regular,
541
628
  level4LineHeight: globalTokens.type_leading_normal,
542
629
  level4LetterSpacing: globalTokens.type_spacing_normal,
543
- level5FontColor: "",
544
- level5FontFamily: "",
630
+ level5FontColor: globalTokens.inherit,
631
+ level5FontFamily: globalTokens.type_sans,
545
632
  level5FontSize: globalTokens.type_scale_04,
546
633
  level5FontStyle: globalTokens.type_normal,
547
634
  level5FontWeight: globalTokens.type_regular,
@@ -549,71 +636,176 @@ var componentTokens = {
549
636
  level5LetterSpacing: globalTokens.type_spacing_wide_01
550
637
  },
551
638
  inputText: {
552
- assistiveTextFontColor: "",
553
- assistiveTextFontColorOnDark: "",
639
+ fontFamily: globalTokens.type_sans,
640
+ assistiveTextFontColor: globalTokens.black,
641
+ assistiveTextFontColorOnDark: globalTokens.white,
554
642
  assistiveTextFontSize: globalTokens.type_scale_01,
555
643
  assistiveTextFontStyle: globalTokens.type_normal,
556
644
  assistiveTextFontWeight: globalTokens.type_regular,
557
- disabledFontColor: globalTokens.lighterBlack,
558
- disabledFontColorOnDark: "#575757",
645
+ disabledColor: globalTokens.lighterBlack,
646
+ disabledColorOnDark: "#575757",
559
647
  errorColor: globalTokens.red,
560
- errorColorOnDark: "#FE344F",
561
- fontColorBase: globalTokens.black,
562
- fontColorBaseOnDark: globalTokens.white,
563
- fontFamilyBase: globalTokens.type_sans,
564
- fontSizeBase: globalTokens.type_scale_root,
648
+ errorColorOnDark: globalTokens.hal_red_l_60,
649
+ optionBackgroundColor: globalTokens.white,
650
+ optionBorderColor: globalTokens.black,
651
+ optionBorderThickness: "0px",
652
+ optionBorderStyle: "solid",
653
+ optionFontColor: globalTokens.black,
654
+ optionFontColorOnDark: globalTokens.white,
655
+ optionFontSize: globalTokens.type_scale_03,
656
+ optionFontStyle: globalTokens.type_normal,
657
+ optionFontWeight: globalTokens.type_regular,
658
+ optionPaddingBottom: "6px",
659
+ optionPaddingTop: "6px",
660
+ scrollBarThumbColor: globalTokens.darkGrey,
661
+ scrollBarTrackColor: globalTokens.lightGrey,
565
662
  hoverOptionColor: globalTokens.black,
663
+ hoverOptionBackgroundColor: globalTokens.lightWhite,
664
+ hoverOptionBackgroundColorOnDark: globalTokens.mediumGrey,
665
+ selectedOptionBackgroundColor: globalTokens.lightGrey,
666
+ selectedOptionBackgroundColorOnDark: globalTokens.lightGrey,
667
+ labelFontColor: globalTokens.black,
668
+ labelFontColorOnDark: globalTokens.white,
566
669
  labelFontSize: globalTokens.type_scale_03,
567
- prefixIconColor: "",
568
- prefixIconColorOnDark: "",
569
- prefixLabelFontColor: "",
570
- prefixLabelFontColorOnDark: "",
670
+ labelFontStyle: globalTokens.type_normal,
671
+ labelFontWeight: globalTokens.type_regular,
672
+ valueFontColor: globalTokens.black,
673
+ valueFontColorOnDark: globalTokens.white,
674
+ valueFontSize: globalTokens.type_scale_03,
675
+ valueFontStyle: globalTokens.type_normal,
676
+ valueFontWeight: globalTokens.type_regular,
677
+ prefixIconColor: globalTokens.black,
678
+ prefixIconColorOnDark: globalTokens.white,
679
+ prefixLabelFontColor: globalTokens.black,
680
+ prefixLabelFontColorOnDark: globalTokens.white,
571
681
  prefixLabelFontSize: globalTokens.type_scale_03,
572
682
  prefixLabelFontStyle: globalTokens.type_normal,
573
683
  prefixLabelFontWeight: globalTokens.type_regular,
574
- scrollBarThumbColor: globalTokens.darkGrey,
575
- scrollBarTrackColor: globalTokens.lightGrey,
576
- selectedOptionBackgroundColor: globalTokens.lightWhite,
577
- suffixIconColor: "",
578
- suffixIconColorOnDark: "",
579
- suffixLabelFontColor: "",
580
- suffixLabelFontColorOnDark: "",
684
+ suffixIconColor: globalTokens.black,
685
+ suffixIconColorOnDark: globalTokens.white,
686
+ suffixLabelFontColor: globalTokens.black,
687
+ suffixLabelFontColorOnDark: globalTokens.white,
581
688
  suffixLabelFontSize: globalTokens.type_scale_03,
582
689
  suffixLabelFontStyle: globalTokens.type_normal,
583
690
  suffixLabelFontWeight: globalTokens.type_regular,
584
- underlineColor: "",
585
- underlineColorOnDark: "",
586
- underlineFocusColor: "",
587
- underlineFocusColorOnDark: "",
691
+ underlineColor: globalTokens.black,
692
+ underlineColorOnDark: globalTokens.white,
693
+ underlineFocusColor: globalTokens.black,
694
+ underlineFocusColorOnDark: globalTokens.white,
588
695
  underlineThickness: "1px"
589
696
  },
697
+ newInputText: {
698
+ fontFamily: globalTokens.type_sans,
699
+ enabledBorderColor: globalTokens.hal_black,
700
+ enabledBorderColorOnDark: globalTokens.hal_white,
701
+ hoverBorderColor: globalTokens.hal_purple_l_65,
702
+ hoverBorderColorOnDark: globalTokens.hal_purple_l_65,
703
+ focusBorderColor: globalTokens.hal_blue_l_50,
704
+ focusBorderColorOnDark: globalTokens.hal_blue_l_50,
705
+ disabledBorderColor: globalTokens.hal_grey_l_60,
706
+ disabledBorderColorOnDark: globalTokens.hal_grey_l_60,
707
+ disabledContainerFillColor: globalTokens.hal_grey_l_95,
708
+ disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
709
+ errorBorderColor: globalTokens.hal_red_s_41,
710
+ errorBorderColorOnDark: globalTokens.hal_red_l_60,
711
+ hoverErrorBorderColor: "#fe0123",
712
+ hoverErrorBorderColorOnDark: "#fe677b",
713
+ errorMessageColor: globalTokens.hal_red_s_41,
714
+ errorMessageColorOnDark: globalTokens.hal_red_l_60,
715
+ errorIconColor: globalTokens.hal_red_s_41,
716
+ errorIconColorOnDark: globalTokens.hal_red_l_60,
717
+ labelFontColor: globalTokens.hal_black,
718
+ labelFontColorOnDark: globalTokens.hal_white,
719
+ labelFontSize: globalTokens.type_scale_02,
720
+ labelFontStyle: globalTokens.type_normal,
721
+ labelFontWeight: globalTokens.type_semibold,
722
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
723
+ disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
724
+ optionalLabelFontWeight: globalTokens.type_regular,
725
+ helperTextFontColor: globalTokens.hal_black,
726
+ helperTextFontColorOnDark: globalTokens.hal_white,
727
+ helperTextFontSize: globalTokens.type_scale_01,
728
+ helperTextFontStyle: globalTokens.type_normal,
729
+ helperTextFontWeight: globalTokens.type_regular,
730
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
731
+ disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
732
+ prefixColor: globalTokens.hal_grey_s_40,
733
+ prefixColorOnDark: globalTokens.hal_white,
734
+ suffixColor: globalTokens.hal_grey_s_40,
735
+ suffixColorOnDark: globalTokens.hal_white,
736
+ disabledPrefixColor: globalTokens.hal_grey_l_75,
737
+ disabledSuffixColor: globalTokens.hal_grey_l_75,
738
+ disabledPrefixColorOnDark: globalTokens.hal_grey_l_60,
739
+ disabledSuffixColorOnDark: globalTokens.hal_grey_l_60,
740
+ placeholderFontColor: "#808080",
741
+ placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
742
+ disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
743
+ disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
744
+ valueFontColor: globalTokens.hal_black,
745
+ valueFontColorOnDark: globalTokens.hal_white,
746
+ valueFontSize: globalTokens.type_scale_03,
747
+ valueFontStyle: globalTokens.type_normal,
748
+ valueFontWeight: globalTokens.type_regular,
749
+ disabledValueFontColor: globalTokens.hal_grey_l_60,
750
+ disabledValueFontColorOnDark: globalTokens.hal_grey_l_60,
751
+ actionIconColor: globalTokens.hal_black,
752
+ actionIconColorOnDark: globalTokens.hal_white,
753
+ disabledActionIconColor: globalTokens.hal_grey_l_60,
754
+ disabledActionIconColorOnDark: globalTokens.hal_grey_l_60,
755
+ hoverActionIconColor: globalTokens.hal_black,
756
+ hoverActionIconColorOnDark: globalTokens.hal_white,
757
+ focusActionIconColor: globalTokens.hal_black,
758
+ focusActionIconColorOnDark: globalTokens.hal_white,
759
+ activeActionIconColor: globalTokens.hal_black,
760
+ activeActionIconColorOnDark: globalTokens.hal_black,
761
+ actionBackgroundColor: globalTokens.transparent,
762
+ actionBackgroundColorOnDark: globalTokens.transparent,
763
+ disabledActionBackgroundColor: globalTokens.transparent,
764
+ disabledActionBackgroundColorOnDark: globalTokens.transparent,
765
+ hoverActionBackgroundColor: globalTokens.hal_grey_l_95,
766
+ hoverActionBackgroundColorOnDark: globalTokens.hal_grey_s_40,
767
+ focusActionBorderColor: globalTokens.hal_blue_l_50,
768
+ focusActionBorderColorOnDark: globalTokens.hal_blue_l_50,
769
+ activeActionBackgroundColor: globalTokens.hal_grey_l_80,
770
+ activeActionBackgroundColorOnDark: globalTokens.hal_grey_l_60,
771
+ listOptionFontColor: globalTokens.hal_black,
772
+ listOptionFontSize: globalTokens.type_scale_03,
773
+ listOptionFontStyle: globalTokens.type_normal,
774
+ listOptionFontWeight: globalTokens.type_regular,
775
+ systemMessageFontColor: globalTokens.hal_grey_s_40,
776
+ errorMessageBorderColor: globalTokens.hal_red_s_41,
777
+ errorMessageBackgroundColor: globalTokens.hal_red_l_95,
778
+ hoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
779
+ activeListOptionBackgroundColor: globalTokens.hal_grey_l_80
780
+ },
590
781
  link: {
591
- disabledColor: globalTokens.lightGrey,
592
- disabledUnderlineColor: globalTokens.lightGrey,
593
- fontColor: globalTokens.blue,
782
+ fontColor: globalTokens.hal_blue_s_35,
594
783
  fontFamily: globalTokens.inherit,
595
784
  fontSize: globalTokens.type_scale_root,
596
785
  fontStyle: globalTokens.type_normal,
597
786
  fontWeight: globalTokens.type_regular,
598
- hoverFontColor: globalTokens.darkBlue,
599
- hoverUnderlineColor: globalTokens.darkBlue,
600
- iconWidth: "16px",
601
- iconHeight: "16px",
602
- iconGutter: "6px",
603
- underlineColor: globalTokens.blue,
604
- underlineSpacing: "1px",
787
+ iconSize: "16px",
788
+ iconSpacing: "4px",
789
+ underlineSpacing: "0px",
605
790
  underlineStyle: "solid",
606
791
  underlineThickness: "1px",
607
- visitedFontColor: globalTokens.violet,
608
- visitedUnderlineColor: globalTokens.violet
792
+ disabledColor: globalTokens.lightGrey,
793
+ hoverFontColor: globalTokens.hal_blue_s_35,
794
+ hoverUnderlineColor: globalTokens.hal_blue_s_35,
795
+ visitedFontColor: globalTokens.purple,
796
+ visitedUnderlineColor: globalTokens.purple,
797
+ activeFontColor: globalTokens.black,
798
+ activeUnderlineColor: globalTokens.black,
799
+ focusColor: globalTokens.hal_blue_l_50
609
800
  },
610
801
  paginator: {
611
802
  backgroundColor: globalTokens.darkWhite,
612
- fontColor: globalTokens.black,
803
+ fontColor: globalTokens.hal_black,
613
804
  fontFamily: globalTokens.type_sans,
614
805
  fontSize: globalTokens.type_scale_02,
615
806
  fontStyle: globalTokens.type_normal,
616
807
  fontWeight: globalTokens.type_regular,
808
+ fontTextTransform: "none",
617
809
  height: "64px",
618
810
  width: "100%",
619
811
  marginRight: "40px",
@@ -626,20 +818,29 @@ var componentTokens = {
626
818
  totalItemsContainerMarginLeft: "0px"
627
819
  },
628
820
  progressBar: {
629
- trackLineColor: globalTokens.purple,
821
+ trackLineColor: globalTokens.hal_purple_s_38,
822
+ trackLineColorOnDark: globalTokens.hal_purple_l_65,
630
823
  totalLineColor: globalTokens.softGrey,
631
824
  labelFontFamily: globalTokens.type_sans,
632
825
  labelFontSize: globalTokens.type_scale_01,
633
826
  labelFontStyle: globalTokens.type_normal,
634
827
  labelFontWeight: globalTokens.type_regular,
635
828
  labelFontColor: globalTokens.black,
829
+ labelFontColorOnDark: globalTokens.hal_white,
636
830
  labelFontTextTransform: globalTokens.type_uppercase,
637
831
  valueFontFamily: globalTokens.type_sans,
638
832
  valueFontSize: globalTokens.type_scale_01,
639
833
  valueFontStyle: globalTokens.type_normal,
640
834
  valueFontWeight: globalTokens.type_regular,
641
835
  valueFontColor: globalTokens.black,
836
+ valueFontColorOnDark: globalTokens.hal_white,
642
837
  valueFontTextTransform: globalTokens.type_uppercase,
838
+ helperTextFontColor: globalTokens.black,
839
+ helperTextFontColorOnDark: globalTokens.hal_white,
840
+ helperTextFontSize: globalTokens.type_scale_01,
841
+ helperTextFontStyle: globalTokens.type_normal,
842
+ helperTextFontWeight: globalTokens.type_regular,
843
+ helperTextFontFamily: globalTokens.type_sans,
643
844
  thickness: "9px",
644
845
  borderRadius: "5px",
645
846
  overlayColor: globalTokens.black,
@@ -654,7 +855,7 @@ var componentTokens = {
654
855
  disabledColorOnDark: "#575757",
655
856
  disabledFontColor: globalTokens.lighterBlack,
656
857
  disabledFontColorOnDark: "#575757",
657
- focusColor: globalTokens.blue,
858
+ focusColor: globalTokens.hal_blue_l_50,
658
859
  focusColorOnDark: "#1682FF",
659
860
  fontColor: globalTokens.inherit,
660
861
  fontColorOnDark: globalTokens.white,
@@ -664,77 +865,179 @@ var componentTokens = {
664
865
  fontWeight: globalTokens.type_regular
665
866
  },
666
867
  select: {
667
- checkboxOptionSpacing: "10px",
668
- color: globalTokens.black,
669
- colorOnDark: globalTokens.white,
670
- disabledColor: globalTokens.lighterBlack,
671
- disabledColorOnDark: "#575757",
672
- errorColor: globalTokens.red,
673
- errorColorOnDark: "#FE344F",
674
- focusColor: globalTokens.blue,
675
- focusColorOnDark: globalTokens.blue,
676
868
  fontFamily: globalTokens.type_sans,
677
- hoveredOptionBackgroundColor: globalTokens.lightWhite,
678
- hoveredOptionBackgroundColorOnDark: globalTokens.lightWhite,
679
- iconColor: "",
680
- iconOptionSpacing: "10px",
681
- iconHeight: "20px",
682
- iconWidth: "20px",
869
+ assistiveTextFontColor: globalTokens.hal_black,
870
+ assistiveTextFontColorOnDark: globalTokens.hal_white,
871
+ assistiveTextFontSize: globalTokens.type_scale_01,
872
+ assistiveTextFontStyle: globalTokens.type_normal,
873
+ assistiveTextFontWeight: globalTokens.type_regular,
874
+ labelFontColor: globalTokens.hal_black,
875
+ labelFontColorOnDark: globalTokens.hal_white,
683
876
  labelFontSize: globalTokens.type_scale_03,
684
877
  labelFontStyle: globalTokens.type_normal,
685
878
  labelFontWeight: globalTokens.type_regular,
879
+ disabledColor: globalTokens.lighterBlack,
880
+ disabledColorOnDark: "#575757",
881
+ errorColor: globalTokens.red,
882
+ errorColorOnDark: globalTokens.hal_red_l_60,
883
+ optionBackgroundColor: globalTokens.hal_white,
884
+ optionBorderColor: globalTokens.hal_black,
885
+ optionBorderThickness: "0px",
886
+ optionBorderStyle: "solid",
887
+ optionFontColor: globalTokens.hal_black,
888
+ optionFontColorOnDark: globalTokens.hal_white,
889
+ optionFontSize: globalTokens.type_scale_root,
890
+ optionFontStyle: globalTokens.type_normal,
891
+ optionFontWeight: globalTokens.type_regular,
686
892
  optionPaddingBottom: "6px",
687
893
  optionPaddingTop: "6px",
688
- optionPaddingLeft: "16px",
689
- optionPaddingRight: "16px",
690
- optionsBackgroundColor: globalTokens.white,
691
- optionsBorderColor: "none",
692
- optionsBorderThickness: "0px",
693
- optionsBorderStyle: "solid",
694
- optionsFontColor: "",
695
- optionsFontSize: globalTokens.type_scale_root,
696
- optionsFontStyle: globalTokens.type_normal,
697
- optionsFontWeight: globalTokens.type_regular,
698
- scrollBarThumbColor: globalTokens.darkGrey,
894
+ scrollBarThumbColor: globalTokens.hal_grey_s_40,
699
895
  scrollBarTrackColor: globalTokens.lightGrey,
896
+ optionIconColor: globalTokens.hal_black,
897
+ optionIconColorOnDark: globalTokens.hal_white,
898
+ optionIconSpacing: "12px",
899
+ optionIconSize: "20px",
900
+ optionCheckboxSpacing: "12px",
901
+ hoverOptionBackgroundColor: globalTokens.hal_grey_l_95,
902
+ hoverOptionBackgroundColorOnDark: globalTokens.hal_grey_l_95,
903
+ activeOptionBackgroundColor: globalTokens.hal_grey_l_80,
904
+ activeOptionBackgroundColorOnDark: globalTokens.hal_grey_l_80,
700
905
  selectedOptionBackgroundColor: globalTokens.lightGrey,
701
- selectedOptionBackgroundColorOnDark: globalTokens.lightGrey
906
+ selectedOptionBackgroundColorOnDark: globalTokens.lightGrey,
907
+ underlineColor: globalTokens.hal_black,
908
+ underlineColorOnDark: globalTokens.hal_white,
909
+ underlineFocusColor: globalTokens.hal_black,
910
+ underlineFocusColorOnDark: globalTokens.hal_white,
911
+ underlineThickness: "1px",
912
+ valueFontColor: globalTokens.hal_black,
913
+ valueFontColorOnDark: globalTokens.hal_white,
914
+ valueFontSize: globalTokens.type_scale_03,
915
+ valueFontStyle: globalTokens.type_normal,
916
+ valueFontWeight: globalTokens.type_regular,
917
+ valueIconColor: globalTokens.hal_black,
918
+ valueIconColorOnDark: globalTokens.hal_white,
919
+ valueIconSize: "20px",
920
+ valueIconSpacing: "12px",
921
+ arrowColor: globalTokens.hal_black,
922
+ arrowColorOnDark: globalTokens.hal_white,
923
+ focusColor: globalTokens.hal_blue_l_50,
924
+ focusColorOnDark: globalTokens.hal_blue_l_50
925
+ },
926
+ newSelect: {
927
+ fontFamily: globalTokens.type_sans,
928
+ enabledBorderColor: globalTokens.hal_black,
929
+ enabledBorderColorOnDark: globalTokens.hal_white,
930
+ hoverBorderColor: globalTokens.hal_purple_l_65,
931
+ hoverBorderColorOnDark: globalTokens.hal_purple_l_65,
932
+ focusBorderColor: globalTokens.hal_blue_l_50,
933
+ focusBorderColorOnDark: globalTokens.hal_blue_l_50,
934
+ disabledBorderColor: globalTokens.hal_grey_l_60,
935
+ disabledBorderColorOnDark: globalTokens.hal_grey_l_60,
936
+ disabledContainerFillColor: globalTokens.hal_grey_l_95,
937
+ disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
938
+ errorBorderColor: globalTokens.hal_red_s_41,
939
+ errorBorderColorOnDark: globalTokens.hal_red_l_60,
940
+ hoverErrorBorderColor: "#fe0123",
941
+ hoverErrorBorderColorOnDark: "#fe677b",
942
+ errorMessageColor: globalTokens.hal_red_s_41,
943
+ errorMessageColorOnDark: globalTokens.hal_red_l_60,
944
+ errorIconColor: globalTokens.hal_red_s_41,
945
+ errorIconColorOnDark: globalTokens.hal_red_l_60,
946
+ labelFontColor: globalTokens.hal_black,
947
+ labelFontColorOnDark: globalTokens.hal_white,
948
+ labelFontSize: globalTokens.type_scale_02,
949
+ labelFontStyle: globalTokens.type_normal,
950
+ labelFontWeight: globalTokens.type_semibold,
951
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
952
+ disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
953
+ optionalLabelFontWeight: globalTokens.type_regular,
954
+ helperTextFontColor: globalTokens.hal_black,
955
+ helperTextFontColorOnDark: globalTokens.hal_white,
956
+ helperTextFontSize: globalTokens.type_scale_01,
957
+ helperTextFontStyle: globalTokens.type_normal,
958
+ helperTextFontWeight: globalTokens.type_regular,
959
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
960
+ disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
961
+ placeholderFontColor: "#808080",
962
+ placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
963
+ disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
964
+ disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
965
+ valueFontColor: globalTokens.hal_black,
966
+ valueFontColorOnDark: globalTokens.hal_white,
967
+ valueFontSize: globalTokens.type_scale_03,
968
+ valueFontStyle: globalTokens.type_normal,
969
+ valueFontWeight: globalTokens.type_regular,
970
+ disabledValueFontColor: globalTokens.hal_grey_l_60,
971
+ disabledValueFontColorOnDark: globalTokens.hal_grey_l_60,
972
+ actionIconColor: globalTokens.hal_black,
973
+ actionIconColorOnDark: globalTokens.hal_white,
974
+ disabledActionIconColor: globalTokens.hal_grey_l_60,
975
+ disabledActionIconColorOnDark: globalTokens.hal_grey_l_60,
976
+ hoverActionIconColor: globalTokens.hal_black,
977
+ hoverActionIconColorOnDark: globalTokens.hal_white,
978
+ focusActionIconColor: globalTokens.hal_black,
979
+ focusActionIconColorOnDark: globalTokens.hal_white,
980
+ activeActionIconColor: globalTokens.hal_black,
981
+ activeActionIconColorOnDark: globalTokens.hal_black,
982
+ actionBackgroundColor: globalTokens.transparent,
983
+ actionBackgroundColorOnDark: globalTokens.transparent,
984
+ disabledActionBackgroundColor: globalTokens.transparent,
985
+ disabledActionBackgroundColorOnDark: globalTokens.transparent,
986
+ hoverActionBackgroundColor: globalTokens.hal_grey_l_95,
987
+ hoverActionBackgroundColorOnDark: globalTokens.hal_grey_s_40,
988
+ focusActionBorderColor: globalTokens.hal_blue_l_50,
989
+ focusActionBorderColorOnDark: globalTokens.hal_blue_l_50,
990
+ activeActionBackgroundColor: globalTokens.hal_grey_l_80,
991
+ activeActionBackgroundColorOnDark: globalTokens.hal_grey_l_60,
992
+ listOptionFontColor: globalTokens.hal_black,
993
+ listOptionFontSize: globalTokens.type_scale_02,
994
+ listOptionFontStyle: globalTokens.type_normal,
995
+ listOptionFontWeight: globalTokens.type_regular,
996
+ systemMessageFontColor: globalTokens.hal_grey_s_40,
997
+ errorMessageBorderColor: globalTokens.hal_red_s_41,
998
+ errorMessageBackgroundColor: globalTokens.hal_red_l_95,
999
+ hoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
1000
+ activeListOptionBackgroundColor: globalTokens.hal_grey_l_90,
1001
+ // NUEVO
1002
+ arrowColor: globalTokens.hal_black,
1003
+ arrowColorOnDark: globalTokens.hal_white,
1004
+ disabledArrowColor: globalTokens.hal_grey_l_60,
1005
+ disabledArrowColorOnDark: globalTokens.hal_grey_l_60,
1006
+ enabledListBorderColor: globalTokens.hal_grey_l_80,
1007
+ listOptionBorderBottomColor: globalTokens.hal_grey_l_90,
1008
+ selectedListOptionBackgroundColor: globalTokens.hal_grey_l_90
702
1009
  },
703
1010
  sidenav: {
704
- backgroundColor: globalTokens.lighterGrey,
705
- arrowContainerColor: globalTokens.lightGrey,
706
- arrowColor: globalTokens.black,
707
- customContentFontFamily: globalTokens.type_sans,
708
- customContentFontSize: globalTokens.type_scale_root,
709
- customContentFontStyle: globalTokens.type_normal,
710
- customContentFontWeight: globalTokens.type_regular,
711
- customContentFontColor: globalTokens.black,
1011
+ backgroundColor: globalTokens.hal_grey_l_95,
1012
+ arrowContainerColor: globalTokens.hal_grey_l_90,
1013
+ arrowColor: globalTokens.hal_black,
712
1014
  titleFontFamily: globalTokens.type_sans,
713
1015
  titleFontSize: globalTokens.type_scale_05,
714
1016
  titleFontStyle: globalTokens.type_normal,
715
1017
  titleFontWeight: globalTokens.type_regular,
716
- titleFontColor: "#000000de",
1018
+ titleFontColor: globalTokens.hal_black,
717
1019
  titleFontTextTransform: "none",
718
1020
  titleFontLetterSpacing: globalTokens.type_spacing_normal,
719
1021
  subtitleFontFamily: globalTokens.type_sans,
720
- subtitleFontSize: globalTokens.type_scale_01,
1022
+ subtitleFontSize: globalTokens.type_scale_03,
721
1023
  subtitleFontStyle: globalTokens.type_normal,
722
1024
  subtitleFontWeight: globalTokens.type_regular,
723
- subtitleFontColor: "#00000099",
1025
+ subtitleFontColor: globalTokens.color_grey_800,
724
1026
  subtitleFontTextTransform: globalTokens.type_uppercase,
725
- subtitleFontLetterSpacing: globalTokens.type_spacing_wide_03,
1027
+ subtitleFontLetterSpacing: globalTokens.type_spacing_wide_02,
726
1028
  linkFontFamily: globalTokens.type_sans,
727
1029
  linkFontSize: globalTokens.type_scale_02,
728
1030
  linkFontStyle: globalTokens.type_normal,
729
1031
  linkFontWeight: globalTokens.type_regular,
730
- linkFontColor: "#00000099",
1032
+ linkFontColor: globalTokens.color_grey_800,
731
1033
  linkFontTextTransform: "none",
732
1034
  linkFontLetterSpacing: globalTokens.type_spacing_wide_01,
733
1035
  linkTextDecoration: globalTokens.type_no_line,
734
- linkMarginTop: "6px",
735
- linkMarginRight: "18px",
736
- linkMarginBottom: "6px",
737
- linkMarginLeft: "18px",
1036
+ linkMarginTop: "4px",
1037
+ linkMarginBottom: "4px",
1038
+ linkMarginRight: "16px",
1039
+ linkMarginLeft: "16px",
1040
+ linkFocusColor: globalTokens.hal_blue_l_50,
738
1041
  scrollBarThumbColor: "#66666626",
739
1042
  scrollBarTrackColor: globalTokens.transparent
740
1043
  },
@@ -743,89 +1046,92 @@ var componentTokens = {
743
1046
  fontSize: globalTokens.type_scale_03,
744
1047
  fontStyle: globalTokens.type_normal,
745
1048
  fontWeight: globalTokens.type_regular,
746
- fontColor: globalTokens.black,
747
- fontColorOnDark: globalTokens.white,
1049
+ fontColor: globalTokens.hal_black,
1050
+ fontColorOnDark: globalTokens.hal_white,
1051
+ disabledFontColor: globalTokens.hal_grey_l_60,
748
1052
  fontLetterSpacing: globalTokens.type_spacing_normal,
749
- thumbHeight: "20px",
750
- thumbWidth: "20px",
751
- thumbTopPosition: "32.5%",
752
- thumbBackgroundColor: globalTokens.mediumBlue,
753
- thumbBackgroundColorOnDark: globalTokens.white,
754
- draggedThumbScale: "1",
755
- draggedThumbBackgroundColor: globalTokens.mediumBlue,
756
- draggedThumbBackgroundColorOnDark: "#0095FF",
757
- dotsHeight: "6px",
758
- dotsWidth: "6px",
759
- dotsTopPosition: "42%",
760
- dotsBackgroundColor: globalTokens.mediumBlue,
761
- dotsBackgroundColorOnDark: globalTokens.white,
1053
+ thumbHeight: "12px",
1054
+ thumbWidth: "12px",
1055
+ thumbVerticalPosition: "12px",
1056
+ thumbBackgroundColor: globalTokens.hal_blue_s_35,
1057
+ thumbBackgroundColorOnDark: globalTokens.hal_blue_l_50,
1058
+ hoverThumbScale: "1.166666",
1059
+ hoverThumbBackgroundColor: globalTokens.hal_blue_d_20,
1060
+ hoverThumbBackgroundColorOnDark: globalTokens.hal_blue_d_20,
1061
+ activeThumbScale: "1.166666",
1062
+ activeThumbBackgroundColor: globalTokens.hal_blue_d_20,
1063
+ activeThumbBackgroundColorOnDark: globalTokens.hal_blue_d_20,
1064
+ focusThumbBackgroundColor: globalTokens.hal_blue_s_35,
1065
+ focusThumbBackgroundColorOnDark: globalTokens.hal_blue_l_50,
1066
+ tickHeight: "4px",
1067
+ tickWidth: "4px",
1068
+ tickVerticalPosition: "11px",
1069
+ tickBackgroundColor: globalTokens.hal_blue_s_35,
1070
+ tickBackgroundColorOnDark: globalTokens.hal_blue_l_50,
762
1071
  trackLineThickness: "2px",
763
- trackLinePosition: "50%",
764
- trackLineColor: globalTokens.mediumBlue,
765
- trackLineOnDark: globalTokens.white,
766
- totalLineThickness: "",
767
- totalLineTopPosition: "50%",
768
- totalLineColor: globalTokens.softBlue,
769
- totalLineOnDark: globalTokens.white,
770
- disabledThumbTopPosition: "24%",
771
- disabledThumbBackgroundColor: globalTokens.softBlue,
1072
+ trackLineVerticalPosition: "50%",
1073
+ trackLineColor: globalTokens.hal_blue_s_35,
1074
+ trackLineColorOnDark: globalTokens.hal_blue_l_50,
1075
+ totalLineThickness: "2px",
1076
+ totalLineVerticalPosition: "50%",
1077
+ totalLineColor: globalTokens.hal_grey_l_90,
1078
+ totalLineColorOnDark: globalTokens.hal_grey_l_75,
1079
+ disabledThumbVerticalPosition: "10px",
1080
+ disabledThumbBackgroundColor: globalTokens.hal_grey_l_60,
772
1081
  disabledThumbBackgroundColorOnDark: "#575757",
773
- disabledDotsTopPosition: "",
774
- disabledDotsBackgroundColor: globalTokens.softBlue,
775
- disabledDotsBackgroundColorOnDark: "#575757",
776
- disabledTrackLineColor: globalTokens.softBlue,
777
- disabledTrackLineOnDark: "#575757",
778
- disabledTotalLineColor: globalTokens.softBlue,
779
- disabledTotalLineColorOnDark: "#575757",
780
- focusColor: globalTokens.blue,
781
- focusColorOnDark: "#1682FF"
1082
+ disabledTickVerticalPosition: "11px",
1083
+ disabledTickBackgroundColor: globalTokens.hal_grey_l_60,
1084
+ disabledTickBackgroundColorOnDark: globalTokens.hal_grey_l_60,
1085
+ disabledTrackLineColor: globalTokens.hal_grey_l_60,
1086
+ disabledTrackLineColorOnDark: globalTokens.hal_grey_l_60,
1087
+ disabledTotalLineColor: globalTokens.hal_grey_l_95,
1088
+ disabledTotalLineColorOnDark: globalTokens.hal_grey_s_40,
1089
+ focusColor: globalTokens.hal_blue_l_50,
1090
+ focusColorOnDark: globalTokens.hal_blue_l_50
782
1091
  },
783
1092
  spinner: {
784
- trackCircleColor: globalTokens.purple,
1093
+ trackCircleColor: "#5f249f",
1094
+ trackCircleColorOnDark: "#a46ede",
785
1095
  totalCircleColor: globalTokens.white,
786
1096
  labelFontFamily: globalTokens.type_sans,
787
- labelFontSize: globalTokens.type_scale_01,
1097
+ labelFontSize: globalTokens.type_scale_02,
788
1098
  labelFontStyle: globalTokens.type_normal,
789
1099
  labelFontWeight: globalTokens.type_regular,
790
- labelFontColor: globalTokens.inherit,
791
- labelFontTextTransform: globalTokens.type_uppercase,
792
- labelLetterSpacing: globalTokens.type_spacing_normal,
1100
+ labelFontColor: globalTokens.black,
1101
+ labelFontColorOnDark: globalTokens.white,
793
1102
  labelTextAlign: "center",
794
1103
  progressValueFontFamily: globalTokens.type_sans,
795
- progressValueFontSize: globalTokens.type_scale_01,
1104
+ progressValueFontSize: globalTokens.type_scale_02,
796
1105
  progressValueFontStyle: globalTokens.type_normal,
797
- progressValueFontWeight: globalTokens.type_regular,
1106
+ progressValueFontWeight: globalTokens.type_bold,
798
1107
  progressValueFontColor: globalTokens.inherit,
799
- progressValueLetterSpacing: globalTokens.type_spacing_normal,
1108
+ progressValueFontColorOnDark: globalTokens.white,
800
1109
  progressValueTextAlign: "center",
801
1110
  overlayBackgroundColor: globalTokens.black,
802
1111
  overlayOpacity: "0.8",
803
1112
  overlayLabelFontFamily: globalTokens.type_sans,
804
- overlayLabelFontSize: globalTokens.type_scale_01,
1113
+ overlayLabelFontSize: globalTokens.type_scale_02,
805
1114
  overlayLabelFontStyle: globalTokens.type_normal,
806
1115
  overlayLabelFontWeight: globalTokens.type_regular,
807
1116
  overlayLabelFontColor: globalTokens.white,
808
- overlayLabelFontTextTransform: globalTokens.type_uppercase,
809
- overlayLabelLetterSpacing: globalTokens.type_spacing_normal,
810
1117
  overlayLabelTextAlign: "center",
811
1118
  overlayProgressValueFontFamily: globalTokens.type_sans,
812
- overlayProgressValueFontSize: globalTokens.type_scale_01,
1119
+ overlayProgressValueFontSize: globalTokens.type_scale_02,
813
1120
  overlayProgressValueFontStyle: globalTokens.type_normal,
814
- overlayProgressValueFontWeight: globalTokens.type_regular,
1121
+ overlayProgressValueFontWeight: globalTokens.type_bold,
815
1122
  overlayProgressValueFontColor: globalTokens.white,
816
- overlayProgressValueLetterSpacing: globalTokens.type_spacing_normal,
817
1123
  overlayProgressValueTextAlign: "center"
818
1124
  },
819
1125
  "switch": {
820
- checkedTrackBackgroundColor: globalTokens.purple,
821
- checkedTrackBackgroundColorOnDark: globalTokens.purple,
1126
+ checkedTrackBackgroundColor: globalTokens.hal_purple_s_38,
1127
+ checkedTrackBackgroundColorOnDark: globalTokens.hal_purple_s_38,
822
1128
  checkedThumbBackgroundColor: globalTokens.white,
823
1129
  checkedThumbBackgroundColorOnDark: globalTokens.white,
824
1130
  uncheckedTrackBackgroundColor: globalTokens.lightGrey,
825
1131
  uncheckedTrackBackgroundColorOnDark: globalTokens.lightGrey,
826
1132
  uncheckedThumbBackgroundColor: globalTokens.white,
827
1133
  uncheckedThumbBackgroundColorOnDark: globalTokens.white,
828
- disabledCheckedTrackBackgroundColor: globalTokens.lighterPurple,
1134
+ disabledCheckedTrackBackgroundColor: globalTokens.lightPurple,
829
1135
  disabledCheckedTrackBackgroundColorOnDark: "#1c0b24",
830
1136
  disabledCheckedThumbBackgroundColor: globalTokens.white,
831
1137
  disabledCheckedThumbBackgroundColorOnDark: globalTokens.white,
@@ -842,29 +1148,36 @@ var componentTokens = {
842
1148
  labelFontWeight: globalTokens.type_regular,
843
1149
  labelFontColor: globalTokens.black,
844
1150
  labelFontColorOnDark: globalTokens.white,
845
- labelMarginRight: "0px",
846
1151
  thumbFocusColor: globalTokens.blue,
847
- thumbFocusColorOnDark: "#1489FB",
1152
+ thumbFocusColorOnDark: "#1682FF",
848
1153
  thumbHeight: "24px",
849
1154
  thumbWidth: "24px",
1155
+ thumbShift: "40%",
850
1156
  trackHeight: "12px",
851
1157
  trackWidth: "60px",
852
- thumbTranslateX: "40%"
1158
+ spaceBetweenLabelSwitch: "0px"
853
1159
  },
854
1160
  tag: {
1161
+ fontFamily: globalTokens.type_sans,
1162
+ fontColor: globalTokens.hal_black,
1163
+ fontSize: globalTokens.type_scale_02,
855
1164
  fontStyle: globalTokens.type_normal,
856
- fontTextTransform: globalTokens.type_uppercase,
857
- height: "43px",
858
- iconColor: globalTokens.white,
859
- iconSectionWidth: "48px",
1165
+ fontWeight: globalTokens.type_regular,
1166
+ labelPaddingTop: "0px",
1167
+ labelPaddingBottom: "0px",
1168
+ labelPaddingLeft: "16px",
1169
+ labelPaddingRight: "16px",
1170
+ height: "40px",
1171
+ iconColor: globalTokens.hal_white,
1172
+ iconSectionWidth: "40px",
860
1173
  iconHeight: "24px",
861
- iconWidth: "auto"
1174
+ iconWidth: "auto",
1175
+ focusColor: globalTokens.hal_blue_l_50
862
1176
  },
863
1177
  table: {
864
1178
  rowSeparatorThickness: "1px",
865
1179
  rowSeparatorStyle: "solid",
866
1180
  rowSeparatorColor: globalTokens.lightGrey,
867
- rowHeight: "48px",
868
1181
  dataBackgroundColor: globalTokens.white,
869
1182
  dataFontFamily: globalTokens.type_sans,
870
1183
  dataFontSize: globalTokens.type_scale_root,
@@ -872,8 +1185,13 @@ var componentTokens = {
872
1185
  dataFontWeight: globalTokens.type_regular,
873
1186
  dataFontColor: globalTokens.black,
874
1187
  dataFontTextTransform: "none",
1188
+ dataPaddingTop: "14px",
1189
+ dataPaddingBottom: "12px",
1190
+ dataPaddingRight: "20px",
1191
+ dataPaddingLeft: "40px",
875
1192
  dataTextAlign: "left",
876
- headerBackgroundColor: globalTokens.purple,
1193
+ dataTextLineHeight: "normal",
1194
+ headerBackgroundColor: globalTokens.hal_purple_s_38,
877
1195
  headerBorderRadius: "4px",
878
1196
  headerFontFamily: globalTokens.type_sans,
879
1197
  headerFontSize: globalTokens.type_scale_02,
@@ -881,7 +1199,12 @@ var componentTokens = {
881
1199
  headerFontWeight: globalTokens.type_regular,
882
1200
  headerFontColor: globalTokens.white,
883
1201
  headerFontTextTransform: "none",
1202
+ headerPaddingTop: "16px",
1203
+ headerPaddingBottom: "16px",
1204
+ headerPaddingRight: "20px",
1205
+ headerPaddingLeft: "40px",
884
1206
  headerTextAlign: "left",
1207
+ headerTextLineHeight: "normal",
885
1208
  scrollBarThumbColor: globalTokens.darkGrey,
886
1209
  scrollBarTrackColor: globalTokens.lightGrey,
887
1210
  sortIconColor: globalTokens.white
@@ -893,27 +1216,23 @@ var componentTokens = {
893
1216
  fontWeight: globalTokens.type_semibold,
894
1217
  fontTextTransform: "none",
895
1218
  selectedBackgroundColor: globalTokens.white,
896
- selectedFontColor: globalTokens.purple,
897
- selectedIconColor: globalTokens.purple,
898
- selectedUnderlineColor: globalTokens.purple,
899
- selectedUnderlineThickness: "",
1219
+ selectedFontColor: "#5f249f",
1220
+ selectedIconColor: "#5f249f",
1221
+ selectedUnderlineColor: "#5f249f",
1222
+ selectedUnderlineThickness: "2px",
900
1223
  unselectedBackgroundColor: globalTokens.white,
901
1224
  unselectedFontColor: globalTokens.darkGrey,
902
1225
  unselectedIconColor: globalTokens.darkGrey,
903
- disabledFontColor: globalTokens.mediumGrey,
904
- disabledIconColor: globalTokens.mediumGrey,
1226
+ disabledFontColor: "#999999",
1227
+ disabledIconColor: "#999999",
905
1228
  disabledFontStyle: globalTokens.type_normal,
906
- hoverBackgroundColor: globalTokens.lightPurple,
907
- pressedBackgroundColor: globalTokens.mediumPurple,
1229
+ hoverBackgroundColor: "#f2eafa",
1230
+ pressedBackgroundColor: "#e5d5f6",
908
1231
  pressedFontWeight: globalTokens.type_semibold,
909
1232
  dividerColor: globalTokens.mediumGrey,
910
1233
  dividerThickness: "1px",
911
- focusOutline: globalTokens.purple,
1234
+ focusOutline: "#5f249f",
912
1235
  scrollButtonsWidth: "48px",
913
- minWidth: "90px",
914
- maxWidth: "360px",
915
- minHeight: "48px",
916
- minHeightWithLabelAndIcon: "72px",
917
1236
  badgeBackgroundColor: globalTokens.darkRed,
918
1237
  badgeFontFamily: globalTokens.type_sans,
919
1238
  badgeFontSize: "10px",
@@ -923,71 +1242,118 @@ var componentTokens = {
923
1242
  badgeLetterSpacing: globalTokens.type_spacing_wide_02,
924
1243
  badgeWidth: "16px",
925
1244
  badgeHeight: "16px",
1245
+ badgeRadius: "10px",
926
1246
  badgeWidthWithNotificationNumber: "23px",
927
- badgeHeightWithNotificationNumber: "17px"
1247
+ badgeHeightWithNotificationNumber: "17px",
1248
+ badgeRadiusWithNotificationNumber: "10px"
928
1249
  },
929
1250
  textarea: {
930
- disabledFontColor: globalTokens.lighterBlack,
931
- disabledFontColorOnDark: "#575757",
932
- errorColor: globalTokens.red,
933
- errorColorOnDark: "#FE344F",
934
- assistiveTextFontFamily: globalTokens.type_sans,
1251
+ fontFamily: globalTokens.type_sans,
935
1252
  assistiveTextFontSize: globalTokens.type_scale_01,
936
1253
  assistiveTextFontStyle: globalTokens.type_normal,
937
1254
  assistiveTextFontWeight: globalTokens.type_regular,
938
1255
  assistiveTextFontColor: globalTokens.black,
939
1256
  assistiveTextFontColorOnDark: globalTokens.white,
940
- assistiveTextLetterSpacing: "",
941
- customContentFontFamily: globalTokens.type_sans,
942
- customContentFontSize: globalTokens.type_scale_03,
943
- customContentFontStyle: globalTokens.type_normal,
944
- customContentFontWeight: globalTokens.type_regular,
945
- customContentFontColor: globalTokens.black,
946
- customContentFontColorOnDark: globalTokens.white,
947
- customContentLetterSpacing: globalTokens.type_spacing_normal,
948
- customContentLineHeight: "1.1875em",
949
- labelFontFamily: globalTokens.type_sans,
1257
+ assistiveTextLetterSpacing: "0.03333em",
1258
+ disabledColor: globalTokens.lighterBlack,
1259
+ disabledColorOnDark: "#575757",
1260
+ errorColor: globalTokens.red,
1261
+ errorColorOnDark: globalTokens.hal_red_l_60,
1262
+ scrollBarThumbColor: globalTokens.darkGrey,
1263
+ scrollBarThumbColorOnDark: globalTokens.white,
1264
+ scrollBarTrackColor: globalTokens.lightGrey,
1265
+ scrollBarTrackColorOnDark: "#999999",
950
1266
  labelFontSize: globalTokens.type_scale_03,
951
1267
  labelFontStyle: globalTokens.type_normal,
952
1268
  labelFontWeight: globalTokens.type_regular,
953
1269
  labelFontColor: globalTokens.black,
954
1270
  labelFontColorOnDark: globalTokens.white,
955
- labelLetterSpacing: "",
956
- scrollBarThumbColor: globalTokens.darkGrey,
957
- scrollBarThumbColorOnDark: globalTokens.white,
958
- scrollBarTrackColor: globalTokens.lightGrey,
959
- scrollBarTrackColorOnDark: "#999999"
1271
+ labelLetterSpacing: "0.00938em",
1272
+ valueFontSize: globalTokens.type_scale_03,
1273
+ valueFontStyle: globalTokens.type_normal,
1274
+ valueFontWeight: globalTokens.type_regular,
1275
+ valueFontColor: globalTokens.black,
1276
+ valueFontColorOnDark: globalTokens.white,
1277
+ valueLetterSpacing: globalTokens.type_spacing_normal,
1278
+ valueLineHeight: "1.1875em",
1279
+ underlineColor: globalTokens.black,
1280
+ underlineColorOnDark: globalTokens.white,
1281
+ underlineFocusColor: globalTokens.black,
1282
+ underlineFocusColorOnDark: globalTokens.white,
1283
+ underlineThickness: "1px"
1284
+ },
1285
+ newTextarea: {
1286
+ fontFamily: globalTokens.type_sans,
1287
+ enabledBorderColor: globalTokens.hal_black,
1288
+ enabledBorderColorOnDark: globalTokens.hal_white,
1289
+ hoverBorderColor: globalTokens.hal_purple_l_65,
1290
+ hoverBorderColorOnDark: globalTokens.hal_purple_l_65,
1291
+ focusBorderColor: globalTokens.hal_blue_l_50,
1292
+ focusBorderColorOnDark: globalTokens.hal_blue_l_50,
1293
+ disabledBorderColor: globalTokens.hal_grey_l_60,
1294
+ disabledBorderColorOnDark: globalTokens.hal_grey_l_60,
1295
+ disabledContainerFillColor: globalTokens.hal_grey_l_95,
1296
+ disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
1297
+ errorBorderColor: globalTokens.hal_red_s_41,
1298
+ errorBorderColorOnDark: globalTokens.hal_red_l_60,
1299
+ hoverErrorBorderColor: "#fe0123",
1300
+ hoverErrorBorderColorOnDark: "#fe677b",
1301
+ errorMessageColor: globalTokens.hal_red_s_41,
1302
+ errorMessageColorOnDark: globalTokens.hal_red_l_60,
1303
+ labelFontColor: globalTokens.hal_black,
1304
+ labelFontColorOnDark: globalTokens.hal_white,
1305
+ labelFontSize: globalTokens.type_scale_02,
1306
+ labelFontStyle: globalTokens.type_normal,
1307
+ labelFontWeight: globalTokens.type_semibold,
1308
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
1309
+ disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
1310
+ optionalLabelFontWeight: globalTokens.type_regular,
1311
+ helperTextFontColor: globalTokens.hal_black,
1312
+ helperTextFontColorOnDark: globalTokens.hal_white,
1313
+ helperTextFontSize: globalTokens.type_scale_01,
1314
+ helperTextFontStyle: globalTokens.type_normal,
1315
+ helperTextFontWeight: globalTokens.type_regular,
1316
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
1317
+ disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
1318
+ placeholderFontColor: "#808080",
1319
+ placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
1320
+ disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
1321
+ disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
1322
+ valueFontColor: globalTokens.hal_black,
1323
+ valueFontColorOnDark: globalTokens.hal_white,
1324
+ valueFontSize: globalTokens.type_scale_03,
1325
+ valueFontStyle: globalTokens.type_normal,
1326
+ valueFontWeight: globalTokens.type_regular,
1327
+ disabledValueFontColor: globalTokens.hal_grey_l_60,
1328
+ disabledValueFontColorOnDark: globalTokens.hal_grey_l_60
960
1329
  },
961
1330
  toggleGroup: {
962
1331
  fontFamily: globalTokens.type_sans,
963
- fontSize: globalTokens.type_scale_02,
1332
+ fontSize: globalTokens.type_scale_03,
964
1333
  fontStyle: globalTokens.type_normal,
965
1334
  fontWeight: globalTokens.type_regular,
966
- fontTextTransform: globalTokens.type_uppercase,
967
- fontLetterSpacing: globalTokens.type_spacing_wide_02,
968
- focusColor: globalTokens.blue,
969
- selectedBackgroundColor: globalTokens.purple,
970
- selectedBackgroundHoverColor: globalTokens.black,
971
- selectedFontColor: globalTokens.white,
972
- selectedHoverFontColor: globalTokens.white,
973
- unselectedBackgroundColor: globalTokens.lightGrey,
974
- unselectedBackgroundHoverColor: globalTokens.darkWhite,
975
- unselectedFontColor: globalTokens.black,
976
- unselectedHoverFontColor: globalTokens.black,
977
- disabledSelectedBackgroundColor: globalTokens.lighterPurple,
978
- disabledSelectedFontColor: globalTokens.white,
979
- disabledUnselectedBackgroundColor: globalTokens.lightWhite,
980
- disabledUnselectedFontColor: globalTokens.lighterBlack,
981
- iconHeight: "20px",
982
- iconWidth: "20px",
983
- iconPaddingTop: "10px",
984
- iconPaddingBottom: "10px",
985
- iconPaddingRight: "12px",
986
- iconPaddingLeft: "12px",
987
- labelPaddingTop: "12px",
988
- labelPaddingBottom: "12px",
989
- labelPaddingLeft: "30px",
990
- labelPaddingRight: "30px"
1335
+ selectedBackgroundColor: globalTokens.hal_purple_s_38,
1336
+ selectedHoverBackgroundColor: globalTokens.hal_purple_d_30,
1337
+ selectedActiveBackgroundColor: globalTokens.hal_purple_d_20,
1338
+ selectedDisabledBackgroundColor: globalTokens.hal_purple_l_95,
1339
+ selectedFontColor: globalTokens.hal_white,
1340
+ selectedDisabledFontColor: "#cbacec",
1341
+ unselectedBackgroundColor: globalTokens.hal_grey_l_90,
1342
+ unselectedHoverBackgroundColor: globalTokens.hal_grey_l_80,
1343
+ unselectedActiveBackgroundColor: globalTokens.hal_purple_s_38,
1344
+ unselectedDisabledBackgroundColor: globalTokens.hal_grey_l_95,
1345
+ unselectedFontColor: globalTokens.hal_black,
1346
+ unselectedDisabledFontColor: globalTokens.hal_grey_l_60,
1347
+ iconSize: "24px",
1348
+ iconPaddingTop: "8px",
1349
+ iconPaddingBottom: "8px",
1350
+ iconPaddingRight: "8px",
1351
+ iconPaddingLeft: "8px",
1352
+ labelPaddingTop: "8px",
1353
+ labelPaddingBottom: "8px",
1354
+ labelPaddingLeft: "24px",
1355
+ labelPaddingRight: "24px",
1356
+ focusColor: globalTokens.hal_blue_l_50
991
1357
  },
992
1358
  upload: {
993
1359
  fontFamily: globalTokens.type_sans,
@@ -996,10 +1362,9 @@ var componentTokens = {
996
1362
  scrollBarTrackColor: globalTokens.lightGrey,
997
1363
  errorColor: globalTokens.red,
998
1364
  backgroundColor: globalTokens.white,
999
- draggingAreaBackgroundColor: globalTokens.lightWhite,
1365
+ draggingStateBackgroundColor: globalTokens.lightWhite,
1000
1366
  dragAndDropIconColor: globalTokens.black,
1001
- dragAndDropIconHeight: "43.5px",
1002
- dragAndDropIconWidth: "43.5px",
1367
+ dragAndDropIconSize: "43.5px",
1003
1368
  dragAndDropTitleFontSize: globalTokens.type_scale_04,
1004
1369
  dragAndDropTitleFontStyle: globalTokens.type_normal,
1005
1370
  dragAndDropTitleFontWeight: globalTokens.type_bold,
@@ -1007,29 +1372,25 @@ var componentTokens = {
1007
1372
  dragAndDropTitleFontColor: globalTokens.black,
1008
1373
  dragAndDropDescriptionFontSize: globalTokens.type_scale_03,
1009
1374
  dragAndDropDescriptionFontStyle: globalTokens.type_italic,
1010
- dragAndDropDescriptionFontWeight: globalTokens.type_normal,
1011
- dragAndDropTextDescriptionFontTextTransform: "none",
1012
- dragAndDropTextDescriptionFontColor: globalTokens.darkGrey,
1375
+ dragAndDropDescriptionFontWeight: globalTokens.type_regular,
1376
+ dragAndDropDescriptionFontTextTransform: "none",
1377
+ dragAndDropDescriptionFontColor: globalTokens.darkGrey,
1013
1378
  dragAndDropDraggingStateIconColor: globalTokens.darkGrey,
1014
- dragAndDropDraggingStateIconHeight: "74.5px",
1015
- dragAndDropDraggingStateIconWidth: "74.5px",
1379
+ dragAndDropDraggingStateIconSize: "74.5px",
1016
1380
  dragAndDropDraggingStateFontSize: globalTokens.type_scale_03,
1017
1381
  dragAndDropDraggingStateFontStyle: globalTokens.type_italic,
1018
- dragAndDropDraggingStateFontWeight: globalTokens.type_normal,
1019
- dragAndDropTextDraggingStateFontTextTransform: "none",
1020
- dragAndDropTextDraggingStateFontColor: globalTokens.darkGrey,
1382
+ dragAndDropDraggingStateFontWeight: globalTokens.type_regular,
1383
+ dragAndDropDraggingStateFontTextTransform: "none",
1384
+ dragAndDropDraggingStateFontColor: globalTokens.darkGrey,
1021
1385
  dragAndDropAreaIconColor: globalTokens.darkGrey,
1022
- dragAndDropAreaIconHeight: "24px",
1023
- dragAndDropAreaIconWidth: "24px",
1386
+ dragAndDropAreaIconSize: "24px",
1024
1387
  dragAndDropAreaTextFontSize: globalTokens.type_scale_01,
1025
1388
  dragAndDropAreaTextFontStyle: globalTokens.type_italic,
1026
1389
  dragAndDropAreaTextFontWeight: globalTokens.type_regular,
1027
1390
  dragAndDropAreaTextFontTextTransform: "none",
1028
1391
  dragAndDropAreaTextFontColor: globalTokens.darkGrey,
1029
1392
  fileDeleteIconColor: globalTokens.black,
1030
- fileDeleteIconHeight: "30px",
1031
- fileDeleteIconWidth: "30px",
1032
- fileHoverColor: globalTokens.darkWhite,
1393
+ fileDeleteIconSize: "30px",
1033
1394
  fileUnderlineColor: globalTokens.lightGrey,
1034
1395
  fileUnderlineThickness: "1px",
1035
1396
  fileNameFontSize: globalTokens.type_scale_03,
@@ -1042,20 +1403,20 @@ var componentTokens = {
1042
1403
  fileTypeFontWeight: globalTokens.type_regular,
1043
1404
  fileTypeFontTextTransform: globalTokens.type_uppercase,
1044
1405
  fileTypeFontColor: globalTokens.darkGrey,
1045
- fileUploadedIconColor: globalTokens.lightGrey,
1046
- fileUploadedIconHeight: "24px",
1047
- fileUploadedIconWidth: "24px",
1048
- filesUploadedTitleFontSize: globalTokens.type_scale_04,
1049
- filesUploadedTitleFontStyle: globalTokens.type_normal,
1050
- filesUploadedTitleFontWeight: globalTokens.type_regular,
1051
- filesUploadedTitleFontTextTransform: "none",
1052
- filesUploadedTitleFontColor: globalTokens.black,
1053
- filesUploadedSubtitleFontSize: globalTokens.type_scale_01,
1054
- filesUploadedSubtitleFontStyle: globalTokens.type_normal,
1055
- filesUploadedSubtitleFontWeight: globalTokens.type_regular,
1056
- filesUploadedSubtitleFontTextTransform: "none",
1057
- filesUploadedSubtitleFontColor: globalTokens.darkGrey,
1058
- filesUploadedNumberFontWeight: globalTokens.type_bold
1406
+ hoverFileColor: globalTokens.darkWhite,
1407
+ uploadedFileIconColor: globalTokens.lightGrey,
1408
+ uploadedFileIconSize: "24px",
1409
+ uploadedFilesTitleFontSize: globalTokens.type_scale_04,
1410
+ uploadedFilesTitleFontStyle: globalTokens.type_normal,
1411
+ uploadedFilesTitleFontWeight: globalTokens.type_regular,
1412
+ uploadedFilesTitleFontTextTransform: "none",
1413
+ uploadedFilesTitleFontColor: globalTokens.black,
1414
+ uploadedFilesSubtitleFontSize: globalTokens.type_scale_01,
1415
+ uploadedFilesSubtitleFontStyle: globalTokens.type_normal,
1416
+ uploadedFilesSubtitleFontWeight: globalTokens.type_regular,
1417
+ uploadedFilesSubtitleFontTextTransform: "none",
1418
+ uploadedFilesSubtitleFontColor: globalTokens.darkGrey,
1419
+ uploadedFilesNumberFontWeight: globalTokens.type_bold
1059
1420
  },
1060
1421
  wizard: {
1061
1422
  disabledBackgroundColor: globalTokens.lightGrey,
@@ -1067,10 +1428,9 @@ var componentTokens = {
1067
1428
  stepContainerLetterSpacing: globalTokens.type_spacing_wide_02,
1068
1429
  stepContainerFontColor: globalTokens.black,
1069
1430
  stepContainerSelectedFontColor: globalTokens.white,
1070
- stepContainerSelectedBackgroundColor: globalTokens.purple,
1431
+ stepContainerSelectedBackgroundColor: globalTokens.hal_purple_s_38,
1071
1432
  stepContainerBackgroundColor: globalTokens.white,
1072
- stepContainerIconHeight: "19px",
1073
- stepContainerIconWidth: "19px",
1433
+ stepContainerIconSize: "19px",
1074
1434
  labelFontSize: globalTokens.type_scale_03,
1075
1435
  labelFontFamily: globalTokens.type_sans,
1076
1436
  labelFontStyle: globalTokens.type_normal,
@@ -1079,7 +1439,8 @@ var componentTokens = {
1079
1439
  labelFontTextTransform: "none",
1080
1440
  labelTextAlign: "left",
1081
1441
  labelFontColor: globalTokens.darkGrey,
1082
- labelActiveFontColor: globalTokens.black,
1442
+ visitedLabelFontColor: globalTokens.black,
1443
+ visitedDescriptionFontColor: globalTokens.black,
1083
1444
  descriptionFontSize: globalTokens.type_scale_01,
1084
1445
  descriptionFontFamily: globalTokens.type_sans,
1085
1446
  descriptionFontStyle: globalTokens.type_normal,
@@ -1087,29 +1448,29 @@ var componentTokens = {
1087
1448
  descriptionLetterSpacing: globalTokens.type_spacing_wide_01,
1088
1449
  descriptionFontTextTransform: "none",
1089
1450
  descriptionFontColor: globalTokens.darkGrey,
1090
- descriptionActiveFontColor: globalTokens.black,
1091
1451
  descriptionTextAlign: "left",
1452
+ circleWidth: "32px",
1453
+ circleHeight: "32px",
1092
1454
  circleBorderThickness: "2px",
1093
1455
  circleBorderStyle: "solid",
1094
1456
  circleBorderRadius: "45px",
1095
1457
  circleBorderColor: globalTokens.black,
1096
- circleSelectedWidth: "32px",
1097
- circleSelectedHeight: "32px",
1098
- circleSelectedBorderThickness: "2px",
1099
- circleSelectedBorderStyle: "solid",
1100
- circleSelectedBorderRadius: "45px",
1101
- circleSelectedBorderColor: globalTokens.purple,
1102
- circleDisabledWidth: "32px",
1103
- circleDisabledHeight: "32px",
1104
- circleDisabledBorderThickness: "2px",
1105
- circleDisabledBorderStyle: "solid",
1106
- circleDisabledBorderRadius: "45px",
1107
- circleDisabledBorderColor: globalTokens.lightGrey,
1108
- circleWidth: "32px",
1109
- circleHeight: "32px",
1458
+ selectedCircleWidth: "32px",
1459
+ selectedCircleHeight: "32px",
1460
+ selectedCircleBorderThickness: "2px",
1461
+ selectedCircleBorderStyle: "solid",
1462
+ selectedCircleBorderRadius: "45px",
1463
+ selectedCircleBorderColor: globalTokens.purple,
1464
+ disabledCircleWidth: "32px",
1465
+ disabledCircleHeight: "32px",
1466
+ disabledCircleBorderThickness: "2px",
1467
+ disabledCircleBorderStyle: "solid",
1468
+ disabledCircleBorderRadius: "45px",
1469
+ disabledCircleBorderColor: globalTokens.lightGrey,
1110
1470
  separatorBorderThickness: "1px",
1111
1471
  separatorBorderStyle: "solid",
1112
- separatorColor: globalTokens.lightGrey
1472
+ separatorColor: globalTokens.lightGrey,
1473
+ focusColor: globalTokens.hal_blue_l_50
1113
1474
  }
1114
1475
  };
1115
1476
  exports.componentTokens = componentTokens;