@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/input-text/InputText.js CHANGED
@@ -43,10 +43,10 @@ var _useTheme = _interopRequireDefault(require("../useTheme.js"));
43
43
 
44
44
  var _error = _interopRequireDefault(require("./error.svg"));
45
45
 
46
- var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
46
+ var _BackgroundColorContext = _interopRequireWildcard(require("../BackgroundColorContext.js"));
47
47
 
48
48
  function _templateObject10() {
49
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-size: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n\n display: inline-block;\n position: relative;\n\n height: auto;\n width: ", ";\n .MuiTextField-root {\n width: 100%;\n font-family: ", ";\n\n .MuiFormHelperText-root {\n font-weight: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n color: ", " !important;\n margin-top: 6px;\n }\n .MuiFormLabel-root {\n font-size: ", ";\n color: ", ";\n &.Mui-disabled {\n color: ", " !important;\n cursor: not-allowed;\n }\n padding-left: ", ";\n\n &.Mui-focused {\n color: ", ";\n &.MuiInputLabel-shrink {\n transform: ", ";\n }\n }\n\n &.MuiInputLabel-shrink {\n font-family: ", ";\n\n transform: ", ";\n }\n\n &.Mui-error {\n color: ", ";\n }\n\n &:not(.MuiInputLabel-shrink) {\n font-family: ", ";\n\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\n .MuiInputBase-root.MuiInput-root.MuiInput-underline {\n font-family: ", ";\n\n &::before {\n border-bottom: ", ";\n }\n\n &:not(.Mui-error)::before,\n &:not(&.Mui-focused)::before {\n border-bottom: ", ";\n }\n &::after {\n border-bottom: ", ";\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: 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 .MuiInputBase-input {\n padding-left: ", ";\n color: ", ";\n text-overflow: ellipsis;\n &.Mui-disabled {\n color: ", " !important;\n cursor: not-allowed;\n }\n }\n .MuiInputAdornment-root {\n height: 20px;\n color: ", ";\n &.MuiInputAdornment-positionEnd {\n & > p {\n font-family: ", ";\n\n color: ", ";\n margin-right: 8px;\n margin-bottom: 1px;\n }\n }\n &.Mui-disabled {\n cursor: not-allowed;\n opacity: 0.5;\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: ", " !important;\n }\n &.Mui-disabled {\n color: ", " !important;\n cursor: not-allowed;\n }\n }\n }\n"]);
49
+ 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 font-family: ", ";\n\n .MuiFormHelperText-root {\n font-weight: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n color: ", " !important;\n margin-top: 6px;\n }\n\n .MuiFormLabel-root {\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n padding-left: ", ";\n\n &.Mui-disabled {\n color: ", " !important;\n cursor: not-allowed;\n }\n\n &.Mui-focused {\n color: ", ";\n &.MuiInputLabel-shrink {\n transform: ", ";\n }\n }\n\n &.MuiInputLabel-shrink {\n font-family: ", ";\n\n transform: ", ";\n }\n\n &.Mui-error {\n color: ", ";\n }\n\n &:not(.MuiInputLabel-shrink) {\n font-family: ", ";\n color: ", ";\n\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\n .MuiInputBase-root.MuiInput-root.MuiInput-underline {\n font-family: ", ";\n\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 &.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-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n padding-left: ", ";\n text-overflow: ellipsis;\n\n &.Mui-disabled {\n color: ", " !important;\n cursor: not-allowed;\n }\n }\n\n .MuiInputAdornment-root {\n height: 20px;\n\n &.MuiInputAdornment-positionEnd {\n & > p {\n font-family: ", ";\n margin-right: 8px;\n margin-bottom: 1px;\n }\n }\n &.Mui-disabled {\n cursor: not-allowed;\n opacity: 0.5;\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: ", " !important;\n }\n &.Mui-disabled {\n color: ", " !important;\n cursor: not-allowed;\n }\n }\n }\n"]);
50
50
 
51
51
  _templateObject10 = function _templateObject10() {
52
52
  return data;
@@ -116,7 +116,7 @@ function _templateObject4() {
116
116
  }
117
117
 
118
118
  function _templateObject3() {
119
- var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n .MuiPaper-root {\n max-height: 250px;\n overflow: auto;\n ::-webkit-scrollbar {\n width: 3px;\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 li {\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n }\n }\n }\n"]);
119
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n .MuiPaper-root {\n max-height: 250px;\n background-color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n color: ", ";\n border-color: ", ";\n border-width: ", ";\n border-style: ", ";\n overflow: auto;\n\n ::-webkit-scrollbar {\n width: 3px;\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\n li {\n padding-bottom: ", ";\n padding-top: ", ";\n\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n }\n }\n }\n"]);
120
120
 
121
121
  _templateObject3 = function _templateObject3() {
122
122
  return data;
@@ -333,6 +333,28 @@ var DxcInputText = function DxcInputText(_ref) {
333
333
  }
334
334
  };
335
335
 
336
+ var ThemedSuggestions = function ThemedSuggestions() {
337
+ var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
338
+ return _react["default"].createElement(SuggestionsContainer, {
339
+ margin: margin,
340
+ size: size,
341
+ backgroundType: backgroundType
342
+ }, _react["default"].createElement(_Paper["default"], null, isOpen && !isSearching && !isError && filteredOptions.length === 0 && _react["default"].createElement(_MenuItem["default"], null, "No matches found."), isOpen && !isSearching && filteredOptions.length > 0 && filteredOptions.map(function (suggestion) {
343
+ return _react["default"].createElement(_MenuItem["default"], {
344
+ key: suggestion,
345
+ disableRipple: true,
346
+ onMouseDown: function onMouseDown(event) {
347
+ return event.preventDefault();
348
+ },
349
+ onClick: function onClick() {
350
+ return handlerSuggestionClicked(suggestion);
351
+ }
352
+ }, suggestion);
353
+ }), isSearching && _react["default"].createElement(_MenuItem["default"], null, "Searching..."), isError && _react["default"].createElement(_MenuItem["default"], null, "Error fetching data", _react["default"].createElement(ErrorIcon, {
354
+ src: _error["default"]
355
+ }))));
356
+ };
357
+
336
358
  return _react["default"].createElement(_styledComponents.ThemeProvider, {
337
359
  theme: colorsTheme.inputText
338
360
  }, _react["default"].createElement(TextContainer, {
@@ -422,23 +444,9 @@ var DxcInputText = function DxcInputText(_ref) {
422
444
  marginTop: "0px"
423
445
  }
424
446
  }
425
- }, _react["default"].createElement(SuggestionsContainer, {
426
- margin: margin,
427
- size: size
428
- }, _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_Paper["default"], null, isOpen && !isSearching && !isError && filteredOptions.length === 0 && _react["default"].createElement(_MenuItem["default"], null, "No matches found."), isOpen && !isSearching && filteredOptions.length > 0 && filteredOptions.map(function (suggestion) {
429
- return _react["default"].createElement(_MenuItem["default"], {
430
- key: suggestion,
431
- disableRipple: true,
432
- onMouseDown: function onMouseDown(event) {
433
- return event.preventDefault();
434
- },
435
- onClick: function onClick() {
436
- return handlerSuggestionClicked(suggestion);
437
- }
438
- }, suggestion);
439
- }), isSearching && _react["default"].createElement(_MenuItem["default"], null, "Searching..."), isError && _react["default"].createElement(_MenuItem["default"], null, "Error fetching data", _react["default"].createElement(ErrorIcon, {
440
- src: _error["default"]
441
- })))))));
447
+ }, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
448
+ color: colorsTheme.inputText.optionBackgroundColor
449
+ }, _react["default"].createElement(ThemedSuggestions, null))));
442
450
  };
