@widergy/energy-ui 2.6.1 → 2.7.1

package/dist/components/UTSwitch/theme.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.retrieveStyle = void 0;
 var _seamlessImmutable = require("seamless-immutable");
-var _colors = _interopRequireDefault(require("../../scss/variables/_colors.scss"));
+var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var retrieveStyle = function retrieveStyle(_ref) {
   var theme = _ref.theme;
@@ -29,16 +29,16 @@ var retrieveStyle = function retrieveStyle(_ref) {
       padding: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'container', 'padding']),
       margin: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'container', 'margin']),
       '&:hover > $sliderContainer > $sliderBack': {
-        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'sliderBack', 'hover', 'backgroundColor'], _colors.default.switchGrayHover)
+        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'sliderBack', 'hover', 'backgroundColor'], _colorsModule.default.switchGrayHover)
       },
       '&:hover > $sliderContainer > $sliderHover': {
-        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'sliderHover', 'hover', 'backgroundColor'], _colors.default.switchHover)
+        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'sliderHover', 'hover', 'backgroundColor'], _colorsModule.default.switchHover)
       },
       '&:hover > $sliderContainer > $slider': {
-        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'slider', 'hover', 'backgroundColor'], (0, _seamlessImmutable.getIn)(['UTSwitch', 'slider', 'backgroundColor'], _colors.default.switchGrayHover))
+        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'slider', 'hover', 'backgroundColor'], (0, _seamlessImmutable.getIn)(['UTSwitch', 'slider', 'backgroundColor'], _colorsModule.default.switchGrayHover))
       },
       '&:Active > $sliderContainer > $sliderHover': {
-        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'sliderHover', 'active', 'backgroundColor'], _colors.default.switchActive)
+        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'sliderHover', 'active', 'backgroundColor'], _colorsModule.default.switchActive)
       }
     },
     textContainer: {
@@ -53,14 +53,14 @@ var retrieveStyle = function retrieveStyle(_ref) {
     },
     checkedText: {
       opacity: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'checkedText', 'opacity'], '0'),
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'checkedText', 'color'], _colors.default.white),
+      color: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'checkedText', 'color'], _colorsModule.default.white),
       fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'checkedText', 'fontSize'], (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'small'])),
       fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'checkedText', 'fontWeight'], 500)
     },
     uncheckedText: {
       transition: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'uncheckedText', 'transition'], 'all 0.3s ease'),
       opacity: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'uncheckedText', 'opacity'], '1'),
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'uncheckedText', 'color'], _colors.default.gray2),
+      color: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'uncheckedText', 'color'], _colorsModule.default.gray2),
       fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'uncheckedText', 'fontSize'], (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'small'])),
       fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'uncheckedText', 'fontWeight'], 500)
     },
@@ -76,7 +76,7 @@ var retrieveStyle = function retrieveStyle(_ref) {
       pointerEvents: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'disabled', 'pointerEvents'], 'none')
     },
     slider: {
-      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'slider', 'backgroundColor'], _colors.default.switchGray),
+      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'slider', 'backgroundColor'], _colorsModule.default.switchGray),
       borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'slider', 'borderRadius'], '26px'),
       height: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'slider', 'height'], '18px'),
       width: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'slider', 'width'], '18px'),
@@ -87,7 +87,7 @@ var retrieveStyle = function retrieveStyle(_ref) {
       transition: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'slider', 'transition'], 'all 0.3s ease-in-out')
     },
     sliderHover: {
-      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'sliderHover', 'backgroundColor'], _colors.default.transparent),
+      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'sliderHover', 'backgroundColor'], _colorsModule.default.transparent),
       transition: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'slider', 'transition'], 'all 0.3s ease-in-out'),
       position: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'sliderHover', 'position'], 'absolute'),
       width: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'sliderHover', 'width'], '40px'),
@@ -96,9 +96,9 @@ var retrieveStyle = function retrieveStyle(_ref) {
       borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'sliderHover', 'borderRadius'], '50%')
     },
     sliderBack: {
-      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'sliderBack', 'backgroundColor'], _colors.default.white),
+      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'sliderBack', 'backgroundColor'], _colorsModule.default.white),
       borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'sliderBack', 'borderRadius'], '26px'),
-      border: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'sliderBack', 'border'], "1px solid ".concat(_colors.default.switchGray)),
+      border: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'sliderBack', 'border'], "1px solid ".concat(_colorsModule.default.switchGray)),
       height: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'sliderBack', 'height'], '100%'),
       width: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'sliderBack', 'width'], '100%'),
       position: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'sliderBack', 'position'], 'absolute'),
