@ptsecurity/mosaic 15.0.1 → 15.2.0

package/_theming.scss

@@ -681,14 +681,14 @@ $checkbox-font-default: body;
 $code-block-light-color-scheme-background: white;
 $code-block-light-color-scheme-border: #d7dee4;
 $code-block-light-color-scheme-color: #19252f;
-$code-block-light-color-scheme-actionbar-background: rgba(white, 0.5);
+$code-block-light-color-scheme-actionbar-background: rgba(white, 0.9);
 $code-block-light-color-scheme-actionbar-border: null;
 $code-block-light-color-scheme-line-numbers-background: null;
 $code-block-light-color-scheme-line-numbers-border: null;
 $code-block-light-color-scheme-line-numbers-color: #8c99a5;
 $code-block-light-color-scheme-decoration-less-contrast-background: #f2f5f9;
 $code-block-light-color-scheme-decoration-less-contrast-border: #d7dee4;
-$code-block-light-color-scheme-decoration-less-contrast-actionbar-background: #f2f5f9;
+$code-block-light-color-scheme-decoration-less-contrast-actionbar-background: rgba(#f2f5f9, 0.9);
 $code-block-light-color-scheme-decoration-less-contrast-actionbar-border: null;
 $code-block-light-color-scheme-hljs-addition-background: #d2f7db;
 $code-block-light-color-scheme-hljs-addition-color: #103920;
@@ -795,14 +795,14 @@ $code-block-light-color-scheme-hljs-variable-language-color: null;
 $code-block-dark-color-scheme-background: #19252f;
 $code-block-dark-color-scheme-border: mix(#515e69, transparent, 50%);
 $code-block-dark-color-scheme-color: #d7dee4;
-$code-block-dark-color-scheme-actionbar-background: #19252f;
+$code-block-dark-color-scheme-actionbar-background: rgba(#19252f, 0.9);
 $code-block-dark-color-scheme-actionbar-border: null;
 $code-block-dark-color-scheme-line-numbers-background: null;
 $code-block-dark-color-scheme-line-numbers-border: null;
 $code-block-dark-color-scheme-line-numbers-color: #6d7a86;
 $code-block-dark-color-scheme-decoration-less-contrast-background: #27333e;
 $code-block-dark-color-scheme-decoration-less-contrast-border: mix(#515e69, transparent, 50%);
-$code-block-dark-color-scheme-decoration-less-contrast-actionbar-background: #27333e;
+$code-block-dark-color-scheme-decoration-less-contrast-actionbar-background: rgba(#27333e, 0.9);
 $code-block-dark-color-scheme-decoration-less-contrast-actionbar-border: null;
 $code-block-dark-color-scheme-hljs-addition-background: #103920;
 $code-block-dark-color-scheme-hljs-addition-color: #8ed5a1;
@@ -1060,15 +1060,24 @@ $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;
-$description-list-size-horizontal-column-gap: 16px;
-$description-list-size-horizontal-row-gap: 12px;
-$description-list-size-vertical-column-gap: 0;
-$description-list-size-vertical-row-gap: 2px;
-$description-list-size-vertical-dd-margin-bottom: 16px;
-$description-list-font-horizontal-dt: body;
-$description-list-font-horizontal-dd: body;
-$description-list-font-vertical-dt: caption;
-$description-list-font-vertical-dd: body;
+$description-list-size-default-horizontal-column-gap: 16px;
+$description-list-size-default-horizontal-row-gap: 12px;
+$description-list-size-default-vertical-column-gap: 0;
+$description-list-size-default-vertical-row-gap: 2px;
+$description-list-size-default-vertical-dd-margin-bottom: 16px;
+$description-list-size-small-horizontal-column-gap: 8px;
+$description-list-size-small-horizontal-row-gap: 8px;
+$description-list-size-small-vertical-column-gap: 0;
+$description-list-size-small-vertical-row-gap: 0;
+$description-list-size-small-vertical-dd-margin-bottom: 12px;
+$description-list-font-default-horizontal-dt: body;
+$description-list-font-default-horizontal-dd: body;
+$description-list-font-default-vertical-dt: caption;
+$description-list-font-default-vertical-dd: body;
+$description-list-font-small-horizontal-dt: caption;
+$description-list-font-small-horizontal-dd: caption;
+$description-list-font-small-vertical-dt: caption;
+$description-list-font-small-vertical-dd: caption;
 $dropdown-item-size-padding: 5px 15px;
 $dropdown-item-size-icon-padding: 0 8px 2px 0;
 $dropdown-item-font-default: body;
@@ -1087,19 +1096,23 @@ $dropdown-panel-size-border-width: 1px;
 $dropdown-panel-size-border-radius: 4px;
 $form-field-light-color-scheme-border: #bdc7d1;
 $form-field-light-color-scheme-background: white;
+$form-field-light-color-scheme-states-autofill-background: #ebf8fd;
 $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: #fff3f3;
 $form-field-dark-color-scheme-border: #515e69;
 $form-field-dark-color-scheme-background: transparent;
+$form-field-dark-color-scheme-states-autofill-background: #143641;
 $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: mix(#41000b, transparent, 30%);
+$form-field-dark-color-scheme-states-invalid-background: rgba(#41000b, 0.3);
 $form-field-size-height: 32px;
 $form-field-size-border-width: 1px;
 $form-field-size-border-radius: 4px;
 $form-field-size-button-width: 32px;
 $form-field-font-default: body;
+$form-field-hint-light-color-scheme-text-color: #6d7a86;
+$form-field-hint-dark-color-scheme-text-color: #8c99a5;
 $form-field-hint-size-margin-top: 4px;
 $form-field-hint-font-default: caption;
 $form-field-password-hint-light-color-scheme-text-color: #19252f;
@@ -1201,10 +1214,12 @@ $link-dark-color-scheme-state-hover-text: #4187ff;
 $link-dark-color-scheme-state-hover-border-bottom: rgba(#4187ff, 0.32);
 $link-dark-color-scheme-state-active: #0374eb;
 $link-dark-color-scheme-state-focused-outline: #4187ff;
-$link-size-icon-margin: 4px;
 $link-size-state-focused-outline-offset: 2px;
 $link-size-state-focused-outline-width: 2px;
+$link-size-default-icon-margin: 4px;
+$link-size-caption-icon-margin: 2px;
 $link-font-default: body;
+$link-font-caption: caption;
 $list-size-horizontal-padding: 12px;
 $list-size-icon-right-margin: 8px;
 $list-size-item-height: 32px;
@@ -1356,7 +1371,7 @@ $modal-dark-color-scheme-body-top-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
 $modal-dark-color-scheme-body-bottom-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.16);
 $modal-dark-color-scheme-background-mask: rgba(0, 0, 0, 0.5);
 $modal-size-small: 400px;
-$modal-size-normal: 640px;
+$modal-size-medium: 640px;
 $modal-size-large: 960px;
 $modal-size-top: 48px;
 $modal-size-close-width: 56px;
@@ -1428,7 +1443,7 @@ $popover-size-border-width: 1px;
 $popover-size-arrow-size: 12px;
 $popover-size-trigger-margin: 9px;
 $popover-size-small-width: 200px;
-$popover-size-normal-width: 400px;
+$popover-size-medium-width: 400px;
 $popover-size-large-width: 640px;
 $popover-font-default: body;
 $popover-header-light-color-scheme-border: #d7dee4;
@@ -1524,6 +1539,9 @@ $select-panel-size-border-radius: 4px;
 $select-panel-font-default: body;
 $sidepanel-light-color-scheme-border: #bdc7d1;
 $sidepanel-dark-color-scheme-border: #19252f;
+$sidepanel-size-small: 400px;
+$sidepanel-size-medium: 640px;
+$sidepanel-size-large: 960px;
 $sidepanel-font-default: body;
 $sidepanel-header-light-color-scheme-border: #d7dee4;
 $sidepanel-header-dark-color-scheme-border: mix(#515e69, transparent, 50%);
@@ -3706,6 +3724,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
 
     $datepicker: (
         state-today-color: $datepicker-body-light-color-scheme-states-today-color,
+        state-today-background: $datepicker-body-light-color-scheme-states-today-background,
         state-selected-color: $datepicker-body-light-color-scheme-states-selected-color,
         state-selected-background: $datepicker-body-light-color-scheme-states-selected-background
     );
@@ -3764,7 +3783,8 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
 
         state-hover-border: $form-field-light-color-scheme-states-hover-border,
         state-invalid-border: $form-field-light-color-scheme-states-invalid-border,
-        state-invalid-background: $form-field-light-color-scheme-states-invalid-background
+        state-invalid-background: $form-field-light-color-scheme-states-invalid-background,
+        state-autofill-background: $form-field-light-color-scheme-states-autofill-background
     );
 
     $form-field-password-hint: (
@@ -3778,6 +3798,10 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         state-valid-icon-color: $form-field-password-hint-light-color-scheme-states-valid-icon-color
     );
 
+    $form-field-hint: (
+        text-color: $form-field-hint-light-color-scheme-text-color
+    );
+
     $forms: (
         label: $forms-light-color-scheme-label,
         legend: $forms-light-color-scheme-legend,
@@ -4065,6 +4089,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         icon: $icon,
         form-field: $form-field,
         form-field-password-hint: $form-field-password-hint,
+        form-field-hint: $form-field-hint,
         forms: $forms,
         link: $link,
         loader-overlay: $loader-overlay,
@@ -4418,7 +4443,8 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
     );
 
     $datepicker: (
-        state-selected-today-color: $datepicker-body-dark-color-scheme-states-today-color,
+        state-today-color: $datepicker-body-dark-color-scheme-states-today-color,
+        state-today-background: $datepicker-body-dark-color-scheme-states-today-background,
         state-selected-color: $datepicker-body-dark-color-scheme-states-selected-color,
         state-selected-background: $datepicker-body-dark-color-scheme-states-selected-background
     );
@@ -4477,7 +4503,8 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
 
         state-hover-border: $form-field-dark-color-scheme-states-hover-border,
         state-invalid-border: $form-field-dark-color-scheme-states-invalid-border,
-        state-invalid-background: $form-field-dark-color-scheme-states-invalid-background
+        state-invalid-background: $form-field-dark-color-scheme-states-invalid-background,
+        state-autofill-background: $form-field-dark-color-scheme-states-autofill-background
     );
 
     $form-field-password-hint: (
@@ -4491,6 +4518,10 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         state-valid-icon-color: $form-field-password-hint-dark-color-scheme-states-valid-icon-color
     );
 
+    $form-field-hint: (
+        text-color: $form-field-password-hint-dark-color-scheme-text-color
+    );
+
     $forms: (
         label: $forms-dark-color-scheme-label,
         legend: $forms-dark-color-scheme-legend,
@@ -4778,6 +4809,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         icon: $icon,
         form-field: $form-field,
         form-field-password-hint: $form-field-password-hint,
+        form-field-hint: $form-field-hint,
         forms: $forms,
         link: $link,
         loader-overlay: $loader-overlay,
@@ -5140,7 +5172,8 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
     );
 
     $datepicker: (
-        state-selected-today-color: map-get($tokens, 'datepicker-body-#{$scheme}-states-selected-today-color'),
+        state-today-color: map-get($tokens, 'datepicker-body-#{$scheme}-states-today-color'),
+        state-today-background: map-get($tokens, 'datepicker-body-#{$scheme}-states-today-background'),
         state-selected-color: map-get($tokens, 'datepicker-body-#{$scheme}-states-selected-color'),
         state-selected-background: map-get($tokens, 'datepicker-body-#{$scheme}-states-selected-background')
     );
@@ -5160,7 +5193,8 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
 
         state-hover-border: map-get($tokens, 'form-field-#{$scheme}-states-hover-border'),
         state-invalid-border: map-get($tokens, 'form-field-#{$scheme}-states-invalid-border'),
-        state-invalid-background: map-get($tokens, 'form-field-#{$scheme}-states-invalid-background')
+        state-invalid-background: map-get($tokens, 'form-field-#{$scheme}-states-invalid-background'),
+        state-autofill-background: map-get($tokens, 'form-field-#{$scheme}-states-autofill-background')
     );
 
     $form-field-password-hint: (
@@ -5174,6 +5208,10 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         state-valid-icon-color: map-get($tokens, 'form-field-password-hint-#{$scheme}-states-valid-icon-color')
     );
 
+    $form-field-hint: (
+        text-color: map-get($tokens, 'form-field-hint-#{$scheme}-text-color'),
+    );
+
     $forms: (
         label: map-get($tokens, 'forms-#{$scheme}-label'),
         legend: map-get($tokens, 'forms-#{$scheme}-legend'),
@@ -5499,6 +5537,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         dl: $dl,
         form-field: $form-field,
         form-field-password-hint: $form-field-password-hint,
+        form-field-hint: $form-field-hint,
         forms: $forms,
         icon: $icon,
         link: $link,
@@ -7271,7 +7310,8 @@ $mc-datepicker-today-fade-amount: 0.2;
 
     .mc-calendar__body-today {
         color: map-get($datepicker, state-today-color);
-        background-color: map-get($datepicker, state-today-background);
+        // now tokens have wrong color for dark theme
+        //background-color: map-get($datepicker, state-today-background);
     }
 
     .mc-calendar__body_disabled > .mc-calendar__body-today:not(.mc-selected) {
@@ -7279,8 +7319,8 @@ $mc-datepicker-today-fade-amount: 0.2;
     }
 
     .mc-calendar__body-cell-content.mc-selected {
-        background: map-get($datepicker, state-selected-background);
         color: map-get($datepicker, state-selected-color);
+        background: map-get($datepicker, state-selected-background);
     }
 
     .mc-calendar__body_disabled > .mc-selected {
@@ -7420,6 +7460,15 @@ $mc-datepicker-today-fade-amount: 0.2;
     $form-field: map-get(map-get($theme, components), form-field);
 
     .mc-form-field {
+        & .mc-input {
+            //https://css-tricks.com/almanac/selectors/a/autofill/
+            &:-webkit-autofill,
+            &:-webkit-autofill:hover,
+            &:-webkit-autofill:focus {
+                -webkit-box-shadow: 0 0 0 40rem map-get($form-field, state-autofill-background) inset;
+            }
+        }
+
         & .mc-form-field__container {
             background-color: map-get($form-field, background);
         }
@@ -7478,12 +7527,14 @@ $mc-datepicker-today-fade-amount: 0.2;
     }
 
     .mc-hint {
+        $hint: map-get(map-get($theme, components), form-field-hint);
+
         &.mc-primary {
-            color: mc-color($primary);
+            color: map-get($hint, text-color);
         }
 
         &.mc-secondary {
-            color: mc-color($secondary);
+            color: map-get($hint, text-color);
         }
 
         &.mc-error {
@@ -7791,11 +7842,11 @@ $mc-datepicker-today-fade-amount: 0.2;
 
     &.mc-text-with-icon .mc-link__text {
         &:not(:first-child) {
-            margin-left: $link-size-icon-margin;
+            margin-left: $link-size-default-icon-margin;
         }
 
         &:not(:last-child) {
-            margin-right: $link-size-icon-margin;
+            margin-right: $link-size-default-icon-margin;
         }
     }
 
@@ -7901,6 +7952,10 @@ $mc-datepicker-today-fade-amount: 0.2;
     .mc-link {
         @include mc-typography-level-to-styles($config, $link-font-default);
     }
+
+    .mc-link.mc-link_caption {
+        @include mc-typography-level-to-styles($config, $link-font-caption);
+    }
 }
 
 
@@ -9848,21 +9903,41 @@ button {
 @mixin mc-dl-typography($config) {
     .mc-dl {
         & .mc-dt {
-            @include mc-typography-level-to-styles($config, $description-list-font-horizontal-dt);
+            @include mc-typography-level-to-styles($config, $description-list-font-default-horizontal-dt);
         }
 
         & .mc-dd {
-            @include mc-typography-level-to-styles($config, $description-list-font-horizontal-dd);
+            @include mc-typography-level-to-styles($config, $description-list-font-default-horizontal-dd);
+        }
+
+        &.mc-dl_small {
+            & .mc-dt {
+                @include mc-typography-level-to-styles($config, $description-list-font-small-horizontal-dt);
+            }
+
+            & .mc-dd {
+                @include mc-typography-level-to-styles($config, $description-list-font-small-horizontal-dd);
+            }
         }
     }
 
     .mc-dl.mc-dl_vertical {
         & .mc-dt {
-            @include mc-typography-level-to-styles($config, $description-list-font-vertical-dt);
+            @include mc-typography-level-to-styles($config, $description-list-font-default-vertical-dt);
         }
 
         & .mc-dd {
-            @include mc-typography-level-to-styles($config, $description-list-font-vertical-dd);
+            @include mc-typography-level-to-styles($config, $description-list-font-default-vertical-dd);
+        }
+
+        &.mc-dl_small {
+            & .mc-dt {
+                @include mc-typography-level-to-styles($config, $description-list-font-small-vertical-dt);
+            }
+
+            & .mc-dd {
+                @include mc-typography-level-to-styles($config, $description-list-font-small-vertical-dd);
+            }
         }
     }
 }

package/_visual.scss

@@ -635,14 +635,14 @@ $checkbox-font-default: body;
 $code-block-light-color-scheme-background: white;
 $code-block-light-color-scheme-border: #d7dee4;
 $code-block-light-color-scheme-color: #19252f;
-$code-block-light-color-scheme-actionbar-background: rgba(white, 0.5);
+$code-block-light-color-scheme-actionbar-background: rgba(white, 0.9);
 $code-block-light-color-scheme-actionbar-border: null;
 $code-block-light-color-scheme-line-numbers-background: null;
 $code-block-light-color-scheme-line-numbers-border: null;
 $code-block-light-color-scheme-line-numbers-color: #8c99a5;
 $code-block-light-color-scheme-decoration-less-contrast-background: #f2f5f9;
 $code-block-light-color-scheme-decoration-less-contrast-border: #d7dee4;
-$code-block-light-color-scheme-decoration-less-contrast-actionbar-background: #f2f5f9;
+$code-block-light-color-scheme-decoration-less-contrast-actionbar-background: rgba(#f2f5f9, 0.9);
 $code-block-light-color-scheme-decoration-less-contrast-actionbar-border: null;
 $code-block-light-color-scheme-hljs-addition-background: #d2f7db;
 $code-block-light-color-scheme-hljs-addition-color: #103920;
@@ -749,14 +749,14 @@ $code-block-light-color-scheme-hljs-variable-language-color: null;
 $code-block-dark-color-scheme-background: #19252f;
 $code-block-dark-color-scheme-border: mix(#515e69, transparent, 50%);
 $code-block-dark-color-scheme-color: #d7dee4;
-$code-block-dark-color-scheme-actionbar-background: #19252f;
+$code-block-dark-color-scheme-actionbar-background: rgba(#19252f, 0.9);
 $code-block-dark-color-scheme-actionbar-border: null;
 $code-block-dark-color-scheme-line-numbers-background: null;
 $code-block-dark-color-scheme-line-numbers-border: null;
 $code-block-dark-color-scheme-line-numbers-color: #6d7a86;
 $code-block-dark-color-scheme-decoration-less-contrast-background: #27333e;
 $code-block-dark-color-scheme-decoration-less-contrast-border: mix(#515e69, transparent, 50%);
-$code-block-dark-color-scheme-decoration-less-contrast-actionbar-background: #27333e;
+$code-block-dark-color-scheme-decoration-less-contrast-actionbar-background: rgba(#27333e, 0.9);
 $code-block-dark-color-scheme-decoration-less-contrast-actionbar-border: null;
 $code-block-dark-color-scheme-hljs-addition-background: #103920;
 $code-block-dark-color-scheme-hljs-addition-color: #8ed5a1;
@@ -1014,15 +1014,24 @@ $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;
-$description-list-size-horizontal-column-gap: 16px;
-$description-list-size-horizontal-row-gap: 12px;
-$description-list-size-vertical-column-gap: 0;
-$description-list-size-vertical-row-gap: 2px;
-$description-list-size-vertical-dd-margin-bottom: 16px;
-$description-list-font-horizontal-dt: body;
-$description-list-font-horizontal-dd: body;
-$description-list-font-vertical-dt: caption;
-$description-list-font-vertical-dd: body;
+$description-list-size-default-horizontal-column-gap: 16px;
+$description-list-size-default-horizontal-row-gap: 12px;
+$description-list-size-default-vertical-column-gap: 0;
+$description-list-size-default-vertical-row-gap: 2px;
+$description-list-size-default-vertical-dd-margin-bottom: 16px;
+$description-list-size-small-horizontal-column-gap: 8px;
+$description-list-size-small-horizontal-row-gap: 8px;
+$description-list-size-small-vertical-column-gap: 0;
+$description-list-size-small-vertical-row-gap: 0;
+$description-list-size-small-vertical-dd-margin-bottom: 12px;
+$description-list-font-default-horizontal-dt: body;
+$description-list-font-default-horizontal-dd: body;
+$description-list-font-default-vertical-dt: caption;
+$description-list-font-default-vertical-dd: body;
+$description-list-font-small-horizontal-dt: caption;
+$description-list-font-small-horizontal-dd: caption;
+$description-list-font-small-vertical-dt: caption;
+$description-list-font-small-vertical-dd: caption;
 $dropdown-item-size-padding: 5px 15px;
 $dropdown-item-size-icon-padding: 0 8px 2px 0;
 $dropdown-item-font-default: body;
@@ -1041,19 +1050,23 @@ $dropdown-panel-size-border-width: 1px;
 $dropdown-panel-size-border-radius: 4px;
 $form-field-light-color-scheme-border: #bdc7d1;
 $form-field-light-color-scheme-background: white;
+$form-field-light-color-scheme-states-autofill-background: #ebf8fd;
 $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: #fff3f3;
 $form-field-dark-color-scheme-border: #515e69;
 $form-field-dark-color-scheme-background: transparent;
+$form-field-dark-color-scheme-states-autofill-background: #143641;
 $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: mix(#41000b, transparent, 30%);
+$form-field-dark-color-scheme-states-invalid-background: rgba(#41000b, 0.3);
 $form-field-size-height: 32px;
 $form-field-size-border-width: 1px;
 $form-field-size-border-radius: 4px;
 $form-field-size-button-width: 32px;
 $form-field-font-default: body;
+$form-field-hint-light-color-scheme-text-color: #6d7a86;
+$form-field-hint-dark-color-scheme-text-color: #8c99a5;
 $form-field-hint-size-margin-top: 4px;
 $form-field-hint-font-default: caption;
 $form-field-password-hint-light-color-scheme-text-color: #19252f;
@@ -1155,10 +1168,12 @@ $link-dark-color-scheme-state-hover-text: #4187ff;
 $link-dark-color-scheme-state-hover-border-bottom: rgba(#4187ff, 0.32);
 $link-dark-color-scheme-state-active: #0374eb;
 $link-dark-color-scheme-state-focused-outline: #4187ff;
-$link-size-icon-margin: 4px;
 $link-size-state-focused-outline-offset: 2px;
 $link-size-state-focused-outline-width: 2px;
+$link-size-default-icon-margin: 4px;
+$link-size-caption-icon-margin: 2px;
 $link-font-default: body;
+$link-font-caption: caption;
 $list-size-horizontal-padding: 12px;
 $list-size-icon-right-margin: 8px;
 $list-size-item-height: 32px;
@@ -1310,7 +1325,7 @@ $modal-dark-color-scheme-body-top-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
 $modal-dark-color-scheme-body-bottom-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.16);
 $modal-dark-color-scheme-background-mask: rgba(0, 0, 0, 0.5);
 $modal-size-small: 400px;
-$modal-size-normal: 640px;
+$modal-size-medium: 640px;
 $modal-size-large: 960px;
 $modal-size-top: 48px;
 $modal-size-close-width: 56px;
@@ -1382,7 +1397,7 @@ $popover-size-border-width: 1px;
 $popover-size-arrow-size: 12px;
 $popover-size-trigger-margin: 9px;
 $popover-size-small-width: 200px;
-$popover-size-normal-width: 400px;
+$popover-size-medium-width: 400px;
 $popover-size-large-width: 640px;
 $popover-font-default: body;
 $popover-header-light-color-scheme-border: #d7dee4;
@@ -1478,6 +1493,9 @@ $select-panel-size-border-radius: 4px;
 $select-panel-font-default: body;
 $sidepanel-light-color-scheme-border: #bdc7d1;
 $sidepanel-dark-color-scheme-border: #19252f;
+$sidepanel-size-small: 400px;
+$sidepanel-size-medium: 640px;
+$sidepanel-size-large: 960px;
 $sidepanel-font-default: body;
 $sidepanel-header-light-color-scheme-border: #d7dee4;
 $sidepanel-header-dark-color-scheme-border: mix(#515e69, transparent, 50%);

package/autocomplete/autocomplete.scss

@@ -15,7 +15,7 @@ $tokens: meta.module-variables(tokens) !default;
 
     position: relative;
 
-    overflow: auto;
+    overflow: hidden auto;
     -webkit-overflow-scrolling: touch;   // for momentum scroll on mobile
 
     margin-top: -1px;

package/button/_button-base.scss

@@ -60,4 +60,10 @@ $tokens: meta.module-variables(tokens) !default;
             --mc-icon-button-size-left-icon-padding, map.get($tokens, icon-button-size-left-icon-padding)
         );
     }
+
+    & .mc-icon_right {
+        margin-left: var(
+            --mc-icon-button-size-left-icon-padding, map.get($tokens, icon-button-size-left-icon-padding)
+        );
+    }
 }

package/button/button.component.d.ts

@@ -1,17 +1,22 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { ElementRef, OnDestroy, Renderer2, QueryList, AfterContentInit } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, OnDestroy, Renderer2, QueryList, AfterContentInit } from '@angular/core';
 import { CanColor, CanDisable, CanColorCtor, HasTabIndexCtor } from '@ptsecurity/mosaic/core';
 import { McIcon } from '@ptsecurity/mosaic/icon';
 import * as i0 from "@angular/core";
+export declare const leftIconClassName = "mc-icon_left";
+export declare const rightIconClassName = "mc-icon_right";
+export declare const buttonLeftIconClassName = "mc-icon-button_left";
+export declare const buttonRightIconClassName = "mc-icon-button_right";
 export declare class McButtonCssStyler implements AfterContentInit {
     private renderer;
+    private cdr;
     icons: QueryList<McIcon>;
     nativeElement: HTMLElement;
     isIconButton: boolean;
-    constructor(elementRef: ElementRef, renderer: Renderer2);
+    constructor(elementRef: ElementRef, renderer: Renderer2, cdr: ChangeDetectorRef);
     ngAfterContentInit(): void;
     updateClassModifierForIcons(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<McButtonCssStyler, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McButtonCssStyler, [null, null, { skipSelf: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<McButtonCssStyler, "[mc-button]", never, {}, {}, ["icons"], never, false, never>;
 }
 /** @docs-private */
@@ -23,11 +28,12 @@ export declare class McButtonBase {
 export declare const McButtonMixinBase: HasTabIndexCtor & CanColorCtor & typeof McButtonBase;
 export declare class McButton extends McButtonMixinBase implements OnDestroy, CanDisable, CanColor {
     private focusMonitor;
+    private styler;
     hasFocus: boolean;
     get disabled(): any;
     set disabled(value: any);
     private _disabled;
-    constructor(elementRef: ElementRef, focusMonitor: FocusMonitor);
+    constructor(elementRef: ElementRef, focusMonitor: FocusMonitor, styler: McButtonCssStyler);
     ngOnDestroy(): void;
     onFocus($event: any): void;
     onBlur(): void;
@@ -35,6 +41,7 @@ export declare class McButton extends McButtonMixinBase implements OnDestroy, Ca
     focus(): void;
     focusViaKeyboard(): void;
     haltDisabledEvents(event: Event): void;
+    projectContentChanged(): void;
     private runFocusMonitor;
     private stopFocusMonitor;
     static ɵfac: i0.ɵɵFactoryDeclaration<McButton, never>;

package/button/button.module.d.ts

@@ -3,8 +3,9 @@ import * as i1 from "./button.component";
 import * as i2 from "@angular/common";
 import * as i3 from "@angular/cdk/a11y";
 import * as i4 from "@angular/cdk/platform";
+import * as i5 from "@angular/cdk/observers";
 export declare class McButtonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<McButtonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<McButtonModule, [typeof i1.McButton, typeof i1.McButtonCssStyler], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule], [typeof i1.McButton, typeof i1.McButtonCssStyler]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<McButtonModule, [typeof i1.McButton, typeof i1.McButtonCssStyler], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule, typeof i5.ObserversModule], [typeof i1.McButton, typeof i1.McButtonCssStyler]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<McButtonModule>;
 }

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

@@ -24,6 +24,7 @@ export declare enum PopUpTriggers {
 }
 export declare enum PopUpSizes {
     Small = "small",
-    Normal = "normal",
+    Medium = "medium",
+    Normal = "medium",
     Large = "large"
 }

package/core/styles/_mosaic-theme.scss

@@ -110,7 +110,7 @@
     @include mc-base-typography($config);
     @include mc-markdown-base-typography($md-config);
 
-    @include alert-theme($config);
+    @include mc-alert-typography($config);
     @include mc-badge-typography($config);
     @include mc-button-typography($config);
     @include mc-checkbox-typography($config);

package/core/styles/theming/_components-theming.scss

@@ -338,7 +338,8 @@
     );
 
     $datepicker: (
-        state-selected-today-color: map-get($tokens, 'datepicker-body-#{$scheme}-states-selected-today-color'),
+        state-today-color: map-get($tokens, 'datepicker-body-#{$scheme}-states-today-color'),
+        state-today-background: map-get($tokens, 'datepicker-body-#{$scheme}-states-today-background'),
         state-selected-color: map-get($tokens, 'datepicker-body-#{$scheme}-states-selected-color'),
         state-selected-background: map-get($tokens, 'datepicker-body-#{$scheme}-states-selected-background')
     );
@@ -358,7 +359,8 @@
 
         state-hover-border: map-get($tokens, 'form-field-#{$scheme}-states-hover-border'),
         state-invalid-border: map-get($tokens, 'form-field-#{$scheme}-states-invalid-border'),
-        state-invalid-background: map-get($tokens, 'form-field-#{$scheme}-states-invalid-background')
+        state-invalid-background: map-get($tokens, 'form-field-#{$scheme}-states-invalid-background'),
+        state-autofill-background: map-get($tokens, 'form-field-#{$scheme}-states-autofill-background')
     );
 
     $form-field-password-hint: (
@@ -372,6 +374,10 @@
         state-valid-icon-color: map-get($tokens, 'form-field-password-hint-#{$scheme}-states-valid-icon-color')
     );
 
+    $form-field-hint: (
+        text-color: map-get($tokens, 'form-field-hint-#{$scheme}-text-color'),
+    );
+
     $forms: (
         label: map-get($tokens, 'forms-#{$scheme}-label'),
         legend: map-get($tokens, 'forms-#{$scheme}-legend'),
@@ -697,6 +703,7 @@
         dl: $dl,
         form-field: $form-field,
         form-field-password-hint: $form-field-password-hint,
+        form-field-hint: $form-field-hint,
         forms: $forms,
         icon: $icon,
         link: $link,