dibk-design 6.5.3 → 7.1.0

package/dist/components/NavigationBar.module.scss

@@ -1,4 +1,13 @@
-@import "../style/global.scss";
+// Mixins
+@use "../style/abstracts/mixins/appearance";
+@use "../style/abstracts/mixins/box-shadow";
+@use "../style/abstracts/mixins/transition";
+
+// Variables
+@use "../style/abstracts/variables/colors";
+@use "../style/abstracts/variables/transitions";
+@use "../style/abstracts/variables/typography";
+@use "../style/abstracts/variables/viewports";
 
 .navigationBarContainer {
     .mainContentLink {
@@ -33,21 +42,21 @@
     }
     &:not(.compact) {
         position: relative;
-        background-color: var(--color-body-background, $color-body-background);
+        background-color: var(--color-body-background, colors.$color-body-background);
         padding: 5px;
-        @media only screen and (min-width: $screen-sm) {
+        @media only screen and (min-width: viewports.$screen-sm) {
             padding: 20px;
         }
-        @media only screen and (min-width: $screen-md) {
+        @media only screen and (min-width: viewports.$screen-md) {
             padding-bottom: 40px;
         }
         .mainContentLink {
-            background-color: var(--color-body-background, $color-body-background);
-            color: var(--color-primary, $color-primary);
+            background-color: var(--color-body-background, colors.$color-body-background);
+            color: var(--color-primary, colors.$color-primary);
             &:focus,
             &:active {
                 span {
-                    outline-color: var(--color-primary, $color-primary);
+                    outline-color: var(--color-primary, colors.$color-primary);
                 }
             }
         }
@@ -69,18 +78,18 @@
                 -ms-flex-direction: row;
                 flex-direction: row;
             }
-            @media only screen and (min-width: $screen-sm) {
+            @media only screen and (min-width: viewports.$screen-sm) {
                 -ms-flex-direction: row;
                 flex-direction: row;
             }
-            @media only screen and (min-width: $screen-md) {
+            @media only screen and (min-width: viewports.$screen-md) {
                 margin: 0;
             }
         }
         .logoContainer {
             width: var(--size-logo-small-width, 85px);
             margin-bottom: 0;
-            @media only screen and (min-width: $screen-sm) {
+            @media only screen and (min-width: viewports.$screen-sm) {
                 width: var(--size-logo-large-width, 100px);
             }
         }
@@ -91,8 +100,8 @@
             padding: 0 20px;
         }
         .menuToggle {
-            transition: background-color $default-transition;
-            font-family: $default-font;
+            transition: background-color transitions.$default-transition;
+            font-family: typography.$default-font;
             display: inline-block;
             line-height: 1.1;
             position: absolute;
@@ -100,15 +109,15 @@
             right: 10px;
             height: auto;
             margin: auto;
-            border: 1px solid var(--color-primary, $color-primary);
+            border: 1px solid var(--color-primary, colors.$color-primary);
             padding: 10px 20px;
             padding-right: 54px;
             background-color: transparent;
-            color: var(--color-primary, $color-primary);
+            color: var(--color-primary, colors.$color-primary);
             font-size: 20px;
             font-weight: 400;
             cursor: pointer;
-            @media only screen and (min-width: $screen-sm) {
+            @media only screen and (min-width: viewports.$screen-sm) {
                 position: relative;
                 top: 0;
                 right: 0;
@@ -124,7 +133,7 @@
                 height: 4px;
                 width: 24px;
                 border-radius: 3px;
-                background-color: var(--color-primary, $color-primary);
+                background-color: var(--color-primary, colors.$color-primary);
                 &::before,
                 &::after {
                     content: "";
@@ -133,7 +142,7 @@
                     left: 0;
                     right: 0;
                     border-radius: 3px;
-                    background-color: var(--color-primary, $color-primary);
+                    background-color: var(--color-primary, colors.$color-primary);
                     transition: transform 0.3s ease-out;
                 }
                 &::before {
@@ -147,12 +156,12 @@
             &:focus,
             &:active {
                 color: #fff;
-                background-color: var(--color-primary, $color-primary);
+                background-color: var(--color-primary, colors.$color-primary);
                 .hamburgerIcon {
-                    background-color: var(--color-primary-contrast, $color-primary-contrast);
+                    background-color: var(--color-primary-contrast, colors.$color-primary-contrast);
                     &::before,
                     &::after {
-                        background-color: var(--color-primary-contrast, $color-primary-contrast);
+                        background-color: var(--color-primary-contrast, colors.$color-primary-contrast);
                     }
                 }
             }
@@ -173,8 +182,8 @@
             display: none;
             width: 100%;
             overflow: hidden;
-            transition: all $default-transition;
-            background-color: var(--color-body-background, $color-body-background);
+            transition: all transitions.$default-transition;
+            background-color: var(--color-body-background, colors.$color-body-background);
             &.active {
                 display: block;
             }
@@ -187,7 +196,7 @@
             flex-wrap: wrap;
             padding: 0;
             padding: 20px;
-            @media only screen and (min-width: $screen-sm) {
+            @media only screen and (min-width: viewports.$screen-sm) {
                 padding: 40px 5%;
             }
             > ul.primaryList,
@@ -196,19 +205,19 @@
                 padding: 0;
                 list-style: none;
                 margin: 0;
-                @media only screen and (min-width: $screen-sm) {
+                @media only screen and (min-width: viewports.$screen-sm) {
                     padding: 20px 0;
                 }
             }
             > ul.primaryList {
                 float: left;
-                @media only screen and (min-width: $screen-sm) {
+                @media only screen and (min-width: viewports.$screen-sm) {
                     width: 60%;
                 }
                 > li {
                     line-height: 1.6;
                     padding: 15px 0;
-                    @media only screen and (min-width: $screen-sm) {
+                    @media only screen and (min-width: viewports.$screen-sm) {
                         margin-left: 100px;
                     }
                     > a,
@@ -217,12 +226,12 @@
                         line-height: 1.56;
                         font-weight: 600;
                         text-decoration: underline;
-                        color: var(--color-primary, $color-primary);
+                        color: var(--color-primary, colors.$color-primary);
                         cursor: pointer;
                         &:hover {
                             text-decoration: none;
                         }
-                        @media only screen and (min-width: $screen-sm) {
+                        @media only screen and (min-width: viewports.$screen-sm) {
                             font-size: 26px;
                             line-height: 1.58;
                         }
@@ -230,7 +239,7 @@
                     > ul.primaryList {
                         display: none;
                         list-style: none;
-                        @media only screen and (min-width: $screen-sm) {
+                        @media only screen and (min-width: viewports.$screen-sm) {
                             display: -ms-flexbox;
                             display: flex;
                             -ms-flex-direction: row;
@@ -243,11 +252,11 @@
                             padding: 5px;
                             line-height: 1.6;
                             font-size: 16px;
-                            @media only screen and (min-width: $screen-md) {
+                            @media only screen and (min-width: viewports.$screen-md) {
                                 font-size: 20px;
                             }
                             &:not(:last-of-type)::after {
-                                @media only screen and (min-width: $screen-sm) {
+                                @media only screen and (min-width: viewports.$screen-sm) {
                                     content: "-";
                                     padding-left: 10px;
                                 }
@@ -267,7 +276,7 @@
             > ul.secondaryList {
                 float: right;
                 margin: 20px 0;
-                @media only screen and (min-width: $screen-sm) {
+                @media only screen and (min-width: viewports.$screen-sm) {
                     margin: 0;
                     width: 40%;
                     padding-left: 20px;
@@ -275,7 +284,7 @@
                 li {
                     padding: 5px 0;
                     line-height: 1.6;
-                    @media only screen and (min-width: $screen-sm) {
+                    @media only screen and (min-width: viewports.$screen-sm) {
                         padding: 10px 0;
                         position: relative;
                     }
@@ -289,7 +298,7 @@
                         &:hover {
                             text-decoration: none;
                         }
-                        @media only screen and (min-width: $screen-sm) {
+                        @media only screen and (min-width: viewports.$screen-sm) {
                             font-size: 22px;
                         }
                     }
@@ -298,28 +307,28 @@
         }
     }
     &.compact {
-        @include box-shadow(0 2px 4px -2px rgba(0, 0, 0, 0.2));
+        @include box-shadow.box-shadow(0 2px 4px -2px rgba(0, 0, 0, 0.2));
         position: relative;
         z-index: 1;
 
         .mainContentLink {
-            background-color: var(--color-primary, $color-primary);
-            color: var(--color-primary-contrast, $color-primary-contrast);
+            background-color: var(--color-primary, colors.$color-primary);
+            color: var(--color-primary-contrast, colors.$color-primary-contrast);
             &:focus,
             &:active {
                 span {
-                    outline-color: var(--color-primary-contrast, $color-primary-contrast);
+                    outline-color: var(--color-primary-contrast, colors.$color-primary-contrast);
                 }
             }
         }
 
         .navigationBar {
-            background-color: var(--color-primary, $color-primary);
+            background-color: var(--color-primary, colors.$color-primary);
             height: 54px;
             display: flex;
             justify-content: space-between;
             align-items: center;
-            @media only screen and (min-width: $screen-sm) {
+            @media only screen and (min-width: viewports.$screen-sm) {
                 height: 73px;
             }
         }
@@ -332,7 +341,7 @@
                 height: 54px;
                 max-width: none;
             }
-            @media only screen and (min-width: $screen-sm) {
+            @media only screen and (min-width: viewports.$screen-sm) {
                 width: 270px;
                 height: 73px;
                 img {
@@ -343,13 +352,13 @@
 
         .childElements {
             display: block;
-            color: var(--color-primary-contrast, $color-primary-contrast);
+            color: var(--color-primary-contrast, colors.$color-primary-contrast);
             flex: 1;
         }
 
         .menuToggle {
-            @include appearance(none);
-            @include transition(background-color 300ms ease-out);
+            @include appearance.appearance(none);
+            @include transition.transition(background-color 300ms ease-out);
             border: none;
             cursor: pointer;
             position: relative;
@@ -360,30 +369,30 @@
                 width: 30px;
                 display: block;
                 .line {
-                    background-color: var(--color-primary-contrast, $color-primary-contrast);
+                    background-color: var(--color-primary-contrast, colors.$color-primary-contrast);
                     height: 2px;
                     margin: 6px 0;
                     display: block;
                 }
             }
-            @media only screen and (min-width: $screen-sm) {
+            @media only screen and (min-width: viewports.$screen-sm) {
                 margin: 0 21px;
             }
         }
 
         .dropdownContainer {
-            @include transition(max-height 0.15s ease-out);
+            @include transition.transition(max-height 0.15s ease-out);
             max-height: 0;
             overflow: hidden;
             &.active {
-                @include transition(max-height 0.15s ease-out);
+                @include transition.transition(max-height 0.15s ease-out);
                 max-height: 500px;
             }
         }
 
         .dropdown {
-            @include box-shadow(0 2px 4px -2px rgba(0, 0, 0, 0.2));
-            background-color: var(--color-primary, $color-primary);
+            @include box-shadow.box-shadow(0 2px 4px -2px rgba(0, 0, 0, 0.2));
+            background-color: var(--color-primary, colors.$color-primary);
             z-index: 2;
             > ul.primaryList {
                 list-style: none;
@@ -392,13 +401,13 @@
                 li {
                     a,
                     span {
-                        color: var(--color-primary-contrast, $color-primary-contrast);
+                        color: var(--color-primary-contrast, colors.$color-primary-contrast);
                         text-transform: uppercase;
                         text-decoration: none;
-                        font-family: $default-font;
+                        font-family: typography.$default-font;
                         padding: 10px 0;
                         display: block;
-                        border-bottom: 1px solid var(--color-primary, $color-primary);
+                        border-bottom: 1px solid var(--color-primary, colors.$color-primary);
                         font-size: 14px;
                         line-height: 1.6;
                     }
@@ -408,10 +417,10 @@
                         li {
                             a,
                             span {
-                                color: var(--color-primary-contrast, $color-primary-contrast);
+                                color: var(--color-primary-contrast, colors.$color-primary-contrast);
                                 text-transform: none;
                                 text-decoration: none;
-                                font-family: $default-font;
+                                font-family: typography.$default-font;
                                 padding: 10px 0;
                                 margin-left: 20px;
                                 display: block;
@@ -442,12 +451,12 @@
             }
         }
 
-        @media only screen and (min-width: $screen-sm) {
+        @media only screen and (min-width: viewports.$screen-sm) {
             .dropdownContainer {
                 position: relative;
                 overflow: visible;
                 .dropdown {
-                    @include transition(max-height 0.15s ease-out);
+                    @include transition.transition(max-height 0.15s ease-out);
                     width: 300px;
                     position: absolute;
                     right: 0;

package/dist/components/NavigationBarListItem.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const NavigationBarListItem = props => {
   if (typeof props.listItem === "string") {
     return _react.default.createElement("li", null, _react.default.createElement("span", null, props.listItem));

package/dist/components/PDF.scss

@@ -1,4 +1,8 @@
-@import "../style/abstracts/_all.scss";
+// Mixins
+@use "../style/abstracts/mixins/box-sizing";
+
+// Variables
+@use "../style/abstracts/variables/colors";
 
 $font-size-body: 16px;
 $font-size-h1: 34px;
@@ -108,7 +112,7 @@ body {
 }
 
 * {
-    @include box-sizing(border-box);
+    @include box-sizing.box-sizing(border-box);
 }
 
 .page {
@@ -129,8 +133,13 @@ body {
         margin-left: $heading-logo-margin-left;
     }
 
+    caption {
+        text-align: left;
+    }
+
     h1,
-    .h1 {
+    .h1,
+    caption[style*="--size: 1"] {
         page-break-after: avoid;
         font-size: $font-size-h1;
         font-weight: normal;
@@ -144,7 +153,8 @@ body {
         }
     }
     h2,
-    .h2 {
+    .h2,
+    caption[style*="--size: 2"] {
         page-break-after: avoid;
         font-size: $font-size-h2;
         font-weight: normal;
@@ -162,7 +172,8 @@ body {
         }
     }
     h3,
-    .h3 {
+    .h3,
+    caption[style*="--size: 3"] {
         page-break-after: avoid;
         font-size: $font-size-h3;
         font-weight: normal;
@@ -176,7 +187,9 @@ body {
     }
 
     h4,
-    .h4 {
+    .h4,
+    caption[style*="--size: 4"],
+    caption:not([style*="--size"]) {
         page-break-after: avoid;
         font-size: $font-size-h4;
         font-weight: bold;
@@ -189,7 +202,8 @@ body {
     }
 
     h5,
-    .h5 {
+    .h5,
+    caption[style*="--size: 5"] {
         page-break-after: avoid;
         font-size: $font-size-h5;
         font-weight: bold;
@@ -306,7 +320,7 @@ body {
         }
     }
 
-    table + table thead tr {
+    table + table > thead:first-child tr {
         border-top: none;
     }
 
@@ -326,8 +340,8 @@ body {
     }
 
     blockquote {
-        background: var(--color-secondary-x-light, $color-secondary-x-light);
-        border-left: $border-left-width-blockquote solid var(--color-border, $color-border);
+        background: var(--color-secondary-x-light, colors.$color-secondary-x-light);
+        border-left: $border-left-width-blockquote solid var(--color-border, colors.$color-border);
         margin: $margin-vertical-blockquote $margin-horizontal-blockquote;
         padding: 0.5em $padding-horizontal-blockquote;
         min-height: $min-height-blockquote;
@@ -419,7 +433,8 @@ body {
             margin-left: calc($heading-logo-margin-left * $scaling-for-signed-documents);
         }
         h1,
-        .h1 {
+        .h1,
+        caption[style*="--size: 1"] {
             font-size: calc($font-size-h1 * $scaling-for-signed-documents);
             margin-top: calc($margin-top-h1 * $scaling-for-signed-documents);
             small {
@@ -427,7 +442,8 @@ body {
             }
         }
         h2,
-        .h2 {
+        .h2,
+        caption[style*="--size: 2"] {
             font-size: calc($font-size-h2 * $scaling-for-signed-documents);
             margin-top: calc($margin-top-h2 * $scaling-for-signed-documents);
             margin-bottom: calc($margin-bottom-h2 * $scaling-for-signed-documents);
@@ -437,19 +453,23 @@ body {
             }
         }
         h3,
-        .h3 {
+        .h3,
+        caption[style*="--size: 3"] {
             font-size: calc($font-size-h3 * $scaling-for-signed-documents);
             margin-top: calc($margin-top-h3 * $scaling-for-signed-documents);
             margin-bottom: calc($margin-bottom-h3 * $scaling-for-signed-documents);
         }
         h4,
-        .h4 {
+        .h4,
+        caption[style*="--size: 4"],
+        caption:not([style*="--size"]) {
             font-size: calc($font-size-h4 * $scaling-for-signed-documents);
             margin-top: calc($margin-top-h4 * $scaling-for-signed-documents);
             margin-bottom: calc($margin-bottom-h4 * $scaling-for-signed-documents);
         }
         h5,
-        .h5 {
+        .h5,
+        caption[style*="--size: 5"] {
             font-size: calc($font-size-h5 * $scaling-for-signed-documents);
             margin-top: calc($margin-top-h5 * $scaling-for-signed-documents);
             margin-bottom: calc($margin-bottom-h5 * $scaling-for-signed-documents);
@@ -517,9 +537,9 @@ body {
         }
 
         blockquote {
-            background: var(--color-secondary-x-light, $color-secondary-x-light);
+            background: var(--color-secondary-x-light, colors.$color-secondary-x-light);
             border-left: calc($border-left-width-blockquote * $scaling-for-signed-documents) solid
-                var(--color-border, $color-border);
+                var(--color-border, colors.$color-border);
             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/Paper.js

@@ -7,10 +7,10 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _PaperModule = _interopRequireDefault(require("./Paper.module.scss"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Paper = props => {
   return _react.default.createElement("div", {
-    className: "".concat(_PaperModule.default.paper, " ").concat(props.noMargin ? _PaperModule.default.noMargin : "", " ").concat(props.noPadding ? _PaperModule.default.noPadding : "")
+    className: `${_PaperModule.default.paper} ${props.noMargin ? _PaperModule.default.noMargin : ""} ${props.noPadding ? _PaperModule.default.noPadding : ""}`
   }, props.children);
 };
 Paper.propTypes = {

package/dist/components/Paper.module.scss

@@ -1,4 +1,5 @@
-@import "../style/global.scss";
+// Variables
+@use "../style/abstracts/variables/viewports";
 
 .paper {
     position: relative;
@@ -9,7 +10,7 @@
     }
     &:not(.noPadding) {
         padding: 48px 20px;
-        @media only screen and (min-width: $screen-sm) {
+        @media only screen and (min-width: viewports.$screen-sm) {
             padding: 48px;
         }
     }

package/dist/components/ProgressBar.js

@@ -7,11 +7,11 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ProgressBarModule = _interopRequireDefault(require("./ProgressBar.module.scss"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const ProgressBar = props => {
   const scssValueProperty = "--value";
   return _react.default.createElement("div", {
-    className: "".concat(_ProgressBarModule.default.progressBar, " ").concat(props.hasErrors ? _ProgressBarModule.default.hasErrors : ""),
+    className: `${_ProgressBarModule.default.progressBar} ${props.hasErrors ? _ProgressBarModule.default.hasErrors : ""}`,
     role: "progressbar",
     "aria-valuenow": props.progress || 0,
     "aria-valuemin": "0",

package/dist/components/ProgressBar.module.scss

@@ -1,8 +1,12 @@
-@import "../style/global.scss";
+// Mixins
+@use "../style/abstracts/mixins/calc";
+
+// Variables
+@use "../style/abstracts/variables/colors";
 
 .progressBar {
     --size: 4rem;
-    --fg: #{var(--color-primary, $color-primary)};
+    --fg: #{var(--color-primary, colors.$color-primary)};
     --bg: #e2e1e0;
     --pgPercentage: var(--value);
     width: var(--size);
@@ -13,7 +17,7 @@
     background: radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
         conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);
     font-family: Helvetica, Arial, sans-serif;
-    font-size: calc(var(--size) / 4);
+    @include calc.calc("font-size", var(--size) / 4);
     color: var(--fg);
     flex-shrink: 0;
     &::before {
@@ -21,6 +25,6 @@
         content: counter(percentage) "%";
     }
     &.hasErrors {
-        --fg: #{var(--color-error, $color-error)};
+        --fg: #{var(--color-error, colors.$color-error)};
     }
 }

package/dist/components/RadioButtonIcon.js

@@ -7,14 +7,14 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _RadioButtonIconModule = _interopRequireDefault(require("./RadioButtonIcon.module.scss"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const RadioButtonIcon = props => {
   let inlineStyle = {
     height: props.size,
     width: props.size
   };
   const radioButtonIconProps = {
-    className: "".concat(_RadioButtonIconModule.default.radioButtonIcon, " ").concat(props.checked ? _RadioButtonIconModule.default.checked : "", " ").concat(props.disabled ? _RadioButtonIconModule.default.disabled : "", " ").concat(props.hasErrors ? _RadioButtonIconModule.default.hasErrors : ""),
+    className: `${_RadioButtonIconModule.default.radioButtonIcon} ${props.checked ? _RadioButtonIconModule.default.checked : ""} ${props.disabled ? _RadioButtonIconModule.default.disabled : ""} ${props.hasErrors ? _RadioButtonIconModule.default.hasErrors : ""}`,
     style: inlineStyle
   };
   return _react.default.createElement("span", radioButtonIconProps);