@dxc-technology/halstack-react 3.2.0 → 4.0.0

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 (265) hide show
  1. package/BackgroundColorContext.js +46 -0
  2. package/ThemeContext.js +250 -0
  3. package/V3Select/V3Select.js +549 -0
  4. package/V3Select/index.d.ts +27 -0
  5. package/V3Textarea/V3Textarea.js +264 -0
  6. package/V3Textarea/index.d.ts +27 -0
  7. package/{dist/accordion → accordion}/Accordion.js +119 -50
  8. package/accordion/index.d.ts +28 -0
  9. package/{dist/accordion-group → accordion-group}/AccordionGroup.js +33 -1
  10. package/accordion-group/index.d.ts +16 -0
  11. package/alert/Alert.js +403 -0
  12. package/alert/index.d.ts +51 -0
  13. package/badge/Badge.js +63 -0
  14. package/{dist/box → box}/Box.js +27 -18
  15. package/box/index.d.ts +25 -0
  16. package/button/Button.js +238 -0
  17. package/button/Button.stories.js +27 -0
  18. package/button/index.d.ts +24 -0
  19. package/{dist/card → card}/Card.js +16 -9
  20. package/card/index.d.ts +22 -0
  21. package/{dist/checkbox → checkbox}/Checkbox.js +89 -23
  22. package/checkbox/index.d.ts +24 -0
  23. package/{dist/chip → chip}/Chip.js +63 -21
  24. package/chip/index.d.ts +22 -0
  25. package/{dist/common → common}/OpenSans.css +0 -0
  26. package/{dist/common → common}/RequiredComponent.js +0 -0
  27. package/{dist/common → common}/fonts/OpenSans-Bold.ttf +0 -0
  28. package/{dist/common → common}/fonts/OpenSans-BoldItalic.ttf +0 -0
  29. package/{dist/common → common}/fonts/OpenSans-ExtraBold.ttf +0 -0
  30. package/{dist/common → common}/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  31. package/{dist/common → common}/fonts/OpenSans-Italic.ttf +0 -0
  32. package/{dist/common → common}/fonts/OpenSans-Light.ttf +0 -0
  33. package/{dist/common → common}/fonts/OpenSans-LightItalic.ttf +0 -0
  34. package/{dist/common → common}/fonts/OpenSans-Regular.ttf +0 -0
  35. package/{dist/common → common}/fonts/OpenSans-SemiBold.ttf +0 -0
  36. package/{dist/common → common}/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  37. package/common/utils.js +22 -0
  38. package/common/variables.js +1567 -0
  39. package/{dist/date → date}/Date.js +60 -38
  40. package/date/index.d.ts +27 -0
  41. package/date-input/DateInput.js +400 -0
  42. package/date-input/index.d.ts +95 -0
  43. package/{dist/dialog → dialog}/Dialog.js +44 -29
  44. package/dialog/index.d.ts +18 -0
  45. package/{dist/dropdown → dropdown}/Dropdown.js +162 -74
  46. package/dropdown/index.d.ts +26 -0
  47. package/file-input/FileInput.js +644 -0
  48. package/file-input/FileItem.js +287 -0
  49. package/file-input/index.d.ts +81 -0
  50. package/{dist/footer → footer}/Footer.js +79 -37
  51. package/footer/Icons.js +77 -0
  52. package/footer/index.d.ts +25 -0
  53. package/{dist/header → header}/Header.js +157 -72
  54. package/header/Icons.js +59 -0
  55. package/header/index.d.ts +25 -0
  56. package/heading/Heading.js +230 -0
  57. package/heading/index.d.ts +17 -0
  58. package/input-text/Icons.js +22 -0
  59. package/{dist/input-text → input-text}/InputText.js +162 -66
  60. package/input-text/index.d.ts +36 -0
  61. package/{dist/layout → layout}/ApplicationLayout.js +7 -11
  62. package/layout/Icons.js +55 -0
  63. package/{dist/link → link}/Link.js +76 -39
  64. package/link/index.d.ts +23 -0
  65. package/main.d.ts +40 -0
  66. package/{dist/main.js → main.js} +71 -15
  67. package/number-input/NumberInput.js +136 -0
  68. package/number-input/NumberInputContext.js +16 -0
  69. package/number-input/index.d.ts +113 -0
  70. package/package.json +25 -19
  71. package/paginator/Icons.js +66 -0
  72. package/{dist/paginator → paginator}/Paginator.js +86 -42
  73. package/paginator/index.d.ts +20 -0
  74. package/password-input/PasswordInput.js +203 -0
  75. package/password-input/index.d.ts +94 -0
  76. package/{dist/progress-bar → progress-bar}/ProgressBar.js +88 -38
  77. package/progress-bar/index.d.ts +18 -0
  78. package/{dist/radio → radio}/Radio.js +28 -9
  79. package/radio/index.d.ts +23 -0
  80. package/{dist/resultsetTable → resultsetTable}/ResultsetTable.js +65 -40
  81. package/resultsetTable/index.d.ts +19 -0
  82. package/select/Select.js +1138 -0
  83. package/select/index.d.ts +131 -0
  84. package/{dist/sidenav → sidenav}/Sidenav.js +47 -23
  85. package/sidenav/index.d.ts +13 -0
  86. package/slider/Slider.js +404 -0
  87. package/slider/index.d.ts +29 -0
  88. package/spinner/Spinner.js +381 -0
  89. package/spinner/index.d.ts +17 -0
  90. package/{dist/switch → switch}/Switch.js +42 -14
  91. package/switch/index.d.ts +24 -0
  92. package/{dist/table → table}/Table.js +45 -11
  93. package/table/index.d.ts +13 -0
  94. package/{dist/tabs → tabs}/Tabs.js +37 -19
  95. package/tabs/index.d.ts +19 -0
  96. package/{dist/tag → tag}/Tag.js +50 -36
  97. package/tag/index.d.ts +24 -0
  98. package/text-input/TextInput.js +992 -0
  99. package/text-input/index.d.ts +135 -0
  100. package/textarea/Textarea.js +369 -0
  101. package/textarea/index.d.ts +117 -0
  102. package/{dist/toggle → toggle}/Toggle.js +0 -0
  103. package/toggle/index.d.ts +21 -0
  104. package/toggle-group/ToggleGroup.js +327 -0
  105. package/toggle-group/index.d.ts +21 -0
  106. package/{dist/upload → upload}/Upload.js +1 -5
  107. package/{dist/upload → upload}/buttons-upload/ButtonsUpload.js +28 -16
  108. package/upload/buttons-upload/Icons.js +40 -0
  109. package/{dist/upload → upload}/dragAndDropArea/DragAndDropArea.js +61 -25
  110. package/upload/dragAndDropArea/Icons.js +39 -0
  111. package/{dist/upload → upload}/file-upload/FileToUpload.js +52 -25
  112. package/upload/file-upload/Icons.js +66 -0
  113. package/{dist/upload → upload}/files-upload/FilesToUpload.js +3 -3
  114. package/upload/index.d.ts +15 -0
  115. package/upload/transaction/Icons.js +160 -0
  116. package/{dist/upload → upload}/transaction/Transaction.js +37 -41
  117. package/{dist/upload → upload}/transactions/Transactions.js +24 -8
  118. package/{dist/useTheme.js → useTheme.js} +0 -0
  119. package/wizard/Icons.js +65 -0
  120. package/{dist/wizard → wizard}/Wizard.js +106 -56
  121. package/wizard/index.d.ts +18 -0
  122. package/README.md +0 -66
  123. package/babel.config.js +0 -8
  124. package/dist/ThemeContext.js +0 -201
  125. package/dist/accordion/Accordion.stories.js +0 -207
  126. package/dist/accordion/readme.md +0 -96
  127. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  128. package/dist/accordion-group/readme.md +0 -70
  129. package/dist/alert/Alert.js +0 -318
  130. package/dist/alert/Alert.stories.js +0 -158
  131. package/dist/alert/close.svg +0 -4
  132. package/dist/alert/error.svg +0 -4
  133. package/dist/alert/info.svg +0 -4
  134. package/dist/alert/readme.md +0 -43
  135. package/dist/alert/success.svg +0 -4
  136. package/dist/alert/warning.svg +0 -4
  137. package/dist/badge/Badge.js +0 -40
  138. package/dist/button/Button.js +0 -219
  139. package/dist/button/Button.stories.js +0 -224
  140. package/dist/button/readme.md +0 -93
  141. package/dist/checkbox/Checkbox.stories.js +0 -144
  142. package/dist/checkbox/readme.md +0 -116
  143. package/dist/common/utils.js +0 -42
  144. package/dist/common/variables.js +0 -523
  145. package/dist/date/Date.stories.js +0 -205
  146. package/dist/date/calendar.svg +0 -1
  147. package/dist/date/calendar_dark.svg +0 -1
  148. package/dist/date/readme.md +0 -73
  149. package/dist/dialog/Dialog.stories.js +0 -217
  150. package/dist/dialog/readme.md +0 -32
  151. package/dist/dropdown/Dropdown.stories.js +0 -249
  152. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  153. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  154. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  155. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  156. package/dist/dropdown/readme.md +0 -69
  157. package/dist/footer/Footer.stories.js +0 -94
  158. package/dist/footer/dxc_logo_wht.png +0 -0
  159. package/dist/footer/readme.md +0 -41
  160. package/dist/header/Header.stories.js +0 -176
  161. package/dist/header/close_icon.svg +0 -1
  162. package/dist/header/dxc_logo_black.png +0 -0
  163. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  164. package/dist/header/dxc_logo_white.png +0 -0
  165. package/dist/header/hamb_menu_black.svg +0 -1
  166. package/dist/header/hamb_menu_white.svg +0 -1
  167. package/dist/header/readme.md +0 -33
  168. package/dist/heading/Heading.js +0 -163
  169. package/dist/input-text/InputText.stories.js +0 -209
  170. package/dist/input-text/error.svg +0 -1
  171. package/dist/input-text/readme.md +0 -91
  172. package/dist/layout/facebook.svg +0 -45
  173. package/dist/layout/linkedin.svg +0 -50
  174. package/dist/layout/twitter.svg +0 -53
  175. package/dist/link/readme.md +0 -51
  176. package/dist/paginator/images/next.svg +0 -3
  177. package/dist/paginator/images/nextPage.svg +0 -3
  178. package/dist/paginator/images/previous.svg +0 -3
  179. package/dist/paginator/images/previousPage.svg +0 -3
  180. package/dist/paginator/readme.md +0 -50
  181. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  182. package/dist/progress-bar/readme.md +0 -63
  183. package/dist/radio/Radio.stories.js +0 -166
  184. package/dist/radio/readme.md +0 -70
  185. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  186. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  187. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  188. package/dist/select/Select.js +0 -490
  189. package/dist/select/Select.stories.js +0 -235
  190. package/dist/select/readme.md +0 -72
  191. package/dist/slider/Slider.js +0 -267
  192. package/dist/slider/Slider.stories.js +0 -241
  193. package/dist/slider/readme.md +0 -64
  194. package/dist/spinner/Spinner.js +0 -198
  195. package/dist/spinner/Spinner.stories.js +0 -183
  196. package/dist/spinner/readme.md +0 -65
  197. package/dist/switch/Switch.stories.js +0 -134
  198. package/dist/switch/readme.md +0 -133
  199. package/dist/tabs/Tabs.stories.js +0 -130
  200. package/dist/tabs/readme.md +0 -78
  201. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  202. package/dist/tabs-for-sections/readme.md +0 -78
  203. package/dist/textarea/Textarea.js +0 -238
  204. package/dist/toggle/Toggle.stories.js +0 -297
  205. package/dist/toggle/readme.md +0 -80
  206. package/dist/toggle-group/ToggleGroup.js +0 -223
  207. package/dist/toggle-group/readme.md +0 -82
  208. package/dist/upload/Upload.stories.js +0 -72
  209. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  210. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  211. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  212. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  213. package/dist/upload/file-upload/audio-icon.svg +0 -4
  214. package/dist/upload/file-upload/close.svg +0 -4
  215. package/dist/upload/file-upload/file-icon.svg +0 -4
  216. package/dist/upload/file-upload/video-icon.svg +0 -4
  217. package/dist/upload/readme.md +0 -37
  218. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  219. package/dist/upload/transaction/audio-icon.svg +0 -4
  220. package/dist/upload/transaction/error-icon.svg +0 -4
  221. package/dist/upload/transaction/file-icon-err.svg +0 -4
  222. package/dist/upload/transaction/file-icon.svg +0 -4
  223. package/dist/upload/transaction/image-icon-err.svg +0 -4
  224. package/dist/upload/transaction/image-icon.svg +0 -4
  225. package/dist/upload/transaction/success-icon.svg +0 -4
  226. package/dist/upload/transaction/video-icon-err.svg +0 -4
  227. package/dist/upload/transaction/video-icon.svg +0 -4
  228. package/dist/wizard/invalid_icon.svg +0 -6
  229. package/dist/wizard/valid_icon.svg +0 -6
  230. package/dist/wizard/validation-wrong.svg +0 -6
  231. package/test/Accordion.test.js +0 -33
  232. package/test/AccordionGroup.test.js +0 -125
  233. package/test/Alert.test.js +0 -53
  234. package/test/Box.test.js +0 -10
  235. package/test/Button.test.js +0 -18
  236. package/test/Card.test.js +0 -30
  237. package/test/Checkbox.test.js +0 -45
  238. package/test/Chip.test.js +0 -25
  239. package/test/Date.test.js +0 -393
  240. package/test/Dialog.test.js +0 -23
  241. package/test/Dropdown.test.js +0 -130
  242. package/test/Footer.test.js +0 -99
  243. package/test/Header.test.js +0 -39
  244. package/test/Heading.test.js +0 -35
  245. package/test/InputText.test.js +0 -240
  246. package/test/Link.test.js +0 -42
  247. package/test/Paginator.test.js +0 -177
  248. package/test/ProgressBar.test.js +0 -35
  249. package/test/Radio.test.js +0 -37
  250. package/test/ResultsetTable.test.js +0 -330
  251. package/test/Select.test.js +0 -192
  252. package/test/Sidenav.test.js +0 -45
  253. package/test/Slider.test.js +0 -82
  254. package/test/Spinner.test.js +0 -27
  255. package/test/Switch.test.js +0 -45
  256. package/test/Table.test.js +0 -36
  257. package/test/Tabs.test.js +0 -109
  258. package/test/TabsForSections.test.js +0 -34
  259. package/test/Tag.test.js +0 -32
  260. package/test/TextArea.test.js +0 -52
  261. package/test/ToggleGroup.test.js +0 -81
  262. package/test/Upload.test.js +0 -60
  263. package/test/Wizard.test.js +0 -130
  264. package/test/mocks/pngMock.js +0 -1
  265. package/test/mocks/svgMock.js +0 -1
