dibk-design 4.4.2 → 5.0.0

package/dist/components/ContentBox.module.scss

@@ -7,7 +7,7 @@
     width: 100%;
     display: block;
     &.link {
-        color: $color-primary;
+        color: var(--color-primary, $color-primary);
         @include transition(filter 0.3s);
         &:hover,
         &:focus {
@@ -18,18 +18,18 @@
         }
     }
     &.default {
-        background-color: $color-default-background;
+        background-color: var(--color-default-background, $color-default-background);
         .content,
         .title {
             color: $color-default-text;
         }
     }
     &.secondary {
-        background-color: $color-secondary-background;
-        color: $color-default-text;
+        background-color: var(--color-secondary-background, $color-secondary-background);
+        color: var(--color-default-text, $color-default-text);
         .content,
         .title {
-            color: $color-default-text;
+            color: var(--color-default-text, $color-default-text);
         }
     }
 
@@ -41,7 +41,7 @@
             font-style: normal;
             line-height: 1.4;
             padding-bottom: 10px;
-            border-bottom: 1px solid #e5e3e1;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.075);
         }
         &.large {
             font-family: $default-font;

package/dist/components/Dialog.module.scss

@@ -55,7 +55,7 @@
         .closeButton {
             background: none;
             border: none;
-            color: $color-primary;
+            color: var(--color-primary, $color-primary);
             display: inline-block;
             position: absolute;
             right: 7px;

package/dist/components/DragAndDropFileInput.js

@@ -99,8 +99,7 @@ const DragAndDropFileInput = props => {
     "data-transaction-name": props["data-transaction-name"]
   })) : null) : null, props.contentOnly ? _react.default.createElement("span", null, renderValueAsText(props.selectedFileName, props.defaultContent)) : "", _react.default.createElement(_ErrorMessage.default, {
     id: getErrorElementId(),
-    content: props.errorMessage,
-    theme: props.theme
+    content: props.errorMessage
   }));
 };
 DragAndDropFileInput.propTypes = {
@@ -118,13 +117,12 @@ DragAndDropFileInput.propTypes = {
   hasErrors: _propTypes.default.bool,
   errorMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
   required: _propTypes.default.bool,
-  "data-transaction-name": _propTypes.default.string,
-  theme: _propTypes.default.object
+  "data-transaction-name": _propTypes.default.string
 };
 DragAndDropFileInput.defaultProps = {
   label: "",
   contentOnly: false,
-  buttonColor: "default",
+  buttonColor: "primary",
   defaultContent: "",
   hasErrors: false,
   errorMessage: "",

package/dist/components/DragAndDropFileInput.module.scss

@@ -11,7 +11,7 @@
 
     .dragAndDropContainer {
         @include transition(all 0.1s ease-in-out);
-        border: 2px dashed $color-secondary-light;
+        border: 2px dashed var(--color-secondary-light, $color-secondary-light);
         border-radius: 20px;
         width: 100%;
         padding: 20px;
@@ -27,8 +27,8 @@
         }
 
         &.highlighted {
-            background: $color-secondary-x-light;
-            border-color: $color-primary;
+            background: var(--color-secondary-x-light, $color-secondary-x-light);
+            border-color: var(--color-primary, $color-primary);
         }
     }
 }

package/dist/components/ErrorBox.js

