@dxc-technology/halstack-react 0.0.0-4e9134c → 0.0.0-4fd9593

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 (32) hide show
  1. package/dist/ThemeContext.js +2 -2
  2. package/dist/accordion/Accordion.js +32 -30
  3. package/dist/alert/Alert.js +8 -4
  4. package/dist/box/Box.js +1 -9
  5. package/dist/checkbox/Checkbox.js +5 -5
  6. package/dist/chip/Chip.js +21 -25
  7. package/dist/common/variables.js +284 -269
  8. package/dist/date/Date.js +3 -3
  9. package/dist/dialog/Dialog.js +7 -2
  10. package/dist/dropdown/Dropdown.js +6 -6
  11. package/dist/footer/Footer.js +19 -31
  12. package/dist/header/Header.js +17 -25
  13. package/dist/heading/Heading.js +1 -5
  14. package/dist/input-text/InputText.js +92 -57
  15. package/dist/link/Link.js +2 -2
  16. package/dist/paginator/Paginator.js +10 -4
  17. package/dist/select/Select.js +78 -56
  18. package/dist/sidenav/Sidenav.js +6 -12
  19. package/dist/spinner/Spinner.js +20 -16
  20. package/dist/table/Table.js +5 -1
  21. package/dist/tag/Tag.js +13 -5
  22. package/dist/textarea/Textarea.js +26 -22
  23. package/dist/toggle-group/ToggleGroup.js +1 -1
  24. package/dist/upload/buttons-upload/ButtonsUpload.js +5 -1
  25. package/dist/upload/dragAndDropArea/DragAndDropArea.js +10 -6
  26. package/dist/upload/file-upload/FileToUpload.js +1 -1
  27. package/dist/upload/transaction/Transaction.js +13 -9
  28. package/dist/upload/transactions/Transactions.js +11 -11
  29. package/dist/wizard/Wizard.js +8 -8
  30. package/package.json +1 -1
  31. package/test/NewTextarea.test.js +0 -1
  32. package/test/Select.test.js +4 -7
package/dist/date/Date.js CHANGED
@@ -221,12 +221,12 @@ var DxcDate = function DxcDate(_ref) {
221
221
  },
222
222
  MuiPickersToolbarText: {
223
223
  toolbarTxt: {
224
- color: colorsTheme === null || colorsTheme === void 0 ? void 0 : (_colorsTheme$date = colorsTheme.date) === null || _colorsTheme$date === void 0 ? void 0 : _colorsTheme$date.pickerActualDate,
224
+ color: colorsTheme === null || colorsTheme === void 0 ? void 0 : (_colorsTheme$date = colorsTheme.date) === null || _colorsTheme$date === void 0 ? void 0 : _colorsTheme$date.pickerActualDateColor,
225
225
  fontFamily: colorsTheme === null || colorsTheme === void 0 ? void 0 : (_colorsTheme$date2 = colorsTheme.date) === null || _colorsTheme$date2 === void 0 ? void 0 : _colorsTheme$date2.fontFamily,
226
226
  fontSize: "2rem"
227
227
  },
228
228
  toolbarBtnSelected: {
229
- color: colorsTheme.date.pickerActualDate
229
+ color: colorsTheme.date.pickerActualDateColor
230
230
  }
231
231
  },
