@ptsecurity/mosaic 15.3.1 → 15.4.0-beta.1

package/_visual.scss

@@ -109,7 +109,7 @@ $light-color-scheme-states-focused-color-error: #db3c55;
 $light-color-scheme-states-selected-color: #e7f1ff;
 $light-color-scheme-states-pressed-shadow: inset 0 1px 2px 0 rgba(black, 0.2);
 $light-color-scheme-states-disabled-opacity: 0.3;
-$dark-color-scheme-primary-default: #0059b8;
+$dark-color-scheme-primary-default: #0374eb;
 $dark-color-scheme-secondary-default: #515e69;
 $dark-color-scheme-error-default: #b9023a;
 $dark-color-scheme-info-default: #0c6579;
@@ -173,7 +173,7 @@ $palette-blue-40: #eff6ff;
 $palette-blue-60: #e7f1ff;
 $palette-blue-100: #c8dfff;
 $palette-blue-200: #a2c7fe;
-$palette-blue-300: #5697ff;
+$palette-blue-300: #7fb1ff;
 $palette-blue-400: #4187ff;
 $palette-blue-500: #0374eb;
 $palette-blue-560: #0059b8;
@@ -472,13 +472,13 @@ $badge-dark-color-scheme-solid-error-border: #b9023a;
 $badge-dark-color-scheme-solid-error-color: white;
 $badge-dark-color-scheme-solid-transparent-background: transparent;
 $badge-dark-color-scheme-solid-transparent-border: #515e69;
-$badge-dark-color-scheme-solid-transparent-color: white;
+$badge-dark-color-scheme-solid-transparent-color: #d7dee4;
 $badge-dark-color-scheme-solid-light-background: #7f8c98;
 $badge-dark-color-scheme-solid-light-border: #7f8c98;
-$badge-dark-color-scheme-solid-light-color: white;
+$badge-dark-color-scheme-solid-light-color: #d7dee4;
 $badge-dark-color-scheme-solid-secondary-background: #515e69;
 $badge-dark-color-scheme-solid-secondary-border: #515e69;
-$badge-dark-color-scheme-solid-secondary-color: white;
+$badge-dark-color-scheme-solid-secondary-color: #d7dee4;
 $badge-size-default-height: 24px;
 $badge-size-default-min-width: 10px;
 $badge-size-default-padding: 0 8px;
@@ -495,9 +495,41 @@ $badge-font-default-mono: caption-mono;
 $badge-font-mini-default: extra-small-text;
 $badge-font-mini-caps: extra-small-text-caps;
 $badge-font-mini-mono: extra-small-text-mono;
-$button-toggle-size-border-size: 1px;
-$button-toggle-size-border-radius: 4px;
-$button-toggle-size-border-siblings-radius: 0;
+$button-toggle-group-light-color-scheme-background: #d7dee4;
+$button-toggle-group-light-color-scheme-border: #d7dee4;
+$button-toggle-group-light-color-scheme-states-disabled-opacity: 0.3;
+$button-toggle-group-dark-color-scheme-background: #515e69;
+$button-toggle-group-dark-color-scheme-border: #515e69;
+$button-toggle-group-dark-color-scheme-states-disabled-opacity: 0.45;
+$button-toggle-group-size-height: 32px;
+$button-toggle-group-size-border-width: 1px;
+$button-toggle-group-size-border-radius: 4px;
+$button-toggle-group-size-padding: 1px;
+$button-toggle-light-color-scheme-color: #19252f;
+$button-toggle-light-color-scheme-icon: #8c99a5;
+$button-toggle-light-color-scheme-states-disabled-opacity: 0.3;
+$button-toggle-light-color-scheme-states-hover-background: rgba(black, 0.05);
+$button-toggle-light-color-scheme-states-hover-icon: #6d7a86;
+$button-toggle-light-color-scheme-states-active-background: rgba(black, 0.1);
+$button-toggle-light-color-scheme-states-active-icon: #434f5a;
+$button-toggle-light-color-scheme-states-pressed-background: white;
+$button-toggle-light-color-scheme-states-pressed-icon: #434f5a;
+$button-toggle-dark-color-scheme-color: #f2f5f9;
+$button-toggle-dark-color-scheme-icon: #8c99a5;
+$button-toggle-dark-color-scheme-states-disabled-opacity: 0.45;
+$button-toggle-dark-color-scheme-states-hover-background: rgba(white, 0.05);
+$button-toggle-dark-color-scheme-states-hover-icon: #6d7a86;
+$button-toggle-dark-color-scheme-states-active-background: rgba(white, 0.1);
+$button-toggle-dark-color-scheme-states-active-icon: #bdc7d1;
+$button-toggle-dark-color-scheme-states-pressed-background: #19252f;
+$button-toggle-dark-color-scheme-states-pressed-icon: #bdc7d1;
+$button-toggle-size-border-width: 1px;
+$button-toggle-size-border-radius: 2px;
+$button-toggle-size-horizontal-padding: 12px;
+$button-toggle-size-min-width: 40px;
+$button-toggle-size-left-icon-padding: 6px;
+$button-toggle-font-default: body;
+$icon-button-toggle-size-width: 64px;
 $button-light-color-scheme-active-shadow: inset 0 1px 2px 0 rgba(black, 0.2);
 $button-light-color-scheme-primary-color: white;
 $button-light-color-scheme-primary-border: #0374eb;