@@ -6,20 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _theme = require("../functions/theme");
 var _helpers = require("../functions/helpers");
 var _ErrorBoxModule = _interopRequireDefault(require("./ErrorBox.module.scss"));
 var _infoSign = _interopRequireDefault(require("../assets/svg/info-sign.svg?url"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const ErrorBox = props => {
-  const getThemeErrorBoxStyle = () => {
-    return {
-      borderColor: props.type === "error" ? (0, _theme.getThemePaletteBackgroundColor)(props.theme, "error") : (0, _theme.getThemePaletteBackgroundColor)(props.theme, "warning")
-    };
-  };
   return _react.default.createElement("div", {
-    className: (0, _helpers.classNameArrayToClassNameString)([_ErrorBoxModule.default.errorBoxContainer, _ErrorBoxModule.default[props.type], props.fullScreen && _ErrorBoxModule.default.fullScreen]),
-    style: getThemeErrorBoxStyle()
+    className: (0, _helpers.classNameArrayToClassNameString)([_ErrorBoxModule.default.errorBoxContainer, _ErrorBoxModule.default[props.type], props.fullScreen && _ErrorBoxModule.default.fullScreen])
   }, _react.default.createElement("div", {
     className: (0, _helpers.classNameArrayToClassNameString)([_ErrorBoxModule.default.errorBox, props.fullScreen && _ErrorBoxModule.default.fullScreen])
   }, _react.default.createElement("img", {
@@ -29,7 +22,6 @@ const ErrorBox = props => {
   }), props.children));
 };
 ErrorBox.propTypes = {
-  theme: _propTypes.default.object,
   type: _propTypes.default.oneOf(["warning", "error"]),
   fullScreen: _propTypes.default.bool
 };

package/dist/components/ErrorBox.module.scss

@@ -14,12 +14,12 @@
     position: relative;
     line-height: 24px;
     &.warning {
-        background-color: $color-warning-x-light;
-        border-color: $color-warning;
+        background-color: var(--color-warning-x-light, $color-warning-x-light);
+        border-color: var(--color-warning, $color-warning);
     }
     &.error {
-        background-color: $color-error-x-light;
-        border-color: $color-error;
+        background-color: var(--color-error-x-light, $color-error-x-light);
+        border-color: var(--color-error, $color-error);
     }
     &.fullScreen {
         border-bottom-width: 4px;

package/dist/components/ErrorMessage.js

@@ -6,24 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _theme = require("../functions/theme");
 var _ErrorMessageModule = _interopRequireDefault(require("./ErrorMessage.module.scss"));
 var _errorSign = _interopRequireDefault(require("../assets/svg/error-sign.svg?url"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const ErrorMessage = props => {
   var _props$content;
-  const getThemeErrorMessageStyle = theme => {
-    return {
-      color: (0, _theme.getThemePaletteBackgroundColor)(theme, "warning")
-    };
-  };
   const getErrorElementProps = () => {
     var _props$id;
     return {
       id: !!((_props$id = props.id) !== null && _props$id !== void 0 && _props$id.length) ? props.id : null,
-      className: _ErrorMessageModule.default.errorMessage,
-      style: getThemeErrorMessageStyle(props.theme)
+      className: _ErrorMessageModule.default.errorMessage
     };
   };
   return props !== null && props !== void 0 && (_props$content = props.content) !== null && _props$content !== void 0 && _props$content.length ? _react.default.createElement("span", _extends({
@@ -36,8 +29,7 @@ const ErrorMessage = props => {
 };
 ErrorMessage.propTypes = {
   id: _propTypes.default.string,
-  content: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
-  theme: _propTypes.default.object
+  content: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))])
 };
 ErrorMessage.defaultProps = {
   content: ""

package/dist/components/Footer.module.scss

@@ -1,7 +1,7 @@
 @import "../style/global.scss";
 
 .footer {
-  background-color: $color-primary;
+  background-color: var(--color-primary, $color-primary);
   padding: 16px 0;
   text-align: right;
   * {

package/dist/components/Header.js

@@ -12,12 +12,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const Header = props => {
   var _props$htmlTag, _props$content;
   const bigClass = props.big ? _HeaderModule.default.bigHeader : "";
-  const themeClass = props.theme ? _HeaderModule.default.hasTheme : "";
   const htmlTag = (_props$htmlTag = props.htmlTag) !== null && _props$htmlTag !== void 0 && _props$htmlTag.length ? props.htmlTag : "h".concat(props.size);
   const headerClass = _HeaderModule.default.header;
   const headerSizeClass = _HeaderModule.default["size-".concat(props.size)];
   let headerElement = _react.default.createElement(htmlTag, {
-    className: (0, _helpers.classNameArrayToClassNameString)([headerClass, headerSizeClass, bigClass, themeClass]),
+    className: (0, _helpers.classNameArrayToClassNameString)([headerClass, headerSizeClass, bigClass]),
     id: props.id || null,
     htmlFor: props.htmlFor || null
   }, !!((_props$content = props.content) !== null && _props$content !== void 0 && _props$content.length) ? props.content : props.children);
@@ -31,7 +30,6 @@ Header.propTypes = {
   size: _propTypes.default.oneOf([1, 2, 3, 4, 5]),
   big: _propTypes.default.bool,
   htmlTag: _propTypes.default.string,
-  theme: _propTypes.default.object,
   htmlFor: _propTypes.default.string
 };
 Header.defaultProps = {

package/dist/components/Header.module.scss

@@ -6,9 +6,7 @@
 		font-weight: normal;
 		line-height: 1.4;
 		font-style: normal;
-		&:not(.hasTheme) {
-			color: $color-primary;
-		}
+		color: var(--color-heading-text, $color-heading-text);
 		&.size-1 {
 			font-family: $default-font;
 			font-style: normal;

package/dist/components/InfoBox.js

@@ -5,29 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _theme = require("../functions/theme");
 var _InfoBoxModule = _interopRequireDefault(require("./InfoBox.module.scss"));
 var _infoSign = _interopRequireDefault(require("../assets/svg/info-sign.svg?url"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const InfoBox = props => {
-  const getThemeInfoBoxStyle = () => {
-    return {
-      borderColor: (0, _theme.getThemePaletteBackgroundColor)(props.theme, "secondary-light")
-    };
-  };
   return _react.default.createElement("div", {
-    className: _InfoBoxModule.default.infoBox,
-    style: getThemeInfoBoxStyle()
+    className: _InfoBoxModule.default.infoBox
   }, _react.default.createElement("img", {
     src: _infoSign.default,
     alt: "",
     className: _InfoBoxModule.default.infoSign
   }), props.children);
 };
-InfoBox.propTypes = {
-  theme: _propTypes.default.object
-};
 InfoBox.defaultProps = {
   children: ""
 };

package/dist/components/InfoBox.module.scss

@@ -9,7 +9,7 @@
 
 .infoBox {
     background-color: #fff;
-    border: 1px solid $color-secondary-light;
+    border: 1px solid var(--color-secondary-light, $color-secondary-light);
     padding: 24px 24px 24px calc(1.2em + 48px);
     font-family: $default-font;
     animation: 1000ms cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal none running messageIn;
@@ -22,8 +22,8 @@
         height: 24px;
         display: inline-block;
         vertical-align: middle;
-        background-color: $color-warning-x-light;
-        border-left-color: $color-warning;
+        background-color: var(--color-warning-x-light, $color-warning-x-light);
+        border-left-color: var(--color-warning, $color-warning);
     }
     h1,
     h2,

package/dist/components/InputField.js

@@ -9,7 +9,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Button = _interopRequireDefault(require("./Button"));
 var _Label = _interopRequireDefault(require("./Label"));
 var _ErrorMessage = _interopRequireDefault(require("./ErrorMessage"));
-var _theme = require("../functions/theme");
 var _generators = require("../functions/generators");
 var _helpers = require("../functions/helpers");
 var _asterisk = _interopRequireDefault(require("../assets/svg/asterisk.svg?url"));
@@ -17,12 +16,6 @@ var _InputFieldModule = _interopRequireDefault(require("./InputField.module.scss
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const InputField = props => {
   var _props$width;
-  const getThemeErrorInputStyle = theme => {
-    return {
-      boxShadow: "0 0 3px ".concat((0, _theme.getThemePaletteBackgroundColor)(theme, "warning")),
-      borderColor: (0, _theme.getThemePaletteBackgroundColor)(theme, "warning")
-    };
-  };
   const formatDate = inputDate => {
     if (!inputDate) {
       return null;
@@ -66,7 +59,6 @@ const InputField = props => {
   const defaultValue = props.defaultValue ? props.defaultValue : props.value || null;
   const defaultKey = props.elementKey || null;
   const styleRules = {
-    ...(props.hasErrors ? getThemeErrorInputStyle(props.theme) : null),
     ...(((_props$width = props.width) === null || _props$width === void 0 ? void 0 : _props$width.length) && {
       maxWidth: props.width
     })
@@ -89,12 +81,10 @@ const InputField = props => {
       document.getElementById(props.id).click();
     },
     content: props.buttonContent,
-    type: "button",
-    theme: props.theme
+    type: "button"
   }) : null) : null), !props.contentOnly ? _react.default.createElement("input", getInputElementProps(defaultValue, defaultKey, styleRules)) : _react.default.createElement("span", null, renderValueAsText(props.value || props.defaultValue, props.defaultContent)), _react.default.createElement(_ErrorMessage.default, {
     id: getErrorElementId(),
-    content: props.errorMessage,
-    theme: props.theme
+    content: props.errorMessage
   }));
 };
 InputField.propTypes = {
@@ -111,7 +101,7 @@ InputField.propTypes = {
   elementKey: _propTypes.default.string,
   label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
   contentOnly: _propTypes.default.bool,
-  buttonColor: _propTypes.default.oneOf(["default", "primary"]),
+  buttonColor: _propTypes.default.oneOf(["primary", "secondary"]),
   buttonContent: _propTypes.default.string,
   selectedFileName: _propTypes.default.string,
   dateFormat: _propTypes.default.string,
@@ -121,7 +111,6 @@ InputField.propTypes = {
   "aria-autocomplete": _propTypes.default.oneOf(["none", "inline", "list", "both"]),
   hasErrors: _propTypes.default.bool,
   errorMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
-  theme: _propTypes.default.object,
   noMargin: _propTypes.default.bool
 };
 InputField.defaultProps = {

package/dist/components/InputField.module.scss

@@ -31,32 +31,32 @@
         font-family: inherit;
         font-size: 18px;
         box-sizing: border-box;
-        border: 1px solid $color-primary;
+        border: 1px solid var(--color-primary, $color-primary);
 
         &:hover {
-            border-color: $color-primary;
+            border-color: var(--color-primary, $color-primary);
         }
 
         &:focus {
-            border-color: $color-primary;
+            border-color: var(--color-primary, $color-primary);
             outline: $color-focus solid 3px;
         }
 
         &[disabled],
         &[readonly] {
-            background-color: $color-secondary-x-light;
+            background-color: var(--color-secondary-x-light, $color-secondary-x-light);
             cursor: default;
         }
 
         &.hasErrors {
-            border-color: $color-error;
+            border-color: var(--color-error, $color-error);
             &:focus {
-                border-color: $color-error;
+                border-color: var(--color-error, $color-error);
                 outline-color: #b8565d;
             }
             &[disabled],
             &[readonly] {
-                background-color: $color-secondary-x-light;
+                background-color: var(--color-secondary-x-light, $color-secondary-x-light);
                 cursor: default;
                 border-color: #afaba8;
             }

package/dist/components/NavigationBar.js

@@ -22,18 +22,6 @@ const NavigationBar = props => {
   const toggleList = () => {
     setActive(!active);
   };
-  const getNavigationBarThemeStyle = theme => {
-    return {
-      backgroundColor: (0, _theme.getThemeNavigationBarBackgroundColor)(theme),
-      color: (0, _theme.getThemeNavigationBarTextColor)(theme)
-    };
-  };
-  const getListItemThemeStyle = theme => {
-    return {
-      color: (0, _theme.getThemeNavigationBarTextColor)(theme),
-      borderBottomColor: (0, _theme.getThemeNavigationBarTextColor)(theme)
-    };
-  };
   const getLogoThemeStyle = theme => {
     return {
       padding: (0, _theme.getThemeLogoPadding)(theme)
@@ -42,15 +30,12 @@ const NavigationBar = props => {
   const renderPrimaryList = function () {
     let items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : props.primaryListItems;
     let iteration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-    const listItemThemeStyle = getListItemThemeStyle(props.theme);
     let listItems = items.map((listItem, i) => {
       let key = iteration + "-" + i;
       if (listItem.listItems !== undefined) {
         return _react.default.createElement("li", {
           key: key
-        }, _react.default.createElement("span", {
-          style: listItemThemeStyle
-        }, listItem.name), renderPrimaryList(listItem.listItems, iteration + 1));
+        }, _react.default.createElement("span", null, listItem.name), renderPrimaryList(listItem.listItems, iteration + 1));
       } else {
         return _react.default.createElement(_NavigationBarListItem.default, {
           listItem: listItem,
@@ -107,10 +92,6 @@ const NavigationBar = props => {
       title: logoLinkTitle
     }), renderLogoElement()) : renderLogoElement();
   };
-  const navigationBarThemeStyle = getNavigationBarThemeStyle(props.theme);
-  const hamburgerIconLineStyle = {
-    backgroundColor: (0, _theme.getThemeNavigationBarTextColor)(props.theme)
-  };
   const hasListItems = !!((_props$primaryListIte = props.primaryListItems) !== null && _props$primaryListIte !== void 0 && _props$primaryListIte.length) || !!((_props$secondaryListI = props.secondaryListItems) !== null && _props$secondaryListI !== void 0 && _props$secondaryListI.length);
   return _react.default.createElement("div", {
     className: (0, _helpers.classNameArrayToClassNameString)([props.compact && _NavigationBarModule.default.compact, _NavigationBarModule.default.navigationBarContainer])
@@ -121,8 +102,7 @@ const NavigationBar = props => {
   }, _react.default.createElement("span", {
     id: "main-content-link-text"
   }, "Hopp til hovedinnhold")), _react.default.createElement("div", {
-    className: _NavigationBarModule.default.navigationBar,
-    style: navigationBarThemeStyle
+    className: _NavigationBarModule.default.navigationBar
   }, _react.default.createElement("div", {
     className: _NavigationBarModule.default.logoContainer
   }, renderLogo(props.logoLink, props.logoLinkTitle)), !!props.children && _react.default.createElement("div", {
@@ -136,20 +116,16 @@ const NavigationBar = props => {
   }, !props.compact && "Meny", _react.default.createElement("span", {
     className: _NavigationBarModule.default.hamburgerIcon
   }, _react.default.createElement("span", {
-    className: _NavigationBarModule.default.line,
-    style: hamburgerIconLineStyle
+    className: _NavigationBarModule.default.line
   }), _react.default.createElement("span", {
-    className: _NavigationBarModule.default.line,
-    style: hamburgerIconLineStyle
+    className: _NavigationBarModule.default.line
   }), _react.default.createElement("span", {
-    className: _NavigationBarModule.default.line,
-    style: hamburgerIconLineStyle
+    className: _NavigationBarModule.default.line
   })))), hasListItems && _react.default.createElement(_react.Fragment, null, _react.default.createElement("div", {
     className: "".concat(_NavigationBarModule.default.dropdownContainer, " ").concat(active ? _NavigationBarModule.default.active : "")
   }, _react.default.createElement("div", {
     id: "main-menu-dropdown",
-    className: _NavigationBarModule.default.dropdown,
-    style: navigationBarThemeStyle
+    className: _NavigationBarModule.default.dropdown
   }, renderPrimaryList(), renderSecondaryList()))));
 };
 NavigationBar.propTypes = {

package/dist/components/NavigationBar.module.scss

@@ -33,7 +33,7 @@
     }
     &:not(.compact) {
         position: relative;
-        background-color: $body-background;
+        background-color: var(--color-body-background, $color-body-background);
         padding: 5px;
         @media only screen and (min-width: $screen-sm) {
             padding: 20px;
@@ -42,12 +42,12 @@
             padding-bottom: 40px;
         }
         .mainContentLink {
-            background-color: $body-background;
-            color: $color-primary;
+            background-color: var(--color-body-background, $color-body-background);
+            color: var(--color-primary, $color-primary);
             &:focus,
             &:active {
                 span {
-                    outline-color: $color-primary;
+                    outline-color: var(--color-primary, $color-primary);
                 }
             }
         }
@@ -72,10 +72,10 @@
             }
         }
         .logoContainer {
-            width: 85px;
+            width: var(--size-logo-small-width, 85px);
             margin-bottom: 0;
             @media only screen and (min-width: $screen-sm) {
-                width: 100px;
+                width: var(--size-logo-small-width, 100px);
             }
         }
         .childElements {
@@ -94,11 +94,11 @@
             right: 10px;
             height: auto;
             margin: auto;
-            border: 1px solid $color-primary;
+            border: 1px solid var(--color-primary, $color-primary);
             padding: 10px 20px;
             padding-right: 54px;
             background-color: transparent;
-            color: $color-primary;
+            color: var(--color-primary, $color-primary);
             font-size: 20px;
             font-weight: 400;
             cursor: pointer;
@@ -118,7 +118,7 @@
                 height: 4px;
                 width: 24px;
                 border-radius: 3px;
-                background-color: $color-primary;
+                background-color: var(--color-primary, $color-primary);
                 &::before,
                 &::after {
                     content: "";
@@ -127,7 +127,7 @@
                     left: 0;
                     right: 0;
                     border-radius: 3px;
-                    background-color: $color-primary;
+                    background-color: var(--color-primary, $color-primary);
                     transition: transform 0.3s ease-out;
                 }
                 &::before {
@@ -136,19 +136,17 @@
                 &::after {
                     bottom: -8px;
                 }
-                .line {
-                }
             }
             &:hover,
             &:focus,
             &:active {
                 color: #fff;
-                background-color: $color-primary;
+                background-color: var(--color-primary, $color-primary);
                 .hamburgerIcon {
-                    background-color: #fff;
+                    background-color: var(--color-primary-contrast, $color-primary-contrast);
                     &::before,
                     &::after {
-                        background-color: #fff;
+                        background-color: var(--color-primary-contrast, $color-primary-contrast);
                     }
                 }
             }
@@ -170,7 +168,7 @@
             width: 100%;
             overflow: hidden;
             transition: all $default-transition;
-            background-color: $body-background;
+            background-color: var(--color-body-background, $color-body-background);
             &.active {
                 display: block;
             }
@@ -213,7 +211,7 @@
                         line-height: 1.56;
                         font-weight: 600;
                         text-decoration: underline;
-                        color: $color-primary;
+                        color: var(--color-primary, $color-primary);
                         cursor: pointer;
                         &:hover {
                             text-decoration: none;
@@ -299,18 +297,18 @@
         z-index: 1;
 
         .mainContentLink {
-            background-color: $color-primary;
-            color: #fff;
+            background-color: var(--color-primary, $color-primary);
+            color: var(--color-primary-contrast, $color-primary-contrast);
             &:focus,
             &:active {
                 span {
-                    outline-color: #fff;
+                    outline-color: var(--color-primary-contrast, $color-primary-contrast);
                 }
             }
         }
 
         .navigationBar {
-            background-color: $color-primary;
+            background-color: var(--color-primary, $color-primary);
             height: 54px;
             display: flex;
             justify-content: space-between;
@@ -339,7 +337,7 @@
 
         .childElements {
             display: block;
-            color: #fff;
+            color: var(--color-primary-contrast, $color-primary-contrast);
             flex: 1;
         }
 
@@ -356,7 +354,7 @@
                 width: 30px;
                 display: block;
                 .line {
-                    background-color: #fff;
+                    background-color: var(--color-primary-contrast, $color-primary-contrast);
                     height: 2px;
                     margin: 6px 0;
                     display: block;
@@ -379,7 +377,7 @@
 
         .dropdown {
             @include box-shadow(0 2px 4px -2px rgba(0, 0, 0, 0.2));
-            background-color: $color-primary;
+            background-color: var(--color-primary, $color-primary);
             z-index: 2;
             > ul.primaryList {
                 list-style: none;
@@ -388,13 +386,13 @@
                 li {
                     a,
                     span {
-                        color: #fff;
+                        color: var(--color-primary-contrast, $color-primary-contrast);
                         text-transform: uppercase;
                         text-decoration: none;
                         font-family: $default-font;
                         padding: 10px 0;
                         display: block;
-                        border-bottom: 1px solid $color-primary;
+                        border-bottom: 1px solid var(--color-primary, $color-primary);
                         font-size: 14px;
                         line-height: 1.6;
                     }
@@ -404,7 +402,7 @@
                         li {
                             a,
                             span {
-                                color: #fff;
+                                color: var(--color-primary-contrast, $color-primary-contrast);
                                 text-transform: none;
                                 text-decoration: none;
                                 font-family: $default-font;