232
232
  MuiPickersCalendarHeader: {
@@ -255,7 +255,7 @@ var DxcDate = function DxcDate(_ref) {
255
255
  },
256
256
  MuiPickersDay: {
257
257
  current: {
258
- border: colorsTheme.date.pickerActualDate + " 2px solid",
258
+ border: colorsTheme.date.pickerActualDateColor + " 2px solid",
259
259
  color: colorsTheme.date.pickerFontColor
260
260
  },
261
261
  day: {
package/dist/dialog/Dialog.js CHANGED
@@ -29,6 +29,8 @@ var _variables = require("../common/variables.js");
29
29
 
30
30
  var _useTheme = _interopRequireDefault(require("../useTheme.js"));
31
31
 
32
+ var _BackgroundColorContext = require("../BackgroundColorContext.js");
33
+
32
34
  function _templateObject4() {
33
35
  var data = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n width: ", ";\n height: ", ";\n border-radius: ", ";\n border-width: ", ";\n border-style: ", ";\n border-color: ", ";\n"]);
34
36
 
@@ -133,13 +135,16 @@ var DxcDialog = function DxcDialog(_ref) {
133
135
  xmlns: "http://www.w3.org/2000/svg",
134
136
  width: "24",
135
137
  height: "24",
136
- viewBox: "0 0 24 24"
138
+ viewBox: "0 0 24 24",
139
+ fill: "currentColor"
137
140
  }, _react["default"].createElement("path", {
138
141
  d: "M0 0h24v24H0V0z",
139
142
  fill: "none"
140
143
  }), _react["default"].createElement("path", {
141
144
  d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
142
- }))), _react["default"].createElement(Children, null, children)));
145
+ }))), _react["default"].createElement(Children, null, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
146
+ color: colorsTheme.dialog.backgroundColor
147
+ }, children))));
143
148
  };
144
149
 