@@ -111,11 +111,11 @@ var retrieveStyle = function retrieveStyle(_ref) {
       width: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'input', 'width'], '0'),
       position: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'input', 'position'], 'absolute'),
       '&:checked ~ $sliderContainer > $sliderBack': {
-        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'sliderBack', 'checkedSlider', 'backgroundColor'], _colors.default.blue),
-        border: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'sliderBack', 'checkedSlider', 'border'], "1px solid ".concat(_colors.default.blue))
+        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'sliderBack', 'checkedSlider', 'backgroundColor'], _colorsModule.default.blue),
+        border: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'sliderBack', 'checkedSlider', 'border'], "1px solid ".concat(_colorsModule.default.blue))
       },
       '&:checked ~ $sliderContainer:hover > $sliderBack': {
-        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'sliderBack', 'checkedSlider', 'hover', 'backgroundColor'], _colors.default.darkBlue),
+        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'sliderBack', 'checkedSlider', 'hover', 'backgroundColor'], _colorsModule.default.darkBlue),
         border: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'sliderBack', 'checkedSlider', 'hover', 'border'])
       },
       '&:checked ~ $sliderContainer > $sliderHover': {
@@ -123,7 +123,7 @@ var retrieveStyle = function retrieveStyle(_ref) {
       },
       '&:checked ~ $sliderContainer > $slider': {
         transform: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'slider', 'checkedSlider', 'transform'], 'translateX(27px)'),
-        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'slider', 'checkedSlider', 'backgroundColor'], _colors.default.switchGray)
+        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'slider', 'checkedSlider', 'backgroundColor'], _colorsModule.default.switchGray)
       },
       '&:checked ~ $sliderContainer > $textContainer > $checkedText': {
         transition: (0, _seamlessImmutable.getIn)(theme, ['UTSwitch', 'checkedText', 'checked', 'transition'], 'all 0.3s ease'),

package/dist/components/UTTable/components/ActionIcons/styles.module.scss

@@ -1,4 +1,4 @@
-@import '../../../../scss//variables/colors';
+@import '../../../../scss/variables/colors.module.scss';
 
 .iconButton {
   align-items: center;

package/dist/components/UTTable/components/TableRow/styles.module.scss

@@ -1,4 +1,4 @@
-@import '../../../../scss/variables/mediaQueries';
+@import '../../../../scss/variables/mediaQueries.module.scss';
 
 $selection-element-size: 42px;
 

package/dist/components/UTTable/styles.module.scss

@@ -1,5 +1,5 @@
-@import '../../scss/variables/_colors.scss';
-@import '../../scss/variables/mediaQueries';
+@import '../../scss/variables/colors.module.scss';
+@import '../../scss/variables/mediaQueries.module.scss';
 
 .table {
   position: relative;

package/dist/components/UTTable/theme.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.retrieveStyle = void 0;
 var _seamlessImmutable = require("seamless-immutable");
-var _colors = _interopRequireDefault(require("../../scss/variables/_colors.scss"));
+var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
 var _classesUtils = require("../../utils/classesUtils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
@@ -21,7 +21,7 @@ var retrieveStyle = function retrieveStyle(_ref) {
       fontFamily: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'table', 'fontFamily'], (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'fontFamily']))
     },
     header: {
-      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'header', 'backgroundColor'], _colors.default.white),
+      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'header', 'backgroundColor'], _colorsModule.default.white),
       borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'header', 'borderRadius']),
       borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'header', 'borderColor']),
       borderBottomStyle: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'header', 'borderStyle'], 'solid'),
@@ -93,7 +93,7 @@ var retrieveStyle = function retrieveStyle(_ref) {
       boxShadow: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'fixedHeaderRowLeft', 'boxShadow'])
     },
     fixedHeaderRowRight: {
-      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'fixedHeaderRowRight', 'backgroundColor'], (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'header', 'backgroundColor'], _colors.default.white)),
+      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'fixedHeaderRowRight', 'backgroundColor'], (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'header', 'backgroundColor'], _colorsModule.default.white)),
       borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'header', 'borderColor']),
       borderLeftColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'header', 'fixedHeaderDivisorColor']),
       borderBottomRightRadius: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'header', 'borderRadius']),
@@ -102,7 +102,7 @@ var retrieveStyle = function retrieveStyle(_ref) {
       boxShadow: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'fixedHeaderRowRight', 'boxShadow'])
     },
     row: {
-      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'row', 'backgroundColor'], _colors.default.white),
+      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'row', 'backgroundColor'], _colorsModule.default.white),
       boxShadow: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'row', 'boxShadow']),
       borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'row', 'borderRadius']),
       borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'row', 'borderColor']),
