@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/select/Select.js CHANGED
@@ -47,10 +47,10 @@ var _useTheme = _interopRequireDefault(require("../useTheme.js"));
47
47
 
48
48
  var _RequiredComponent = _interopRequireDefault(require("../common/RequiredComponent"));
49
49
 
50
- var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
50
+ var _BackgroundColorContext = _interopRequireWildcard(require("../BackgroundColorContext.js"));
51
51
 
52
52
  function _templateObject8() {
53
- var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n display: inline-block;\n\n .MuiFormControl-root {\n width: 100%;\n }\n\n .MuiFormHelperText-root {\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n margin-top: 6px;\n\n &.Mui-disabled {\n color: ", ";\n cursor: not-allowed;\n }\n }\n\n .MuiFormLabel-root {\n font-size: ", ";\n font-family: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n margin-top: -3px;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n height: 22px;\n display: flex;\n align-items: center;\n\n &.Mui-disabled {\n color: ", ";\n }\n &.Mui-focused {\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n }\n }\n\n .MuiSelect-select.MuiSelect-select {\n padding-right: unset;\n }\n\n .MuiSelect-select {\n width: 100%;\n height: 20px;\n display: flex;\n padding-right: 10px;\n color: ", ";\n align-items: center;\n :focus {\n background-color: transparent;\n outline: ", "\n auto 1px;\n }\n & > *:last-child::after {\n content: unset;\n }\n & > *:last-child::before {\n content: unset;\n }\n &.Mui-disabled {\n color: ", ";\n cursor: not-allowed;\n }\n }\n .MuiInputBase-root {\n width: 100%;\n &.Mui-disabled {\n opacity: ", ";\n cursor: not-allowed;\n &:focus {\n outline: none;\n }\n }\n }\n .MuiInput-underline {\n &:focus {\n border-bottom: ", ";\n border-bottom-color: ", ";\n }\n &.Mui-disabled:before {\n border-bottom-style: solid;\n }\n }\n .MuiInput-underline:hover:not(.Mui-disabled):before {\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n }\n .MuiInput-underline:after {\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n }\n .MuiInput-underline:before {\n border-bottom: 1px solid;\n border-bottom-color: ", ";\n }\n .MuiSelect-icon {\n color: ", " !important;\n }\n & label {\n text-overflow: ellipsis;\n overflow: hidden;\n width: calc(100% - 24px);\n }\n"]);
53
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n display: inline-block;\n\n .MuiFormControl-root {\n width: 100%;\n }\n\n .MuiFormHelperText-root {\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n margin-top: 6px;\n\n &.Mui-disabled {\n color: ", ";\n cursor: not-allowed;\n }\n }\n\n .MuiFormLabel-root {\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n margin-top: -3px;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n height: 22px;\n display: flex;\n align-items: center;\n\n &.Mui-disabled {\n color: ", ";\n }\n &.Mui-focused {\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n }\n }\n\n .MuiSelect-select.MuiSelect-select {\n padding-right: unset;\n }\n\n .MuiSelect-select {\n width: 100%;\n height: 20px;\n display: flex;\n padding-right: 10px;\n align-items: center;\n :focus {\n background-color: transparent;\n outline: ", "\n auto 1px;\n }\n & > *:last-child::after {\n content: unset;\n }\n & > *:last-child::before {\n content: unset;\n }\n &.Mui-disabled {\n color: ", ";\n cursor: not-allowed;\n &:focus {\n outline: none;\n }\n }\n }\n .MuiInputBase-input {\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n .MuiInput-underline {\n &.Mui-focused {\n border-bottom-width: ", ";\n border-bottom-color: ", ";\n }\n &.Mui-disabled:before {\n border-bottom-style: solid;\n }\n }\n .MuiInput-underline:hover:not(.Mui-disabled):before {\n border-bottom: ", " solid;\n border-bottom-color: ", ";\n }\n .MuiInput-underline:after {\n border-bottom: ", " solid;\n border-bottom-color: ", ";\n }\n .MuiInput-underline:before {\n border-bottom: ", " solid;\n border-bottom-color: ", ";\n }\n .MuiSelect-icon {\n color: ", " !important;\n }\n & label {\n text-overflow: ellipsis;\n overflow: hidden;\n width: calc(100% - 24px);\n }\n"]);
54
54
 
55
55
  _templateObject8 = function _templateObject8() {
56
56
  return data;
@@ -110,7 +110,7 @@ function _templateObject3() {
110
110
  }
111
111
 
112
112
  function _templateObject2() {
113
- var data = (0, _taggedTemplateLiteral2["default"])(["\n overflow: hidden;\n text-overflow: ellipsis;\n"]);
113
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n overflow: hidden;\n text-overflow: ellipsis;\n color: ", ";\n"]);
114
114
 
115
115
  _templateObject2 = function _templateObject2() {
116
116
  return data;
@@ -142,10 +142,14 @@ var useStyles = (0, _styles.makeStyles)(function () {
142
142
  },
143
143
  dropdownStyle: function dropdownStyle(props) {
144
144
  return {
145
+ backgroundColor: props.optionBackgroundColor,
145
146
  boxShadow: "0px 2px 10px 0px rgba(0, 0, 0, 0.3)",
146
147
  minWidth: props.width,
147
148
  width: props.width,
148
149
  maxHeight: "250px",
150
+ borderColor: props.optionBorderColor,
151
+ borderWidth: props.optionBorderThickness,
152
+ borderStyle: props.optionBorderStyle,
149
153
  "&::-webkit-scrollbar": {
150
154
  width: "3px",
151
155
  margin: "5px"
@@ -160,43 +164,34 @@ var useStyles = (0, _styles.makeStyles)(function () {
160
164
  },
161
165
  "& .MuiList-root": {
162
166
  width: "auto !important",
163
- paddingRight: "0 !important",
164
- backgroundColor: props.optionsBackgroundColor,
165
- borderColor: props.optionsBorderColor,
166
- borderWidth: props.optionsBorderThickness,
167
- borderStyle: props.optionsBorderStyle
167
+ paddingRight: "0 !important"
168
168
  }
169
169
  };
170
170
  },
171
171
  itemList: function itemList(props) {
172
172
  return {
173
- color: "".concat(props.optionsFontColor || props.color),
174
173
  "&.MuiList-padding": {
175
174
  paddingBottom: "0px",
176
175
  paddingTop: "0px"
177
176
  },
178
177
  "& li": {
179
- fontSize: props.optionsFontSize,
180
- fontStyle: props.optionsFontStyle,
181
- fontWeight: props.optionsFontWeight,
178
+ fontSize: props.optionFontSize,
179
+ fontStyle: props.optionFontStyle,
180
+ fontWeight: props.optionFontWeight,
182
181
  paddingBottom: props.optionPaddingBottom,
183
182
  paddingTop: props.optionPaddingTop,
184
- paddingLeft: props.optionPaddingLeft,
185
- paddingRight: props.optionPaddingRight,
186
183
  "&:hover": {
187
- backgroundColor: "".concat(props.backgroundType === "dark" ? props.hoveredOptionBackgroundColorOnDark : props.hoveredOptionBackgroundColor, " !important"),
188
- color: "".concat(props.optionsFontColor || props.color)
184
+ backgroundColor: "".concat(props.backgroundType === "dark" ? props.hoverOptionBackgroundColorOnDark : props.hoverOptionBackgroundColor, " !important"),
185
+ color: "".concat(props.optionFontColor)
189
186
  },
190
187
  "&:active": {
191
- backgroundColor: "".concat(props.backgroundType === "dark" ? props.selectedOptionBackgroundColorOnDark : props.selectedOptionBackgroundColor) + props.hoverOptionBackgroundColor,
192
- color: "".concat(props.optionsFontColor || props.color)
188
+ backgroundColor: "".concat(props.backgroundType === "dark" ? props.selectedOptionBackgroundColorOnDark : props.selectedOptionBackgroundColor) + "".concat(props.backgroundType === "dark" ? props.hoverOptionBackgroundColorOnDark : props.hoverOptionBackgroundColor)
193
189
  },
194
190
  "&:focus": {
195
191
  outline: "".concat(props.backgroundType === "dark" ? props.focusColorOnDark : props.focusColor, " auto 2px")
196
192
  },
197
193
  "&.MuiListItem-root.Mui-selected": {
198
- backgroundColor: "".concat(props.backgroundType === "dark" ? props.selectedOptionBackgroundColorOnDark : props.selectedOptionBackgroundColor, " !important"),
199
- color: "".concat(props.optionsFontColor || props.color)
194
+ backgroundColor: "".concat(props.backgroundType === "dark" ? props.selectedOptionBackgroundColorOnDark : props.selectedOptionBackgroundColor, " !important")
200
195
  },
201
196
  "&.MuiListItem-root.Mui-focusVisible": {
202
197
  backgroundColor: "unset"
@@ -338,6 +333,28 @@ var DxcSelect = function DxcSelect(_ref) {
338
333
  }
339
334
  };
340
335
 
336
+ var ThemedOption = function ThemedOption(_ref2) {
337
+ var option = _ref2.option;
338
+ var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
339
+ return _react["default"].createElement(_react["default"].Fragment, null, multiple && _react["default"].createElement(_Checkbox["default"], {
340
+ size: "fitContent",
341
+ checked: isChecked(selectedValue, value, option)
342
+ }), _react["default"].createElement(OptionContainer, {
343
+ iconPosition: iconPosition,
344
+ multiple: multiple
345
+ }, option.icon ? _react["default"].createElement(ListIconContainer, {
346
+ backgroundType: backgroundType,
347
+ label: option.label,
348
+ iconPosition: iconPosition
349
+ }, (0, _typeof2["default"])(option.icon) === "object" ? option.icon : _react["default"].createElement(option.icon)) : option.iconSrc && _react["default"].createElement(ListIcon, {
350
+ src: option.iconSrc,
351
+ label: option.label,
352
+ iconPosition: iconPosition
353
+ }), " ", _react["default"].createElement(LabelContainer, {
354
+ backgroundType: backgroundType
355
+ }, option.label)));
356
+ };
357
+
341
358
  return _react["default"].createElement(_styledComponents.ThemeProvider, {
342
359
  theme: colorsTheme.select
343
360
  }, _react["default"].createElement(SelectContainer, {
@@ -375,20 +392,11 @@ var DxcSelect = function DxcSelect(_ref) {
375
392
  value: option.value,
376
393
  disableRipple: true,
377
394
  key: option.value
378
- }, multiple && _react["default"].createElement(_Checkbox["default"], {
379
- size: "fitContent",
380
- checked: isChecked(selectedValue, value, option)
381
- }), _react["default"].createElement(OptionContainer, {
382
- iconPosition: iconPosition,
383
- multiple: multiple
384
- }, option.icon ? _react["default"].createElement(ListIconContainer, {
385
- label: option.label,
386
- iconPosition: iconPosition
387
- }, (0, _typeof2["default"])(option.icon) === "object" ? option.icon : _react["default"].createElement(option.icon)) : option.iconSrc && _react["default"].createElement(ListIcon, {
388
- src: option.iconSrc,
389
- label: option.label,
390
- iconPosition: iconPosition
391
- }), " ", _react["default"].createElement(LabelCont, null, option.label)));
395
+ }, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
396
+ color: colorsTheme.select.optionBackgroundColor
397
+ }, _react["default"].createElement(ThemedOption, {
398
+ option: option
399
+ })));
392
400
  })), assistiveText && _react["default"].createElement(_FormHelperText["default"], {
393
401
  disabled: disabled
394
402
  }, assistiveText))));
@@ -411,7 +419,9 @@ var calculateWidth = function calculateWidth(margin, size) {
411
419
 
412
420
  var MultipleLabelSelected = _styledComponents["default"].div(_templateObject());
413
421
 
414
- var LabelCont = _styledComponents["default"].span(_templateObject2());
422
+ var LabelContainer = _styledComponents["default"].span(_templateObject2(), function (props) {
423
+ return props.backgroundType === "dark" ? props.theme.optionFontColorOnDark : props.theme.optionFontColor;
424
+ });
415
425
 
416
426
  var SelectedIconContainer = _styledComponents["default"].div(_templateObject3(), function (props) {
417
427
  return props.iconPosition === "before" && "row" || "row-reverse";
@@ -440,7 +450,7 @@ var OptionContainer = _styledComponents["default"].div(_templateObject5(), funct
440
450
  }, function (props) {
441
451
  return props.iconPosition === "before" && "row" || "row-reverse";
442
452
  }, function (props) {
443
- return props.multiple && "margin-left: ".concat(props.theme.checkboxOptionSpacing, ";");
453
+ return props.multiple && "margin-left: ".concat(props.theme.optionCheckboxSpacing, ";");
444
454
  });
445
455
 
446
456
  var ListIcon = _styledComponents["default"].img(_templateObject6(), function (props) {
@@ -448,21 +458,21 @@ var ListIcon = _styledComponents["default"].img(_templateObject6(), function (pr
448
458
  }, function (props) {
449
459
  return props.theme.iconSize;
450
460
  }, function (props) {
451
- return props.iconPosition === "after" && props.label !== "" && props.theme.iconOptionSpacing || "0px";
461
+ return props.iconPosition === "after" && props.label !== "" && props.theme.optionIconSpacing || "0px";
452
462
  }, function (props) {
453
- return props.iconPosition === "before" && props.label !== "" && props.theme.iconOptionSpacing || "0px";
463
+ return props.iconPosition === "before" && props.label !== "" && props.theme.optionIconSpacing || "0px";
454
464
  });
455
465
 
456
466
  var ListIconContainer = _styledComponents["default"].div(_templateObject7(), function (props) {
457
- return props.theme.iconColor;
467
+ return props.backgroundType === "dark" ? props.theme.optionIconColorOnDark : props.theme.optionIconColor;
458
468
  }, function (props) {
459
- return props.theme.iconSize;
469
+ return props.theme.optionIconSize;
460
470
  }, function (props) {
461
- return props.theme.iconSize;
471
+ return props.theme.optionIconSize;
462
472
  }, function (props) {
463
- return props.iconPosition === "after" && props.label !== "" && props.theme.iconOptionSpacing || "0px";
473
+ return props.iconPosition === "after" && props.label !== "" && props.theme.optionIconSpacing || "0px";
464
474
  }, function (props) {
465
- return props.iconPosition === "before" && props.label !== "" && props.theme.iconOptionSpacing || "0px";
475
+ return props.iconPosition === "before" && props.label !== "" && props.theme.optionIconSpacing || "0px";
466
476
  }, function (props) {
467
477
  return props.disabled && "0.34";
468
478
  });
@@ -491,16 +501,16 @@ var SelectContainer = _styledComponents["default"].div(_templateObject8(), funct
491
501
  return props.backgroundType === "dark" ? props.invalid === true ? props.theme.errorColorOnDark : props.theme.assistiveTextFontColorOnDark : props.invalid === true ? props.theme.errorColor : props.theme.assistiveTextFontColor;
492
502
  }, function (props) {
493
503
  return props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor;
494
- }, function (props) {
495
- return props.theme.labelFontSize;
496
504
  }, function (props) {
497
505
  return props.theme.fontFamily;
506
+ }, function (props) {
507
+ return props.theme.labelFontSize;
498
508
  }, function (props) {
499
509
  return props.theme.labelFontStyle;
500
510
  }, function (props) {
501
511
  return props.theme.labelFontWeight;
502
512
  }, function (props) {
503
- return props.backgroundType === "dark" ? props.invalid === true ? props.theme.errorColorOnDark : props.theme.colorOnDark : props.invalid === true ? props.theme.errorColor : props.theme.color;
513
+ return props.backgroundType === "dark" ? props.invalid === true ? props.theme.errorColorOnDark : props.theme.labelFontColorOnDark : props.invalid === true ? props.theme.errorColor : props.theme.labelFontColor;
504
514
  }, function (props) {
505
515
  return props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor;
506
516
  }, function (props) {
@@ -510,27 +520,39 @@ var SelectContainer = _styledComponents["default"].div(_templateObject8(), funct
510
520
  }, function (props) {
511
521
  return props.theme.labelFontWeight;
512
522
  }, function (props) {
513
- return props.backgroundType === "dark" ? props.invalid === true ? props.theme.errorColorOnDark : props.theme.colorOnDark : props.invalid === true ? props.theme.errorColor : props.theme.color;
514
- }, function (props) {
515
- return props.backgroundType === "dark" ? props.theme.colorOnDark : props.theme.color;
523
+ return props.backgroundType === "dark" ? props.invalid === true ? props.theme.errorColorOnDark : props.theme.labelFontColorOnDark : props.invalid === true ? props.theme.errorColor : props.theme.labelFontColor;
516
524
  }, function (props) {
517
525
  return props.backgroundType === "dark" ? props.theme.focusColorOnDark : props.theme.focusColor;
518
526
  }, function (props) {
519
527
  return props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor;
520
528
  }, function (props) {
521
- return props.theme.disabled;
529
+ return props.theme.valueFontSize;
530
+ }, function (props) {
531
+ return props.theme.valueFontStyle;
532
+ }, function (props) {
533
+ return props.theme.valueFontWeight;
534
+ }, function (props) {
535
+ return props.backgroundType === "dark" ? props.theme.valueFontColorOnDark : props.theme.valueFontColor;
536
+ }, function (props) {
537
+ return props.backgroundType === "dark" ? props.theme.optionIconColorOnDark : props.theme.optionIconColor;
538
+ }, function (props) {
539
+ return props.theme.underlineThickness;
540
+ }, function (props) {
541
+ return props.backgroundType === "dark" ? props.invalid === true && props.theme.errorColorOnDark || props.disabled && props.theme.disabledColorOnDark || props.theme.underlineFocusColorOnDark : props.invalid === true && props.theme.errorColor || props.disabled && props.theme.disabledColor || props.theme.underlineFocusColor;
542
+ }, function (props) {
543
+ return props.theme.underlineThickness;
522
544
  }, function (props) {
523
- return props.disabled && "0px solid" || "2px solid";
545
+ return props.backgroundType === "dark" ? props.invalid === true && props.theme.errorColorOnDark || props.disabled && props.theme.disabledColorOnDark || props.theme.underlineColorOnDark : props.invalid === true && props.theme.errorColor || props.disabled && props.theme.disabledColor || props.theme.underlineColor;
524
546
  }, function (props) {
525
- return props.backgroundType === "dark" ? props.invalid === true && props.theme.errorColorOnDark || props.disabled && props.theme.disabledColorOnDark || props.theme.colorOnDark : props.invalid === true && props.theme.errorColor || props.disabled && props.theme.disabledColor || props.theme.color;
547
+ return props.theme.underlineThickness;
526
548
  }, function (props) {
527
- return props.backgroundType === "dark" ? props.invalid === true && props.theme.errorColorOnDark || props.disabled && props.theme.disabledColorOnDark || props.theme.colorOnDark : props.invalid === true && props.theme.errorColor || props.disabled && props.theme.disabledColor || props.theme.color;
549
+ return props.backgroundType === "dark" ? props.invalid === true ? props.theme.errorColorOnDark : props.theme.underlineFocusColorOnDark : props.invalid === true ? props.theme.errorColor : props.theme.underlineFocusColor;
528
550
  }, function (props) {
529
- return props.backgroundType === "dark" ? props.invalid === true ? props.theme.errorColorOnDark : props.theme.colorOnDark : props.invalid === true ? props.theme.errorColor : props.theme.color;
551
+ return props.theme.underlineThickness;
530
552
  }, function (props) {
531
- return props.backgroundType === "dark" ? props.invalid === true && props.theme.errorColorOnDark || props.disabled && props.theme.disabledColorOnDark || props.theme.colorOnDark : props.invalid === true && props.theme.errorColor || props.disabled && props.theme.disabledColor || props.theme.color;
553
+ return props.backgroundType === "dark" ? props.invalid === true && props.theme.errorColorOnDark || props.disabled && props.theme.disabledColorOnDark || props.theme.underlineColorOnDark : props.invalid === true && props.theme.errorColor || props.disabled && props.theme.disabledColor || props.theme.underlineColor;
532
554
  }, function (props) {
533
- return props.backgroundType === "dark" ? props.disabled && props.theme.disabledColorOnDark || props.theme.colorOnDark : props.disabled && props.theme.disabledColor || props.theme.color;
555
+ return props.backgroundType === "dark" ? props.disabled && props.theme.disabledColorOnDark || props.theme.arrowColorOnDark : props.disabled && props.theme.disabledColor || props.theme.arrowColor;
534
556
  });
535
557
 
536
558
  DxcSelect.propTypes = {
package/dist/sidenav/Sidenav.js CHANGED
@@ -23,6 +23,8 @@ var _variables = require("../common/variables.js");
23
23
 
24
24
  var _useTheme = _interopRequireDefault(require("../useTheme.js"));
25
25
 
26
+ var _BackgroundColorContext = require("../BackgroundColorContext.js");
27
+
26
28
  function _templateObject4() {
27
29
  var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n letter-spacing: ", ";\n text-transform: ", ";\n text-decoration: ", ";\n margin: ", ";\n cursor: pointer;\n"]);
28
30
 
@@ -54,7 +56,7 @@ function _templateObject2() {
54
56
  }
55
57
 
56
58
  function _templateObject() {
57
- var data = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n max-width: 300px;\n width: ", ";\n padding: ", ";\n \n overflow-y: auto;\n overflow-x: hidden;\n ::-webkit-scrollbar {\n width: 2px;\n }\n ::-webkit-scrollbar-track {\n background-color: ", ";\n border-radius: 3px;\n }\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 3px;\n }\n display: flex;\n flex-direction: column;\n"]);
59
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n max-width: 300px;\n width: ", ";\n padding: ", ";\n\n overflow-y: auto;\n overflow-x: hidden;\n ::-webkit-scrollbar {\n width: 2px;\n }\n ::-webkit-scrollbar-track {\n background-color: ", ";\n border-radius: 3px;\n }\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 3px;\n }\n display: flex;\n flex-direction: column;\n"]);
58
60
 
59
61
  _templateObject = function _templateObject() {
60
62
  return data;
@@ -71,7 +73,9 @@ var DxcSidenav = function DxcSidenav(_ref) {
71
73
  theme: colorsTheme.sidenav
72
74
  }, _react["default"].createElement(SideNavContainer, {
73
75
  padding: padding
74
- }, children));
76
+ }, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
77
+ color: colorsTheme.sidenav.backgroundColor
78
+ }, children)));
75
79
  };
76
80
 
77
81
  var Title = function Title(_ref2) {
@@ -96,16 +100,6 @@ var Link = function Link(_ref4) {
96
100
 
97
101
  var SideNavContainer = _styledComponents["default"].div(_templateObject(), function (props) {
98
102
  return props.theme.backgroundColor;
99
- }, function (props) {
100
- return props.theme.customContentFontFamily;
101
- }, function (props) {
102
- return props.theme.customContentFontSize;
103
- }, function (props) {
104
- return props.theme.customContentFontStyle;
105
- }, function (props) {
106
- return props.theme.customContentFontWeight;
107
- }, function (props) {
108
- return props.theme.customContentFontColor;
109
103
  }, function (props) {
110
104
  return props.padding ? "calc(300px - ".concat(_variables.spaces[props.padding], " - ").concat(_variables.spaces[props.padding], ")") : "300px";
111
105
  }, function (props) {
package/dist/spinner/Spinner.js CHANGED
@@ -15,7 +15,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
15
15
 
16
16
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
17
17
 
18
- var _react = _interopRequireDefault(require("react"));
18
+ var _react = _interopRequireWildcard(require("react"));
19
19
 
20
20
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
21
21
 
@@ -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 = _interopRequireDefault(require("../BackgroundColorContext.js"));
31
+
30
32
  function _templateObject4() {
31
33
  var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-weight: ", ";\n font-size: ", ";\n font-style: ", ";\n margin-top: ", ";\n display: ", ";\n color: ", ";\n text-align: ", ";\n letter-spacing: ", ";\n"]);
32
34
 
@@ -38,7 +40,7 @@ function _templateObject4() {
38
40
  }
39
41
 
40
42
  function _templateObject3() {
41
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-weight: ", ";\n font-size: ", ";\n font-style: ", ";\n margin-top: ", ";\n color: ", ";\n text-transform: ", ";\n text-align: ", ";\n letter-spacing: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"]);
43
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-weight: ", ";\n font-size: ", ";\n font-style: ", ";\n margin-top: ", ";\n color: ", ";\n text-align: ", ";\n letter-spacing: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"]);
42
44
 
43
45
  _templateObject3 = function _templateObject3() {
44
46
  return data;
@@ -77,19 +79,23 @@ var DxcSpinner = function DxcSpinner(_ref) {
77
79
  mode = _ref$mode === void 0 ? "large" : _ref$mode,
78
80
  margin = _ref.margin;
79
81
  var colorsTheme = (0, _useTheme["default"])();
82
+ var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
80
83
  return _react["default"].createElement(_styledComponents.ThemeProvider, {
81
84
  theme: colorsTheme.spinner
82
85
  }, _react["default"].createElement(BackgroundSpinner, {
83
86
  mode: mode
84
87
  }, _react["default"].createElement(DXCSpinner, {
88
+ backgroundType: backgroundType,
85
89
  margin: margin,
86
90
  showValue: showValue,
87
91
  label: label,
88
92
  mode: mode
89
93
  }, label && mode !== "small" && _react["default"].createElement(SpinnerLabel, {
94
+ backgroundType: backgroundType,
90
95
  showValue: showValue,
91
96
  mode: mode
92
97
  }, label), value && mode !== "small" && _react["default"].createElement(SpinnerProgress, {
98
+ backgroundType: backgroundType,
93
99
  mode: mode,
94
100
  showValue: showValue,
95
101
  label: label
@@ -137,11 +143,11 @@ var BackgroundSpinner = _styledComponents["default"].div(_templateObject(), func
137
143
  });
138
144
 
139
145
  var DXCSpinner = _styledComponents["default"].div(_templateObject2(), function (props) {
140
- return props.mode === "small" && "6px solid ".concat(props.theme.totalCircleColor) || "8.5px solid ".concat(props.theme.totalCircleColor);
146
+ return props.mode === "small" && "2px solid ".concat(props.theme.totalCircleColor) || "8.5px solid ".concat(props.theme.totalCircleColor);
141
147
  }, function (props) {
142
- return props.mode === "small" && "30px" || "120px";
148
+ return props.mode === "small" && "16px" || "120px";
143
149
  }, function (props) {
144
- return props.mode === "small" && "30px" || "120px";
150
+ return props.mode === "small" && "16px" || "120px";
145
151
  }, function (props) {
146
152
  return props.mode === "overlay" ? "100" : "";
147
153
  }, function (props) {
@@ -155,19 +161,19 @@ var DXCSpinner = _styledComponents["default"].div(_templateObject2(), function (
155
161
  }, function (props) {
156
162
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
157
163
  }, function (props) {
158
- return props.theme.trackCircleColor;
164
+ return props.backgroundType === "dark" ? props.theme.trackCircleColorOnDark : props.theme.trackCircleColor;
159
165
  }, function (props) {
160
- return props.mode === "small" && "44px !important" || "141px !important";
166
+ return props.mode === "small" && "22px !important" || "140px !important";
161
167
  }, function (props) {
162
- return props.mode === "small" && "44px !important" || "141px !important";
168
+ return props.mode === "small" && "22px !important" || "140px !important";
163
169
  }, function (props) {
164
- return props.label === "" && props.showValue === false && props.mode === "large" ? "-10px" : props.mode === "small" ? "-7px" : props.label !== "" && props.showValue === false ? "-80px" : props.label === "" && props.showValue === true && props.mode === "overlay" ? "-10.75px" : props.label === "" && props.showValue === true && props.mode !== "overlay" ? "-79.75px" : props.label !== "" && props.showValue === true && props.mode === "overlay" ? "-72.5px" : "-89.5px";
170
+ return props.label === "" && props.showValue === false && props.mode === "large" ? "-10px" : props.mode === "small" ? "-3px" : props.label !== "" && props.showValue === false ? "-81px" : props.label === "" && props.showValue === true && props.mode === "overlay" ? "-10.75px" : props.label === "" && props.showValue === true && props.mode !== "overlay" ? "-79.75px" : props.label !== "" && props.showValue === true && props.mode === "overlay" ? "-72.5px" : "-90.5px";
165
171
  }, function (props) {
166
- return props.mode === "small" && "-7px !important" || "-11px !important";
172
+ return props.mode === "small" && "-3px !important" || "-10px !important";
167
173
  }, function (props) {
168
- return props.mode === "small" && "6.2px" || "2.7px";
174
+ return props.mode === "small" && "5px" || "2.9px";
169
175
  }, function (props) {
170
- return props.mode === "small" && "18.2" || "20.2";
176
+ return props.mode === "small" && "18.5" || "20.2";
171
177
  });
172
178
 
173
179
  var SpinnerLabel = _styledComponents["default"].div(_templateObject3(), function (props) {
@@ -181,9 +187,7 @@ var SpinnerLabel = _styledComponents["default"].div(_templateObject3(), function
181
187
  }, function (props) {
182
188
  return props.showValue === false && "52px" || "45px";
183
189
  }, function (props) {
184
- return props.mode === "overlay" ? props.theme.overlayLabelFontColor : props.theme.labelFontColor;
185
- }, function (props) {
186
- return props.mode === "overlay" ? props.theme.overlayLabelFontTextTransform : props.theme.labelFontTextTransform;
190
+ return props.mode === "overlay" ? props.theme.overlayLabelFontColor : props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
187
191
  }, function (props) {
188
192
  return props.mode === "overlay" ? props.theme.overlayLabelTextAlign : props.theme.labelTextAlign;
189
193
  }, function (props) {
@@ -203,7 +207,7 @@ var SpinnerProgress = _styledComponents["default"].div(_templateObject4(), funct
203
207
  }, function (props) {
204
208
  return props.value !== "" && props.showValue === true && "block" || "none";
205
209
  }, function (props) {
206
- return props.mode === "overlay" ? props.theme.overlayProgressValueFontColor : props.theme.progressValueFontColor;
210
+ return props.mode === "overlay" ? props.theme.overlayProgressValueFontColor : props.backgroundType === "dark" ? props.theme.progressValueFontColorOnDark : props.theme.progressValueFontColor;
207
211
  }, function (props) {
208
212
  return props.mode === "overlay" ? props.theme.overlayProgressValueTextAlign : props.theme.progressValueTextAlign;
209
213
  }, function (props) {
package/dist/table/Table.js CHANGED
@@ -23,6 +23,8 @@ var _utils = require("../common/utils.js");
23
23
 
24
24
  var _useTheme = _interopRequireDefault(require("../useTheme.js"));
25
25
 
26
+ var _BackgroundColorContext = require("../BackgroundColorContext.js");
27
+
26
28
  function _templateObject2() {
27
29
  var data = (0, _taggedTemplateLiteral2["default"])(["\n border-collapse: collapse;\n width: 100%;\n\n & tr {\n border-bottom: ", ";\n }\n & td {\n background-color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n text-transform: ", ";\n text-align: ", ";\n line-height: ", ";\n padding: ", ";\n }\n & th {\n background-color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n text-transform: ", ";\n text-align: ", ";\n line-height: ", ";\n padding: ", ";\n }\n & th:first-child {\n border-top-left-radius: ", ";\n }\n & th:last-child {\n border-top-right-radius: ", ";\n }\n"]);
28
30
 
@@ -51,7 +53,9 @@ var DxcTable = function DxcTable(_ref) {
51
53
  theme: colorsTheme.table
52
54
  }, _react["default"].createElement(DxcTableContainer, {
53
55
  margin: margin
54
- }, _react["default"].createElement(DxcTableContent, null, children)));
56
+ }, _react["default"].createElement(DxcTableContent, null, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
57
+ color: colorsTheme.table.dataBackgroundColor
58
+ }, children))));
55
59
  };
56
60
 
57
61
  var calculateWidth = function calculateWidth(margin) {
package/dist/tag/Tag.js CHANGED
@@ -30,7 +30,7 @@ var _useTheme = _interopRequireDefault(require("../useTheme.js"));
30
30
  var _Box = _interopRequireDefault(require("../box/Box"));
31
31
 
32
32
  function _templateObject8() {
33
- var data = (0, _taggedTemplateLiteral2["default"])(["\n padding: 0px 30px;\n text-transform: ", ";\n letter-spacing: 0.025em;\n flex-grow: 1;\n text-align: center;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n"]);
33
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n text-transform: ", ";\n color: ", ";\n padding: 0px 30px;\n letter-spacing: 0.025em;\n flex-grow: 1;\n text-align: center;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n"]);
34
34
 
35
35
  _templateObject8 = function _templateObject8() {
36
36
  return data;
@@ -100,7 +100,7 @@ function _templateObject2() {
100
100
  }
101
101
 
102
102
  function _templateObject() {
103
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-style: ", ";\n display: inline-flex;\n cursor: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"]);
103
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n cursor: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"]);
104
104
 
105
105
  _templateObject = function _templateObject() {
106
106
  return data;
@@ -185,9 +185,7 @@ var calculateWidth = function calculateWidth(size) {
185
185
  return sizes[size];
186
186
  };
187
187
 
188
- var StyledDxcTag = _styledComponents["default"].div(_templateObject(), function (props) {
189
- return props.theme.fontStyle;
190
- }, function (_ref2) {
188
+ var StyledDxcTag = _styledComponents["default"].div(_templateObject(), function (_ref2) {
191
189
  var hasAction = _ref2.hasAction;
192
190
  return hasAction && "pointer" || "unset";
193
191
  }, function (_ref3) {
@@ -244,7 +242,17 @@ var IconContainer = _styledComponents["default"].div(_templateObject7(), functio
244
242
  });
245
243
 
246
244
  var TagLabel = _styledComponents["default"].div(_templateObject8(), function (props) {
245
+ return props.theme.fontFamily;
246
+ }, function (props) {
247
+ return props.theme.fontSize;
248
+ }, function (props) {
249
+ return props.theme.fontStyle;
250
+ }, function (props) {
251
+ return props.theme.fontWeight;
252
+ }, function (props) {
247
253
  return props.theme.fontTextTransform;
254
+ }, function (props) {
255
+ return props.theme.fontColor;
248
256
  });
249
257
 
250
258
  DxcTag.propTypes = {
package/dist/textarea/Textarea.js CHANGED
@@ -36,7 +36,7 @@ var _RequiredComponent = _interopRequireDefault(require("../common/RequiredCompo
36
36
  var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
37
37
 
38
38
  function _templateObject() {
39
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n display: inline-block;\n position: relative;\n height: auto;\n width: ", ";\n\n .MuiTextField-root {\n width: 100%;\n\n .MuiFormHelperText-root {\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n margin-top: 6px;\n }\n .MuiFormLabel-root {\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n color: ", ";\n padding-left: \"inherit\";\n\n &.Mui-disabled {\n color: ", " !important;\n cursor: not-allowed;\n }\n\n &.Mui-focused {\n color: ", ";\n &.MuiInputLabel-shrink {\n transform: \"translate(0, 1.5px) scale(0.75);\";\n }\n }\n\n &.MuiInputLabel-shrink {\n font-family: ", ";\n transform: \"translate(0, 1.5px) scale(0.75)\";\n }\n\n &.Mui-error {\n color: ", ";\n }\n\n &:not(.MuiInputLabel-shrink) {\n font-family: ", ";\n color: ", ";\n & + div,\n & + div + p {\n color: ", ";\n }\n }\n\n &.MuiInputLabel-shrink {\n & + div::before {\n border-color: ", ";\n }\n & + div + p {\n color: ", ";\n }\n }\n }\n .MuiInputBase-root.MuiInput-root.MuiInput-underline {\n &::before {\n border-bottom: ", ";\n }\n &:not(.Mui-error)::before,\n &:not(&.Mui-focused)::before {\n border-bottom: ", ";\n }\n &::after {\n border-bottom: ", ";\n }\n\n .MuiInputBase-inputMultiline {\n overflow: auto !important;\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\n &.Mui-error {\n &::before {\n border-width: 1px;\n border-color: ", ";\n }\n &::after {\n transform: scaleX(0);\n }\n }\n\n &.Mui-focused {\n &::after {\n border-width: 2px;\n border-color: ", ";\n transform: scaleX(1);\n }\n &.Mui-error::after {\n border-color: ", ";\n }\n }\n\n &.Mui-disabled {\n cursor: not-allowed;\n\n &::before {\n border-bottom: ", ";\n border-bottom-style: solid;\n }\n }\n\n .MuiInputBase-input {\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n color: ", ";\n line-height: ", ";\n padding-left: \"inherit\";\n text-overflow: ellipsis;\n\n &.Mui-disabled {\n cursor: not-allowed;\n color: ", ";\n }\n }\n\n &:hover:not(.Mui-disabled):before &:hover:not(.Mui-error):before {\n border-bottom: ", ";\n }\n }\n\n & > p {\n &.Mui-error {\n color: ", ";\n }\n &.Mui-disabled {\n color: ", " !important;\n cursor: not-allowed;\n }\n }\n }\n"]);
39
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n display: inline-block;\n position: relative;\n height: auto;\n width: ", ";\n\n .MuiTextField-root {\n width: 100%;\n\n .MuiFormHelperText-root {\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n margin-top: 6px;\n }\n .MuiFormLabel-root {\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n color: ", ";\n padding-left: \"inherit\";\n\n &.Mui-disabled {\n color: ", " !important;\n cursor: not-allowed;\n }\n\n &.Mui-focused {\n color: ", ";\n &.MuiInputLabel-shrink {\n transform: \"translate(0, 1.5px) scale(0.75);\";\n }\n }\n\n &.MuiInputLabel-shrink {\n font-family: ", ";\n transform: \"translate(0, 1.5px) scale(0.75)\";\n }\n\n &.Mui-error {\n color: ", ";\n }\n\n &:not(.MuiInputLabel-shrink) {\n font-family: ", ";\n color: ", ";\n & + div,\n & + div + p {\n color: ", ";\n }\n }\n\n &.MuiInputLabel-shrink {\n & + div::before {\n border-color: ", ";\n }\n & + div + p {\n color: ", ";\n }\n }\n }\n .MuiInputBase-root.MuiInput-root.MuiInput-underline {\n &::before {\n border-bottom: ", ";\n }\n\n &:not(.Mui-error)::before,\n &:not(&.Mui-focused)::before {\n border-bottom: ", ";\n }\n\n &::after {\n border-bottom: ", ";\n }\n\n .MuiInputBase-inputMultiline {\n overflow: auto !important;\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\n &.Mui-error {\n &::before {\n border-width: ", ";\n border-color: ", ";\n }\n &::after {\n transform: scaleX(0);\n }\n }\n\n &.Mui-focused {\n &::after {\n border-width: calc(", " + 1px);\n border-color: ", ";\n }\n &.Mui-error::after {\n border-color: ", ";\n }\n }\n\n &.Mui-disabled {\n cursor: not-allowed;\n\n &::before {\n border-bottom: ", ";\n border-bottom-style: solid;\n }\n }\n\n .MuiInputBase-input {\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n color: ", ";\n line-height: ", ";\n padding-left: \"inherit\";\n text-overflow: ellipsis;\n\n &.Mui-disabled {\n cursor: not-allowed;\n color: ", ";\n }\n }\n\n &:hover:not(.Mui-disabled):before &:hover:not(.Mui-error):before {\n border-bottom-color: ", ";\n }\n }\n\n & > p {\n &.Mui-error {\n color: ", ";\n }\n &.Mui-disabled {\n color: ", " !important;\n cursor: not-allowed;\n }\n }\n }\n"]);
40
40
 
41
41
  _templateObject = function _templateObject() {
42
42
  return data;
@@ -156,7 +156,7 @@ var TextContainer = _styledComponents["default"].div(_templateObject(), function
156
156
  }, function (props) {
157
157
  return calculateWidth(props.margin, props.size);
158
158
  }, function (props) {
159
- return props.theme.assistiveTextFontFamily;
159
+ return props.theme.fontFamily;
160
160
  }, function (props) {
161
161
  return props.theme.assistiveTextFontSize;
162
162
  }, function (props) {
@@ -176,63 +176,67 @@ var TextContainer = _styledComponents["default"].div(_templateObject(), function
176
176
  }, function (props) {
177
177
  return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
178
178
  }, function (props) {
179
- return props.backgroundType === "dark" ? props.theme.disabledFontColorOnDark : props.theme.disabledFontColor;
179
+ return props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor;
180
180
  }, function (props) {
181
181
  return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
182
182
  }, function (props) {
183
- return props.theme.labelFontFamily;
183
+ return props.theme.fontFamily;
184
184
  }, function (props) {
185
185
  return props.backgroundType === "dark" ? props.theme.errorColorOnDark : props.theme.errorColor;
186
186
  }, function (props) {
187
- return props.theme.labelFontFamily;
187
+ return props.theme.fontFamily;
188
188
  }, function (props) {
189
189
  return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
190
190
  }, function (props) {
191
191
  return props.backgroundType === "dark" ? props.theme.assistiveTextFontColorOnDark : props.theme.assistiveTextFontColor;
192
192
  }, function (props) {
193
- return props.backgroundType ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
193
+ return props.backgroundType ? props.theme.underlineColorOnDark : props.theme.underlineColor;
194
194
  }, function (props) {
195
- return props.backgroundType === "dark" ? props.theme.assistiveTextFontColorOnDark : props.theme.assistiveTextFontColor;
195
+ return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
196
196
  }, function (props) {
197
- return "1px solid ".concat(props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor);
197
+ return "".concat(props.theme.underlineThickness, " solid ").concat(props.backgroundType === "dark" ? props.theme.underlineColorOnDark : props.theme.underlineColor);
198
198
  }, function (props) {
199
- return "1px solid ".concat(props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor);
199
+ return "".concat(props.theme.underlineThickness, " solid ").concat(props.backgroundType === "dark" ? props.theme.underlineColorOnDark : props.theme.underlineColor);
200
200
  }, function (props) {
201
- return "2px solid ".concat(props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor);
201
+ return "calc(".concat(props.theme.underlineThickness, " + 1px) solid ").concat(props.backgroundType === "dark" ? props.theme.underlineFocusColorOnDark : props.theme.underlineFocusColor);
202
202
  }, function (props) {
203
203
  return props.backgroundType === "dark" ? props.theme.scrollBarTrackColorOnDark : props.theme.scrollBarTrackColor;
204
204
  }, function (props) {
205
205
  return props.backgroundType === "dark" ? props.theme.scrollBarThumbColorOnDark : props.theme.scrollBarThumbColor;
206
+ }, function (props) {
207
+ return props.theme.underlineThickness;
206
208
  }, function (props) {
207
209
  return props.backgroundType === "dark" ? props.theme.errorColorOnDark : props.theme.errorColor;
208
210
  }, function (props) {
209
- return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
211
+ return props.theme.underlineThickness;
212
+ }, function (props) {
213
+ return props.backgroundType === "dark" ? props.theme.underlineFocusColorOnDark : props.theme.underlineFocusColor;
210
214
  }, function (props) {
211
215
  return props.backgroundType === "dark" ? props.theme.errorColorOnDark : props.theme.errorColor;
212
216
  }, function (props) {
213
- return "1px solid ".concat(props.backgroundType === "dark" ? props.theme.disabledFontColorOnDark : props.theme.disabledFontColor, " !important");
217
+ return "".concat(props.theme.underlineThickness, " solid ").concat(props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor, " !important");
214
218
  }, function (props) {
215
- return props.theme.customContentFontFamily;
219
+ return props.theme.fontFamily;
216
220
  }, function (props) {
217
- return props.theme.customContentFontSize;
221
+ return props.theme.valueFontSize;
218
222
  }, function (props) {
219
- return props.theme.customContentFontStyle;
223
+ return props.theme.valueFontStyle;
220
224
  }, function (props) {
221
- return props.theme.customContentFontWeight;
225
+ return props.theme.valueFontWeight;
222
226
  }, function (props) {
223
- return props.theme.customContentLetterSpacing;
227
+ return props.theme.valueLetterSpacing;
224
228
  }, function (props) {
225
- return props.backgroundType === "dark" ? props.theme.customContentFontColorOnDark : props.theme.customContentFontColor;
229
+ return props.backgroundType === "dark" ? props.theme.valueFontColorOnDark : props.theme.valueFontColor;
226
230
  }, function (props) {
227
- return props.theme.customContentLineHeight;
231
+ return props.theme.valueLineHeight;
228
232
  }, function (props) {
229
- return props.backgroundType === "dark" ? props.theme.disabledFontColorOnDark : props.theme.disabledFontColor;
233
+ return props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor;
230
234
  }, function (props) {
231
- return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
235
+ return props.backgroundType === "dark" ? props.theme.underlineFocusColorOnDark : props.theme.underlineFocusColor;
232
236
  }, function (props) {
233
237
  return "".concat(props.backgroundType === "dark" ? props.theme.errorColorOnDark : props.theme.errorColor, " !important");
234
238
  }, function (props) {
235
- return props.backgroundType === "dark" ? props.theme.disabledFontColorOnDark : props.theme.disabledFontColor;
239
+ return props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor;
236
240
  });
237
241
 
238
242
  DxcTextarea.propTypes = {