@dxc-technology/halstack-react 0.0.0-f864ab8 → 0.0.0-f8ea611

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 (196) hide show
  1. package/README.md +27 -47
  2. package/dist/index.d.mts +6515 -0
  3. package/dist/index.d.ts +6515 -0
  4. package/dist/index.js +12804 -0
  5. package/dist/index.mjs +12717 -0
  6. package/package.json +77 -66
  7. package/babel.config.js +0 -8
  8. package/dist/BackgroundColorContext.js +0 -46
  9. package/dist/ThemeContext.js +0 -216
  10. package/dist/accordion/Accordion.js +0 -356
  11. package/dist/accordion/Accordion.stories.js +0 -207
  12. package/dist/accordion/readme.md +0 -96
  13. package/dist/accordion-group/AccordionGroup.js +0 -188
  14. package/dist/accordion-group/AccordionGroup.stories.js +0 -207
  15. package/dist/accordion-group/readme.md +0 -70
  16. package/dist/alert/Alert.js +0 -318
  17. package/dist/alert/Alert.stories.js +0 -158
  18. package/dist/alert/close.svg +0 -4
  19. package/dist/alert/error.svg +0 -4
  20. package/dist/alert/info.svg +0 -4
  21. package/dist/alert/readme.md +0 -43
  22. package/dist/alert/success.svg +0 -4
  23. package/dist/alert/warning.svg +0 -4
  24. package/dist/badge/Badge.js +0 -40
  25. package/dist/box/Box.js +0 -147
  26. package/dist/button/Button.js +0 -228
  27. package/dist/button/Button.stories.js +0 -224
  28. package/dist/button/readme.md +0 -93
  29. package/dist/card/Card.js +0 -247
  30. package/dist/checkbox/Checkbox.js +0 -233
  31. package/dist/checkbox/Checkbox.stories.js +0 -144
  32. package/dist/checkbox/readme.md +0 -116
  33. package/dist/chip/Chip.js +0 -223
  34. package/dist/common/OpenSans.css +0 -81
  35. package/dist/common/RequiredComponent.js +0 -40
  36. package/dist/common/fonts/OpenSans-Bold.ttf +0 -0
  37. package/dist/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  38. package/dist/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  39. package/dist/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  40. package/dist/common/fonts/OpenSans-Italic.ttf +0 -0
  41. package/dist/common/fonts/OpenSans-Light.ttf +0 -0
  42. package/dist/common/fonts/OpenSans-LightItalic.ttf +0 -0
  43. package/dist/common/fonts/OpenSans-Regular.ttf +0 -0
  44. package/dist/common/fonts/OpenSans-SemiBold.ttf +0 -0
  45. package/dist/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  46. package/dist/common/utils.js +0 -22
  47. package/dist/common/variables.js +0 -764
  48. package/dist/date/Date.js +0 -357
  49. package/dist/date/Date.stories.js +0 -205
  50. package/dist/date/calendar.svg +0 -1
  51. package/dist/date/calendar_dark.svg +0 -1
  52. package/dist/date/readme.md +0 -73
  53. package/dist/dialog/Dialog.js +0 -203
  54. package/dist/dialog/Dialog.stories.js +0 -217
  55. package/dist/dialog/readme.md +0 -32
  56. package/dist/dropdown/Dropdown.js +0 -456
  57. package/dist/dropdown/Dropdown.stories.js +0 -249
  58. package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
  59. package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
  60. package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
  61. package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
  62. package/dist/dropdown/readme.md +0 -69
  63. package/dist/footer/Footer.js +0 -405
  64. package/dist/footer/Footer.stories.js +0 -94
  65. package/dist/footer/dxc_logo_wht.png +0 -0
  66. package/dist/footer/readme.md +0 -41
  67. package/dist/header/Header.js +0 -431
  68. package/dist/header/Header.stories.js +0 -176
  69. package/dist/header/close_icon.svg +0 -1
  70. package/dist/header/dxc_logo_black.png +0 -0
  71. package/dist/header/dxc_logo_blk_rgb.svg +0 -6
  72. package/dist/header/dxc_logo_white.png +0 -0
  73. package/dist/header/hamb_menu_black.svg +0 -1
  74. package/dist/header/hamb_menu_white.svg +0 -1
  75. package/dist/header/readme.md +0 -33
  76. package/dist/heading/Heading.js +0 -222
  77. package/dist/input-text/InputText.js +0 -609
  78. package/dist/input-text/InputText.stories.js +0 -209
  79. package/dist/input-text/error.svg +0 -1
  80. package/dist/input-text/readme.md +0 -91
  81. package/dist/layout/ApplicationLayout.js +0 -331
  82. package/dist/layout/facebook.svg +0 -45
  83. package/dist/layout/linkedin.svg +0 -50
  84. package/dist/layout/twitter.svg +0 -53
  85. package/dist/link/Link.js +0 -200
  86. package/dist/link/readme.md +0 -51
  87. package/dist/main.js +0 -311
  88. package/dist/paginator/Paginator.js +0 -261
  89. package/dist/paginator/images/next.svg +0 -3
  90. package/dist/paginator/images/nextPage.svg +0 -3
  91. package/dist/paginator/images/previous.svg +0 -3
  92. package/dist/paginator/images/previousPage.svg +0 -3
  93. package/dist/paginator/readme.md +0 -50
  94. package/dist/progress-bar/ProgressBar.js +0 -192
  95. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  96. package/dist/progress-bar/readme.md +0 -63
  97. package/dist/radio/Radio.js +0 -190
  98. package/dist/radio/Radio.stories.js +0 -166
  99. package/dist/radio/readme.md +0 -70
  100. package/dist/resultsetTable/ResultsetTable.js +0 -332
  101. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  102. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  103. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  104. package/dist/select/Select.js +0 -490
  105. package/dist/select/Select.stories.js +0 -235
  106. package/dist/select/readme.md +0 -72
  107. package/dist/sidenav/Sidenav.js +0 -183
  108. package/dist/slider/Slider.js +0 -267
  109. package/dist/slider/Slider.stories.js +0 -241
  110. package/dist/slider/readme.md +0 -64
  111. package/dist/spinner/Spinner.js +0 -214
  112. package/dist/spinner/Spinner.stories.js +0 -183
  113. package/dist/spinner/readme.md +0 -65
  114. package/dist/switch/Switch.js +0 -228
  115. package/dist/switch/Switch.stories.js +0 -134
  116. package/dist/switch/readme.md +0 -133
  117. package/dist/table/Table.js +0 -118
  118. package/dist/tabs/Tabs.js +0 -325
  119. package/dist/tabs/Tabs.stories.js +0 -130
  120. package/dist/tabs/readme.md +0 -78
  121. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  122. package/dist/tabs-for-sections/readme.md +0 -78
  123. package/dist/tag/Tag.js +0 -268
  124. package/dist/textarea/Textarea.js +0 -238
  125. package/dist/toggle/Toggle.js +0 -220
  126. package/dist/toggle/Toggle.stories.js +0 -297
  127. package/dist/toggle/readme.md +0 -80
  128. package/dist/toggle-group/ToggleGroup.js +0 -223
  129. package/dist/toggle-group/readme.md +0 -82
  130. package/dist/upload/Upload.js +0 -209
  131. package/dist/upload/Upload.stories.js +0 -72
  132. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -123
  133. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  134. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  135. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -293
  136. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  137. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  138. package/dist/upload/file-upload/FileToUpload.js +0 -162
  139. package/dist/upload/file-upload/audio-icon.svg +0 -4
  140. package/dist/upload/file-upload/close.svg +0 -4
  141. package/dist/upload/file-upload/file-icon.svg +0 -4
  142. package/dist/upload/file-upload/video-icon.svg +0 -4
  143. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  144. package/dist/upload/readme.md +0 -37
  145. package/dist/upload/transaction/Transaction.js +0 -152
  146. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  147. package/dist/upload/transaction/audio-icon.svg +0 -4
  148. package/dist/upload/transaction/error-icon.svg +0 -4
  149. package/dist/upload/transaction/file-icon-err.svg +0 -4
  150. package/dist/upload/transaction/file-icon.svg +0 -4
  151. package/dist/upload/transaction/image-icon-err.svg +0 -4
  152. package/dist/upload/transaction/image-icon.svg +0 -4
  153. package/dist/upload/transaction/success-icon.svg +0 -4
  154. package/dist/upload/transaction/video-icon-err.svg +0 -4
  155. package/dist/upload/transaction/video-icon.svg +0 -4
  156. package/dist/upload/transactions/Transactions.js +0 -122
  157. package/dist/useTheme.js +0 -22
  158. package/dist/wizard/Wizard.js +0 -355
  159. package/dist/wizard/invalid_icon.svg +0 -6
  160. package/dist/wizard/valid_icon.svg +0 -6
  161. package/dist/wizard/validation-wrong.svg +0 -6
  162. package/test/Accordion.test.js +0 -33
  163. package/test/AccordionGroup.test.js +0 -125
  164. package/test/Alert.test.js +0 -53
  165. package/test/Box.test.js +0 -10
  166. package/test/Button.test.js +0 -18
  167. package/test/Card.test.js +0 -30
  168. package/test/Checkbox.test.js +0 -45
  169. package/test/Chip.test.js +0 -25
  170. package/test/Date.test.js +0 -393
  171. package/test/Dialog.test.js +0 -23
  172. package/test/Dropdown.test.js +0 -130
  173. package/test/Footer.test.js +0 -99
  174. package/test/Header.test.js +0 -39
  175. package/test/Heading.test.js +0 -35
  176. package/test/InputText.test.js +0 -240
  177. package/test/Link.test.js +0 -42
  178. package/test/Paginator.test.js +0 -177
  179. package/test/ProgressBar.test.js +0 -35
  180. package/test/Radio.test.js +0 -37
  181. package/test/ResultsetTable.test.js +0 -330
  182. package/test/Select.test.js +0 -192
  183. package/test/Sidenav.test.js +0 -45
  184. package/test/Slider.test.js +0 -82
  185. package/test/Spinner.test.js +0 -27
  186. package/test/Switch.test.js +0 -45
  187. package/test/Table.test.js +0 -36
  188. package/test/Tabs.test.js +0 -109
  189. package/test/TabsForSections.test.js +0 -34
  190. package/test/Tag.test.js +0 -32
  191. package/test/TextArea.test.js +0 -52
  192. package/test/ToggleGroup.test.js +0 -81
  193. package/test/Upload.test.js +0 -60
  194. package/test/Wizard.test.js +0 -130
  195. package/test/mocks/pngMock.js +0 -1
  196. package/test/mocks/svgMock.js +0 -1