@@ -176,7 +176,7 @@ var retrieveStyle = function retrieveStyle(_ref) {
       borderWidth: (0, _classesUtils.withImportant)((theme === null || theme === void 0 || (_theme$UTTable13 = theme.UTTable) === null || _theme$UTTable13 === void 0 || (_theme$UTTable13 = _theme$UTTable13.rowCell) === null || _theme$UTTable13 === void 0 ? void 0 : _theme$UTTable13.borderWidth) || '1px')
     },
     categoryNameCell: {
-      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'categoryNameCell', 'backgroundColor'], _colors.default.white),
+      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'categoryNameCell', 'backgroundColor'], _colorsModule.default.white),
       fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'categoryNameCell', 'fontSize'], (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'medium'])),
       fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'categoryNameCell', 'fontWeight'])
     },
@@ -187,7 +187,7 @@ var retrieveStyle = function retrieveStyle(_ref) {
       borderBottomLeftRadius: (0, _classesUtils.withImportant)("".concat(theme === null || theme === void 0 || (_theme$UTTable15 = theme.UTTable) === null || _theme$UTTable15 === void 0 || (_theme$UTTable15 = _theme$UTTable15.table) === null || _theme$UTTable15 === void 0 ? void 0 : _theme$UTTable15.borderRadius, "px"))
     },
     fixedRowLeft: {
-      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'fixedRowLeft', 'backgroundColor'], (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'row', 'backgroundColor'], _colors.default.white)),
+      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'fixedRowLeft', 'backgroundColor'], (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'row', 'backgroundColor'], _colorsModule.default.white)),
       borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'row', 'borderColor']),
       borderBottomLeftRadius: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'row', 'borderRadius']),
       borderTopLeftRadius: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'row', 'borderRadius']),
@@ -205,7 +205,7 @@ var retrieveStyle = function retrieveStyle(_ref) {
       borderTopRightRadius: (0, _classesUtils.withImportant)("".concat(theme === null || theme === void 0 || (_theme$UTTable17 = theme.UTTable) === null || _theme$UTTable17 === void 0 || (_theme$UTTable17 = _theme$UTTable17.table) === null || _theme$UTTable17 === void 0 ? void 0 : _theme$UTTable17.borderRadius, "px"))
     },
     fixedRowRight: {
-      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'fixedRowRight', 'backgroundColor'], (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'row', 'backgroundColor'], _colors.default.white)),
+      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'fixedRowRight', 'backgroundColor'], (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'row', 'backgroundColor'], _colorsModule.default.white)),
       borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'row', 'borderColor']),
       borderBottomRightRadius: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'row', 'borderRadius']),
       borderTopRightRadius: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'row', 'borderRadius']),
@@ -221,10 +221,10 @@ var retrieveStyle = function retrieveStyle(_ref) {
       borderBottomColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'selectedRow', 'borderBottomColor'])
     },
     navigationButton: {
-      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'navigationButton', 'backgroundColor'], _colors.default.lightBlue),
+      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'navigationButton', 'backgroundColor'], _colorsModule.default.lightBlue),
       border: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'navigationButton', 'border']),
       borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'navigationButton', 'borderRadius']),
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'navigationButton', 'color'], _colors.default.white),
+      color: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'navigationButton', 'color'], _colorsModule.default.white),
       fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'navigationButton', 'fontSize'], (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'medium'])),
       fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'navigationButton', 'fontWeight']),
       height: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'navigationButton', 'height'], '30px'),
@@ -261,13 +261,13 @@ var retrieveStyle = function retrieveStyle(_ref) {
       transition: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'pageButton', 'transition'], 'all .4s'),
       width: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'pageButton', 'width'], '30px'),
       '&:hover': {
-        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'pageButton', 'hover', 'backgroundColor'], _colors.default.disabledGray),
+        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'pageButton', 'hover', 'backgroundColor'], _colorsModule.default.disabledGray),
         color: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'pageButton', 'hover', 'color']),
         border: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'pageButton', 'hover', 'border'])
       }
     },
     pageButtonSelected: {
-      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'pageButtonSelected', 'backgroundColor'], _colors.default.disabledGray),
+      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'pageButtonSelected', 'backgroundColor'], _colorsModule.default.disabledGray),
       border: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'pageButtonSelected', 'border']),
       color: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'pageButtonSelected', 'color']),
       fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'pageButtonSelected', 'fontSize']),
@@ -313,14 +313,14 @@ var retrieveStyle = function retrieveStyle(_ref) {
     },
     pageSizeSelectContainer: {
       '& fieldset': {
-        border: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'pageSizeSelect', 'border'], "1px solid ".concat(_colors.default.gray3))
+        border: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'pageSizeSelect', 'border'], "1px solid ".concat(_colorsModule.default.gray3))
       },
       '&:hover fieldset': {
-        border: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'pageSizeSelect', 'hover', 'border'], "1px solid ".concat(_colors.default.gray2))
+        border: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'pageSizeSelect', 'hover', 'border'], "1px solid ".concat(_colorsModule.default.gray2))
       }
     },
     noResultsContainer: {
-      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'noResultsContainer', 'backgroundColor'], (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'header', 'backgroundColor'], _colors.default.gray3)),
+      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'noResultsContainer', 'backgroundColor'], (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'header', 'backgroundColor'], _colorsModule.default.gray3)),
       border: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'noResultsContainer', 'border']),
       borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'noResultsContainer', 'borderRadius'], (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'header', 'borderRadius'])),
       height: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'noResultsContainer', 'height'], 200)
