@dxc-technology/halstack-react 0.0.0-2dd4aed → 0.0.0-2ea264d

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 (123) hide show
  1. package/dist/ThemeContext.js +131 -99
  2. package/dist/V3Textarea/V3Textarea.js +264 -0
  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/badge/Badge.js +3 -1
  8. package/dist/box/Box.js +1 -9
  9. package/dist/button/Button.js +30 -20
  10. package/dist/card/Card.js +2 -4
  11. package/dist/checkbox/Checkbox.js +30 -21
  12. package/dist/chip/Chip.js +30 -28
  13. package/dist/common/variables.js +997 -581
  14. package/dist/date/Date.js +23 -35
  15. package/dist/date-input/DateInput.js +400 -0
  16. package/dist/date-input/index.d.ts +95 -0
  17. package/dist/dialog/Dialog.js +21 -39
  18. package/dist/dropdown/Dropdown.js +123 -71
  19. package/dist/file-input/FileInput.js +644 -0
  20. package/dist/file-input/FileItem.js +280 -0
  21. package/dist/file-input/index.d.ts +81 -0
  22. package/dist/footer/Footer.js +69 -53
  23. package/dist/footer/Icons.js +77 -0
  24. package/dist/header/Header.js +89 -86
  25. package/dist/header/Icons.js +59 -0
  26. package/dist/heading/Heading.js +1 -5
  27. package/dist/input-text/InputText.js +96 -58
  28. package/dist/layout/ApplicationLayout.js +1 -1
  29. package/dist/link/Link.js +71 -46
  30. package/dist/main.d.ts +8 -0
  31. package/dist/main.js +62 -6
  32. package/dist/new-select/NewSelect.js +836 -0
  33. package/dist/new-select/index.d.ts +53 -0
  34. package/dist/number-input/NumberInput.js +136 -0
  35. package/dist/number-input/NumberInputContext.js +16 -0
  36. package/dist/number-input/index.d.ts +113 -0
  37. package/dist/paginator/Paginator.js +10 -4
  38. package/dist/password-input/PasswordInput.js +198 -0
  39. package/dist/password-input/index.d.ts +94 -0
  40. package/dist/progress-bar/ProgressBar.js +63 -27
  41. package/dist/resultsetTable/ResultsetTable.js +5 -22
  42. package/dist/select/Select.js +189 -185
  43. package/dist/sidenav/Sidenav.js +11 -15
  44. package/dist/slider/Slider.js +145 -66
  45. package/dist/spinner/Spinner.js +226 -59
  46. package/dist/switch/Switch.js +3 -3
  47. package/dist/table/Table.js +15 -5
  48. package/dist/tabs/Tabs.js +4 -8
  49. package/dist/tag/Tag.js +38 -36
  50. package/dist/text-input/TextInput.js +971 -0
  51. package/dist/text-input/index.d.ts +135 -0
  52. package/dist/textarea/Textarea.js +233 -124
  53. package/dist/textarea/index.d.ts +117 -0
  54. package/dist/toggle-group/ToggleGroup.js +130 -44
  55. package/dist/upload/Upload.js +3 -3
  56. package/dist/upload/buttons-upload/ButtonsUpload.js +8 -4
  57. package/dist/upload/dragAndDropArea/DragAndDropArea.js +16 -12
  58. package/dist/upload/file-upload/FileToUpload.js +4 -4
  59. package/dist/upload/readme.md +2 -2
  60. package/dist/upload/transaction/Transaction.js +13 -9
  61. package/dist/upload/transactions/Transactions.js +11 -11
  62. package/dist/wizard/Wizard.js +84 -56
  63. package/dist/wizard/invalid_icon.svg +4 -5
  64. package/dist/wizard/valid_icon.svg +4 -5
  65. package/package.json +4 -2
  66. package/test/Date.test.js +48 -44
  67. package/test/DateInput.test.js +242 -0
  68. package/test/Dropdown.test.js +15 -0
  69. package/test/FileInput.test.js +201 -0
  70. package/test/Footer.test.js +2 -7
  71. package/test/Header.test.js +5 -10
  72. package/test/InputText.test.js +24 -16
  73. package/test/Link.test.js +3 -2
  74. package/test/NumberInput.test.js +259 -0
  75. package/test/Paginator.test.js +1 -1
  76. package/test/PasswordInput.test.js +83 -0
  77. package/test/ResultsetTable.test.js +1 -2
  78. package/test/Select.test.js +44 -24
  79. package/test/Spinner.test.js +5 -0
  80. package/test/TextInput.test.js +732 -0
  81. package/test/Textarea.test.js +193 -0
  82. package/test/ToggleGroup.test.js +5 -1
  83. package/test/Upload.test.js +5 -5
  84. package/test/{TextArea.test.js → V3TextArea.test.js} +6 -7
  85. package/dist/accordion/Accordion.stories.js +0 -207
  86. package/dist/accordion/readme.md +0 -96
  87. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  88. package/dist/accordion-group/readme.md +0 -70
  89. package/dist/alert/Alert.stories.js +0 -158
  90. package/dist/alert/close.svg +0 -4
  91. package/dist/alert/error.svg +0 -4
  92. package/dist/alert/info.svg +0 -4
  93. package/dist/alert/readme.md +0 -43
  94. package/dist/alert/success.svg +0 -4
  95. package/dist/alert/warning.svg +0 -4
  96. package/dist/button/Button.stories.js +0 -224
  97. package/dist/button/readme.md +0 -93
  98. package/dist/date/calendar.svg +0 -1
  99. package/dist/date/calendar_dark.svg +0 -1
  100. package/dist/dialog/Dialog.stories.js +0 -217
  101. package/dist/dialog/readme.md +0 -32
  102. package/dist/dropdown/Dropdown.stories.js +0 -249
  103. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  104. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  105. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  106. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  107. package/dist/dropdown/readme.md +0 -69
  108. package/dist/footer/Footer.stories.js +0 -94
  109. package/dist/footer/dxc_logo_wht.png +0 -0
  110. package/dist/footer/readme.md +0 -41
  111. package/dist/header/Header.stories.js +0 -176
  112. package/dist/header/close_icon.svg +0 -1
  113. package/dist/header/dxc_logo_black.png +0 -0
  114. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  115. package/dist/header/dxc_logo_white.png +0 -0
  116. package/dist/header/hamb_menu_black.svg +0 -1
  117. package/dist/header/hamb_menu_white.svg +0 -1
  118. package/dist/header/readme.md +0 -33
  119. package/dist/input-text/InputText.stories.js +0 -209
  120. package/dist/select/Select.stories.js +0 -235
  121. package/dist/select/readme.md +0 -72
  122. package/dist/slider/Slider.stories.js +0 -241
  123. 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 _Icons = require("../header/Icons");
