dibk-design 4.5.0 → 5.0.1

package/dist/assets/svg/arbeidstilsynet-logo.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 668.4 171.17"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#11c1b0;}</style></defs><title>Artboard 1</title><circle class="cls-1" cx="75.91" cy="79.24" r="68.12"/><path d="M161.61,155.16l21.66-50.54h6.86l21.66,50.54H201.61L196.84,144H176.56l-4.76,11.19Zm18.63-19.86h12.85l-6.43-14.95Z"/><path d="M237.05,128.44a13,13,0,0,0-3.39-.36,10.39,10.39,0,0,0-8.52,5.06v22h-9.39v-35h9v3.54c2.09-2.6,5.92-4.26,10.18-4.26a19.08,19.08,0,0,1,3.18.29Z"/><path d="M243.91,155.16V103.89h9.39v18.77a15.52,15.52,0,0,1,9.89-3.25c9.53,0,17.18,7.94,17.18,18.27A18.8,18.8,0,0,1,275.89,150a17.61,17.61,0,0,1-13.21,5.92,14.65,14.65,0,0,1-9.75-3.54v2.82Zm9.39-12.27a10.25,10.25,0,0,0,8.45,4.33,9.15,9.15,0,0,0,9.24-9.53c0-5.06-3.54-9.6-9-9.6a10.76,10.76,0,0,0-8.66,4.33Z"/><path d="M317.4,149.6A19,19,0,0,1,303,155.88c-10.47,0-18.34-7.22-18.34-18.19,0-9.75,6.64-18.27,17-18.27,9.68,0,16.53,8.16,16.53,17.91a15.48,15.48,0,0,1-.22,2.67H293.79a9.19,9.19,0,0,0,9.46,8.3,12.39,12.39,0,0,0,8.81-4Zm-8.74-16.46a7,7,0,0,0-6.93-6.14,7.6,7.6,0,0,0-7.51,6.14Z"/><path d="M329.45,101.72a6,6,0,1,1-6.14,6A6,6,0,0,1,329.45,101.72Zm4.69,53.43h-9.39v-35h9.39Z"/><path d="M368.08,155.16v-2.82a14.65,14.65,0,0,1-9.75,3.54A17.61,17.61,0,0,1,345.12,150a18.8,18.8,0,0,1-4.48-12.27c0-10.33,7.65-18.27,17.19-18.27a15.52,15.52,0,0,1,9.89,3.25V103.89h9.39v51.26Zm-.36-22.74a10.77,10.77,0,0,0-8.66-4.33c-5.49,0-9,4.55-9,9.6a9.15,9.15,0,0,0,9.24,9.53,10.25,10.25,0,0,0,8.45-4.33Z"/><path d="M387.56,144.47a14.75,14.75,0,0,0,9.6,3.46c2.53,0,4.48-1.23,4.48-3,0-5.27-17-3.39-17-14.66,0-6.71,6.5-10.9,13.43-10.9,4.55,0,9.53,1.73,11.84,3.54l-4.4,6.79a11.81,11.81,0,0,0-6.71-2.38c-2.6,0-4.77,1-4.77,2.82,0,4.55,17,2.75,17,14.87,0,6.71-6.57,10.83-13.94,10.83A24.22,24.22,0,0,1,383,151.18Z"/><path d="M443.15,155.16a23.14,23.14,0,0,1-5.85.72c-5.63,0-9.75-1.88-12.13-5.05-1.8-2.38-2.6-5.49-2.6-10.47V128.08h-9.75v-7.94h9.75v-9.75H432v9.75h11.55v7.94H432v13.36c0,2.17.36,3.46,1.16,4.4s2.45,1.73,4.76,1.73a22.8,22.8,0,0,0,3.83-.36Z"/><path d="M455.78,101.72a6,6,0,1,1-6.14,6A6,6,0,0,1,455.78,101.72Zm4.69,53.43h-9.39v-35h9.39Z"/><path d="M479.25,155.16h-9.39V103.89h9.39Z"/><path d="M489.71,144.47a14.75,14.75,0,0,0,9.6,3.46c2.53,0,4.48-1.23,4.48-3,0-5.27-17-3.39-17-14.66,0-6.71,6.5-10.9,13.43-10.9,4.55,0,9.53,1.73,11.84,3.54l-4.4,6.79a11.81,11.81,0,0,0-6.71-2.38c-2.6,0-4.77,1-4.77,2.82,0,4.55,17,2.75,17,14.87,0,6.71-6.57,10.83-13.94,10.83a24.22,24.22,0,0,1-14.08-4.69Z"/><path d="M521.69,172.49l9.67-20.87L515.7,120.14H526l10.25,21,9.46-21h9.89l-24.12,52.35Z"/><path d="M560.31,155.16v-35h9V123a15.45,15.45,0,0,1,9.89-3.54A15.78,15.78,0,0,1,591.36,125c2.31,2.75,3.61,6.28,3.61,12.27v17.83h-9.39V136.6c0-3.46-.79-5.27-2.09-6.57a7.38,7.38,0,0,0-5.27-2,11.18,11.18,0,0,0-8.52,4.33v22.74Z"/><path d="M633.45,149.6a19,19,0,0,1-14.37,6.28c-10.47,0-18.34-7.22-18.34-18.19,0-9.75,6.64-18.27,17-18.27,9.68,0,16.53,8.16,16.53,17.91a15.48,15.48,0,0,1-.22,2.67H609.84a9.19,9.19,0,0,0,9.46,8.3,12.39,12.39,0,0,0,8.81-4Zm-8.74-16.46a7,7,0,0,0-6.93-6.14,7.6,7.6,0,0,0-7.51,6.14Z"/><path d="M666.44,155.16a23.16,23.16,0,0,1-5.85.72c-5.63,0-9.75-1.88-12.13-5.05-1.8-2.38-2.6-5.49-2.6-10.47V128.08h-9.75v-7.94h9.75v-9.75h9.39v9.75H666.8v7.94H655.25v13.36c0,2.17.36,3.46,1.16,4.4s2.45,1.73,4.76,1.73a22.8,22.8,0,0,0,3.83-.36Z"/><path class="cls-2" d="M84.69,34.34c.52,1.69,0,3.34-1.25,3.74a5.9,5.9,0,0,1-1.21.29,3.83,3.83,0,0,0,.73.17,3.85,3.85,0,1,0,1-7.63,4,4,0,0,0-3.71,1.58A6.54,6.54,0,0,1,81.55,32C82.77,31.6,84.17,32.65,84.69,34.34Z"/><path class="cls-2" d="M69.13,33.52c-1.33.07-2.86,1-4.72,2.84-.14.14,2.56-1.41,3.24-.69a2.17,2.17,0,0,0,1.91.73c1-.08,1.56-.58,1.5-1.44A1.72,1.72,0,0,0,69.13,33.52Z"/><path class="cls-2" d="M75.91,3.33A75.91,75.91,0,0,0,0,79.24v75.91H75.91a75.91,75.91,0,0,0,0-151.82ZM126.2,80.78c-.47-5.58-2.41-6.54-2.19-5.26a22.38,22.38,0,0,1,.3,7.45c-.48,3.69-5.49,9-5.49,9s-2.9-4.41-2.5-8.31,4.75-7.76,2.27-6.45c-2.11,1.12-3.52,4.84-3.52,4.84s-1.08-1.29-.59-4.41,5.31-7,5.87-7.55a2.72,2.72,0,0,0,.34-2.46,7.4,7.4,0,0,0-6.18-4.57,9.58,9.58,0,0,0-10.89,8,9,9,0,0,0,1.2,5.75,50.28,50.28,0,0,0,4.51,6.24,28.94,28.94,0,0,1,4.1,6,9.45,9.45,0,0,1,.65,5.16A10.72,10.72,0,0,1,102,103.39c-.95-.12-1.89-.27-2.8-.45a8.77,8.77,0,0,0,3.35,5.1c2.4,1.85,5,1.25,7.19,2.47s2.6,2.11,2.6,2.11-2.94-.61-3.05.23,1.89.94,3.09,1.32a3.44,3.44,0,0,1,1.79,1.7s-1.83-.78-1.55,0c0,.06.94,1.42,1.76,2.62s1.46,2.43.27,4.2a58.43,58.43,0,0,1-15.16,9.78,12.21,12.21,0,0,1-.82-6.66c.4-2.4,1.7-3.3,3.51-3.36s3.41.31,4.52-1a1.74,1.74,0,0,0,.34-1.25,23.71,23.71,0,0,0-3.9-3.47c-2.15-1.36-2.93-2.54-6.89-2.43s-12.09,1.94-16.34-2.95a12.44,12.44,0,0,1-2.41-4.25,14.24,14.24,0,0,1-1.58,1h0c-.42.23-2.38,1.09-2.38,1.09-2.61,1-5.64,1.74-7.6,2.29-2.61.74-3.66,1.51-4.25,3-.66,1.71.58,4.31.58,4.31a12.83,12.83,0,0,1-2.12,3.21,18,18,0,0,1-4.42,3.13s2.35-5,0-2.2a10.21,10.21,0,0,1-4.61,3.37c1.2-1.4,1.45-3.4,0-1.72s-4.82,2.49-4.82,2.49c1.48-1,2.78-2.91,1.25-2.25a15.19,15.19,0,0,1-5,1,3.43,3.43,0,0,1-1.75-.3,58.76,58.76,0,0,1-12.52-13,16.23,16.23,0,0,1,7.21-2.09c2.43-.07,2.61.75,3.44,2.36.91,1.76,1.21,6,1.21,6s2.21,1.35,6.52.82c3-.73,4.7-1.91,4.86-2.42s-2.33-7.71.6-12.09a11.22,11.22,0,0,1,2.75-2.86h0a19.59,19.59,0,0,1,4-2.13c-7.61-2.83-9.26-7.62-9.78-8.79-.85-1.91-.5,4-.5,4a11.43,11.43,0,0,1-1.86-6.72h0a26.88,26.88,0,0,1,.32-3.3,26.65,26.65,0,0,1-7.11-1.07s5.58-2.23-.18-1.29c-5.51.9-8.45-.85-8.45-.85.95-.22,4.32-2.32.82-1.5-5.25,1.23-7.85-1.47-7.85-1.47,1.46.24,4.47-.35,2.5-1.17a28.94,28.94,0,0,1-4-2.29c-.27-.16-4.17-2.83-4.29-5.63a57.77,57.77,0,0,1,4.4-14.71A13.17,13.17,0,0,1,27.84,60a3.65,3.65,0,0,1-.64,5c-1.3,1.25-2.68,2.14-2.68,3.42,0,.76.67,1.37,1.35,1.83.35.23.69.42.94.57a78,78,0,0,0,17.7,4.56A18.41,18.41,0,0,1,48.18,68l-.08-.09a22.3,22.3,0,0,1-5-8.09s5.39,2.66.84-1c-4.36-3.5-5-6.85-5-6.85.8.55,4.61,1.66,1.67-.39-4.43-3.08-4.16-6.82-4.16-6.82.8,1.25,3.25,3.09,2.55,1.08a34.89,34.89,0,0,1-1-4.45c-.07-.28-.13-.58-.2-.92-.32-1.77-.73-3.8.69-5.81A58.43,58.43,0,0,1,51.14,26.5a12.78,12.78,0,0,1,1,6.81,3.54,3.54,0,0,1-3.71,3.29c-1.8.1-3.2-.25-4.29,1.07-.76.93,0,2.63.23,3.44v0a79.25,79.25,0,0,0,9.47,17.71,14.57,14.57,0,0,1,7-2.62c1.55-.15,4.24-.51,1.9-1.08-2.56-.62-5.82.14-2.79-1.16,3.69-1.59,8.6.33,10.13,0s1.85-3.17,1.91-4.53h-.34c-1.77.15-6.48.61-8.17,1.36a11.37,11.37,0,0,1-1.12-4.29,2.4,2.4,0,0,0,.69.56,6.89,6.89,0,0,0,3-.12,3.1,3.1,0,0,0,2.51-1.77,2.33,2.33,0,0,0-1.09-2.67,4.65,4.65,0,0,0-3.22.44l-.65.41c-1.72,1.09-1.35,2.31-1.35,2.31s-1.64-1-2.81-4.88c0,0-2.16-1.55-2.13-2.53a22.76,22.76,0,0,1,5.93-4.15,13.29,13.29,0,0,1,7.06-4.5s2.44-5.39,10.08-5.88c3.07-.2-3.35,1.53-4.14,2.42-1.49,1.68,3.29-1.94,10.53-.91l.38.05c.33.05,1.27.27,1.41.31l.73.22c7.15,2.4,13.45,10.61,12.4,21.12a17.11,17.11,0,0,0-3.15-6.76c-2.3-3.26-3-2.83-1.07.77,1.79,3.37,3.76,10.13,1.57,15.47a33.26,33.26,0,0,1-2.74,4.79A15.57,15.57,0,0,0,96,53.25c-.91-3.48-1.64-3.33-1.16.3.45,3.41,0,9.75-3.6,13.54a38,38,0,0,1-3.67,3,14.18,14.18,0,0,0,2-6.67c.3-3.29-.38-3.39-1.09-.1-.64,3-2.85,8-6.78,10.29a43.45,43.45,0,0,1-6.11,2.45h0A21.78,21.78,0,0,0,78,84.63a18.71,18.71,0,0,0,4.41,5c.35.27.7.54,1.08.81,0,0,3,.59,5.59,1.07s7.1,2.61,9.35,6.23h0A10.5,10.5,0,0,0,102.14,99c3.86.5,7.59-1.6,8.07-5.38a5.93,5.93,0,0,0-.35-3.18,25.35,25.35,0,0,0-3.54-5.16,52,52,0,0,1-4.71-6.58A12.39,12.39,0,0,1,100,70.79a13,13,0,0,1,14.65-11,13.23,13.23,0,0,1,9.93,6.67C128.5,72.73,126.2,80.78,126.2,80.78ZM56.07,45.18a4,4,0,0,1,5.1.86v0c-1.88-.72-2.94.15-5.69,2.12s-5.24-1-5.24-1v0C52.11,47.84,53.18,46.93,56.07,45.18Z"/></svg>

