dibk-design 4.5.0 → 5.0.0

package/dist/components/Theme.module.scss

@@ -1,36 +1,101 @@
 @import "../style/global.scss";
 
-* {
-  color: $color-default-text;
+section:not(:last-of-type) {
+  margin: 24px 0;
 }
 
-a {
-  color: $color-primary;
-}
-
-img {
-  max-width: 200px;
-  max-height: 150px;
+section:last-of-type {
+  margin: 24px 0 0 0;
 }
 
 .colorPalette {
   display: flex;
   flex-wrap: wrap;
+  font-size: 12px;
+  > div {
+    padding: 8px;
+    text-align: right;
+    width: 50%;
+    @media screen and (min-width: $screen-sm) {
+      width: 25%;
+    }
+    @media screen and (min-width: $screen-md) {
+      width: 16.6%;
+    }
+  }
 
   .color {
-    width: 20%;
-    min-width: 120px;
-    text-align: center;
-    line-height: 3em;
-
-    &.default {
-      background-color: $color-default-background;
-      color: $color-default-text;
+    &.bodyBackground {
+      background-color: var(--color-body-background, $color-body-background);
     }
-
-    &.secodary {
-      background-color: $color-secondary-background;
-      color: $color-default-text;
+    &.defaultText {
+      background-color: var(--color-default-text, $color-default-text);
+    }
+    &.primaryText {
+      background-color: var(--color-primary-text, $color-primary-text);
+    }
+    &.secondaryText {
+      background-color: var(--color-secondary-text, $color-secondary-text);
+    }
+    &.primary {
+      background-color: var(--color-primary, $color-primary);
+    }
+    &.primaryLight {
+      background-color: var(--color-primary-light, $color-primary-light);
+    }
+    &.primaryXLight {
+      background-color: var(--color-primary-x-light, $color-primary-x-light);
+    }
+    &.primaryContrast {
+      background-color: var(--color-primary-contrast, $color-primary-contrast);
+    }
+    &.secondary {
+      background-color: var(--color-secondary, $color-secondary);
+    }
+    &.secondaryLight {
+      background-color: var(--color-secondary-light, $color-secondary-light);
+    }
+    &.secondaryXLight {
+      background-color: var(--color-secondary-x-light, $color-secondary-x-light);
+    }
+    &.secondaryContrast {
+      background-color: var(--color-secondary-contrast, $color-secondary-contrast);
+    }
+    &.focus {
+      background-color: var(--color-focus, $color-focus);
+    }
+    &.defaultBackground {
+      background-color: var(--color-default-background, $color-default-background);
+    }
+    &.secondaryBackground {
+      background-color: var(--color-secondary-background, $color-secondary-background);
+    }
+    &.success {
+      background-color: var(--color-success, $color-success);
+    }
+    &.successLight {
+      background-color: var(--color-success-light, $color-success-light);
+    }
+    &.successXLight {
+      background-color: var(--color-success-x-light, $color-success-x-light);
+    }
+    &.warning {
+      background-color: var(--color-warning, $color-warning);
+    }
+    &.warningLight {
+      background-color: var(--color-warning-light, $color-warning-light);
+    }
+    &.warningXLight {
+      background-color: var(--color-warning-x-light, $color-warning-x-light);
+    }
+    &.error {
+      background-color: var(--color-error, $color-error);
+    }
+    &.errorLight {
+      background-color: var(--color-error-light, $color-error-light);
+    }
+    &.errorXLight {
+      background-color: var(--color-error-x-light, $color-error-x-light);
     }
   }
 }

package/dist/components/ThemeProvider.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 }; }
+const ThemeProvider = _ref => {
+  let {
+    theme,
+    children
+  } = _ref;
+  const cssVariablesFromTheme = (0, _helpers.getCssVariablesFromTheme)(theme);
+  const cssColorVariablesString = (0, _helpers.stringifyCssColorVariables)(cssVariablesFromTheme);
+  (0, _helpers.addGlobalStylesheet)("theme-provider", ":root {".concat(cssColorVariablesString, "} ").concat(_ThemeProviderModule.default));
+  return children;
+};
+ThemeProvider.propTypes = {
+  theme: _propTypes.default.object
+};
+var _default = exports.default = ThemeProvider;

package/dist/components/ThemeProvider.module.scss

@@ -0,0 +1,22 @@
+@import "../style/abstracts/all";
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+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-size: 16px;
+    line-height: 24px;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: normal;
+    letter-spacing: 0.01em;
+}
+a {
+    color: var(--color-primary, $color-primary);
+}

package/dist/components/WizardNavigation/Step.module.scss

@@ -1,7 +1,7 @@
 @import "../../style/global.scss";
 
 .wizard-topnav .wizard-topnav-item.finished .wizard-topnav-item-content:before {
-  background-color: $color-primary;
+  background-color: var(--color-primary, $color-primary);
 }
 
 .wizardTopnavItem {
@@ -49,7 +49,7 @@
       display: block;
       text-align: center;
       background-color: #e2e1e0;
-      color: $color-default-text;
+      color: var(--color-default-text, $color-default-text);
       position: relative;
       font-size: 20px;
       line-height: 1.75em;
@@ -62,7 +62,7 @@
     .stepName {
       display: block;
       text-align: left;
-      color: $color-default-text;
+      color: var(--color-default-text, $color-default-text);
       flex: 1;
       flex-basis: min-content;
       @media only screen and (min-width: $screen-sm) {
@@ -73,17 +73,17 @@
   }
   &.active {
     :local(.stepNumber) {
-      background-color: $color-primary;
+      background-color: var(--color-primary, $color-primary);
       color: #fff;
     }
   }
   &.finished {
     .wizardTopnavItemContent {
       &:before {
-        background-color: $color-primary;
+        background-color: var(--color-primary, $color-primary);
       }
       .stepNumber {
-        background-color: $color-primary;
+        background-color: var(--color-primary, $color-primary);
         color: #fff;
       }
     }
@@ -91,10 +91,10 @@
   &.hasErrors {
     .wizardTopnavItemContent {
       &:before {
-        background-color: $color-warning;
+        background-color: var(--color-warning, $color-warning);
       }
       .stepNumber {
-        background-color: $color-warning;
+        background-color: var(--color-warning, $color-warning);
         color: #fff;
       }
     }

package/dist/functions/helpers.js

@@ -3,13 +3,61 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setFocusToElement = exports.getFocusableElementsInsideElement = exports.cloneThroughFragments = exports.classNameArrayToClassNameString = exports.addFocusTrapInsideElement = void 0;
+exports.stringifyCssColorVariables = exports.setFocusToElement = exports.getFocusableElementsInsideElement = exports.getCssVariablesFromTheme = exports.getCssSizeVariablesFromTheme = exports.getCssColorVariablesFromTheme = exports.cloneThroughFragments = exports.classNameArrayToClassNameString = exports.camelCaseToKebabCase = exports.addGlobalStylesheet = exports.addFocusTrapInsideElement = void 0;
 var _react = require("react");
 const classNameArrayToClassNameString = classNameArray => {
   var _classNameArray$filte;
   return (classNameArray === null || classNameArray === void 0 || (_classNameArray$filte = classNameArray.filter(className => className)) === null || _classNameArray$filte === void 0 ? void 0 : _classNameArray$filte.join(" ")) || "";
 };
 exports.classNameArrayToClassNameString = classNameArrayToClassNameString;
+const camelCaseToKebabCase = string => {
+  return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+};
+exports.camelCaseToKebabCase = camelCaseToKebabCase;
+const getCssColorVariablesFromTheme = theme => {
+  var _Object$entries;
+  return !!(theme !== null && theme !== void 0 && theme.colors) && !!((_Object$entries = Object.entries(theme === null || theme === void 0 ? void 0 : theme.colors)) !== null && _Object$entries !== void 0 && _Object$entries.length) && Object.entries(theme === null || theme === void 0 ? void 0 : theme.colors).reduce((acc, _ref) => {
+    let [key, value] = _ref;
+    if (key !== null && key !== void 0 && key.length && value !== null && value !== void 0 && value.length) {
+      acc["--color-".concat(camelCaseToKebabCase(key))] = value;
+    }
+    return acc;
+  }, {});
+};
+exports.getCssColorVariablesFromTheme = getCssColorVariablesFromTheme;
+const getCssSizeVariablesFromTheme = theme => {
+  var _Object$entries2;
+  return !!(theme !== null && theme !== void 0 && theme.sizes) && !!((_Object$entries2 = Object.entries(theme === null || theme === void 0 ? void 0 : theme.sizes)) !== null && _Object$entries2 !== void 0 && _Object$entries2.length) && Object.entries(theme === null || theme === void 0 ? void 0 : theme.sizes).reduce((acc, _ref2) => {
+    let [key, value] = _ref2;
+    if (key !== null && key !== void 0 && key.length && value !== null && value !== void 0 && value.length) {
+      acc["--size-".concat(camelCaseToKebabCase(key))] = value;
+    }
+    return acc;
+  }, {});
+};
+exports.getCssSizeVariablesFromTheme = getCssSizeVariablesFromTheme;
+const getCssVariablesFromTheme = theme => {
+  return {
+    ...getCssColorVariablesFromTheme(theme),
+    ...getCssSizeVariablesFromTheme(theme)
+  };
+};
+exports.getCssVariablesFromTheme = getCssVariablesFromTheme;
+const addGlobalStylesheet = (styleElementId, styles) => {
+  var _document$getElementB;
+  const style = document.createElement("style");
+  style.setAttribute("id", styleElementId);
+  style.textContent = styles;
+  (_document$getElementB = document.getElementById(styleElementId)) === null || _document$getElementB === void 0 || _document$getElementB.remove();
+  document.head.appendChild(style);
+};
+exports.addGlobalStylesheet = addGlobalStylesheet;
+const stringifyCssColorVariables = colorVariables => {
+  return Object.keys(colorVariables).reduce((css, key) => {
+    return "".concat(css).concat(key, ": ").concat(colorVariables[key], ";");
+  }, "");
+};
+exports.stringifyCssColorVariables = stringifyCssColorVariables;
 const cloneThroughFragments = children => {
   return _react.Children.map(children, c => {
     if ((0, _react.isValidElement)(c)) {

package/dist/functions/theme.js

@@ -3,32 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getThemeTextColor = exports.getThemePaletteTextColor = exports.getThemePaletteBorderColor = exports.getThemePaletteBackgroundColor = exports.getThemeNavigationBarTextColor = exports.getThemeNavigationBarBackgroundColor = exports.getThemeLogoPadding = exports.getThemeLogo = exports.getThemeLinkColor = exports.getThemeAppName = void 0;
-const getThemePaletteBackgroundColor = (theme, color) => {
-  var _theme$colors;
-  return (theme === null || theme === void 0 || (_theme$colors = theme.colors) === null || _theme$colors === void 0 || (_theme$colors = _theme$colors.palette) === null || _theme$colors === void 0 || (_theme$colors = _theme$colors[color]) === null || _theme$colors === void 0 ? void 0 : _theme$colors.background) || null;
-};
-exports.getThemePaletteBackgroundColor = getThemePaletteBackgroundColor;
-const getThemePaletteTextColor = (theme, color) => {
-  var _theme$colors2;
-  return (theme === null || theme === void 0 || (_theme$colors2 = theme.colors) === null || _theme$colors2 === void 0 || (_theme$colors2 = _theme$colors2.palette) === null || _theme$colors2 === void 0 || (_theme$colors2 = _theme$colors2[color]) === null || _theme$colors2 === void 0 ? void 0 : _theme$colors2.text) || null;
-};
-exports.getThemePaletteTextColor = getThemePaletteTextColor;
-const getThemePaletteBorderColor = (theme, color) => {
-  var _theme$colors3;
-  return (theme === null || theme === void 0 || (_theme$colors3 = theme.colors) === null || _theme$colors3 === void 0 || (_theme$colors3 = _theme$colors3.palette) === null || _theme$colors3 === void 0 || (_theme$colors3 = _theme$colors3[color]) === null || _theme$colors3 === void 0 ? void 0 : _theme$colors3.border) || null;
-};
-exports.getThemePaletteBorderColor = getThemePaletteBorderColor;
-const getThemeNavigationBarBackgroundColor = theme => {
-  var _theme$colors4;
-  return (theme === null || theme === void 0 || (_theme$colors4 = theme.colors) === null || _theme$colors4 === void 0 || (_theme$colors4 = _theme$colors4.navigationBar) === null || _theme$colors4 === void 0 ? void 0 : _theme$colors4.background) || null;
-};
-exports.getThemeNavigationBarBackgroundColor = getThemeNavigationBarBackgroundColor;
-const getThemeNavigationBarTextColor = theme => {
-  var _theme$colors5;
-  return (theme === null || theme === void 0 || (_theme$colors5 = theme.colors) === null || _theme$colors5 === void 0 || (_theme$colors5 = _theme$colors5.navigationBar) === null || _theme$colors5 === void 0 ? void 0 : _theme$colors5.text) || null;
-};
-exports.getThemeNavigationBarTextColor = getThemeNavigationBarTextColor;
+exports.getThemeLogoPadding = exports.getThemeLogo = exports.getThemeAppName = void 0;
 const getThemeLogo = theme => {
   return (theme === null || theme === void 0 ? void 0 : theme.logo) || null;
 };
@@ -40,14 +15,4 @@ exports.getThemeLogoPadding = getThemeLogoPadding;
 const getThemeAppName = theme => {
   return (theme === null || theme === void 0 ? void 0 : theme.appName) || null;
 };
-exports.getThemeAppName = getThemeAppName;
-const getThemeTextColor = theme => {
-  var _theme$colors6;
-  return (theme === null || theme === void 0 || (_theme$colors6 = theme.colors) === null || _theme$colors6 === void 0 ? void 0 : _theme$colors6.text) || null;
-};
-exports.getThemeTextColor = getThemeTextColor;
-const getThemeLinkColor = theme => {
-  var _theme$colors7;
-  return (theme === null || theme === void 0 || (_theme$colors7 = theme.colors) === null || _theme$colors7 === void 0 ? void 0 : _theme$colors7.link) || null;
-};
-exports.getThemeLinkColor = getThemeLinkColor;
+exports.getThemeAppName = getThemeAppName;

package/dist/index.js

@@ -189,6 +189,12 @@ Object.defineProperty(exports, "Textarea", {
     return _Textarea.default;
   }
 });
+Object.defineProperty(exports, "ThemeProvider", {
+  enumerable: true,
+  get: function () {
+    return _ThemeProvider.default;
+  }
+});
 Object.defineProperty(exports, "WizardNavigation", {
   enumerable: true,
   get: function () {
@@ -232,6 +238,7 @@ var _RadioButtonListItem = _interopRequireDefault(require("./components/RadioBut
 var _Select = _interopRequireDefault(require("./components/Select"));
 var _Table = _interopRequireDefault(require("./components/Table"));
 var _Textarea = _interopRequireDefault(require("./components/Textarea"));
+var _ThemeProvider = _interopRequireDefault(require("./components/ThemeProvider"));
 var _WizardNavigation = _interopRequireDefault(require("./components/WizardNavigation"));
 var _Step = _interopRequireDefault(require("./components/WizardNavigation/Step"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/style/abstracts/variables/_colors.scss

@@ -1,36 +1,32 @@
-$body-background: #ebf4fa;
+$color-body-background: #ebf4fa;
 $color-default-text: #202020;
+$color-heading-text: #003045;
 $color-primary-text: #005275;
+$color-secondary-text: #89bad6;
 
 $color-primary: #003045;
 $color-primary-light: #264f61;
 $color-primary-x-light: #406474;
+$color-primary-contrast: #ffffff;
 
-$color-secondary: #89bad6;
+$color-secondary: #ffffff;
 $color-secondary-light: #c7e0f2;
 $color-secondary-x-light: #ebf4fa;
+$color-secondary-contrast: #005275;
 
 $color-focus: rgba(0, 92, 173, 0.4);
 
 $color-default-background: #f1fae3;
 $color-secondary-background: #f5f0f0;
 
-$color-success: #43ac6a;
-
-$color-error: #db0000;
-$color-error-light: #ffc5c2;
-$color-error-x-light: #fceceb;
+$color-success: #177912;
+$color-success-light: #cbebb0;
+$color-success-x-light: #f1fae3;
 
 $color-warning: #ffbe00;
 $color-warning-light: #fcefb6;
 $color-warning-x-light: #fff8db;
 
-$color-info: #a0d3e8;
-
-$color-light-cyan: #ecf2f6;
-
-$color-orange: #f08a24;
-$color-light-orange: #faefdf;
-
-$color-lime: #c9d12b;
-$color-light-lime: #f0f2cb;
+$color-error: #db0000;
+$color-error-light: #ffc5c2;
+$color-error-x-light: #fceceb;

package/dist/style/base/_fonts.scss

@@ -1,111 +1,5 @@
 $font-path: "../../assets/fonts";
 
-@font-face {
-	font-family: "Altis";
-	src: url("#{$font-path}/Altis.eot#Altis") format("eot");
-	src:
-		local("Altis"),
-		url("#{$font-path}/Altis.ttf") format("truetype"),
-		url("#{$font-path}/Altis.svg") format("svg");
-}
-
-@font-face {
-	font-family: "Altis-Light";
-	src: url("#{$font-path}/Altis-Light.eot#Altis-Light") format("eot");
-	src:
-		local("Altis-Light"),
-		url("#{$font-path}/Altis-Light.woff") format("woff"),
-		url("#{$font-path}/Altis-Light.ttf") format("truetype"),
-		url("#{$font-path}/Altis-Light.svg") format("svg");
-}
-
-/* open-sans-300 - latin-ext_latin */
-@font-face {
-	font-family: "Open Sans";
-	font-style: normal;
-	font-weight: 300;
-	src: url("#{$font-path}/open-sans-v27-latin-ext_latin-300.eot"); /* IE9 Compat Modes */
-	src:
-		local(""),
-		url("#{$font-path}/open-sans-v27-latin-ext_latin-300.eot?#iefix") format("embedded-opentype"),
-		/* IE6-IE8 */ url("#{$font-path}/open-sans-v27-latin-ext_latin-300.woff2") format("woff2"),
-		/* Super Modern Browsers */ url("#{$font-path}/open-sans-v27-latin-ext_latin-300.woff") format("woff"),
-		/* Modern Browsers */ url("#{$font-path}/open-sans-v27-latin-ext_latin-300.ttf") format("truetype"),
-		/* Safari, Android, iOS */ url("#{$font-path}/open-sans-v27-latin-ext_latin-300.svg#OpenSans") format("svg"); /* Legacy iOS */
-}
-/* open-sans-regular - latin-ext_latin */
-@font-face {
-	font-family: "Open Sans";
-	font-style: normal;
-	font-weight: 400;
-	src: url("#{$font-path}/open-sans-v27-latin-ext_latin-regular.eot"); /* IE9 Compat Modes */
-	src:
-		local(""),
-		url("#{$font-path}/open-sans-v27-latin-ext_latin-regular.eot?#iefix") format("embedded-opentype"),
-		/* IE6-IE8 */ url("#{$font-path}/open-sans-v27-latin-ext_latin-regular.woff2") format("woff2"),
-		/* Super Modern Browsers */ url("#{$font-path}/open-sans-v27-latin-ext_latin-regular.woff") format("woff"),
-		/* Modern Browsers */ url("#{$font-path}/open-sans-v27-latin-ext_latin-regular.ttf") format("truetype"),
-		/* Safari, Android, iOS */ url("#{$font-path}/open-sans-v27-latin-ext_latin-regular.svg#OpenSans") format("svg"); /* Legacy iOS */
-}
-/* open-sans-700 - latin-ext_latin */
-@font-face {
-	font-family: "Open Sans";
-	font-style: normal;
-	font-weight: 700;
-	src: url("#{$font-path}/open-sans-v27-latin-ext_latin-700.eot"); /* IE9 Compat Modes */
-	src:
-		local(""),
-		url("#{$font-path}/open-sans-v27-latin-ext_latin-700.eot?#iefix") format("embedded-opentype"),
-		/* IE6-IE8 */ url("#{$font-path}/open-sans-v27-latin-ext_latin-700.woff2") format("woff2"),
-		/* Super Modern Browsers */ url("#{$font-path}/open-sans-v27-latin-ext_latin-700.woff") format("woff"),
-		/* Modern Browsers */ url("#{$font-path}/open-sans-v27-latin-ext_latin-700.ttf") format("truetype"),
-		/* Safari, Android, iOS */ url("#{$font-path}/open-sans-v27-latin-ext_latin-700.svg#OpenSans") format("svg"); /* Legacy iOS */
-}
-/* open-sans-300italic - latin-ext_latin */
-@font-face {
-	font-family: "Open Sans";
-	font-style: italic;
-	font-weight: 300;
-	src: url("#{$font-path}/open-sans-v27-latin-ext_latin-300italic.eot"); /* IE9 Compat Modes */
-	src:
-		local(""),
-		url("#{$font-path}/open-sans-v27-latin-ext_latin-300italic.eot?#iefix") format("embedded-opentype"),
-		/* IE6-IE8 */ url("#{$font-path}/open-sans-v27-latin-ext_latin-300italic.woff2") format("woff2"),
-		/* Super Modern Browsers */ url("#{$font-path}/open-sans-v27-latin-ext_latin-300italic.woff") format("woff"),
-		/* Modern Browsers */ url("#{$font-path}/open-sans-v27-latin-ext_latin-300italic.ttf") format("truetype"),
-		/* Safari, Android, iOS */ url("#{$font-path}/open-sans-v27-latin-ext_latin-300italic.svg#OpenSans")
-			format("svg"); /* Legacy iOS */
-}
-/* open-sans-italic - latin-ext_latin */
-@font-face {
-	font-family: "Open Sans";
-	font-style: italic;
-	font-weight: 400;
-	src: url("#{$font-path}/open-sans-v27-latin-ext_latin-italic.eot"); /* IE9 Compat Modes */
-	src:
-		local(""),
-		url("#{$font-path}/open-sans-v27-latin-ext_latin-italic.eot?#iefix") format("embedded-opentype"),
-		/* IE6-IE8 */ url("#{$font-path}/open-sans-v27-latin-ext_latin-italic.woff2") format("woff2"),
-		/* Super Modern Browsers */ url("#{$font-path}/open-sans-v27-latin-ext_latin-italic.woff") format("woff"),
-		/* Modern Browsers */ url("#{$font-path}/open-sans-v27-latin-ext_latin-italic.ttf") format("truetype"),
-		/* Safari, Android, iOS */ url("#{$font-path}/open-sans-v27-latin-ext_latin-italic.svg#OpenSans") format("svg"); /* Legacy iOS */
-}
-/* open-sans-700italic - latin-ext_latin */
-@font-face {
-	font-family: "Open Sans";
-	font-style: italic;
-	font-weight: 700;
-	src: url("#{$font-path}/open-sans-v27-latin-ext_latin-700italic.eot"); /* IE9 Compat Modes */
-	src:
-		local(""),
-		url("#{$font-path}/open-sans-v27-latin-ext_latin-700italic.eot?#iefix") format("embedded-opentype"),
-		/* IE6-IE8 */ url("#{$font-path}/open-sans-v27-latin-ext_latin-700italic.woff2") format("woff2"),
-		/* Super Modern Browsers */ url("#{$font-path}/open-sans-v27-latin-ext_latin-700italic.woff") format("woff"),
-		/* Modern Browsers */ url("#{$font-path}/open-sans-v27-latin-ext_latin-700italic.ttf") format("truetype"),
-		/* Safari, Android, iOS */ url("#{$font-path}/open-sans-v27-latin-ext_latin-700italic.svg#OpenSans")
-			format("svg"); /* Legacy iOS */
-}
-
 @font-face {
 	font-family: "PP Mori";
 	src: url("#{$font-path}/PPMori-Regular.otf");

package/dist/style/pdf.css

@@ -6,7 +6,6 @@ body {
   font-family: Carlito, sans-serif;
   color: #000;
   font-size: 16px;
-  line-height: 1.25em;
   font-weight: normal;
   font-style: normal;
 }
@@ -24,6 +23,7 @@ body {
   font-family: Carlito, sans-serif;
   color: #000;
   font-size: 16px;
+  line-height: 22.5px;
 }
 
 @page {
@@ -244,8 +244,8 @@ body {
   width: 18px;
 }
 .page blockquote {
-  background: #ebf4fa;
-  border-left: 4px solid #89bad6;
+  background: var(--color-secondary-x-light, #ebf4fa);
+  border-left: 4px solid var(--color-secondary-text, #89bad6);
   margin: 5px 10px;
   padding: 0.5em 10px;
   min-height: 36px;
@@ -311,6 +311,7 @@ body {
   padding-left: 0.2cm;
   padding-right: 0.2cm;
   font-size: 17.72832px;
+  line-height: 24.93045px;
 }
 .page.signed-document div.content-container .heading-logo {
   width: 110.802px;
@@ -406,8 +407,8 @@ body {
   width: 19.94436px;
 }
 .page.signed-document div.content-container blockquote {
-  background: #ebf4fa;
-  border-left: 4.43208px solid #89bad6;
+  background: var(--color-secondary-x-light, #ebf4fa);
+  border-left: 4.43208px solid var(--color-secondary-text, #89bad6);
   margin: 5.5401px 11.0802px;
   padding: 0.5em 11.0802px;
   min-height: 39.88872px;

package/dist/style/pdf.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/stories/PDF.scss","../../src/style/abstracts/mixins/_box-sizing.scss","../../src/style/abstracts/variables/_colors.scss"],"names":[],"mappings":"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","file":"pdf.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/stories/PDF.scss","../../src/style/abstracts/mixins/_box-sizing.scss"],"names":[],"mappings":"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","file":"pdf.css"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dibk-design",
-  "version": "4.5.0",
+  "version": "5.0.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "files": [
@@ -11,6 +11,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
+    "raw-loader": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",