@ch-post-common/common-web-frontend 0.0.1-security → 1.0.933

package/variables/components/_datatable.scss

@@ -0,0 +1,49 @@
+/*!
+ * Copyright 2021 by Swiss Post, Information Technology
+ */
+
+
+@use "../color";
+@use "../spacing";
+@use "../type";
+@use "./button";
+@use "../../functions/icons";
+
+$datatable-header-font-weight: type.$font-weight-bold;
+$datatable-header-unsorted-color: color.$secondary;
+
+$_chevron-up: icons.get-colored-svg-url("2051", color.$gray-800);
+$_chevron-down: icons.get-colored-svg-url("2052", color.$gray-800);
+$datatable-sort-asc-icon: url($_chevron-up);
+$datatable-sort-desc-icon: url($_chevron-down);
+
+$datatable-cell-bg: color.$light;
+$datatable-cell-padding-x: spacing.$size-regular;
+$datatable-cell-padding-y: spacing.$size-mini;
+$datatable-cell-padding: $datatable-cell-padding-y $datatable-cell-padding-x;
+$datatable-cell-margin: spacing.$size-line;
+
+$datatable-inverted-cell-bg: color.$white;
+
+$datatable-flush-border-width: spacing.$size-line;
+$datatable-flush-border-color: color.$gray-100;
+$datatable-flush-border: $datatable-flush-border-width solid $datatable-flush-border-color;
+
+$datatable-footer-padding-x: spacing.$size-regular;
+$datatable-footer-padding-y: 0;
+$datatable-footer-padding: $datatable-footer-padding-y $datatable-footer-padding-x;
+
+$datatable-footer-separator-width: spacing.$size-line;
+$datatable-footer-separator-color: color.$gray-100;
+$datatable-footer-separator: $datatable-flush-border-width solid $datatable-flush-border-color;
+
+$datatable-row-count-input-width: spacing.$size-giant;
+$datatable-row-count-font-size: 125%;
+
+$datatable-button-margin: button.$btn-focus-width;
+$datatable-button-width: calc(100% - 2 * #{$datatable-button-margin});
+$datatable-button-height: $datatable-button-width;
+$datatable-button-focus-shadow: button.$btn-focus-box-shadow;
+
+$_pencil: icons.get-colored-svg-url("3193", color.$gray-800);
+$datatable-editable-icon: url($_pencil);

package/variables/components/_datepicker.scss

@@ -0,0 +1,14 @@
+@use "./forms";
+
+// nested calc functions are not supported by IE. That's the reason why the $input-height variable isn't used.
+
+$ngb-dp-icon-size: 22px;
+$ngb-dp-icon-padding: calc((#{forms.$input-height-inner} + #{forms.$input-height-border} - #{$ngb-dp-icon-size}) / 2);
+
+$ngb-dp-icon-size-sm: 18px;
+$ngb-dp-icon-padding-sm: calc((#{forms.$input-height-inner-sm} + #{forms.$input-height-border} - #{$ngb-dp-icon-size-sm}) / 2);
+
+$ngb-dp-icon-padding-rg: calc((#{forms.$input-height-inner-rg} + #{forms.$input-height-border} - #{$ngb-dp-icon-size}) / 2);
+
+$ngb-dp-icon-size-lg: 24px;
+$ngb-dp-icon-padding-lg: calc((#{forms.$input-height-inner-lg} + #{forms.$input-height-border} - #{$ngb-dp-icon-size-lg}) / 2);

package/variables/components/_dropdowns.scss

@@ -0,0 +1,30 @@
+@use "../color";
+@use "../commons";
+
+// Dropdowns
+//
+// Dropdown menu container and contents.
+
+$dropdown-min-width: 10rem !default;
+$dropdown-padding-y: .5rem !default;
+$dropdown-spacer: .125rem !default;
+$dropdown-bg: color.$white !default;
+$dropdown-border-color: rgba(color.$black, .15) !default;
+$dropdown-border-radius: commons.$border-radius !default;
+$dropdown-border-width: commons.$border-width !default;
+$dropdown-divider-bg: color.$white-alpha-60 !default;
+$dropdown-box-shadow: 0 .5rem 1rem rgba(color.$black, .175) !default;
+
+$dropdown-link-color: color.$gray-600 !default;
+$dropdown-link-hover-color: color.$black !default;
+$dropdown-link-hover-bg: color.$gray-50 !default;
+
+$dropdown-link-active-color: color.$gray-800 !default;
+$dropdown-link-active-bg: color.$yellow !default;
+
+$dropdown-link-disabled-color: color.$gray-200 !default;
+
+$dropdown-item-padding-y: .25rem !default;
+$dropdown-item-padding-x: 1.5rem !default;
+
+$dropdown-header-color: color.$gray-200 !default;

package/variables/components/_forms.scss

@@ -0,0 +1,256 @@
+@use "sass:map";
+
+@use "./button";
+@use "../color";
+@use "../type";
+@use "../spacing";
+@use "../commons";
+@use "../../functions/utilities";
+
+// Forms
+
+$label-margin-bottom: .5rem !default;
+
+$input-padding-y: button.$input-btn-padding-y !default;
+$input-padding-x: button.$input-btn-padding-x !default;
+$input-line-height: button.$input-btn-line-height !default;
+
+$input-padding-y-sm: button.$input-btn-padding-y-sm !default;
+$input-padding-x-sm: button.$input-btn-padding-x-sm !default;
+$input-line-height-sm: button.$input-btn-line-height-sm !default;
+
+$input-padding-y-rg: button.$input-btn-padding-y-rg !default;
+$input-padding-x-rg: button.$input-btn-padding-x-rg !default;
+$input-line-height-rg: button.$input-btn-line-height-rg !default;
+
+$input-padding-y-lg: button.$input-btn-padding-y-lg !default;
+$input-padding-x-lg: button.$input-btn-padding-x-lg !default;
+$input-line-height-lg: button.$input-btn-line-height-lg !default;
+
+$input-bg: color.$white !default;
+$input-disabled-bg: color.$white-alpha-60 !default;
+$input-disabled-color: color.$gray-600; // CWF only
+$input-disabled-border-color: color.$gray-200; // CWF only
+
+$input-color: color.$black !default;
+$input-border-color: color.$gray-600 !default;
+$input-border-width: button.$input-btn-border-width !default;
+$input-box-shadow: none !default;
+
+$input-border-radius: 0 !default;
+$input-border-radius-lg: 0 !default;
+$input-border-radius-rg: 0 !default;
+$input-border-radius-sm: 0 !default;
+
+$input-focus-bg: $input-bg !default;
+$input-focus-border-color: color.$black !default;
+$input-focus-color: $input-color !default;
+$input-focus-width: button.$input-btn-focus-width !default;
+$input-focus-box-shadow: button.$input-btn-focus-box-shadow !default;
+
+$input-placeholder-color: color.$gray-600 !default;
+$input-plaintext-color: color.$body-color !default;
+
+$input-height-border: $input-border-width * 2 !default;
+
+$input-height-inner: (type.$font-size-base * button.$input-btn-line-height) +
+  (button.$input-btn-padding-y * 2) !default;
+$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default;
+
+$input-height-inner-sm: (type.$font-size-sm * button.$input-btn-line-height-sm) +
+  (button.$input-btn-padding-y-sm * 2) !default;
+$input-height-sm: calc(
+  #{$input-height-inner-sm} + #{$input-height-border}
+) !default;
+
+$input-height-inner-rg: (type.$font-size-rg * button.$input-btn-line-height-rg) +
+  (button.$input-btn-padding-y-rg * 2) !default;
+$input-height-rg: calc(
+  #{$input-height-inner-rg} + #{$input-height-border}
+) !default;
+
+$input-height-inner-lg: (type.$font-size-lg * button.$input-btn-line-height-lg) +
+  (map.get(spacing.$post-sizes, "large") * 2) !default; // CWF
+$input-height-lg: calc(
+  #{$input-height-inner-lg} + #{$input-height-border}
+) !default;
+
+$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+$floating-label-spacing-x: map.get(spacing.$post-sizes, "regular"); // CWF only
+$floating-label-spacing-y: map.get(spacing.$post-sizes, "large"); // CWF only
+
+// Adjustment in rendering of selects in IE / Firefox
+$floating-label-select-spacing-x-ie: .9rem; // CWF only
+$floating-label-select-spacing-x-moz: .8rem; // CWF only
+
+$floating-label-padding: $floating-label-spacing-y 0 0 $floating-label-spacing-x; // CWF only
+$floating-label-input-padding: $floating-label-spacing-y
+  $floating-label-spacing-x 0; // CWF only
+$floating-label-color: color.$black-alpha-60; // CWF only
+$floating-label-font-size: type.$font-size-lg; // CWF only
+$floating-label-font-size-small: type.$font-size-tiny; // CWF only
+$floating-label-transition-distance: map.get(
+  spacing.$post-sizes,
+  "mini"
+); // CWF only
+
+$form-text-margin-top: .25rem !default;
+
+$form-check-input-gutter: 1.25rem !default;
+$form-check-input-margin-y: .3rem !default;
+$form-check-input-margin-x: .25rem !default;
+
+$form-check-inline-margin-x: .75rem !default;
+$form-check-inline-input-margin-x: .3125rem !default;
+
+$form-group-margin-bottom: 1rem !default;
+
+$input-group-addon-color: $input-color !default;
+$input-group-addon-bg: color.$white-alpha-60 !default;
+$input-group-addon-border-color: $input-border-color !default;
+
+$custom-control-gutter: .5rem !default;
+$custom-control-spacer-x: 1rem !default;
+
+$custom-control-indicator-size: 1rem !default;
+$custom-control-indicator-bg: color.$white-alpha-40 !default;
+$custom-control-indicator-bg-size: 50% 50% !default;
+$custom-control-indicator-box-shadow: none !default;
+
+$custom-control-indicator-disabled-bg: color.$white-alpha-60 !default;
+$custom-control-label-disabled-color: color.$gray-200 !default;
+
+$custom-control-indicator-checked-color: color.$black !default;
+$custom-control-indicator-checked-bg: color.$white !default;
+$custom-control-indicator-checked-box-shadow: none !default;
+$custom-control-indicator-focus-box-shadow: none !default;
+
+$custom-control-indicator-focus-box-shadow: 0 0 0 1px color.$body-bg,
+  button.$input-btn-focus-box-shadow !default;
+
+$custom-control-indicator-active-color: color.$white !default;
+$custom-control-indicator-active-bg: lighten(
+  map.get(color.$theme-colors, "primary"),
+  35%
+) !default;
+$custom-control-indicator-active-box-shadow: none !default;
+
+$custom-choice-control-size: 1.5rem !default;
+
+$custom-checkbox-indicator-border-radius: commons.$border-radius !default;
+$custom-checkbox-indicator-icon-checked: utilities.replace(
+  url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"),
+  "#",
+  "%23"
+) !default;
+
+$custom-checkbox-indicator-indeterminate-bg: map.get(color.$theme-colors,
+"primary"
+) !default;
+$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
+$custom-checkbox-indicator-icon-indeterminate: utilities.replace(
+  url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"),
+  "#",
+  "%23"
+) !default;
+$custom-checkbox-indicator-indeterminate-box-shadow: none !default;
+
+$custom-radio-indicator-border-radius: 50% !default;
+$custom-radio-indicator-icon-checked: utilities.replace(
+  url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -6 12 12'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"),
+  "#",
+  "%23"
+) !default;
+
+$custom-select-padding-y: .375rem !default;
+$custom-select-padding-x: .75rem !default;
+$custom-select-height: $input-height !default;
+$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator
+$custom-select-line-height: button.$input-btn-line-height !default;
+$custom-select-color: $input-color !default;
+$custom-select-disabled-color: color.$gray-200 !default;
+$custom-select-bg: $input-bg !default;
+$custom-select-disabled-bg: color.$white-alpha-60 !default;
+$custom-select-bg-size: 14px 14px !default; // In pixels because image dimensions
+$custom-select-indicator-color: color.$black !default;
+
+$custom-select-indicator: utilities.replace(
+  url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ctitle%3E2052%3C/title%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M27.6 10.667l-11.6 11.6-11.467-11.6-1.067 1.067 12.533 12.4 12.533-12.4z'%3E%3C/path%3E%3C/svg%3E"),
+  "#",
+  "%23"
+) !default;
+$custom-select-border-width: button.$input-btn-border-width !default;
+$custom-select-border-color: $input-border-color !default;
+$custom-select-border-radius: 0 !default;
+
+$custom-select-focus-border-color: $input-focus-border-color !default;
+$custom-select-focus-box-shadow: inset 0 1px 2px rgba(color.$black, .075),
+  0 0 5px rgba($custom-select-focus-border-color, .5) !default;
+
+$custom-select-font-size-sm: 75% !default;
+$custom-select-height-sm: $input-height-sm !default;
+
+$custom-select-font-size-rg: 100% !default;
+$custom-select-height-rg: $input-height-rg !default;
+
+$custom-select-font-size-lg: 125% !default;
+$custom-select-height-lg: $input-height-lg !default;
+
+$custom-range-track-width: 100% !default;
+$custom-range-track-height: .2rem !default;
+$custom-range-track-cursor: pointer !default;
+$custom-range-track-bg: color.$gray-200 !default;
+$custom-range-track-border-radius: 1rem !default;
+$custom-range-track-box-shadow: inset 0 .25rem .25rem rgba(color.$black, .1) !default;
+
+$custom-range-thumb-width: 2rem !default;
+$custom-range-thumb-height: $custom-range-thumb-width !default;
+$custom-range-thumb-bg: color.$white !default;
+$custom-range-thumb-border: 2px solid color.$black !default;
+$custom-range-thumb-border-radius: 1rem !default;
+$custom-range-thumb-box-shadow: 0 .1rem .25rem rgba(color.$black, .1) !default;
+$custom-range-thumb-focus-box-shadow: 0 0 0 1px color.$body-bg,
+  button.$input-btn-focus-box-shadow !default;
+$custom-range-thumb-active-bg: color.$white !default;
+
+$custom-range-input-height-ie: 6rem !default;
+
+$custom-file-height: $input-height !default;
+$custom-file-height-inner: $input-height-inner !default;
+$custom-file-focus-border-color: $input-focus-border-color !default;
+$custom-file-focus-box-shadow: button.$input-btn-focus-box-shadow !default;
+
+$custom-file-padding-y: button.$input-btn-padding-y !default;
+$custom-file-padding-x: button.$input-btn-padding-x !default;
+$custom-file-line-height: button.$input-btn-line-height !default;
+$custom-file-color: $input-color !default;
+$custom-file-bg: $input-bg !default;
+$custom-file-border-width: button.$input-btn-border-width !default;
+$custom-file-border-color: $input-border-color !default;
+$custom-file-border-radius: $input-border-radius !default;
+$custom-file-box-shadow: $input-box-shadow !default;
+$custom-file-button-color: $custom-file-color !default;
+$custom-file-button-bg: $input-group-addon-bg !default;
+$custom-file-text: (
+  en: "Browse"
+) !default;
+
+// Form validation
+$form-feedback-valid-icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24pt' height='24pt' viewBox='0 0 24 24' version='1.1'%3E%3Cg id='surface1'%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(0%25,50.588235%25,22.745098%25);fill-opacity:1;' d='M 9.5 18.398438 L 3.800781 12.699219 L 5.199219 11.300781 L 9.5 15.597656 L 18.800781 6.300781 L 20.199219 7.699219 Z M 9.5 18.398438 '/%3E%3C/g%3E%3C/svg%3E%0A"); // CWF only
+$form-feedback-invalid-icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24pt' height='24pt' viewBox='0 0 24 24' version='1.1'%3E%3Cg id='surface1'%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(64.705882%25,9.019608%25,15.686275%25);fill-opacity:1;' d='M 11 3 L 13 3 L 13 17 L 11 17 Z M 11 3 '/%3E%3Cpath style=' stroke:none;fill-rule:nonzero;fill:rgb(64.705882%25,9.019608%25,15.686275%25);fill-opacity:1;' d='M 11 19 L 13 19 L 13 21 L 11 21 Z M 11 19 '/%3E%3C/g%3E%3C/svg%3E%0A"); // CWF only
+$form-feedback-icon-size: 2rem; // Equals 24pt [svg-size] // CWF only
+$form-feedback-icon-offset: map.get(spacing.$post-sizes, "mini"); // CWF only
+
+$form-feedback-margin-top: 0 !default;
+$form-feedback-font-size: type.$font-size-rg !default;
+$form-feedback-valid-color: color.$gray-600 !default;
+$form-feedback-valid-bg: map.get(color.$theme-colors, "success") !default;
+$form-feedback-valid-text: color.$white !default;
+$form-feedback-invalid-color: map.get(color.$theme-colors, "danger") !default;
+$form-feedback-invalid-bg: map.get(color.$theme-colors, "danger") !default;
+$form-feedback-invalid-text: color.$white !default;
+$form-feedback-custom-color: map.get(color.$theme-colors, "success") !default; // CWF only
+$form-feedback-custom-bg: map.get(color.$theme-colors, "success") !default; // CWF only
+$form-feedback-custom-text: color.$white !default; // CWF only
+$form-feedback-custom-box-shadow: 0 0 0 .2rem rgba($form-feedback-custom-color, .25) !default; // CWF only

package/variables/components/_intranet-header.scss

@@ -0,0 +1,9 @@
+$header-size:        65px;
+$header-size-big:   130px;
+
+$header-content-size:       $header-size - 1;
+$header-content-size-big:   $header-size-big - 1;
+
+$zindex-sidebar:      500;
+
+$profile-image-size: 2.5rem;

package/variables/components/_modals.scss

@@ -0,0 +1,68 @@
+@use "../color";
+@use "../type";
+@use "../commons";
+@use "../spacing";
+
+@use "../../functions/sizing";
+
+@use "./button";
+
+// Modals
+
+// Padding applied to the modal footer
+$modal-inner-padding: spacing.$size-regular !default;
+
+// Padding applied to the modal body
+$modal-body-padding-y: spacing.$size-mini !default;
+$modal-body-padding-x: spacing.$size-big !default;
+$modal-body-padding: $modal-body-padding-y $modal-body-padding-x !default;
+
+// Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
+$modal-footer-margin-between: .5rem !default;
+
+$modal-dialog-margin: spacing.$size-small-regular !default;
+$modal-dialog-margin-y-sm-up: spacing.$size-big !default;
+
+$modal-title-line-height: type.$line-height-base !default;
+
+$modal-content-color: null !default;
+$modal-content-bg: color.$white !default;
+$modal-content-border-color: rgba(color.$black, .2) !default;
+$modal-content-border-width: commons.$border-width !default;
+$modal-content-border-radius: commons.$border-radius-lg !default;
+$modal-content-inner-border-radius: subtract(
+  $modal-content-border-radius,
+  $modal-content-border-width
+) !default;
+$modal-content-box-shadow-xs: 0 .25rem .5rem rgba(color.$black, .5) !default;
+$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba(color.$black, .5) !default;
+
+$modal-backdrop-bg: color.$black !default;
+$modal-backdrop-opacity: .5 !default;
+$modal-header-border-color: commons.$border-color !default;
+$modal-footer-border-color: $modal-header-border-color !default;
+$modal-header-border-width: $modal-content-border-width !default;
+$modal-footer-border-width: $modal-header-border-width !default;
+$modal-header-padding-y: spacing.$size-large !default;
+$modal-header-padding-x: $modal-body-padding-x !default;
+$modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
+
+$modal-dialog-width-xl: 1140px !default;
+$modal-dialog-width-lg: 800px !default;
+$modal-dialog-width-md: 500px !default;
+$modal-dialog-width-sm: 300px !default;
+
+$modal-xl: sizing.px-to-rem($modal-dialog-width-xl) - 2 * $modal-dialog-margin !default;
+$modal-lg: sizing.px-to-rem($modal-dialog-width-lg) - 2 * $modal-dialog-margin !default;
+$modal-md: sizing.px-to-rem($modal-dialog-width-md) - 2 * $modal-dialog-margin !default;
+$modal-sm: sizing.px-to-rem($modal-dialog-width-sm) - 2 * $modal-dialog-margin !default;
+
+$modal-fade-transform: translate(0, -50px) !default;
+$modal-show-transform: none !default;
+$modal-transition: transform .3s ease-out !default;
+$modal-scale-transform: scale(1.02) !default;
+
+// Padding applied to the close button
+$modal-close-btn-padding-y: button.$btn-padding-y !default;
+$modal-close-btn-padding-x: button.$btn-padding-x !default;
+$modal-close-btn-padding: $modal-close-btn-padding-y $modal-close-btn-padding-x !default;

package/variables/components/_nav.scss

@@ -0,0 +1,82 @@
+@use "../color";
+@use "../commons";
+@use "../type";
+@use "../spacing";
+@use "./button";
+@use "../../functions/utilities";
+
+// Navs
+
+$nav-link-padding: spacing.$spacer !default;
+$nav-link-padding-y: spacing.$spacer !default;
+$nav-link-padding-x: 1rem !default;
+$nav-link-disabled-color: color.$gray-200 !default;
+
+$nav-tabs-border-color: color.$gray-200 !default;
+$nav-tabs-border-width: 4px !default;
+$nav-tabs-border-radius: none !default;
+$nav-tabs-link-hover-bg: lighten(color.$gray-100, 5%) !default;
+$nav-tabs-link-hover-border-color: color.$gray-400 !default;
+$nav-tabs-link-text-color: color.$gray-600 !default;
+$nav-tabs-link-active-color: color.$black !default;
+$nav-tabs-link-active-bg: color.$white !default;
+$nav-tabs-link-active-border-color: color.$yellow !default;
+$nav-tabs-link-active-font-weight: bold !default;
+
+$nav-tabs-i-border-color: color.$white-alpha-40 !default;
+$nav-tabs-i-link-hover-bg: color.$black-alpha-10 !default;
+$nav-tabs-i-link-hover-border-color: color.$white-alpha-80 !default;
+$nav-tabs-i-link-text-color: color.$white !default;
+$nav-tabs-i-link-active-color: color.$white !default;
+
+$nav-tabs-alternate-link-hover-bg: color.$white !default;
+
+$nav-pills-outline-border-width: commons.$border-width !default;
+$nav-pills-border-radius: commons.$border-radius !default;
+$nav-pills-link-active-color: color.$component-active-color !default;
+$nav-pills-link-active-bg: color.$component-active-bg !default;
+
+$nav-divider-color: color.$gray-200 !default;
+$nav-divider-margin-y: (spacing.$spacer / 2) !default;
+
+// Navbar
+
+$navbar-padding-y: (spacing.$spacer / 2) !default;
+$navbar-padding-x: spacing.$spacer !default;
+
+$navbar-nav-link-padding-x: .5rem !default;
+
+$navbar-brand-font-size: type.$font-size-lg !default;
+// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
+$nav-link-height: (
+  type.$font-size-base * type.$line-height-base + $nav-link-padding-y * 2
+) !default;
+$navbar-brand-height: $navbar-brand-font-size * type.$line-height-base !default;
+$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;
+
+$navbar-toggler-padding-y: .25rem !default;
+$navbar-toggler-padding-x: .75rem !default;
+$navbar-toggler-font-size: type.$font-size-lg !default;
+$navbar-toggler-border-radius: button.$btn-border-radius !default;
+
+$navbar-dark-color: rgba(color.$white, .5) !default;
+$navbar-dark-hover-color: rgba(color.$white, .75) !default;
+$navbar-dark-active-color: color.$white !default;
+$navbar-dark-disabled-color: rgba(color.$white, .25) !default;
+$navbar-dark-toggler-icon-bg: utilities.replace(
+  url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"),
+  "#",
+  "%23"
+) !default;
+$navbar-dark-toggler-border-color: rgba(color.$white, .1) !default;
+
+$navbar-light-color: rgba(color.$black, .5) !default;
+$navbar-light-hover-color: rgba(color.$black, .7) !default;
+$navbar-light-active-color: rgba(color.$black, .9) !default;
+$navbar-light-disabled-color: rgba(color.$black, .3) !default;
+$navbar-light-toggler-icon-bg: utilities.replace(
+  url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"),
+  "#",
+  "%23"
+) !default;
+$navbar-light-toggler-border-color: rgba(color.$black, .1) !default;

package/variables/components/_pagination.scss

@@ -0,0 +1,41 @@
+@use "../color";
+@use "../spacing";
+@use "../type";
+@use "../commons";
+@use "./button";
+
+// Pagination
+
+$pagination-padding-y: spacing.$size-mini !default;
+$pagination-padding-x: 0 !default;
+$pagination-padding-y-sm: spacing.$size-micro !default;
+$pagination-padding-x-sm: 0 !default;
+$pagination-padding-y-lg: spacing.$size-small-regular !default;
+$pagination-padding-x-lg: 0 !default;
+$pagination-line-height: 1.25 !default;
+
+$pagination-color: color.$gray-600 !default;
+$pagination-bg: color.$white !default;
+$pagination-border-width: 2px !default;
+$pagination-border-color: color.$gray-100 !default;
+
+$pagination-focus-box-shadow: button.$input-btn-focus-box-shadow !default;
+$pagination-focus-outline: 0 !default;
+
+$pagination-hover-color: color.$black !default;
+$pagination-hover-bg: color.$gray-50 !default;
+$pagination-hover-border-color: color.$gray-100 !default;
+
+$pagination-active-color: color.$black !default;
+$pagination-active-bg: color.$yellow !default;
+$pagination-active-border-color: color.$yellow !default;
+
+$pagination-disabled-color: color.$gray-400 !default;
+$pagination-disabled-bg: color.$gray-50 !default;
+$pagination-disabled-border-color: color.$gray-100 !default;
+
+$pagination-height-border: $pagination-border-width * 2 !default;
+$pagination-height-inner: (type.$font-size-base * $pagination-line-height) + ($pagination-padding-y * 2) !default;
+$pagination-height: calc(#{$pagination-height-inner} + #{$pagination-height-border}) !default;
+
+$pagination-width: $pagination-height !default;

package/variables/components/_paragraph.scss

@@ -0,0 +1,6 @@
+// Paragraphs
+//
+// Style p element.
+
+$paragraph-margin-bottom: .8em !default;
+$text-bottom-space: .8em !default;

package/variables/components/_popovers.scss

@@ -0,0 +1,28 @@
+@use "../type";
+@use "../color";
+@use "../commons";
+
+// Popovers
+
+$popover-font-size: type.$font-size-sm !default;
+$popover-bg: color.$info !default;
+$popover-max-width: 310px !default;
+$popover-border-width: commons.$border-width !default;
+$popover-border-color: $popover-bg !default;
+$popover-border-radius: commons.$border-radius-lg !default;
+$popover-box-shadow: none !default;
+
+$popover-header-bg: $popover-bg !default;
+$popover-header-color: type.$headings-color !default;
+$popover-header-padding-y: .5rem !default;
+$popover-header-padding-x: .5rem !default;
+
+$popover-body-color: color.$black !default;
+$popover-body-padding-y: $popover-header-padding-y !default;
+$popover-body-padding-x: $popover-header-padding-x !default;
+
+$popover-arrow-width: 1rem !default;
+$popover-arrow-height: .5rem !default;
+$popover-arrow-color: $popover-bg !default;
+
+$popover-arrow-outer-color: $popover-bg !default;

package/variables/components/_progress-bars.scss

@@ -0,0 +1,16 @@
+@use "sass:map";
+@use "../color";
+@use "../type";
+@use "../commons";
+
+// Progress bars
+
+$progress-height: 1rem !default;
+$progress-font-size: type.$font-size-base * .75 !default;
+$progress-bg: color.$gray-200 !default;
+$progress-border-radius: commons.$border-radius !default;
+$progress-box-shadow: inset 0 .1rem .1rem rgba(color.$black, .1) !default;
+$progress-bar-color: color.$white !default;
+$progress-bar-bg: map.get(color.$theme-colors, "primary") !default;
+$progress-bar-animation-timing: 1s linear infinite !default;
+$progress-bar-transition: width .6s ease !default;

package/variables/components/_stepper.scss

@@ -0,0 +1,26 @@
+/*!
+ * Copyright 2021 by Swiss Post, Information Technology
+ */
+
+@use "../../functions/icons" as icon-functions;
+@use "../../variables/color";
+@use "../../variables/spacing";
+
+
+$stepper-bar-size: spacing.$size-micro;
+
+$step-indicator-size: spacing.$size-bigger-big;
+$step-indicator-default-bg: color.$secondary;
+$step-indicator-default-color: color.$white;
+$step-indicator-active-bg: color.$yellow;
+$step-indicator-active-color: color.$black;
+$step-indicator-hover-bg: color.$black;
+$step-indicator-hover-color: color.$white;
+
+$step-name-height: spacing.$size-small-large;
+$step-name-color: color.$black-alpha-60;
+
+$_black-check-mark: icon-functions.get-colored-svg-url(2105, color.$black);
+$_white-check-mark: icon-functions.get-colored-svg-url(2105, color.$white);
+$step-indicator-passed-icon: url($_black-check-mark);
+$step-indicator-passed-icon-hover: url($_white-check-mark);

package/variables/components/_subnavigation.scss

@@ -0,0 +1,36 @@
+@use "sass:map";
+@use "../color";
+@use "../commons";
+@use "../spacing";
+@use "../../functions/sizing";
+
+// Subnavigation
+
+$subnavigation-background-color: color.$white;
+$subnavigation-background-color-alternate: map.get(color.$background-colors, "light");
+$subnavigation-background-color-inverted: transparent;
+
+$subnavigation-border-bottom-width: commons.$border-width;
+$subnavigation-border-bottom-color: map.get(color.$grays, "100");
+$subnavigation-border-bottom-color-inverted: map.get(color.$black-alphas, "20");
+
+// These heights have to be synchronous to main navigation heights
+$subnavigation-height-xs: sizing.px-to-rem(56);
+$subnavigation-height-lg: sizing.px-to-rem(64);
+$subnavigation-height-xl: sizing.px-to-rem(72);
+
+$subnavigation-link-color: map.get(color.$grays, "600");
+$subnavigation-link-color-hover: map.get(color.$colors, "black");
+
+$subnavigation-link-color-inverted: map.get(color.$white-alphas, "60");
+$subnavigation-link-color-hover-inverted: map.get(color.$colors, "white");
+
+$subnavigation-link-underscore-height: map.get(spacing.$post-sizes, "micro");
+$subnavigation-link-underscore-color-active: map.get(color.$theme-colors, "active");
+$subnavigation-link-underscore-color-hover: map.get(color.$grays, "400");
+$subnavigation-link-underscore-color-hover-inverted: map.get(color.$white-alphas, "40");
+
+$subnavigation-link-padding-xs: map.get(spacing.$post-sizes, "regular") map.get(spacing.$post-sizes, "small-regular");
+$subnavigation-link-padding-lg: map.get(spacing.$post-sizes, "small-large") map.get(spacing.$post-sizes, "regular");
+
+$subnavigation-result-margin-left: map.get(spacing.$post-sizes, "mini");