@dxc-technology/halstack-react 0.0.0-89339f9 → 0.0.0-8c3739a

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