@@ -506,7 +538,7 @@ $button-light-color-scheme-primary-icon: white;
 $button-light-color-scheme-primary-states-active-border: #0059b8;
 $button-light-color-scheme-primary-states-active-background: #0059b8;
 $button-light-color-scheme-primary-transparent-color: #0374eb;
-$button-light-color-scheme-primary-transparent-icon: #5697ff;
+$button-light-color-scheme-primary-transparent-icon: #4187ff;
 $button-light-color-scheme-primary-transparent-states-hover-color: #0059b8;
 $button-light-color-scheme-primary-transparent-states-hover-icon: #0374eb;
 $button-light-color-scheme-primary-transparent-states-active-color: #014b9d;
@@ -526,12 +558,12 @@ $button-light-color-scheme-error-states-active-background: #bdc7d1;
 $button-dark-color-scheme-active-shadow: inset 1px 2px 2px 0 rgba(black, 0.2);
 $button-dark-color-scheme-primary-color: white;
 $button-dark-color-scheme-primary-border: #0059b8;
-$button-dark-color-scheme-primary-background: #0059b8;
+$button-dark-color-scheme-primary-background: #0374eb;
 $button-dark-color-scheme-primary-icon: white;
 $button-dark-color-scheme-primary-states-active-border: darken(#014b9d, 5);
 $button-dark-color-scheme-primary-states-active-background: darken(#014b9d, 5);
-$button-dark-color-scheme-primary-transparent-color: #5697ff;
-$button-dark-color-scheme-primary-transparent-icon: #5697ff;
+$button-dark-color-scheme-primary-transparent-color: #7fb1ff;
+$button-dark-color-scheme-primary-transparent-icon: #7fb1ff;
 $button-dark-color-scheme-primary-transparent-states-hover-color: #014b9d;
 $button-dark-color-scheme-primary-transparent-states-hover-icon: #0374eb;
 $button-dark-color-scheme-primary-transparent-states-active-color: #023c7f;
@@ -607,12 +639,12 @@ $checkbox-light-color-scheme-error-states-checked-focused-outline: 1px solid whi
 $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-checked-border: #0374eb;
+$checkbox-dark-color-scheme-default-states-checked-background: #0374eb;
 $checkbox-dark-color-scheme-default-states-focused-border: #4187ff;
 $checkbox-dark-color-scheme-default-states-focused-shadow: 0 0 0 1px #4187ff;
 $checkbox-dark-color-scheme-default-states-checked-focused-border: #4187ff;
-$checkbox-dark-color-scheme-default-states-checked-focused-background: #0059b8;
+$checkbox-dark-color-scheme-default-states-checked-focused-background: #0374eb;
 $checkbox-dark-color-scheme-default-states-checked-focused-shadow: 0 0 0 1px #4187ff;
 $checkbox-dark-color-scheme-default-states-checked-focused-outline: 1px solid #19252f;
 $checkbox-dark-color-scheme-error-border: #b9023a;
@@ -793,7 +825,7 @@ $code-block-dark-color-scheme-hljs-link-color: null;
 $code-block-dark-color-scheme-hljs-literal-background: null;
 $code-block-dark-color-scheme-hljs-literal-color: #c692b5;
 $code-block-dark-color-scheme-hljs-meta-background: null;
-$code-block-dark-color-scheme-hljs-meta-color: #5697ff;
+$code-block-dark-color-scheme-hljs-meta-color: #7fb1ff;
 $code-block-dark-color-scheme-hljs-meta-keyword-background: null;
 $code-block-dark-color-scheme-hljs-meta-keyword-color: null;
 $code-block-dark-color-scheme-hljs-meta-string-background: null;
@@ -801,7 +833,7 @@ $code-block-dark-color-scheme-hljs-meta-string-color: #4ba96c;
 $code-block-dark-color-scheme-hljs-meta-prompt-background: null;
 $code-block-dark-color-scheme-hljs-meta-prompt-color: null;
 $code-block-dark-color-scheme-hljs-name-background: null;
-$code-block-dark-color-scheme-hljs-name-color: #5697ff;
+$code-block-dark-color-scheme-hljs-name-color: #7fb1ff;
 $code-block-dark-color-scheme-hljs-number-background: null;
 $code-block-dark-color-scheme-hljs-number-color: #c692b5;
 $code-block-dark-color-scheme-hljs-operator-background: null;
@@ -827,7 +859,7 @@ $code-block-dark-color-scheme-hljs-selector-id-color: null;
 $code-block-dark-color-scheme-hljs-selector-pseudo-background: null;
 $code-block-dark-color-scheme-hljs-selector-pseudo-color: null;
 $code-block-dark-color-scheme-hljs-selector-tag-background: null;
-$code-block-dark-color-scheme-hljs-selector-tag-color: #5697ff;
+$code-block-dark-color-scheme-hljs-selector-tag-color: #7fb1ff;
 $code-block-dark-color-scheme-hljs-string-background: null;
 $code-block-dark-color-scheme-hljs-string-color: #4ba96c;
 $code-block-dark-color-scheme-hljs-strong-background: null;
@@ -835,7 +867,7 @@ $code-block-dark-color-scheme-hljs-strong-color: null;
 $code-block-dark-color-scheme-hljs-subst-background: null;
 $code-block-dark-color-scheme-hljs-subst-color: null;
 $code-block-dark-color-scheme-hljs-symbol-background: null;
-$code-block-dark-color-scheme-hljs-symbol-color: #5697ff;
+$code-block-dark-color-scheme-hljs-symbol-color: #7fb1ff;
 $code-block-dark-color-scheme-hljs-tag-background: null;
 $code-block-dark-color-scheme-hljs-tag-color: null;
 $code-block-dark-color-scheme-hljs-template-tag-background: null;
@@ -843,7 +875,7 @@ $code-block-dark-color-scheme-hljs-template-tag-color: null;
 $code-block-dark-color-scheme-hljs-template-variable-background: null;
 $code-block-dark-color-scheme-hljs-template-variable-color: null;
 $code-block-dark-color-scheme-hljs-title-background: null;
-$code-block-dark-color-scheme-hljs-title-color: #5697ff;
+$code-block-dark-color-scheme-hljs-title-color: #7fb1ff;
 $code-block-dark-color-scheme-hljs-title-class-background: null;
 $code-block-dark-color-scheme-hljs-title-class-color: null;
 $code-block-dark-color-scheme-hljs-title-class-inherited-background: null;
@@ -1048,6 +1080,61 @@ $dropdown-panel-size-max-width: 640px;
 $dropdown-panel-size-padding: 4px 0;
 $dropdown-panel-size-border-width: 1px;
 $dropdown-panel-size-border-radius: 4px;
+$file-upload-light-color-scheme-single-default-background: white;
+$file-upload-light-color-scheme-single-default-border: #bdc7d1;
+$file-upload-light-color-scheme-single-states-error-background: #fff3f3;
+$file-upload-light-color-scheme-single-states-error-border: #db3c55;
+$file-upload-light-color-scheme-single-states-progress-background: #f2f5f9;
+$file-upload-light-color-scheme-single-states-progress-border: #d7dee4;
+$file-upload-light-color-scheme-single-states-drag-n-drop-background: #e7f1ff;
+$file-upload-light-color-scheme-single-states-drag-n-drop-border: #0374eb;
+$file-upload-light-color-scheme-single-states-disable-background: #f2f5f9;
+$file-upload-light-color-scheme-single-states-disable-border: #d7dee4;
+$file-upload-light-color-scheme-multiple-default-background: white;
+$file-upload-light-color-scheme-multiple-default-border: #bdc7d1;
+$file-upload-light-color-scheme-multiple-states-error-background: white;
+$file-upload-light-color-scheme-multiple-states-error-border: #bdc7d1;
+$file-upload-light-color-scheme-multiple-states-progress-background: white;
+$file-upload-light-color-scheme-multiple-states-progress-border: #bdc7d1;
+$file-upload-light-color-scheme-multiple-states-drag-n-drop-background: #e7f1ff;
+$file-upload-light-color-scheme-multiple-states-drag-n-drop-border: #0374eb;
+$file-upload-light-color-scheme-multiple-states-disable-background: #f2f5f9;
+$file-upload-light-color-scheme-multiple-states-disable-border: #d7dee4;
+$file-upload-dark-color-scheme-single-default-background: #19252f;
+$file-upload-dark-color-scheme-single-default-border: #515e69;
+$file-upload-dark-color-scheme-single-states-error-background: #500013;
+$file-upload-dark-color-scheme-single-states-error-border: #b9023a;
+$file-upload-dark-color-scheme-single-states-progress-background: #333f4a;
+$file-upload-dark-color-scheme-single-states-progress-border: mix(#515e69, transparent, 50%);
+$file-upload-dark-color-scheme-single-states-drag-n-drop-background: rgba(3, 116, 235, 0.3);
+$file-upload-dark-color-scheme-single-states-drag-n-drop-border: #4187ff;
+$file-upload-dark-color-scheme-single-states-disable-background: #333f4a;
+$file-upload-dark-color-scheme-single-states-disable-border: mix(#515e69, transparent, 50%);
+$file-upload-dark-color-scheme-multiple-default-background: #19252f;
+$file-upload-dark-color-scheme-multiple-default-border: #515e69;
+$file-upload-dark-color-scheme-multiple-states-error-background: #19252f;
+$file-upload-dark-color-scheme-multiple-states-error-border: #515e69;
+$file-upload-dark-color-scheme-multiple-states-progress-background: #19252f;
+$file-upload-dark-color-scheme-multiple-states-progress-border: #515e69;
+$file-upload-dark-color-scheme-multiple-states-drag-n-drop-background: rgba(3, 116, 235, 0.3);
+$file-upload-dark-color-scheme-multiple-states-drag-n-drop-border: #4187ff;
+$file-upload-dark-color-scheme-multiple-states-disable-background: #333f4a;
+$file-upload-dark-color-scheme-multiple-states-disable-border: mix(#515e69, transparent, 50%);
+$file-upload-size-single-height: 48px;
+$file-upload-size-single-vertical-padding: 12px;
+$file-upload-size-single-border-width: 1px;
+$file-upload-size-single-border-radius: 4px;
+$file-upload-size-single-border-style: dashed;
+$file-upload-size-multiple-border-width: 1px;
+$file-upload-size-multiple-border-radius: 4px;
+$file-upload-size-multiple-border-style: dashed;
+$file-upload-size-multiple-uploaded-item-horizontal-padding: 8px;
+$file-upload-size-multiple-uploaded-item-vertical-padding: 8px;
+$file-upload-font-single: body;
+$file-upload-font-multiple-header: headline;
+$file-upload-font-multiple-caption: body;
+$file-upload-font-multiple-uploaded-header: caption;
+$file-upload-font-multiple-uploaded-item: body;
 $form-field-light-color-scheme-border: #bdc7d1;
 $form-field-light-color-scheme-background: white;
 $form-field-light-color-scheme-states-autofill-background: #ebf8fd;
@@ -1104,10 +1191,10 @@ $icon-light-color-scheme-secondary-default: #8c99a5;
 $icon-light-color-scheme-secondary-states-hover: #6d7a86;
 $icon-light-color-scheme-secondary-states-active: #434f5a;
 $icon-light-color-scheme-secondary-states-disabled: mix(#8c99a5, transparent, 30%);
-$icon-light-color-scheme-primary-default: #5697ff;
+$icon-light-color-scheme-primary-default: #4187ff;
 $icon-light-color-scheme-primary-states-hover: #0374eb;
 $icon-light-color-scheme-primary-states-active: #014b9d;
-$icon-light-color-scheme-primary-states-disabled: mix(#5697ff, transparent, 30%);
+$icon-light-color-scheme-primary-states-disabled: mix(#4187ff, transparent, 30%);
 $icon-light-color-scheme-info-default: #18a5c5;
 $icon-light-color-scheme-info-states-hover: #218ca8;
 $icon-light-color-scheme-info-states-active: #0c5567;
@@ -1128,10 +1215,10 @@ $icon-dark-color-scheme-secondary-default: #8c99a5;
 $icon-dark-color-scheme-secondary-states-hover: #6d7a86;
 $icon-dark-color-scheme-secondary-states-active: #bdc7d1;
 $icon-dark-color-scheme-secondary-states-disabled: mix(#8c99a5, transparent, 30%);
-$icon-dark-color-scheme-primary-default: #5697ff;
+$icon-dark-color-scheme-primary-default: #7fb1ff;
 $icon-dark-color-scheme-primary-states-hover: #0374eb;
 $icon-dark-color-scheme-primary-states-active: #a2c7fe;
-$icon-dark-color-scheme-primary-states-disabled: mix(#5697ff, transparent, 30%);
+$icon-dark-color-scheme-primary-states-disabled: mix(#7fb1ff, transparent, 30%);
 $icon-dark-color-scheme-info-default: #18a5c5;
 $icon-dark-color-scheme-info-states-hover: #218ca8;
 $icon-dark-color-scheme-info-states-active: #6ed3f2;
@@ -1160,8 +1247,8 @@ $link-light-color-scheme-state-hover-text: #0059b8;
 $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(#5697ff, 0.32);;
+$link-dark-color-scheme-text: #7fb1ff;
+$link-dark-color-scheme-border-bottom: rgba(#7fb1ff, 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;
@@ -1174,9 +1261,14 @@ $link-size-default-icon-margin: 4px;
 $link-size-caption-icon-margin: 2px;
 $link-font-default: body;
 $link-font-caption: caption;
+$list-light-color-scheme-footer-background: white;
+$list-light-color-scheme-footer-divider: #d7dee4;
+$list-dark-color-scheme-footer-background: #19252f;
+$list-dark-color-scheme-footer-divider: mix(#515e69, transparent, 50%);
 $list-size-horizontal-padding: 12px;
 $list-size-icon-right-margin: 8px;
 $list-size-item-height: 32px;
+$list-size-footer-min-height: 48px;
 $list-font-item: body;
 $loader-overlay-light-color-scheme-background: mix(white, transparent, 90%);
 $loader-overlay-light-color-scheme-text: #19252f;
@@ -1279,8 +1371,8 @@ $markdown-link-light-color-scheme-state-hover-text: #0059b8;
 $markdown-link-light-color-scheme-state-hover-border-bottom: rgba(#0059b8, 0.32);
 $markdown-link-light-color-scheme-state-active: #014b9d;
 $markdown-link-light-color-scheme-state-focused-outline: #0374eb;
-$markdown-link-dark-color-scheme-text: #5697ff;
-$markdown-link-dark-color-scheme-border-bottom: rgba(#5697ff, 0.32);;
+$markdown-link-dark-color-scheme-text: #7fb1ff;
+$markdown-link-dark-color-scheme-border-bottom: rgba(#7fb1ff, 0.32);;
 $markdown-link-dark-color-scheme-state-visited-text: #bb78a7;
 $markdown-link-dark-color-scheme-state-visited-border-bottom: rgba(#bb78a7, 0.32);
 $markdown-link-dark-color-scheme-state-hover-text: #4187ff;
@@ -1445,8 +1537,8 @@ $radio-light-color-scheme-states-focused-inner-circle-shadow: 0 0 0 2px white;
 $radio-dark-color-scheme-outer-circle-border: #515e69;
 $radio-dark-color-scheme-inner-circle-border: transparent;
 $radio-dark-color-scheme-cap-color: white;
-$radio-dark-color-scheme-states-checked-outer-circle-border: #0059b8;
-$radio-dark-color-scheme-states-checked-inner-circle-border: #0059b8;
+$radio-dark-color-scheme-states-checked-outer-circle-border: #0374eb;
+$radio-dark-color-scheme-states-checked-inner-circle-border: #0374eb;
 $radio-dark-color-scheme-states-focused-outer-circle-border: #4187ff;
 $radio-dark-color-scheme-states-focused-outer-circle-shadow: 0 0 0 2px #4187ff;
 $radio-dark-color-scheme-states-focused-inner-circle-shadow: 0 0 0 2px #19252f;
@@ -1491,8 +1583,6 @@ $select-panel-size-vertical-padding: 4px;
 $select-panel-size-border-width: 1px;
 $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;
@@ -1528,7 +1618,7 @@ $tabs-dark-color-scheme-state-normal-icon: #8c99a5;
 $tabs-dark-color-scheme-state-normal-text: #d7dee4;
 $tabs-dark-color-scheme-state-hover-icon: #6d7a86;
 $tabs-dark-color-scheme-state-hover-text: #d7dee4;
-$tabs-dark-color-scheme-state-active-marker-color: #0059b8;
+$tabs-dark-color-scheme-state-active-marker-color: #0374eb;
 $tabs-dark-color-scheme-state-empty-icon: mix(#8c99a5, transparent, 30%);
 $tabs-dark-color-scheme-state-empty-text: #6d7a86;
 $tabs-dark-color-scheme-state-disabled-icon: mix(#8c99a5, transparent, 30%);
@@ -1552,7 +1642,7 @@ $vertical-tabs-dark-color-scheme-state-hover-selected-background: adjust-color(r
 $tags-light-color-scheme-primary-background: #e7f1ff;
 $tags-light-color-scheme-primary-border: transparent;
 $tags-light-color-scheme-primary-text: #0374eb;
-$tags-light-color-scheme-primary-icon: #5697ff;
+$tags-light-color-scheme-primary-icon: #4187ff;
 $tags-light-color-scheme-primary-states-hover-icon: #0374eb;
 $tags-light-color-scheme-primary-states-focused: #0374eb;
 $tags-light-color-scheme-primary-states-disabled-text: mix(#0374eb, transparent, 50%);
@@ -1579,11 +1669,11 @@ $tags-light-color-scheme-error-states-disabled-border: transparent;
 $tags-dark-color-scheme-primary-background: #014b9d;
 $tags-dark-color-scheme-primary-border: transparent;
 $tags-dark-color-scheme-primary-text: #a2c7fe;
-$tags-dark-color-scheme-primary-icon: #5697ff;
+$tags-dark-color-scheme-primary-icon: #7fb1ff;
 $tags-dark-color-scheme-primary-states-hover-icon: #0374eb;
 $tags-dark-color-scheme-primary-states-focused: #4187ff;
-$tags-dark-color-scheme-primary-states-disabled-text: mix(#5697ff, transparent, 50%);
-$tags-dark-color-scheme-primary-states-disabled-background: mix(#5697ff, transparent, 10%);
+$tags-dark-color-scheme-primary-states-disabled-text: mix(#7fb1ff, transparent, 50%);
+$tags-dark-color-scheme-primary-states-disabled-background: mix(#7fb1ff, transparent, 10%);
 $tags-dark-color-scheme-primary-states-disabled-border: transparent;
 $tags-dark-color-scheme-secondary-background: #333f4a;
 $tags-dark-color-scheme-secondary-border: transparent;
@@ -1681,8 +1771,8 @@ $toggle-dark-color-scheme-background: #19252f;
 $toggle-dark-color-scheme-circle-border: #515e69;
 $toggle-dark-color-scheme-circle-background: #6d7a86;
 $toggle-dark-color-scheme-states-focused-shadow: inset 0 0 0 1px #19252f, 0 0 0 2px #4187ff;
-$toggle-dark-color-scheme-primary-checked-border-color: #0059b8;
-$toggle-dark-color-scheme-primary-checked-background: #0059b8;
+$toggle-dark-color-scheme-primary-checked-border-color: #0374eb;
+$toggle-dark-color-scheme-primary-checked-background: #0374eb;
 $toggle-dark-color-scheme-error-checked-border-color: #b9023a;
 $toggle-dark-color-scheme-error-checked-background: #b9023a;
 $toggle-size-height: 16px;
@@ -1749,7 +1839,7 @@ $light-color-scheme-primary-palette: (
 60: #e7f1ff,
 100: #c8dfff,
 200: #a2c7fe,
-300: #5697ff,
+300: #7fb1ff,
 400: #4187ff,
 500: #0374eb,
 560: #0059b8,
@@ -1947,7 +2037,7 @@ $dark-color-scheme-primary-palette: (
 60: #e7f1ff,
 100: #c8dfff,
 200: #a2c7fe,
-300: #5697ff,
+300: #7fb1ff,
 400: #4187ff,
 500: #0374eb,
 560: #0059b8,
@@ -2145,7 +2235,7 @@ $color-blue-palette: (
 60: #e7f1ff,
 100: #c8dfff,
 200: #a2c7fe,
-300: #5697ff,
+300: #7fb1ff,
 400: #4187ff,
 500: #0374eb,
 560: #0059b8,

package/alert/_alert-theme.scss

@@ -0,0 +1,61 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin nvl-alert-theme($alert) {
+    background-color: map.get($alert, background);
+    border-color: map.get($alert, border);
+
+    .mc-icon.mc-alert__icon {
+        color: map.get($alert, icon);
+    }
+}
+
+@mixin nvl-mc-alert-theme($theme) {
+    $alert: map.get(map.get($theme, components), alert);
+
+    $alert-contrast: map.get($alert, contrast);
+    $alert-error: map.get($alert, error);
+
+    .mc-alert__close:focus {
+        outline: none;
+    }
+
+    .mc-alert {
+        background: map.get($alert-contrast, background);
+
+        & .mc-alert__title {
+            color: map.get($alert-contrast, title);
+        }
+
+        & .mc-alert__text {
+            color: map.get($alert-contrast, text);
+        }
+    }
+
+    .mc-alert.mc-alert_error {
+        background: map.get($alert-error, background);
+
+        & .mc-alert__title {
+            color: map.get($alert-error, title);
+        }
+
+        & .mc-alert__text {
+            color: map.get($alert-error, text);
+        }
+    }
+}
+
+@mixin nvl-mc-alert-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .mc-alert {
+        @include mc-typography-level-to-styles($config, map.get($tokens, alert-font-text));
+
+        .mc-alert__title {
+            @include mc-typography-level-to-styles($config, map.get($tokens, alert-font-title));
+        }
+    }
+}

package/alert/alert.component.d.ts

@@ -0,0 +1,22 @@
+import { McIconItem } from '@ptsecurity/mosaic/icon';
+import * as i0 from "@angular/core";
+export declare class McAlertTitle {
+    static ɵfac: i0.ɵɵFactoryDeclaration<McAlertTitle, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McAlertTitle, "[mc-alert-title]", never, {}, {}, never, never, false, never>;
+}
+export declare class McAlertCloseButton {
+    static ɵfac: i0.ɵɵFactoryDeclaration<McAlertCloseButton, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McAlertCloseButton, "[mc-alert-close-button]", never, {}, {}, never, never, false, never>;
+}
+export declare class McAlertControl {
+    static ɵfac: i0.ɵɵFactoryDeclaration<McAlertControl, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McAlertControl, "[mc-alert-control]", never, {}, {}, never, never, false, never>;
+}
+export declare class McAlert {
+    iconItem: McIconItem;
+    title: McAlertTitle;
+    control: McAlertControl;
+    closeButton: McAlertCloseButton;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McAlert, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McAlert, "mc-alert", never, {}, {}, ["iconItem", "title", "control", "closeButton"], ["[mc-icon-item]", "[mc-alert-title]", "*", "[mc-alert-control]", "[mc-alert-close-button]"], false, never>;
+}

package/alert/alert.component.scss

@@ -0,0 +1,81 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-alert {
+    display: flex;
+
+    border-radius: var(--mc-alert-size-container-border-radius, map.get($tokens, alert-size-container-border-radius));
+
+    min-width: var(--mc-alert-size-container-min-width, map.get($tokens, alert-size-container-min-width));
+    min-height: calc(
+        var(--mc-alert-size-container-min-height, map.get($tokens, alert-size-container-min-height)) -
+        (var(--mc-alert-size-container-padding-vertical, map.get($tokens, alert-size-container-padding-vertical)) * 2)
+    );
+
+    padding:
+        var(--mc-alert-size-container-padding-vertical, map.get($tokens, alert-size-container-padding-vertical))
+        var(--mc-alert-size-container-padding-horizontal, map.get($tokens, alert-size-container-padding-horizontal));
+}
+
+.mc-alert__icon {
+    margin-right: var(
+        --mc-alert-size-container-content-gap-horizontal,
+        map.get($tokens, alert-size-container-content-gap-horizontal)
+    );
+}
+
+.mc-alert__title {
+    margin-bottom: var(
+        --mc-alert-size-container-content-gap-vertical,
+        map.get($tokens, alert-size-container-content-gap-vertical)
+    );
+}
+
+.mc-alert__controls {
+    margin-top: var(
+        --mc-alert-size-container-content-gap-vertical,
+        map.get($tokens, alert-size-container-content-gap-vertical)
+    );
+
+    padding-top: var(
+        --mc-alert-size-button-stack-content-padding-top,
+        map.get($tokens, alert-size-button-stack-padding-top)
+    );
+
+    & .mc-button {
+        margin-right: var(
+            --mc-alert-size-button-stack-content-content-gap-horizontal,
+            map.get($tokens, alert-size-button-stack-content-gap-horizontal)
+        );
+    }
+
+    & .mc-link {
+        margin-right: 16px;
+    }
+}
+
+.mc-alert__content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+
+    justify-content: center;
+}
+
+.mc-alert__close-button {
+    margin-left: var(
+        --mc-alert-size-container-content-gap-horizontal,
+        map.get($tokens, alert-size-container-content-gap-horizontal)
+    );
+}
+
+.mc-alert_dismissible .mc-alert__close-button {
+    margin-top: var(--mc-alert-size-close-button-margin-top, map.get($tokens, alert-size-close-button-margin-top));
+    margin-right:
+        var(--mc-alert-size-close-button-margin-right, map.get($tokens, alert-size-close-button-margin-right));
+}

package/alert/alert.module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./alert.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/cdk/a11y";
+import * as i4 from "@angular/cdk/platform";
+export declare class McAlertModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<McAlertModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<McAlertModule, [typeof i1.McAlert, typeof i1.McAlertTitle, typeof i1.McAlertCloseButton, typeof i1.McAlertControl], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule], [typeof i1.McAlert, typeof i1.McAlertTitle, typeof i1.McAlertCloseButton, typeof i1.McAlertControl]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<McAlertModule>;
+}

package/alert/index.d.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/alert/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './alert.module';
+export * from './alert.component';

package/autocomplete/_autocomplete-theme.nvl.scss

@@ -0,0 +1,21 @@
+@use 'sass:map';
+
+@use '../core/styles/common/popup';
+@use '../core/styles/theming/theming';
+
+
+@mixin nvl-mc-autocomplete-theme($theme) {
+    $foreground: map.get($theme, foreground);
+
+    .mc-autocomplete-panel {
+        @include popup.popup-params($theme);
+
+        color: theming.mc-color($foreground, text);
+
+        .mc-selected {
+            $popup: map.get(map.get($theme, components), popup);
+
+            background-color: map.get($popup, background);
+        }
+    }
+}

package/button/_button-base.scss

@@ -57,13 +57,13 @@ $tokens: meta.module-variables(tokens) !default;
 
     & .mc-icon_left {
         margin-right: var(
-            --mc-icon-button-size-left-icon-padding, map.get($tokens, icon-button-size-left-icon-padding)
+            --mc-button-size-content-padding, map.get($tokens, button-size-content-padding)
         );
     }
 
     & .mc-icon_right {
         margin-left: var(
-            --mc-icon-button-size-left-icon-padding, map.get($tokens, icon-button-size-left-icon-padding)
+            --mc-button-size-content-padding, map.get($tokens, button-size-content-padding)
         );
     }
 }