@@ -337,7 +337,7 @@ var retrieveStyle = function retrieveStyle(_ref) {
       color: (0, _classesUtils.withImportant)(theme === null || theme === void 0 || (_theme$UTTable27 = theme.UTTable) === null || _theme$UTTable27 === void 0 || (_theme$UTTable27 = _theme$UTTable27.checkbox) === null || _theme$UTTable27 === void 0 || (_theme$UTTable27 = _theme$UTTable27.selected) === null || _theme$UTTable27 === void 0 ? void 0 : _theme$UTTable27.color)
     },
     tableLoading: {
-      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'checkbox', 'backgroundColor'], (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'header', 'backgroundColor'], _colors.default.white))
+      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'checkbox', 'backgroundColor'], (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'header', 'backgroundColor'], _colorsModule.default.white))
     },
     headerDecoratorSelected: {
       '&:before': {
@@ -346,11 +346,11 @@ var retrieveStyle = function retrieveStyle(_ref) {
     },
     headerDecoratorUnselected: {
       '&:before': {
-        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'headerDecorator', 'unSelected', 'color'], _colors.default.gray3)
+        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTable', 'headerDecorator', 'unSelected', 'color'], _colorsModule.default.gray3)
       }
     },
     actionLoading: {
-      color: (0, _seamlessImmutable.getIn)(theme, ['Loading', 'base', 'color'], _colors.default.loadingBase)
+      color: (0, _seamlessImmutable.getIn)(theme, ['Loading', 'base', 'color'], _colorsModule.default.loadingBase)
     }
   };
 };

package/dist/components/UTTabs/theme.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.retrieveStyle = void 0;
 var _seamlessImmutable = require("seamless-immutable");
-var _colors = _interopRequireDefault(require("../../scss/variables/_colors.scss"));
+var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var retrieveStyle = function retrieveStyle(_ref) {
   var theme = _ref.theme;
@@ -33,7 +33,7 @@ var retrieveStyle = function retrieveStyle(_ref) {
       minWidth: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'minWidth']),
       width: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'width']),
       height: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'height']),
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'color'], _colors.default.black),
+      color: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'color'], _colorsModule.default.black),
       backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'backgroundColor'], 'transparent'),
       borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'borderRadius'], 0),
       opacity: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseTabRoot', 'opacity']),
@@ -57,7 +57,7 @@ var retrieveStyle = function retrieveStyle(_ref) {
       minWidth: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'minWidth']),
       width: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'width']),
       height: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'height']),
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'color'], _colors.default.black),
+      color: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'color'], _colorsModule.default.black),
       backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'backgroundColor'], 'transparent'),
       borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'borderRadius'], 0),
       opacity: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryTabRoot', 'opacity']),
@@ -70,12 +70,12 @@ var retrieveStyle = function retrieveStyle(_ref) {
     },
     baseSelected: {
       fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseSelected', 'fontWeight'], 'normal'),
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseSelected', 'color'], _colors.default.black),
+      color: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseSelected', 'color'], _colorsModule.default.black),
       backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseSelected', 'backgroundColor'], 'transparent')
     },
     secondarySelected: {
       fontWeight: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondarySelected', 'fontWeight'], 'normal'),
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondarySelected', 'color'], _colors.default.black),
+      color: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondarySelected', 'color'], _colorsModule.default.black),
       backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondarySelected', 'backgroundColor'], 'transparent')
     },
     baseIndicator: {
@@ -89,7 +89,7 @@ var retrieveStyle = function retrieveStyle(_ref) {
         borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseIndicator', '& > div', 'borderRadius'], 0),
         maxWidth: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseIndicator', '& > div', 'maxWidth'], '100%'),
         width: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseIndicator', '& > div', 'width'], '100%'),
-        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseIndicator', '& > div', 'backgroundColor'], _colors.default.black)
+        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseIndicator', '& > div', 'backgroundColor'], _colorsModule.default.black)
       },
       borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'baseIndicator', 'borderRadius'])
     },
