@ptsecurity/mosaic 13.9.1 → 13.11.0

package/_visual.scss

@@ -33,26 +33,26 @@ $dark-color-scheme-error-default: #b9023a;
 $dark-color-scheme-info-default: #0c6579;
 $dark-color-scheme-success-default: #016b37;
 $dark-color-scheme-warning-default: #7e5406;
-$dark-color-scheme-foreground-text: #f2f5f9;
+$dark-color-scheme-foreground-text: #d7dee4;
 $dark-color-scheme-foreground-text-less-contrast: #8c99a5;
 $dark-color-scheme-foreground-text-disabled: #6d7a86;
 $dark-color-scheme-foreground-text-error: #ea5868;
 $dark-color-scheme-foreground-text-success: #319d5c;
-$dark-color-scheme-foreground-divider: #333f4a;
+$dark-color-scheme-foreground-divider: mix(#515e69, transparent, 50%);
 $dark-color-scheme-foreground-border: #515e69;
 $dark-color-scheme-foreground-icon: #8c99a5;
 $dark-color-scheme-background-background: #19252f;
 $dark-color-scheme-background-background-disabled: #333f4a;
 $dark-color-scheme-background-background-less-contrast: #27333e;
 $dark-color-scheme-background-background-under: #151e25;
-$dark-color-scheme-background-overlay-hover: rgba(black, 0.05);
-$dark-color-scheme-background-overlay-active: rgba(black, 0.1);
+$dark-color-scheme-background-overlay-hover: rgba(white, 0.05);
+$dark-color-scheme-background-overlay-active: rgba(white, 0.1);
 $dark-color-scheme-background-overlay-disabled: rgba(black, 0.2);
 $dark-color-scheme-states-focused-color: #4187ff;
 $dark-color-scheme-states-focused-color-error: #b9023a;
-$dark-color-scheme-states-selected-color: #023c7f;
+$dark-color-scheme-states-selected-color: rgba(3, 116, 235, 0.3);
 $dark-color-scheme-states-pressed-shadow: inset 1px 2px 2px 0 rgba(black, 0.2);
-$dark-color-scheme-states-disabled-opacity: 0.3;
+$dark-color-scheme-states-disabled-opacity: 0.45;
 $font-family-accent: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $font-family-base: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $font-family-monospace: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
@@ -501,6 +501,7 @@ $card-dark-color-scheme-info-shadow: #084453;
 $card-size-vertical-line: 4px;
 $checkbox-light-color-scheme-default-border: #bdc7d1;
 $checkbox-light-color-scheme-default-color: white;
+$checkbox-light-color-scheme-default-background: transparent;
 $checkbox-light-color-scheme-default-states-checked-border: #0374eb;
 $checkbox-light-color-scheme-default-states-checked-background: #0374eb;
 $checkbox-light-color-scheme-default-states-focused-border: #0374eb;
@@ -511,6 +512,7 @@ $checkbox-light-color-scheme-default-states-checked-focused-shadow: 0 0 0 1px #0
 $checkbox-light-color-scheme-default-states-checked-focused-outline: 1px solid white;
 $checkbox-light-color-scheme-error-border: #db3c55;
 $checkbox-light-color-scheme-error-color: white;
+$checkbox-light-color-scheme-error-background: transparent;
 $checkbox-light-color-scheme-error-states-checked-border: #db3c55;
 $checkbox-light-color-scheme-error-states-checked-background: #db3c55;
 $checkbox-light-color-scheme-error-states-focused-border: #db3c55;
@@ -521,6 +523,7 @@ $checkbox-light-color-scheme-error-states-checked-focused-shadow: 0 0 0 1px #db3
 $checkbox-light-color-scheme-error-states-checked-focused-outline: 1px solid white;
 $checkbox-dark-color-scheme-default-border: #515e69;
 $checkbox-dark-color-scheme-default-color: white;
+$checkbox-dark-color-scheme-default-background: transparent;
 $checkbox-dark-color-scheme-default-states-checked-border: #0059b8;
 $checkbox-dark-color-scheme-default-states-checked-background: #0059b8;
 $checkbox-dark-color-scheme-default-states-focused-border: #4187ff;
@@ -531,6 +534,7 @@ $checkbox-dark-color-scheme-default-states-checked-focused-shadow: 0 0 0 1px #41
 $checkbox-dark-color-scheme-default-states-checked-focused-outline: 1px solid #19252f;
 $checkbox-dark-color-scheme-error-border: #b9023a;
 $checkbox-dark-color-scheme-error-color: white;
+$checkbox-dark-color-scheme-error-background: transparent;
 $checkbox-dark-color-scheme-error-states-checked-border: #b9023a;
 $checkbox-dark-color-scheme-error-states-checked-background: #b9023a;
 $checkbox-dark-color-scheme-error-states-focused-border: #b9023a;
@@ -549,7 +553,7 @@ $datepicker-toggle-size-height: 30px;
 $datepicker-body-light-color-scheme-states-selected-color: #0374eb;
 $datepicker-body-light-color-scheme-states-selected-background: #e7f1ff;
 $datepicker-body-dark-color-scheme-states-selected-color: #4187ff;
-$datepicker-body-dark-color-scheme-states-selected-background: #023c7f;
+$datepicker-body-dark-color-scheme-states-selected-background: rgba(3, 116, 235, 0.3);
 $datepicker-body-size-label-paddings: 8px 28px 12px 12px;
 $datepicker-body-size-cell-min-size: 32px;
 $datepicker-body-size-cell-margin: 5%;
@@ -569,13 +573,13 @@ $datepicker-calendar-font-default: body;
 $datepicker-calendar-font-header: caption;
 $datepicker-input-size-width: 130px;
 $divider-light-color-scheme-color: #d7dee4;
-$divider-dark-color-scheme-color: #333f4a;
+$divider-dark-color-scheme-color: mix(#515e69, transparent, 50%);
 $divider-size-width: 1px;
 $divider-size-inset-margin: 80px;
 $description-list-light-color-scheme-dt: #6d7a86;
 $description-list-light-color-scheme-dd: #19252f;
 $description-list-dark-color-scheme-dt: #8c99a5;
-$description-list-dark-color-scheme-dd: #f2f5f9;
+$description-list-dark-color-scheme-dd: #d7dee4;
 $description-list-size-grid-template-columns: repeat(4, 1fr);
 $description-list-size-dt-grid-column: 1;
 $description-list-size-dd-grid-column: 2 / span 3;
@@ -608,12 +612,12 @@ $form-field-light-color-scheme-border: #bdc7d1;
 $form-field-light-color-scheme-background: white;
 $form-field-light-color-scheme-states-hover-border: #8c99a5;
 $form-field-light-color-scheme-states-invalid-border: #db3c55;
-$form-field-light-color-scheme-states-invalid-background: transparent;
+$form-field-light-color-scheme-states-invalid-background: #fff3f3;
 $form-field-dark-color-scheme-border: #515e69;
 $form-field-dark-color-scheme-background: transparent;
-$form-field-dark-color-scheme-states-hover-border: #515e69;
+$form-field-dark-color-scheme-states-hover-border: #6d7a86;
 $form-field-dark-color-scheme-states-invalid-border: #b9023a;
-$form-field-dark-color-scheme-states-invalid-background: transparent;
+$form-field-dark-color-scheme-states-invalid-background: mix(#41000b, transparent, 30%);
 $form-field-size-height: 32px;
 $form-field-size-border-width: 1px;
 $form-field-size-border-radius: 4px;
@@ -627,10 +631,10 @@ $form-field-password-hint-light-color-scheme-states-invalid-icon-color: #ee6f79;
 $form-field-password-hint-light-color-scheme-states-invalid-text-color: #19252f;
 $form-field-password-hint-light-color-scheme-states-valid-text-color: #016b37;
 $form-field-password-hint-light-color-scheme-states-valid-icon-color: #4ba96c;
-$form-field-password-hint-dark-color-scheme-text-color: #f2f5f9;
+$form-field-password-hint-dark-color-scheme-text-color: #d7dee4;
 $form-field-password-hint-dark-color-scheme-icon-color: #8c99a5;
 $form-field-password-hint-dark-color-scheme-states-invalid-icon-color: #ee6f79;
-$form-field-password-hint-dark-color-scheme-states-invalid-text-color: #f2f5f9;
+$form-field-password-hint-dark-color-scheme-states-invalid-text-color: #d7dee4;
 $form-field-password-hint-dark-color-scheme-states-valid-text-color: #319d5c;
 $form-field-password-hint-dark-color-scheme-states-valid-icon-color: #4ba96c;
 $form-field-password-hint-size-margin-top: 8px;
@@ -639,7 +643,7 @@ $form-field-password-hint-font-default: caption;
 $forms-light-color-scheme-label: #6d7a86;
 $forms-light-color-scheme-legend: #19252f;
 $forms-dark-color-scheme-label: #8c99a5;
-$forms-dark-color-scheme-legend: #f2f5f9;
+$forms-dark-color-scheme-legend: #d7dee4;
 $forms-size-horizontal-row-margin-bottom: 20px;
 $forms-size-horizontal-label-padding-top: 6px;
 $forms-size-horizontal-label-padding-bottom: 0;
@@ -707,7 +711,7 @@ $input-size-width: 100%;
 $input-font-default: body;
 $input-font-monospace: body-mono;
 $link-light-color-scheme-text: #0374eb;
-$link-light-color-scheme-border-bottom: rgba(#8c99a5, 0.32);
+$link-light-color-scheme-border-bottom: rgba(#0374eb, 0.32);
 $link-light-color-scheme-state-visited-text: #864775;
 $link-light-color-scheme-state-visited-border-bottom: rgba(#864775, 0.32);
 $link-light-color-scheme-state-hover-text: #0059b8;
@@ -715,7 +719,7 @@ $link-light-color-scheme-state-hover-border-bottom: rgba(#0059b8, 0.32);
 $link-light-color-scheme-state-active: #014b9d;
 $link-light-color-scheme-state-focused-outline: #0374eb;
 $link-dark-color-scheme-text: #5697ff;
-$link-dark-color-scheme-border-bottom: rgba(#6d7a86, 0.32);
+$link-dark-color-scheme-border-bottom: rgba(#5697ff, 0.32);;
 $link-dark-color-scheme-state-visited-text: #bb78a7;
 $link-dark-color-scheme-state-visited-border-bottom: rgba(#bb78a7, 0.32);
 $link-dark-color-scheme-state-hover-text: #4187ff;
@@ -734,7 +738,7 @@ $loader-overlay-light-color-scheme-background: mix(white, transparent, 90%);
 $loader-overlay-light-color-scheme-text: #19252f;
 $loader-overlay-light-color-scheme-caption: #6d7a86;
 $loader-overlay-dark-color-scheme-background: mix(#19252f, transparent, 90%);
-$loader-overlay-dark-color-scheme-text: #f2f5f9;
+$loader-overlay-dark-color-scheme-text: #d7dee4;
 $loader-overlay-dark-color-scheme-caption: #8c99a5;
 $loader-overlay-size-text-max-width: 480px;
 $loader-overlay-size-fixed-top-padding: 72px;
@@ -757,7 +761,7 @@ $modal-size-close-width: 56px;
 $modal-size-border-radius: 4px;
 $modal-size-border-width: 1px;
 $modal-header-light-color-scheme-border: #d7dee4;
-$modal-header-dark-color-scheme-border: #333f4a;
+$modal-header-dark-color-scheme-border: mix(#515e69, transparent, 50%);
 $modal-header-size-border-radius: 4px 4px 0 0;
 $modal-header-size-height: 56px;
 $modal-header-size-padding: 0 16px;
@@ -766,7 +770,7 @@ $modal-body-size-max-height: calc(100vh - 260px);
 $modal-body-size-padding: 16px 24px 24px;
 $modal-body-font-default: body;
 $modal-footer-light-color-scheme-border: #f2f5f9;
-$modal-footer-dark-color-scheme-border: #333f4a;
+$modal-footer-dark-color-scheme-border: mix(#515e69, transparent, 50%);
 $modal-footer-size-border-radius: 0 0 4px 4px;
 $modal-footer-size-height: 64px;
 $modal-footer-size-padding: 0 16px;
@@ -812,12 +816,13 @@ $popover-light-color-scheme-text: #19252f;
 $popover-light-color-scheme-shadow: 0 3px 8px 0 rgba(39, 51, 62, 0.2);
 $popover-light-color-scheme-border: #d7dee4;
 $popover-dark-color-scheme-background: #333f4a;
-$popover-dark-color-scheme-text: #f2f5f9;
+$popover-dark-color-scheme-text: #d7dee4;
 $popover-dark-color-scheme-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2);
 $popover-dark-color-scheme-border: #333f4a;
 $popover-size-max-height: 480px;
 $popover-size-padding: 16px;
 $popover-size-border-radius: 4px;
+$popover-size-border-width: 1px;
 $popover-size-arrow-size: 12px;
 $popover-size-trigger-margin: 9px;
 $popover-size-small-width: 200px;
@@ -828,7 +833,7 @@ $popover-header-light-color-scheme-border: #d7dee4;
 $popover-header-light-color-scheme-text: #19252f;
 $popover-header-light-color-scheme-background: white;
 $popover-header-dark-color-scheme-border: #434f5a;
-$popover-header-dark-color-scheme-text: #f2f5f9;
+$popover-header-dark-color-scheme-text: #d7dee4;
 $popover-header-dark-color-scheme-background: #333f4a;
 $popover-header-size-height: 40px;
 $popover-header-size-padding: 0 16px;
@@ -888,13 +893,13 @@ $sidepanel-light-color-scheme-border: #bdc7d1;
 $sidepanel-dark-color-scheme-border: #19252f;
 $sidepanel-font-default: body;
 $sidepanel-header-light-color-scheme-border: #d7dee4;
-$sidepanel-header-dark-color-scheme-border: #333f4a;
+$sidepanel-header-dark-color-scheme-border: mix(#515e69, transparent, 50%);
 $sidepanel-header-size-height: 56px;
 $sidepanel-header-size-padding: 0 16px;
 $sidepanel-header-size-close-padding: 0 0 0 8px;
 $sidepanel-header-font-default: title;
 $sidepanel-footer-light-color-scheme-border: #f2f5f9;
-$sidepanel-footer-dark-color-scheme-border: #333f4a;
+$sidepanel-footer-dark-color-scheme-border: mix(#515e69, transparent, 50%);
 $sidepanel-footer-size-height: 64px;
 $sidepanel-footer-size-padding: 0 16px;
 $sidepanel-footer-font-default: body;
@@ -916,9 +921,9 @@ $tabs-light-color-scheme-state-disabled-text: #8c99a5;
 $tabs-light-color-scheme-state-disabled-marker-opacity: 0.3;
 $tabs-dark-color-scheme-border: #333f4a;
 $tabs-dark-color-scheme-state-normal-icon: #8c99a5;
-$tabs-dark-color-scheme-state-normal-text: #f2f5f9;
+$tabs-dark-color-scheme-state-normal-text: #d7dee4;
 $tabs-dark-color-scheme-state-hover-icon: #6d7a86;
-$tabs-dark-color-scheme-state-hover-text: #f2f5f9;
+$tabs-dark-color-scheme-state-hover-text: #d7dee4;
 $tabs-dark-color-scheme-state-active-marker-color: #0059b8;
 $tabs-dark-color-scheme-state-empty-icon: mix(#8c99a5, transparent, 30%);
 $tabs-dark-color-scheme-state-empty-text: #6d7a86;
@@ -937,9 +942,9 @@ $vertical-tabs-light-color-scheme-state-selected-background: #e7f1ff;
 $vertical-tabs-light-color-scheme-state-hover-background: rgba(black, 0.05);
 $vertical-tabs-light-color-scheme-state-hover-selected-background: adjust-color(#e7f1ff, $saturation:-22%, $lightness:-5%);
 $vertical-tabs-dark-color-scheme-state-normal-background: transparent;
-$vertical-tabs-dark-color-scheme-state-selected-background: #023c7f;
-$vertical-tabs-dark-color-scheme-state-hover-background: rgba(black, 0.05);
-$vertical-tabs-dark-color-scheme-state-hover-selected-background: adjust-color(#023c7f, $lightness:-1%);
+$vertical-tabs-dark-color-scheme-state-selected-background: rgba(3, 116, 235, 0.3);
+$vertical-tabs-dark-color-scheme-state-hover-background: rgba(white, 0.05);
+$vertical-tabs-dark-color-scheme-state-hover-selected-background: adjust-color(rgba(3, 116, 235, 0.3), $lightness:-1%);
 $tags-light-color-scheme-primary-background: #e7f1ff;
 $tags-light-color-scheme-primary-border: transparent;
 $tags-light-color-scheme-primary-text: #0374eb;
@@ -1023,7 +1028,7 @@ $toast-light-color-scheme-icon-success: #4ba96c;
 $toast-light-color-scheme-icon-warning: #e19f12;
 $toast-dark-color-scheme-background: #333f4a;
 $toast-dark-color-scheme-border: rgba(25, 37, 47, 0.1);
-$toast-dark-color-scheme-text: #f2f5f9;
+$toast-dark-color-scheme-text: #d7dee4;
 $toast-dark-color-scheme-text-caption: #8c99a5;
 $toast-dark-color-scheme-shadow: 0 8px 16px 0 rgba(#27333e, 0.2);
 $toast-dark-color-scheme-icon-info: #18a5c5;
@@ -1075,7 +1080,7 @@ $toggle-small-size-width: 24px;
 $toggle-small-size-border-radius: 8px;
 $toggle-small-font-default: caption;
 $tooltip-light-color-scheme-background: #333f4a;
-$tooltip-light-color-scheme-text: #f2f5f9;
+$tooltip-light-color-scheme-text: #d7dee4;
 $tooltip-light-color-scheme-border: transparent;
 $tooltip-light-color-scheme-shadow: 0 2px 4px 0 rgba(39, 51, 62, 0.2);
 $tooltip-light-color-scheme-warning-background: #fff4dd;
@@ -1086,7 +1091,7 @@ $tooltip-dark-color-scheme-text: #19252f;
 $tooltip-dark-color-scheme-border: transparent;
 $tooltip-dark-color-scheme-shadow: 0 2px 4px 0 rgba(39, 51, 62, 0.2);
 $tooltip-dark-color-scheme-warning-background: #7e5406;
-$tooltip-dark-color-scheme-warning-text: #f2f5f9;
+$tooltip-dark-color-scheme-warning-text: #d7dee4;
 $tooltip-dark-color-scheme-warning-border: #7e5406;
 $tooltip-size-max-width: 300px;
 $tooltip-size-border-width: 1px;
@@ -1100,7 +1105,7 @@ $extended-tooltip-light-color-scheme-text: #19252f;
 $extended-tooltip-light-color-scheme-border: #d7dee4;
 $extended-tooltip-light-color-scheme-shadow: 0 2px 4px 0 rgba(39, 51, 62, 0.2);
 $extended-tooltip-dark-color-scheme-background: #333f4a;
-$extended-tooltip-dark-color-scheme-text: #f2f5f9;
+$extended-tooltip-dark-color-scheme-text: #d7dee4;
 $extended-tooltip-dark-color-scheme-border: #333f4a;
 $extended-tooltip-dark-color-scheme-shadow: 0 2px 4px 0 rgba(39, 51, 62, 0.2);
 $extended-tooltip-size-border-radius: 4px;
@@ -1113,7 +1118,7 @@ $extended-tooltip-header-light-color-scheme-border: #d7dee4;
 $extended-tooltip-header-light-color-scheme-text: #19252f;
 $extended-tooltip-header-light-color-scheme-background: white;
 $extended-tooltip-header-dark-color-scheme-border: #434f5a;
-$extended-tooltip-header-dark-color-scheme-text: #f2f5f9;
+$extended-tooltip-header-dark-color-scheme-text: #d7dee4;
 $extended-tooltip-header-dark-color-scheme-background: #333f4a;
 $extended-tooltip-header-size-height: 40px;
 $extended-tooltip-header-size-padding: 8px 16px;
@@ -1755,63 +1760,63 @@ $typography-display-1-line-height: 76px;
 $typography-display-1-letter-spacing: normal;
 $typography-display-1-font-weight: normal;
 $typography-display-1-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
-$typography-display-1-text-transform: null;
-$typography-display-1-font-feature-settings: null;
+$typography-display-1-text-transform: initial;
+$typography-display-1-font-feature-settings: initial;
 $typography-display-2-font-size: 45px;
 $typography-display-2-line-height: 56px;
 $typography-display-2-letter-spacing: normal;
 $typography-display-2-font-weight: normal;
 $typography-display-2-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
-$typography-display-2-text-transform: null;
-$typography-display-2-font-feature-settings: null;
+$typography-display-2-text-transform: initial;
+$typography-display-2-font-feature-settings: initial;
 $typography-display-3-font-size: 34px;
 $typography-display-3-line-height: 44px;
 $typography-display-3-letter-spacing: normal;
 $typography-display-3-font-weight: normal;
 $typography-display-3-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
-$typography-display-3-text-transform: null;
-$typography-display-3-font-feature-settings: null;
+$typography-display-3-text-transform: initial;
+$typography-display-3-font-feature-settings: initial;
 $typography-headline-font-size: 24px;
 $typography-headline-line-height: 32px;
 $typography-headline-letter-spacing: normal;
 $typography-headline-font-weight: normal;
 $typography-headline-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
-$typography-headline-text-transform: null;
-$typography-headline-font-feature-settings: null;
+$typography-headline-text-transform: initial;
+$typography-headline-font-feature-settings: initial;
 $typography-title-font-size: 20px;
 $typography-title-line-height: 28px;
 $typography-title-letter-spacing: normal;
 $typography-title-font-weight: 600;
 $typography-title-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
-$typography-title-text-transform: null;
-$typography-title-font-feature-settings: null;
+$typography-title-text-transform: initial;
+$typography-title-font-feature-settings: initial;
 $typography-subheading-font-size: 15px;
 $typography-subheading-line-height: 20px;
 $typography-subheading-letter-spacing: -0.009em;
 $typography-subheading-font-weight: 600;
 $typography-subheading-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
-$typography-subheading-text-transform: null;
+$typography-subheading-text-transform: initial;
 $typography-subheading-font-feature-settings: "ss01" on, "ss04" on;
 $typography-body-font-size: 15px;
 $typography-body-line-height: 20px;
 $typography-body-letter-spacing: -0.009em;
 $typography-body-font-weight: normal;
 $typography-body-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
-$typography-body-text-transform: null;
+$typography-body-text-transform: initial;
 $typography-body-font-feature-settings: "ss01" on, "ss04" on;
 $typography-body-tabular-font-size: 15px;
 $typography-body-tabular-line-height: 20px;
 $typography-body-tabular-letter-spacing: -0.009em;
 $typography-body-tabular-font-weight: normal;
 $typography-body-tabular-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
-$typography-body-tabular-text-transform: null;
+$typography-body-tabular-text-transform: initial;
 $typography-body-tabular-font-feature-settings: "tnum" on, "ss01" on, "ss04" on;
 $typography-body-strong-font-size: 15px;
 $typography-body-strong-line-height: 20px;
 $typography-body-strong-letter-spacing: -0.009em;
 $typography-body-strong-font-weight: 500;
 $typography-body-strong-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
-$typography-body-strong-text-transform: null;
+$typography-body-strong-text-transform: initial;
 $typography-body-strong-font-feature-settings: "ss01" on, "ss04" on;
 $typography-body-caps-font-size: 15px;
 $typography-body-caps-line-height: 20px;
@@ -1825,22 +1830,29 @@ $typography-body-mono-line-height: 20px;
 $typography-body-mono-letter-spacing: normal;
 $typography-body-mono-font-weight: normal;
 $typography-body-mono-font-family: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
-$typography-body-mono-text-transform: null;
-$typography-body-mono-font-feature-settings: null;
+$typography-body-mono-text-transform: initial;
+$typography-body-mono-font-feature-settings: initial;
 $typography-caption-font-size: 13px;
 $typography-caption-line-height: 16px;
 $typography-caption-letter-spacing: -0.0025em;
 $typography-caption-font-weight: normal;
 $typography-caption-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
-$typography-caption-text-transform: null;
+$typography-caption-text-transform: initial;
 $typography-caption-font-feature-settings: "ss01" on, "ss04" on;
 $typography-caption-tabular-font-size: 13px;
 $typography-caption-tabular-line-height: 16px;
 $typography-caption-tabular-letter-spacing: -0.0025em;
 $typography-caption-tabular-font-weight: normal;
 $typography-caption-tabular-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
-$typography-caption-tabular-text-transform: null;
+$typography-caption-tabular-text-transform: initial;
 $typography-caption-tabular-font-feature-settings: "tnum" on, "ss01" on, "ss04" on;
+$typography-caption-strong-font-size: 13px;
+$typography-caption-strong-line-height: 16px;
+$typography-caption-strong-letter-spacing: -0.0025em;
+$typography-caption-strong-font-weight: 500;
+$typography-caption-strong-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-caption-strong-text-transform: initial;
+$typography-caption-strong-font-feature-settings: "tnum" on, "ss01" on, "ss04" on;
 $typography-caption-caps-font-size: 13px;
 $typography-caption-caps-line-height: 16px;
 $typography-caption-caps-letter-spacing: 1.5px;
@@ -1853,21 +1865,21 @@ $typography-caption-mono-line-height: 16px;
 $typography-caption-mono-letter-spacing: normal;
 $typography-caption-mono-font-weight: normal;
 $typography-caption-mono-font-family: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
-$typography-caption-mono-text-transform: null;
-$typography-caption-mono-font-feature-settings: null;
+$typography-caption-mono-text-transform: initial;
+$typography-caption-mono-font-feature-settings: initial;
 $typography-small-text-font-size: 13px;
 $typography-small-text-line-height: 16px;
 $typography-small-text-letter-spacing: -0.0025em;
 $typography-small-text-font-weight: normal;
 $typography-small-text-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
-$typography-small-text-text-transform: null;
+$typography-small-text-text-transform: initial;
 $typography-small-text-font-feature-settings: "ss01" on, "ss04" on;
 $typography-extra-small-text-font-size: 11px;
 $typography-extra-small-text-line-height: 16px;
 $typography-extra-small-text-letter-spacing: 0.005em;
 $typography-extra-small-text-font-weight: normal;
 $typography-extra-small-text-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
-$typography-extra-small-text-text-transform: null;
+$typography-extra-small-text-text-transform: initial;
 $typography-extra-small-text-font-feature-settings: "ss01" on, "ss04" on;
 $typography-extra-small-text-caps-font-size: 11px;
 $typography-extra-small-text-caps-line-height: 16px;
@@ -1881,8 +1893,8 @@ $typography-extra-small-text-mono-line-height: 16px;
 $typography-extra-small-text-mono-letter-spacing: 0px;
 $typography-extra-small-text-mono-font-weight: normal;
 $typography-extra-small-text-mono-font-family: 'Roboto Mono', 'Consolas', 'Menlo', 'Monaco', monospace;
-$typography-extra-small-text-mono-text-transform: null;
-$typography-extra-small-text-mono-font-feature-settings: null;
+$typography-extra-small-text-mono-text-transform: initial;
+$typography-extra-small-text-mono-font-feature-settings: initial;
 
 $mosaic: (
   'typography': (
@@ -2003,6 +2015,15 @@ $mosaic: (
       'text-transform': $typography-caption-tabular-text-transform,
       'font-feature-settings': $typography-caption-tabular-font-feature-settings
     ),
+    'caption-strong': (
+      'font-size': $typography-caption-strong-font-size,
+      'line-height': $typography-caption-strong-line-height,
+      'letter-spacing': $typography-caption-strong-letter-spacing,
+      'font-weight': $typography-caption-strong-font-weight,
+      'font-family': $typography-caption-strong-font-family,
+      'text-transform': $typography-caption-strong-text-transform,
+      'font-feature-settings': $typography-caption-strong-font-feature-settings
+    ),
     'caption-caps': (
       'font-size': $typography-caption-caps-font-size,
       'line-height': $typography-caption-caps-line-height,
@@ -2658,40 +2679,40 @@ $fonts: (
     @each $indent in $indents {
         @each $name, $value in $sizes {
             .layout-#{$indent}-#{$name} {
-                #{$indent}: $value;
+                #{$indent}: $value !important;
             }
 
             .layout-#{$indent}-top-#{$name} {
-                #{$indent}-top: $value;
+                #{$indent}-top: $value !important;
             }
 
             .layout-#{$indent}-right-#{$name} {
-                #{$indent}-right: $value;
+                #{$indent}-right: $value !important;
             }
 
             .layout-#{$indent}-bottom-#{$name} {
-                #{$indent}-bottom: $value;
+                #{$indent}-bottom: $value !important;
             }
 
             .layout-#{$indent}-left-#{$name} {
-                #{$indent}-left: $value;
+                #{$indent}-left: $value !important;
             }
         }
 
         .layout-#{$indent}-no-top {
-            #{$indent}-top: 0;
+            #{$indent}-top: 0 !important;
         }
 
         .layout-#{$indent}-no-right {
-            #{$indent}-right: 0;
+            #{$indent}-right: 0 !important;
         }
 
         .layout-#{$indent}-no-bottom {
-            #{$indent}-bottom: 0;
+            #{$indent}-bottom: 0 !important;
         }
 
         .layout-#{$indent}-no-left {
-            #{$indent}-left: 0;
+            #{$indent}-left: 0 !important;
         }
     }
 }

package/core/formatters/date/formatter.d.ts

@@ -73,6 +73,8 @@ export declare class DateFormatter<D> {
     /**
      * @param date - date
      * @param template - template
+     * @param seconds - use seconds
+     * @param milliseconds - use milliseconds
      * @returns relative date by template
      */
     relativeDate(date: D, template: FormatterRelativeTemplate, seconds?: boolean, milliseconds?: boolean): string;
@@ -158,6 +160,8 @@ export declare class DateFormatter<D> {
      * @param startDate - start date
      * @param endDate - end date
      * @param template - template
+     * @param seconds - use seconds
+     * @param milliseconds - use milliseconds
      * @returns range date in template format with time
      */
     rangeDateTime(startDate: D, endDate: D, template: FormatterRangeTemplate, seconds?: boolean, milliseconds?: boolean): string;
@@ -195,10 +199,10 @@ export declare class DateFormatter<D> {
      */
     rangeMiddleDateTime(startDate: D, endDate: D, options?: DateTimeOptions): string;
     /**
-     * @param date
+     * @param date - date for compile
      * @param variables - date template variables
      * @param currYearForced - param for absolute days formatting
-     * @private
+     * @returns compiledVariables
      */
     private compileVariables;
     private isBeforeYesterday;

package/core/formatters/date/formatter.pipe.d.ts

@@ -0,0 +1,95 @@
+import { PipeTransform } from '@angular/core';
+import { DateTime } from 'luxon';
+import { DateFormatter, DateTimeOptions } from './formatter';
+import * as i0 from "@angular/core";
+export declare class AbsoluteDateFormatterPipe implements PipeTransform {
+    private formatter;
+    constructor(formatter: DateFormatter<DateTime>);
+    transform(value: any, currYear?: boolean): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AbsoluteDateFormatterPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<AbsoluteDateFormatterPipe, "absoluteLongDate">;
+}
+export declare class AbsoluteDateTimeFormatterPipe implements PipeTransform {
+    private formatter;
+    constructor(formatter: DateFormatter<DateTime>);
+    transform(value: any, options?: DateTimeOptions): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AbsoluteDateTimeFormatterPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<AbsoluteDateTimeFormatterPipe, "absoluteLongDateTime">;
+}
+export declare class AbsoluteDateShortFormatterPipe implements PipeTransform {
+    private formatter;
+    constructor(formatter: DateFormatter<DateTime>);
+    transform(value: any, currYear?: boolean): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AbsoluteDateShortFormatterPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<AbsoluteDateShortFormatterPipe, "absoluteShortDate">;
+}
+export declare class AbsoluteShortDateTimeFormatterPipe implements PipeTransform {
+    private formatter;
+    constructor(formatter: DateFormatter<DateTime>);
+    transform(value: any, options?: DateTimeOptions): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AbsoluteShortDateTimeFormatterPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<AbsoluteShortDateTimeFormatterPipe, "absoluteShortDateTime">;
+}
+export declare class RelativeDateFormatterPipe implements PipeTransform {
+    private formatter;
+    constructor(formatter: DateFormatter<DateTime>);
+    transform(value: any): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RelativeDateFormatterPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<RelativeDateFormatterPipe, "relativeLongDate">;
+}
+export declare class RelativeDateTimeFormatterPipe implements PipeTransform {
+    private formatter;
+    constructor(formatter: DateFormatter<DateTime>);
+    transform(value: any, options?: DateTimeOptions): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RelativeDateTimeFormatterPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<RelativeDateTimeFormatterPipe, "relativeLongDateTime">;
+}
+export declare class RelativeShortDateFormatterPipe implements PipeTransform {
+    private formatter;
+    constructor(formatter: DateFormatter<DateTime>);
+    transform(value: any): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RelativeShortDateFormatterPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<RelativeShortDateFormatterPipe, "relativeShortDate">;
+}
+export declare class RelativeShortDateTimeFormatterPipe implements PipeTransform {
+    private formatter;
+    constructor(formatter: DateFormatter<DateTime>);
+    transform(value: any, options?: DateTimeOptions): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RelativeShortDateTimeFormatterPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<RelativeShortDateTimeFormatterPipe, "relativeShortDateTime">;
+}
+export declare class RangeDateFormatterPipe implements PipeTransform {
+    private formatter;
+    constructor(formatter: DateFormatter<DateTime>);
+    transform([value1, value2]: any): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RangeDateFormatterPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<RangeDateFormatterPipe, "rangeLongDate">;
+}
+export declare class RangeShortDateFormatterPipe implements PipeTransform {
+    private formatter;
+    constructor(formatter: DateFormatter<DateTime>);
+    transform([value1, value2]: any): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RangeShortDateFormatterPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<RangeShortDateFormatterPipe, "rangeShortDate">;
+}
+export declare class RangeDateTimeFormatterPipe implements PipeTransform {
+    private formatter;
+    constructor(formatter: DateFormatter<DateTime>);
+    transform([value1, value2]: any, options?: DateTimeOptions): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RangeDateTimeFormatterPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<RangeDateTimeFormatterPipe, "rangeLongDateTime">;
+}
+export declare class RangeMiddleDateTimeFormatterPipe implements PipeTransform {
+    private formatter;
+    constructor(formatter: DateFormatter<DateTime>);
+    transform([value1, value2]: any, options?: DateTimeOptions): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RangeMiddleDateTimeFormatterPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<RangeMiddleDateTimeFormatterPipe, "rangeMiddleDateTime">;
+}
+export declare class RangeShortDateTimeFormatterPipe implements PipeTransform {
+    private formatter;
+    constructor(formatter: DateFormatter<DateTime>);
+    transform([value1, value2]: any, options?: DateTimeOptions): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RangeShortDateTimeFormatterPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<RangeShortDateTimeFormatterPipe, "rangeShortDateTime">;
+}

package/core/formatters/index.d.ts

@@ -1,9 +1,11 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./number/formatter";
+import * as i2 from "./date/formatter.pipe";
 export declare class McFormattersModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<McFormattersModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<McFormattersModule, [typeof i1.McDecimalPipe], never, [typeof i1.McDecimalPipe]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<McFormattersModule, [typeof i1.McDecimalPipe, typeof i2.AbsoluteDateFormatterPipe, typeof i2.AbsoluteDateTimeFormatterPipe, typeof i2.AbsoluteDateShortFormatterPipe, typeof i2.AbsoluteShortDateTimeFormatterPipe, typeof i2.RelativeDateFormatterPipe, typeof i2.RelativeDateTimeFormatterPipe, typeof i2.RelativeShortDateFormatterPipe, typeof i2.RelativeShortDateTimeFormatterPipe, typeof i2.RangeDateFormatterPipe, typeof i2.RangeShortDateFormatterPipe, typeof i2.RangeDateTimeFormatterPipe, typeof i2.RangeShortDateTimeFormatterPipe, typeof i2.RangeMiddleDateTimeFormatterPipe], never, [typeof i1.McDecimalPipe, typeof i2.AbsoluteDateFormatterPipe, typeof i2.AbsoluteDateTimeFormatterPipe, typeof i2.AbsoluteDateShortFormatterPipe, typeof i2.AbsoluteShortDateTimeFormatterPipe, typeof i2.RelativeDateFormatterPipe, typeof i2.RelativeDateTimeFormatterPipe, typeof i2.RelativeShortDateFormatterPipe, typeof i2.RelativeShortDateTimeFormatterPipe, typeof i2.RangeDateFormatterPipe, typeof i2.RangeShortDateFormatterPipe, typeof i2.RangeDateTimeFormatterPipe, typeof i2.RangeShortDateTimeFormatterPipe, typeof i2.RangeMiddleDateTimeFormatterPipe]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<McFormattersModule>;
 }
 export * from './number/formatter';
 export * from './date/formatter';
+export * from './date/formatter.pipe';

package/core/pop-up/pop-up-trigger.d.ts

@@ -3,7 +3,7 @@ import { ConnectedOverlayPositionChange, ConnectionPositionPair, Overlay, Overla
 import { OverlayConfig } from '@angular/cdk/overlay/overlay-config';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { ElementRef, EventEmitter, NgZone, TemplateRef, Type, ViewContainerRef } from '@angular/core';
-import { Observable, Subject } from 'rxjs';
+import { Observable, Subject, Subscription } from 'rxjs';
 import { PopUpPlacements } from './constants';
 import * as i0 from "@angular/core";
 export declare abstract class McPopUpTrigger<T> {
@@ -35,6 +35,7 @@ export declare abstract class McPopUpTrigger<T> {
     protected portal: ComponentPortal<T>;
     protected instance: any | null;
     protected listeners: Map<string, EventListenerOrEventListenerObject>;
+    protected closingActionsSubscription: Subscription;
     protected readonly availablePositions: {
         [key: string]: ConnectionPositionPair;
     };
@@ -65,6 +66,7 @@ export declare abstract class McPopUpTrigger<T> {
     protected clearListeners(): void;
     private addEventListener;
     private removeEventListener;
+    private subscribeOnClosingActions;
     static ɵfac: i0.ɵɵFactoryDeclaration<McPopUpTrigger<any>, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<McPopUpTrigger<any>, never, never, {}, {}, never>;
 }