11
11
 
12
- var _dxc_logo_wht = _interopRequireDefault(require("../footer/dxc_logo_wht.png"));
12
+ var _Icons2 = _interopRequireDefault(require("../footer/Icons"));
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: _Icons2["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: _Icons.dxcLogo,
581
+ logoResponsive: _Icons.dxcLogo,
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,70 +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
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
596
801
  },
597
802
  paginator: {
598
803
  backgroundColor: globalTokens.darkWhite,
599
- fontColor: globalTokens.black,
804
+ fontColor: globalTokens.hal_black,
600
805
  fontFamily: globalTokens.type_sans,
601
806
  fontSize: globalTokens.type_scale_02,
602
807
  fontStyle: globalTokens.type_normal,
603
808
  fontWeight: globalTokens.type_regular,
809
+ fontTextTransform: "none",
604
810
  height: "64px",
605
811
  width: "100%",
606
812
  marginRight: "40px",
@@ -613,20 +819,29 @@ var componentTokens = {
613
819
  totalItemsContainerMarginLeft: "0px"
614
820
  },
615
821
  progressBar: {
616
- trackLineColor: globalTokens.purple,
822
+ trackLineColor: globalTokens.hal_purple_s_38,
823
+ trackLineColorOnDark: globalTokens.hal_purple_l_65,
617
824
  totalLineColor: globalTokens.softGrey,
618
825
  labelFontFamily: globalTokens.type_sans,
619
826
  labelFontSize: globalTokens.type_scale_01,
620
827
  labelFontStyle: globalTokens.type_normal,
621
828
  labelFontWeight: globalTokens.type_regular,
622
829
  labelFontColor: globalTokens.black,
830
+ labelFontColorOnDark: globalTokens.hal_white,
623
831
  labelFontTextTransform: globalTokens.type_uppercase,
624
832
  valueFontFamily: globalTokens.type_sans,
625
833
  valueFontSize: globalTokens.type_scale_01,
626
834
  valueFontStyle: globalTokens.type_normal,
627
835
  valueFontWeight: globalTokens.type_regular,
628
836
  valueFontColor: globalTokens.black,
837
+ valueFontColorOnDark: globalTokens.hal_white,
629
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,
630
845
  thickness: "9px",
631
846
  borderRadius: "5px",
632
847
  overlayColor: globalTokens.black,
@@ -641,7 +856,7 @@ var componentTokens = {
641
856
  disabledColorOnDark: "#575757",
642
857
  disabledFontColor: globalTokens.lighterBlack,
643
858
  disabledFontColorOnDark: "#575757",
644
- focusColor: globalTokens.blue,
859
+ focusColor: globalTokens.hal_blue_l_50,
645
860
  focusColorOnDark: "#1682FF",
646
861
  fontColor: globalTokens.inherit,
647
862
  fontColorOnDark: globalTokens.white,
@@ -651,76 +866,179 @@ var componentTokens = {
651
866
  fontWeight: globalTokens.type_regular
652
867
  },
653
868
  select: {
654
- checkboxOptionSpacing: "12px",
655
- color: globalTokens.black,
656
- colorOnDark: globalTokens.white,
657
- disabledColor: globalTokens.lighterBlack,
658
- disabledColorOnDark: "#575757",
659
- errorColor: globalTokens.red,
660
- errorColorOnDark: "#FE344F",
661
- focusColor: globalTokens.blue,
662
- focusColorOnDark: globalTokens.blue,
663
869
  fontFamily: globalTokens.type_sans,
664
- hoveredOptionBackgroundColor: globalTokens.lightWhite,
665
- hoveredOptionBackgroundColorOnDark: globalTokens.lightWhite,
666
- iconColor: "",
667
- iconOptionSpacing: "12px",
668
- 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,
669
877
  labelFontSize: globalTokens.type_scale_03,
670
878
  labelFontStyle: globalTokens.type_normal,
671
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,
672
893
  optionPaddingBottom: "6px",
673
894
  optionPaddingTop: "6px",
674
- optionPaddingLeft: "16px",
675
- optionPaddingRight: "16px",
676
- optionsBackgroundColor: globalTokens.white,
677
- optionsBorderColor: "none",
678
- optionsBorderThickness: "0px",
679
- optionsBorderStyle: "solid",
680
- optionsFontColor: "",
681
- optionsFontSize: globalTokens.type_scale_root,
682
- optionsFontStyle: globalTokens.type_normal,
683
- optionsFontWeight: globalTokens.type_regular,
684
- scrollBarThumbColor: globalTokens.darkGrey,
895
+ scrollBarThumbColor: globalTokens.hal_grey_s_40,
685
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,
686
906
  selectedOptionBackgroundColor: globalTokens.lightGrey,
687
- 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
688
1010
  },
689
1011
  sidenav: {
690
- backgroundColor: globalTokens.lighterGrey,
691
- arrowContainerColor: globalTokens.lightGrey,
692
- arrowColor: globalTokens.black,
693
- customContentFontFamily: globalTokens.type_sans,
694
- customContentFontSize: globalTokens.type_scale_root,
695
- customContentFontStyle: globalTokens.type_normal,
696
- customContentFontWeight: globalTokens.type_regular,
697
- customContentFontColor: globalTokens.black,
1012
+ backgroundColor: globalTokens.hal_grey_l_95,
1013
+ arrowContainerColor: globalTokens.hal_grey_l_90,
1014
+ arrowColor: globalTokens.hal_black,
698
1015
  titleFontFamily: globalTokens.type_sans,
699
1016
  titleFontSize: globalTokens.type_scale_05,
700
1017
  titleFontStyle: globalTokens.type_normal,
701
1018
  titleFontWeight: globalTokens.type_regular,
702
- titleFontColor: "#000000de",
1019
+ titleFontColor: globalTokens.hal_black,
703
1020
  titleFontTextTransform: "none",
704
1021
  titleFontLetterSpacing: globalTokens.type_spacing_normal,
705
1022
  subtitleFontFamily: globalTokens.type_sans,
706
- subtitleFontSize: globalTokens.type_scale_01,
1023
+ subtitleFontSize: globalTokens.type_scale_03,
707
1024
  subtitleFontStyle: globalTokens.type_normal,
708
1025
  subtitleFontWeight: globalTokens.type_regular,
709
- subtitleFontColor: "#00000099",
1026
+ subtitleFontColor: globalTokens.color_grey_800,
710
1027
  subtitleFontTextTransform: globalTokens.type_uppercase,
711
- subtitleFontLetterSpacing: globalTokens.type_spacing_wide_03,
1028
+ subtitleFontLetterSpacing: globalTokens.type_spacing_wide_02,
712
1029
  linkFontFamily: globalTokens.type_sans,
713
1030
  linkFontSize: globalTokens.type_scale_02,
714
1031
  linkFontStyle: globalTokens.type_normal,
715
1032
  linkFontWeight: globalTokens.type_regular,
716
- linkFontColor: "#00000099",
1033
+ linkFontColor: globalTokens.color_grey_800,
717
1034
  linkFontTextTransform: "none",
718
1035
  linkFontLetterSpacing: globalTokens.type_spacing_wide_01,
719
1036
  linkTextDecoration: globalTokens.type_no_line,
720
- linkMarginTop: "6px",
721
- linkMarginRight: "18px",
722
- linkMarginBottom: "6px",
723
- linkMarginLeft: "18px",
1037
+ linkMarginTop: "4px",
1038
+ linkMarginBottom: "4px",
1039
+ linkMarginRight: "16px",
1040
+ linkMarginLeft: "16px",
1041
+ linkFocusColor: globalTokens.hal_blue_l_50,
724
1042
  scrollBarThumbColor: "#66666626",
725
1043
  scrollBarTrackColor: globalTokens.transparent
726
1044
  },
@@ -729,89 +1047,110 @@ var componentTokens = {
729
1047
  fontSize: globalTokens.type_scale_03,
730
1048
  fontStyle: globalTokens.type_normal,
731
1049
  fontWeight: globalTokens.type_regular,
732
- fontColor: globalTokens.black,
733
- 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,
734
1065
  fontLetterSpacing: globalTokens.type_spacing_normal,
735
- thumbHeight: "20px",
736
- thumbWidth: "20px",
737
- thumbTopPosition: "32.5%",
738
- thumbBackgroundColor: globalTokens.mediumBlue,
739
- thumbBackgroundColorOnDark: globalTokens.white,
740
- draggedThumbScale: "1",
741
- draggedThumbBackgroundColor: globalTokens.mediumBlue,
742
- draggedThumbBackgroundColorOnDark: "#0095FF",
743
- dotsHeight: "6px",
744
- dotsWidth: "6px",
745
- dotsTopPosition: "42%",
746
- dotsBackgroundColor: globalTokens.mediumBlue,
747
- 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,
748
1087
  trackLineThickness: "2px",
749
- trackLinePosition: "50%",
750
- trackLineColor: globalTokens.mediumBlue,
751
- trackLineOnDark: globalTokens.white,
752
- totalLineThickness: "",
753
- totalLineTopPosition: "50%",
754
- totalLineColor: globalTokens.softBlue,
755
- totalLineOnDark: globalTokens.white,
756
- disabledThumbTopPosition: "24%",
757
- disabledThumbBackgroundColor: globalTokens.softBlue,
1088
+ trackLineVerticalPosition: "50%",
1089
+ trackLineColor: globalTokens.hal_blue_s_35,
1090
+ trackLineColorOnDark: globalTokens.hal_blue_l_50,
1091
+ totalLineThickness: "2px",
1092
+ totalLineVerticalPosition: "50%",
1093
+ totalLineColor: globalTokens.hal_grey_l_90,
1094
+ totalLineColorOnDark: globalTokens.hal_grey_l_75,
1095
+ disabledThumbVerticalPosition: "10px",
1096
+ disabledThumbBackgroundColor: globalTokens.hal_grey_l_60,
758
1097
  disabledThumbBackgroundColorOnDark: "#575757",
759
- disabledDotsTopPosition: "",
760
- disabledDotsBackgroundColor: globalTokens.softBlue,
761
- disabledDotsBackgroundColorOnDark: "#575757",
762
- disabledTrackLineColor: globalTokens.softBlue,
763
- disabledTrackLineOnDark: "#575757",
764
- disabledTotalLineColor: globalTokens.softBlue,
765
- disabledTotalLineColorOnDark: "#575757",
766
- focusColor: globalTokens.blue,
767
- 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
768
1110
  },
769
1111
  spinner: {
770
- trackCircleColor: globalTokens.purple,
1112
+ trackCircleColor: "#5f249f",
1113
+ trackCircleColorOnDark: "#a46ede",
771
1114
  totalCircleColor: globalTokens.white,
772
1115
  labelFontFamily: globalTokens.type_sans,
773
- labelFontSize: globalTokens.type_scale_01,
1116
+ labelFontSize: globalTokens.type_scale_02,
774
1117
  labelFontStyle: globalTokens.type_normal,
775
1118
  labelFontWeight: globalTokens.type_regular,
776
- labelFontColor: globalTokens.inherit,
777
- labelFontTextTransform: globalTokens.type_uppercase,
778
- labelLetterSpacing: globalTokens.type_spacing_normal,
1119
+ labelFontColor: globalTokens.black,
1120
+ labelFontColorOnDark: globalTokens.white,
779
1121
  labelTextAlign: "center",
780
1122
  progressValueFontFamily: globalTokens.type_sans,
781
- progressValueFontSize: globalTokens.type_scale_01,
1123
+ progressValueFontSize: globalTokens.type_scale_02,
782
1124
  progressValueFontStyle: globalTokens.type_normal,
783
- progressValueFontWeight: globalTokens.type_regular,
1125
+ progressValueFontWeight: globalTokens.type_bold,
784
1126
  progressValueFontColor: globalTokens.inherit,
785
- progressValueLetterSpacing: globalTokens.type_spacing_normal,
1127
+ progressValueFontColorOnDark: globalTokens.white,
786
1128
  progressValueTextAlign: "center",
787
1129
  overlayBackgroundColor: globalTokens.black,
788
1130
  overlayOpacity: "0.8",
789
1131
  overlayLabelFontFamily: globalTokens.type_sans,
790
- overlayLabelFontSize: globalTokens.type_scale_01,
1132
+ overlayLabelFontSize: globalTokens.type_scale_02,
791
1133
  overlayLabelFontStyle: globalTokens.type_normal,
792
1134
  overlayLabelFontWeight: globalTokens.type_regular,
793
1135
  overlayLabelFontColor: globalTokens.white,
794
- overlayLabelFontTextTransform: globalTokens.type_uppercase,
795
- overlayLabelLetterSpacing: globalTokens.type_spacing_normal,
796
1136
  overlayLabelTextAlign: "center",
797
1137
  overlayProgressValueFontFamily: globalTokens.type_sans,
798
- overlayProgressValueFontSize: globalTokens.type_scale_01,
1138
+ overlayProgressValueFontSize: globalTokens.type_scale_02,
799
1139
  overlayProgressValueFontStyle: globalTokens.type_normal,
800
- overlayProgressValueFontWeight: globalTokens.type_regular,
1140
+ overlayProgressValueFontWeight: globalTokens.type_bold,
801
1141
  overlayProgressValueFontColor: globalTokens.white,
802
- overlayProgressValueLetterSpacing: globalTokens.type_spacing_normal,
803
1142
  overlayProgressValueTextAlign: "center"
804
1143
  },
805
1144
  "switch": {
806
- checkedTrackBackgroundColor: globalTokens.purple,
807
- checkedTrackBackgroundColorOnDark: globalTokens.purple,
1145
+ checkedTrackBackgroundColor: globalTokens.hal_purple_s_38,
1146
+ checkedTrackBackgroundColorOnDark: globalTokens.hal_purple_s_38,
808
1147
  checkedThumbBackgroundColor: globalTokens.white,
809
1148
  checkedThumbBackgroundColorOnDark: globalTokens.white,
810
1149
  uncheckedTrackBackgroundColor: globalTokens.lightGrey,
811
1150
  uncheckedTrackBackgroundColorOnDark: globalTokens.lightGrey,
812
1151
  uncheckedThumbBackgroundColor: globalTokens.white,
813
1152
  uncheckedThumbBackgroundColorOnDark: globalTokens.white,
814
- disabledCheckedTrackBackgroundColor: globalTokens.lighterPurple,
1153
+ disabledCheckedTrackBackgroundColor: globalTokens.lightPurple,
815
1154
  disabledCheckedTrackBackgroundColorOnDark: "#1c0b24",
816
1155
  disabledCheckedThumbBackgroundColor: globalTokens.white,
817
1156
  disabledCheckedThumbBackgroundColorOnDark: globalTokens.white,
@@ -828,38 +1167,50 @@ var componentTokens = {
828
1167
  labelFontWeight: globalTokens.type_regular,
829
1168
  labelFontColor: globalTokens.black,
830
1169
  labelFontColorOnDark: globalTokens.white,
831
- labelMarginRight: "0px",
832
1170
  thumbFocusColor: globalTokens.blue,
833
- thumbFocusColorOnDark: "#1489FB",
1171
+ thumbFocusColorOnDark: "#1682FF",
834
1172
  thumbHeight: "24px",
835
1173
  thumbWidth: "24px",
1174
+ thumbShift: "40%",
836
1175
  trackHeight: "12px",
837
1176
  trackWidth: "60px",
838
- thumbTranslateX: "40%"
1177
+ spaceBetweenLabelSwitch: "0px"
839
1178
  },
840
1179
  tag: {
1180
+ fontFamily: globalTokens.type_sans,
1181
+ fontColor: globalTokens.hal_black,
1182
+ fontSize: globalTokens.type_scale_02,
841
1183
  fontStyle: globalTokens.type_normal,
842
- fontTextTransform: globalTokens.type_uppercase,
843
- height: "43px",
844
- iconColor: globalTokens.white,
845
- 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",
846
1192
  iconHeight: "24px",
847
- iconWidth: "auto"
1193
+ iconWidth: "auto",
1194
+ focusColor: globalTokens.hal_blue_l_50
848
1195
  },
849
1196
  table: {
850
1197
  rowSeparatorThickness: "1px",
851
1198
  rowSeparatorStyle: "solid",
852
1199
  rowSeparatorColor: globalTokens.lightGrey,
853
- rowHeight: "48px",
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,
860
1206
  dataFontTextTransform: "none",
1207
+ dataPaddingTop: "14px",
1208
+ dataPaddingBottom: "12px",
1209
+ dataPaddingRight: "20px",
1210
+ dataPaddingLeft: "40px",
861
1211
  dataTextAlign: "left",
862
- headerBackgroundColor: globalTokens.purple,
1212
+ dataTextLineHeight: "normal",
1213
+ headerBackgroundColor: globalTokens.hal_purple_s_38,
863
1214
  headerBorderRadius: "4px",
864
1215
  headerFontFamily: globalTokens.type_sans,
865
1216
  headerFontSize: globalTokens.type_scale_02,
@@ -867,7 +1218,12 @@ var componentTokens = {
867
1218
  headerFontWeight: globalTokens.type_regular,
868
1219
  headerFontColor: globalTokens.white,
869
1220
  headerFontTextTransform: "none",
1221
+ headerPaddingTop: "16px",
1222
+ headerPaddingBottom: "16px",
1223
+ headerPaddingRight: "20px",
1224
+ headerPaddingLeft: "40px",
870
1225
  headerTextAlign: "left",
1226
+ headerTextLineHeight: "normal",
871
1227
  scrollBarThumbColor: globalTokens.darkGrey,
872
1228
  scrollBarTrackColor: globalTokens.lightGrey,
873
1229
  sortIconColor: globalTokens.white
@@ -879,27 +1235,23 @@ var componentTokens = {
879
1235
  fontWeight: globalTokens.type_semibold,
880
1236
  fontTextTransform: "none",
881
1237
  selectedBackgroundColor: globalTokens.white,
882
- selectedFontColor: globalTokens.purple,
883
- selectedIconColor: globalTokens.purple,
884
- selectedUnderlineColor: globalTokens.purple,
885
- selectedUnderlineThickness: "",
1238
+ selectedFontColor: "#5f249f",
1239
+ selectedIconColor: "#5f249f",
1240
+ selectedUnderlineColor: "#5f249f",
1241
+ selectedUnderlineThickness: "2px",
886
1242
  unselectedBackgroundColor: globalTokens.white,
887
1243
  unselectedFontColor: globalTokens.darkGrey,
888
1244
  unselectedIconColor: globalTokens.darkGrey,
889
- disabledFontColor: globalTokens.mediumGrey,
890
- disabledIconColor: globalTokens.mediumGrey,
1245
+ disabledFontColor: "#999999",
1246
+ disabledIconColor: "#999999",
891
1247
  disabledFontStyle: globalTokens.type_normal,
892
- hoverBackgroundColor: globalTokens.lightPurple,
893
- pressedBackgroundColor: globalTokens.mediumPurple,
1248
+ hoverBackgroundColor: "#f2eafa",
1249
+ pressedBackgroundColor: "#e5d5f6",
894
1250
  pressedFontWeight: globalTokens.type_semibold,
895
1251
  dividerColor: globalTokens.mediumGrey,
896
1252
  dividerThickness: "1px",
897
- focusOutline: globalTokens.purple,
1253
+ focusOutline: "#5f249f",
898
1254
  scrollButtonsWidth: "48px",
899
- minWidth: "90px",
900
- maxWidth: "360px",
901
- minHeight: "48px",
902
- minHeightWithLabelAndIcon: "72px",
903
1255
  badgeBackgroundColor: globalTokens.darkRed,
904
1256
  badgeFontFamily: globalTokens.type_sans,
905
1257
  badgeFontSize: "10px",
@@ -909,71 +1261,105 @@ var componentTokens = {
909
1261
  badgeLetterSpacing: globalTokens.type_spacing_wide_02,
910
1262
  badgeWidth: "16px",
911
1263
  badgeHeight: "16px",
1264
+ badgeRadius: "10px",
912
1265
  badgeWidthWithNotificationNumber: "23px",
913
- badgeHeightWithNotificationNumber: "17px"
1266
+ badgeHeightWithNotificationNumber: "17px",
1267
+ badgeRadiusWithNotificationNumber: "10px"
914
1268
  },
915
1269
  textarea: {
916
- disabledFontColor: globalTokens.lighterBlack,
917
- disabledFontColorOnDark: "#575757",
918
- errorColor: globalTokens.red,
919
- errorColorOnDark: "#FE344F",
920
- assistiveTextFontFamily: globalTokens.type_sans,
921
- assistiveTextFontSize: globalTokens.type_scale_01,
922
- assistiveTextFontStyle: globalTokens.type_normal,
923
- assistiveTextFontWeight: globalTokens.type_regular,
924
- assistiveTextFontColor: globalTokens.black,
925
- assistiveTextFontColorOnDark: globalTokens.white,
926
- assistiveTextLetterSpacing: "",
927
- customContentFontFamily: globalTokens.type_sans,
928
- customContentFontSize: globalTokens.type_scale_03,
929
- customContentFontStyle: globalTokens.type_normal,
930
- customContentFontWeight: globalTokens.type_regular,
931
- customContentFontColor: globalTokens.black,
932
- customContentFontColorOnDark: globalTokens.white,
933
- customContentLetterSpacing: globalTokens.type_spacing_normal,
934
- customContentLineHeight: "1.1875em",
935
- labelFontFamily: globalTokens.type_sans,
936
- labelFontSize: globalTokens.type_scale_03,
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,
937
1290
  labelFontStyle: globalTokens.type_normal,
938
- labelFontWeight: globalTokens.type_regular,
939
- labelFontColor: globalTokens.black,
940
- labelFontColorOnDark: globalTokens.white,
941
- labelLetterSpacing: "",
942
- scrollBarThumbColor: globalTokens.darkGrey,
943
- scrollBarThumbColorOnDark: globalTokens.white,
944
- scrollBarTrackColor: globalTokens.lightGrey,
945
- 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
946
1315
  },
947
1316
  toggleGroup: {
948
- fontFamily: globalTokens.type_sans,
949
- fontSize: globalTokens.type_scale_02,
950
- fontStyle: globalTokens.type_normal,
951
- fontWeight: globalTokens.type_regular,
952
- fontTextTransform: globalTokens.type_uppercase,
953
- fontLetterSpacing: globalTokens.type_spacing_wide_02,
954
- focusColor: globalTokens.blue,
955
- selectedBackgroundColor: globalTokens.purple,
956
- selectedBackgroundHoverColor: globalTokens.black,
957
- selectedFontColor: globalTokens.white,
958
- selectedHoverFontColor: globalTokens.white,
959
- unselectedBackgroundColor: globalTokens.lightGrey,
960
- unselectedBackgroundHoverColor: globalTokens.darkWhite,
961
- unselectedFontColor: globalTokens.black,
962
- unselectedHoverFontColor: globalTokens.black,
963
- disabledSelectedBackgroundColor: globalTokens.lighterPurple,
964
- disabledSelectedFontColor: globalTokens.white,
965
- disabledUnselectedBackgroundColor: globalTokens.lightWhite,
966
- disabledUnselectedFontColor: globalTokens.lighterBlack,
967
- iconHeight: "20px",
968
- iconWidth: "20px",
969
- iconPaddingTop: "10px",
970
- iconPaddingBottom: "10px",
971
- iconPaddingRight: "12px",
972
- iconPaddingLeft: "12px",
973
- labelPaddingTop: "12px",
974
- labelPaddingBottom: "12px",
975
- labelPaddingLeft: "30px",
976
- 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
977
1363
  },
978
1364
  upload: {
979
1365
  fontFamily: globalTokens.type_sans,
@@ -982,10 +1368,9 @@ var componentTokens = {
982
1368
  scrollBarTrackColor: globalTokens.lightGrey,
983
1369
  errorColor: globalTokens.red,
984
1370
  backgroundColor: globalTokens.white,
985
- draggingAreaBackgroundColor: globalTokens.lightWhite,
1371
+ draggingStateBackgroundColor: globalTokens.lightWhite,
986
1372
  dragAndDropIconColor: globalTokens.black,
987
- dragAndDropIconHeight: "43.5px",
988
- dragAndDropIconWidth: "43.5px",
1373
+ dragAndDropIconSize: "43.5px",
989
1374
  dragAndDropTitleFontSize: globalTokens.type_scale_04,
990
1375
  dragAndDropTitleFontStyle: globalTokens.type_normal,
991
1376
  dragAndDropTitleFontWeight: globalTokens.type_bold,
@@ -993,29 +1378,25 @@ var componentTokens = {
993
1378
  dragAndDropTitleFontColor: globalTokens.black,
994
1379
  dragAndDropDescriptionFontSize: globalTokens.type_scale_03,
995
1380
  dragAndDropDescriptionFontStyle: globalTokens.type_italic,
996
- dragAndDropDescriptionFontWeight: globalTokens.type_normal,
997
- dragAndDropTextDescriptionFontTextTransform: "none",
998
- dragAndDropTextDescriptionFontColor: globalTokens.darkGrey,
1381
+ dragAndDropDescriptionFontWeight: globalTokens.type_regular,
1382
+ dragAndDropDescriptionFontTextTransform: "none",
1383
+ dragAndDropDescriptionFontColor: globalTokens.darkGrey,
999
1384
  dragAndDropDraggingStateIconColor: globalTokens.darkGrey,
1000
- dragAndDropDraggingStateIconHeight: "74.5px",
1001
- dragAndDropDraggingStateIconWidth: "74.5px",
1385
+ dragAndDropDraggingStateIconSize: "74.5px",
1002
1386
  dragAndDropDraggingStateFontSize: globalTokens.type_scale_03,
1003
1387
  dragAndDropDraggingStateFontStyle: globalTokens.type_italic,
1004
- dragAndDropDraggingStateFontWeight: globalTokens.type_normal,
1005
- dragAndDropTextDraggingStateFontTextTransform: "none",
1006
- dragAndDropTextDraggingStateFontColor: globalTokens.darkGrey,
1388
+ dragAndDropDraggingStateFontWeight: globalTokens.type_regular,
1389
+ dragAndDropDraggingStateFontTextTransform: "none",
1390
+ dragAndDropDraggingStateFontColor: globalTokens.darkGrey,
1007
1391
  dragAndDropAreaIconColor: globalTokens.darkGrey,
1008
- dragAndDropAreaIconHeight: "24px",
1009
- dragAndDropAreaIconWidth: "24px",
1392
+ dragAndDropAreaIconSize: "24px",
1010
1393
  dragAndDropAreaTextFontSize: globalTokens.type_scale_01,
1011
1394
  dragAndDropAreaTextFontStyle: globalTokens.type_italic,
1012
1395
  dragAndDropAreaTextFontWeight: globalTokens.type_regular,
1013
1396
  dragAndDropAreaTextFontTextTransform: "none",
1014
1397
  dragAndDropAreaTextFontColor: globalTokens.darkGrey,
1015
1398
  fileDeleteIconColor: globalTokens.black,
1016
- fileDeleteIconHeight: "30px",
1017
- fileDeleteIconWidth: "30px",
1018
- fileHoverColor: globalTokens.darkWhite,
1399
+ fileDeleteIconSize: "30px",
1019
1400
  fileUnderlineColor: globalTokens.lightGrey,
1020
1401
  fileUnderlineThickness: "1px",
1021
1402
  fileNameFontSize: globalTokens.type_scale_03,
@@ -1028,20 +1409,55 @@ var componentTokens = {
1028
1409
  fileTypeFontWeight: globalTokens.type_regular,
1029
1410
  fileTypeFontTextTransform: globalTokens.type_uppercase,
1030
1411
  fileTypeFontColor: globalTokens.darkGrey,
1031
- fileUploadedIconColor: globalTokens.lightGrey,
1032
- fileUploadedIconHeight: "24px",
1033
- fileUploadedIconWidth: "24px",
1034
- filesUploadedTitleFontSize: globalTokens.type_scale_04,
1035
- filesUploadedTitleFontStyle: globalTokens.type_normal,
1036
- filesUploadedTitleFontWeight: globalTokens.type_regular,
1037
- filesUploadedTitleFontTextTransform: "none",
1038
- filesUploadedTitleFontColor: globalTokens.black,
1039
- filesUploadedSubtitleFontSize: globalTokens.type_scale_01,
1040
- filesUploadedSubtitleFontStyle: globalTokens.type_normal,
1041
- filesUploadedSubtitleFontWeight: globalTokens.type_regular,
1042
- filesUploadedSubtitleFontTextTransform: "none",
1043
- filesUploadedSubtitleFontColor: globalTokens.darkGrey,
1044
- 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"
1045
1461
  },
1046
1462
  wizard: {
1047
1463
  disabledBackgroundColor: globalTokens.lightGrey,
@@ -1053,10 +1469,9 @@ var componentTokens = {
1053
1469
  stepContainerLetterSpacing: globalTokens.type_spacing_wide_02,
1054
1470
  stepContainerFontColor: globalTokens.black,
1055
1471
  stepContainerSelectedFontColor: globalTokens.white,
1056
- stepContainerSelectedBackgroundColor: globalTokens.purple,
1472
+ stepContainerSelectedBackgroundColor: globalTokens.hal_purple_s_38,
1057
1473
  stepContainerBackgroundColor: globalTokens.white,
1058
- stepContainerIconHeight: "19px",
1059
- stepContainerIconWidth: "19px",
1474
+ stepContainerIconSize: "19px",
1060
1475
  labelFontSize: globalTokens.type_scale_03,
1061
1476
  labelFontFamily: globalTokens.type_sans,
1062
1477
  labelFontStyle: globalTokens.type_normal,
@@ -1065,7 +1480,8 @@ var componentTokens = {
1065
1480
  labelFontTextTransform: "none",
1066
1481
  labelTextAlign: "left",
1067
1482
  labelFontColor: globalTokens.darkGrey,
1068
- labelActiveFontColor: globalTokens.black,
1483
+ visitedLabelFontColor: globalTokens.black,
1484
+ visitedDescriptionFontColor: globalTokens.black,
1069
1485
  descriptionFontSize: globalTokens.type_scale_01,
1070
1486
  descriptionFontFamily: globalTokens.type_sans,
1071
1487
  descriptionFontStyle: globalTokens.type_normal,
@@ -1073,29 +1489,29 @@ var componentTokens = {
1073
1489
  descriptionLetterSpacing: globalTokens.type_spacing_wide_01,
1074
1490
  descriptionFontTextTransform: "none",
1075
1491
  descriptionFontColor: globalTokens.darkGrey,
1076
- descriptionActiveFontColor: globalTokens.black,
1077
1492
  descriptionTextAlign: "left",
1493
+ circleWidth: "32px",
1494
+ circleHeight: "32px",
1078
1495
  circleBorderThickness: "2px",
1079
1496
  circleBorderStyle: "solid",
1080
1497
  circleBorderRadius: "45px",
1081
1498
  circleBorderColor: globalTokens.black,
1082
- circleSelectedWidth: "32px",
1083
- circleSelectedHeight: "32px",
1084
- circleSelectedBorderThickness: "2px",
1085
- circleSelectedBorderStyle: "solid",
1086
- circleSelectedBorderRadius: "45px",
1087
- circleSelectedBorderColor: globalTokens.purple,
1088
- circleDisabledWidth: "32px",
1089
- circleDisabledHeight: "32px",
1090
- circleDisabledBorderThickness: "2px",
1091
- circleDisabledBorderStyle: "solid",
1092
- circleDisabledBorderRadius: "45px",
1093
- circleDisabledBorderColor: globalTokens.lightGrey,
1094
- circleWidth: "32px",
1095
- 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,
1096
1511
  separatorBorderThickness: "1px",
1097
1512
  separatorBorderStyle: "solid",
1098
- separatorColor: globalTokens.lightGrey
1513
+ separatorColor: globalTokens.lightGrey,
1514
+ focusColor: globalTokens.hal_blue_l_50
1099
1515
  }
1100
1516
  };
1101
1517
  exports.componentTokens = componentTokens;