@@ -104,7 +104,7 @@ var retrieveStyle = function retrieveStyle(_ref) {
         borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryIndicator', '& > div', 'borderRadius'], 0),
         maxWidth: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryIndicator', '& > div', 'maxWidth'], '100%'),
         width: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryIndicator', '& > div', 'width'], '100%'),
-        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryIndicator', '& > div', 'backgroundColor'], _colors.default.black)
+        backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryIndicator', '& > div', 'backgroundColor'], _colorsModule.default.black)
       },
       borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTTabs', 'secondaryIndicator', 'borderRadius'])
     },

package/dist/components/UTTextArea/theme.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.retrieveStyle = void 0;
-var _colors = _interopRequireDefault(require("../../scss/variables/_colors.scss"));
+var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var retrieveStyle = function retrieveStyle(_ref) {
   var _theme$UTTextArea, _theme$UTTextArea2, _theme$UTTextArea3, _theme$UTTextArea4, _theme$Fonts, _theme$UTTextArea5, _theme$Fonts2, _theme$UTTextArea6, _theme$UTTextArea7, _theme$UTTextArea8, _theme$UTTextArea9, _theme$UTTextArea10, _theme$UTTextArea11, _theme$UTTextArea12, _theme$UTTextArea13, _theme$UTTextArea14, _theme$UTTextArea15, _theme$UTTextArea16, _theme$UTTextArea17, _theme$UTTextArea18, _theme$UTTextArea19, _theme$UTTextArea20;
@@ -14,7 +14,7 @@ var retrieveStyle = function retrieveStyle(_ref) {
       background: theme === null || theme === void 0 || (_theme$UTTextArea = theme.UTTextArea) === null || _theme$UTTextArea === void 0 || (_theme$UTTextArea = _theme$UTTextArea.textarea) === null || _theme$UTTextArea === void 0 ? void 0 : _theme$UTTextArea.background,
       border: theme === null || theme === void 0 || (_theme$UTTextArea2 = theme.UTTextArea) === null || _theme$UTTextArea2 === void 0 || (_theme$UTTextArea2 = _theme$UTTextArea2.textarea) === null || _theme$UTTextArea2 === void 0 ? void 0 : _theme$UTTextArea2.border,
       borderRadius: theme === null || theme === void 0 || (_theme$UTTextArea3 = theme.UTTextArea) === null || _theme$UTTextArea3 === void 0 || (_theme$UTTextArea3 = _theme$UTTextArea3.textarea) === null || _theme$UTTextArea3 === void 0 ? void 0 : _theme$UTTextArea3.borderRadius,
-      color: (theme === null || theme === void 0 || (_theme$UTTextArea4 = theme.UTTextArea) === null || _theme$UTTextArea4 === void 0 || (_theme$UTTextArea4 = _theme$UTTextArea4.textarea) === null || _theme$UTTextArea4 === void 0 ? void 0 : _theme$UTTextArea4.color) || _colors.default.black,
+      color: (theme === null || theme === void 0 || (_theme$UTTextArea4 = theme.UTTextArea) === null || _theme$UTTextArea4 === void 0 || (_theme$UTTextArea4 = _theme$UTTextArea4.textarea) === null || _theme$UTTextArea4 === void 0 ? void 0 : _theme$UTTextArea4.color) || _colorsModule.default.black,
       fontFamily: theme === null || theme === void 0 || (_theme$Fonts = theme.Fonts) === null || _theme$Fonts === void 0 ? void 0 : _theme$Fonts.fontFamily,
       fontSize: (theme === null || theme === void 0 || (_theme$UTTextArea5 = theme.UTTextArea) === null || _theme$UTTextArea5 === void 0 || (_theme$UTTextArea5 = _theme$UTTextArea5.textarea) === null || _theme$UTTextArea5 === void 0 ? void 0 : _theme$UTTextArea5.fontSize) || (theme === null || theme === void 0 || (_theme$Fonts2 = theme.Fonts) === null || _theme$Fonts2 === void 0 ? void 0 : _theme$Fonts2.medium) || 14,
       fontWeight: theme === null || theme === void 0 || (_theme$UTTextArea6 = theme.UTTextArea) === null || _theme$UTTextArea6 === void 0 || (_theme$UTTextArea6 = _theme$UTTextArea6.textarea) === null || _theme$UTTextArea6 === void 0 ? void 0 : _theme$UTTextArea6.fontWeight,

package/dist/components/UTTextInput/styles.module.scss

@@ -1,5 +1,5 @@
 // sass-lint:disable no-vendor-prefixes
-@import '../../scss/variables/_colors.scss';
+@import '../../scss/variables/colors.module.scss';
 
 .iconContainer {
   align-items: center;

package/dist/components/UTTextInput/theme.js

@@ -7,7 +7,7 @@ exports.retrieveStyle = exports.retrieveMuiTheme = void 0;
 var _seamlessImmutable = require("seamless-immutable");
 var _styles = require("@material-ui/core/styles");
 var _lodash = _interopRequireDefault(require("lodash"));
-var _colors = _interopRequireDefault(require("../../scss/variables/_colors.scss"));
+var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var retrieveStyle = function retrieveStyle(_ref) {
   var theme = _ref.theme;
@@ -28,7 +28,7 @@ var retrieveStyle = function retrieveStyle(_ref) {
     labelIcon: {
       height: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'inputIcon', 'height'], '12px'),
       width: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'inputIcon', 'width'], 'auto'),
-      fill: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'inputIcon', 'fill'], "".concat(_colors.default.gray)),
+      fill: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'inputIcon', 'fill'], "".concat(_colorsModule.default.gray)),
       padding: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'inputIcon', 'padding'], '0px 5px 0px 0px')
     },
     labelContainer: {
@@ -52,20 +52,20 @@ var retrieveMuiTheme = function retrieveMuiTheme(theme, muiTheme) {
         },
         root: {
           '&:hover:not($disabled):not($focused):not($error) $notchedOutline': {
-            border: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'hover', 'border'], "1px solid ".concat(_colors.default.gray)),
+            border: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'hover', 'border'], "1px solid ".concat(_colorsModule.default.gray)),
             borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'hover', 'borderColor'], 'none')
           },
           '&$focused $notchedOutline': {
-            border: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'focused', 'border'], "2px solid ".concat(_colors.default.primary)),
+            border: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'focused', 'border'], "2px solid ".concat(_colorsModule.default.primary)),
             borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'hover', 'borderColor'], 'none')
           },
           '&$disabled $notchedOutline': {
-            border: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'disabled', 'border'], "1px solid ".concat(_colors.default.gray)),
+            border: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'disabled', 'border'], "1px solid ".concat(_colorsModule.default.gray)),
             borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'hover', 'borderColor'], 'none')
           }
         },
         notchedOutline: {
-          border: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'unfocused', 'border'], "1px solid ".concat(_colors.default.error)),
+          border: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'unfocused', 'border'], "1px solid ".concat(_colorsModule.default.error)),
           borderColor: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'notchedOutline', 'hover', 'borderColor'], 'none')
         }
       },