443
451
 
444
452
  var sizes = {
@@ -474,16 +482,38 @@ var DxcSuggestions = (0, _styledComponents["default"])(_Popper["default"])(_temp
474
482
 
475
483
  var SuggestionsContainer = _styledComponents["default"].div(_templateObject3(), function (props) {
476
484
  return calculateWidth(props.margin, props.size);
485
+ }, function (props) {
486
+ return props.theme.optionBackgroundColor;
487
+ }, function (props) {
488
+ return props.theme.fontFamily;
489
+ }, function (props) {
490
+ return props.theme.optionFontSize;
491
+ }, function (props) {
492
+ return props.theme.optionFontStyle;
493
+ }, function (props) {
494
+ return props.theme.optionFontWeight;
495
+ }, function (props) {
496
+ return props.backgroundType === "dark" ? props.theme.optionFontColorOnDark : props.theme.optionFontColor;
497
+ }, function (props) {
498
+ return props.theme.optionBorderColor;
499
+ }, function (props) {
500
+ return props.theme.optionBorderThickness;
501
+ }, function (props) {
502
+ return props.theme.optionBorderStyle;
477
503
  }, function (props) {
478
504
  return props.theme.scrollBarTrackColor;
479
505
  }, function (props) {
480
506
  return props.theme.scrollBarThumbColor;
507
+ }, function (props) {
508
+ return props.theme.optionPaddingBottom;
509
+ }, function (props) {
510
+ return props.theme.optionPaddingTop;
481
511
  }, function (props) {
482
512
  return props.theme.hoverOptionColor;
483
513
  }, function (props) {
484
- return props.theme.hoverOptionBackgroundColor;
514
+ return props.backgroundType === "dark" ? props.theme.hoverOptionBackgroundColorOnDark : props.theme.hoverOptionBackgroundColor;
485
515
  }, function (props) {
486
- return props.theme.selectedOptionBackgroundColor;
516
+ return props.backgroundType === "dark" ? props.theme.selectedOptionBackgroundColorOnDark : props.theme.selectedOptionBackgroundColor;
487
517
  });
488
518
 
489
519
  var PrefixIcon = _styledComponents["default"].img(_templateObject4(), function (props) {
@@ -493,7 +523,7 @@ var PrefixIcon = _styledComponents["default"].img(_templateObject4(), function (
493
523
  });
494
524
 
495
525
  var PrefixIconContainer = _styledComponents["default"].div(_templateObject5(), function (props) {
496
- return props.backgroundType === "dark" ? props.theme.prefixIconColorOnDark || props.theme.fontColorBaseOnDark : props.theme.prefixIconColor || props.theme.fontColorBase;
526
+ return props.backgroundType === "dark" ? props.theme.prefixIconColorOnDark : props.theme.prefixIconColor;
497
527
  }, function (props) {
498
528
  return props.disabled && 0.5 || 1;
499
529
  }, function (props) {
@@ -503,13 +533,13 @@ var PrefixIconContainer = _styledComponents["default"].div(_templateObject5(), f
503
533
  var PrefixLabel = _styledComponents["default"].span(_templateObject6(), function (props) {
504
534
  return props.theme.prefixLabelFontWeight;
505
535
  }, function (props) {
506
- return props.theme.fontFamilyBase;
536
+ return props.theme.fontFamily;
507
537
  }, function (props) {
508
538
  return props.theme.prefixLabelFontSize;
509
539
  }, function (props) {
510
540
  return props.theme.prefixLabelFontStyle;
511
541
  }, function (props) {
512
- return props.backgroundType === "dark" ? props.theme.prefixLabelFontColorOnDark || props.theme.fontColorBaseOnDark : props.theme.prefixLabelFontColor || props.theme.fontColorBase;
542
+ return props.backgroundType === "dark" ? props.theme.prefixLabelFontColorOnDark : props.theme.prefixLabelFontColor;
513
543
  }, function (props) {
514
544
  return props.disabled && 0.5 || 1;
515
545
  }, function (props) {
@@ -523,7 +553,7 @@ var SuffixIcon = _styledComponents["default"].img(_templateObject7(), function (
523
553
  });
524
554
 
525
555
  var SuffixIconContainer = _styledComponents["default"].div(_templateObject8(), function (props) {
526
- return props.backgroundType === "dark" ? props.theme.suffixIconColorOnDark || props.theme.fontColorBaseOnDark : props.theme.suffixIconColor || props.theme.fontColorBase;
556
+ return props.backgroundType === "dark" ? props.theme.suffixIconColorOnDark : props.theme.suffixIconColor;
527
557
  }, function (props) {
528
558
  return props.disabled && 0.5 || 1;
529
559
  }, function (props) {
@@ -535,18 +565,16 @@ var SuffixLabel = _styledComponents["default"].span(_templateObject9(), function
535
565
  }, function (props) {
536
566
  return props.theme.suffixLabelFontWeight;
537
567
  }, function (props) {
538
- return props.theme.fontFamilyBase;
568
+ return props.theme.fontFamily;
539
569
  }, function (props) {
540
570
  return props.theme.suffixLabelFontSize;
541
571
  }, function (props) {
542
572
  return props.theme.suffixLabelFontStyle;
543
573
  }, function (props) {
544
- return props.backgroundType === "dark" ? props.theme.suffixLabelFontColorOnDark || props.theme.fontColorBaseOnDark : props.theme.suffixLabelFontColor || props.theme.fontColorBase;
574
+ return props.backgroundType === "dark" ? props.theme.suffixLabelFontColorOnDark : props.theme.suffixLabelFontColor;
545
575
  });
546
576
 
547
577
  var TextContainer = _styledComponents["default"].div(_templateObject10(), function (props) {
548
- return props.theme.fontSizeBase;
549
- }, function (props) {
550
578
  return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
551
579
  }, function (props) {
552
580
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
@@ -559,88 +587,95 @@ var TextContainer = _styledComponents["default"].div(_templateObject10(), functi
559
587
  }, function (props) {
560
588
  return calculateWidth(props.margin, props.size);
561
589
  }, function (props) {
562
- return props.theme.fontFamilyBase;
590
+ return props.theme.fontFamily;
563
591
  }, function (props) {
564
592
  return props.theme.assistiveTextFontWeight;
565
593
  }, function (props) {
566
- return props.theme.fontFamilyBase;
594
+ return props.theme.fontFamily;
567
595
  }, function (props) {
568
596
  return props.theme.assistiveTextFontSize;
569
597
  }, function (props) {
570
598
  return props.theme.assistiveTextFontStyle;
571
599
  }, function (props) {
572
- return props.backgroundType === "dark" ? props.theme.assistiveTextFontColorOnDark || props.theme.fontColorBaseOnDark : props.theme.assistiveTextFontColor || props.theme.fontColorBase;
600
+ return props.backgroundType === "dark" ? props.theme.assistiveTextFontColorOnDark : props.theme.assistiveTextFontColor;
573
601
  }, function (props) {
574
602
  return props.theme.labelFontSize;
575
603
  }, function (props) {
576
- return props.backgroundType === "dark" ? props.theme.fontColorBaseOnDark : props.theme.fontColorBase;
604
+ return props.theme.labelFontStyle;
605
+ }, function (props) {
606
+ return props.theme.labelFontWeight;
577
607
  }, function (props) {
578
- return props.backgroundType === "dark" ? props.theme.disabledFontColorOnDark : props.theme.disabledFontColor;
608
+ return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
579
609
  }, function (props) {
580
610
  return (props.prefixIconSrc || props.prefix || props.prefixIcon) && "32px" || "inherit";
581
611
  }, function (props) {
582
- return props.backgroundType === "dark" ? props.theme.fontColorBaseOnDark : props.theme.fontColorBase;
612
+ return props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor;
613
+ }, function (props) {
614
+ return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
583
615
  }, function (props) {
584
616
  return props.prefixIconSrc || props.prefixIcon || (props.prefix || props.suffix) && "translate(8px, 1.5px) scale(0.75);" || "translate(0, 1.5px) scale(0.75);";
585
617
  }, function (props) {
586
- return props.theme.fontFamilyBase;
618
+ return props.theme.fontFamily;
587
619
  }, function (props) {
588
620
  return props.prefixIcon && "translate(8px, 1.5px) scale(0.75);" || props.prefixIconSrc && "translate(8px, 1.5px) scale(0.75);" || props.prefix && "translate(8px, 1.5px) scale(0.75);" || "translate(0, 1.5px) scale(0.75);";
589
621
  }, function (props) {
590
622
  return props.backgroundType === "dark" ? props.theme.errorColorOnDark : props.theme.errorColor;
591
623
  }, function (props) {
592
- return props.theme.fontFamilyBase;
624
+ return props.theme.fontFamily;
593
625
  }, function (props) {
594
- return props.backgroundType === "dark" ? props.theme.fontColorBaseOnDark : props.theme.fontColorBase;
626
+ return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
595
627
  }, function (props) {
596
- return props.backgroundType === "dark" ? props.theme.fontColorBaseOnDark : props.theme.fontColorBase;
628
+ return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
597
629
  }, function (props) {
598
- return props.backgroundType === "dark" ? props.theme.underlineColorOnDark || props.theme.fontColorBaseOnDark : props.theme.underlineColor || props.theme.fontColorBase;
630
+ return props.backgroundType === "dark" ? props.theme.underlineColorOnDark : props.theme.underlineColor;
599
631
  }, function (props) {
600
- return props.backgroundType === "dark" ? props.theme.fontColorBaseOnDark : props.theme.fontColorBase;
632
+ return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
601
633
  }, function (props) {
602
- return props.theme.fontFamilyBase;
634
+ return props.theme.fontFamily;
603
635
  }, function (props) {
604
- return "".concat(props.theme.underlineThickness, " solid ").concat(props.backgroundType === "dark" ? props.theme.underlineColorOnDark || props.theme.fontColorBaseOnDark : props.theme.underlineColor || props.theme.fontColorBase);
636
+ return "".concat(props.theme.underlineThickness, " solid ").concat(props.backgroundType === "dark" ? props.theme.underlineColorOnDark : props.theme.underlineColor);
605
637
  }, function (props) {
606
- return "".concat(props.theme.underlineThickness, " solid ").concat(props.backgroundType === "dark" ? props.theme.underlineColorOnDark || props.theme.fontColorBaseOnDark : props.theme.underlineColor || props.theme.fontColorBase);
638
+ return "".concat(props.theme.underlineThickness, " solid ").concat(props.backgroundType === "dark" ? props.theme.underlineColorOnDark : props.theme.underlineColor);
607
639
  }, function (props) {
608
- return "2px solid ".concat(props.backgroundType === "dark" ? props.theme.underlineFocusColorOnDark || props.theme.fontColorBaseOnDark : props.theme.underlineFocusColor || props.theme.fontColorBase);
640
+ return "calc(".concat(props.theme.underlineThickness, " + 1px) solid ").concat(props.backgroundType === "dark" ? props.theme.underlineFocusColorOnDark : props.theme.underlineFocusColor);
609
641
  }, function (props) {
610
642
  return props.theme.underlineThickness;
611
643
  }, function (props) {
612
644
  return props.backgroundType === "dark" ? props.theme.errorColorOnDark : props.theme.errorColor;
613
645
  }, function (props) {
614
- return props.backgroundType === "dark" ? props.theme.underlineFocusColorOnDark || props.theme.fontColorBaseOnDark : props.theme.underlineFocusColor || props.theme.fontColorBase;
646
+ return props.theme.underlineThickness;
647
+ }, function (props) {
648
+ return props.backgroundType === "dark" ? props.theme.underlineFocusColorOnDark : props.theme.underlineFocusColor;
615
649
  }, function (props) {
616
650
  return props.backgroundType === "dark" ? props.theme.errorColorOnDark : props.theme.errorColor;
617
651
  }, function (props) {
618
- return "".concat(props.theme.underlineThickness, " solid ").concat(props.backgroundType === "dark" ? props.theme.disabledFontColorOnDark : props.theme.disabledFontColor, " !important");
652
+ return "".concat(props.theme.underlineThickness, " solid ").concat(props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor, " !important");
619
653
  }, function (props) {
620
- return (props.prefixIconSrc || props.prefix || props.prefixIcon) && "32px" || "inherit";
654
+ return props.theme.valueFontSize;
655
+ }, function (props) {
656
+ return props.theme.valueFontStyle;
621
657
  }, function (props) {
622
- return props.backgroundType === "dark" ? props.theme.fontColorBaseOnDark : props.theme.fontColorBase;
658
+ return props.theme.valueFontWeight;
623
659
  }, function (props) {
624
- return props.backgroundType === "dark" ? props.theme.disabledFontColorOnDark : props.theme.disabledFontColor;
660
+ return props.backgroundType === "dark" ? props.theme.valueFontColorOnDark : props.theme.valueFontColor;
625
661
  }, function (props) {
626
- return props.backgroundType === "dark" ? props.theme.fontColorBaseOnDark : props.theme.fontColorBase;
662
+ return (props.prefixIconSrc || props.prefix || props.prefixIcon) && "32px" || "inherit";
627
663
  }, function (props) {
628
- return props.theme.fontFamilyBase;
664
+ return props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor;
629
665
  }, function (props) {
630
- return props.backgroundType === "dark" ? props.theme.fontColorBaseOnDark : props.theme.fontColorBase;
666
+ return props.theme.fontFamily;
631
667
  }, function (props) {
632
- return props.backgroundType === "dark" ? props.theme.fontColorBaseOnDark : props.theme.fontColorBase;
668
+ return props.backgroundType === "dark" ? props.theme.underlineFocusColorOnDark : props.theme.underlineFocusColor;
633
669
  }, function (props) {
634
670
  return props.backgroundType === "dark" ? props.theme.errorColorOnDark : props.theme.errorColor;
635
671
  }, function (props) {
636
- return props.backgroundType === "dark" ? props.theme.disabledFontColorOnDark : props.theme.disabledFontColor;
672
+ return props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor;
637
673
  });
638
674
 
639
675
  DxcInputText.propTypes = {
640
676
  label: _propTypes["default"].string,
641
677
  name: _propTypes["default"].string,
642
678
  value: _propTypes["default"].string,
643
- theme: _propTypes["default"].oneOf(["light", "dark", ""]),
644
679
  assistiveText: _propTypes["default"].string,
645
680
  disabled: _propTypes["default"].bool,
646
681
  prefix: _propTypes["default"].string,
package/dist/link/Link.js CHANGED
@@ -206,7 +206,7 @@ var LinkIcon = _styledComponents["default"].img(_templateObject5(), function (pr
206
206
  }, function (props) {
207
207
  return props.iconPosition === "before" ? "margin-right" : "margin-left";
208
208
  }, function (props) {
209
- return props.theme.iconGutter;
209
+ return props.theme.iconSpacing;
210
210
  });
211
211
 
212
212
  var LinkIconContainer = _styledComponents["default"].div(_templateObject6(), function (props) {
@@ -216,7 +216,7 @@ var LinkIconContainer = _styledComponents["default"].div(_templateObject6(), fun
216
216
  }, function (props) {
217
217
  return props.iconPosition === "before" ? "margin-right" : "margin-left";
218
218
  }, function (props) {
219
- return props.theme.iconGutter;
219
+ return props.theme.iconSpacing;
220
220
  });
221
221
 
222
222
  DxcLink.propTypes = {
package/dist/paginator/Paginator.js CHANGED
@@ -33,6 +33,8 @@ var _next = _interopRequireDefault(require("./images/next.svg"));
33
33
 
34
34
  var _nextPage = _interopRequireDefault(require("./images/nextPage.svg"));
35
35
 
36
+ var _BackgroundColorContext = require("../BackgroundColorContext.js");
37
+
36
38
  function _templateObject8() {
37
39
  var data = (0, _taggedTemplateLiteral2["default"])([""]);
38
40
 
@@ -44,7 +46,7 @@ function _templateObject8() {
44
46
  }
45
47
 
46
48
  function _templateObject7() {
47
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n margin-right: ", ";\n margin-left: ", ";\n label {\n height: 0px;\n }\n\n label + .MuiInput-formControl {\n margin-top: 0px;\n }\n"]);
49
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n margin-right: ", ";\n margin-left: ", ";\n\n label {\n height: 0px;\n }\n label + .MuiInput-formControl {\n margin-top: 0px;\n }\n"]);
48
50
 
49
51
  _templateObject7 = function _templateObject7() {
50
52
  return data;
@@ -94,7 +96,7 @@ function _templateObject3() {
94
96
  }
95
97
 
96
98
  function _templateObject2() {
97
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n margin-right: ", ";\n margin-left: ", ";\n label {\n height: 0px;\n }\n\n label + .MuiInput-formControl {\n margin-top: 0px;\n }\n"]);
99
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n margin-right: ", ";\n margin-left: ", ";\n\n label {\n height: 0px;\n }\n label + .MuiInput-formControl {\n margin-top: 0px;\n }\n"]);
98
100
 
99
101
  _templateObject2 = function _templateObject2() {
100
102
  return data;
@@ -104,7 +106,7 @@ function _templateObject2() {
104
106
  }
105
107
 
106
108
  function _templateObject() {
107
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n height: ", ";\n width: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-style: ", ";\n background-color: ", ";\n color: ", ";\n button {\n &:disabled {\n background-color: transparent !important;\n opacity: 0.3 !important;\n }\n }\n"]);
109
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n height: ", ";\n width: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: ", ";\n font-style: ", ";\n text-transform: ", ";\n background-color: ", ";\n color: ", ";\n\n button {\n &:disabled {\n background-color: transparent !important;\n opacity: 0.3 !important;\n }\n }\n"]);
108
110
 
109
111
  _templateObject = function _templateObject() {
110
112
  return data;
@@ -133,6 +135,8 @@ var DxcPaginator = function DxcPaginator(_ref) {
133
135
  var colorsTheme = (0, _useTheme["default"])();
134
136
  return _react["default"].createElement(_styledComponents.ThemeProvider, {
135
137
  theme: colorsTheme.paginator
138
+ }, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
139
+ color: colorsTheme.paginator.backgroundColor
136
140
  }, _react["default"].createElement(DxcPaginatorContainer, {
137
141
  disabled: currentPageInternal === 1
138
142
  }, _react["default"].createElement(LabelsContainer, null, itemsPerPageOptions && _react["default"].createElement(ItemsPageContainer, null, _react["default"].createElement(ItemsLabel, null, "Items per page "), _react["default"].createElement(_Select["default"], {
@@ -209,7 +213,7 @@ var DxcPaginator = function DxcPaginator(_ref) {
209
213
  onClick: function onClick() {
210
214
  onPageChange(totalPages);
211
215
  }
212
- }))));
216
+ })))));
213
217
  };
214
218
 
215
219
  var DxcPaginatorContainer = _styledComponents["default"].div(_templateObject(), function (props) {
@@ -224,6 +228,8 @@ var DxcPaginatorContainer = _styledComponents["default"].div(_templateObject(),
224
228
  return props.theme.fontWeight;
225
229
  }, function (props) {
226
230
  return props.theme.fontStyle;
231
+ }, function (props) {
232
+ return props.theme.fontTextTransform;
227
233
  }, function (props) {
228
234
  return props.theme.backgroundColor;
229
235
  }, function (props) {