@dxc-technology/halstack-react 0.0.0-4d1e793 → 0.0.0-5145b03

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 (111) hide show
  1. package/dist/ThemeContext.js +131 -99
  2. package/dist/{textarea/Textarea.js → V3Textarea/V3Textarea.js} +30 -26
  3. package/dist/accordion/Accordion.js +72 -59
  4. package/dist/accordion-group/AccordionGroup.js +1 -3
  5. package/dist/alert/Alert.js +126 -111
  6. package/dist/alert/index.d.ts +51 -0
  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 +981 -572
  13. package/dist/date/Date.js +23 -35
  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 +62 -6
  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 +141 -62
  46. package/dist/spinner/Spinner.js +225 -58
  47. package/dist/table/Table.js +6 -2
  48. package/dist/tag/Tag.js +38 -36
  49. package/dist/text-input/TextInput.js +971 -0
  50. package/dist/text-input/index.d.ts +135 -0
  51. package/dist/toggle-group/ToggleGroup.js +130 -44
  52. package/dist/upload/Upload.js +3 -3
  53. package/dist/upload/buttons-upload/ButtonsUpload.js +8 -4
  54. package/dist/upload/dragAndDropArea/DragAndDropArea.js +16 -12
  55. package/dist/upload/file-upload/FileToUpload.js +4 -4
  56. package/dist/upload/readme.md +2 -2
  57. package/dist/upload/transaction/Transaction.js +13 -9
  58. package/dist/upload/transactions/Transactions.js +11 -11
  59. package/dist/wizard/Wizard.js +84 -56
  60. package/dist/wizard/invalid_icon.svg +4 -5
  61. package/dist/wizard/valid_icon.svg +4 -5
  62. package/package.json +4 -2
  63. package/test/Date.test.js +48 -44
  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/test/Upload.test.js +5 -5
  78. package/test/{TextArea.test.js → V3TextArea.test.js} +6 -7
  79. package/dist/accordion/Accordion.stories.js +0 -207
  80. package/dist/accordion/readme.md +0 -96
  81. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  82. package/dist/accordion-group/readme.md +0 -70
  83. package/dist/alert/Alert.stories.js +0 -158
  84. package/dist/alert/close.svg +0 -4
  85. package/dist/alert/error.svg +0 -4
  86. package/dist/alert/info.svg +0 -4
  87. package/dist/alert/readme.md +0 -43
  88. package/dist/alert/success.svg +0 -4
  89. package/dist/alert/warning.svg +0 -4
  90. package/dist/button/Button.stories.js +0 -224
  91. package/dist/button/readme.md +0 -93
  92. package/dist/date/calendar.svg +0 -1
  93. package/dist/date/calendar_dark.svg +0 -1
  94. package/dist/dialog/Dialog.stories.js +0 -217
  95. package/dist/dialog/readme.md +0 -32
  96. package/dist/dropdown/Dropdown.stories.js +0 -249
  97. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  98. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  99. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  100. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  101. package/dist/dropdown/readme.md +0 -69
  102. package/dist/footer/Footer.stories.js +0 -94
  103. package/dist/footer/dxc_logo_wht.png +0 -0
  104. package/dist/header/dxc_logo_black.png +0 -0
  105. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  106. package/dist/header/dxc_logo_white.png +0 -0
  107. package/dist/input-text/InputText.stories.js +0 -209
  108. package/dist/select/Select.stories.js +0 -235
  109. package/dist/select/readme.md +0 -72
  110. package/dist/slider/Slider.stories.js +0 -241
  111. 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
- thumbVerticalPosition: "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
- dotsVerticalPosition: "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
1088
  trackLineVerticalPosition: "50%",
751
- trackLineColor: globalTokens.mediumBlue,
752
- trackLineOnDark: globalTokens.white,
753
- totalLineThickness: "",
1089
+ trackLineColor: globalTokens.hal_blue_s_35,
1090
+ trackLineColorOnDark: globalTokens.hal_blue_l_50,
1091
+ totalLineThickness: "2px",
754
1092
  totalLineVerticalPosition: "50%",