@@ -79,22 +79,22 @@ var retrieveMuiTheme = function retrieveMuiTheme(theme, muiTheme) {
         },
         underline: {
           '&:hover:not($disabled):not($focused):not($error):before': {
-            borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'underline', 'hover', 'borderBottom'], "1px solid ".concat(_colors.default.gray))
+            borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'underline', 'hover', 'borderBottom'], "1px solid ".concat(_colorsModule.default.gray))
           },
           '&:hover:not($disabled):before': {
-            borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'underline', 'hover', 'borderBottom'], "1px solid ".concat(_colors.default.gray))
+            borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'underline', 'hover', 'borderBottom'], "1px solid ".concat(_colorsModule.default.gray))
           },
           '&$disabled:before': {
-            borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'underline', 'disabled', 'borderBottom'], "1px solid ".concat(_colors.default.gray))
+            borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'underline', 'disabled', 'borderBottom'], "1px solid ".concat(_colorsModule.default.gray))
           },
           '&:before': {
-            borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'underline', 'unfocused', 'borderBottom'], "1px solid ".concat(_colors.default.gray))
+            borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'underline', 'unfocused', 'borderBottom'], "1px solid ".concat(_colorsModule.default.gray))
           },
           '&$focused:after': {
-            borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'underline', 'focused', 'borderBottom'], "2px solid ".concat(_colors.default.primary))
+            borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'underline', 'focused', 'borderBottom'], "2px solid ".concat(_colorsModule.default.primary))
           },
           '&:after': {
-            borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'underline', 'base', 'borderBottom'], "2px solid ".concat(_colors.default.primary))
+            borderBottom: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'underline', 'base', 'borderBottom'], "2px solid ".concat(_colorsModule.default.primary))
           },
           '&$error:after': {
             borderBottom: "2px solid ".concat(theme.Palette.error['05']),
@@ -106,12 +106,12 @@ var retrieveMuiTheme = function retrieveMuiTheme(theme, muiTheme) {
         root: {
           color: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'formLabel', 'color']),
           '&$error': {
-            color: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'formLabel', 'errorColor'], _colors.default.gray)
+            color: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'formLabel', 'errorColor'], _colorsModule.default.gray)
           },
           '&$focused': {
-            color: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'formLabel', 'focusedColor'], _colors.default.primary),
+            color: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'formLabel', 'focusedColor'], _colorsModule.default.primary),
             '&$error': {
-              color: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'formLabel', 'focusedErrorColor'], _colors.default.error)
+              color: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'formLabel', 'focusedErrorColor'], _colorsModule.default.error)
             }
           },
           fontFamily: (0, _seamlessImmutable.getIn)(theme, ['Fonts', 'fontFamily']),
