@dxc-technology/halstack-react 0.0.0-11cad3f → 0.0.0-12908ef

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 (179) hide show
  1. package/dist/ThemeContext.js +133 -99
  2. package/dist/V3Textarea/V3Textarea.js +264 -0
  3. package/dist/accordion/Accordion.js +66 -59
  4. package/dist/accordion-group/AccordionGroup.js +1 -3
  5. package/dist/alert/Alert.js +126 -111
  6. package/dist/alert/index.d.ts +51 -0
  7. package/dist/box/Box.js +1 -9
  8. package/dist/button/Button.js +33 -27
  9. package/dist/checkbox/Checkbox.js +23 -17
  10. package/dist/chip/Chip.js +21 -25
  11. package/dist/common/variables.js +964 -551
  12. package/dist/date/Date.js +13 -15
  13. package/dist/date-input/DateInput.js +400 -0
  14. package/dist/date-input/index.d.ts +95 -0
  15. package/dist/dialog/Dialog.js +15 -32
  16. package/dist/dropdown/Dropdown.js +118 -69
  17. package/dist/file-input/FileInput.js +644 -0
  18. package/dist/file-input/FileItem.js +280 -0
  19. package/dist/file-input/index.d.ts +81 -0
  20. package/dist/footer/Footer.js +69 -53
  21. package/dist/footer/Icons.js +77 -0
  22. package/dist/header/Header.js +123 -84
  23. package/dist/header/Icons.js +59 -0
  24. package/dist/heading/Heading.js +13 -5
  25. package/dist/input-text/Icons.js +22 -0
  26. package/dist/input-text/InputText.js +97 -61
  27. package/dist/layout/ApplicationLayout.js +5 -9
  28. package/dist/layout/Icons.js +55 -0
  29. package/dist/link/Link.js +4 -8
  30. package/dist/main.d.ts +8 -0
  31. package/dist/main.js +62 -14
  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/Icons.js +66 -0
  38. package/dist/paginator/Paginator.js +14 -14
  39. package/dist/password-input/PasswordInput.js +198 -0
  40. package/dist/password-input/index.d.ts +94 -0
  41. package/dist/progress-bar/ProgressBar.js +63 -27
  42. package/dist/select/Select.js +171 -185
  43. package/dist/sidenav/Sidenav.js +11 -15
  44. package/dist/slider/Slider.js +155 -66
  45. package/dist/spinner/Spinner.js +225 -58
  46. package/dist/table/Table.js +5 -1
  47. package/dist/tag/Tag.js +38 -36
  48. package/dist/text-input/TextInput.js +971 -0
  49. package/dist/text-input/index.d.ts +135 -0
  50. package/dist/textarea/Textarea.js +233 -124
  51. package/dist/textarea/index.d.ts +117 -0
  52. package/dist/toggle-group/ToggleGroup.js +130 -44
  53. package/dist/upload/Upload.js +3 -3
  54. package/dist/upload/buttons-upload/ButtonsUpload.js +12 -12
  55. package/dist/upload/buttons-upload/Icons.js +40 -0
  56. package/dist/upload/dragAndDropArea/DragAndDropArea.js +23 -19
  57. package/dist/upload/dragAndDropArea/Icons.js +39 -0
  58. package/dist/upload/file-upload/FileToUpload.js +27 -22
  59. package/dist/upload/file-upload/Icons.js +66 -0
  60. package/dist/upload/transaction/Icons.js +160 -0
  61. package/dist/upload/transaction/Transaction.js +18 -41
  62. package/dist/upload/transactions/Transactions.js +11 -11
  63. package/dist/wizard/Icons.js +65 -0
  64. package/dist/wizard/Wizard.js +11 -17
  65. package/package.json +8 -10
  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/Heading.test.js +60 -12
  73. package/test/InputText.test.js +24 -16
  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/Slider.test.js +9 -17
  80. package/test/Spinner.test.js +5 -0
  81. package/test/TextInput.test.js +732 -0
  82. package/test/Textarea.test.js +193 -0
  83. package/test/ToggleGroup.test.js +5 -1
  84. package/test/Upload.test.js +5 -5
  85. package/test/{TextArea.test.js → V3TextArea.test.js} +6 -7
  86. package/dist/accordion/Accordion.stories.js +0 -207
  87. package/dist/accordion/readme.md +0 -96
  88. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  89. package/dist/accordion-group/readme.md +0 -70
  90. package/dist/alert/Alert.stories.js +0 -158
  91. package/dist/alert/close.svg +0 -4
  92. package/dist/alert/error.svg +0 -4
  93. package/dist/alert/info.svg +0 -4
  94. package/dist/alert/readme.md +0 -43
  95. package/dist/alert/success.svg +0 -4
  96. package/dist/alert/warning.svg +0 -4
  97. package/dist/button/Button.stories.js +0 -224
  98. package/dist/button/readme.md +0 -93
  99. package/dist/checkbox/Checkbox.stories.js +0 -144
  100. package/dist/checkbox/readme.md +0 -116
  101. package/dist/date/Date.stories.js +0 -205
  102. package/dist/date/readme.md +0 -73
  103. package/dist/dialog/Dialog.stories.js +0 -217
  104. package/dist/dialog/readme.md +0 -32
  105. package/dist/dropdown/Dropdown.stories.js +0 -249
  106. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  107. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  108. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  109. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  110. package/dist/dropdown/readme.md +0 -69
  111. package/dist/footer/Footer.stories.js +0 -94
  112. package/dist/footer/dxc_logo_wht.png +0 -0
  113. package/dist/footer/readme.md +0 -41
  114. package/dist/header/Header.stories.js +0 -176
  115. package/dist/header/close_icon.svg +0 -1
  116. package/dist/header/dxc_logo_black.png +0 -0
  117. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  118. package/dist/header/dxc_logo_white.png +0 -0
  119. package/dist/header/hamb_menu_black.svg +0 -1
  120. package/dist/header/hamb_menu_white.svg +0 -1
  121. package/dist/header/readme.md +0 -33
  122. package/dist/input-text/InputText.stories.js +0 -209
  123. package/dist/input-text/error.svg +0 -1
  124. package/dist/input-text/readme.md +0 -91
  125. package/dist/layout/facebook.svg +0 -45
  126. package/dist/layout/linkedin.svg +0 -50
  127. package/dist/layout/twitter.svg +0 -53
  128. package/dist/link/readme.md +0 -51
  129. package/dist/paginator/images/next.svg +0 -3
  130. package/dist/paginator/images/nextPage.svg +0 -3
  131. package/dist/paginator/images/previous.svg +0 -3
  132. package/dist/paginator/images/previousPage.svg +0 -3
  133. package/dist/paginator/readme.md +0 -50
  134. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  135. package/dist/progress-bar/readme.md +0 -63
  136. package/dist/radio/Radio.stories.js +0 -166
  137. package/dist/radio/readme.md +0 -70
  138. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  139. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  140. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  141. package/dist/select/Select.stories.js +0 -235
  142. package/dist/select/readme.md +0 -72
  143. package/dist/slider/Slider.stories.js +0 -241
  144. package/dist/slider/readme.md +0 -64
  145. package/dist/spinner/Spinner.stories.js +0 -183
  146. package/dist/spinner/readme.md +0 -65
  147. package/dist/switch/Switch.stories.js +0 -134
  148. package/dist/switch/readme.md +0 -133
  149. package/dist/tabs/Tabs.stories.js +0 -130
  150. package/dist/tabs/readme.md +0 -78
  151. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  152. package/dist/tabs-for-sections/readme.md +0 -78
  153. package/dist/toggle/Toggle.stories.js +0 -297
  154. package/dist/toggle/readme.md +0 -80
  155. package/dist/toggle-group/readme.md +0 -82
  156. package/dist/upload/Upload.stories.js +0 -72
  157. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  158. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  159. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  160. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  161. package/dist/upload/file-upload/audio-icon.svg +0 -4
  162. package/dist/upload/file-upload/close.svg +0 -4
  163. package/dist/upload/file-upload/file-icon.svg +0 -4
  164. package/dist/upload/file-upload/video-icon.svg +0 -4
  165. package/dist/upload/readme.md +0 -37
  166. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  167. package/dist/upload/transaction/audio-icon.svg +0 -4
  168. package/dist/upload/transaction/error-icon.svg +0 -4
  169. package/dist/upload/transaction/file-icon-err.svg +0 -4
  170. package/dist/upload/transaction/file-icon.svg +0 -4
  171. package/dist/upload/transaction/image-icon-err.svg +0 -4
  172. package/dist/upload/transaction/image-icon.svg +0 -4
  173. package/dist/upload/transaction/success-icon.svg +0 -4
  174. package/dist/upload/transaction/video-icon-err.svg +0 -4
  175. package/dist/upload/transaction/video-icon.svg +0 -4
  176. package/dist/wizard/invalid_icon.svg +0 -5
  177. package/dist/wizard/valid_icon.svg +0 -5
  178. package/dist/wizard/validation-wrong.svg +0 -6
  179. package/test/TabsForSections.test.js +0 -34
@@ -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,272 +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: "#FFFFFF",
187
- primaryFontColorOnDark: "#FFFFFF",
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_03,
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: "1px",
225
- secondaryBorderStyle: "solid",
226
- secondaryBorderRadius: "4px",
227
- secondaryFontFamily: globalTokens.type_sans,
228
- secondaryFontSize: globalTokens.type_scale_03,
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_03,
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
- iconSize: "20px",
260
- height: "40px"
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"
261
249
  },
262
250
  box: {
263
251
  backgroundColor: globalTokens.white,
264
- fontFamily: globalTokens.type_sans,
265
- fontSize: globalTokens.type_scale_02,
266
- fontWeight: globalTokens.type_regular,
267
- fontColor: globalTokens.black,
268
252
  letterSpacing: globalTokens.type_spacing_wide_01,
269
253
  borderRadius: "4px",
270
254
  borderThickness: "0px",
271
255
  borderStyle: "none",
272
- borderColor: "transparent",
256
+ borderColor: globalTokens.transparent,
273
257
  noneShadowDepthShadowOffsetX: "none",
274
258
  noneShadowDepthShadowOffsetY: "none",
275
259
  noneShadowDepthShadowBlur: "none",
276
260
  noneShadowDepthShadowSpread: "none",
277
- noneShadowDepthShadowColor: "transparent",
261
+ noneShadowDepthShadowColor: globalTokens.transparent,
278
262
  oneShadowDepthShadowOffsetX: "0px",
279
- oneShadowDepthShadowOffsetY: "2px",
280
- oneShadowDepthShadowBlur: "1px",
281
- oneShadowDepthShadowSpread: "-1px",
263
+ oneShadowDepthShadowOffsetY: "3px",
264
+ oneShadowDepthShadowBlur: "6px",
265
+ oneShadowDepthShadowSpread: "0px",
282
266
  oneShadowDepthShadowColor: "#00000033",
283
267
  twoShadowDepthShadowOffsetX: "0px",
284
268
  twoShadowDepthShadowOffsetY: "3px",
285
- twoShadowDepthShadowBlur: "3px",
286
- twoShadowDepthShadowSpread: "-2px",
269
+ twoShadowDepthShadowBlur: "10px",
270
+ twoShadowDepthShadowSpread: "0px",
287
271
  twoShadowDepthShadowColor: "#00000033"
288
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
+ },
289
343
  card: {
290
344
  height: "220px",
291
345
  width: "400px"
292
346
  },