@@ -1,764 +0,0 @@
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 _dxc_logo_blk_rgb = _interopRequireDefault(require("../header/dxc_logo_blk_rgb.svg"));
11
-
12
- var _dxc_logo_wht = _interopRequireDefault(require("../footer/dxc_logo_wht.png"));
13
-
14
- var globalTokens = {
15
- black: "#000000",
16
- lightBlack: "#212121",
17
- yellow: "#FFED00",
18
- lightGrey: "#D9D9D9",
19
- darkRed: "#D0011B",
20
- lightRed: "#FF6161",
21
- lightBlue: "#CEE0F5",
22
- lightYellow: "#FCF2BD",
23
- lightPink: "#F9CFCF",
24
- lightGreen: "#DBF1C4",
25
- blue: "#005FCC",
26
- lighterGrey: "#F8F8F8",
27
- red: "#D0011B",
28
- violet: "#8800F6",
29
- darkBlue: "#006BF6",
30
- inherit: "inherit",
31
- transparent: "transparent",
32
- purple: "#6f2c91",
33
- mediumPurple: "#ead8f3",
34
- lightPurple: "#f5ebf9",
35
- lighterPurple: "#d0bddb",
36
- white: "#ffffff",
37
- darkGrey: "#666666",
38
- mediumGrey: "#bfbfbf",
39
- mediumWhite: "#f9f9f9",
40
- mediumBlue: "#0067b3",
41
- softBlue: "#b1cee6",
42
- darkWhite: "#eeeeee",
43
- lighterBlack: "#b1b1b1",
44
- mediumBlack: "#676767",
45
- mediumGreyBlack: "#dbdbdb",
46
- lightWhite: "#f2f2f2",
47
- softGrey: "#cecece",
48
- softBlack: "#565656",
49
- fontSize10: "10px",
50
- type_sans: "Open Sans, sans-serif",
51
- type_scale_root: "16px",
52
- type_scale_08: "3.75rem",
53
- type_scale_07: "3rem",
54
- type_scale_06: "2rem",
55
- type_scale_05: "1.5rem",
56
- type_scale_04: "1.25rem",
57
- type_scale_03: "1rem",
58
- type_scale_02: "0.875rem",
59
- type_scale_01: "0.75rem",
60
- type_light: "300",
61
- type_regular: "400",
62
- type_semibold: "600",
63
- type_bold: "bold",
64
- type_italic: "italic",
65
- type_normal: "normal",
66
- type_spacing_tight_02: "-0.05em",
67
- type_spacing_tight_01: "-0.025em",
68
- type_spacing_normal: "0",
69
- type_spacing_wide_01: "0.025em",
70
- type_spacing_wide_02: "0.05em",
71
- type_spacing_wide_03: "0.1em",
72
- type_initial: "initial",
73
- type_uppercase: "uppercase",
74
- type_no_line: "none",
75
- type_underline: "underline",
76
- type_line_through: "line-through",
77
- type_leading_compact_03: "1em",
78
- type_leading_compact_02: "1.25em",
79
- type_leading_compact_01: "1.365em",
80
- type_leading_normal: "1.5em",
81
- type_leading_loose_01: "1.75em",
82
- type_leading_loose_02: "2em"
83
- };
84
- exports.globalTokens = globalTokens;
85
- var componentTokens = {
86
- accordion: {
87
- backgroundColor: globalTokens.white,
88
- arrowColor: globalTokens.purple,
89
- fontColorBase: globalTokens.darkGrey,
90
- hoverBackgroundColor: globalTokens.lightPurple,
91
- disabledFontColor: globalTokens.mediumGrey,
92
- customContentFontFamily: globalTokens.type_sans,
93
- customContentFontSize: globalTokens.type_scale_03,
94
- customContentFontWeight: globalTokens.type_light,
95
- customContentFontColor: "",
96
- assistiveTextFontFamily: globalTokens.type_sans,
97
- assistiveTextFontSize: globalTokens.type_scale_03,
98
- assistiveTextFontWeight: globalTokens.type_light,
99
- assistiveTextFontStyle: globalTokens.type_italic,
100
- assistiveTextFontColor: "",
101
- assistiveTextLetterSpacing: globalTokens.type_spacing_wide_01,
102
- 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",
120
- borderRadius: "4px",
121
- headerFocusBorderStyle: "solid",
122
- headerFocusBorderThickness: "1px",
123
- headerFocusBorderColor: globalTokens.purple,
124
- minHeight: "48px",
125
- minWidth: "280px",
126
- boxShadowOffsetX: "0px",
127
- boxShadowOffsetY: "6px",
128
- boxShadowBlur: "10px",
129
- boxShadowColor: "#00000024",
130
- iconMaxHeight: "24px",
131
- iconMaxWidth: "24px",
132
- iconMarginLeft: "0px",
133
- iconMarginRigth: "12px",
134
- accordionGroupSeparatorBorderColor: "#00000024",
135
- accordionGroupSeparatorBorderThickness: "1px",
136
- accordionGroupSeparatorBorderRadius: "0px",
137
- accordionGroupSeparatorBorderStyle: "solid"
138
- },
139
- 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"
234
- },
235
- box: {
236
- backgroundColor: globalTokens.white,
237
- fontFamily: globalTokens.type_sans,
238
- fontSizeBase: globalTokens.type_scale_root,
239
- fontSize: globalTokens.type_scale_02,
240
- fontLetterSpacingWide01: globalTokens.type_spacing_wide_01
241
- },
242
- card: {
243
- backgroundColor: globalTokens.white,
244
- textDecoration: globalTokens.type_no_line
245
- },
246
- checkbox: {
247
- backgroundColorChecked: globalTokens.mediumBlue,
248
- borderColor: globalTokens.mediumBlue,
249
- checkColor: globalTokens.white,
250
- fontColor: globalTokens.inherit,
251
- disabledBackgroundColorChecked: globalTokens.softBlue,
252
- disabledBorderColor: globalTokens.softBlue,
253
- disabledCheckColor: globalTokens.white,
254
- disabledFontColor: globalTokens.lighterBlack,
255
- focusColor: globalTokens.blue,
256
- fontFamily: globalTokens.type_sans
257
- },
258
- chip: {
259
- backgroundColor: globalTokens.darkWhite,
260
- outlinedColor: "",
261
- fontColor: globalTokens.black,
262
- disabledBackgroundColor: globalTokens.mediumWhite,
263
- disabledFontColor: globalTokens.lighterBlack,
264
- fontFamily: globalTokens.type_sans,
265
- fontSizeBase: globalTokens.type_scale_root,
266
- fontSize: globalTokens.type_scale_03
267
- },
268
- date: {
269
- pickerSelectedDateBackgroundColor: globalTokens.purple,
270
- pickerSelectedDateColor: globalTokens.white,
271
- pickerBackgroundColor: globalTokens.white,
272
- pickerFontColor: globalTokens.black,
273
- pickerActualDate: globalTokens.lightGrey,
274
- pickerHoverDateBackgroundColor: globalTokens.lighterPurple,
275
- pickerHoverDateFontColor: globalTokens.black,
276
- scrollBarThumbColor: globalTokens.darkGrey,
277
- scrollBarTrackColor: globalTokens.lightGrey,
278
- focusColor: globalTokens.blue,
279
- fontFamily: globalTokens.type_sans,
280
- fontSizeBase: globalTokens.type_scale_root,
281
- fontSize: globalTokens.type_scale_06
282
- },
283
- dialog: {
284
- overlayColor: globalTokens.black,
285
- scrollBarThumbColor: globalTokens.darkGrey,
286
- scrollBarTrackColor: globalTokens.lightGrey,
287
- backgroundColor: globalTokens.white,
288
- fontFamily: globalTokens.type_sans
289
- },
290
- dropdown: {
291
- backgroundColor: globalTokens.white,
292
- fontColor: globalTokens.black,
293
- dropdownBackgroundColor: globalTokens.white,
294
- dropdownFontColor: globalTokens.black,
295
- hoverBackgroundOption: globalTokens.white,
296
- hoverBackgroundColor: globalTokens.white,
297
- scrollBarThumbColor: globalTokens.darkGrey,
298
- scrollBarTrackColor: globalTokens.lightGrey,
299
- focusColor: globalTokens.blue,
300
- fontFamily: globalTokens.type_sans,
301
- fontSizeBase: globalTokens.type_scale_root,
302
- fontSize: globalTokens.type_scale_03
303
- },
304
- footer: {
305
- backgroundColor: globalTokens.black,
306
- bottomLinksDividerColor: globalTokens.mediumBlue,
307
- bottomLinksDividerThickness: "2px",
308
- bottomLinksDividerStyle: "solid",
309
- bottomLinksDividerSpacing: "6px",
310
- bottomLinksFontFamily: globalTokens.type_sans,
311
- bottomLinksFontSize: globalTokens.type_scale_01,
312
- bottomLinksFontStyle: globalTokens.type_normal,
313
- bottomLinksFontWeight: globalTokens.type_regular,
314
- bottomLinksFontColor: "",
315
- bottomLinksTextDecoration: globalTokens.type_no_line,
316
- copyrightFontFamily: globalTokens.type_sans,
317
- copyrightFontSize: globalTokens.type_scale_01,
318
- copyrightFontStyle: globalTokens.type_normal,
319
- copyrightFontWeight: globalTokens.type_regular,
320
- copyrightFontColor: "",
321
- customContentFontFamily: globalTokens.type_sans,
322
- customContentFontSize: globalTokens.type_scale_root,
323
- customContentFontStyle: globalTokens.type_normal,
324
- customContentFontWeight: globalTokens.type_regular,
325
- customContentFontColor: "",
326
- fontColorBase: globalTokens.white,
327
- logo: _dxc_logo_wht["default"],
328
- logoHeight: "34px",
329
- logoWidth: "auto",
330
- minHeight: "120px",
331
- socialIconWidth: "25px",
332
- socialIconHeight: "25px",
333
- socialIconsGutter: "15px"
334
- },
335
- header: {
336
- backgroundColor: globalTokens.white,
337
- customContentFontFamily: "",
338
- customContentFontStyle: globalTokens.type_normal,
339
- customContentFontColor: "",
340
- customContentFontSize: "",
341
- customContentFontWeight: globalTokens.type_regular,
342
- dropdownBackgroundColor: globalTokens.transparent,
343
- dropdownHoverBackgroundColor: globalTokens.transparent,
344
- fontColorBase: globalTokens.black,
345
- fontFamilyBase: globalTokens.type_sans,
346
- fontSizeBase: globalTokens.type_scale_root,
347
- hamburguerFocusColor: globalTokens.blue,
348
- hamburguerFontFamily: "",
349
- hamburguerFontStyle: globalTokens.type_normal,
350
- hamburguerFontColor: "",
351
- hamburguerFontSize: globalTokens.fontSize10,
352
- hamburguerFontWeight: globalTokens.type_semibold,
353
- hamburguerColor: globalTokens.black,
354
- hamburguerHoverColor: globalTokens.mediumGreyBlack,
355
- hamburguerTextTransform: globalTokens.type_uppercase,
356
- logo: _dxc_logo_blk_rgb["default"],
357
- logoResponsive: _dxc_logo_blk_rgb["default"],
358
- logoHeight: "32px",
359
- logoWidth: "auto",
360
- menuBackgroundColor: globalTokens.white,
361
- menuZindex: "2000",
362
- menuTabletWidth: "60vw",
363
- menuMobileWidth: "100vw",
364
- menuCustomContentFontFamily: "",
365
- menuCustomContentFontStyle: globalTokens.type_normal,
366
- menuCustomContentFontColor: "",
367
- menuCustomContentFontSize: "",
368
- menuCustomContentFontWeight: globalTokens.type_regular,
369
- minHeight: "64px",
370
- overlayColor: globalTokens.softBlack,
371
- overlayOpacity: "0.7",
372
- overlayZindex: "1600",
373
- paddingTop: "0px",
374
- paddingBottom: "0px",
375
- paddingRight: "0px",
376
- paddingLeft: "20px",
377
- underlinedColor: globalTokens.black,
378
- underlinedThickness: "2px",
379
- underlinedStyle: "solid"
380
- },
381
- heading: {
382
- fontColorBase: globalTokens.inherit,
383
- fontFamilyBase: globalTokens.type_sans,
384
- level1FontColor: "",
385
- level1FontFamily: "",
386
- level1FontSize: globalTokens.type_scale_08,
387
- level1FontStyle: globalTokens.type_normal,
388
- level1FontWeight: globalTokens.type_regular,
389
- level1LineHeight: globalTokens.type_leading_compact_01,
390
- level1LetterSpacing: globalTokens.type_spacing_tight_01,
391
- level2FontColor: "",
392
- level2FontFamily: "",
393
- level2FontSize: globalTokens.type_scale_07,
394
- level2FontStyle: globalTokens.type_normal,
395
- level2FontWeight: globalTokens.type_regular,
396
- level2LineHeight: globalTokens.type_leading_normal,
397
- level2LetterSpacing: globalTokens.type_spacing_normal,
398
- level3FontColor: "",
399
- level3FontFamily: "",
400
- level3FontSize: globalTokens.type_scale_06,
401
- level3FontStyle: globalTokens.type_normal,
402
- level3FontWeight: globalTokens.type_regular,
403
- level3LineHeight: globalTokens.type_leading_compact_01,
404
- level3LetterSpacing: globalTokens.type_spacing_wide_01,
405
- level4FontColor: "",
406
- level4FontFamily: "",
407
- level4FontSize: globalTokens.type_scale_05,
408
- level4FontStyle: globalTokens.type_normal,
409
- level4FontWeight: globalTokens.type_regular,
410
- level4LineHeight: globalTokens.type_leading_normal,
411
- level4LetterSpacing: globalTokens.type_spacing_normal,
412
- level5FontColor: "",
413
- level5FontFamily: "",
414
- level5FontSize: globalTokens.type_scale_04,
415
- level5FontStyle: globalTokens.type_normal,
416
- level5FontWeight: globalTokens.type_regular,
417
- level5LineHeight: globalTokens.type_leading_normal,
418
- level5LetterSpacing: globalTokens.type_spacing_wide_01
419
- },
420
- inputText: {
421
- fontColor: globalTokens.black,
422
- disabledFontColor: globalTokens.lighterBlack,
423
- error: globalTokens.red,
424
- selectedOptionBackgroundColor: globalTokens.lightWhite,
425
- hoverOptionColor: globalTokens.black,
426
- scrollBarThumbColor: globalTokens.darkGrey,
427
- scrollBarTrackColor: globalTokens.lightGrey,
428
- fontFamily: globalTokens.type_sans,
429
- fontSizeBase: globalTokens.type_scale_root,
430
- fontSize: globalTokens.type_scale_03
431
- },
432
- link: {
433
- fontColor: globalTokens.blue,
434
- visitedFontColor: globalTokens.violet,
435
- underlinedBackgroundColor: globalTokens.blue,
436
- visitedUnderlinedBackgroundColor: globalTokens.violet,
437
- disabledColor: globalTokens.lightGrey,
438
- disabledUnderlinedBackgroundColor: globalTokens.lightGrey,
439
- hoverFontColor: globalTokens.darkBlue,
440
- fontSizeBase: globalTokens.type_scale_root,
441
- fontSize: globalTokens.type_scale_03,
442
- textDecoration: globalTokens.type_no_line
443
- },
444
- paginator: {
445
- paginatorBackgroundColor: globalTokens.darkWhite,
446
- paginatorFontColor: globalTokens.black,
447
- fontFamily: globalTokens.type_sans,
448
- fontSizeBase: globalTokens.type_scale_root,
449
- fontSize: globalTokens.type_scale_02
450
- },
451
- progressBar: {
452
- trackLine: globalTokens.purple,
453
- totalLine: globalTokens.softGrey,
454
- fontColor: globalTokens.inherit,
455
- overlayColor: globalTokens.black,
456
- fontFamily: globalTokens.type_sans,
457
- fontSizeBase: globalTokens.type_scale_root,
458
- fontSize: globalTokens.type_scale_01,
459
- fontTextTransform: globalTokens.type_uppercase
460
- },
461
- radio: {
462
- color: globalTokens.black,
463
- disabledColor: globalTokens.lighterBlack,
464
- fontColor: globalTokens.inherit,
465
- disabledFontColor: globalTokens.lighterBlack,
466
- focusColor: globalTokens.blue,
467
- fontFamily: globalTokens.type_sans
468
- },
469
- select: {
470
- selectedOptionBackgroundColor: globalTokens.lightGrey,
471
- color: globalTokens.black,
472
- hoveredOptionBackgroundColor: globalTokens.lightWhite,
473
- error: globalTokens.red,
474
- scrollBarThumbColor: globalTokens.darkGrey,
475
- scrollBarTrackColor: globalTokens.lightGrey,
476
- disabledColor: globalTokens.lighterBlack,
477
- focusColor: globalTokens.blue,
478
- fontFamily: globalTokens.type_sans,
479
- fontSizeBase: globalTokens.type_scale_root,
480
- fontSize: globalTokens.type_scale_03
481
- },
482
- sidenav: {
483
- backgroundColor: globalTokens.lighterGrey,
484
- arrowContainerColor: globalTokens.lightGrey,
485
- arrowColor: globalTokens.black,
486
- customContentFontFamily: globalTokens.type_sans,
487
- customContentFontSize: globalTokens.type_scale_root,
488
- customContentFontStyle: globalTokens.type_normal,
489
- customContentFontWeight: globalTokens.type_regular,
490
- customContentFontColor: globalTokens.black,
491
- titleFontFamily: globalTokens.type_sans,
492
- titleFontSize: globalTokens.type_scale_05,
493
- titleFontStyle: globalTokens.type_normal,
494
- titleFontWeight: globalTokens.type_regular,
495
- titleFontColor: "#000000de",
496
- titleFontTextTransform: "none",
497
- titleFontLetterSpacing: globalTokens.type_spacing_normal,
498
- subtitleFontFamily: globalTokens.type_sans,
499
- subtitleFontSize: globalTokens.type_scale_01,
500
- subtitleFontStyle: globalTokens.type_normal,
501
- subtitleFontWeight: globalTokens.type_regular,
502
- subtitleFontColor: "#00000099",
503
- subtitleFontTextTransform: globalTokens.type_uppercase,
504
- subtitleFontLetterSpacing: globalTokens.type_spacing_wide_03,
505
- linkFontFamily: globalTokens.type_sans,
506
- linkFontSize: globalTokens.type_scale_02,
507
- linkFontStyle: globalTokens.type_normal,
508
- linkFontWeight: globalTokens.type_regular,
509
- linkFontColor: "#00000099",
510
- linkFontTextTransform: "none",
511
- linkFontLetterSpacing: globalTokens.type_spacing_wide_01,
512
- linkTextDecoration: globalTokens.type_no_line,
513
- linkMarginTop: "6px",
514
- linkMarginRight: "18px",
515
- linkMarginBottom: "6px",
516
- linkMarginLeft: "18px",
517
- scrollBarThumbColor: "#66666626",
518
- scrollBarTrackColor: globalTokens.transparent
519
- },
520
- slider: {
521
- thumbBackgroundColor: globalTokens.mediumBlue,
522
- dotsBackgroundColor: globalTokens.mediumBlue,
523
- trackLine: globalTokens.mediumBlue,
524
- totalLine: globalTokens.softBlue,
525
- disabledThumbBackgroundColor: globalTokens.softBlue,
526
- disabledDotsBackgroundColor: globalTokens.softBlue,
527
- disabledTrackLine: globalTokens.softBlue,
528
- focusColor: globalTokens.blue,
529
- fontFamily: globalTokens.type_sans,
530
- fontSizeBase: globalTokens.type_scale_root,
531
- fontSize: globalTokens.type_scale_03
532
- },
533
- spinner: {
534
- trackCircleColor: globalTokens.purple,
535
- totalCircleColor: globalTokens.white,
536
- labelFontFamily: globalTokens.type_sans,
537
- labelFontSize: globalTokens.type_scale_01,
538
- labelFontStyle: globalTokens.type_normal,
539
- labelFontWeight: globalTokens.type_regular,
540
- labelFontColor: globalTokens.inherit,
541
- labelFontTextTransform: globalTokens.type_uppercase,
542
- labelLetterSpacing: globalTokens.type_spacing_normal,
543
- labelTextAlign: "center",
544
- progressValueFontFamily: globalTokens.type_sans,
545
- progressValueFontSize: globalTokens.type_scale_01,
546
- progressValueFontStyle: globalTokens.type_normal,
547
- progressValueFontWeight: globalTokens.type_regular,
548
- progressValueFontColor: globalTokens.inherit,
549
- progressValueLetterSpacing: globalTokens.type_spacing_normal,
550
- progressValueTextAlign: "center",
551
- overlayBackgroundColor: globalTokens.black,
552
- overlayOpacity: "0.8",
553
- overlayLabelFontFamily: globalTokens.type_sans,
554
- overlayLabelFontSize: globalTokens.type_scale_01,
555
- overlayLabelFontStyle: globalTokens.type_normal,
556
- overlayLabelFontWeight: globalTokens.type_regular,
557
- overlayLabelFontColor: globalTokens.white,
558
- overlayLabelFontTextTransform: globalTokens.type_uppercase,
559
- overlayLabelLetterSpacing: globalTokens.type_spacing_normal,
560
- overlayLabelTextAlign: "center",
561
- overlayProgressValueFontFamily: globalTokens.type_sans,
562
- overlayProgressValueFontSize: globalTokens.type_scale_01,
563
- overlayProgressValueFontStyle: globalTokens.type_normal,
564
- overlayProgressValueFontWeight: globalTokens.type_regular,
565
- overlayProgressValueFontColor: globalTokens.white,
566
- overlayProgressValueLetterSpacing: globalTokens.type_spacing_normal,
567
- overlayProgressValueTextAlign: "center"
568
- },
569
- "switch": {
570
- checkedTrackBackgroundColor: globalTokens.purple,
571
- checkedTrackBackgroundColorOnDark: globalTokens.purple,
572
- checkedThumbBackgroundColor: globalTokens.white,
573
- checkedThumbBackgroundColorOnDark: globalTokens.white,
574
- uncheckedTrackBackgroundColor: globalTokens.lightGrey,
575
- uncheckedTrackBackgroundColorOnDark: globalTokens.lightGrey,
576
- uncheckedThumbBackgroundColor: globalTokens.white,
577
- uncheckedThumbBackgroundColorOnDark: globalTokens.white,
578
- disabledCheckedTrackBackgroundColor: globalTokens.purple,
579
- disabledCheckedTrackBackgroundColorOnDark: globalTokens.purple,
580
- disabledCheckedThumbBackgroundColor: globalTokens.white,
581
- disabledCheckedThumbBackgroundColorOnDark: globalTokens.white,
582
- disabledUncheckedTrackBackgroundColor: globalTokens.lightGrey,
583
- disabledUncheckedTrackBackgroundColorOnDark: globalTokens.lightGrey,
584
- disabledUncheckedThumbBackgroundColor: globalTokens.white,
585
- disabledUncheckedThumbBackgroundColorOnDark: globalTokens.white,
586
- disabledLabelFontColor: globalTokens.black,
587
- disabledLabelFontColorOnDark: globalTokens.white,
588
- disabledLabelFontStyle: globalTokens.type_normal,
589
- labelFontFamily: globalTokens.type_sans,
590
- labelFontSize: globalTokens.type_scale_root,
591
- labelFontStyle: globalTokens.type_normal,
592
- labelFontWeight: globalTokens.type_regular,
593
- labelFontColor: globalTokens.black,
594
- labelFontColorOnDark: globalTokens.white,
595
- labelMarginRight: "0px",
596
- thumbFocusColor: globalTokens.blue,
597
- thumbFocusColorOnDark: "#1489FB",
598
- thumbHeight: "24px",
599
- thumbWidth: "24px",
600
- trackHeight: "12px",
601
- trackWidth: "60px",
602
- thumbTranslateX: "40%"
603
- },
604
- tag: {
605
- textDecoration: globalTokens.type_no_line
606
- },
607
- table: {
608
- rowSeparatorThickness: "1px",
609
- rowSeparatorStyle: "solid",
610
- rowSeparatorColor: globalTokens.lightGrey,
611
- rowHeight: "",
612
- dataBackgroundColor: globalTokens.white,
613
- dataFontFamily: globalTokens.type_sans,
614
- dataFontSize: globalTokens.type_scale_root,
615
- dataFontStyle: globalTokens.type_normal,
616
- dataFontWeight: globalTokens.type_regular,
617
- dataFontColor: globalTokens.black,
618
- dataFontTextTransform: "none",
619
- dataTextAlign: "left",
620
- headerBackgroundColor: globalTokens.purple,
621
- headerFontFamily: globalTokens.type_sans,
622
- headerFontSize: globalTokens.type_scale_02,
623
- headerFontStyle: globalTokens.type_normal,
624
- headerFontWeight: globalTokens.type_regular,
625
- headerFontColor: globalTokens.white,
626
- headerFontTextTransform: "none",
627
- headerTextAlign: "left",
628
- scrollBarThumbColor: globalTokens.darkGrey,
629
- scrollBarTrackColor: globalTokens.lightGrey
630
- },
631
- tabs: {
632
- selectedFontColor: globalTokens.purple,
633
- selectedIconColor: globalTokens.purple,
634
- selectedUnderlineColor: globalTokens.purple,
635
- backgroundColor: globalTokens.white,
636
- fontColor: globalTokens.darkGrey,
637
- disabledFontColor: globalTokens.mediumGrey,
638
- focusOutline: globalTokens.purple,
639
- divider: globalTokens.mediumGrey,
640
- hoverBackgroundColor: globalTokens.lightPurple,
641
- pressedBackgroundColor: globalTokens.mediumPurple,
642
- fontFamily: globalTokens.type_sans,
643
- fontSizeBase: globalTokens.type_scale_root,
644
- fontSize: globalTokens.type_scale_03,
645
- fontWeight: globalTokens.type_semibold
646
- },
647
- textarea: {
648
- fontColor: globalTokens.black,
649
- disabledFontColor: globalTokens.lighterBlack,
650
- error: globalTokens.red,
651
- scrollBarThumbColor: globalTokens.darkGrey,
652
- scrollBarTrackColor: globalTokens.lightGrey,
653
- fontFamily: globalTokens.type_sans,
654
- fontSizeBase: globalTokens.type_scale_root,
655
- fontSize: globalTokens.type_scale_03
656
- },
657
- toggleGroup: {
658
- selectedBackgroundColor: globalTokens.purple,
659
- disabledSelectedBackgroundColor: globalTokens.lighterPurple,
660
- selectedBackgroundHoverColor: globalTokens.black,
661
- selectedFontColor: globalTokens.white,
662
- selectedHoverFontColor: globalTokens.white,
663
- unselectedBackgroundColor: globalTokens.lightGrey,
664
- disabledUnselectedBackgroundColor: globalTokens.lightWhite,
665
- unselectedBackgroundHoverColor: globalTokens.darkWhite,
666
- unselectedFontColor: globalTokens.black,
667
- unselectedHoverFontColor: globalTokens.black,
668
- disabledUnselectedFontColor: globalTokens.lighterBlack,
669
- disabledSelectedFontColor: globalTokens.white,
670
- fontFamily: globalTokens.type_sans,
671
- fontSizeBase: globalTokens.type_scale_root,
672
- fontSize: globalTokens.type_scale_02,
673
- fontStyle: globalTokens.type_normal,
674
- fontTextTransform: globalTokens.type_uppercase,
675
- fontLetterSpacingWide02: globalTokens.type_spacing_wide_02
676
- },
677
- upload: {
678
- fontColor: globalTokens.darkGrey,
679
- shadowColor: globalTokens.lightWhite,
680
- backgroundDragColor: globalTokens.lightWhite,
681
- accentColor: globalTokens.lightGrey,
682
- fileHoverColor: globalTokens.darkWhite,
683
- scrollBarThumbColor: globalTokens.darkGrey,
684
- scrollBarTrackColor: globalTokens.lightGrey,
685
- errorColor: globalTokens.red,
686
- fontFamily: globalTokens.type_sans,
687
- fontSizeBase: globalTokens.type_scale_root,
688
- fontSize20: globalTokens.type_scale_04,
689
- fontSize16: globalTokens.type_scale_03,
690
- fontSize12: globalTokens.type_scale_01,
691
- fontStyle: globalTokens.type_italic,
692
- fontTextTransform: globalTokens.type_uppercase,
693
- fontWeight: globalTokens.type_bold
694
- },
695
- wizard: {
696
- selectedBackgroundColor: globalTokens.purple,
697
- selectedFont: globalTokens.white,
698
- borderColor: globalTokens.black,
699
- fontColor: globalTokens.inherit,
700
- lineColor: globalTokens.lightGrey,
701
- disabledBackground: globalTokens.lightGrey,
702
- disabledFont: globalTokens.darkGrey,
703
- fontFamily: globalTokens.type_sans,
704
- fontSizeBase: globalTokens.type_scale_root,
705
- fontSize16: globalTokens.type_scale_03,
706
- fontSize12: globalTokens.type_scale_01,
707
- fontStyle: globalTokens.type_normal,
708
- fontLetterSpacingWide01: globalTokens.type_spacing_wide_01,
709
- fontLetterSpacingWide02: globalTokens.type_spacing_wide_02
710
- }
711
- };
712
- exports.componentTokens = componentTokens;
713
- var spaces = {
714
- xxsmall: "6px",
715
- xsmall: "16px",
716
- small: "24px",
717
- medium: "36px",
718
- large: "48px",
719
- xlarge: "64px",
720
- xxlarge: "100px"
721
- };
722
- exports.spaces = spaces;
723
- var responsiveSizes = {
724
- mobileSmall: "320",
725
- mobileMedium: "375",
726
- mobileLarge: "425",
727
- tablet: "768",
728
- laptop: "1024",
729
- desktop: "1440"
730
- };
731
- exports.responsiveSizes = responsiveSizes;
732
- var typeface = {
733
- body: {
734
- fontSize: "16px",
735
- letterSpacing: "0.5",
736
- textTransform: "initial"
737
- },
738
- altBody: {
739
- fontSize: "14px",
740
- letterSpacing: "0.25",
741
- textTransform: "initial"
742
- },
743
- subtitle: {
744
- fontSize: "16px",
745
- letterSpacing: "0.15",
746
- textTransform: "initial"
747
- },
748
- altSubtitle: {
749
- fontSize: "14px",
750
- letterSpacing: "0.1",
751
- textTransform: "initial"
752
- },
753
- caption: {
754
- fontSize: "12px",
755
- letterSpacing: "0.4",
756
- textTransform: "initial"
757
- },
758
- overline: {
759
- fontSize: "12px",
760
- letterSpacing: "2",
761
- textTransform: "uppercase"
762
- }
763
- };
764
- exports.typeface = typeface;