755
- totalLineColor: globalTokens.softBlue,
756
- totalLineOnDark: globalTokens.white,
757
- disabledThumbVerticalPosition: "24%",
758
- disabledThumbBackgroundColor: globalTokens.softBlue,
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
- disabledDotsVerticalPosition: "",
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,
@@ -830,7 +1168,7 @@ var componentTokens = {
830
1168
  labelFontColor: globalTokens.black,
831
1169
  labelFontColorOnDark: globalTokens.white,
832
1170
  thumbFocusColor: globalTokens.blue,
833
- thumbFocusColorOnDark: "#1489FB",
1171
+ thumbFocusColorOnDark: "#1682FF",
834
1172
  thumbHeight: "24px",
835
1173
  thumbWidth: "24px",
836
1174
  thumbShift: "40%",
@@ -839,13 +1177,21 @@ var componentTokens = {
839
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",
@@ -853,7 +1199,7 @@ var componentTokens = {
853
1199
  rowSeparatorColor: globalTokens.lightGrey,
854
1200
  dataBackgroundColor: globalTokens.white,
855
1201
  dataFontFamily: globalTokens.type_sans,
856
- dataFontSize: globalTokens.type_scale_root,
1202
+ dataFontSize: globalTokens.type_scale_02,
857
1203
  dataFontStyle: globalTokens.type_normal,
858
1204
  dataFontWeight: globalTokens.type_regular,
859
1205
  dataFontColor: globalTokens.black,
@@ -864,7 +1210,7 @@ var componentTokens = {
864
1210
  dataPaddingLeft: "40px",
865
1211
  dataTextAlign: "left",
866
1212
  dataTextLineHeight: "normal",
867
- headerBackgroundColor: globalTokens.purple,
1213
+ headerBackgroundColor: globalTokens.hal_purple_s_38,
868
1214
  headerBorderRadius: "4px",
869
1215
  headerFontFamily: globalTokens.type_sans,
870
1216
  headerFontSize: globalTokens.type_scale_02,
@@ -889,22 +1235,22 @@ var componentTokens = {
889
1235
  fontWeight: globalTokens.type_semibold,
890
1236
  fontTextTransform: "none",
891
1237
  selectedBackgroundColor: globalTokens.white,
892
- selectedFontColor: globalTokens.purple,
893
- selectedIconColor: globalTokens.purple,
894
- selectedUnderlineColor: globalTokens.purple,
895
- selectedUnderlineThickness: "",
1238
+ selectedFontColor: "#5f249f",
1239
+ selectedIconColor: "#5f249f",
1240
+ selectedUnderlineColor: "#5f249f",
1241
+ selectedUnderlineThickness: "2px",
896
1242
  unselectedBackgroundColor: globalTokens.white,
897
1243
  unselectedFontColor: globalTokens.darkGrey,
898
1244
  unselectedIconColor: globalTokens.darkGrey,
899
- disabledFontColor: globalTokens.mediumGrey,
900
- disabledIconColor: globalTokens.mediumGrey,
1245
+ disabledFontColor: "#999999",
1246
+ disabledIconColor: "#999999",
901
1247
  disabledFontStyle: globalTokens.type_normal,
902
- hoverBackgroundColor: globalTokens.lightPurple,
903
- pressedBackgroundColor: globalTokens.mediumPurple,
1248
+ hoverBackgroundColor: "#f2eafa",
1249
+ pressedBackgroundColor: "#e5d5f6",
904
1250
  pressedFontWeight: globalTokens.type_semibold,
905
1251
  dividerColor: globalTokens.mediumGrey,
906
1252
  dividerThickness: "1px",
907
- focusOutline: globalTokens.purple,
1253
+ focusOutline: "#5f249f",
908
1254
  scrollButtonsWidth: "48px",
909
1255
  badgeBackgroundColor: globalTokens.darkRed,
910
1256
  badgeFontFamily: globalTokens.type_sans,
@@ -920,67 +1266,100 @@ var componentTokens = {
920
1266
  badgeHeightWithNotificationNumber: "17px",
921
1267
  badgeRadiusWithNotificationNumber: "10px"
922
1268
  },
923
- textarea: {
924
- disabledFontColor: globalTokens.lighterBlack,
925
- disabledFontColorOnDark: "#575757",
926
- errorColor: globalTokens.red,
927
- errorColorOnDark: "#FE344F",
928
- assistiveTextFontFamily: globalTokens.type_sans,
929
- assistiveTextFontSize: globalTokens.type_scale_01,
930
- assistiveTextFontStyle: globalTokens.type_normal,
931
- assistiveTextFontWeight: globalTokens.type_regular,
932
- assistiveTextFontColor: globalTokens.black,
933
- assistiveTextFontColorOnDark: globalTokens.white,
934
- assistiveTextLetterSpacing: "",
935
- customContentFontFamily: globalTokens.type_sans,
936
- customContentFontSize: globalTokens.type_scale_03,
937
- customContentFontStyle: globalTokens.type_normal,
938
- customContentFontWeight: globalTokens.type_regular,
939
- customContentFontColor: globalTokens.black,
940
- customContentFontColorOnDark: globalTokens.white,
941
- customContentLetterSpacing: globalTokens.type_spacing_normal,
942
- customContentLineHeight: "1.1875em",
943
- labelFontFamily: globalTokens.type_sans,
944
- labelFontSize: globalTokens.type_scale_03,
1269
+ newTextarea: {
1270
+ fontFamily: globalTokens.type_sans,
1271
+ enabledBorderColor: globalTokens.hal_black,
1272
+ enabledBorderColorOnDark: globalTokens.hal_white,
1273
+ hoverBorderColor: globalTokens.hal_purple_l_65,
1274
+ hoverBorderColorOnDark: globalTokens.hal_purple_l_65,
1275
+ focusBorderColor: globalTokens.hal_blue_l_50,
1276
+ focusBorderColorOnDark: globalTokens.hal_blue_l_50,
1277
+ disabledBorderColor: globalTokens.hal_grey_l_60,
1278
+ disabledBorderColorOnDark: globalTokens.hal_grey_l_60,
1279
+ disabledContainerFillColor: globalTokens.hal_grey_l_95,
1280
+ disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
1281
+ errorBorderColor: globalTokens.hal_red_s_41,
1282
+ errorBorderColorOnDark: globalTokens.hal_red_l_60,
1283
+ hoverErrorBorderColor: "#fe0123",
1284
+ hoverErrorBorderColorOnDark: "#fe677b",
1285
+ errorMessageColor: globalTokens.hal_red_s_41,
1286
+ errorMessageColorOnDark: globalTokens.hal_red_l_60,
1287
+ labelFontColor: globalTokens.hal_black,
1288
+ labelFontColorOnDark: globalTokens.hal_white,
1289
+ labelFontSize: globalTokens.type_scale_02,
945
1290
  labelFontStyle: globalTokens.type_normal,
946
- labelFontWeight: globalTokens.type_regular,
947
- labelFontColor: globalTokens.black,
948
- labelFontColorOnDark: globalTokens.white,
949
- labelLetterSpacing: "",
950
- scrollBarThumbColor: globalTokens.darkGrey,
951
- scrollBarThumbColorOnDark: globalTokens.white,
952
- scrollBarTrackColor: globalTokens.lightGrey,
953
- scrollBarTrackColorOnDark: "#999999"
1291
+ labelFontWeight: globalTokens.type_semibold,
1292
+ labelLineHeight: globalTokens.type_leading_loose_01,
1293
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
1294
+ disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
1295
+ optionalLabelFontWeight: globalTokens.type_regular,
1296
+ helperTextFontColor: globalTokens.hal_black,
1297
+ helperTextFontColorOnDark: globalTokens.hal_white,
1298
+ helperTextFontSize: globalTokens.type_scale_01,
1299
+ helperTextFontStyle: globalTokens.type_normal,
1300
+ helperTextFontWeight: globalTokens.type_regular,
1301
+ helperTextLineHeight: globalTokens.type_leading_normal,
1302
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
1303
+ disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
1304
+ placeholderFontColor: "#808080",
1305
+ placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
1306
+ disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
1307
+ disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
1308
+ valueFontColor: globalTokens.hal_black,
1309
+ valueFontColorOnDark: globalTokens.hal_white,
1310
+ valueFontSize: globalTokens.type_scale_03,
1311
+ valueFontStyle: globalTokens.type_normal,
1312
+ valueFontWeight: globalTokens.type_regular,
1313
+ disabledValueFontColor: globalTokens.hal_grey_l_60,
1314
+ disabledValueFontColorOnDark: globalTokens.hal_grey_l_60
954
1315
  },
955
1316
  toggleGroup: {
956
- fontFamily: globalTokens.type_sans,
957
- fontSize: globalTokens.type_scale_02,
958
- fontStyle: globalTokens.type_normal,
959
- fontWeight: globalTokens.type_regular,
960
- fontTextTransform: globalTokens.type_uppercase,
961
- fontLetterSpacing: globalTokens.type_spacing_wide_02,
962
- focusColor: globalTokens.blue,
963
- selectedBackgroundColor: globalTokens.purple,
964
- selectedBackgroundHoverColor: globalTokens.black,
965
- selectedFontColor: globalTokens.white,
966
- selectedHoverFontColor: globalTokens.white,
967
- unselectedBackgroundColor: globalTokens.lightGrey,
968
- unselectedBackgroundHoverColor: globalTokens.darkWhite,
969
- unselectedFontColor: globalTokens.black,
970
- unselectedHoverFontColor: globalTokens.black,
971
- disabledSelectedBackgroundColor: globalTokens.lighterPurple,
972
- disabledSelectedFontColor: globalTokens.white,
973
- disabledUnselectedBackgroundColor: globalTokens.lightWhite,
974
- disabledUnselectedFontColor: globalTokens.lighterBlack,
975
- iconSize: "20px",
976
- iconPaddingTop: "10px",
977
- iconPaddingBottom: "10px",
978
- iconPaddingRight: "12px",
979
- iconPaddingLeft: "12px",
980
- labelPaddingTop: "12px",
981
- labelPaddingBottom: "12px",
982
- labelPaddingLeft: "30px",
983
- labelPaddingRight: "30px"
1317
+ containerBackgroundColor: globalTokens.color_grey_50,
1318
+ containerBorderColor: globalTokens.hal_grey_l_60,
1319
+ labelFontColor: globalTokens.hal_black,
1320
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
1321
+ helperTextFontColor: globalTokens.hal_black,
1322
+ disabledHelperTextFontcolor: globalTokens.hal_grey_l_60,
1323
+ unselectedBackgroundColor: globalTokens.hal_grey_l_90,
1324
+ unselectedHoverBackgroundColor: globalTokens.hal_grey_l_80,
1325
+ unselectedActiveBackgroundColor: globalTokens.hal_purple_s_38,
1326
+ unselectedDisabledBackgroundColor: globalTokens.hal_grey_l_95,
1327
+ unselectedFontColor: globalTokens.hal_black,
1328
+ unselectedDisabledFontColor: globalTokens.hal_grey_l_60,
1329
+ selectedBackgroundColor: globalTokens.hal_purple_s_38,
1330
+ selectedHoverBackgroundColor: globalTokens.hal_purple_d_30,
1331
+ selectedActiveBackgroundColor: globalTokens.hal_purple_d_20,
1332
+ selectedDisabledBackgroundColor: globalTokens.hal_purple_l_95,
1333
+ selectedFontColor: globalTokens.hal_white,
1334
+ selectedDisabledFontColor: globalTokens.color_purple_300,
1335
+ focusColor: globalTokens.hal_blue_l_50,
1336
+ labelFontFamily: globalTokens.type_sans,
1337
+ labelFontSize: globalTokens.type_scale_02,
1338
+ labelFontStyle: globalTokens.type_normal,
1339
+ labelFontWeight: globalTokens.type_semibold,
1340
+ labelLineHeight: globalTokens.type_leading_loose_01,
1341
+ helperTextFontFamily: globalTokens.type_sans,
1342
+ helperTextFontSize: globalTokens.type_scale_01,
1343
+ helperTextFontStyle: globalTokens.type_normal,
1344
+ helperTextFontWeight: globalTokens.type_regular,
1345
+ helperTextLineHeight: globalTokens.type_leading_normal,
1346
+ optionLabelFontFamily: globalTokens.type_sans,
1347
+ optionLabelFontSize: globalTokens.type_scale_03,
1348
+ optionLabelFontStyle: globalTokens.type_normal,
1349
+ optionLabelFontWeight: globalTokens.type_regular,
1350
+ iconPaddingRight: globalTokens.spacing_03,
1351
+ iconPaddingLeft: globalTokens.spacing_03,
1352
+ labelPaddingLeft: globalTokens.spacing_06,
1353
+ labelPaddingRight: globalTokens.spacing_06,
1354
+ iconMarginRight: globalTokens.spacing_03,
1355
+ containerMarginTop: globalTokens.spacing_02,
1356
+ optionBorderThickness: globalTokens.border_width_0,
1357
+ optionBorderStyle: globalTokens.border_none,
1358
+ optionBorderRadius: globalTokens.border_radius_medium,
1359
+ containerBorderThickness: globalTokens.border_width_1,
1360
+ containerBorderStyle: globalTokens.border_solid,
1361
+ containerBorderRadius: globalTokens.border_radius_large,
1362
+ optionFocusBorderThickness: globalTokens.border_width_2
984
1363
  },
985
1364
  upload: {
986
1365
  fontFamily: globalTokens.type_sans,
@@ -989,10 +1368,9 @@ var componentTokens = {
989
1368
  scrollBarTrackColor: globalTokens.lightGrey,
990
1369
  errorColor: globalTokens.red,
991
1370
  backgroundColor: globalTokens.white,
992
- draggingAreaBackgroundColor: globalTokens.lightWhite,
1371
+ draggingStateBackgroundColor: globalTokens.lightWhite,
993
1372
  dragAndDropIconColor: globalTokens.black,
994
- dragAndDropIconHeight: "43.5px",
995
- dragAndDropIconWidth: "43.5px",
1373
+ dragAndDropIconSize: "43.5px",
996
1374
  dragAndDropTitleFontSize: globalTokens.type_scale_04,
997
1375
  dragAndDropTitleFontStyle: globalTokens.type_normal,
998
1376
  dragAndDropTitleFontWeight: globalTokens.type_bold,
@@ -1000,29 +1378,25 @@ var componentTokens = {
1000
1378
  dragAndDropTitleFontColor: globalTokens.black,
1001
1379
  dragAndDropDescriptionFontSize: globalTokens.type_scale_03,
1002
1380
  dragAndDropDescriptionFontStyle: globalTokens.type_italic,
1003
- dragAndDropDescriptionFontWeight: globalTokens.type_normal,
1004
- dragAndDropTextDescriptionFontTextTransform: "none",
1005
- dragAndDropTextDescriptionFontColor: globalTokens.darkGrey,
1381
+ dragAndDropDescriptionFontWeight: globalTokens.type_regular,
1382
+ dragAndDropDescriptionFontTextTransform: "none",
1383
+ dragAndDropDescriptionFontColor: globalTokens.darkGrey,
1006
1384
  dragAndDropDraggingStateIconColor: globalTokens.darkGrey,
1007
- dragAndDropDraggingStateIconHeight: "74.5px",
1008
- dragAndDropDraggingStateIconWidth: "74.5px",
1385
+ dragAndDropDraggingStateIconSize: "74.5px",
1009
1386
  dragAndDropDraggingStateFontSize: globalTokens.type_scale_03,
1010
1387
  dragAndDropDraggingStateFontStyle: globalTokens.type_italic,
1011
- dragAndDropDraggingStateFontWeight: globalTokens.type_normal,
1012
- dragAndDropTextDraggingStateFontTextTransform: "none",
1013
- dragAndDropTextDraggingStateFontColor: globalTokens.darkGrey,
1388
+ dragAndDropDraggingStateFontWeight: globalTokens.type_regular,
1389
+ dragAndDropDraggingStateFontTextTransform: "none",
1390
+ dragAndDropDraggingStateFontColor: globalTokens.darkGrey,
1014
1391
  dragAndDropAreaIconColor: globalTokens.darkGrey,
1015
- dragAndDropAreaIconHeight: "24px",
1016
- dragAndDropAreaIconWidth: "24px",
1392
+ dragAndDropAreaIconSize: "24px",
1017
1393
  dragAndDropAreaTextFontSize: globalTokens.type_scale_01,
1018
1394
  dragAndDropAreaTextFontStyle: globalTokens.type_italic,
1019
1395
  dragAndDropAreaTextFontWeight: globalTokens.type_regular,
1020
1396
  dragAndDropAreaTextFontTextTransform: "none",
1021
1397
  dragAndDropAreaTextFontColor: globalTokens.darkGrey,
1022
1398
  fileDeleteIconColor: globalTokens.black,
1023
- fileDeleteIconHeight: "30px",
1024
- fileDeleteIconWidth: "30px",
1025
- fileHoverColor: globalTokens.darkWhite,
1399
+ fileDeleteIconSize: "30px",
1026
1400
  fileUnderlineColor: globalTokens.lightGrey,
1027
1401
  fileUnderlineThickness: "1px",
1028
1402
  fileNameFontSize: globalTokens.type_scale_03,
@@ -1035,20 +1409,55 @@ var componentTokens = {
1035
1409
  fileTypeFontWeight: globalTokens.type_regular,
1036
1410
  fileTypeFontTextTransform: globalTokens.type_uppercase,
1037
1411
  fileTypeFontColor: globalTokens.darkGrey,
1038
- fileUploadedIconColor: globalTokens.lightGrey,
1039
- fileUploadedIconHeight: "24px",
1040
- fileUploadedIconWidth: "24px",
1041
- filesUploadedTitleFontSize: globalTokens.type_scale_04,
1042
- filesUploadedTitleFontStyle: globalTokens.type_normal,
1043
- filesUploadedTitleFontWeight: globalTokens.type_regular,
1044
- filesUploadedTitleFontTextTransform: "none",
1045
- filesUploadedTitleFontColor: globalTokens.black,
1046
- filesUploadedSubtitleFontSize: globalTokens.type_scale_01,
1047
- filesUploadedSubtitleFontStyle: globalTokens.type_normal,
1048
- filesUploadedSubtitleFontWeight: globalTokens.type_regular,
1049
- filesUploadedSubtitleFontTextTransform: "none",
1050
- filesUploadedSubtitleFontColor: globalTokens.darkGrey,
1051
- filesUploadedNumberFontWeight: globalTokens.type_bold
1412
+ hoverFileColor: globalTokens.darkWhite,
1413
+ uploadedFileIconColor: globalTokens.lightGrey,
1414
+ uploadedFileIconSize: "24px",
1415
+ uploadedFilesTitleFontSize: globalTokens.type_scale_04,
1416
+ uploadedFilesTitleFontStyle: globalTokens.type_normal,
1417
+ uploadedFilesTitleFontWeight: globalTokens.type_regular,
1418
+ uploadedFilesTitleFontTextTransform: "none",
1419
+ uploadedFilesTitleFontColor: globalTokens.black,
1420
+ uploadedFilesSubtitleFontSize: globalTokens.type_scale_01,
1421
+ uploadedFilesSubtitleFontStyle: globalTokens.type_normal,
1422
+ uploadedFilesSubtitleFontWeight: globalTokens.type_regular,
1423
+ uploadedFilesSubtitleFontTextTransform: "none",
1424
+ uploadedFilesSubtitleFontColor: globalTokens.darkGrey,
1425
+ uploadedFilesNumberFontWeight: globalTokens.type_bold
1426
+ },
1427
+ V3Textarea: {
1428
+ fontFamily: globalTokens.type_sans,
1429
+ assistiveTextFontSize: globalTokens.type_scale_01,
1430
+ assistiveTextFontStyle: globalTokens.type_normal,
1431
+ assistiveTextFontWeight: globalTokens.type_regular,
1432
+ assistiveTextFontColor: globalTokens.black,
1433
+ assistiveTextFontColorOnDark: globalTokens.white,
1434
+ assistiveTextLetterSpacing: "0.03333em",
1435
+ disabledColor: globalTokens.lighterBlack,
1436
+ disabledColorOnDark: "#575757",
1437
+ errorColor: globalTokens.red,
1438
+ errorColorOnDark: globalTokens.hal_red_l_60,
1439
+ scrollBarThumbColor: globalTokens.darkGrey,
1440
+ scrollBarThumbColorOnDark: globalTokens.white,
1441
+ scrollBarTrackColor: globalTokens.lightGrey,
1442
+ scrollBarTrackColorOnDark: "#999999",
1443
+ labelFontSize: globalTokens.type_scale_03,
1444
+ labelFontStyle: globalTokens.type_normal,
1445
+ labelFontWeight: globalTokens.type_regular,
1446
+ labelFontColor: globalTokens.black,
1447
+ labelFontColorOnDark: globalTokens.white,
1448
+ labelLetterSpacing: "0.00938em",
1449
+ valueFontSize: globalTokens.type_scale_03,
1450
+ valueFontStyle: globalTokens.type_normal,
1451
+ valueFontWeight: globalTokens.type_regular,
1452
+ valueFontColor: globalTokens.black,
1453
+ valueFontColorOnDark: globalTokens.white,
1454
+ valueLetterSpacing: globalTokens.type_spacing_normal,
1455
+ valueLineHeight: "1.1875em",
1456
+ underlineColor: globalTokens.black,
1457
+ underlineColorOnDark: globalTokens.white,
1458
+ underlineFocusColor: globalTokens.black,
1459
+ underlineFocusColorOnDark: globalTokens.white,
1460
+ underlineThickness: "1px"
1052
1461
  },
1053
1462
  wizard: {
1054
1463
  disabledBackgroundColor: globalTokens.lightGrey,
@@ -1060,10 +1469,9 @@ var componentTokens = {
1060
1469
  stepContainerLetterSpacing: globalTokens.type_spacing_wide_02,
1061
1470
  stepContainerFontColor: globalTokens.black,
1062
1471
  stepContainerSelectedFontColor: globalTokens.white,
1063
- stepContainerSelectedBackgroundColor: globalTokens.purple,
1472
+ stepContainerSelectedBackgroundColor: globalTokens.hal_purple_s_38,
1064
1473
  stepContainerBackgroundColor: globalTokens.white,
1065
- stepContainerIconHeight: "19px",
1066
- stepContainerIconWidth: "19px",
1474
+ stepContainerIconSize: "19px",
1067
1475
  labelFontSize: globalTokens.type_scale_03,
1068
1476
  labelFontFamily: globalTokens.type_sans,
1069
1477
  labelFontStyle: globalTokens.type_normal,
@@ -1072,7 +1480,8 @@ var componentTokens = {
1072
1480
  labelFontTextTransform: "none",
1073
1481
  labelTextAlign: "left",
1074
1482
  labelFontColor: globalTokens.darkGrey,
1075
- labelActiveFontColor: globalTokens.black,
1483
+ visitedLabelFontColor: globalTokens.black,
1484
+ visitedDescriptionFontColor: globalTokens.black,
1076
1485
  descriptionFontSize: globalTokens.type_scale_01,
1077
1486
  descriptionFontFamily: globalTokens.type_sans,
1078
1487
  descriptionFontStyle: globalTokens.type_normal,
@@ -1080,29 +1489,29 @@ var componentTokens = {
1080
1489
  descriptionLetterSpacing: globalTokens.type_spacing_wide_01,
1081
1490
  descriptionFontTextTransform: "none",
1082
1491
  descriptionFontColor: globalTokens.darkGrey,
1083
- descriptionActiveFontColor: globalTokens.black,
1084
1492
  descriptionTextAlign: "left",
1493
+ circleWidth: "32px",
1494
+ circleHeight: "32px",
1085
1495
  circleBorderThickness: "2px",
1086
1496
  circleBorderStyle: "solid",
1087
1497
  circleBorderRadius: "45px",
1088
1498
  circleBorderColor: globalTokens.black,
1089
- circleSelectedWidth: "32px",
1090
- circleSelectedHeight: "32px",
1091
- circleSelectedBorderThickness: "2px",
1092
- circleSelectedBorderStyle: "solid",
1093
- circleSelectedBorderRadius: "45px",
1094
- circleSelectedBorderColor: globalTokens.purple,
1095
- circleDisabledWidth: "32px",
1096
- circleDisabledHeight: "32px",
1097
- circleDisabledBorderThickness: "2px",
1098
- circleDisabledBorderStyle: "solid",
1099
- circleDisabledBorderRadius: "45px",
1100
- circleDisabledBorderColor: globalTokens.lightGrey,
1101
- circleWidth: "32px",
1102
- 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,
1103
1511
  separatorBorderThickness: "1px",
1104
1512
  separatorBorderStyle: "solid",
1105
- separatorColor: globalTokens.lightGrey
1513
+ separatorColor: globalTokens.lightGrey,
1514
+ focusColor: globalTokens.hal_blue_l_50
1106
1515
  }
1107
1516
  };
1108
1517
  exports.componentTokens = componentTokens;