293
347
  checkbox: {
294
- backgroundColorChecked: globalTokens.mediumBlue,
295
- backgroundHoverColorChecked: "#7BB0D6",
296
- backgroundColorCheckedOnDark: "#FFFFFF",
297
- backgroundHoverColorCheckedOnDark: "#B1B1B1",
298
- borderColor: globalTokens.mediumBlue,
299
- borderHoverColor: "#7BB0D6",
300
- borderColorOnDark: "#FFFFFF",
301
- borderHoverColorOnDark: "#B1B1B1",
302
- checkColor: globalTokens.white,
303
- 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,
304
364
  fontFamily: globalTokens.type_sans,
305
- fontSize: globalTokens.type_scale_03,
306
- fontWeight: globalTokens.type_normal,
307
- fontColor: globalTokens.inherit,
308
- fontColorOnDark: "#FFFFFF",
309
- disabledBackgroundColorChecked: globalTokens.softBlue,
310
- disabledBackgroundColorCheckedOnDark: globalTokens.softBlue,
311
- disabledBorderColor: globalTokens.softBlue,
312
- disabledBorderColorOnDark: globalTokens.softBlue,
313
- disabledColorOnDark: "#BFBFBF",
314
- disabledCheckColor: globalTokens.white,
315
- disabledCheckColorOnDark: "#FFFFFF",
316
- disabledFontColor: globalTokens.lighterBlack,
317
- disabledFontColorOnDark: "#575757",
318
- focusColor: globalTokens.blue,
319
- 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"
320
374
  },
321
375
  chip: {
322
- backgroundColor: globalTokens.darkWhite,
323
- borderColor: "transparent",
324
- fontColor: globalTokens.black,
325
- disabledBackgroundColor: globalTokens.mediumWhite,
326
- disabledFontColor: globalTokens.lighterBlack,
376
+ backgroundColor: globalTokens.hal_grey_l_90,
377
+ disabledBackgroundColor: globalTokens.hal_grey_l_95,
327
378
  fontFamily: globalTokens.type_sans,
328
379
  fontSize: globalTokens.type_scale_03,
329
- fontWeight: "400",
330
- fontStyle: "normal",
331
- borderRadius: "50px",
332
- 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",
333
387
  borderStyle: "solid",
334
- height: "18px",
335
- contentPaddingLeft: "20px",
336
- contentPaddingRight: "20px",
337
- contentPaddingTop: "10px",
338
- contentPaddingBottom: "10px",
388
+ contentPaddingLeft: "16px",
389
+ contentPaddingRight: "16px",
390
+ contentPaddingTop: "0px",
391
+ contentPaddingBottom: "0px",
339
392
  iconSize: "24px",
340
- iconPaddingLeft: "0px",
341
- iconPaddingRight: "0px"
393
+ iconSpacing: "8px",
394
+ iconColor: globalTokens.hal_black,
395
+ disabledIconColor: globalTokens.hal_grey_l_60,
396
+ focusColor: globalTokens.hal_blue_l_50
342
397
  },