@@ -122,7 +122,7 @@ var retrieveMuiTheme = function retrieveMuiTheme(theme, muiTheme) {
       MuiFormHelperText: {
         root: {
           fontSize: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'helperText', 'fontSize'], 12),
-          color: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'helperText', 'color'], _colors.default.error)
+          color: (0, _seamlessImmutable.getIn)(theme, ['UTTextInput', 'helperText', 'color'], _colorsModule.default.error)
         }
       }
     }

package/dist/components/UTToggle/theme.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.retrieveStyle = void 0;
 var _seamlessImmutable = require("seamless-immutable");
-var _colors = _interopRequireDefault(require("../../scss/variables/_colors.scss"));
+var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var retrieveStyle = function retrieveStyle(_ref) {
   var theme = _ref.theme;
@@ -40,7 +40,7 @@ var retrieveStyle = function retrieveStyle(_ref) {
       pointerEvents: (0, _seamlessImmutable.getIn)(theme, ['UTToggle', 'selectedOption', 'pointerEvents'], 'none')
     },
     selectedLabel: {
-      color: (0, _seamlessImmutable.getIn)(theme, ['UTToggle', 'selectedLabel', 'color'], "".concat(_colors.default.white))
+      color: (0, _seamlessImmutable.getIn)(theme, ['UTToggle', 'selectedLabel', 'color'], "".concat(_colorsModule.default.white))
     },
     unSelectedLabel: {
       color: (0, _seamlessImmutable.getIn)(theme, ['UTToggle', 'unSelectedLabel', 'color'])
@@ -53,7 +53,7 @@ var retrieveStyle = function retrieveStyle(_ref) {
       fill: (0, _seamlessImmutable.getIn)(theme, ['UTToggle', 'unselectedIcon', 'fill'])
     },
     selectedIcon: {
-      fill: (0, _seamlessImmutable.getIn)(theme, ['UTToggle', 'selectedIcon', 'fill'], "".concat(_colors.default.white))
+      fill: (0, _seamlessImmutable.getIn)(theme, ['UTToggle', 'selectedIcon', 'fill'], "".concat(_colorsModule.default.white))
     }
   };
 };

package/dist/components/UTTooltip/styles.module.scss

