dibk-design 3.12.0 → 4.0.2

package/dist/components/PDF.scss

@@ -36,7 +36,7 @@ $margin-bottom-list: 12px;
 $margin-vertical-blockquote: 5px;
 $margin-horizontal-blockquote: 10px;
 $padding-horizontal-blockquote: 10px;
-$border-left-width-blockquote: 10px;
+$border-left-width-blockquote: 4px;
 $min-height-blockquote: 36px;
 
 $margin-vertical-description-list: 3px;
@@ -324,8 +324,8 @@ body {
     }
 
     blockquote {
-        background: $color-default;
-        border-left: $border-left-width-blockquote solid $color-light-blue;
+        background: $color-secondary-x-light;
+        border-left: $border-left-width-blockquote solid $color-secondary;
         margin: $margin-vertical-blockquote $margin-horizontal-blockquote;
         padding: 0.5em $padding-horizontal-blockquote;
         min-height: $min-height-blockquote;
@@ -510,8 +510,8 @@ body {
         }
 
         blockquote {
-            background: $color-default;
-            border-left: calc($border-left-width-blockquote * $scaling-for-signed-documents) solid $color-light-blue;
+            background: $color-secondary-x-light;
+            border-left: calc($border-left-width-blockquote * $scaling-for-signed-documents) solid $color-secondary;
             margin: calc($margin-vertical-blockquote * $scaling-for-signed-documents)
                 calc($margin-horizontal-blockquote * $scaling-for-signed-documents);
             padding: 0.5em calc($padding-horizontal-blockquote * $scaling-for-signed-documents);

package/dist/components/RadioButtonIcon.module.scss

@@ -2,7 +2,7 @@
 
 .radioButtonIcon {
     @include border-radius(50%);
-    @include transition(all 0.1s ease-in-out);
+    @include transition(all $default-transition);
     @include box-sizing(content-box);
     display: inline-block;
     vertical-align: middle;
@@ -16,10 +16,10 @@
     cursor: pointer;
 
     &:not(.hasErrors) {
-        @include box-shadow(0 0 0 1px #6a6262);
+        @include box-shadow(0 0 0 1px $color-primary);
     }
     &.hasErrors {
-        @include box-shadow(0 0 2px 1px $color-error);
+        @include box-shadow(0 0 0 1px $color-error);
     }
 
     &.checked {
@@ -28,17 +28,14 @@
             background: $color-error;
         }
         &:not(.hasErrors) {
-            @include box-shadow(0 0 0 1px $color-dark-blue);
+            @include box-shadow(0 0 0 1px $color-primary);
         }
         &.hasErrors {
-            @include box-shadow(0 0 2px 1px $color-error);
+            @include box-shadow(0 0 0 1px $color-error);
         }
     }
     &.disabled {
-        opacity: 0.5;
-        border-color: #bfbfbf;
-        &:not(.checked) {
-            background: #bfbfbf;
-        }
+        border-color: #fff;
+        opacity: 0.4;
     }
 }

package/dist/components/RadioButtonInput.js

@@ -35,7 +35,9 @@ const RadioButtonInput = props => {
     "aria-invalid": props.hasErrors ? "true" : null,
     "aria-describedby": props["aria-describedby"]
   };
-  return _react.default.createElement("label", labelProps, !props.contentOnly ? _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_RadioButtonIcon.default, iconProps), _react.default.createElement("input", inputProps)) : null, _react.default.createElement("span", null, props.children, props.required && _react.default.createElement("img", {
+  return _react.default.createElement("label", labelProps, !props.contentOnly ? _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_RadioButtonIcon.default, iconProps), _react.default.createElement("input", inputProps)) : null, _react.default.createElement("span", {
+    className: _RadioButtonInputModule.default.labelText
+  }, props.children, props.required && _react.default.createElement("img", {
     src: _asterisk.default,
     alt: "",
     className: _RadioButtonInputModule.default.requiredSymbol

package/dist/components/RadioButtonInput.module.scss

@@ -20,6 +20,16 @@
         }
     }
 
+    .labelText {
+        color: $color-primary;
+    }
+
+    &.disabled {
+        .labelText {
+            opacity: 0.4;
+        }
+    }
+
     &.hasErrors {
         span {
             color: $color-error;
@@ -28,7 +38,7 @@
 
     &:focus-within {
         outline-width: 2px;
-        outline-color: $color-focus-outline;
+        outline-color: $color-primary;
         outline-style: auto;
         outline-offset: 1px;
     }

package/dist/components/RadioButtonListItem.js

@@ -11,7 +11,7 @@ var _helpers = require("../functions/helpers");
 var _RadioButtonListItemModule = _interopRequireDefault(require("./RadioButtonListItem.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const RadioButtonListItem = props => {
-  const listItemClassNameArray = [_RadioButtonListItemModule.default.radioButtonListItem, 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 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, props.theme && _RadioButtonListItemModule.default.hasTheme];
   const listItemClassNameString = (0, _helpers.classNameArrayToClassNameString)(listItemClassNameArray);
   const inputProps = {
     onChange: props.onChange,

package/dist/components/RadioButtonListItem.module.scss

@@ -2,8 +2,8 @@
 
 .radioButtonListItem {
   @include box-sizing(content-box);
-  @include border-radius(5px);
-  @include transition(all 0.1s ease-in-out);
+  @include border-radius(0);
+  @include transition(all $default-transition);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -19,9 +19,12 @@
   color: #000;
 
   &:not(.contentOnly):not(.compact) {
-    @include box-shadow(0 0 2px $color-dark-blue);
+    border: 1px solid $color-secondary-light;
     background: white;
-    margin-bottom: 10px;
+    margin-bottom: 8px;
+    label {
+      padding: 20px;
+    }
   }
 
   &.contentOnly {
@@ -38,12 +41,17 @@
     }
   }
 
-  &.checked:not(.contentOnly):not(.compact):not(.disabled) {
-    @include box-shadow(0 0 0 1px $color-dark-blue, 0 0 4px 0 $color-dark-blue);
+  &.checked:not(.contentOnly):not(.compact):not(.disabled):not(.hasTheme) {
+    background-color: $color-secondary-light;
   }
 
-  &:not(.checked):not(.contentOnly):not(.compact):not(.disabled):hover {
-    @include box-shadow(0 0 6px $color-dark-blue);
+  &:not(.checked):not(.contentOnly):not(.compact):not(.disabled):not(.hasTheme):hover {
+    &:hover {
+      background-color: $color-secondary-x-light;
+    }
+    &:focus-within {
+      background-color: $color-secondary-x-light;
+    }
   }
 
   label {

package/dist/components/Select.module.scss

@@ -41,7 +41,11 @@
 
         .multipleSelectDropdown {
             @include border-radius(4px);
-            @include 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);
+            @include 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
+            );
             width: 100%;
             position: absolute;
             background-color: #fff;
@@ -51,30 +55,27 @@
         select,
         .multipleSelectElement {
             @include border-radius(0);
-            @include transition(border-color 0.15s linear);
+            @include transition(background $default-transition);
             @include appearance(none);
             @include box-shadow(none);
             color: rgba(0, 0, 0, 0.75);
             width: 100%;
             font-family: inherit;
-            font-size: 16px;
+            font-size: 18px;
             padding: 10px 40px 10px 10px;
-            border: 1px solid #afaba8;
+            border: 1px solid $color-primary;
             border-radius: 0;
             line-height: 1.7;
             background: white;
             cursor: pointer;
-            @media only screen and (min-width: $screen-sm) {
-                font-size: 19px;
-            }
 
             &:hover {
-                border-color: $color-dark-blue;
+                border-color: $color-primary;
+                background-color: $color-secondary-x-light;
             }
 
             &:focus {
-                border-color: $color-dark-blue;
-                outline-color: #54acb8;
+                outline-color: $color-primary;
             }
 
             &[disabled],
@@ -83,15 +84,12 @@
                 cursor: default;
             }
             &:not(.multiple) {
-                height: 47px;
-                padding: 10px 40px 10px 10px;
-                @media only screen and (min-width: $screen-sm) {
-                    height: 56px;
-                }
+                height: 52px;
+                padding: 12px 40px 12px 12px;
             }
             &.multiple {
                 max-height: 100px;
-                padding: 10px;
+                padding: 12px;
             }
 
             &.hasErrors {

package/dist/components/Textarea.module.scss

@@ -34,11 +34,11 @@
         }
 
         &:hover {
-            border-color: $color-dark-blue;
+            border-color: $color-primary;
         }
 
         &:focus {
-            border-color: $color-dark-blue;
+            border-color: $color-primary;
             outline-color: #54acb8;
         }
 

package/dist/components/Theme.module.scss

@@ -5,7 +5,7 @@
 }
 
 a {
-  color: $color-link;
+  color: $color-primary;
 }
 
 img {

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

@@ -73,7 +73,7 @@
   }
   &.active {
     :local(.stepNumber) {
-      background-color: $color-dark-blue;
+      background-color: $color-primary;
       color: #fff;
     }
   }

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

@@ -1,3 +1,4 @@
 @import "colors";
+@import "transitions";
 @import "typography";
 @import "viewports";

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

@@ -1,28 +1,33 @@
-$body-background: #ffffff;
-$color-default-text: #222;
-$color-link: #072938;
-$color-focus-outline: #005FCC;
+$body-background: #ebf4fa;
+$color-default-text: #202020;
+$color-primary-text: #005275;
 
-$color-dark-blue: #072938;
-$color-light-blue: #acc5d4;
+$color-primary: #003045;
+$color-primary-light: #264f61;
+$color-primary-x-light: #406474;
 
-$color-error: #9d2024;
+$color-default: #f2f1f0;
 
-$color-primary: #072938;
+$color-secondary: #89bad6;
+$color-secondary-light: #c7e0f2;
+$color-secondary-x-light: #ebf4fa;
 
-$color-default: #f2f1f0;
+$color-focus: rgba(0, 92, 173, 0.4);
 
 $color-success: #43ac6a;
 
-$color-warning: #c12732;
-$color-light-warning: #ffeaeb;
+$color-error: #db0000;
+$color-error-light: #ffc5c2;
+$color-error-x-light: #fceceb;
+
+$color-warning: #ffbe00;
+$color-warning-light: #fcefb6;
+$color-warning-x-light: #fff8db;
 
 $color-info: #a0d3e8;
 
 $color-light-cyan: #ecf2f6;
 
-$color-sea-green: #00757f;
-
 $color-orange: #f08a24;
 $color-light-orange: #faefdf;
 

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

@@ -0,0 +1 @@
+$default-transition: 200ms cubic-bezier(0.22, 1, 0.36, 1) 0s;

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

@@ -1,2 +1,2 @@
-$default-font: "Open Sans", arial, sans-serif;
-$heading-font: "Altis"
+$default-font: "PP Mori", "Open Sans", arial, sans-serif;
+$heading-font: "PP Mori", "Altis", "Open Sans", arial, sans-serif;

package/dist/style/base/_fonts.scss

@@ -3,95 +3,161 @@ $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");
+	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");
+	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-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';
+	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';
+	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';
+	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';
+	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';
+	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 */
-  }
+	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 */
+}
 
-.flex {
-	display: flex;
+@font-face {
+	font-family: "PP Mori";
+	src: url("#{$font-path}/PPMori-Regular.otf");
+	font-weight: 400;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: "PP Mori";
+	src: url("#{$font-path}/PPMori-RegularItalic.otf");
+	font-weight: 400;
+	font-style: italic;
+}
+
+@font-face {
+	font-family: "PP Mori";
+	src: url("#{$font-path}/PPMori-Book.otf");
+	font-weight: 300;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: "PP Mori";
+	src: url("#{$font-path}/PPMori-Medium.otf");
+	font-weight: 500;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: "PP Mori";
+	src: url("#{$font-path}/PPMori-SemiBold.otf");
+	font-weight: 600;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: "PP Mori";
+	src: url("#{$font-path}/PPMori-Bold.otf");
+	font-weight: 700;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: "PP Mori";
+	src: url("#{$font-path}/PPMori-ExtraBold.otf");
+	font-weight: 900;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: "PP Mori";
+	src: url("#{$font-path}/PPMori-Light.otf");
+	font-weight: 200;
+	font-style: normal;
 }

package/dist/style/base/_typography.scss

@@ -3,4 +3,5 @@ body {
 	color: $color-default-text;
 	font-weight: normal;
 	line-height: 1.4;
+	letter-spacing: 0.01em;
 }

package/dist/style/pdf.css

@@ -244,8 +244,8 @@ body {
   width: 18px;
 }
 .page blockquote {
-  background: #f2f1f0;
-  border-left: 10px solid #acc5d4;
+  background: #ebf4fa;
+  border-left: 4px solid #89bad6;
   margin: 5px 10px;
   padding: 0.5em 10px;
   min-height: 36px;
@@ -406,8 +406,8 @@ body {
   width: 19.94436px;
 }
 .page.signed-document div.content-container blockquote {
-  background: #f2f1f0;
-  border-left: 11.0802px solid #acc5d4;
+  background: #ebf4fa;
+  border-left: 4.43208px solid #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","../../src/style/abstracts/variables/_colors.scss"],"names":[],"mappings":"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","file":"pdf.css"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dibk-design",
-  "version": "3.12.0",
+  "version": "4.0.2",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "files": [