343
398
  date: {
344
399
  pickerSelectedDateBackgroundColor: globalTokens.purple,
345
- pickerSelectedDateColor: globalTokens.white,
346
- pickerBackgroundColor: globalTokens.white,
347
- pickerFontColor: globalTokens.black,
348
- pickerActualDate: globalTokens.lightGrey,
400
+ pickerSelectedDateColor: globalTokens.hal_white,
401
+ pickerBackgroundColor: globalTokens.hal_white,
402
+ pickerFontColor: globalTokens.hal_black,
349
403
  pickerHoverDateBackgroundColor: globalTokens.lighterPurple,
350
- pickerHoverDateFontColor: globalTokens.black,
351
- pickerYearColor: globalTokens.black,
352
- pickerMonthColor: globalTokens.black,
353
- pickerWeekLabelColor: globalTokens.black,
354
- pickerBackgroundColorMonthArrows: "transparent",
355
- 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,
356
411
  fontFamily: globalTokens.type_sans,
357
412
  pickerHeight: "316px",
358
413
  pickerWidth: "290px"
359
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
+ },
360
432
  dialog: {
361
- overlayColor: globalTokens.black,
362
- scrollBarThumbColor: globalTokens.darkGrey,
363
- scrollBarTrackColor: globalTokens.lightGrey,
364
- backgroundColor: globalTokens.white,
365
- fontFamily: globalTokens.type_sans,
366
- fontSize: globalTokens.type_scale_03,
367
- fontWeight: globalTokens.type_regular,
368
- fontColor: globalTokens.black,
433
+ overlayColor: globalTokens.hal_black,
434
+ backgroundColor: globalTokens.hal_white,
369
435
  closeIconWidth: "24px",
370
436
  closeIconHeight: "24px",
371
437
  closeIconTopPosition: "20px",
372
438
  closeIconRightPosition: "20px",
373
439
  closeIconBackgroundColor: "none",
374
440
  closeIconBorderColor: "none",
375
- closeIconColor: globalTokens.black,
441
+ closeIconColor: globalTokens.hal_black,
376
442
  closeIconBorderThickness: "0px",
377
443
  closeIconBorderStyle: "solid",
378
444
  closeIconBorderRadius: "0px",
@@ -383,151 +449,187 @@ var componentTokens = {
383
449
  overlayOpacity: "0.7"
384
450
  },
385
451
  dropdown: {
386
- buttonBackgroundColor: globalTokens.white,
387
- buttonFontColor: globalTokens.black,
388
- optionsListBackgroundColor: globalTokens.white,
389
- optionsListFontColor: globalTokens.black,
390
- optionsListHoverBackgroundColor: globalTokens.white,
391
- buttonHoverBackgroundColor: globalTokens.white,
392
- scrollBarThumbColor: globalTokens.darkGrey,
393
- scrollBarTrackColor: globalTokens.lightGrey,
394
- focusColor: globalTokens.blue,
395
- fontFamily: globalTokens.type_sans,
396
- 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,
397
456
  buttonFontSize: globalTokens.type_scale_03,
398
457
  buttonFontStyle: globalTokens.type_normal,
399
458
  buttonFontWeight: globalTokens.type_regular,
400
- minHeight: "46px",
401
- minWidth: "230px",
402
- 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",
403
489
  borderStyle: "none",
404
490
  borderThickness: "0px",
405
- borderColor: "transparent",
406
- optionsPaddingTop: "6px",
407
- optionsPaddingBottom: "6px",
408
- optionsPaddingLeft: "6px",
409
- optionsPaddingRight: "6px",
410
- caretIconMarginRight: "10px",
411
- caretIconMarginLeft: "10px",
412
- caretIconMarginTop: "0px",
413
- caretIconMarginBottom: "0px",
414
- optionsFontColor: "",
415
- optionsFontSize: globalTokens.type_scale_root,
416
- optionsFontStyle: globalTokens.type_normal,
417
- optionsFontWeight: globalTokens.type_regular,
418
- iconSize: "20px",
419
- iconOptionSpacing: "10px",
420
- 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
421
543
  },
422
544
  footer: {
423
- backgroundColor: globalTokens.black,
424
- bottomLinksDividerColor: globalTokens.mediumBlue,
425
- bottomLinksDividerThickness: "2px",
545
+ height: "124px",
546
+ backgroundColor: globalTokens.hal_black,
547
+ bottomLinksDividerColor: globalTokens.hal_blue_l_50,
548
+ bottomLinksDividerThickness: "1px",
426
549
  bottomLinksDividerStyle: "solid",
427
- bottomLinksDividerSpacing: "6px",
550
+ bottomLinksDividerSpacing: "8px",
428
551
  bottomLinksFontFamily: globalTokens.type_sans,
429
552
  bottomLinksFontSize: globalTokens.type_scale_01,
430
553
  bottomLinksFontStyle: globalTokens.type_normal,
431
554
  bottomLinksFontWeight: globalTokens.type_regular,
432
- bottomLinksFontColor: "",
555
+ bottomLinksFontColor: globalTokens.hal_white,
433
556
  bottomLinksTextDecoration: globalTokens.type_no_line,
434
557
  copyrightFontFamily: globalTokens.type_sans,
435
558
  copyrightFontSize: globalTokens.type_scale_01,
436
559
  copyrightFontStyle: globalTokens.type_normal,
437
560
  copyrightFontWeight: globalTokens.type_regular,
438
- copyrightFontColor: "",
439
- customContentFontFamily: globalTokens.type_sans,
440
- customContentFontSize: globalTokens.type_scale_root,
441
- customContentFontStyle: globalTokens.type_normal,
442
- customContentFontWeight: globalTokens.type_regular,
443
- customContentFontColor: "",
444
- fontColorBase: globalTokens.white,
445
- logo: _dxc_logo_wht["default"],
446
- logoHeight: "34px",
561
+ copyrightFontColor: globalTokens.hal_white,
562
+ logo: _Icons2["default"],
563
+ logoHeight: "32px",
447
564
  logoWidth: "auto",
448
- minHeight: "120px",
449
- socialIconSize: "25px",
450
- socialIconsGutter: "15px"
565
+ socialLinksSize: "24px",
566
+ socialLinksGutter: "16px",
567
+ socialLinksColor: globalTokens.hal_white
451
568
  },
452
569
  header: {
453
- backgroundColor: globalTokens.white,
454
- customContentFontFamily: "",
455
- customContentFontStyle: globalTokens.type_normal,
456
- customContentFontColor: "",
457
- customContentFontSize: "",
458
- customContentFontWeight: globalTokens.type_regular,
459
- dropdownBackgroundColor: globalTokens.transparent,
460
- dropdownHoverBackgroundColor: globalTokens.transparent,
461
- fontColorBase: globalTokens.black,
462
- fontFamilyBase: globalTokens.type_sans,
463
- fontSizeBase: globalTokens.type_scale_root,
464
- hamburguerFocusColor: globalTokens.blue,
465
- hamburguerFontFamily: "",
570
+ backgroundColor: globalTokens.hal_white,
571
+ hamburguerFocusColor: globalTokens.hal_blue_l_50,
572
+ hamburguerFontFamily: globalTokens.type_sans,
466
573
  hamburguerFontStyle: globalTokens.type_normal,
467
- hamburguerFontColor: "",
468
- hamburguerFontSize: globalTokens.fontSize10,
574
+ hamburguerFontColor: globalTokens.hal_black,
575
+ hamburguerFontSize: "10px",
469
576
  hamburguerFontWeight: globalTokens.type_semibold,
470
- hamburguerColor: globalTokens.black,
471
- hamburguerHoverColor: globalTokens.mediumGreyBlack,
472
577
  hamburguerTextTransform: globalTokens.type_uppercase,
473
- logo: _dxc_logo_blk_rgb["default"],
474
- logoResponsive: _dxc_logo_blk_rgb["default"],
475
- logoHeight: "32px",
578
+ hamburguerIconColor: globalTokens.hal_black,
579
+ hamburguerHoverColor: globalTokens.mediumGreyBlack,
580
+ logo: _Icons.dxcLogo,
581
+ logoResponsive: _Icons.dxcLogo,
582
+ logoHeight: "40px",
476
583
  logoWidth: "auto",
477
- menuBackgroundColor: globalTokens.white,
584
+ menuBackgroundColor: globalTokens.hal_white,
478
585
  menuZindex: "2000",
479
586
  menuTabletWidth: "60vw",
480
587
  menuMobileWidth: "100vw",
481
- menuCustomContentFontFamily: "",
482
- menuCustomContentFontStyle: globalTokens.type_normal,
483
- menuCustomContentFontColor: "",
484
- menuCustomContentFontSize: "",
485
- menuCustomContentFontWeight: globalTokens.type_regular,
486
588
  minHeight: "64px",
487
589
  overlayColor: globalTokens.softBlack,
488
590
  overlayOpacity: "0.7",
489
591
  overlayZindex: "1600",
490
592
  paddingTop: "0px",
491
593
  paddingBottom: "0px",
492
- paddingRight: "0px",
493
- paddingLeft: "20px",
494
- underlinedColor: globalTokens.black,
594
+ paddingRight: "24px",
595
+ paddingLeft: "24px",
596
+ underlinedColor: globalTokens.hal_black,
495
597
  underlinedThickness: "2px",
496
- underlinedStyle: "solid"
598
+ underlinedStyle: "solid",
599
+ contentColor: globalTokens.hal_black,
600
+ contentColorOnDark: globalTokens.hal_white
497
601
  },
498
602
  heading: {
499
- fontColorBase: globalTokens.inherit,
500
- fontFamilyBase: globalTokens.type_sans,
501
- level1FontColor: "",
502
- level1FontFamily: "",
603
+ level1FontColor: globalTokens.inherit,
604
+ level1FontFamily: globalTokens.type_sans,
503
605
  level1FontSize: globalTokens.type_scale_08,
504
606
  level1FontStyle: globalTokens.type_normal,
505
607
  level1FontWeight: globalTokens.type_regular,
506
608
  level1LineHeight: globalTokens.type_leading_compact_01,
507
609
  level1LetterSpacing: globalTokens.type_spacing_tight_01,
508
- level2FontColor: "",
509
- level2FontFamily: "",
610
+ level2FontColor: globalTokens.inherit,
611
+ level2FontFamily: globalTokens.type_sans,
510
612
  level2FontSize: globalTokens.type_scale_07,
511
613
  level2FontStyle: globalTokens.type_normal,
512
614
  level2FontWeight: globalTokens.type_regular,
513
615
  level2LineHeight: globalTokens.type_leading_normal,
514
616
  level2LetterSpacing: globalTokens.type_spacing_normal,
515
- level3FontColor: "",
516
- level3FontFamily: "",
617
+ level3FontColor: globalTokens.inherit,
618
+ level3FontFamily: globalTokens.type_sans,
517
619
  level3FontSize: globalTokens.type_scale_06,
518
620
  level3FontStyle: globalTokens.type_normal,
519
621
  level3FontWeight: globalTokens.type_regular,
520
622
  level3LineHeight: globalTokens.type_leading_compact_01,
521
623
  level3LetterSpacing: globalTokens.type_spacing_wide_01,
522
- level4FontColor: "",
523
- level4FontFamily: "",
624
+ level4FontColor: globalTokens.inherit,
625
+ level4FontFamily: globalTokens.type_sans,
524
626
  level4FontSize: globalTokens.type_scale_05,
525
627
  level4FontStyle: globalTokens.type_normal,
526
628
  level4FontWeight: globalTokens.type_regular,
527
629
  level4LineHeight: globalTokens.type_leading_normal,
528
630
  level4LetterSpacing: globalTokens.type_spacing_normal,
529
- level5FontColor: "",
530
- level5FontFamily: "",
631
+ level5FontColor: globalTokens.inherit,
632
+ level5FontFamily: globalTokens.type_sans,
531
633
  level5FontSize: globalTokens.type_scale_04,
532
634
  level5FontStyle: globalTokens.type_normal,
533
635
  level5FontWeight: globalTokens.type_regular,
@@ -535,71 +637,178 @@ var componentTokens = {
535
637
  level5LetterSpacing: globalTokens.type_spacing_wide_01
536
638
  },
537
639
  inputText: {
538
- assistiveTextFontColor: "",
539
- assistiveTextFontColorOnDark: "",
640
+ fontFamily: globalTokens.type_sans,
641
+ assistiveTextFontColor: globalTokens.black,
642
+ assistiveTextFontColorOnDark: globalTokens.white,
540
643
  assistiveTextFontSize: globalTokens.type_scale_01,
541
644
  assistiveTextFontStyle: globalTokens.type_normal,
542
645
  assistiveTextFontWeight: globalTokens.type_regular,
543
- disabledFontColor: globalTokens.lighterBlack,
544
- disabledFontColorOnDark: "#575757",
646
+ disabledColor: globalTokens.lighterBlack,
647
+ disabledColorOnDark: "#575757",
545
648
  errorColor: globalTokens.red,
546
- errorColorOnDark: "#FE344F",
547
- fontColorBase: globalTokens.black,
548
- fontColorBaseOnDark: globalTokens.white,
549
- fontFamilyBase: globalTokens.type_sans,
550
- fontSizeBase: globalTokens.type_scale_root,
649
+ errorColorOnDark: globalTokens.hal_red_l_60,
650
+ optionBackgroundColor: globalTokens.white,
651
+ optionBorderColor: globalTokens.black,
652
+ optionBorderThickness: "0px",
653
+ optionBorderStyle: "solid",
654
+ optionFontColor: globalTokens.black,
655
+ optionFontColorOnDark: globalTokens.white,
656
+ optionFontSize: globalTokens.type_scale_03,
657
+ optionFontStyle: globalTokens.type_normal,
658
+ optionFontWeight: globalTokens.type_regular,
659
+ optionPaddingBottom: "6px",
660
+ optionPaddingTop: "6px",
661
+ scrollBarThumbColor: globalTokens.darkGrey,
662
+ scrollBarTrackColor: globalTokens.lightGrey,
551
663
  hoverOptionColor: globalTokens.black,
664
+ hoverOptionBackgroundColor: globalTokens.lightWhite,
665
+ hoverOptionBackgroundColorOnDark: globalTokens.mediumGrey,
666
+ selectedOptionBackgroundColor: globalTokens.lightGrey,
667
+ selectedOptionBackgroundColorOnDark: globalTokens.lightGrey,
668
+ labelFontColor: globalTokens.black,
669
+ labelFontColorOnDark: globalTokens.white,
552
670
  labelFontSize: globalTokens.type_scale_03,
553
- prefixIconColor: "",
554
- prefixIconColorOnDark: "",
555
- prefixLabelFontColor: "",
556
- prefixLabelFontColorOnDark: "",
671
+ labelFontStyle: globalTokens.type_normal,
672
+ labelFontWeight: globalTokens.type_regular,
673
+ valueFontColor: globalTokens.black,
674
+ valueFontColorOnDark: globalTokens.white,
675
+ valueFontSize: globalTokens.type_scale_03,
676
+ valueFontStyle: globalTokens.type_normal,
677
+ valueFontWeight: globalTokens.type_regular,
678
+ prefixIconColor: globalTokens.black,
679
+ prefixIconColorOnDark: globalTokens.white,
680
+ prefixLabelFontColor: globalTokens.black,
681
+ prefixLabelFontColorOnDark: globalTokens.white,
557
682
  prefixLabelFontSize: globalTokens.type_scale_03,
558
683
  prefixLabelFontStyle: globalTokens.type_normal,
559
684
  prefixLabelFontWeight: globalTokens.type_regular,
560
- scrollBarThumbColor: globalTokens.darkGrey,
561
- scrollBarTrackColor: globalTokens.lightGrey,
562
- selectedOptionBackgroundColor: globalTokens.lightWhite,
563
- suffixIconColor: "",
564
- suffixIconColorOnDark: "",
565
- suffixLabelFontColor: "",
566
- suffixLabelFontColorOnDark: "",
685
+ suffixIconColor: globalTokens.black,
686
+ suffixIconColorOnDark: globalTokens.white,
687
+ suffixLabelFontColor: globalTokens.black,
688
+ suffixLabelFontColorOnDark: globalTokens.white,
567
689
  suffixLabelFontSize: globalTokens.type_scale_03,
568
690
  suffixLabelFontStyle: globalTokens.type_normal,
569
691
  suffixLabelFontWeight: globalTokens.type_regular,
570
- underlineColor: "",
571
- underlineColorOnDark: "",
572
- underlineFocusColor: "",
573
- underlineFocusColorOnDark: "",
692
+ underlineColor: globalTokens.black,
693
+ underlineColorOnDark: globalTokens.white,
694
+ underlineFocusColor: globalTokens.black,
695
+ underlineFocusColorOnDark: globalTokens.white,
574
696
  underlineThickness: "1px"
575
697
  },
698
+ textInput: {
699
+ fontFamily: globalTokens.type_sans,
700
+ enabledBorderColor: globalTokens.hal_black,
701
+ enabledBorderColorOnDark: globalTokens.hal_white,
702
+ hoverBorderColor: globalTokens.hal_purple_l_65,
703
+ hoverBorderColorOnDark: globalTokens.hal_purple_l_65,
704
+ focusBorderColor: globalTokens.hal_blue_l_50,
705
+ focusBorderColorOnDark: globalTokens.hal_blue_l_50,
706
+ disabledBorderColor: globalTokens.hal_grey_l_60,
707
+ disabledBorderColorOnDark: globalTokens.hal_grey_l_60,
708
+ disabledContainerFillColor: globalTokens.hal_grey_l_95,
709
+ disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
710
+ errorBorderColor: globalTokens.hal_red_s_41,
711
+ errorBorderColorOnDark: globalTokens.hal_red_l_60,
712
+ hoverErrorBorderColor: "#fe0123",
713
+ hoverErrorBorderColorOnDark: "#fe677b",
714
+ errorMessageColor: globalTokens.hal_red_s_41,
715
+ errorMessageColorOnDark: globalTokens.hal_red_l_60,
716
+ errorIconColor: globalTokens.hal_red_s_41,
717
+ errorIconColorOnDark: globalTokens.hal_red_l_60,
718
+ labelFontColor: globalTokens.hal_black,
719
+ labelFontColorOnDark: globalTokens.hal_white,
720
+ labelFontSize: globalTokens.type_scale_02,
721
+ labelFontStyle: globalTokens.type_normal,
722
+ labelFontWeight: globalTokens.type_semibold,
723
+ labelLineHeight: globalTokens.type_leading_loose_01,
724
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
725
+ disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
726
+ optionalLabelFontWeight: globalTokens.type_regular,
727
+ helperTextFontColor: globalTokens.hal_black,
728
+ helperTextFontColorOnDark: globalTokens.hal_white,
729
+ helperTextFontSize: globalTokens.type_scale_01,
730
+ helperTextFontStyle: globalTokens.type_normal,
731
+ helperTextFontWeight: globalTokens.type_regular,
732
+ helperTextLineHeight: globalTokens.type_leading_normal,
733
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
734
+ disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
735
+ prefixColor: globalTokens.hal_grey_s_40,
736
+ prefixColorOnDark: globalTokens.hal_white,
737
+ suffixColor: globalTokens.hal_grey_s_40,
738
+ suffixColorOnDark: globalTokens.hal_white,
739
+ disabledPrefixColor: globalTokens.hal_grey_l_75,
740
+ disabledSuffixColor: globalTokens.hal_grey_l_75,
741
+ disabledPrefixColorOnDark: globalTokens.hal_grey_l_60,
742
+ disabledSuffixColorOnDark: globalTokens.hal_grey_l_60,
743
+ placeholderFontColor: "#808080",
744
+ placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
745
+ disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
746
+ disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
747
+ valueFontColor: globalTokens.hal_black,
748
+ valueFontColorOnDark: globalTokens.hal_white,
749
+ valueFontSize: globalTokens.type_scale_03,
750
+ valueFontStyle: globalTokens.type_normal,
751
+ valueFontWeight: globalTokens.type_regular,
752
+ disabledValueFontColor: globalTokens.hal_grey_l_60,
753
+ disabledValueFontColorOnDark: globalTokens.hal_grey_l_60,
754
+ actionIconColor: globalTokens.hal_black,
755
+ actionIconColorOnDark: globalTokens.hal_white,
756
+ disabledActionIconColor: globalTokens.hal_grey_l_60,
757
+ disabledActionIconColorOnDark: globalTokens.hal_grey_l_60,
758
+ hoverActionIconColor: globalTokens.hal_black,
759
+ hoverActionIconColorOnDark: globalTokens.hal_white,
760
+ focusActionIconColor: globalTokens.hal_black,
761
+ focusActionIconColorOnDark: globalTokens.hal_white,
762
+ activeActionIconColor: globalTokens.hal_black,
763
+ activeActionIconColorOnDark: globalTokens.hal_black,
764
+ actionBackgroundColor: globalTokens.transparent,
765
+ actionBackgroundColorOnDark: globalTokens.transparent,
766
+ disabledActionBackgroundColor: globalTokens.transparent,
767
+ disabledActionBackgroundColorOnDark: globalTokens.transparent,
768
+ hoverActionBackgroundColor: globalTokens.hal_grey_l_95,
769
+ hoverActionBackgroundColorOnDark: globalTokens.hal_grey_s_40,
770
+ focusActionBorderColor: globalTokens.hal_blue_l_50,
771
+ focusActionBorderColorOnDark: globalTokens.hal_blue_l_50,
772
+ activeActionBackgroundColor: globalTokens.hal_grey_l_80,
773
+ activeActionBackgroundColorOnDark: globalTokens.hal_grey_l_60,
774
+ listOptionFontColor: globalTokens.hal_black,
775
+ listOptionFontSize: globalTokens.type_scale_03,
776
+ listOptionFontStyle: globalTokens.type_normal,
777
+ listOptionFontWeight: globalTokens.type_regular,
778
+ systemMessageFontColor: globalTokens.hal_grey_s_40,
779
+ errorMessageBorderColor: globalTokens.hal_red_s_41,
780
+ errorMessageBackgroundColor: globalTokens.hal_red_l_95,
781
+ hoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
782
+ activeListOptionBackgroundColor: globalTokens.hal_grey_l_80
783
+ },
576
784
  link: {
577
- fontColor: globalTokens.mediumBlue,
785
+ fontColor: globalTokens.hal_blue_s_35,
578
786
  fontFamily: globalTokens.inherit,
579
787
  fontSize: globalTokens.type_scale_root,
580
788
  fontStyle: globalTokens.type_normal,
581
789
  fontWeight: globalTokens.type_regular,
582
790
  iconSize: "16px",
583
- iconGutter: "4px",
791
+ iconSpacing: "4px",
584
792
  underlineSpacing: "0px",
585
793
  underlineStyle: "solid",
586
794
  underlineThickness: "1px",
587
795
  disabledColor: globalTokens.lightGrey,
588
- hoverFontColor: globalTokens.mediumBlue,
589
- hoverUnderlineColor: globalTokens.mediumBlue,
796
+ hoverFontColor: globalTokens.hal_blue_s_35,
797
+ hoverUnderlineColor: globalTokens.hal_blue_s_35,
590
798
  visitedFontColor: globalTokens.purple,
591
799
  visitedUnderlineColor: globalTokens.purple,
592
800
  activeFontColor: globalTokens.black,
593
801
  activeUnderlineColor: globalTokens.black,
594
- focusColor: globalTokens.mediumBlue
802
+ focusColor: globalTokens.hal_blue_l_50
595
803
  },
596
804
  paginator: {
597
805
  backgroundColor: globalTokens.darkWhite,
598
- fontColor: globalTokens.black,
806
+ fontColor: globalTokens.hal_black,
599
807
  fontFamily: globalTokens.type_sans,
600
808
  fontSize: globalTokens.type_scale_02,
601
809
  fontStyle: globalTokens.type_normal,
602
810
  fontWeight: globalTokens.type_regular,
811
+ fontTextTransform: "none",
603
812
  height: "64px",
604
813
  width: "100%",
605
814
  marginRight: "40px",
@@ -612,20 +821,29 @@ var componentTokens = {
612
821
  totalItemsContainerMarginLeft: "0px"
613
822
  },
614
823
  progressBar: {
615
- trackLineColor: globalTokens.purple,
824
+ trackLineColor: globalTokens.hal_purple_s_38,
825
+ trackLineColorOnDark: globalTokens.hal_purple_l_65,
616
826
  totalLineColor: globalTokens.softGrey,
617
827
  labelFontFamily: globalTokens.type_sans,
618
828
  labelFontSize: globalTokens.type_scale_01,
619
829
  labelFontStyle: globalTokens.type_normal,
620
830
  labelFontWeight: globalTokens.type_regular,
621
831
  labelFontColor: globalTokens.black,
832
+ labelFontColorOnDark: globalTokens.hal_white,
622
833
  labelFontTextTransform: globalTokens.type_uppercase,
623
834
  valueFontFamily: globalTokens.type_sans,
624
835
  valueFontSize: globalTokens.type_scale_01,
625
836
  valueFontStyle: globalTokens.type_normal,
626
837
  valueFontWeight: globalTokens.type_regular,
627
838
  valueFontColor: globalTokens.black,
839
+ valueFontColorOnDark: globalTokens.hal_white,
628
840
  valueFontTextTransform: globalTokens.type_uppercase,
841
+ helperTextFontColor: globalTokens.black,
842
+ helperTextFontColorOnDark: globalTokens.hal_white,
843
+ helperTextFontSize: globalTokens.type_scale_01,
844
+ helperTextFontStyle: globalTokens.type_normal,
845
+ helperTextFontWeight: globalTokens.type_regular,
846
+ helperTextFontFamily: globalTokens.type_sans,
629
847
  thickness: "9px",
630
848
  borderRadius: "5px",
631
849
  overlayColor: globalTokens.black,
@@ -640,7 +858,7 @@ var componentTokens = {
640
858
  disabledColorOnDark: "#575757",
641
859
  disabledFontColor: globalTokens.lighterBlack,
642
860
  disabledFontColorOnDark: "#575757",
643
- focusColor: globalTokens.blue,
861
+ focusColor: globalTokens.hal_blue_l_50,
644
862
  focusColorOnDark: "#1682FF",
645
863
  fontColor: globalTokens.inherit,
646
864
  fontColorOnDark: globalTokens.white,
@@ -650,81 +868,179 @@ var componentTokens = {
650
868
  fontWeight: globalTokens.type_regular
651
869
  },
652
870
  select: {
653
- checkboxOptionSpacing: "12px",
654
- color: globalTokens.black,
655
- colorOnDark: globalTokens.white,
656
- disabledColor: globalTokens.lighterBlack,
657
- disabledColorOnDark: "#575757",
658
- errorColor: globalTokens.red,
659
- errorColorOnDark: "#FE344F",
660
- focusColor: globalTokens.blue,
661
- focusColorOnDark: globalTokens.blue,
662
871
  fontFamily: globalTokens.type_sans,
663
- hoveredOptionBackgroundColor: globalTokens.lightWhite,
664
- hoveredOptionBackgroundColorOnDark: globalTokens.lightWhite,
665
- iconColor: "",
666
- iconOptionSpacing: "12px",
667
- iconSize: "20px",
668
- labelFontSize: globalTokens.type_scale_03,
669
- labelFontStyle: globalTokens.type_normal,
670
- labelFontWeight: globalTokens.type_regular,
671
- assistiveTextFontColor: globalTokens.black,
672
- assistiveTextFontColorOnDark: globalTokens.white,
872
+ assistiveTextFontColor: globalTokens.hal_black,
873
+ assistiveTextFontColorOnDark: globalTokens.hal_white,
673
874
  assistiveTextFontSize: globalTokens.type_scale_01,
674
875
  assistiveTextFontStyle: globalTokens.type_normal,
675
876
  assistiveTextFontWeight: globalTokens.type_regular,
877
+ labelFontColor: globalTokens.hal_black,
878
+ labelFontColorOnDark: globalTokens.hal_white,
879
+ labelFontSize: globalTokens.type_scale_03,
880
+ labelFontStyle: globalTokens.type_normal,
881
+ labelFontWeight: globalTokens.type_regular,
882
+ disabledColor: globalTokens.lighterBlack,
883
+ disabledColorOnDark: "#575757",
884
+ errorColor: globalTokens.red,
885
+ errorColorOnDark: globalTokens.hal_red_l_60,
886
+ optionBackgroundColor: globalTokens.hal_white,
887
+ optionBorderColor: globalTokens.hal_black,
888
+ optionBorderThickness: "0px",
889
+ optionBorderStyle: "solid",
890
+ optionFontColor: globalTokens.hal_black,
891
+ optionFontColorOnDark: globalTokens.hal_white,
892
+ optionFontSize: globalTokens.type_scale_root,
893
+ optionFontStyle: globalTokens.type_normal,
894
+ optionFontWeight: globalTokens.type_regular,
676
895
  optionPaddingBottom: "6px",
677
896
  optionPaddingTop: "6px",
678
- optionPaddingLeft: "16px",
679
- optionPaddingRight: "16px",
680
- optionsBackgroundColor: globalTokens.white,
681
- optionsBorderColor: "none",
682
- optionsBorderThickness: "0px",
683
- optionsBorderStyle: "solid",
684
- optionsFontColor: "",
685
- optionsFontSize: globalTokens.type_scale_root,
686
- optionsFontStyle: globalTokens.type_normal,
687
- optionsFontWeight: globalTokens.type_regular,
688
- scrollBarThumbColor: globalTokens.darkGrey,
897
+ scrollBarThumbColor: globalTokens.hal_grey_s_40,
689
898
  scrollBarTrackColor: globalTokens.lightGrey,
899
+ optionIconColor: globalTokens.hal_black,
900
+ optionIconColorOnDark: globalTokens.hal_white,
901
+ optionIconSpacing: "12px",
902
+ optionIconSize: "20px",
903
+ optionCheckboxSpacing: "12px",
904
+ hoverOptionBackgroundColor: globalTokens.hal_grey_l_95,
905
+ hoverOptionBackgroundColorOnDark: globalTokens.hal_grey_l_95,
906
+ activeOptionBackgroundColor: globalTokens.hal_grey_l_80,
907
+ activeOptionBackgroundColorOnDark: globalTokens.hal_grey_l_80,
690
908
  selectedOptionBackgroundColor: globalTokens.lightGrey,
691
- selectedOptionBackgroundColorOnDark: globalTokens.lightGrey
909
+ selectedOptionBackgroundColorOnDark: globalTokens.lightGrey,
910
+ underlineColor: globalTokens.hal_black,
911
+ underlineColorOnDark: globalTokens.hal_white,
912
+ underlineFocusColor: globalTokens.hal_black,
913
+ underlineFocusColorOnDark: globalTokens.hal_white,
914
+ underlineThickness: "1px",
915
+ valueFontColor: globalTokens.hal_black,
916
+ valueFontColorOnDark: globalTokens.hal_white,
917
+ valueFontSize: globalTokens.type_scale_03,
918
+ valueFontStyle: globalTokens.type_normal,
919
+ valueFontWeight: globalTokens.type_regular,
920
+ valueIconColor: globalTokens.hal_black,
921
+ valueIconColorOnDark: globalTokens.hal_white,
922
+ valueIconSize: "20px",
923
+ valueIconSpacing: "12px",
924
+ arrowColor: globalTokens.hal_black,
925
+ arrowColorOnDark: globalTokens.hal_white,
926
+ focusColor: globalTokens.hal_blue_l_50,
927
+ focusColorOnDark: globalTokens.hal_blue_l_50
928
+ },
929
+ newSelect: {
930
+ fontFamily: globalTokens.type_sans,
931
+ enabledBorderColor: globalTokens.hal_black,
932
+ enabledBorderColorOnDark: globalTokens.hal_white,
933
+ hoverBorderColor: globalTokens.hal_purple_l_65,
934
+ hoverBorderColorOnDark: globalTokens.hal_purple_l_65,
935
+ focusBorderColor: globalTokens.hal_blue_l_50,
936
+ focusBorderColorOnDark: globalTokens.hal_blue_l_50,
937
+ disabledBorderColor: globalTokens.hal_grey_l_60,
938
+ disabledBorderColorOnDark: globalTokens.hal_grey_l_60,
939
+ disabledContainerFillColor: globalTokens.hal_grey_l_95,
940
+ disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
941
+ errorBorderColor: globalTokens.hal_red_s_41,
942
+ errorBorderColorOnDark: globalTokens.hal_red_l_60,
943
+ hoverErrorBorderColor: "#fe0123",
944
+ hoverErrorBorderColorOnDark: "#fe677b",
945
+ errorMessageColor: globalTokens.hal_red_s_41,
946
+ errorMessageColorOnDark: globalTokens.hal_red_l_60,
947
+ errorIconColor: globalTokens.hal_red_s_41,
948
+ errorIconColorOnDark: globalTokens.hal_red_l_60,
949
+ labelFontColor: globalTokens.hal_black,
950
+ labelFontColorOnDark: globalTokens.hal_white,
951
+ labelFontSize: globalTokens.type_scale_02,
952
+ labelFontStyle: globalTokens.type_normal,
953
+ labelFontWeight: globalTokens.type_semibold,
954
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
955
+ disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
956
+ optionalLabelFontWeight: globalTokens.type_regular,
957
+ helperTextFontColor: globalTokens.hal_black,
958
+ helperTextFontColorOnDark: globalTokens.hal_white,
959
+ helperTextFontSize: globalTokens.type_scale_01,
960
+ helperTextFontStyle: globalTokens.type_normal,
961
+ helperTextFontWeight: globalTokens.type_regular,
962
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
963
+ disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
964
+ placeholderFontColor: "#808080",
965
+ placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
966
+ disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
967
+ disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
968
+ valueFontColor: globalTokens.hal_black,
969
+ valueFontColorOnDark: globalTokens.hal_white,
970
+ valueFontSize: globalTokens.type_scale_03,
971
+ valueFontStyle: globalTokens.type_normal,
972
+ valueFontWeight: globalTokens.type_regular,
973
+ disabledValueFontColor: globalTokens.hal_grey_l_60,
974
+ disabledValueFontColorOnDark: globalTokens.hal_grey_l_60,
975
+ actionIconColor: globalTokens.hal_black,
976
+ actionIconColorOnDark: globalTokens.hal_white,
977
+ disabledActionIconColor: globalTokens.hal_grey_l_60,
978
+ disabledActionIconColorOnDark: globalTokens.hal_grey_l_60,
979
+ hoverActionIconColor: globalTokens.hal_black,
980
+ hoverActionIconColorOnDark: globalTokens.hal_white,
981
+ focusActionIconColor: globalTokens.hal_black,
982
+ focusActionIconColorOnDark: globalTokens.hal_white,
983
+ activeActionIconColor: globalTokens.hal_black,
984
+ activeActionIconColorOnDark: globalTokens.hal_black,
985
+ actionBackgroundColor: globalTokens.transparent,
986
+ actionBackgroundColorOnDark: globalTokens.transparent,
987
+ disabledActionBackgroundColor: globalTokens.transparent,
988
+ disabledActionBackgroundColorOnDark: globalTokens.transparent,
989
+ hoverActionBackgroundColor: globalTokens.hal_grey_l_95,
990
+ hoverActionBackgroundColorOnDark: globalTokens.hal_grey_s_40,
991
+ focusActionBorderColor: globalTokens.hal_blue_l_50,
992
+ focusActionBorderColorOnDark: globalTokens.hal_blue_l_50,
993
+ activeActionBackgroundColor: globalTokens.hal_grey_l_80,
994
+ activeActionBackgroundColorOnDark: globalTokens.hal_grey_l_60,
995
+ listOptionFontColor: globalTokens.hal_black,
996
+ listOptionFontSize: globalTokens.type_scale_02,
997
+ listOptionFontStyle: globalTokens.type_normal,
998
+ listOptionFontWeight: globalTokens.type_regular,
999
+ systemMessageFontColor: globalTokens.hal_grey_s_40,
1000
+ errorMessageBorderColor: globalTokens.hal_red_s_41,
1001
+ errorMessageBackgroundColor: globalTokens.hal_red_l_95,
1002
+ hoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
1003
+ activeListOptionBackgroundColor: globalTokens.hal_grey_l_90,
1004
+ // NUEVO
1005
+ arrowColor: globalTokens.hal_black,
1006
+ arrowColorOnDark: globalTokens.hal_white,
1007
+ disabledArrowColor: globalTokens.hal_grey_l_60,
1008
+ disabledArrowColorOnDark: globalTokens.hal_grey_l_60,
1009
+ enabledListBorderColor: globalTokens.hal_grey_l_80,
1010
+ listOptionBorderBottomColor: globalTokens.hal_grey_l_90,
1011
+ selectedListOptionBackgroundColor: globalTokens.hal_grey_l_90
692
1012
  },
693
1013
  sidenav: {
694
- backgroundColor: globalTokens.lighterGrey,
695
- arrowContainerColor: globalTokens.lightGrey,
696
- arrowColor: globalTokens.black,
697
- customContentFontFamily: globalTokens.type_sans,
698
- customContentFontSize: globalTokens.type_scale_root,
699
- customContentFontStyle: globalTokens.type_normal,
700
- customContentFontWeight: globalTokens.type_regular,
701
- customContentFontColor: globalTokens.black,
1014
+ backgroundColor: globalTokens.hal_grey_l_95,
1015
+ arrowContainerColor: globalTokens.hal_grey_l_90,
1016
+ arrowColor: globalTokens.hal_black,
702
1017
  titleFontFamily: globalTokens.type_sans,
703
1018
  titleFontSize: globalTokens.type_scale_05,
704
1019
  titleFontStyle: globalTokens.type_normal,
705
1020
  titleFontWeight: globalTokens.type_regular,
706
- titleFontColor: "#000000de",
1021
+ titleFontColor: globalTokens.hal_black,
707
1022
  titleFontTextTransform: "none",
708
1023
  titleFontLetterSpacing: globalTokens.type_spacing_normal,
709
1024
  subtitleFontFamily: globalTokens.type_sans,
710
- subtitleFontSize: globalTokens.type_scale_01,
1025
+ subtitleFontSize: globalTokens.type_scale_03,
711
1026
  subtitleFontStyle: globalTokens.type_normal,
712
1027
  subtitleFontWeight: globalTokens.type_regular,
713
- subtitleFontColor: "#00000099",
1028
+ subtitleFontColor: globalTokens.color_grey_800,
714
1029
  subtitleFontTextTransform: globalTokens.type_uppercase,
715
- subtitleFontLetterSpacing: globalTokens.type_spacing_wide_03,
1030
+ subtitleFontLetterSpacing: globalTokens.type_spacing_wide_02,
716
1031
  linkFontFamily: globalTokens.type_sans,
717
1032
  linkFontSize: globalTokens.type_scale_02,
718
1033
  linkFontStyle: globalTokens.type_normal,
719
1034
  linkFontWeight: globalTokens.type_regular,
720
- linkFontColor: "#00000099",
1035
+ linkFontColor: globalTokens.color_grey_800,
721
1036
  linkFontTextTransform: "none",
722
1037
  linkFontLetterSpacing: globalTokens.type_spacing_wide_01,
723
1038
  linkTextDecoration: globalTokens.type_no_line,
724
- linkMarginTop: "6px",
725
- linkMarginRight: "18px",
726
- linkMarginBottom: "6px",
727
- linkMarginLeft: "18px",
1039
+ linkMarginTop: "4px",
1040
+ linkMarginBottom: "4px",
1041
+ linkMarginRight: "16px",
1042
+ linkMarginLeft: "16px",
1043
+ linkFocusColor: globalTokens.hal_blue_l_50,
728
1044
  scrollBarThumbColor: "#66666626",
729
1045
  scrollBarTrackColor: globalTokens.transparent
730
1046
  },
@@ -733,89 +1049,110 @@ var componentTokens = {
733
1049
  fontSize: globalTokens.type_scale_03,
734
1050
  fontStyle: globalTokens.type_normal,
735
1051
  fontWeight: globalTokens.type_regular,
736
- fontColor: globalTokens.black,
737
- fontColorOnDark: globalTokens.white,
1052
+ labelFontFamily: globalTokens.type_sans,
1053
+ labelFontSize: globalTokens.type_scale_02,
1054
+ labelFontStyle: globalTokens.type_normal,
1055
+ labelFontWeight: globalTokens.type_semibold,
1056
+ labelLineHeight: globalTokens.type_leading_loose_01,
1057
+ helperTextFontFamily: globalTokens.type_sans,
1058
+ helperTextFontSize: globalTokens.type_scale_01,
1059
+ helperTextFontStyle: globalTokens.type_normal,
1060
+ helperTextFontWeight: globalTokens.type_regular,
1061
+ helperTextLineHeight: globalTokens.type_leading_normal,
1062
+ fontColor: globalTokens.hal_black,
1063
+ fontColorOnDark: globalTokens.hal_white,
1064
+ labelFontColor: globalTokens.hal_black,
1065
+ helperTextFontColor: globalTokens.hal_black,
1066
+ disabledFontColor: globalTokens.hal_grey_l_60,
738
1067
  fontLetterSpacing: globalTokens.type_spacing_normal,
739
- thumbHeight: "20px",
740
- thumbWidth: "20px",
741
- thumbVerticalPosition: "32.5%",
742
- thumbBackgroundColor: globalTokens.mediumBlue,
743
- thumbBackgroundColorOnDark: globalTokens.white,
744
- draggedThumbScale: "1",
745
- draggedThumbBackgroundColor: globalTokens.mediumBlue,
746
- draggedThumbBackgroundColorOnDark: "#0095FF",
747
- dotsHeight: "6px",
748
- dotsWidth: "6px",
749
- dotsVerticalPosition: "42%",
750
- dotsBackgroundColor: globalTokens.mediumBlue,
751
- dotsBackgroundColorOnDark: globalTokens.white,
1068
+ thumbHeight: "12px",
1069
+ thumbWidth: "12px",
1070
+ hoverThumbHeight: "14px",
1071
+ hoverThumbWidth: "14px",
1072
+ thumbVerticalPosition: "12px",
1073
+ hoverThumbVerticalPosition: "11px",
1074
+ thumbBackgroundColor: globalTokens.hal_blue_s_35,
1075
+ thumbBackgroundColorOnDark: globalTokens.hal_blue_l_50,
1076
+ hoverThumbScale: "1.166666",
1077
+ hoverThumbBackgroundColor: globalTokens.hal_blue_d_20,
1078
+ hoverThumbBackgroundColorOnDark: globalTokens.hal_blue_d_20,
1079
+ activeThumbScale: "1.166666",
1080
+ activeThumbBackgroundColor: globalTokens.hal_blue_d_20,
1081
+ activeThumbBackgroundColorOnDark: globalTokens.hal_blue_d_20,
1082
+ focusThumbBackgroundColor: globalTokens.hal_blue_s_35,
1083
+ focusThumbBackgroundColorOnDark: globalTokens.hal_blue_l_50,
1084
+ tickHeight: "4px",
1085
+ tickWidth: "4px",
1086
+ tickVerticalPosition: "11px",
1087
+ tickBackgroundColor: globalTokens.hal_blue_s_35,
1088
+ tickBackgroundColorOnDark: globalTokens.hal_blue_l_50,
752
1089
  trackLineThickness: "2px",
753
1090
  trackLineVerticalPosition: "50%",
754
- trackLineColor: globalTokens.mediumBlue,
755
- trackLineOnDark: globalTokens.white,
756
- totalLineThickness: "",
1091
+ trackLineColor: globalTokens.hal_blue_s_35,
1092
+ trackLineColorOnDark: globalTokens.hal_blue_l_50,
1093
+ totalLineThickness: "2px",
757
1094
  totalLineVerticalPosition: "50%",
758
- totalLineColor: globalTokens.softBlue,
759
- totalLineOnDark: globalTokens.white,
760
- disabledThumbVerticalPosition: "24%",
761
- disabledThumbBackgroundColor: globalTokens.softBlue,
1095
+ totalLineColor: globalTokens.hal_grey_l_90,
1096
+ totalLineColorOnDark: globalTokens.hal_grey_l_75,
1097
+ disabledThumbVerticalPosition: "10px",
1098
+ disabledThumbBackgroundColor: globalTokens.hal_grey_l_60,
762
1099
  disabledThumbBackgroundColorOnDark: "#575757",
763
- disabledDotsVerticalPosition: "",
764
- disabledDotsBackgroundColor: globalTokens.softBlue,
765
- disabledDotsBackgroundColorOnDark: "#575757",
766
- disabledTrackLineColor: globalTokens.softBlue,
767
- disabledTrackLineOnDark: "#575757",
768
- disabledTotalLineColor: globalTokens.softBlue,
769
- disabledTotalLineColorOnDark: "#575757",
770
- focusColor: globalTokens.blue,
771
- focusColorOnDark: "#1682FF"
1100
+ disabledTickVerticalPosition: "11px",
1101
+ disabledTickBackgroundColor: globalTokens.hal_grey_l_60,
1102
+ disabledTickBackgroundColorOnDark: globalTokens.hal_grey_l_60,
1103
+ disabledTrackLineColor: globalTokens.hal_grey_l_60,
1104
+ disabledTrackLineColorOnDark: globalTokens.hal_grey_l_60,
1105
+ disabledTotalLineColor: globalTokens.hal_grey_l_95,
1106
+ disabledTotalLineColorOnDark: globalTokens.hal_grey_s_40,
1107
+ focusColor: globalTokens.hal_blue_l_50,
1108
+ focusColorOnDark: globalTokens.hal_blue_l_50,
1109
+ floorLabelMarginRight: globalTokens.type_scale_03,
1110
+ ceilLabelMarginLeft: globalTokens.type_scale_03,
1111
+ inputMarginLeft: globalTokens.type_scale_06
772
1112
  },
773
1113
  spinner: {
774
- trackCircleColor: globalTokens.purple,
1114
+ trackCircleColor: "#5f249f",
1115
+ trackCircleColorOnDark: "#a46ede",
775
1116
  totalCircleColor: globalTokens.white,
776
1117
  labelFontFamily: globalTokens.type_sans,
777
- labelFontSize: globalTokens.type_scale_01,
1118
+ labelFontSize: globalTokens.type_scale_02,
778
1119
  labelFontStyle: globalTokens.type_normal,
779
1120
  labelFontWeight: globalTokens.type_regular,
780
- labelFontColor: globalTokens.inherit,
781
- labelFontTextTransform: globalTokens.type_uppercase,
782
- labelLetterSpacing: globalTokens.type_spacing_normal,
1121
+ labelFontColor: globalTokens.black,
1122
+ labelFontColorOnDark: globalTokens.white,
783
1123
  labelTextAlign: "center",
784
1124
  progressValueFontFamily: globalTokens.type_sans,
785
- progressValueFontSize: globalTokens.type_scale_01,
1125
+ progressValueFontSize: globalTokens.type_scale_02,
786
1126
  progressValueFontStyle: globalTokens.type_normal,
787
- progressValueFontWeight: globalTokens.type_regular,
1127
+ progressValueFontWeight: globalTokens.type_bold,
788
1128
  progressValueFontColor: globalTokens.inherit,
789
- progressValueLetterSpacing: globalTokens.type_spacing_normal,
1129
+ progressValueFontColorOnDark: globalTokens.white,
790
1130
  progressValueTextAlign: "center",
791
1131
  overlayBackgroundColor: globalTokens.black,
792
1132
  overlayOpacity: "0.8",
793
1133
  overlayLabelFontFamily: globalTokens.type_sans,
794
- overlayLabelFontSize: globalTokens.type_scale_01,
1134
+ overlayLabelFontSize: globalTokens.type_scale_02,
795
1135
  overlayLabelFontStyle: globalTokens.type_normal,
796
1136
  overlayLabelFontWeight: globalTokens.type_regular,
797
1137
  overlayLabelFontColor: globalTokens.white,
798
- overlayLabelFontTextTransform: globalTokens.type_uppercase,
799
- overlayLabelLetterSpacing: globalTokens.type_spacing_normal,
800
1138
  overlayLabelTextAlign: "center",
801
1139
  overlayProgressValueFontFamily: globalTokens.type_sans,
802
- overlayProgressValueFontSize: globalTokens.type_scale_01,
1140
+ overlayProgressValueFontSize: globalTokens.type_scale_02,
803
1141
  overlayProgressValueFontStyle: globalTokens.type_normal,
804
- overlayProgressValueFontWeight: globalTokens.type_regular,
1142
+ overlayProgressValueFontWeight: globalTokens.type_bold,
805
1143
  overlayProgressValueFontColor: globalTokens.white,
806
- overlayProgressValueLetterSpacing: globalTokens.type_spacing_normal,
807
1144
  overlayProgressValueTextAlign: "center"
808
1145
  },
809
1146
  "switch": {
810
- checkedTrackBackgroundColor: globalTokens.purple,
811
- checkedTrackBackgroundColorOnDark: globalTokens.purple,
1147
+ checkedTrackBackgroundColor: globalTokens.hal_purple_s_38,
1148
+ checkedTrackBackgroundColorOnDark: globalTokens.hal_purple_s_38,
812
1149
  checkedThumbBackgroundColor: globalTokens.white,
813
1150
  checkedThumbBackgroundColorOnDark: globalTokens.white,
814
1151
  uncheckedTrackBackgroundColor: globalTokens.lightGrey,
815
1152
  uncheckedTrackBackgroundColorOnDark: globalTokens.lightGrey,
816
1153
  uncheckedThumbBackgroundColor: globalTokens.white,
817
1154
  uncheckedThumbBackgroundColorOnDark: globalTokens.white,
818
- disabledCheckedTrackBackgroundColor: globalTokens.lighterPurple,
1155
+ disabledCheckedTrackBackgroundColor: globalTokens.lightPurple,
819
1156
  disabledCheckedTrackBackgroundColorOnDark: "#1c0b24",
820
1157
  disabledCheckedThumbBackgroundColor: globalTokens.white,
821
1158
  disabledCheckedThumbBackgroundColorOnDark: globalTokens.white,
@@ -833,7 +1170,7 @@ var componentTokens = {
833
1170
  labelFontColor: globalTokens.black,
834
1171
  labelFontColorOnDark: globalTokens.white,
835
1172
  thumbFocusColor: globalTokens.blue,
836
- thumbFocusColorOnDark: "#1489FB",
1173
+ thumbFocusColorOnDark: "#1682FF",
837
1174
  thumbHeight: "24px",
838
1175
  thumbWidth: "24px",
839
1176
  thumbShift: "40%",
@@ -842,13 +1179,21 @@ var componentTokens = {
842
1179
  spaceBetweenLabelSwitch: "0px"
843
1180
  },
844
1181
  tag: {
1182
+ fontFamily: globalTokens.type_sans,
1183
+ fontColor: globalTokens.hal_black,
1184
+ fontSize: globalTokens.type_scale_02,
845
1185
  fontStyle: globalTokens.type_normal,
846
- fontTextTransform: globalTokens.type_uppercase,
847
- height: "43px",
848
- iconColor: globalTokens.white,
849
- iconSectionWidth: "48px",
1186
+ fontWeight: globalTokens.type_regular,
1187
+ labelPaddingTop: "0px",
1188
+ labelPaddingBottom: "0px",
1189
+ labelPaddingLeft: "16px",
1190
+ labelPaddingRight: "16px",
1191
+ height: "40px",
1192
+ iconColor: globalTokens.hal_white,
1193
+ iconSectionWidth: "40px",
850
1194
  iconHeight: "24px",
851
- iconWidth: ""
1195
+ iconWidth: "auto",
1196
+ focusColor: globalTokens.hal_blue_l_50
852
1197
  },
853
1198
  table: {
854
1199
  rowSeparatorThickness: "1px",
@@ -856,7 +1201,7 @@ var componentTokens = {
856
1201
  rowSeparatorColor: globalTokens.lightGrey,
857
1202
  dataBackgroundColor: globalTokens.white,
858
1203
  dataFontFamily: globalTokens.type_sans,
859
- dataFontSize: globalTokens.type_scale_root,
1204
+ dataFontSize: globalTokens.type_scale_02,
860
1205
  dataFontStyle: globalTokens.type_normal,
861
1206
  dataFontWeight: globalTokens.type_regular,
862
1207
  dataFontColor: globalTokens.black,
@@ -867,7 +1212,7 @@ var componentTokens = {
867
1212
  dataPaddingLeft: "40px",
868
1213
  dataTextAlign: "left",
869
1214
  dataTextLineHeight: "normal",
870
- headerBackgroundColor: globalTokens.purple,
1215
+ headerBackgroundColor: globalTokens.hal_purple_s_38,
871
1216
  headerBorderRadius: "4px",
872
1217
  headerFontFamily: globalTokens.type_sans,
873
1218
  headerFontSize: globalTokens.type_scale_02,
@@ -892,22 +1237,22 @@ var componentTokens = {
892
1237
  fontWeight: globalTokens.type_semibold,
893
1238
  fontTextTransform: "none",
894
1239
  selectedBackgroundColor: globalTokens.white,
895
- selectedFontColor: globalTokens.purple,
896
- selectedIconColor: globalTokens.purple,
897
- selectedUnderlineColor: globalTokens.purple,
898
- selectedUnderlineThickness: "",
1240
+ selectedFontColor: "#5f249f",
1241
+ selectedIconColor: "#5f249f",
1242
+ selectedUnderlineColor: "#5f249f",
1243
+ selectedUnderlineThickness: "2px",
899
1244
  unselectedBackgroundColor: globalTokens.white,
900
1245
  unselectedFontColor: globalTokens.darkGrey,
901
1246
  unselectedIconColor: globalTokens.darkGrey,
902
- disabledFontColor: globalTokens.mediumGrey,
903
- disabledIconColor: globalTokens.mediumGrey,
1247
+ disabledFontColor: "#999999",
1248
+ disabledIconColor: "#999999",
904
1249
  disabledFontStyle: globalTokens.type_normal,
905
- hoverBackgroundColor: globalTokens.lightPurple,
906
- pressedBackgroundColor: globalTokens.mediumPurple,
1250
+ hoverBackgroundColor: "#f2eafa",
1251
+ pressedBackgroundColor: "#e5d5f6",
907
1252
  pressedFontWeight: globalTokens.type_semibold,
908
1253
  dividerColor: globalTokens.mediumGrey,
909
1254
  dividerThickness: "1px",
910
- focusOutline: globalTokens.purple,
1255
+ focusOutline: "#5f249f",
911
1256
  scrollButtonsWidth: "48px",
912
1257
  badgeBackgroundColor: globalTokens.darkRed,
913
1258
  badgeFontFamily: globalTokens.type_sans,
@@ -924,66 +1269,99 @@ var componentTokens = {
924
1269
  badgeRadiusWithNotificationNumber: "10px"
925
1270
  },
926
1271
  textarea: {
927
- disabledFontColor: globalTokens.lighterBlack,
928
- disabledFontColorOnDark: "#575757",
929
- errorColor: globalTokens.red,
930
- errorColorOnDark: "#FE344F",
931
- assistiveTextFontFamily: globalTokens.type_sans,
932
- assistiveTextFontSize: globalTokens.type_scale_01,
933
- assistiveTextFontStyle: globalTokens.type_normal,
934
- assistiveTextFontWeight: globalTokens.type_regular,
935
- assistiveTextFontColor: globalTokens.black,
936
- assistiveTextFontColorOnDark: globalTokens.white,
937
- assistiveTextLetterSpacing: "",
938
- customContentFontFamily: globalTokens.type_sans,
939
- customContentFontSize: globalTokens.type_scale_03,
940
- customContentFontStyle: globalTokens.type_normal,
941
- customContentFontWeight: globalTokens.type_regular,
942
- customContentFontColor: globalTokens.black,
943
- customContentFontColorOnDark: globalTokens.white,
944
- customContentLetterSpacing: globalTokens.type_spacing_normal,
945
- customContentLineHeight: "1.1875em",
946
- labelFontFamily: globalTokens.type_sans,
947
- labelFontSize: globalTokens.type_scale_03,
1272
+ fontFamily: globalTokens.type_sans,
1273
+ enabledBorderColor: globalTokens.hal_black,
1274
+ enabledBorderColorOnDark: globalTokens.hal_white,
1275
+ hoverBorderColor: globalTokens.hal_purple_l_65,
1276
+ hoverBorderColorOnDark: globalTokens.hal_purple_l_65,
1277
+ focusBorderColor: globalTokens.hal_blue_l_50,
1278
+ focusBorderColorOnDark: globalTokens.hal_blue_l_50,
1279
+ disabledBorderColor: globalTokens.hal_grey_l_60,
1280
+ disabledBorderColorOnDark: globalTokens.hal_grey_l_60,
1281
+ disabledContainerFillColor: globalTokens.hal_grey_l_95,
1282
+ disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
1283
+ errorBorderColor: globalTokens.hal_red_s_41,
1284
+ errorBorderColorOnDark: globalTokens.hal_red_l_60,
1285
+ hoverErrorBorderColor: "#fe0123",
1286
+ hoverErrorBorderColorOnDark: "#fe677b",
1287
+ errorMessageColor: globalTokens.hal_red_s_41,
1288
+ errorMessageColorOnDark: globalTokens.hal_red_l_60,
1289
+ labelFontColor: globalTokens.hal_black,
1290
+ labelFontColorOnDark: globalTokens.hal_white,
1291
+ labelFontSize: globalTokens.type_scale_02,
948
1292
  labelFontStyle: globalTokens.type_normal,
949
- labelFontWeight: globalTokens.type_regular,
950
- labelFontColor: globalTokens.black,
951
- labelFontColorOnDark: globalTokens.white,
952
- labelLetterSpacing: "",
953
- scrollBarThumbColor: globalTokens.darkGrey,
954
- scrollBarThumbColorOnDark: globalTokens.white,
955
- scrollBarTrackColor: globalTokens.lightGrey,
956
- scrollBarTrackColorOnDark: "#999999"
1293
+ labelFontWeight: globalTokens.type_semibold,
1294
+ labelLineHeight: globalTokens.type_leading_loose_01,
1295
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
1296
+ disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
1297
+ optionalLabelFontWeight: globalTokens.type_regular,
1298
+ helperTextFontColor: globalTokens.hal_black,
1299
+ helperTextFontColorOnDark: globalTokens.hal_white,
1300
+ helperTextFontSize: globalTokens.type_scale_01,
1301
+ helperTextFontStyle: globalTokens.type_normal,
1302
+ helperTextFontWeight: globalTokens.type_regular,
1303
+ helperTextLineHeight: globalTokens.type_leading_normal,
1304
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
1305
+ disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
1306
+ placeholderFontColor: "#808080",
1307
+ placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
1308
+ disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
1309
+ disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
1310
+ valueFontColor: globalTokens.hal_black,
1311
+ valueFontColorOnDark: globalTokens.hal_white,
1312
+ valueFontSize: globalTokens.type_scale_03,
1313
+ valueFontStyle: globalTokens.type_normal,
1314
+ valueFontWeight: globalTokens.type_regular,
1315
+ disabledValueFontColor: globalTokens.hal_grey_l_60,
1316
+ disabledValueFontColorOnDark: globalTokens.hal_grey_l_60
957
1317
  },
958
1318
  toggleGroup: {
959
- fontFamily: globalTokens.type_sans,
960
- fontSize: globalTokens.type_scale_02,
961
- fontStyle: globalTokens.type_normal,
962
- fontWeight: globalTokens.type_regular,
963
- fontTextTransform: globalTokens.type_uppercase,
964
- fontLetterSpacing: globalTokens.type_spacing_wide_02,
965
- focusColor: globalTokens.blue,
966
- selectedBackgroundColor: globalTokens.purple,
967
- selectedBackgroundHoverColor: globalTokens.black,
968
- selectedFontColor: globalTokens.white,
969
- selectedHoverFontColor: globalTokens.white,
970
- unselectedBackgroundColor: globalTokens.lightGrey,
971
- unselectedBackgroundHoverColor: globalTokens.darkWhite,
972
- unselectedFontColor: globalTokens.black,
973
- unselectedHoverFontColor: globalTokens.black,
974
- disabledSelectedBackgroundColor: globalTokens.lighterPurple,
975
- disabledSelectedFontColor: globalTokens.white,
976
- disabledUnselectedBackgroundColor: globalTokens.lightWhite,
977
- disabledUnselectedFontColor: globalTokens.lighterBlack,
978
- iconSize: "20px",
979
- iconPaddingTop: "10px",
980
- iconPaddingBottom: "10px",
981
- iconPaddingRight: "12px",
982
- iconPaddingLeft: "12px",
983
- labelPaddingTop: "12px",
984
- labelPaddingBottom: "12px",
985
- labelPaddingLeft: "30px",
986
- labelPaddingRight: "30px"
1319
+ containerBackgroundColor: globalTokens.color_grey_50,
1320
+ containerBorderColor: globalTokens.hal_grey_l_60,
1321
+ labelFontColor: globalTokens.hal_black,
1322
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
1323
+ helperTextFontColor: globalTokens.hal_black,
1324
+ disabledHelperTextFontcolor: globalTokens.hal_grey_l_60,
1325
+ unselectedBackgroundColor: globalTokens.hal_grey_l_90,
1326
+ unselectedHoverBackgroundColor: globalTokens.hal_grey_l_80,
1327
+ unselectedActiveBackgroundColor: globalTokens.hal_purple_s_38,
1328
+ unselectedDisabledBackgroundColor: globalTokens.hal_grey_l_95,
1329
+ unselectedFontColor: globalTokens.hal_black,
1330
+ unselectedDisabledFontColor: globalTokens.hal_grey_l_60,
1331
+ selectedBackgroundColor: globalTokens.hal_purple_s_38,
1332
+ selectedHoverBackgroundColor: globalTokens.hal_purple_d_30,
1333
+ selectedActiveBackgroundColor: globalTokens.hal_purple_d_20,
1334
+ selectedDisabledBackgroundColor: globalTokens.hal_purple_l_95,
1335
+ selectedFontColor: globalTokens.hal_white,
1336
+ selectedDisabledFontColor: globalTokens.color_purple_300,
1337
+ focusColor: globalTokens.hal_blue_l_50,
1338
+ labelFontFamily: globalTokens.type_sans,
1339
+ labelFontSize: globalTokens.type_scale_02,
1340
+ labelFontStyle: globalTokens.type_normal,
1341
+ labelFontWeight: globalTokens.type_semibold,
1342
+ labelLineHeight: globalTokens.type_leading_loose_01,
1343
+ helperTextFontFamily: globalTokens.type_sans,
1344
+ helperTextFontSize: globalTokens.type_scale_01,
1345
+ helperTextFontStyle: globalTokens.type_normal,
1346
+ helperTextFontWeight: globalTokens.type_regular,
1347
+ helperTextLineHeight: globalTokens.type_leading_normal,
1348
+ optionLabelFontFamily: globalTokens.type_sans,
1349
+ optionLabelFontSize: globalTokens.type_scale_03,
1350
+ optionLabelFontStyle: globalTokens.type_normal,
1351
+ optionLabelFontWeight: globalTokens.type_regular,
1352
+ iconPaddingRight: globalTokens.spacing_03,
1353
+ iconPaddingLeft: globalTokens.spacing_03,
1354
+ labelPaddingLeft: globalTokens.spacing_06,
1355
+ labelPaddingRight: globalTokens.spacing_06,
1356
+ iconMarginRight: globalTokens.spacing_03,
1357
+ containerMarginTop: globalTokens.spacing_02,
1358
+ optionBorderThickness: globalTokens.border_width_0,
1359
+ optionBorderStyle: globalTokens.border_none,
1360
+ optionBorderRadius: globalTokens.border_radius_medium,
1361
+ containerBorderThickness: globalTokens.border_width_1,
1362
+ containerBorderStyle: globalTokens.border_solid,
1363
+ containerBorderRadius: globalTokens.border_radius_large,
1364
+ optionFocusBorderThickness: globalTokens.border_width_2
987
1365
  },
988
1366
  upload: {
989
1367
  fontFamily: globalTokens.type_sans,
@@ -992,7 +1370,7 @@ var componentTokens = {
992
1370
  scrollBarTrackColor: globalTokens.lightGrey,
993
1371
  errorColor: globalTokens.red,
994
1372
  backgroundColor: globalTokens.white,
995
- draggingAreaBackgroundColor: globalTokens.lightWhite,
1373
+ draggingStateBackgroundColor: globalTokens.lightWhite,
996
1374
  dragAndDropIconColor: globalTokens.black,
997
1375
  dragAndDropIconSize: "43.5px",
998
1376
  dragAndDropTitleFontSize: globalTokens.type_scale_04,
@@ -1002,16 +1380,16 @@ var componentTokens = {
1002
1380
  dragAndDropTitleFontColor: globalTokens.black,
1003
1381
  dragAndDropDescriptionFontSize: globalTokens.type_scale_03,
1004
1382
  dragAndDropDescriptionFontStyle: globalTokens.type_italic,
1005
- dragAndDropDescriptionFontWeight: globalTokens.type_normal,
1006
- dragAndDropTextDescriptionFontTextTransform: "none",
1007
- dragAndDropTextDescriptionFontColor: globalTokens.darkGrey,
1383
+ dragAndDropDescriptionFontWeight: globalTokens.type_regular,
1384
+ dragAndDropDescriptionFontTextTransform: "none",
1385
+ dragAndDropDescriptionFontColor: globalTokens.darkGrey,
1008
1386
  dragAndDropDraggingStateIconColor: globalTokens.darkGrey,
1009
1387
  dragAndDropDraggingStateIconSize: "74.5px",
1010
1388
  dragAndDropDraggingStateFontSize: globalTokens.type_scale_03,
1011
1389
  dragAndDropDraggingStateFontStyle: globalTokens.type_italic,
1012
- dragAndDropDraggingStateFontWeight: globalTokens.type_normal,
1013
- dragAndDropTextDraggingStateFontTextTransform: "none",
1014
- dragAndDropTextDraggingStateFontColor: globalTokens.darkGrey,
1390
+ dragAndDropDraggingStateFontWeight: globalTokens.type_regular,
1391
+ dragAndDropDraggingStateFontTextTransform: "none",
1392
+ dragAndDropDraggingStateFontColor: globalTokens.darkGrey,
1015
1393
  dragAndDropAreaIconColor: globalTokens.darkGrey,
1016
1394
  dragAndDropAreaIconSize: "24px",
1017
1395
  dragAndDropAreaTextFontSize: globalTokens.type_scale_01,
@@ -1021,7 +1399,6 @@ var componentTokens = {
1021
1399
  dragAndDropAreaTextFontColor: globalTokens.darkGrey,
1022
1400
  fileDeleteIconColor: globalTokens.black,
1023
1401
  fileDeleteIconSize: "30px",
1024
- fileHoverColor: globalTokens.darkWhite,
1025
1402
  fileUnderlineColor: globalTokens.lightGrey,
1026
1403
  fileUnderlineThickness: "1px",
1027
1404
  fileNameFontSize: globalTokens.type_scale_03,
@@ -1034,19 +1411,55 @@ var componentTokens = {
1034
1411
  fileTypeFontWeight: globalTokens.type_regular,
1035
1412
  fileTypeFontTextTransform: globalTokens.type_uppercase,
1036
1413
  fileTypeFontColor: globalTokens.darkGrey,
1037
- fileUploadedIconColor: globalTokens.lightGrey,
1038
- fileUploadedIconSize: "24px",
1039
- filesUploadedTitleFontSize: globalTokens.type_scale_04,
1040
- filesUploadedTitleFontStyle: globalTokens.type_normal,
1041
- filesUploadedTitleFontWeight: globalTokens.type_regular,
1042
- filesUploadedTitleFontTextTransform: "none",
1043
- filesUploadedTitleFontColor: globalTokens.black,
1044
- filesUploadedSubtitleFontSize: globalTokens.type_scale_01,
1045
- filesUploadedSubtitleFontStyle: globalTokens.type_normal,
1046
- filesUploadedSubtitleFontWeight: globalTokens.type_regular,
1047
- filesUploadedSubtitleFontTextTransform: "none",
1048
- filesUploadedSubtitleFontColor: globalTokens.darkGrey,
1049
- filesUploadedNumberFontWeight: globalTokens.type_bold
1414
+ hoverFileColor: globalTokens.darkWhite,
1415
+ uploadedFileIconColor: globalTokens.lightGrey,
1416
+ uploadedFileIconSize: "24px",
1417
+ uploadedFilesTitleFontSize: globalTokens.type_scale_04,
1418
+ uploadedFilesTitleFontStyle: globalTokens.type_normal,
1419
+ uploadedFilesTitleFontWeight: globalTokens.type_regular,
1420
+ uploadedFilesTitleFontTextTransform: "none",
1421
+ uploadedFilesTitleFontColor: globalTokens.black,
1422
+ uploadedFilesSubtitleFontSize: globalTokens.type_scale_01,
1423
+ uploadedFilesSubtitleFontStyle: globalTokens.type_normal,
1424
+ uploadedFilesSubtitleFontWeight: globalTokens.type_regular,
1425
+ uploadedFilesSubtitleFontTextTransform: "none",
1426
+ uploadedFilesSubtitleFontColor: globalTokens.darkGrey,
1427
+ uploadedFilesNumberFontWeight: globalTokens.type_bold
1428
+ },
1429
+ V3Textarea: {
1430
+ fontFamily: globalTokens.type_sans,
1431
+ assistiveTextFontSize: globalTokens.type_scale_01,
1432
+ assistiveTextFontStyle: globalTokens.type_normal,
1433
+ assistiveTextFontWeight: globalTokens.type_regular,
1434
+ assistiveTextFontColor: globalTokens.black,
1435
+ assistiveTextFontColorOnDark: globalTokens.white,
1436
+ assistiveTextLetterSpacing: "0.03333em",
1437
+ disabledColor: globalTokens.lighterBlack,
1438
+ disabledColorOnDark: "#575757",
1439
+ errorColor: globalTokens.red,
1440
+ errorColorOnDark: globalTokens.hal_red_l_60,
1441
+ scrollBarThumbColor: globalTokens.darkGrey,
1442
+ scrollBarThumbColorOnDark: globalTokens.white,
1443
+ scrollBarTrackColor: globalTokens.lightGrey,
1444
+ scrollBarTrackColorOnDark: "#999999",
1445
+ labelFontSize: globalTokens.type_scale_03,
1446
+ labelFontStyle: globalTokens.type_normal,
1447
+ labelFontWeight: globalTokens.type_regular,
1448
+ labelFontColor: globalTokens.black,
1449
+ labelFontColorOnDark: globalTokens.white,
1450
+ labelLetterSpacing: "0.00938em",
1451
+ valueFontSize: globalTokens.type_scale_03,
1452
+ valueFontStyle: globalTokens.type_normal,
1453
+ valueFontWeight: globalTokens.type_regular,
1454
+ valueFontColor: globalTokens.black,
1455
+ valueFontColorOnDark: globalTokens.white,
1456
+ valueLetterSpacing: globalTokens.type_spacing_normal,
1457
+ valueLineHeight: "1.1875em",
1458
+ underlineColor: globalTokens.black,
1459
+ underlineColorOnDark: globalTokens.white,
1460
+ underlineFocusColor: globalTokens.black,
1461
+ underlineFocusColorOnDark: globalTokens.white,
1462
+ underlineThickness: "1px"
1050
1463
  },
1051
1464
  wizard: {
1052
1465
  disabledBackgroundColor: globalTokens.lightGrey,
@@ -1058,7 +1471,7 @@ var componentTokens = {
1058
1471
  stepContainerLetterSpacing: globalTokens.type_spacing_wide_02,
1059
1472
  stepContainerFontColor: globalTokens.black,
1060
1473
  stepContainerSelectedFontColor: globalTokens.white,
1061
- stepContainerSelectedBackgroundColor: globalTokens.purple,
1474
+ stepContainerSelectedBackgroundColor: globalTokens.hal_purple_s_38,
1062
1475
  stepContainerBackgroundColor: globalTokens.white,
1063
1476
  stepContainerIconSize: "19px",
1064
1477
  labelFontSize: globalTokens.type_scale_03,
@@ -1069,7 +1482,8 @@ var componentTokens = {
1069
1482
  labelFontTextTransform: "none",
1070
1483
  labelTextAlign: "left",
1071
1484
  labelFontColor: globalTokens.darkGrey,
1072
- labelActiveFontColor: globalTokens.black,
1485
+ visitedLabelFontColor: globalTokens.black,
1486
+ visitedDescriptionFontColor: globalTokens.black,
1073
1487
  descriptionFontSize: globalTokens.type_scale_01,
1074
1488
  descriptionFontFamily: globalTokens.type_sans,
1075
1489
  descriptionFontStyle: globalTokens.type_normal,
@@ -1077,30 +1491,29 @@ var componentTokens = {
1077
1491
  descriptionLetterSpacing: globalTokens.type_spacing_wide_01,
1078
1492
  descriptionFontTextTransform: "none",
1079
1493
  descriptionFontColor: globalTokens.darkGrey,
1080
- descriptionActiveFontColor: globalTokens.black,
1081
1494
  descriptionTextAlign: "left",
1495
+ circleWidth: "32px",
1496
+ circleHeight: "32px",
1082
1497
  circleBorderThickness: "2px",
1083
1498
  circleBorderStyle: "solid",
1084
1499
  circleBorderRadius: "45px",
1085
1500
  circleBorderColor: globalTokens.black,
1086
- circleSelectedWidth: "32px",
1087
- circleSelectedHeight: "32px",
1088
- circleSelectedBorderThickness: "2px",
1089
- circleSelectedBorderStyle: "solid",
1090
- circleSelectedBorderRadius: "45px",
1091
- circleSelectedBorderColor: globalTokens.purple,
1092
- circleDisabledWidth: "32px",
1093
- circleDisabledHeight: "32px",
1094
- circleDisabledBorderThickness: "2px",
1095
- circleDisabledBorderStyle: "solid",
1096
- circleDisabledBorderRadius: "45px",
1097
- circleDisabledBorderColor: globalTokens.lightGrey,
1098
- circleWidth: "32px",
1099
- circleHeight: "32px",
1501
+ selectedCircleWidth: "32px",
1502
+ selectedCircleHeight: "32px",
1503
+ selectedCircleBorderThickness: "2px",
1504
+ selectedCircleBorderStyle: "solid",
1505
+ selectedCircleBorderRadius: "45px",
1506
+ selectedCircleBorderColor: globalTokens.purple,
1507
+ disabledCircleWidth: "32px",
1508
+ disabledCircleHeight: "32px",
1509
+ disabledCircleBorderThickness: "2px",
1510
+ disabledCircleBorderStyle: "solid",
1511
+ disabledCircleBorderRadius: "45px",
1512
+ disabledCircleBorderColor: globalTokens.lightGrey,
1100
1513
  separatorBorderThickness: "1px",
1101
1514
  separatorBorderStyle: "solid",
1102
1515
  separatorColor: globalTokens.lightGrey,
1103
- focusColor: globalTokens.blue
1516
+ focusColor: globalTokens.hal_blue_l_50
1104
1517
  }
1105
1518
  };
1106
1519
  exports.componentTokens = componentTokens;