@@ -0,0 +1,1567 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.typeface = exports.responsiveSizes = exports.spaces = exports.componentTokens = exports.globalTokens = void 0;
9
+
10
+ var _Icons = require("../header/Icons");
11
+
12
+ var _Icons2 = _interopRequireDefault(require("../footer/Icons"));
13
+
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",
66
+ black: "#000000",
67
+ lightBlack: "#212121",
68
+ yellow: "#FFED00",
69
+ lightGrey: "#D9D9D9",
70
+ darkRed: "#D0011B",
71
+ lightRed: "#FF6161",
72
+ lightBlue: "#CEE0F5",
73
+ lightYellow: "#FCF2BD",
74
+ lightPink: "#F9CFCF",
75
+ lightGreen: "#DBF1C4",
76
+ blue: "#005FCC",
77
+ lighterGrey: "#F8F8F8",
78
+ red: "#D0011B",
79
+ violet: "#8800F6",
80
+ darkBlue: "#006BF6",
81
+ purple: "#6f2c91",
82
+ mediumPurple: "#ead8f3",
83
+ lightPurple: "#f5ebf9",
84
+ lighterPurple: "#d0bddb",
85
+ white: "#ffffff",
86
+ darkGrey: "#666666",
87
+ mediumGrey: "#bfbfbf",
88
+ mediumWhite: "#f9f9f9",
89
+ mediumBlue: "#0067b3",
90
+ softBlue: "#b1cee6",
91
+ darkWhite: "#eeeeee",
92
+ lighterBlack: "#b1b1b1",
93
+ mediumBlack: "#676767",
94
+ mediumGreyBlack: "#dbdbdb",
95
+ lightWhite: "#f2f2f2",
96
+ softGrey: "#cecece",
97
+ softBlack: "#565656",
98
+ // Typography
99
+ type_sans: "Open Sans, sans-serif",
100
+ type_scale_root: "16px",
101
+ type_scale_08: "3.75rem",
102
+ type_scale_07: "3rem",
103
+ type_scale_06: "2rem",
104
+ type_scale_05: "1.5rem",
105
+ type_scale_04: "1.25rem",
106
+ type_scale_03: "1rem",
107
+ type_scale_02: "0.875rem",
108
+ type_scale_01: "0.75rem",
109
+ type_light: "300",
110
+ type_regular: "400",
111
+ type_semibold: "600",
112
+ type_bold: "bold",
113
+ type_italic: "italic",
114
+ type_normal: "normal",
115
+ type_spacing_tight_02: "-0.05em",
116
+ type_spacing_tight_01: "-0.025em",
117
+ type_spacing_normal: "0",
118
+ type_spacing_wide_01: "0.025em",
119
+ type_spacing_wide_02: "0.05em",
120
+ type_spacing_wide_03: "0.1em",
121
+ type_initial: "initial",
122
+ type_uppercase: "uppercase",
123
+ type_no_line: "none",
124
+ type_underline: "underline",
125
+ type_line_through: "line-through",
126
+ type_leading_compact_03: "1em",
127
+ type_leading_compact_02: "1.25em",
128
+ type_leading_compact_01: "1.365em",
129
+ type_leading_normal: "1.5em",
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"
162
+ };
163
+ exports.globalTokens = globalTokens;
164
+ var componentTokens = {
165
+ accordion: {
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,
171
+ assistiveTextFontFamily: globalTokens.type_sans,
172
+ assistiveTextFontSize: globalTokens.type_scale_03,
173
+ assistiveTextFontWeight: globalTokens.type_light,
174
+ assistiveTextFontStyle: globalTokens.type_italic,
175
+ assistiveTextLetterSpacing: globalTokens.type_spacing_wide_01,
176
+ assistiveTextFontColor: globalTokens.hal_grey_s_40,
177
+ disabledAssistiveTextFontColor: globalTokens.hal_grey_l_60,
178
+ assistiveTextMinWidth: "100px",
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,
194
+ borderRadius: "4px",
195
+ boxShadowOffsetX: "0px",
196
+ boxShadowOffsetY: "6px",
197
+ boxShadowBlur: "10px",
198
+ boxShadowColor: "#0000001a",
199
+ iconColor: globalTokens.hal_purple_s_38,
200
+ disabledIconColor: globalTokens.hal_grey_l_60,
201
+ iconSize: "24px",
202
+ iconMarginLeft: "0px",
203
+ iconMarginRigth: "12px",
204
+ accordionGroupSeparatorBorderColor: "#0000001a",
205
+ accordionGroupSeparatorBorderThickness: "1px",
206
+ accordionGroupSeparatorBorderRadius: "0px",
207
+ accordionGroupSeparatorBorderStyle: "solid"
208
+ },
209
+ alert: {
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"
251
+ },
252
+ box: {
253
+ backgroundColor: globalTokens.white,
254
+ letterSpacing: globalTokens.type_spacing_wide_01,
255
+ borderRadius: "4px",
256
+ borderThickness: "0px",
257
+ borderStyle: "none",
258
+ borderColor: globalTokens.transparent,
259
+ noneShadowDepthShadowOffsetX: "none",
260
+ noneShadowDepthShadowOffsetY: "none",
261
+ noneShadowDepthShadowBlur: "none",
262
+ noneShadowDepthShadowSpread: "none",
263
+ noneShadowDepthShadowColor: globalTokens.transparent,
264
+ oneShadowDepthShadowOffsetX: "0px",
265
+ oneShadowDepthShadowOffsetY: "3px",
266
+ oneShadowDepthShadowBlur: "6px",
267
+ oneShadowDepthShadowSpread: "0px",
268
+ oneShadowDepthShadowColor: "#00000033",
269
+ twoShadowDepthShadowOffsetX: "0px",
270
+ twoShadowDepthShadowOffsetY: "3px",
271
+ twoShadowDepthShadowBlur: "10px",
272
+ twoShadowDepthShadowSpread: "0px",
273
+ twoShadowDepthShadowColor: "#00000033"
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
+ },
349
+ checkbox: {
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"
376
+ },
377
+ chip: {
378
+ backgroundColor: globalTokens.hal_grey_l_90,
379
+ disabledBackgroundColor: globalTokens.hal_grey_l_95,
380
+ fontFamily: globalTokens.type_sans,
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
399
+ },
400
+ date: {
401
+ pickerSelectedDateBackgroundColor: globalTokens.purple,
402
+ pickerSelectedDateColor: globalTokens.hal_white,
403
+ pickerBackgroundColor: globalTokens.hal_white,
404
+ pickerFontColor: globalTokens.hal_black,
405
+ pickerHoverDateBackgroundColor: globalTokens.lighterPurple,
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,
413
+ fontFamily: globalTokens.type_sans,
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"
433
+ },
434
+ dialog: {
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"
452
+ },
453
+ dropdown: {
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,
495
+ scrollBarTrackColor: globalTokens.lightGrey,
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
+ dragoverDropBackgroundColor: 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
549
+ },
550
+ footer: {
551
+ height: "124px",
552
+ backgroundColor: globalTokens.hal_black,
553
+ bottomLinksDividerColor: globalTokens.hal_blue_l_50,
554
+ bottomLinksDividerThickness: "1px",
555
+ bottomLinksDividerStyle: "solid",
556
+ bottomLinksDividerSpacing: "8px",
557
+ bottomLinksFontFamily: globalTokens.type_sans,
558
+ bottomLinksFontSize: globalTokens.type_scale_01,
559
+ bottomLinksFontStyle: globalTokens.type_normal,
560
+ bottomLinksFontWeight: globalTokens.type_regular,
561
+ bottomLinksFontColor: globalTokens.hal_white,
562
+ bottomLinksTextDecoration: globalTokens.type_no_line,
563
+ copyrightFontFamily: globalTokens.type_sans,
564
+ copyrightFontSize: globalTokens.type_scale_01,
565
+ copyrightFontStyle: globalTokens.type_normal,
566
+ copyrightFontWeight: globalTokens.type_regular,
567
+ copyrightFontColor: globalTokens.hal_white,
568
+ logo: _Icons2["default"],
569
+ logoHeight: "32px",
570
+ logoWidth: "auto",
571
+ socialLinksSize: "24px",
572
+ socialLinksGutter: "16px",
573
+ socialLinksColor: globalTokens.hal_white
574
+ },
575
+ header: {
576
+ backgroundColor: globalTokens.hal_white,
577
+ hamburguerFocusColor: globalTokens.hal_blue_l_50,
578
+ hamburguerFontFamily: globalTokens.type_sans,
579
+ hamburguerFontStyle: globalTokens.type_normal,
580
+ hamburguerFontColor: globalTokens.hal_black,
581
+ hamburguerFontSize: "10px",
582
+ hamburguerFontWeight: globalTokens.type_semibold,
583
+ hamburguerTextTransform: globalTokens.type_uppercase,
584
+ hamburguerIconColor: globalTokens.hal_black,
585
+ hamburguerHoverColor: globalTokens.mediumGreyBlack,
586
+ logo: _Icons.dxcLogo,
587
+ logoResponsive: _Icons.dxcLogo,
588
+ logoHeight: "40px",
589
+ logoWidth: "auto",
590
+ menuBackgroundColor: globalTokens.hal_white,
591
+ menuZindex: "2000",
592
+ menuTabletWidth: "60vw",
593
+ menuMobileWidth: "100vw",
594
+ minHeight: "64px",
595
+ overlayColor: globalTokens.softBlack,
596
+ overlayOpacity: "0.7",
597
+ overlayZindex: "1600",
598
+ paddingTop: "0px",
599
+ paddingBottom: "0px",
600
+ paddingRight: "24px",
601
+ paddingLeft: "24px",
602
+ underlinedColor: globalTokens.hal_black,
603
+ underlinedThickness: "2px",
604
+ underlinedStyle: "solid",
605
+ contentColor: globalTokens.hal_black,
606
+ contentColorOnDark: globalTokens.hal_white
607
+ },
608
+ heading: {
609
+ level1FontColor: globalTokens.inherit,
610
+ level1FontFamily: globalTokens.type_sans,
611
+ level1FontSize: globalTokens.type_scale_08,
612
+ level1FontStyle: globalTokens.type_normal,
613
+ level1FontWeight: globalTokens.type_regular,
614
+ level1LineHeight: globalTokens.type_leading_compact_01,
615
+ level1LetterSpacing: globalTokens.type_spacing_tight_01,
616
+ level2FontColor: globalTokens.inherit,
617
+ level2FontFamily: globalTokens.type_sans,
618
+ level2FontSize: globalTokens.type_scale_07,
619
+ level2FontStyle: globalTokens.type_normal,
620
+ level2FontWeight: globalTokens.type_regular,
621
+ level2LineHeight: globalTokens.type_leading_normal,
622
+ level2LetterSpacing: globalTokens.type_spacing_normal,
623
+ level3FontColor: globalTokens.inherit,
624
+ level3FontFamily: globalTokens.type_sans,
625
+ level3FontSize: globalTokens.type_scale_06,
626
+ level3FontStyle: globalTokens.type_normal,
627
+ level3FontWeight: globalTokens.type_regular,
628
+ level3LineHeight: globalTokens.type_leading_compact_01,
629
+ level3LetterSpacing: globalTokens.type_spacing_wide_01,
630
+ level4FontColor: globalTokens.inherit,
631
+ level4FontFamily: globalTokens.type_sans,
632
+ level4FontSize: globalTokens.type_scale_05,
633
+ level4FontStyle: globalTokens.type_normal,
634
+ level4FontWeight: globalTokens.type_regular,
635
+ level4LineHeight: globalTokens.type_leading_normal,
636
+ level4LetterSpacing: globalTokens.type_spacing_normal,
637
+ level5FontColor: globalTokens.inherit,
638
+ level5FontFamily: globalTokens.type_sans,
639
+ level5FontSize: globalTokens.type_scale_04,
640
+ level5FontStyle: globalTokens.type_normal,
641
+ level5FontWeight: globalTokens.type_regular,
642
+ level5LineHeight: globalTokens.type_leading_normal,
643
+ level5LetterSpacing: globalTokens.type_spacing_wide_01
644
+ },
645
+ inputText: {
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",
667
+ scrollBarThumbColor: globalTokens.darkGrey,
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: {
705
+ fontFamily: globalTokens.type_sans,
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
+ inputMarginTop: globalTokens.spacing_02,
721
+ inputMarginBottom: globalTokens.spacing_02,
722
+ errorMessageColor: globalTokens.hal_red_s_41,
723
+ errorMessageColorOnDark: globalTokens.hal_red_l_60,
724
+ errorIconColor: globalTokens.hal_red_s_41,
725
+ errorIconColorOnDark: globalTokens.hal_red_l_60,
726
+ labelFontColor: globalTokens.hal_black,
727
+ labelFontColorOnDark: globalTokens.hal_white,
728
+ labelFontSize: globalTokens.type_scale_02,
729
+ labelFontStyle: globalTokens.type_normal,
730
+ labelFontWeight: globalTokens.type_semibold,
731
+ labelLineHeight: globalTokens.type_leading_loose_01,
732
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
733
+ disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
734
+ optionalLabelFontWeight: globalTokens.type_regular,
735
+ helperTextFontColor: globalTokens.hal_black,
736
+ helperTextFontColorOnDark: globalTokens.hal_white,
737
+ helperTextFontSize: globalTokens.type_scale_01,
738
+ helperTextFontStyle: globalTokens.type_normal,
739
+ helperTextFontWeight: globalTokens.type_regular,
740
+ helperTextLineHeight: globalTokens.type_leading_normal,
741
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
742
+ disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
743
+ prefixColor: globalTokens.hal_grey_s_40,
744
+ prefixColorOnDark: globalTokens.hal_white,
745
+ suffixColor: globalTokens.hal_grey_s_40,
746
+ suffixColorOnDark: globalTokens.hal_white,
747
+ disabledPrefixColor: globalTokens.hal_grey_l_75,
748
+ disabledSuffixColor: globalTokens.hal_grey_l_75,
749
+ disabledPrefixColorOnDark: globalTokens.hal_grey_l_60,
750
+ disabledSuffixColorOnDark: globalTokens.hal_grey_l_60,
751
+ placeholderFontColor: "#000000b3",
752
+ placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
753
+ disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
754
+ disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
755
+ valueFontColor: globalTokens.hal_black,
756
+ valueFontColorOnDark: globalTokens.hal_white,
757
+ valueFontSize: globalTokens.type_scale_03,
758
+ valueFontStyle: globalTokens.type_normal,
759
+ valueFontWeight: globalTokens.type_regular,
760
+ disabledValueFontColor: globalTokens.hal_grey_l_60,
761
+ disabledValueFontColorOnDark: globalTokens.hal_grey_l_60,
762
+ actionIconColor: globalTokens.hal_black,
763
+ actionIconColorOnDark: globalTokens.hal_white,
764
+ disabledActionIconColor: globalTokens.hal_grey_l_60,
765
+ disabledActionIconColorOnDark: globalTokens.hal_grey_l_60,
766
+ hoverActionIconColor: globalTokens.hal_black,
767
+ hoverActionIconColorOnDark: globalTokens.hal_white,
768
+ focusActionIconColor: globalTokens.hal_black,
769
+ focusActionIconColorOnDark: globalTokens.hal_white,
770
+ activeActionIconColor: globalTokens.hal_black,
771
+ activeActionIconColorOnDark: globalTokens.hal_black,
772
+ actionBackgroundColor: globalTokens.transparent,
773
+ actionBackgroundColorOnDark: globalTokens.transparent,
774
+ disabledActionBackgroundColor: globalTokens.transparent,
775
+ disabledActionBackgroundColorOnDark: globalTokens.transparent,
776
+ hoverActionBackgroundColor: globalTokens.hal_grey_l_95,
777
+ hoverActionBackgroundColorOnDark: globalTokens.hal_grey_s_40,
778
+ focusActionBorderColor: globalTokens.hal_blue_l_50,
779
+ focusActionBorderColorOnDark: globalTokens.hal_blue_l_50,
780
+ activeActionBackgroundColor: globalTokens.hal_grey_l_80,
781
+ activeActionBackgroundColorOnDark: globalTokens.hal_grey_l_60,
782
+ listDialogBackgroundColor: globalTokens.hal_white,
783
+ listDialogBorderColor: globalTokens.hal_black,
784
+ listOptionDividerColor: globalTokens.hal_grey_l_90,
785
+ listOptionFontColor: globalTokens.hal_black,
786
+ listOptionFontSize: globalTokens.type_scale_02,
787
+ listOptionFontStyle: globalTokens.type_normal,
788
+ listOptionFontWeight: globalTokens.type_regular,
789
+ systemMessageFontColor: globalTokens.hal_grey_s_40,
790
+ errorListDialogFontColor: globalTokens.hal_black,
791
+ errorListDialogBackgroundColor: globalTokens.color_red_50,
792
+ errorListDialogBorderColor: globalTokens.hal_red_s_41,
793
+ hoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
794
+ activeListOptionBackgroundColor: globalTokens.hal_grey_l_80,
795
+ focusListOptionBorderColor: globalTokens.hal_blue_l_50
796
+ },
797
+ link: {
798
+ fontColor: globalTokens.hal_blue_s_35,
799
+ fontFamily: globalTokens.inherit,
800
+ fontSize: globalTokens.type_scale_root,
801
+ fontStyle: globalTokens.type_normal,
802
+ fontWeight: globalTokens.type_regular,
803
+ iconSize: "16px",
804
+ iconSpacing: "4px",
805
+ underlineSpacing: "0px",
806
+ underlineStyle: "solid",
807
+ underlineThickness: "1px",
808
+ disabledColor: globalTokens.lightGrey,
809
+ hoverFontColor: globalTokens.hal_blue_s_35,
810
+ hoverUnderlineColor: globalTokens.hal_blue_s_35,
811
+ visitedFontColor: globalTokens.purple,
812
+ visitedUnderlineColor: globalTokens.purple,
813
+ activeFontColor: globalTokens.black,
814
+ activeUnderlineColor: globalTokens.black,
815
+ focusColor: globalTokens.hal_blue_l_50
816
+ },
817
+ paginator: {
818
+ backgroundColor: globalTokens.darkWhite,
819
+ fontColor: globalTokens.hal_black,
820
+ fontFamily: globalTokens.type_sans,
821
+ fontSize: globalTokens.type_scale_02,
822
+ fontStyle: globalTokens.type_normal,
823
+ fontWeight: globalTokens.type_regular,
824
+ fontTextTransform: "none",
825
+ height: "64px",
826
+ width: "100%",
827
+ marginRight: "40px",
828
+ marginLeft: "20px",
829
+ itemsPerPageSelectorMarginLeft: "0px",
830
+ itemsPerPageSelectorMarginRight: "30px",
831
+ pageSelectorMarginRight: "30px",
832
+ pageSelectorMarginLeft: "0px",
833
+ totalItemsContainerMarginRight: "30px",
834
+ totalItemsContainerMarginLeft: "0px"
835
+ },
836
+ progressBar: {
837
+ trackLineColor: globalTokens.hal_purple_s_38,
838
+ trackLineColorOnDark: globalTokens.hal_purple_l_65,
839
+ totalLineColor: globalTokens.softGrey,
840
+ labelFontFamily: globalTokens.type_sans,
841
+ labelFontSize: globalTokens.type_scale_01,
842
+ labelFontStyle: globalTokens.type_normal,
843
+ labelFontWeight: globalTokens.type_regular,
844
+ labelFontColor: globalTokens.black,
845
+ labelFontColorOnDark: globalTokens.hal_white,
846
+ labelFontTextTransform: globalTokens.type_uppercase,
847
+ valueFontFamily: globalTokens.type_sans,
848
+ valueFontSize: globalTokens.type_scale_01,
849
+ valueFontStyle: globalTokens.type_normal,
850
+ valueFontWeight: globalTokens.type_regular,
851
+ valueFontColor: globalTokens.black,
852
+ valueFontColorOnDark: globalTokens.hal_white,
853
+ valueFontTextTransform: globalTokens.type_uppercase,
854
+ helperTextFontColor: globalTokens.black,
855
+ helperTextFontColorOnDark: globalTokens.hal_white,
856
+ helperTextFontSize: globalTokens.type_scale_01,
857
+ helperTextFontStyle: globalTokens.type_normal,
858
+ helperTextFontWeight: globalTokens.type_regular,
859
+ helperTextFontFamily: globalTokens.type_sans,
860
+ thickness: "9px",
861
+ borderRadius: "5px",
862
+ overlayColor: globalTokens.black,
863
+ overlayOpacity: "0.8"
864
+ },
865
+ radio: {
866
+ circleLabelSpacing: "10px",
867
+ circleSize: "24px",
868
+ color: globalTokens.black,
869
+ colorOnDark: globalTokens.white,
870
+ disabledColor: globalTokens.lighterBlack,
871
+ disabledColorOnDark: "#575757",
872
+ disabledFontColor: globalTokens.lighterBlack,
873
+ disabledFontColorOnDark: "#575757",
874
+ focusColor: globalTokens.hal_blue_l_50,
875
+ focusColorOnDark: "#1682FF",
876
+ fontColor: globalTokens.inherit,
877
+ fontColorOnDark: globalTokens.white,
878
+ fontFamily: globalTokens.type_sans,
879
+ fontSize: globalTokens.type_scale_root,
880
+ fontStyle: globalTokens.type_normal,
881
+ fontWeight: globalTokens.type_regular
882
+ },
883
+ select: {
884
+ fontFamily: globalTokens.type_sans,
885
+ disabledColor: globalTokens.hal_grey_l_60,
886
+ enabledInputBorderColor: globalTokens.hal_black,
887
+ hoverInputBorderColor: globalTokens.hal_purple_l_65,
888
+ focusInputBorderColor: globalTokens.hal_blue_l_50,
889
+ errorInputBorderColor: globalTokens.hal_red_s_41,
890
+ hoverInputErrorBorderColor: globalTokens.color_red_600,
891
+ disabledInputBorderColor: globalTokens.hal_grey_l_60,
892
+ disabledInputBackgroundColor: globalTokens.hal_grey_l_95,
893
+ inputMarginTop: globalTokens.spacing_02,
894
+ inputMarginBottom: globalTokens.spacing_02,
895
+ errorMessageColor: globalTokens.hal_red_s_41,
896
+ errorIconColor: globalTokens.hal_red_s_41,
897
+ labelFontColor: globalTokens.hal_black,
898
+ labelFontSize: globalTokens.type_scale_02,
899
+ labelFontStyle: globalTokens.type_normal,
900
+ labelFontWeight: globalTokens.type_semibold,
901
+ labelLineHeight: globalTokens.type_leading_loose_01,
902
+ optionalLabelFontWeight: globalTokens.type_regular,
903
+ helperTextFontColor: globalTokens.hal_black,
904
+ helperTextFontSize: globalTokens.type_scale_01,
905
+ helperTextFontStyle: globalTokens.type_normal,
906
+ helperTextFontWeight: globalTokens.type_regular,
907
+ helperTextLineHeight: globalTokens.type_leading_normal,
908
+ placeholderFontColor: "#000000b3",
909
+ valueFontColor: globalTokens.hal_black,
910
+ valueFontSize: globalTokens.type_scale_03,
911
+ valueFontStyle: globalTokens.type_normal,
912
+ valueFontWeight: globalTokens.type_regular,
913
+ actionIconColor: globalTokens.hal_black,
914
+ hoverActionIconColor: globalTokens.hal_black,
915
+ activeActionIconColor: globalTokens.hal_black,
916
+ actionBackgroundColor: globalTokens.transparent,
917
+ hoverActionBackgroundColor: globalTokens.hal_grey_l_95,
918
+ activeActionBackgroundColor: globalTokens.hal_grey_l_80,
919
+ listOptionFontColor: globalTokens.hal_black,
920
+ listOptionFontSize: globalTokens.type_scale_02,
921
+ listOptionFontStyle: globalTokens.type_normal,
922
+ listOptionFontWeight: globalTokens.type_regular,
923
+ listOptionIconColor: globalTokens.hal_black,
924
+ listOptionDividerColor: globalTokens.hal_grey_l_90,
925
+ listGroupLabelFontWeight: globalTokens.type_semibold,
926
+ focusListOptionBorderColor: globalTokens.hal_blue_l_50,
927
+ systemMessageFontColor: globalTokens.hal_grey_s_40,
928
+ collapseIndicatorColor: globalTokens.hal_black,
929
+ listDialogBackgroundColor: globalTokens.hal_white,
930
+ listDialogBorderColor: globalTokens.hal_grey_l_75,
931
+ selectedListOptionBackgroundColor: globalTokens.hal_blue_l_95,
932
+ selectedHoverListOptionBackgroundColor: globalTokens.color_blue_200,
933
+ selectedActiveListOptionBackgroundColor: globalTokens.hal_blue_l_80,
934
+ selectedListOptionIconColor: globalTokens.hal_blue_d_20,
935
+ unselectedHoverListOptionBackgroundColor: globalTokens.hal_grey_l_95,
936
+ unselectedActiveListOptionBackgroundColor: globalTokens.hal_grey_l_90,
937
+ selectionIndicatorFontColor: globalTokens.hal_black,
938
+ selectionIndicatorFontSize: globalTokens.type_scale_01,
939
+ selectionIndicatorFontStyle: globalTokens.type_regular,
940
+ selectionIndicatorFontWeight: globalTokens.type_normal,
941
+ selectionIndicatorBorderColor: globalTokens.hal_grey_l_75,
942
+ selectionIndicatorBackgroundColor: globalTokens.color_grey_50,
943
+ enabledSelectionIndicatorActionBackgroundColor: globalTokens.transparent,
944
+ enabledSelectionIndicatorActionIconColor: globalTokens.hal_black,
945
+ hoverSelectionIndicatorActionBackgroundColor: globalTokens.hal_grey_l_95,
946
+ hoverSelectionIndicatorActionIconColor: globalTokens.hal_black,
947
+ activeSelectionIndicatorActionBackgroundColor: globalTokens.hal_grey_l_80,
948
+ activeSelectionIndicatorActionIconColor: globalTokens.hal_black
949
+ },
950
+ V3Select: {
951
+ fontFamily: globalTokens.type_sans,
952
+ assistiveTextFontColor: globalTokens.hal_black,
953
+ assistiveTextFontColorOnDark: globalTokens.hal_white,
954
+ assistiveTextFontSize: globalTokens.type_scale_01,
955
+ assistiveTextFontStyle: globalTokens.type_normal,
956
+ assistiveTextFontWeight: globalTokens.type_regular,
957
+ labelFontColor: globalTokens.hal_black,
958
+ labelFontColorOnDark: globalTokens.hal_white,
959
+ labelFontSize: globalTokens.type_scale_03,
960
+ labelFontStyle: globalTokens.type_normal,
961
+ labelFontWeight: globalTokens.type_regular,
962
+ disabledColor: globalTokens.lighterBlack,
963
+ disabledColorOnDark: "#575757",
964
+ errorColor: globalTokens.red,
965
+ errorColorOnDark: globalTokens.hal_red_l_60,
966
+ optionBackgroundColor: globalTokens.hal_white,
967
+ optionBorderColor: globalTokens.hal_black,
968
+ optionBorderThickness: "0px",
969
+ optionBorderStyle: "solid",
970
+ optionFontColor: globalTokens.hal_black,
971
+ optionFontColorOnDark: globalTokens.hal_white,
972
+ optionFontSize: globalTokens.type_scale_root,
973
+ optionFontStyle: globalTokens.type_normal,
974
+ optionFontWeight: globalTokens.type_regular,
975
+ optionPaddingBottom: "6px",
976
+ optionPaddingTop: "6px",
977
+ scrollBarThumbColor: globalTokens.hal_grey_s_40,
978
+ scrollBarTrackColor: globalTokens.lightGrey,
979
+ optionIconColor: globalTokens.hal_black,
980
+ optionIconColorOnDark: globalTokens.hal_white,
981
+ optionIconSpacing: "12px",
982
+ optionIconSize: "20px",
983
+ optionCheckboxSpacing: "12px",
984
+ hoverOptionBackgroundColor: globalTokens.hal_grey_l_95,
985
+ hoverOptionBackgroundColorOnDark: globalTokens.hal_grey_l_95,
986
+ activeOptionBackgroundColor: globalTokens.hal_grey_l_80,
987
+ activeOptionBackgroundColorOnDark: globalTokens.hal_grey_l_80,
988
+ selectedOptionBackgroundColor: globalTokens.lightGrey,
989
+ selectedOptionBackgroundColorOnDark: globalTokens.lightGrey,
990
+ underlineColor: globalTokens.hal_black,
991
+ underlineColorOnDark: globalTokens.hal_white,
992
+ underlineFocusColor: globalTokens.hal_black,
993
+ underlineFocusColorOnDark: globalTokens.hal_white,
994
+ underlineThickness: "1px",
995
+ valueFontColor: globalTokens.hal_black,
996
+ valueFontColorOnDark: globalTokens.hal_white,
997
+ valueFontSize: globalTokens.type_scale_03,
998
+ valueFontStyle: globalTokens.type_normal,
999
+ valueFontWeight: globalTokens.type_regular,
1000
+ valueIconColor: globalTokens.hal_black,
1001
+ valueIconColorOnDark: globalTokens.hal_white,
1002
+ valueIconSize: "20px",
1003
+ valueIconSpacing: "12px",
1004
+ arrowColor: globalTokens.hal_black,
1005
+ arrowColorOnDark: globalTokens.hal_white,
1006
+ focusColor: globalTokens.hal_blue_l_50,
1007
+ focusColorOnDark: globalTokens.hal_blue_l_50
1008
+ },
1009
+ sidenav: {
1010
+ backgroundColor: globalTokens.hal_grey_l_95,
1011
+ arrowContainerColor: globalTokens.hal_grey_l_90,
1012
+ arrowColor: globalTokens.hal_black,
1013
+ titleFontFamily: globalTokens.type_sans,
1014
+ titleFontSize: globalTokens.type_scale_05,
1015
+ titleFontStyle: globalTokens.type_normal,
1016
+ titleFontWeight: globalTokens.type_regular,
1017
+ titleFontColor: globalTokens.hal_black,
1018
+ titleFontTextTransform: "none",
1019
+ titleFontLetterSpacing: globalTokens.type_spacing_normal,
1020
+ subtitleFontFamily: globalTokens.type_sans,
1021
+ subtitleFontSize: globalTokens.type_scale_03,
1022
+ subtitleFontStyle: globalTokens.type_normal,
1023
+ subtitleFontWeight: globalTokens.type_regular,
1024
+ subtitleFontColor: globalTokens.color_grey_800,
1025
+ subtitleFontTextTransform: globalTokens.type_uppercase,
1026
+ subtitleFontLetterSpacing: globalTokens.type_spacing_wide_02,
1027
+ linkFontFamily: globalTokens.type_sans,
1028
+ linkFontSize: globalTokens.type_scale_02,
1029
+ linkFontStyle: globalTokens.type_normal,
1030
+ linkFontWeight: globalTokens.type_regular,
1031
+ linkFontColor: globalTokens.color_grey_800,
1032
+ linkFontTextTransform: "none",
1033
+ linkFontLetterSpacing: globalTokens.type_spacing_wide_01,
1034
+ linkTextDecoration: globalTokens.type_no_line,
1035
+ linkMarginTop: "4px",
1036
+ linkMarginBottom: "4px",
1037
+ linkMarginRight: "16px",
1038
+ linkMarginLeft: "16px",
1039
+ linkFocusColor: globalTokens.hal_blue_l_50,
1040
+ scrollBarThumbColor: "#66666626",
1041
+ scrollBarTrackColor: globalTokens.transparent
1042
+ },
1043
+ slider: {
1044
+ fontFamily: globalTokens.type_sans,
1045
+ fontSize: globalTokens.type_scale_03,
1046
+ fontStyle: globalTokens.type_normal,
1047
+ fontWeight: globalTokens.type_regular,
1048
+ labelFontFamily: globalTokens.type_sans,
1049
+ labelFontSize: globalTokens.type_scale_02,
1050
+ labelFontStyle: globalTokens.type_normal,
1051
+ labelFontWeight: globalTokens.type_semibold,
1052
+ labelLineHeight: globalTokens.type_leading_loose_01,
1053
+ helperTextFontFamily: globalTokens.type_sans,
1054
+ helperTextFontSize: globalTokens.type_scale_01,
1055
+ helperTextFontStyle: globalTokens.type_normal,
1056
+ helperTextFontWeight: globalTokens.type_regular,
1057
+ helperTextLineHeight: globalTokens.type_leading_normal,
1058
+ fontColor: globalTokens.hal_black,
1059
+ fontColorOnDark: globalTokens.hal_white,
1060
+ labelFontColor: globalTokens.hal_black,
1061
+ helperTextFontColor: globalTokens.hal_black,
1062
+ disabledFontColor: globalTokens.hal_grey_l_60,
1063
+ fontLetterSpacing: globalTokens.type_spacing_normal,
1064
+ thumbHeight: "12px",
1065
+ thumbWidth: "12px",
1066
+ hoverThumbHeight: "14px",
1067
+ hoverThumbWidth: "14px",
1068
+ thumbVerticalPosition: "12px",
1069
+ hoverThumbVerticalPosition: "11px",
1070
+ thumbBackgroundColor: globalTokens.hal_blue_s_35,
1071
+ thumbBackgroundColorOnDark: globalTokens.hal_blue_l_50,
1072
+ hoverThumbScale: "1.166666",
1073
+ hoverThumbBackgroundColor: globalTokens.hal_blue_d_20,
1074
+ hoverThumbBackgroundColorOnDark: globalTokens.hal_blue_d_20,
1075
+ activeThumbScale: "1.166666",
1076
+ activeThumbBackgroundColor: globalTokens.hal_blue_d_20,
1077
+ activeThumbBackgroundColorOnDark: globalTokens.hal_blue_d_20,
1078
+ focusThumbBackgroundColor: globalTokens.hal_blue_s_35,
1079
+ focusThumbBackgroundColorOnDark: globalTokens.hal_blue_l_50,
1080
+ tickHeight: "4px",
1081
+ tickWidth: "4px",
1082
+ tickVerticalPosition: "11px",
1083
+ tickBackgroundColor: globalTokens.hal_blue_s_35,
1084
+ tickBackgroundColorOnDark: globalTokens.hal_blue_l_50,
1085
+ trackLineThickness: "2px",
1086
+ trackLineVerticalPosition: "50%",
1087
+ trackLineColor: globalTokens.hal_blue_s_35,
1088
+ trackLineColorOnDark: globalTokens.hal_blue_l_50,
1089
+ totalLineThickness: "2px",
1090
+ totalLineVerticalPosition: "50%",
1091
+ totalLineColor: globalTokens.hal_grey_l_90,
1092
+ totalLineColorOnDark: globalTokens.hal_grey_l_75,
1093
+ disabledThumbVerticalPosition: "10px",
1094
+ disabledThumbBackgroundColor: globalTokens.hal_grey_l_60,
1095
+ disabledThumbBackgroundColorOnDark: "#575757",
1096
+ disabledTickVerticalPosition: "11px",
1097
+ disabledTickBackgroundColor: globalTokens.hal_grey_l_60,
1098
+ disabledTickBackgroundColorOnDark: globalTokens.hal_grey_l_60,
1099
+ disabledTrackLineColor: globalTokens.hal_grey_l_60,
1100
+ disabledTrackLineColorOnDark: globalTokens.hal_grey_l_60,
1101
+ disabledTotalLineColor: globalTokens.hal_grey_l_95,
1102
+ disabledTotalLineColorOnDark: globalTokens.hal_grey_s_40,
1103
+ focusColor: globalTokens.hal_blue_l_50,
1104
+ focusColorOnDark: globalTokens.hal_blue_l_50,
1105
+ floorLabelMarginRight: globalTokens.type_scale_03,
1106
+ ceilLabelMarginLeft: globalTokens.type_scale_03,
1107
+ inputMarginLeft: globalTokens.type_scale_06
1108
+ },
1109
+ spinner: {
1110
+ trackCircleColor: "#5f249f",
1111
+ trackCircleColorOnDark: "#a46ede",
1112
+ totalCircleColor: globalTokens.white,
1113
+ labelFontFamily: globalTokens.type_sans,
1114
+ labelFontSize: globalTokens.type_scale_02,
1115
+ labelFontStyle: globalTokens.type_normal,
1116
+ labelFontWeight: globalTokens.type_regular,
1117
+ labelFontColor: globalTokens.black,
1118
+ labelFontColorOnDark: globalTokens.white,
1119
+ labelTextAlign: "center",
1120
+ progressValueFontFamily: globalTokens.type_sans,
1121
+ progressValueFontSize: globalTokens.type_scale_02,
1122
+ progressValueFontStyle: globalTokens.type_normal,
1123
+ progressValueFontWeight: globalTokens.type_bold,
1124
+ progressValueFontColor: globalTokens.inherit,
1125
+ progressValueFontColorOnDark: globalTokens.white,
1126
+ progressValueTextAlign: "center",
1127
+ overlayBackgroundColor: globalTokens.black,
1128
+ overlayOpacity: "0.8",
1129
+ overlayLabelFontFamily: globalTokens.type_sans,
1130
+ overlayLabelFontSize: globalTokens.type_scale_02,
1131
+ overlayLabelFontStyle: globalTokens.type_normal,
1132
+ overlayLabelFontWeight: globalTokens.type_regular,
1133
+ overlayLabelFontColor: globalTokens.white,
1134
+ overlayLabelTextAlign: "center",
1135
+ overlayProgressValueFontFamily: globalTokens.type_sans,
1136
+ overlayProgressValueFontSize: globalTokens.type_scale_02,
1137
+ overlayProgressValueFontStyle: globalTokens.type_normal,
1138
+ overlayProgressValueFontWeight: globalTokens.type_bold,
1139
+ overlayProgressValueFontColor: globalTokens.white,
1140
+ overlayProgressValueTextAlign: "center"
1141
+ },
1142
+ "switch": {
1143
+ checkedTrackBackgroundColor: globalTokens.hal_purple_s_38,
1144
+ checkedTrackBackgroundColorOnDark: globalTokens.hal_purple_s_38,
1145
+ checkedThumbBackgroundColor: globalTokens.white,
1146
+ checkedThumbBackgroundColorOnDark: globalTokens.white,
1147
+ uncheckedTrackBackgroundColor: globalTokens.lightGrey,
1148
+ uncheckedTrackBackgroundColorOnDark: globalTokens.lightGrey,
1149
+ uncheckedThumbBackgroundColor: globalTokens.white,
1150
+ uncheckedThumbBackgroundColorOnDark: globalTokens.white,
1151
+ disabledCheckedTrackBackgroundColor: globalTokens.lightPurple,
1152
+ disabledCheckedTrackBackgroundColorOnDark: "#1c0b24",
1153
+ disabledCheckedThumbBackgroundColor: globalTokens.white,
1154
+ disabledCheckedThumbBackgroundColorOnDark: globalTokens.white,
1155
+ disabledUncheckedTrackBackgroundColor: globalTokens.lightWhite,
1156
+ disabledUncheckedTrackBackgroundColorOnDark: "#363636",
1157
+ disabledUncheckedThumbBackgroundColor: globalTokens.white,
1158
+ disabledUncheckedThumbBackgroundColorOnDark: globalTokens.white,
1159
+ disabledLabelFontColor: globalTokens.lighterBlack,
1160
+ disabledLabelFontColorOnDark: "#575757",
1161
+ disabledLabelFontStyle: globalTokens.type_normal,
1162
+ labelFontFamily: globalTokens.type_sans,
1163
+ labelFontSize: globalTokens.type_scale_root,
1164
+ labelFontStyle: globalTokens.type_normal,
1165
+ labelFontWeight: globalTokens.type_regular,
1166
+ labelFontColor: globalTokens.black,
1167
+ labelFontColorOnDark: globalTokens.white,
1168
+ thumbFocusColor: globalTokens.blue,
1169
+ thumbFocusColorOnDark: "#1682FF",
1170
+ thumbHeight: "24px",
1171
+ thumbWidth: "24px",
1172
+ thumbShift: "40%",
1173
+ trackHeight: "12px",
1174
+ trackWidth: "60px",
1175
+ spaceBetweenLabelSwitch: "0px"
1176
+ },
1177
+ tag: {
1178
+ fontFamily: globalTokens.type_sans,
1179
+ fontColor: globalTokens.hal_black,
1180
+ fontSize: globalTokens.type_scale_02,
1181
+ fontStyle: globalTokens.type_normal,
1182
+ fontWeight: globalTokens.type_regular,
1183
+ labelPaddingTop: "0px",
1184
+ labelPaddingBottom: "0px",
1185
+ labelPaddingLeft: "16px",
1186
+ labelPaddingRight: "16px",
1187
+ height: "40px",
1188
+ iconColor: globalTokens.hal_white,
1189
+ iconSectionWidth: "40px",
1190
+ iconHeight: "24px",
1191
+ iconWidth: "auto",
1192
+ focusColor: globalTokens.hal_blue_l_50
1193
+ },
1194
+ table: {
1195
+ rowSeparatorThickness: "1px",
1196
+ rowSeparatorStyle: "solid",
1197
+ rowSeparatorColor: globalTokens.lightGrey,
1198
+ dataBackgroundColor: globalTokens.white,
1199
+ dataFontFamily: globalTokens.type_sans,
1200
+ dataFontSize: globalTokens.type_scale_02,
1201
+ dataFontStyle: globalTokens.type_normal,
1202
+ dataFontWeight: globalTokens.type_regular,
1203
+ dataFontColor: globalTokens.black,
1204
+ dataFontTextTransform: "none",
1205
+ dataPaddingTop: "14px",
1206
+ dataPaddingBottom: "12px",
1207
+ dataPaddingRight: "20px",
1208
+ dataPaddingLeft: "40px",
1209
+ dataTextAlign: "left",
1210
+ dataTextLineHeight: "normal",
1211
+ headerBackgroundColor: globalTokens.hal_purple_s_38,
1212
+ headerBorderRadius: "4px",
1213
+ headerFontFamily: globalTokens.type_sans,
1214
+ headerFontSize: globalTokens.type_scale_02,
1215
+ headerFontStyle: globalTokens.type_normal,
1216
+ headerFontWeight: globalTokens.type_regular,
1217
+ headerFontColor: globalTokens.white,
1218
+ headerFontTextTransform: "none",
1219
+ headerPaddingTop: "16px",
1220
+ headerPaddingBottom: "16px",
1221
+ headerPaddingRight: "20px",
1222
+ headerPaddingLeft: "40px",
1223
+ headerTextAlign: "left",
1224
+ headerTextLineHeight: "normal",
1225
+ scrollBarThumbColor: globalTokens.darkGrey,
1226
+ scrollBarTrackColor: globalTokens.lightGrey,
1227
+ sortIconColor: globalTokens.white
1228
+ },
1229
+ tabs: {
1230
+ fontFamily: globalTokens.type_sans,
1231
+ fontSize: globalTokens.type_scale_03,
1232
+ fontStyle: globalTokens.type_normal,
1233
+ fontWeight: globalTokens.type_semibold,
1234
+ fontTextTransform: "none",
1235
+ selectedBackgroundColor: globalTokens.white,
1236
+ selectedFontColor: "#5f249f",
1237
+ selectedIconColor: "#5f249f",
1238
+ selectedUnderlineColor: "#5f249f",
1239
+ selectedUnderlineThickness: "2px",
1240
+ unselectedBackgroundColor: globalTokens.white,
1241
+ unselectedFontColor: globalTokens.darkGrey,
1242
+ unselectedIconColor: globalTokens.darkGrey,
1243
+ disabledFontColor: "#999999",
1244
+ disabledIconColor: "#999999",
1245
+ disabledFontStyle: globalTokens.type_normal,
1246
+ hoverBackgroundColor: "#f2eafa",
1247
+ pressedBackgroundColor: "#e5d5f6",
1248
+ pressedFontWeight: globalTokens.type_semibold,
1249
+ dividerColor: globalTokens.mediumGrey,
1250
+ dividerThickness: "1px",
1251
+ focusOutline: "#5f249f",
1252
+ scrollButtonsWidth: "48px",
1253
+ badgeBackgroundColor: globalTokens.darkRed,
1254
+ badgeFontFamily: globalTokens.type_sans,
1255
+ badgeFontSize: "10px",
1256
+ badgeFontStyle: globalTokens.type_normal,
1257
+ badgeFontWeight: "500",
1258
+ badgeFontColor: globalTokens.white,
1259
+ badgeLetterSpacing: globalTokens.type_spacing_wide_02,
1260
+ badgeWidth: "16px",
1261
+ badgeHeight: "16px",
1262
+ badgeRadius: "10px",
1263
+ badgeWidthWithNotificationNumber: "23px",
1264
+ badgeHeightWithNotificationNumber: "17px",
1265
+ badgeRadiusWithNotificationNumber: "10px"
1266
+ },
1267
+ textarea: {
1268
+ fontFamily: globalTokens.type_sans,
1269
+ enabledBorderColor: globalTokens.hal_black,
1270
+ enabledBorderColorOnDark: globalTokens.hal_white,
1271
+ hoverBorderColor: globalTokens.hal_purple_l_65,
1272
+ hoverBorderColorOnDark: globalTokens.hal_purple_l_65,
1273
+ focusBorderColor: globalTokens.hal_blue_l_50,
1274
+ focusBorderColorOnDark: globalTokens.hal_blue_l_50,
1275
+ disabledBorderColor: globalTokens.hal_grey_l_60,
1276
+ disabledBorderColorOnDark: globalTokens.hal_grey_l_60,
1277
+ disabledContainerFillColor: globalTokens.hal_grey_l_95,
1278
+ disabledContainerFillColorOnDark: globalTokens.hal_grey_s_40,
1279
+ errorBorderColor: globalTokens.hal_red_s_41,
1280
+ errorBorderColorOnDark: globalTokens.hal_red_l_60,
1281
+ hoverErrorBorderColor: globalTokens.color_red_600,
1282
+ hoverErrorBorderColorOnDark: "#fe677b",
1283
+ errorMessageColor: globalTokens.hal_red_s_41,
1284
+ errorMessageColorOnDark: globalTokens.hal_red_l_60,
1285
+ labelFontColor: globalTokens.hal_black,
1286
+ labelFontColorOnDark: globalTokens.hal_white,
1287
+ labelFontSize: globalTokens.type_scale_02,
1288
+ labelFontStyle: globalTokens.type_normal,
1289
+ labelFontWeight: globalTokens.type_semibold,
1290
+ labelLineHeight: globalTokens.type_leading_loose_01,
1291
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
1292
+ disabledLabelFontColorOnDark: globalTokens.hal_grey_l_60,
1293
+ optionalLabelFontWeight: globalTokens.type_regular,
1294
+ helperTextFontColor: globalTokens.hal_black,
1295
+ helperTextFontColorOnDark: globalTokens.hal_white,
1296
+ helperTextFontSize: globalTokens.type_scale_01,
1297
+ helperTextFontStyle: globalTokens.type_normal,
1298
+ helperTextFontWeight: globalTokens.type_regular,
1299
+ helperTextLineHeight: globalTokens.type_leading_normal,
1300
+ disabledHelperTextFontColor: globalTokens.hal_grey_l_60,
1301
+ disabledHelperTextFontColorOnDark: globalTokens.hal_grey_l_60,
1302
+ placeholderFontColor: "#000000b3",
1303
+ placeholderFontColorOnDark: globalTokens.hal_grey_l_95,
1304
+ disabledPlaceholderFontColor: globalTokens.hal_grey_l_60,
1305
+ disabledPlaceholderFontColorOnDark: globalTokens.hal_grey_l_60,
1306
+ valueFontColor: globalTokens.hal_black,
1307
+ valueFontColorOnDark: globalTokens.hal_white,
1308
+ valueFontSize: globalTokens.type_scale_03,
1309
+ valueFontStyle: globalTokens.type_normal,
1310
+ valueFontWeight: globalTokens.type_regular,
1311
+ disabledValueFontColor: globalTokens.hal_grey_l_60,
1312
+ disabledValueFontColorOnDark: globalTokens.hal_grey_l_60
1313
+ },
1314
+ V3Textarea: {
1315
+ fontFamily: globalTokens.type_sans,
1316
+ assistiveTextFontSize: globalTokens.type_scale_01,
1317
+ assistiveTextFontStyle: globalTokens.type_normal,
1318
+ assistiveTextFontWeight: globalTokens.type_regular,
1319
+ assistiveTextFontColor: globalTokens.black,
1320
+ assistiveTextFontColorOnDark: globalTokens.white,
1321
+ assistiveTextLetterSpacing: "0.03333em",
1322
+ disabledColor: globalTokens.lighterBlack,
1323
+ disabledColorOnDark: "#575757",
1324
+ errorColor: globalTokens.red,
1325
+ errorColorOnDark: globalTokens.hal_red_l_60,
1326
+ scrollBarThumbColor: globalTokens.darkGrey,
1327
+ scrollBarThumbColorOnDark: globalTokens.white,
1328
+ scrollBarTrackColor: globalTokens.lightGrey,
1329
+ scrollBarTrackColorOnDark: "#999999",
1330
+ labelFontSize: globalTokens.type_scale_03,
1331
+ labelFontStyle: globalTokens.type_normal,
1332
+ labelFontWeight: globalTokens.type_regular,
1333
+ labelFontColor: globalTokens.black,
1334
+ labelFontColorOnDark: globalTokens.white,
1335
+ labelLetterSpacing: "0.00938em",
1336
+ valueFontSize: globalTokens.type_scale_03,
1337
+ valueFontStyle: globalTokens.type_normal,
1338
+ valueFontWeight: globalTokens.type_regular,
1339
+ valueFontColor: globalTokens.black,
1340
+ valueFontColorOnDark: globalTokens.white,
1341
+ valueLetterSpacing: globalTokens.type_spacing_normal,
1342
+ valueLineHeight: "1.1875em",
1343
+ underlineColor: globalTokens.black,
1344
+ underlineColorOnDark: globalTokens.white,
1345
+ underlineFocusColor: globalTokens.black,
1346
+ underlineFocusColorOnDark: globalTokens.white,
1347
+ underlineThickness: "1px"
1348
+ },
1349
+ toggleGroup: {
1350
+ containerBackgroundColor: globalTokens.color_grey_50,
1351
+ containerBorderColor: globalTokens.hal_grey_l_60,
1352
+ labelFontColor: globalTokens.hal_black,
1353
+ disabledLabelFontColor: globalTokens.hal_grey_l_60,
1354
+ helperTextFontColor: globalTokens.hal_black,
1355
+ disabledHelperTextFontcolor: globalTokens.hal_grey_l_60,
1356
+ unselectedBackgroundColor: globalTokens.hal_grey_l_90,
1357
+ unselectedHoverBackgroundColor: globalTokens.hal_grey_l_80,
1358
+ unselectedActiveBackgroundColor: globalTokens.hal_purple_s_38,
1359
+ unselectedDisabledBackgroundColor: globalTokens.hal_grey_l_95,
1360
+ unselectedFontColor: globalTokens.hal_black,
1361
+ unselectedDisabledFontColor: globalTokens.hal_grey_l_60,
1362
+ selectedBackgroundColor: globalTokens.hal_purple_s_38,
1363
+ selectedHoverBackgroundColor: globalTokens.hal_purple_d_30,
1364
+ selectedActiveBackgroundColor: globalTokens.hal_purple_d_20,
1365
+ selectedDisabledBackgroundColor: globalTokens.hal_purple_l_95,
1366
+ selectedFontColor: globalTokens.hal_white,
1367
+ selectedDisabledFontColor: globalTokens.color_purple_300,
1368
+ focusColor: globalTokens.hal_blue_l_50,
1369
+ labelFontFamily: globalTokens.type_sans,
1370
+ labelFontSize: globalTokens.type_scale_02,
1371
+ labelFontStyle: globalTokens.type_normal,
1372
+ labelFontWeight: globalTokens.type_semibold,
1373
+ labelLineHeight: globalTokens.type_leading_loose_01,
1374
+ helperTextFontFamily: globalTokens.type_sans,
1375
+ helperTextFontSize: globalTokens.type_scale_01,
1376
+ helperTextFontStyle: globalTokens.type_normal,
1377
+ helperTextFontWeight: globalTokens.type_regular,
1378
+ helperTextLineHeight: globalTokens.type_leading_normal,
1379
+ optionLabelFontFamily: globalTokens.type_sans,
1380
+ optionLabelFontSize: globalTokens.type_scale_03,
1381
+ optionLabelFontStyle: globalTokens.type_normal,
1382
+ optionLabelFontWeight: globalTokens.type_regular,
1383
+ iconPaddingRight: globalTokens.spacing_03,
1384
+ iconPaddingLeft: globalTokens.spacing_03,
1385
+ labelPaddingLeft: globalTokens.spacing_06,
1386
+ labelPaddingRight: globalTokens.spacing_06,
1387
+ iconMarginRight: globalTokens.spacing_03,
1388
+ containerMarginTop: globalTokens.spacing_02,
1389
+ optionBorderThickness: globalTokens.border_width_0,
1390
+ optionBorderStyle: globalTokens.border_none,
1391
+ optionBorderRadius: globalTokens.border_radius_medium,
1392
+ containerBorderThickness: globalTokens.border_width_1,
1393
+ containerBorderStyle: globalTokens.border_solid,
1394
+ containerBorderRadius: globalTokens.border_radius_large,
1395
+ optionFocusBorderThickness: globalTokens.border_width_2
1396
+ },
1397
+ upload: {
1398
+ fontFamily: globalTokens.type_sans,
1399
+ shadowColor: globalTokens.lightWhite,
1400
+ scrollBarThumbColor: globalTokens.darkGrey,
1401
+ scrollBarTrackColor: globalTokens.lightGrey,
1402
+ errorColor: globalTokens.red,
1403
+ backgroundColor: globalTokens.white,
1404
+ draggingStateBackgroundColor: globalTokens.lightWhite,
1405
+ dragAndDropIconColor: globalTokens.black,
1406
+ dragAndDropIconSize: "43.5px",
1407
+ dragAndDropTitleFontSize: globalTokens.type_scale_04,
1408
+ dragAndDropTitleFontStyle: globalTokens.type_normal,
1409
+ dragAndDropTitleFontWeight: globalTokens.type_bold,
1410
+ dragAndDropTitleFontTextTransform: "none",
1411
+ dragAndDropTitleFontColor: globalTokens.black,
1412
+ dragAndDropDescriptionFontSize: globalTokens.type_scale_03,
1413
+ dragAndDropDescriptionFontStyle: globalTokens.type_italic,
1414
+ dragAndDropDescriptionFontWeight: globalTokens.type_regular,
1415
+ dragAndDropDescriptionFontTextTransform: "none",
1416
+ dragAndDropDescriptionFontColor: globalTokens.darkGrey,
1417
+ dragAndDropDraggingStateIconColor: globalTokens.darkGrey,
1418
+ dragAndDropDraggingStateIconSize: "74.5px",
1419
+ dragAndDropDraggingStateFontSize: globalTokens.type_scale_03,
1420
+ dragAndDropDraggingStateFontStyle: globalTokens.type_italic,
1421
+ dragAndDropDraggingStateFontWeight: globalTokens.type_regular,
1422
+ dragAndDropDraggingStateFontTextTransform: "none",
1423
+ dragAndDropDraggingStateFontColor: globalTokens.darkGrey,
1424
+ dragAndDropAreaIconColor: globalTokens.darkGrey,
1425
+ dragAndDropAreaIconSize: "24px",
1426
+ dragAndDropAreaTextFontSize: globalTokens.type_scale_01,
1427
+ dragAndDropAreaTextFontStyle: globalTokens.type_italic,
1428
+ dragAndDropAreaTextFontWeight: globalTokens.type_regular,
1429
+ dragAndDropAreaTextFontTextTransform: "none",
1430
+ dragAndDropAreaTextFontColor: globalTokens.darkGrey,
1431
+ fileDeleteIconColor: globalTokens.black,
1432
+ fileDeleteIconSize: "30px",
1433
+ fileUnderlineColor: globalTokens.lightGrey,
1434
+ fileUnderlineThickness: "1px",
1435
+ fileNameFontSize: globalTokens.type_scale_03,
1436
+ fileNameFontStyle: globalTokens.type_normal,
1437
+ fileNameFontWeight: globalTokens.type_regular,
1438
+ fileNameFontTextTransform: "none",
1439
+ fileNameFontColor: globalTokens.black,
1440
+ fileTypeFontSize: globalTokens.type_scale_01,
1441
+ fileTypeFontStyle: globalTokens.type_normal,
1442
+ fileTypeFontWeight: globalTokens.type_regular,
1443
+ fileTypeFontTextTransform: globalTokens.type_uppercase,
1444
+ fileTypeFontColor: globalTokens.darkGrey,
1445
+ hoverFileColor: globalTokens.darkWhite,
1446
+ uploadedFileIconColor: globalTokens.lightGrey,
1447
+ uploadedFileIconSize: "24px",
1448
+ uploadedFilesTitleFontSize: globalTokens.type_scale_04,
1449
+ uploadedFilesTitleFontStyle: globalTokens.type_normal,
1450
+ uploadedFilesTitleFontWeight: globalTokens.type_regular,
1451
+ uploadedFilesTitleFontTextTransform: "none",
1452
+ uploadedFilesTitleFontColor: globalTokens.black,
1453
+ uploadedFilesSubtitleFontSize: globalTokens.type_scale_01,
1454
+ uploadedFilesSubtitleFontStyle: globalTokens.type_normal,
1455
+ uploadedFilesSubtitleFontWeight: globalTokens.type_regular,
1456
+ uploadedFilesSubtitleFontTextTransform: "none",
1457
+ uploadedFilesSubtitleFontColor: globalTokens.darkGrey,
1458
+ uploadedFilesNumberFontWeight: globalTokens.type_bold
1459
+ },
1460
+ wizard: {
1461
+ disabledBackgroundColor: globalTokens.lightGrey,
1462
+ disabledFontColor: globalTokens.darkGrey,
1463
+ stepContainerFontSize: globalTokens.type_scale_03,
1464
+ stepContainerFontFamily: globalTokens.type_sans,
1465
+ stepContainerFontStyle: globalTokens.type_normal,
1466
+ stepContainerFontWeight: globalTokens.type_regular,
1467
+ stepContainerLetterSpacing: globalTokens.type_spacing_wide_02,
1468
+ stepContainerFontColor: globalTokens.black,
1469
+ stepContainerSelectedFontColor: globalTokens.white,
1470
+ stepContainerSelectedBackgroundColor: globalTokens.hal_purple_s_38,
1471
+ stepContainerBackgroundColor: globalTokens.white,
1472
+ stepContainerIconSize: "19px",
1473
+ labelFontSize: globalTokens.type_scale_03,
1474
+ labelFontFamily: globalTokens.type_sans,
1475
+ labelFontStyle: globalTokens.type_normal,
1476
+ labelFontWeight: globalTokens.type_regular,
1477
+ labelLetterSpacing: globalTokens.type_spacing_normal,
1478
+ labelFontTextTransform: "none",
1479
+ labelTextAlign: "left",
1480
+ labelFontColor: globalTokens.darkGrey,
1481
+ visitedLabelFontColor: globalTokens.black,
1482
+ visitedDescriptionFontColor: globalTokens.black,
1483
+ descriptionFontSize: globalTokens.type_scale_01,
1484
+ descriptionFontFamily: globalTokens.type_sans,
1485
+ descriptionFontStyle: globalTokens.type_normal,
1486
+ descriptionFontWeight: globalTokens.type_regular,
1487
+ descriptionLetterSpacing: globalTokens.type_spacing_wide_01,
1488
+ descriptionFontTextTransform: "none",
1489
+ descriptionFontColor: globalTokens.darkGrey,
1490
+ descriptionTextAlign: "left",
1491
+ circleWidth: "32px",
1492
+ circleHeight: "32px",
1493
+ circleBorderThickness: "2px",
1494
+ circleBorderStyle: "solid",
1495
+ circleBorderRadius: "45px",
1496
+ circleBorderColor: globalTokens.black,
1497
+ selectedCircleWidth: "32px",
1498
+ selectedCircleHeight: "32px",
1499
+ selectedCircleBorderThickness: "2px",
1500
+ selectedCircleBorderStyle: "solid",
1501
+ selectedCircleBorderRadius: "45px",
1502
+ selectedCircleBorderColor: globalTokens.purple,
1503
+ disabledCircleWidth: "32px",
1504
+ disabledCircleHeight: "32px",
1505
+ disabledCircleBorderThickness: "2px",
1506
+ disabledCircleBorderStyle: "solid",
1507
+ disabledCircleBorderRadius: "45px",
1508
+ disabledCircleBorderColor: globalTokens.lightGrey,
1509
+ separatorBorderThickness: "1px",
1510
+ separatorBorderStyle: "solid",
1511
+ separatorColor: globalTokens.lightGrey,
1512
+ focusColor: globalTokens.hal_blue_l_50
1513
+ }
1514
+ };
1515
+ exports.componentTokens = componentTokens;
1516
+ var spaces = {
1517
+ xxsmall: "6px",
1518
+ xsmall: "16px",
1519
+ small: "24px",
1520
+ medium: "36px",
1521
+ large: "48px",
1522
+ xlarge: "64px",
1523
+ xxlarge: "100px"
1524
+ };
1525
+ exports.spaces = spaces;
1526
+ var responsiveSizes = {
1527
+ mobileSmall: "320",
1528
+ mobileMedium: "375",
1529
+ mobileLarge: "425",
1530
+ tablet: "768",
1531
+ laptop: "1024",
1532
+ desktop: "1440"
1533
+ };
1534
+ exports.responsiveSizes = responsiveSizes;
1535
+ var typeface = {
1536
+ body: {
1537
+ fontSize: "16px",
1538
+ letterSpacing: "0.5",
1539
+ textTransform: "initial"
1540
+ },
1541
+ altBody: {
1542
+ fontSize: "14px",
1543
+ letterSpacing: "0.25",
1544
+ textTransform: "initial"
1545
+ },
1546
+ subtitle: {
1547
+ fontSize: "16px",
1548
+ letterSpacing: "0.15",
1549
+ textTransform: "initial"
1550
+ },
1551
+ altSubtitle: {
1552
+ fontSize: "14px",
1553
+ letterSpacing: "0.1",
1554
+ textTransform: "initial"
1555
+ },
1556
+ caption: {
1557
+ fontSize: "12px",
1558
+ letterSpacing: "0.4",
1559
+ textTransform: "initial"
1560
+ },
1561
+ overline: {
1562
+ fontSize: "12px",
1563
+ letterSpacing: "2",
1564
+ textTransform: "uppercase"
1565
+ }
1566
+ };
1567
+ exports.typeface = typeface;