145
150
  var DialogContainer = (0, _styledComponents["default"])(_Dialog["default"])(_templateObject(), function (props) {
package/dist/dropdown/Dropdown.js CHANGED
@@ -42,7 +42,7 @@ var _utils = require("../common/utils.js");
42
42
  var _useTheme = _interopRequireDefault(require("../useTheme.js"));
43
43
 
44
44
  function _templateObject8() {
45
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: ", ";\n margin-top:", ";\n margin-bottom", ";\n margin-left: ", ";\n margin-right: ", ";\n & > svg {\n fill: ", ";\n }\n"]);
45
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n display: ", ";\n margin-top:", ";\n margin-bottom: ", ";\n margin-left: ", ";\n margin-right: ", ";\n & > svg {\n fill: ", ";\n }\n"]);
46
46
 
47
47
  _templateObject8 = function _templateObject8() {
48
48
  return data;
@@ -92,7 +92,7 @@ function _templateObject4() {
92
92
  }
93
93
 
94
94
  function _templateObject3() {
95
- var data = (0, _taggedTemplateLiteral2["default"])(["\n padding: 0 16px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n width: 100%;\n height: auto;\n min-height: 40px;\n display: inline-flex;\n justify-content: space-between;\n align-items: center;\n border-radius: ", ";\n border-width: ", ";\n border-style: ", ";\n border-color: ", ";\n\n min-width: ", ";\n\n padding-top: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n &:focus {\n outline: none;\n }\n\n background-color: ", ";\n color: ", ";\n\n border-bottom-right-radius: ", ";\n border-bottom-left-radius: ", ";\n &:hover {\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n }\n"]);
95
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n padding: 0 16px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n width: 100%;\n height: auto;\n min-height: ", ";\n display: inline-flex;\n justify-content: space-between;\n align-items: center;\n border-radius: ", ";\n border-width: ", ";\n border-style: ", ";\n border-color: ", ";\n\n min-width: ", ";\n\n padding-top: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n &:focus {\n outline: none;\n }\n\n background-color: ", ";\n color: ", ";\n\n border-bottom-right-radius: ", ";\n border-bottom-left-radius: ", ";\n &:hover {\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n }\n"]);
96
96
 
97
97
  _templateObject3 = function _templateObject3() {
98
98
  return data;
@@ -102,7 +102,7 @@ function _templateObject3() {
102
102
  }
103
103
 
104
104
  function _templateObject2() {
105
- var data = (0, _taggedTemplateLiteral2["default"])(["\n z-index: 1;\n\n .MuiMenuItem-gutters {\n width: ", ";\n }\n .MuiMenuItem-root {\n min-height: 36px;\n padding-top: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n height: auto;\n }\n\n .MuiPaper-root {\n min-width: ", ";\n\n color: ", ";\n border-width: ", ";\n border-style: ", ";\n border-color: ", ";\n\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border-top-left-radius: 0px;\n border-top-right-radius: 0px;\n max-height: 230px;\n overflow: auto;\n .MuiList-padding {\n padding-top: 0px;\n padding-bottom: 0px;\n }\n .MuiListItem-button {\n display: flex;\n flex-direction: ", ";\n justify-content: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n cursor: pointer;\n }\n .MuiListItem-button:hover {\n background-color: ", ";\n color: ", ";\n }\n\n ::-webkit-scrollbar {\n width: 3px;\n }\n\n ::-webkit-scrollbar-track {\n background-color: ", ";\n border-radius: 3px;\n }\n\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 3px;\n }\n }\n"]);
105
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n z-index: 1;\n\n .MuiMenuItem-gutters {\n width: ", ";\n }\n .MuiMenuItem-root {\n min-height: 36px;\n padding-top: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n padding-right: ", ";\n height: auto;\n }\n\n .MuiPaper-root {\n min-width: ", ";\n\n border-width: ", ";\n border-style: ", ";\n border-color: ", ";\n\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n border-top-left-radius: 0px;\n border-top-right-radius: 0px;\n max-height: 230px;\n overflow: auto;\n .MuiList-padding {\n padding-top: 0px;\n padding-bottom: 0px;\n }\n .MuiListItem-button {\n display: flex;\n flex-direction: ", ";\n justify-content: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n cursor: pointer;\n }\n .MuiListItem-button:hover {\n background-color: ", ";\n color: ", ";\n }\n\n ::-webkit-scrollbar {\n width: 3px;\n }\n\n ::-webkit-scrollbar-track {\n background-color: ", ";\n border-radius: 3px;\n }\n\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 3px;\n }\n }\n"]);
106
106
 
107
107
  _templateObject2 = function _templateObject2() {
108
108
  return data;
@@ -355,8 +355,6 @@ var DxcMenu = (0, _styledComponents["default"])(_Popper["default"])(_templateObj
355
355
  return props.theme.optionsPaddingRight;
356
356
  }, function (props) {
357
357
  return "".concat(props.width, "px");
358
- }, function (props) {
359
- return props.theme.optionsListFontColor;
360
358
  }, function (props) {
361
359
  return props.theme.borderThickness;
362
360
  }, function (props) {
@@ -378,7 +376,7 @@ var DxcMenu = (0, _styledComponents["default"])(_Popper["default"])(_templateObj
378
376
  }, function (props) {
379
377
  return props.theme.optionsFontWeight;
380
378
  }, function (props) {
381
- return props.theme.optionsFontColor;
379
+ return props.theme.optionsListFontColor;
382
380
  }, function (props) {
383
381
  return props.theme.optionsListHoverBackgroundColor;
384
382
  }, function (props) {
@@ -399,6 +397,8 @@ var DropdownTrigger = _styledComponents["default"].button(_templateObject3(), fu
399
397
  return props.theme.buttonFontStyle;
400
398
  }, function (props) {
401
399
  return props.theme.buttonFontWeight;
400
+ }, function (props) {
401
+ return props.theme.minHeight;
402
402
  }, function (props) {
403
403
  return props.theme.borderRadius;
404
404
  }, function (props) {
package/dist/footer/Footer.js CHANGED
@@ -27,6 +27,8 @@ var _variables = require("../common/variables.js");
27
27
 
28
28
  var _useTheme = _interopRequireDefault(require("../useTheme.js"));
29
29
 
30
+ var _BackgroundColorContext = require("../BackgroundColorContext.js");
31
+
30
32
  function _templateObject12() {
31
33
  var data = (0, _taggedTemplateLiteral2["default"])(["\n text-decoration: ", ";\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n"]);
32
34
 
@@ -78,7 +80,7 @@ function _templateObject8() {
78
80
  }
79
81
 
80
82
  function _templateObject7() {
81
- var data = (0, _taggedTemplateLiteral2["default"])(["\n height: ", ";\n width: ", ";\n"]);
83
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n max-height: ", ";\n width: ", ";\n"]);
82
84
 
83
85
  _templateObject7 = function _templateObject7() {
84
86
  return data;
@@ -98,7 +100,7 @@ function _templateObject6() {
98
100
  }
99
101
 
100
102
  function _templateObject5() {
101
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n min-height: 16px;\n padding: ", ";\n padding-top: ", ";\n padding-right: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n color: ", ";\n overflow: hidden;\n"]);
103
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n min-height: 15px;\n padding: ", ";\n padding-top: ", ";\n padding-right: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n overflow: hidden;\n"]);
102
104
 
103
105
  _templateObject5 = function _templateObject5() {
104
106
  return data;
@@ -118,7 +120,7 @@ function _templateObject4() {
118
120
  }
119
121
 
120
122
  function _templateObject3() {
121
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n flex-direction: ", ";\n align-items: ", ";\n border-top: ", " ", " ", ";\n"]);
123
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n flex-direction: ", ";\n align-items: ", ";\n border-top: ", ";\n"]);
122
124
 
123
125
  _templateObject3 = function _templateObject3() {
124
126
  return data;
@@ -138,7 +140,7 @@ function _templateObject2() {
138
140
  }
139
141
 
140
142
  function _templateObject() {
141
- var data = (0, _taggedTemplateLiteral2["default"])(["\n padding: ", ";\n background-color: ", ";\n margin-top: ", ";\n width: 100%;\n box-sizing: border-box;\n min-height: ", ";\n color: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n"]);
143
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n padding: ", ";\n background-color: ", ";\n margin-top: ", ";\n width: 100%;\n box-sizing: border-box;\n min-height: ", ";\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n"]);
142
144
 
143
145
  _templateObject = function _templateObject() {
144
146
  return data;
@@ -246,7 +248,9 @@ var DxcFooter = function DxcFooter(_ref) {
246
248
  refSize: refSize
247
249
  }, copyright))), (!isResponsiveTablet && !isResponsivePhone || isResponsiveTablet) && _react["default"].createElement("div", null, _react["default"].createElement(ChildComponents, {
248
250
  padding: padding
249
- }, children), _react["default"].createElement(FooterFooter, {
251
+ }, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
252
+ color: colorsTheme.footer.backgroundColor
253
+ }, children)), _react["default"].createElement(FooterFooter, {
250
254
  className: "footerFooter"
251
255
  }, _react["default"].createElement(BottomLinks, {
252
256
  refSize: refSize
@@ -262,9 +266,7 @@ var FooterContainer = _styledComponents["default"].footer(_templateObject(), fun
262
266
  }, function (props) {
263
267
  return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
264
268
  }, function (props) {
265
- return props.theme.minHeight;
266
- }, function (props) {
267
- return props.theme.fontColorBase;
269
+ return props.theme.height;
268
270
  });
269
271
 
270
272
  var FooterHeader = _styledComponents["default"].div(_templateObject2());
@@ -274,11 +276,7 @@ var FooterFooter = _styledComponents["default"].div(_templateObject3(), function
274
276
  }, function (props) {
275
277
  return props.refSize <= _variables.responsiveSizes.mobileLarge ? "center" : "";
276
278
  }, function (props) {
277
- return props.theme.bottomLinksDividerThickness;
278
- }, function (props) {
279
- return props.theme.bottomLinksDividerStyle;
280
- }, function (props) {
281
- return props.theme.bottomLinksDividerColor;
279
+ return "".concat(props.theme.bottomLinksDividerThickness, " ").concat(props.theme.bottomLinksDividerStyle, " ").concat(props.theme.bottomLinksDividerColor);
282
280
  });
283
281
 
284
282
  var BottomLinks = _styledComponents["default"].div(_templateObject4(), function (props) {
@@ -292,14 +290,6 @@ var BottomLinks = _styledComponents["default"].div(_templateObject4(), function
292
290
  });
293
291
 
294
292
  var ChildComponents = _styledComponents["default"].div(_templateObject5(), function (props) {
295
- return props.theme.customContentFontFamily;
296
- }, function (props) {
297
- return props.theme.customContentFontSize;
298
- }, function (props) {
299
- return props.theme.customContentFontStyle;
300
- }, function (props) {
301
- return props.theme.customContentFontWeight;
302
- }, function (props) {
303
293
  return props.padding && (0, _typeof2["default"])(props.padding) !== "object" ? _variables.spaces[props.padding] : "0px";
304
294
  }, function (props) {
305
295
  return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.top ? _variables.spaces[props.padding.top] : "";
@@ -309,8 +299,6 @@ var ChildComponents = _styledComponents["default"].div(_templateObject5(), funct
309
299
  return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.bottom ? _variables.spaces[props.padding.bottom] : "";
310
300
  }, function (props) {
311
301
  return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.left ? _variables.spaces[props.padding.left] : "";
312
- }, function (props) {
313
- return props.theme.customContentFontColor;
314
302
  });
315
303
 
316
304
  var Copyright = _styledComponents["default"].div(_templateObject6(), function (props) {
@@ -340,23 +328,23 @@ var LogoIcon = _styledComponents["default"].img(_templateObject7(), function (pr
340
328
  });
341
329
 
342
330
  var SocialAnchor = _styledComponents["default"].a(_templateObject8(), function (props) {
343
- return props.index === 0 ? "0px" : props.theme.socialIconsGutter;
331
+ return props.index === 0 ? "0px" : props.theme.socialLinksGutter;
344
332
  });
345
333
 
346
334
  var SocialIcon = _styledComponents["default"].img(_templateObject9(), function (props) {
347
- return props.theme.socialIconSize;
335
+ return props.theme.socialLinksSize;
348
336
  }, function (props) {
349
- return props.theme.socialIconSize;
337
+ return props.theme.socialLinksSize;
350
338
  }, function (props) {
351
- return props.theme.fontColorBase;
339
+ return props.theme.socialLinksColor;
352
340
  });
353
341
 
354
342
  var SocialIconContainer = _styledComponents["default"].div(_templateObject10(), function (props) {
355
- return props.theme.socialIconSize;
343
+ return props.theme.socialLinksSize;
356
344
  }, function (props) {
357
- return props.theme.socialIconSize;
345
+ return props.theme.socialLinksSize;
358
346
  }, function (props) {
359
- return props.theme.fontColorBase;
347
+ return props.theme.socialLinksColor;
360
348
  });
361
349
 
362
350
  var Point = _styledComponents["default"].span(_templateObject11(), function (props) {
@@ -366,7 +354,7 @@ var Point = _styledComponents["default"].span(_templateObject11(), function (pro
366
354
  var BottomLink = _styledComponents["default"].a(_templateObject12(), function (props) {
367
355
  return props.theme.bottomLinksTextDecoration;
368
356
  }, function (props) {
369
- return props.theme.bottomLinksFontColor || props.theme.fontColorBase;
357
+ return props.theme.bottomLinksFontColor;
370
358
  }, function (props) {
371
359
  return props.theme.bottomLinksFontFamily;
372
360
  }, function (props) {
package/dist/header/Header.js CHANGED
@@ -33,6 +33,8 @@ var _variables = require("../common/variables.js");
33
33
 
34
34
  var _useTheme = _interopRequireDefault(require("../useTheme.js"));
35
35
 
36
+ var _BackgroundColorContext = require("../BackgroundColorContext.js");
37
+
36
38
  function _templateObject12() {
37
39
  var data = (0, _taggedTemplateLiteral2["default"])(["\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n background-color: ", ";\n opacity: ", " !important;\n visibility: ", ";\n opacity: ", ";\n display: ", ";\n transition: opacity 0.2s 0.2s ease-in-out;\n z-index: ", ";\n"]);
38
40
 
@@ -134,7 +136,7 @@ function _templateObject3() {
134
136
  }
135
137
 
136
138
  function _templateObject2() {
137
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-size: ", ";\n\n margin-bottom: ", ";\n\n &.MuiAppBar-colorPrimary {\n background-color: ", ";\n\n color: ", ";\n\n border-bottom: ", ";\n\n font-family: ", ";\n\n &.MuiPaper-elevation4 {\n box-shadow: none;\n }\n .ChildComponents {\n display: flex;\n align-items: center;\n }\n }\n & {\n min-height: ", ";\n }\n &.MuiAppBar-root {\n flex-direction: row;\n align-items: center;\n padding: ", ";\n justify-content: space-between;\n }\n"]);
139
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n margin-bottom: ", ";\n\n &.MuiAppBar-colorPrimary {\n background-color: ", ";\n border-bottom: ", ";\n\n &.MuiPaper-elevation4 {\n box-shadow: none;\n }\n .ChildComponents {\n display: flex;\n align-items: center;\n }\n }\n & {\n min-height: ", ";\n }\n &.MuiAppBar-root {\n flex-direction: row;\n align-items: center;\n padding: ", ";\n justify-content: space-between;\n }\n"]);
138
140
 
139
141
  _templateObject2 = function _templateObject2() {
140
142
  return data;
@@ -144,7 +146,7 @@ function _templateObject2() {
144
146
  }
145
147
 
146
148
  function _templateObject() {
147
- var data = (0, _taggedTemplateLiteral2["default"])(["\n button {\n color: ", ";\n background-color: ", ";\n :hover {\n background-color: ", ";\n }\n }\n"]);
149
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n button {\n background-color: transparent;\n :hover {\n background-color: transparent;\n }\n }\n"]);
148
150
 
149
151
  _templateObject = function _templateObject() {
150
152
  return data;
@@ -157,13 +159,7 @@ var Dropdown = function Dropdown(props) {
157
159
  return _react["default"].createElement(HeaderDropdown, null, _react["default"].createElement(_Dropdown["default"], props));
158
160
  };
159
161
 
160
- var HeaderDropdown = _styledComponents["default"].div(_templateObject(), function (props) {
161
- return props.theme.fontColorBase;
162
- }, function (props) {
163
- return props.theme.dropdownBackgroundColor;
164
- }, function (props) {
165
- return props.theme.dropdownHoverBackgroundColor;
166
- });
162
+ var HeaderDropdown = _styledComponents["default"].div(_templateObject());
167
163
 
168
164
  var DxcHeader = function DxcHeader(_ref) {
169
165
  var _ref$underlined = _ref.underlined,
@@ -279,22 +275,18 @@ var DxcHeader = function DxcHeader(_ref) {
279
275
  refSize: refSize
280
276
  }))), !isResponsive && _react["default"].createElement(ChildContainer, {
281
277
  padding: padding
282
- }, content)));
278
+ }, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
279
+ color: colorsTheme.header.backgroundColor
280
+ }, content))));
283
281
  };
284
282
 
285
283
  DxcHeader.Dropdown = Dropdown;
286
284
  var HeaderContainer = (0, _styledComponents["default"])(_AppBar["default"])(_templateObject2(), function (props) {
287
- return props.theme.fontSizeBase;
288
- }, function (props) {
289
285
  return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
290
286
  }, function (props) {
291
287
  return props.theme.backgroundColor;
292
- }, function (props) {
293
- return props.theme.fontColorBase;
294
288
  }, function (props) {
295
289
  return props.underlined && "".concat(props.theme.underlinedThickness, " ").concat(props.theme.underlinedStyle, " ").concat(props.theme.underlinedColor);
296
- }, function (props) {
297
- return props.theme.fontFamily;
298
290
  }, function (props) {
299
291
  return props.theme.minHeight;
300
292
  }, function (props) {
@@ -326,15 +318,15 @@ var ChildContainer = _styledComponents["default"].div(_templateObject5(), functi
326
318
  }, function (props) {
327
319
  return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.left ? _variables.spaces[props.padding.left] : "";
328
320
  }, function (props) {
329
- return props.theme.customContentFontFamily || props.theme.fontFamilyBase;
321
+ return props.theme.customContentFontFamily;
330
322
  }, function (props) {
331
323
  return props.theme.customContentFontStyle;
332
324
  }, function (props) {
333
- return props.theme.customContentFontSize || props.theme.fontSizeBase;
325
+ return props.theme.customContentFontSize;
334
326
  }, function (props) {
335
327
  return props.theme.customContentFontWeight;
336
328
  }, function (props) {
337
- return props.theme.customContentFontColor || props.theme.fontColorBase;
329
+ return props.theme.customContentFontColor;
338
330
  });
339
331
 
340
332
  var HamburguerItem = _styledComponents["default"].div(_templateObject6(), function (props) {
@@ -342,11 +334,11 @@ var HamburguerItem = _styledComponents["default"].div(_templateObject6(), functi
342
334
  }, function (props) {
343
335
  return props.theme.hamburguerFocusColor;
344
336
  }, function (props) {
345
- return props.theme.hamburguerColor;
337
+ return props.theme.hamburguerIconColor;
346
338
  });
347
339
 
348
340
  var HamburguerTitle = _styledComponents["default"].span(_templateObject7(), function (props) {
349
- return props.theme.hamburguerFontFamily || props.theme.fontFamilyBase;
341
+ return props.theme.hamburguerFontFamily;
350
342
  }, function (props) {
351
343
  return props.theme.hamburguerFontStyle;
352
344
  }, function (props) {
@@ -356,7 +348,7 @@ var HamburguerTitle = _styledComponents["default"].span(_templateObject7(), func
356
348
  }, function (props) {
357
349
  return props.theme.hamburguerFontWeight;
358
350
  }, function (props) {
359
- return props.theme.hamburguerFontColor || props.theme.fontColorBase;
351
+ return props.theme.hamburguerFontColor;
360
352
  });
361
353
 
362
354
  var MainContainer = _styledComponents["default"].div(_templateObject8());
@@ -378,15 +370,15 @@ var ResponsiveMenu = _styledComponents["default"].div(_templateObject9(), functi
378
370
  }, _variables.spaces.xxsmall);
379
371
 
380
372
  var MenuContent = _styledComponents["default"].div(_templateObject10(), function (props) {
381
- return props.theme.menuCustomContentFontFamily || props.theme.fontFamilyBase;
373
+ return props.theme.menuCustomContentFontFamily;
382
374
  }, function (props) {
383
375
  return props.theme.menuCustomContentFontStyle;
384
376
  }, function (props) {
385
- return props.theme.menuCustomContentFontSize || props.theme.fontSizeBase;
377
+ return props.theme.menuCustomContentFontSize;
386
378
  }, function (props) {
387
379
  return props.theme.menuCustomContentFontWeight;
388
380
  }, function (props) {
389
- return props.theme.menuCustomContentFontColor || props.theme.fontColorBase;
381
+ return props.theme.menuCustomContentFontColor;
390
382
  });
391
383
 
392
384
  var CloseContainer = _styledComponents["default"].img(_templateObject11(), function (props) {
package/dist/heading/Heading.js CHANGED
@@ -76,7 +76,7 @@ function _templateObject2() {
76
76
  }
77
77
 
78
78
  function _templateObject() {
79
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n font-family: ", ";\n color: ", ";\n"]);
79
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"]);
80
80
 
81
81
  _templateObject = function _templateObject() {
82
82
  return data;
@@ -121,10 +121,6 @@ var HeadingContainer = _styledComponents["default"].div(_templateObject(), funct
121
121
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
122
122
  }, function (props) {
123
123
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
124
- }, function (props) {
125
- return props.theme.fontFamilyBase;
126
- }, function (props) {
127
- return props.theme.fontColorBase;
128
124
  });
129
125
 
130
126
  var HeadingLevel1 = _styledComponents["default"].h1(_templateObject2(), function (props) {