@@ -1,4 +1,4 @@
-@import '../../scss/variables/_colors.scss';
+@import '../../scss/variables/colors.module.scss';
 
 .baseContent {
   text-align: left;

package/dist/components/UTTopbar/theme.js

@@ -4,14 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.retrieveStyle = void 0;
-var _colors = _interopRequireDefault(require("../../scss/variables/_colors.scss"));
+var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var retrieveStyle = function retrieveStyle(_ref) {
   var _theme$UTTopbar, _theme$UTTopbar2, _theme$UTTopbar3, _theme$UTTopbar4, _theme$UTTopbar5, _theme$UTTopbar6, _theme$UTTopbar7, _theme$UTTopbar8, _theme$UTTopbar9, _theme$UTTopbar10, _theme$UTTopbar11, _theme$UTTopbar12, _theme$UTTopbar13, _theme$UTTopbar14, _theme$UTTopbar15, _theme$UTTopbar16, _theme$UTTopbar17, _theme$UTTopbar18, _theme$UTTopbar19, _theme$UTTopbar20, _theme$UTTopbar21, _theme$UTTopbar22, _theme$UTTopbar23, _theme$UTTopbar24, _theme$UTTopbar25, _theme$UTTopbar26, _theme$UTTopbar27, _theme$UTTopbar28, _theme$UTTopbar29, _theme$UTTopbar30, _theme$UTTopbar31, _theme$UTTopbar32, _theme$UTTopbar33, _theme$UTTopbar34, _theme$UTTopbar35, _theme$UTTopbar36, _theme$UTTopbar37, _theme$UTTopbar38, _theme$UTTopbar39, _theme$UTTopbar40, _theme$UTTopbar41, _theme$UTTopbar42, _theme$UTTopbar43, _theme$UTTopbar44, _theme$UTTopbar45, _theme$UTTopbar46;
   var theme = _ref.theme;
   return {
     container: {
-      background: (theme === null || theme === void 0 || (_theme$UTTopbar = theme.UTTopbar) === null || _theme$UTTopbar === void 0 || (_theme$UTTopbar = _theme$UTTopbar.container) === null || _theme$UTTopbar === void 0 ? void 0 : _theme$UTTopbar.background) || _colors.default.white,
+      background: (theme === null || theme === void 0 || (_theme$UTTopbar = theme.UTTopbar) === null || _theme$UTTopbar === void 0 || (_theme$UTTopbar = _theme$UTTopbar.container) === null || _theme$UTTopbar === void 0 ? void 0 : _theme$UTTopbar.background) || _colorsModule.default.white,
       borderBottom: theme === null || theme === void 0 || (_theme$UTTopbar2 = theme.UTTopbar) === null || _theme$UTTopbar2 === void 0 || (_theme$UTTopbar2 = _theme$UTTopbar2.container) === null || _theme$UTTopbar2 === void 0 ? void 0 : _theme$UTTopbar2.borderBottom,
       height: theme === null || theme === void 0 || (_theme$UTTopbar3 = theme.UTTopbar) === null || _theme$UTTopbar3 === void 0 || (_theme$UTTopbar3 = _theme$UTTopbar3.container) === null || _theme$UTTopbar3 === void 0 ? void 0 : _theme$UTTopbar3.height,
       padding: (theme === null || theme === void 0 || (_theme$UTTopbar4 = theme.UTTopbar) === null || _theme$UTTopbar4 === void 0 || (_theme$UTTopbar4 = _theme$UTTopbar4.container) === null || _theme$UTTopbar4 === void 0 ? void 0 : _theme$UTTopbar4.padding) || '10px 20px',

package/dist/components/UTWorkflowContainer/theme.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.retrieveStyle = void 0;
 var _seamlessImmutable = require("seamless-immutable");
-var _colors = _interopRequireDefault(require("../../scss/variables/_colors.scss"));
+var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
 var _classesUtils = require("../../utils/classesUtils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
@@ -22,8 +22,8 @@ var retrieveStyle = function retrieveStyle(_ref) {
     container: (_container = {
       border: (0, _seamlessImmutable.getIn)(theme, ['UTWorkflowContainer', 'container', 'border'], 0),
       borderRadius: (0, _seamlessImmutable.getIn)(theme, ['UTWorkflowContainer', 'container', 'borderRadius'], '4px'),
-      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTWorkflowContainer', 'container', 'backgroundColor'], _colors.default.cardBackground),
-      boxShadow: (0, _seamlessImmutable.getIn)(theme, ['UTWorkflowContainer', 'container', 'boxShadow'], "1px 1px 3px 0 ".concat(_colors.default.cardShadow1, ", -0.5px -0.5px 2px 0 ").concat(_colors.default.cardShadow2)),
+      backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTWorkflowContainer', 'container', 'backgroundColor'], _colorsModule.default.cardBackground),
+      boxShadow: (0, _seamlessImmutable.getIn)(theme, ['UTWorkflowContainer', 'container', 'boxShadow'], "1px 1px 3px 0 ".concat(_colorsModule.default.cardShadow1, ", -0.5px -0.5px 2px 0 ").concat(_colorsModule.default.cardShadow2)),
       boxSizing: 'border-box',
       display: 'flex',
       margin: (0, _seamlessImmutable.getIn)(theme, ['UTWorkflowContainer', 'container', 'margin']),

package/dist/utils/shadowUtils.js

@@ -35,6 +35,6 @@ var getShadow = function getShadow(_ref) {
   var shadowLevel = levels[level] || levels[defaultLevel];
   var shadowOrientation = orientations[orientation] || orientations[defaultOrientation];
   var shadowOrientationLevel = shadowOrientation[level] || shadowOrientation[defaultLevel];
-  return "0 ".concat(shadowOrientationLevel, "px ").concat(shadowLevel, "px 0 ").concat(color, "1a");
+  return "0 ".concat(shadowOrientationLevel, "px ").concat(shadowLevel, "px 0 ").concat(color);
 };
 exports.getShadow = getShadow;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "2.6.1",
+  "version": "2.7.1",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",
@@ -38,7 +38,7 @@
     "d3": "^7.0.1",
     "dayjs": "^1.10.7",
     "emojilib": "3.0.5",
-    "node-sass": "^4.9.0",
+    "node-sass": "^8.0.0",
     "numeral": "^2.0.6",
     "object-hash": "^3.0.0",
     "react-google-maps": ">=9.2.2",
@@ -50,7 +50,7 @@
     "react-window": "^1.8.5",
     "rehype-raw": "^6.1.0",
     "remark-breaks": "^3.0.2",
-    "sass-loader": "^7.0.3",
+    "sass-loader": "^10.0.5",
     "seamless-immutable": "^7.1.4"
   },
   "devDependencies": {
@@ -79,7 +79,7 @@
     "prop-types": ">=15.5.10",
     "react": "^16.4.0",
     "react-dom": "^16.4.0",
-    "react-scripts": "^2.0.0",
+    "react-scripts": "^4.0.0",
     "sass-lint": "^1.12.1",
     "semantic-release": "^15.13.31"
   },

package/dist/scss/variables/_fontFamilies.scss

@@ -1 +0,0 @@
-$nunito: 'Nunito';