@dxc-technology/halstack-react 0.0.0-b7f3ffd → 0.0.0-b915415

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