dibk-design 6.5.2 → 7.0.0

package/dist/components/RadioButtonList.module.scss

@@ -1,4 +1,5 @@
-@import "../style/global.scss";
+// Variables
+@use "../style/abstracts/variables/typography";
 
 fieldset.radioButtonList {
     margin: 0;
@@ -11,7 +12,7 @@ fieldset.radioButtonList {
         font-weight: bold;
         line-height: 1.2;
         margin-bottom: 2px;
-        font-family: $default-font;
+        font-family: typography.$default-font;
         overflow-wrap: break-word;
         .requiredSymbol {
             width: 1em;

package/dist/components/RadioButtonListItem.js

@@ -9,7 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _RadioButtonInput = _interopRequireDefault(require("./RadioButtonInput"));
 var _helpers = require("../functions/helpers");
 var _RadioButtonListItemModule = _interopRequireDefault(require("./RadioButtonListItem.module.scss"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const RadioButtonListItem = props => {
   const listItemClassNameArray = [_RadioButtonListItemModule.default.radioButtonListItem, props.checked ? _RadioButtonListItemModule.default.checked : null, props.disabled ? _RadioButtonListItemModule.default.disabled : null, props.compact ? _RadioButtonListItemModule.default.compact : null, props.contentOnly ? _RadioButtonListItemModule.default.contentOnly : null, props.hasErrors ? _RadioButtonListItemModule.default.hasErrors : null];
   const listItemClassNameString = (0, _helpers.classNameArrayToClassNameString)(listItemClassNameArray);

package/dist/components/RadioButtonListItem.module.scss

@@ -1,9 +1,17 @@
-@import "../style/global.scss";
+// Mixins
+@use "../style/abstracts/mixins/border-radius";
+@use "../style/abstracts/mixins/box-sizing";
+@use "../style/abstracts/mixins/transition";
+
+// Variables
+@use "../style/abstracts/variables/colors";
+@use "../style/abstracts/variables/transitions";
+@use "../style/abstracts/variables/typography";
 
 .radioButtonListItem {
-  @include box-sizing(content-box);
-  @include border-radius(0);
-  @include transition(all $default-transition);
+  @include box-sizing.box-sizing(content-box);
+  @include border-radius.border-radius(0);
+  @include transition.transition(all transitions.$default-transition);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -13,14 +21,14 @@
   -ms-flex-align: flex-start;
   align-items: flex-start;
   cursor: pointer;
-  font-family: $default-font;
+  font-family: typography.$default-font;
   position: relative;
   font-size: 16px;
   line-height: 24px;
   color: #000;
 
   &:not(.contentOnly):not(.compact) {
-    border: 1px solid var(--color-secondary-light, $color-secondary-light);
+    border: 1px solid var(--color-secondary-light, colors.$color-secondary-light);
     background: white;
     margin-bottom: 8px;
     label {
@@ -43,15 +51,15 @@
   }
 
   &.checked:not(.contentOnly):not(.compact):not(.disabled) {
-    background-color: var(--color-secondary-light, $color-secondary-light);
+    background-color: var(--color-secondary-light, colors.$color-secondary-light);
   }
 
   &:not(.checked):not(.contentOnly):not(.compact):not(.disabled) {
     &:hover {
-      background-color: var(--color-secondary-x-light, $color-secondary-x-light);
+      background-color: var(--color-secondary-x-light, colors.$color-secondary-x-light);
     }
     &:focus-within {
-      background-color: var(--color-secondary-x-light, $color-secondary-x-light);
+      background-color: var(--color-secondary-x-light, colors.$color-secondary-x-light);
     }
   }
 

package/dist/components/Select.js

@@ -14,7 +14,7 @@ var _generators = require("../functions/generators");
 var _helpers = require("../functions/helpers");
 var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
 var _SelectModule = _interopRequireDefault(require("./Select.module.scss"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const Select = props => {
@@ -39,7 +39,7 @@ const Select = props => {
       }
     };
     const handleClickOutside = event => {
-      if (dropdownRef !== null && dropdownRef !== void 0 && dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      if (dropdownRef?.current && !dropdownRef.current.contains(event.target)) {
         hideDropdownList();
       }
     };
@@ -77,7 +77,7 @@ const Select = props => {
   };
   const renderSelectedValues = (options, selectElementProps) => {
     const selectedValues = selectElementProps.defaultValue || selectElementProps.value;
-    return selectedValues !== null && selectedValues !== void 0 && selectedValues.length ? selectedValues.map(value => {
+    return selectedValues?.length ? selectedValues.map(value => {
       const keyForValue = getKeyByValue(value, options);
       return keyForValue;
     }).join(", ") : null;
@@ -89,7 +89,7 @@ const Select = props => {
       const isSelected = selectedValues && selectedValues.length && selectedValues.includes(optionObject.value);
       return _react.default.createElement(_CheckBoxListItem.default, {
         key: index,
-        id: "".concat(props.id, "-").concat(index),
+        id: `${props.id}-${index}`,
         value: optionObject.value,
         checked: isSelected,
         onChange: () => selectElementProps.onChange(optionObject.value)
@@ -112,7 +112,7 @@ const Select = props => {
     }, placeholder) : "";
   };
   const getErrorElementId = () => {
-    return "".concat(props.id, "-errorMessage");
+    return `${props.id}-errorMessage`;
   };
   if (props.contentOnly) {
     const value = props.defaultValue ? props.defaultValue : props.value || null;
@@ -122,10 +122,9 @@ const Select = props => {
       htmlFor: props.id
     }, props.label), _react.default.createElement("span", null, value ? props.keyAsContent ? getKeyByValue(value, props.options) : value : props.defaultContent));
   } else {
-    var _props$width, _props$errorMessage, _props$ariaDescribed, _props$width2;
     const defaultValue = !props.value && props.defaultValue ? props.defaultValue : false;
     const styleRules = {
-      ...(((_props$width = props.width) === null || _props$width === void 0 ? void 0 : _props$width.length) && {
+      ...(props.width?.length && {
         maxWidth: props.width
       })
     };
@@ -139,9 +138,9 @@ const Select = props => {
       onChange: props.onChange,
       id: props.id,
       role: props.role,
-      key: "".concat(props.id, "-").concat((0, _generators.generateRandomString)(6)),
+      key: `${props.id}-${(0, _generators.generateRandomString)(6)}`,
       className,
-      "aria-describedby": props.hasErrors && !!((_props$errorMessage = props.errorMessage) !== null && _props$errorMessage !== void 0 && _props$errorMessage.length) ? getErrorElementId() : !!((_props$ariaDescribed = props["aria-describedby"]) !== null && _props$ariaDescribed !== void 0 && _props$ariaDescribed.length) ? props["aria-describedby"] : null,
+      "aria-describedby": props.hasErrors && !!props.errorMessage?.length ? getErrorElementId() : !!props["aria-describedby"]?.length ? props["aria-describedby"] : null,
       "aria-invalid": props.hasErrors ? "true" : null,
       style: styleRules
     };
@@ -156,7 +155,7 @@ const Select = props => {
     })), _react.default.createElement("div", {
       className: _SelectModule.default.selectContainer,
       style: {
-        ...(((_props$width2 = props.width) === null || _props$width2 === void 0 ? void 0 : _props$width2.length) && {
+        ...(props.width?.length && {
           maxWidth: props.width
         })
       }

package/dist/components/Select.module.scss

@@ -1,4 +1,13 @@
-@import "../style/global.scss";
+// Mixins
+@use "../style/abstracts/mixins/appearance";
+@use "../style/abstracts/mixins/border-radius";
+@use "../style/abstracts/mixins/box-shadow";
+@use "../style/abstracts/mixins/transition";
+
+// Variables
+@use "../style/abstracts/variables/colors";
+@use "../style/abstracts/variables/transitions";
+@use "../style/abstracts/variables/viewports";
 
 .select {
     .requiredSymbol {
@@ -12,6 +21,7 @@
         position: relative;
 
         .selectListArrow {
+            @include border-radius.border-radius(100px);
             box-sizing: border-box;
             position: absolute;
             top: 15px;
@@ -19,8 +29,7 @@
             display: block;
             width: 12px;
             height: calc(50% - 6px);
-            border-radius: 100px;
-            @media only screen and (min-width: $screen-sm) {
+            @media only screen and (min-width: viewports.$screen-sm) {
                 top: 20px;
                 right: 20px;
             }
@@ -40,8 +49,8 @@
         }
 
         .multipleSelectDropdown {
-            @include border-radius(4px);
-            @include box-shadow(
+            @include border-radius.border-radius(4px);
+            @include box-shadow.box-shadow(
                 rgba(0, 0, 0, 0.2) 0px 5px 5px -3px,
                 rgba(0, 0, 0, 0.14) 0px 8px 10px 1px,
                 rgba(0, 0, 0, 0.12) 0px 3px 14px 2px
@@ -54,28 +63,27 @@
 
         select,
         .multipleSelectElement {
-            @include border-radius(0);
-            @include transition(background $default-transition);
-            @include appearance(none);
-            @include box-shadow(none);
+            @include border-radius.border-radius(0);
+            @include transition.transition(background transitions.$default-transition);
+            @include appearance.appearance(none);
+            @include box-shadow.box-shadow(none);
             color: rgba(0, 0, 0, 0.75);
             width: 100%;
             font-family: inherit;
             font-size: 18px;
             padding: 10px 40px 10px 10px;
-            border: 1px solid var(--color-primary, $color-primary);
-            border-radius: 0;
+            border: 1px solid var(--color-primary, colors.$color-primary);
             line-height: 1.7;
             background: white;
             cursor: pointer;
 
             &:hover {
-                border-color: var(--color-primary, $color-primary);
-                background-color: var(--color-secondary-x-light, $color-secondary-x-light);
+                border-color: var(--color-primary, colors.$color-primary);
+                background-color: var(--color-secondary-x-light, colors.$color-secondary-x-light);
             }
 
             &:focus {
-                outline-color: var(--color-primary, $color-primary);
+                outline-color: var(--color-primary, colors.$color-primary);
             }
 
             &[disabled],
@@ -93,9 +101,9 @@
             }
 
             &.hasErrors {
-                border-color: var(--color-error, $color-error);
+                border-color: var(--color-error, colors.$color-error);
                 &:focus {
-                    border-color: var(--color-error, $color-error);
+                    border-color: var(--color-error, colors.$color-error);
                     outline-color: #b8565d;
                 }
                 &[disabled],

package/dist/components/Table.js

@@ -8,16 +8,16 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _helpers = require("../functions/helpers");
 var _TableModule = _interopRequireDefault(require("./Table.module.scss"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const getCaptionAlignClass = captionAlign => {
   const defaultValue = "left";
   const availableValues = ["left", "center", "right"];
-  return captionAlign !== null && captionAlign !== void 0 && captionAlign.length && availableValues.includes(captionAlign) ? _TableModule.default["captionAlign-".concat(captionAlign)] : _TableModule.default["captionAlign-".concat(defaultValue)];
+  return captionAlign?.length && availableValues.includes(captionAlign) ? _TableModule.default[`captionAlign-${captionAlign}`] : _TableModule.default[`captionAlign-${defaultValue}`];
 };
 const getCaptionSideClass = captionSide => {
   const defaultValue = "top";
   const availableValues = ["top", "bottom"];
-  return captionSide !== null && captionSide !== void 0 && captionSide.length && availableValues.includes(captionSide) ? _TableModule.default["captionSide-".concat(captionSide)] : _TableModule.default["captionSide-".concat(defaultValue)];
+  return captionSide?.length && availableValues.includes(captionSide) ? _TableModule.default[`captionSide-${captionSide}`] : _TableModule.default[`captionSide-${defaultValue}`];
 };
 const Table = props => {
   return _react.default.createElement("table", {

package/dist/components/Table.module.scss

@@ -1,16 +1,18 @@
-@import "../style/global.scss";
+// Variables
+@use "../style/abstracts/variables/colors";
+@use "../style/abstracts/variables/typography";
 
 .table {
-    font-family: $default-font;
+    font-family: typography.$default-font;
     border-collapse: collapse;
     width: 100%;
     caption {
-        font-family: $default-font;
+        font-family: typography.$default-font;
         font-weight: normal;
         font-style: italic;
         line-height: 1;
         font-size: 17px;
-        color: var(--color-primary, $color-primary);
+        color: var(--color-primary, colors.$color-primary);
     }
     &.captionSide-top {
         caption {
@@ -41,8 +43,8 @@
     }
     thead {
         tr {
-            background-color: var(--color-default-background, $color-default-background);
-            border: 1px solid var(--color-border, $color-border);
+            background-color: var(--color-default-background, colors.$color-default-background);
+            border: 1px solid var(--color-border, colors.$color-border);
             th {
                 text-align: left;
                 font-size: 16px;
@@ -52,8 +54,8 @@
     }
     tbody {
         tr {
-            background-color: var(--color-default-background, $color-default-background);
-            border: 1px solid var(--color-border, $color-border);
+            background-color: var(--color-default-background, colors.$color-default-background);
+            border: 1px solid var(--color-border, colors.$color-border);
             td {
                 padding: 10px;
                 font-size: 16px;

package/dist/components/Textarea.js

@@ -11,23 +11,22 @@ var _ErrorMessage = _interopRequireDefault(require("./ErrorMessage"));
 var _generators = require("../functions/generators");
 var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
 var _TextareaModule = _interopRequireDefault(require("./Textarea.module.scss"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Textarea = props => {
   const renderValueAsText = (value, defaultContent) => {
     return value ? value : defaultContent;
   };
   const getErrorElementId = () => {
-    return "".concat(props.id, "-errorMessage");
+    return `${props.id}-errorMessage`;
   };
   const renderInputField = () => {
-    var _props$value, _props$defaultValue, _props$width, _props$resize, _props$errorMessage, _props$ariaDescribed;
-    const defaultValue = !((_props$value = props.value) !== null && _props$value !== void 0 && _props$value.length) && (_props$defaultValue = props.defaultValue) !== null && _props$defaultValue !== void 0 && _props$defaultValue.length ? props.defaultValue : false;
+    const defaultValue = !props.value?.length && props.defaultValue?.length ? props.defaultValue : false;
     const defaultKey = props.elementKey || null;
     const styleRules = {
-      ...(((_props$width = props.width) === null || _props$width === void 0 ? void 0 : _props$width.length) && {
+      ...(props.width?.length && {
         maxWidth: props.width
       }),
-      ...(((_props$resize = props.resize) === null || _props$resize === void 0 ? void 0 : _props$resize.length) && {
+      ...(props.resize?.length && {
         resize: props.resize
       })
     };
@@ -38,14 +37,14 @@ const Textarea = props => {
       required: props.required,
       type: props.type,
       id: props.id,
-      key: defaultKey || "".concat(props.id, "-").concat((0, _generators.generateRandomString)(6)),
+      key: defaultKey || `${props.id}-${(0, _generators.generateRandomString)(6)}`,
       onChange: props.onChange,
       onBlur: props.onBlur,
       [defaultValue ? "defaultValue" : "value"]: defaultValue || props.value,
       placeholder: props.placeholder,
       rows: props.rows,
       className: props.hasErrors ? _TextareaModule.default.hasErrors : "",
-      "aria-describedby": props.hasErrors && !!((_props$errorMessage = props.errorMessage) !== null && _props$errorMessage !== void 0 && _props$errorMessage.length) ? getErrorElementId() : !!((_props$ariaDescribed = props["aria-describedby"]) !== null && _props$ariaDescribed !== void 0 && _props$ariaDescribed.length) ? props["aria-describedby"] : null,
+      "aria-describedby": props.hasErrors && !!props.errorMessage?.length ? getErrorElementId() : !!props["aria-describedby"]?.length ? props["aria-describedby"] : null,
       "aria-invalid": props.hasErrors ? "true" : null,
       style: styleRules
     };

package/dist/components/Textarea.module.scss

@@ -1,4 +1,13 @@
-@import "../style/global.scss";
+// Mixins
+@use "../style/abstracts/mixins/appearance";
+@use "../style/abstracts/mixins/border-radius";
+@use "../style/abstracts/mixins/box-shadow";
+@use "../style/abstracts/mixins/box-sizing";
+@use "../style/abstracts/mixins/transition";
+
+// Variables
+@use "../style/abstracts/variables/colors";
+@use "../style/abstracts/variables/viewports";
 
 .textarea {
     > div {
@@ -12,10 +21,11 @@
         margin-top: 2px;
     }
     textarea {
-        @include appearance(none);
-        @include transition(border-color 0.15s linear, background 0.15s linear);
-        @include border-radius(0);
-        @include box-shadow(none);
+        @include appearance.appearance(none);
+        @include transition.transition(border-color 0.15s linear, background 0.15s linear);
+        @include border-radius.border-radius(0);
+        @include box-shadow.box-shadow(none);
+        @include box-sizing.box-sizing(border-box);
         height: auto;
         width: 100%;
         display: block;
@@ -23,23 +33,21 @@
         margin-bottom: 0;
         font-weight: 300;
         background-color: #fff;
-        box-shadow: none;
         color: rgba(0, 0, 0, 0.75);
         font-family: inherit;
         font-size: 16px;
-        box-sizing: border-box;
         border: 1px solid #afaba8;
-        @media only screen and (min-width: $screen-sm) {
+        @media only screen and (min-width: viewports.$screen-sm) {
             font-size: 19px;
         }
 
         &:hover {
-            border-color: var(--color-primary, $color-primary);
+            border-color: var(--color-primary, colors.$color-primary);
         }
 
         &:focus {
-            border-color: var(--color-primary, $color-primary);
-            outline-color: var(--color-focus, $color-focus);
+            border-color: var(--color-primary, colors.$color-primary);
+            outline-color: var(--color-focus, colors.$color-focus);
         }
 
         &[disabled],
@@ -49,9 +57,9 @@
         }
 
         &.hasErrors {
-            border-color: var(--color-error, $color-error);
+            border-color: var(--color-error, colors.$color-error);
             &:focus {
-                border-color: var(--color-error, $color-error);
+                border-color: var(--color-error, colors.$color-error);
                 outline-color: #b8565d;
             }
             &[disabled],

package/dist/components/Theme.js

@@ -22,7 +22,7 @@ var _Paper = _interopRequireDefault(require("./Paper"));
 var _RadioButtonList = _interopRequireDefault(require("./RadioButtonList"));
 var _RadioButtonListItem = _interopRequireDefault(require("./RadioButtonListItem"));
 var _ThemeModule = _interopRequireDefault(require("./Theme.module.scss"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const Theme = _ref => {
@@ -35,7 +35,7 @@ const Theme = _ref => {
       return _react.default.createElement(_react.Fragment, {
         key: color
       }, _react.default.createElement("div", null, color), _react.default.createElement("div", {
-        className: "".concat(_ThemeModule.default.color, " ").concat(colorClassName)
+        className: `${_ThemeModule.default.color} ${colorClassName}`
       }));
     });
   };

package/dist/components/Theme.module.scss

@@ -1,4 +1,6 @@
-@import "../style/global.scss";
+// Variables
+@use "../style/abstracts/variables/colors";
+@use "../style/abstracts/variables/viewports";
 
 section:not(:last-of-type) {
   margin: 24px 0;
@@ -16,86 +18,86 @@ section:last-of-type {
     padding: 8px;
     text-align: right;
     width: 50%;
-    @media screen and (min-width: $screen-sm) {
+    @media screen and (min-width: viewports.$screen-sm) {
       width: 25%;
     }
-    @media screen and (min-width: $screen-md) {
+    @media screen and (min-width: viewports.$screen-md) {
       width: 16.6%;
     }
   }
 
   .color {
     &.bodyBackground {
-      background-color: var(--color-body-background, $color-body-background);
+      background-color: var(--color-body-background, colors.$color-body-background);
     }
     &.defaultText {
-      background-color: var(--color-default-text, $color-default-text);
+      background-color: var(--color-default-text, colors.$color-default-text);
     }
     &.primaryText {
-      background-color: var(--color-primary-text, $color-primary-text);
+      background-color: var(--color-primary-text, colors.$color-primary-text);
     }
     &.secondaryText {
-      background-color: var(--color-border, $color-border);
+      background-color: var(--color-border, colors.$color-border);
     }
     &.primary {
-      background-color: var(--color-primary, $color-primary);
+      background-color: var(--color-primary, colors.$color-primary);
     }
     &.primaryLight {
-      background-color: var(--color-primary-light, $color-primary-light);
+      background-color: var(--color-primary-light, colors.$color-primary-light);
     }
     &.primaryXLight {
-      background-color: var(--color-primary-x-light, $color-primary-x-light);
+      background-color: var(--color-primary-x-light, colors.$color-primary-x-light);
     }
     &.primaryContrast {
-      background-color: var(--color-primary-contrast, $color-primary-contrast);
+      background-color: var(--color-primary-contrast, colors.$color-primary-contrast);
     }
     &.secondary {
-      background-color: var(--color-secondary, $color-secondary);
+      background-color: var(--color-secondary, colors.$color-secondary);
     }
     &.secondaryLight {
-      background-color: var(--color-secondary-light, $color-secondary-light);
+      background-color: var(--color-secondary-light, colors.$color-secondary-light);
     }
     &.secondaryXLight {
-      background-color: var(--color-secondary-x-light, $color-secondary-x-light);
+      background-color: var(--color-secondary-x-light, colors.$color-secondary-x-light);
     }
     &.secondaryContrast {
-      background-color: var(--color-secondary-contrast, $color-secondary-contrast);
+      background-color: var(--color-secondary-contrast, colors.$color-secondary-contrast);
     }
     &.focus {
-      background-color: var(--color-focus, $color-focus);
+      background-color: var(--color-focus, colors.$color-focus);
     }
     &.defaultBackground {
-      background-color: var(--color-default-background, $color-default-background);
+      background-color: var(--color-default-background, colors.$color-default-background);
     }
     &.secondaryBackground {
-      background-color: var(--color-secondary-background, $color-secondary-background);
+      background-color: var(--color-secondary-background, colors.$color-secondary-background);
     }
     &.success {
-      background-color: var(--color-success, $color-success);
+      background-color: var(--color-success, colors.$color-success);
     }
     &.successLight {
-      background-color: var(--color-success-light, $color-success-light);
+      background-color: var(--color-success-light, colors.$color-success-light);
     }
     &.successXLight {
-      background-color: var(--color-success-x-light, $color-success-x-light);
+      background-color: var(--color-success-x-light, colors.$color-success-x-light);
     }
     &.warning {
-      background-color: var(--color-warning, $color-warning);
+      background-color: var(--color-warning, colors.$color-warning);
     }
     &.warningLight {
-      background-color: var(--color-warning-light, $color-warning-light);
+      background-color: var(--color-warning-light, colors.$color-warning-light);
     }
     &.warningXLight {
-      background-color: var(--color-warning-x-light, $color-warning-x-light);
+      background-color: var(--color-warning-x-light, colors.$color-warning-x-light);
     }
     &.error {
-      background-color: var(--color-error, $color-error);
+      background-color: var(--color-error, colors.$color-error);
     }
     &.errorLight {
-      background-color: var(--color-error-light, $color-error-light);
+      background-color: var(--color-error-light, colors.$color-error-light);
     }
     &.errorXLight {
-      background-color: var(--color-error-x-light, $color-error-x-light);
+      background-color: var(--color-error-x-light, colors.$color-error-x-light);
     }
   }
 }

package/dist/components/ThemeProvider.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _helpers = require("../functions/helpers");
 var _ThemeProviderModule = _interopRequireDefault(require("!!raw-loader!sass-loader!./ThemeProvider.module.scss"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const ThemeProvider = _ref => {
   let {
     theme,
@@ -15,7 +15,7 @@ const ThemeProvider = _ref => {
   } = _ref;
   const cssVariablesFromTheme = (0, _helpers.getCssVariablesFromTheme)(theme);
   const cssColorVariablesString = (0, _helpers.stringifyCssColorVariables)(cssVariablesFromTheme);
-  (0, _helpers.addGlobalStylesheet)("theme-provider", ":root {".concat(cssColorVariablesString, "} ").concat(_ThemeProviderModule.default));
+  (0, _helpers.addGlobalStylesheet)("theme-provider", `:root {${cssColorVariablesString}} ${_ThemeProviderModule.default}`);
   return children;
 };
 ThemeProvider.propTypes = {

package/dist/components/ThemeProvider.module.scss

@@ -1,4 +1,6 @@
-@import "../style/abstracts/all";
+// Variables
+@use "../style/abstracts/variables/colors";
+@use "../style/abstracts/variables/typography";
 
 *,
 *::before,
@@ -7,9 +9,9 @@
 }
 body {
     margin: 0;
-    font-family: $default-font;
-    background-color: var(--color-body-background, $color-body-background);
-    color: var(--color-default-text, $color-default-text);
+    font-family: typography.$default-font;
+    background-color: var(--color-body-background, colors.$color-body-background);
+    color: var(--color-default-text, colors.$color-default-text);
     font-size: 16px;
     line-height: 24px;
     -webkit-font-smoothing: antialiased;
@@ -18,5 +20,5 @@ body {
     letter-spacing: 0.01em;
 }
 a {
-    color: var(--color-primary, $color-primary);
+    color: var(--color-primary, colors.$color-primary);
 }

package/dist/components/ToggleNavigationButton.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ToggleNavigationButtonModule = _interopRequireDefault(require("./ToggleNavigationButton.module.scss"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const ToggleNavigationButton = _ref => {
   let {
     id,