package/dist/components/Accordion.module.scss

@@ -75,18 +75,18 @@
     width: 100%;
     display: block;
     &.default {
-        background-color: $color-default-background;
+        background-color: var(--color-default-background, $color-default-background);
         .panel span,
         .content {
-            color: $color-default-text;
+            color: var(--color-default-text, $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);
         .panel span,
         .content {
-            color: $color-default-text;
+            color: var(--color-default-text, $color-default-text);
         }
     }
 
@@ -110,7 +110,7 @@
             padding: 15px 30px;
         }
         &:focus-visible {
-            outline-color: $color-primary;
+            outline-color: var(--color-primary, $color-primary);
             outline-style: auto;
             outline-width: 2px;
             outline-offset: 0px;

package/dist/components/Button.js

@@ -6,10 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _theme = require("../functions/theme");
+var _reactRouterDom = require("react-router-dom");
 var _helpers = require("../functions/helpers");
 var _ButtonModule = _interopRequireDefault(require("./Button.module.scss"));
-var _reactRouterDom = require("react-router-dom");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 && Object.prototype.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; }
@@ -26,14 +25,6 @@ const Button = props => {
         return "";
     }
   };
-  const getThemeStyle = (theme, color) => {
-    return {
-      backgroundColor: (0, _theme.getThemePaletteBackgroundColor)(theme, color),
-      color: (0, _theme.getThemePaletteTextColor)(theme, color),
-      borderColor: (0, _theme.getThemePaletteBorderColor)(theme, color),
-      borderWidth: (0, _theme.getThemePaletteBorderColor)(theme, color) ? "1px" : "0"
-    };
-  };
   let buttonProps = {
     ...props,
     "aria-invalid": props.hasErrors || null,
@@ -48,8 +39,7 @@ const Button = props => {
   delete buttonProps.arrow;
   delete buttonProps.noMargin;
   const buttonColor = (props === null || props === void 0 ? void 0 : props.inputType) === "radio" ? props.defaultChecked ? "primary" : "default" : props.color;
-  const themeStyle = props.theme ? getThemeStyle(props.theme, buttonColor) : null;
-  const className = (0, _helpers.classNameArrayToClassNameString)([_ButtonModule.default.button, _ButtonModule.default[buttonColor], _ButtonModule.default[props.size], getArrowClass(props.arrow), props.theme && _ButtonModule.default.hasTheme, props.noHover || (props === null || props === void 0 ? void 0 : props.inputType) === "radio" ? _ButtonModule.default.noHover : null, props.rounded && _ButtonModule.default.rounded, props.hasErrors && _ButtonModule.default.hasErrors, props.disabled && _ButtonModule.default.disabled, props.noMargin && _ButtonModule.default.noMargin]);
+  const className = (0, _helpers.classNameArrayToClassNameString)([_ButtonModule.default.button, _ButtonModule.default[buttonColor], _ButtonModule.default[props.size], getArrowClass(props.arrow), props.noHover || (props === null || props === void 0 ? void 0 : props.inputType) === "radio" ? _ButtonModule.default.noHover : null, props.rounded && _ButtonModule.default.rounded, props.hasErrors && _ButtonModule.default.hasErrors, props.disabled && _ButtonModule.default.disabled, props.noMargin && _ButtonModule.default.noMargin]);
   const renderReactLinkElements = childElements => {
     const childElementsthroughFragments = (0, _helpers.cloneThroughFragments)(childElements);
     return childElementsthroughFragments.map((childElement, index) => {
@@ -58,7 +48,6 @@ const Button = props => {
         var _childElement$props2, _childElement$props3;
         const childElementCopy = _react.default.cloneElement(childElement, {
           className: className,
-          style: themeStyle,
           key: "button-".concat(index),
           to: !buttonProps.disabled && childElement !== null && childElement !== void 0 && (_childElement$props2 = childElement.props) !== null && _childElement$props2 !== void 0 && _childElement$props2.to ? childElement === null || childElement === void 0 || (_childElement$props3 = childElement.props) === null || _childElement$props3 === void 0 ? void 0 : _childElement$props3.to : null
         });
@@ -66,8 +55,7 @@ const Button = props => {
       } else {
         return _react.default.createElement("button", _extends({}, buttonProps, {
           key: "button-".concat(index),
-          className: className,
-          style: themeStyle
+          className: className
         }), props.content || childElement.props.children);
       }
     });
@@ -75,7 +63,6 @@ const Button = props => {
   if (props.inputType === "button") {
     return _react.default.createElement("input", _extends({}, buttonProps, {
       className: className,
-      style: themeStyle,
       type: "button",
       value: props.content
     }));
@@ -83,29 +70,25 @@ const Button = props => {
     return _react.default.createElement("label", {
       className: className
     }, _react.default.createElement("input", _extends({}, buttonProps, {
-      style: themeStyle,
       type: "radio"
     })), props.content);
   } else if ((_props$href2 = props.href) !== null && _props$href2 !== void 0 && _props$href2.length && !props.disabled) {
     return _react.default.createElement("a", _extends({}, buttonProps, {
-      className: className,
-      style: themeStyle
+      className: className
     }), props.content || props.children);
   } else if ((props === null || props === void 0 || (_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.type) === _reactRouterDom.Link) {
     return _react.default.createElement(_react.Fragment, null, renderReactLinkElements(_react.default.Children.toArray(props.children)));
   } else {
     return _react.default.createElement("button", _extends({}, buttonProps, {
-      className: className,
-      style: themeStyle
+      className: className
     }), props.content || props.children);
   }
 };
 Button.propTypes = {
   content: _propTypes.default.string,
-  color: _propTypes.default.oneOf(["default", "primary"]),
+  color: _propTypes.default.oneOf(["primary", "secondary"]),
   size: _propTypes.default.oneOf(["small", "regular"]),
   arrow: _propTypes.default.oneOf(["none", "left", "right"]),
-  theme: _propTypes.default.object,
   disabled: _propTypes.default.bool,
   inputType: _propTypes.default.oneOf(["button", "radio"]),
   name: _propTypes.default.string,
@@ -120,7 +103,7 @@ Button.propTypes = {
   noMargin: _propTypes.default.bool
 };
 Button.defaultProps = {
-  color: "default",
+  color: "primary",
   size: "regular",
   disabled: false,
   hasErrors: false,

package/dist/components/Button.module.scss

@@ -39,7 +39,7 @@
   font-family: $default-font;
   border-style: solid;
   border-width: 1px;
-  border-color: $color-primary;
+  border-color: var(--color-primary, $color-primary);
   cursor: pointer;
   line-height: 1;
   position: relative;
@@ -57,25 +57,13 @@
     margin-bottom: 8px;
   }
 
-  &.hasTheme {
-    &:hover,
-    &:focus,
-    &:focus-within {
-      filter: brightness(90%);
-    }
-
-    &:active {
-      filter: brightness(85%);
-    }
-  }
-
   &:focus {
     outline-offset: 3px;
   }
 
   &:focus-visible,
   &:focus-within {
-    outline-color: $color-primary;
+    outline-color: var(--color-primary, $color-primary);
   }
 
   &.regular {
@@ -92,103 +80,88 @@
     }
   }
 
-  &.default {
-    background-color: #fff;
-    color: $color-primary-text;
-    border-color: $color-secondary-light;
-    &:not(.hasTheme) {
-      &:hover:not(.noHover),
-      &:focus-visible {
-        background-color: $color-secondary-x-light;
-        color: $color-primary-text;
-        &:after,
-        &:before {
-          border-color: $color-secondary-light;
-        }
+  &.primary {
+    background-color: var(--color-primary, $color-primary);
+    color: var(--color-primary-contrast, $color-primary-contrast);
+    &:hover:not(.noHover),
+    &:focus-visible {
+      background-color: var(--color-primary-light, $color-primary-light);
+      border-color: var(--color-primary-light, $color-primary-light);
+      color: var(--color-primary-contrast, $color-primary-contrast);
+      &:after,
+      &:before {
+        border-color: var(--color-primary-light, $color-primary-light);
       }
-      &:active:not(.noHover),
-      &:active:hover:not(.noHover) {
-        background-color: $color-secondary-light;
-        color: $color-primary-text;
-        &:after,
-        &:before {
-          border-color: $color-secondary-light;
-        }
+    }
+    &:active:not(.noHover),
+    &:active:hover:not(.noHover) {
+      background-color: var(--color-primary-x-light, $color-primary-x-light);
+      border-color: var(--color-primary-x-light, $color-primary-x-light);
+      color: var(--color-primary-contrast, $color-primary-contrast);
+      &:after,
+      &:before {
+        border-color: var(--color-primary-x-light, $color-primary-x-light);
       }
     }
   }
 
-  &.primary {
-    background-color: $color-primary;
-    color: #fff;
-    &:not(.hasTheme) {
-      &:hover:not(.noHover),
-      &:focus-visible {
-        background-color: $color-primary-light;
-        border-color: $color-primary-light;
-        color: #fff;
-        &:after,
-        &:before {
-          border-color: $color-primary-light;
-        }
+  &.secondary {
+    background-color: var(--color-secondary, $color-secondary);
+    color: var(--color-secondary-contrast, $color-secondary-contrast);
+    border-color: var(--color-secondary-x-light, $color-secondary-x-light);
+    &:hover:not(.noHover),
+    &:focus-visible {
+      background-color: var(--color-secondary-x-light, $color-secondary-x-light);
+      color: var(--color-secondary-contrast, $color-secondary-contrast);
+      &:after,
+      &:before {
+        border-color: var(--color-secondary-x-light, $color-secondary-x-light);
       }
-      &:active:not(.noHover),
-      &:active:hover:not(.noHover) {
-        background-color: $color-primary-x-light;
-        border-color: $color-primary-x-light;
-        color: #fff;
-        &:after,
-        &:before {
-          border-color: $color-primary-x-light;
-        }
+    }
+    &:active:not(.noHover),
+    &:active:hover:not(.noHover) {
+      background-color: var(--color-secondary-light, $color-secondary-light);
+      color: var(--color-secondary-contrast, $color-secondary-contrast);
+      &:after,
+      &:before {
+        border-color: var(--color-secondary-light, $color-secondary-light);
       }
     }
   }
 
   &:disabled,
   &.disabled {
-    &.hasTheme {
-      opacity: 0.6;
+    &.primary,
+    &.secondary {
+      background-color: var(--color-primary, $color-primary);
       cursor: default;
-      &:hover,
-      &:focus,
-      &:focus-within,
-      &:active {
-        opacity: 0.6;
-        cursor: default;
-      }
-    }
-    &:not(.hasTheme) {
-      &.default,
-      &.primary {
-        background-color: $color-secondary-light;
+      color: var(--color-primary-contrast, $color-primary-contrast);
+      border: 1px solid var(--color-primary, $color-primary);
+      opacity: 0.2;
+      filter: saturate(3);
+      &:hover:not(.noHover),
+      &:focus-visible,
+      &:active:not(.noHover),
+      &:active:hover:not(.noHover) {
+        background-color: var(--color-primary, $color-primary);
         cursor: default;
-        color: #fff;
-        border: 1px solid $color-secondary-light;
-        &:hover:not(.noHover),
-        &:focus-visible,
-        &:active:not(.noHover),
-        &:active:hover:not(.noHover) {
-          background-color: $color-secondary-light;
-          cursor: default;
-          color: #fff;
-          border: 1px solid $color-secondary-light;
-          &:before,
-          &:after {
-            border-color: $color-secondary-light;
-          }
-        }
+        color: var(--color-primary-contrast, $color-primary-contrast);
+        border: 1px solid var(--color-primary, $color-primary);
         &:before,
         &:after {
-          border-color: $color-secondary-light;
+          border-color: var(--color-primary-contrast, $color-primary-contrast);
         }
       }
+      &:before,
+      &:after {
+        border-color: var(--color-secondary-light, $color-secondary-light);
+      }
     }
   }
 
   &.hasErrors {
-    @include box-shadow(0 0 2px 1px $color-error);
-    border-color: $color-error;
+    @include box-shadow(0 0 2px 1px var(--color-error, $color-error));
+    border-color: var(--color-error, $color-error);
   }
 
   &.rounded {
@@ -211,6 +184,16 @@
         left: 1em;
       }
     }
+    &.primary {
+      &:before {
+        border-color: var(--color-primary-contrast, $color-primary-contrast);
+      }
+    }
+    &.secondary {
+      &:before {
+        border-color: var(--color-secondary-contrast, $color-secondary-contrast);
+      }
+    }
 
     &:hover:not(.noHover),
     &:focus-visible,
@@ -219,14 +202,14 @@
       &:before {
         @include animation(pushprev 0.8s linear infinite);
       }
-      &.default {
+      &.primary {
         &:before {
-          border-color: $color-primary;
+          border-color: var(--color-primary-contrast, $color-primary-contrast);
         }
       }
-      &.primary {
+      &.secondary {
         &:before {
-          border-color: #fff;
+          border-color: var(--color-secondary-contrast, $color-secondary-contrast);
         }
       }
     }
@@ -241,7 +224,7 @@
       width: 0.5rem;
       height: 0.5rem;
       vertical-align: middle;
-      border: 2px solid white;
+      border-style: solid;
       border-width: 2px 2px 0 0;
       margin-left: 1em;
       @media only screen and (min-width: $screen-sm) {
@@ -249,6 +232,17 @@
       }
     }
 
+    &.primary {
+      &:after {
+        border-color: var(--color-primary-contrast, $color-primary-contrast);
+      }
+    }
+    &.secondary {
+      &:after {
+        border-color: var(--color-secondary-contrast, $color-secondary-contrast);
+      }
+    }
+
     &:hover:not(.noHover),
     &:focus-visible,
     &:active:not(.noHover),
@@ -256,14 +250,14 @@
       &:after {
         @include animation(pushnext 0.8s linear infinite);
       }
-      &.default {
+      &.primary {
         &:after {
-          border-color: $color-primary;
+          border-color: var(--color-primary-contrast, $color-primary-contrast);
         }
       }
-      &.primary {
+      &.secondary {
         &:after {
-          border-color: #fff;
+          border-color: var(--color-secondary-contrast, $color-secondary-contrast);
         }
       }
     }

package/dist/components/CheckBoxIcon.js

@@ -6,7 +6,6 @@ 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 _CheckBoxIconModule = _interopRequireDefault(require("./CheckBoxIcon.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const CheckBoxIcon = props => {
@@ -15,13 +14,6 @@ const CheckBoxIcon = props => {
     width: props.size,
     fontSize: props.size
   };
-  if (props.theme && props.checked) {
-    inlineStyle = {
-      ...inlineStyle,
-      [!props.hasErrors && "color"]: (0, _theme.getThemePaletteBackgroundColor)(props.theme, "primary"),
-      [!props.hasErrors && props.showBox && "boxShadow"]: "0 0 0 1px ".concat((0, _theme.getThemePaletteBackgroundColor)(props.theme, "primary"))
-    };
-  }
   const checkBoxIconProps = {
     className: "".concat(_CheckBoxIconModule.default.checkBoxIcon, " ").concat(props.checked ? _CheckBoxIconModule.default.checked : "", " ").concat(props.disabled ? _CheckBoxIconModule.default.disabled : "", " ").concat(props.showBox ? _CheckBoxIconModule.default.showBox : "", " ").concat(props.hasErrors ? _CheckBoxIconModule.default.hasErrors : ""),
     style: inlineStyle
@@ -36,7 +28,6 @@ CheckBoxIcon.propTypes = {
   checked: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
   showBox: _propTypes.default.bool,
-  theme: _propTypes.default.object,
   hasErrors: _propTypes.default.bool,
   checkmarkCharacter: _propTypes.default.string
 };

package/dist/components/CheckBoxIcon.module.scss

@@ -20,26 +20,26 @@
         margin-top: 2px;
         background: white;
         &:not(.hasErrors) {
-            @include box-shadow(0 0 0 1px $color-primary);
+            @include box-shadow(0 0 0 1px var(--color-primary, $color-primary));
         }
         &.hasErrors {
-            @include box-shadow(0 0 0 1px $color-error);
+            @include box-shadow(0 0 0 1px var(--color-error, $color-error));
         }
     }
 
     &.checked {
-        color: $color-primary;
+        color: var(--color-primary, $color-primary);
         &.hasErrors {
             span {
-                color: $color-error;
+                color: var(--color-error, $color-error);
             }
         }
         &.showBox {
             &:not(.hasErrors) {
-                @include box-shadow(0 0 0 1px $color-primary);
+                @include box-shadow(0 0 0 1px var(--color-primary, $color-primary));
             }
             &.hasErrors {
-                @include box-shadow(0 0 0 1px $color-error);
+                @include box-shadow(0 0 0 1px var(--color-error, $color-error));
             }
         }
     }

package/dist/components/CheckBoxInput.js

@@ -18,7 +18,6 @@ const CheckBoxInput = props => {
   const iconProps = {
     checked: props.checked,
     disabled: props.disabled,
-    theme: props.theme,
     showBox: !props.contentOnly,
     hasErrors: props.contentOnly && props.hasErrors,
     checkmarkCharacter: props.checkmarkCharacter
@@ -54,7 +53,6 @@ CheckBoxInput.propTypes = {
   onChange: _propTypes.default.func.isRequired,
   contentOnly: _propTypes.default.bool,
   hasErrors: _propTypes.default.bool,
-  theme: _propTypes.default.object,
   checkmarkCharacter: _propTypes.default.string,
   "aria-controls": _propTypes.default.string,
   "aria-describedby": _propTypes.default.string

package/dist/components/CheckBoxInput.module.scss

@@ -23,7 +23,7 @@
     .labelText {
         font-size: 16px;
         line-height: 24px;
-        color: $color-primary;
+        color: var(--color-primary, $color-primary);
     }
 
     &.disabled {
@@ -34,13 +34,13 @@
 
     &.hasErrors {
         span {
-            color: $color-error;
+            color: var(--color-error, $color-error);
         }
     }
 
     &:focus-within {
         outline-width: 2px;
-        outline-color: $color-primary;
+        outline-color: var(--color-primary, $color-primary);
         outline-style: auto;
         outline-offset: 1px;
     }

package/dist/components/CheckBoxListItem.js

@@ -11,7 +11,7 @@ var _helpers = require("../functions/helpers");
 var _CheckBoxListItemModule = _interopRequireDefault(require("./CheckBoxListItem.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const CheckBoxListItem = props => {
-  const listItemClassNameArray = [_CheckBoxListItemModule.default.checkBoxListItem, props.checked ? _CheckBoxListItemModule.default.checked : null, props.disabled ? _CheckBoxListItemModule.default.disabled : null, props.compact ? _CheckBoxListItemModule.default.compact : null, props.contentOnly ? _CheckBoxListItemModule.default.contentOnly : null, props.hasErrors ? _CheckBoxListItemModule.default.hasErrors : null, props.theme && _CheckBoxListItemModule.default.hasTheme];
+  const listItemClassNameArray = [_CheckBoxListItemModule.default.checkBoxListItem, props.checked ? _CheckBoxListItemModule.default.checked : null, props.disabled ? _CheckBoxListItemModule.default.disabled : null, props.compact ? _CheckBoxListItemModule.default.compact : null, props.contentOnly ? _CheckBoxListItemModule.default.contentOnly : null, props.hasErrors ? _CheckBoxListItemModule.default.hasErrors : null];
   const listItemClassNameString = (0, _helpers.classNameArrayToClassNameString)(listItemClassNameArray);
   const inputProps = {
     onChange: props.onChange,
@@ -25,7 +25,6 @@ const CheckBoxListItem = props => {
     "aria-describedby": props["aria-describedby"],
     id: props.id,
     name: props.name,
-    theme: props.theme,
     checkmarkCharacter: props.checkmarkCharacter
   };
   return _react.default.createElement("div", {
@@ -41,7 +40,6 @@ CheckBoxListItem.propTypes = {
   name: _propTypes.default.string,
   onChange: _propTypes.default.func.isRequired,
   contentOnly: _propTypes.default.bool,
-  theme: _propTypes.default.object,
   compact: _propTypes.default.bool,
   hasErrors: _propTypes.default.bool,
   checkmarkCharacter: _propTypes.default.string,

package/dist/components/CheckBoxListItem.module.scss

@@ -20,7 +20,7 @@
     color: #000;
 
     &:not(.contentOnly):not(.compact) {
-        border: 1px solid $color-secondary-light;
+        border: 1px solid var(--color-secondary-light, $color-secondary-light);
         background: white;
         margin-bottom: 8px;
         label {
@@ -43,15 +43,15 @@
     }
 
     &.checked:not(.contentOnly):not(.compact):not(.disabled):not(.hasTheme) {
-        background-color: $color-secondary-light;
+        background-color: var(--color-secondary-light, $color-secondary-light);
     }
 
     &:not(.checked):not(.contentOnly):not(.compact):not(.disabled):not(.hasTheme) {
         &:hover {
-            background-color: $color-secondary-x-light;
+            background-color: var(--color-secondary-x-light, $color-secondary-x-light);
         }
         &:focus-within {
-            background-color: $color-secondary-x-light;
+            background-color: var(--color-secondary-x-light, $color-secondary-x-light);
         }
     }
 

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;