@ptsecurity/mosaic 15.3.2 → 15.4.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/button/button.component.d.ts

@@ -7,6 +7,7 @@ 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 const getNodesWithoutComments: (nodes: NodeList) => Node[];
 export declare class McButtonCssStyler implements AfterContentInit {
     private renderer;
     private cdr;

package/button-toggle/_button-toggle-theme.scss

@@ -0,0 +1,92 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+@mixin mc-button-toggle-color($state) {
+    & .mc-button-overlay {
+        background: map.get($state, background);
+        border-color: map.get($state, background);
+    }
+
+    & .mc-icon {
+        color: map.get($state, icon);
+    }
+}
+
+@mixin mc-button-toggle-theme($theme) {
+    $button-toggle-group: map.get(map.get(map.get($theme, components), button-toggle), button-toggle-group);
+    $button-toggle: map.get(map.get(map.get($theme, components), button-toggle), button-toggle);
+    $states: map.get($button-toggle, states);
+
+    .mc-button-toggle-group {
+        background: map.get($button-toggle-group, background);
+        border-color:  map.get($button-toggle-group, border);
+
+        .mc-button-toggle {
+            & > .mc-button,
+            & > .mc-icon-button {
+                color: map.get($button-toggle, color);
+                border-color: map.get($button-toggle-group, background);
+                background: inherit;
+
+                & .mc-icon {
+                    color: map.get($button-toggle, icon);
+                }
+
+                .mc-button-overlay {
+                    background-color: unset;
+                }
+
+                &:hover:not([disabled], .mc-active) {
+                    @include mc-button-toggle-color(map.get($states, hover));
+                }
+
+                &:active:not([disabled], .mc-active) {
+                    @include mc-button-toggle-color(map.get($states, active));
+                }
+
+                &.mc-active {
+                    $state: map.get($states, pressed);
+
+                    background: map.get($state, background);
+                    border-color: map.get($state, background);
+
+                    & .mc-icon {
+                        color: map.get($state, icon);
+                    }
+                }
+
+                &.mc-disabled,
+                &[disabled] {
+                    opacity: map.get(map.get($states, disabled), opacity);
+                }
+
+                &.cdk-keyboard-focused {
+                    box-shadow: unset;
+                }
+            }
+
+            &.cdk-keyboard-focused {
+                box-shadow: 0 0 0 2px map-get(map-get($theme, states), focused-color);
+            }
+        }
+    }
+}
+
+@mixin mc-button-toggle-typography($config) {
+    .mc-button-toggle {
+        @include mc-typography-level-to-styles($config, map.get($tokens, button-toggle-font-default));
+
+        > .mc-button,
+        > .mc-icon-button {
+            @include mc-typography-level-to-styles($config, map.get($tokens, button-toggle-font-default));
+        }
+    }
+}
+

package/button-toggle/button-toggle.component.d.ts

@@ -2,6 +2,7 @@ import { FocusMonitor } from '@angular/cdk/a11y';
 import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, OnInit, QueryList } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { McButton } from '@ptsecurity/mosaic/button';
+import { McIcon } from '@ptsecurity/mosaic/icon';
 import * as i0 from "@angular/core";
 /** Acceptable types for a button toggle. */
 export declare type ToggleType = 'checkbox' | 'radio';
@@ -102,15 +103,17 @@ export declare class McButtonToggleGroup implements ControlValueAccessor, OnInit
     static ɵdir: i0.ɵɵDirectiveDeclaration<McButtonToggleGroup, "mc-button-toggle-group", ["mcButtonToggleGroup"], { "vertical": "vertical"; "value": "value"; "multiple": "multiple"; "disabled": "disabled"; }, { "valueChange": "valueChange"; "change": "change"; }, ["buttonToggles"], never, false, never>;
 }
 /** Single button inside of a toggle group. */
-export declare class McButtonToggle implements OnInit, OnDestroy {
+export declare class McButtonToggle implements OnInit, AfterContentInit, OnDestroy {
     buttonToggleGroup: McButtonToggleGroup;
     private changeDetectorRef;
     private focusMonitor;
     private element;
+    icons: QueryList<McIcon>;
     /** Whether the button is checked. */
     get checked(): boolean;
     set checked(value: boolean);
     type: ToggleType;
+    iconType: string;
     mcButton: McButton;
     /** McButtonToggleGroup reads this to assign its own value. */
     value: any;
@@ -125,6 +128,7 @@ export declare class McButtonToggle implements OnInit, OnDestroy {
     private _disabled;
     constructor(buttonToggleGroup: McButtonToggleGroup, changeDetectorRef: ChangeDetectorRef, focusMonitor: FocusMonitor, element: ElementRef);
     ngOnInit(): void;
+    ngAfterContentInit(): void;
     ngOnDestroy(): void;
     /** Focuses the button. */
     focus(): void;
@@ -137,5 +141,5 @@ export declare class McButtonToggle implements OnInit, OnDestroy {
      */
     markForCheck(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<McButtonToggle, [{ optional: true; }, null, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McButtonToggle, "mc-button-toggle", ["mcButtonToggle"], { "checked": "checked"; "value": "value"; "tabIndex": "tabIndex"; "disabled": "disabled"; }, { "change": "change"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McButtonToggle, "mc-button-toggle", ["mcButtonToggle"], { "checked": "checked"; "value": "value"; "tabIndex": "tabIndex"; "disabled": "disabled"; }, { "change": "change"; }, ["icons"], ["*"], false, never>;
 }

package/button-toggle/button-toggle.module.d.ts

@@ -2,8 +2,9 @@ import * as i0 from "@angular/core";
 import * as i1 from "./button-toggle.component";
 import * as i2 from "@ptsecurity/mosaic/core";
 import * as i3 from "@ptsecurity/mosaic/button";
+import * as i4 from "@ptsecurity/mosaic/title";
 export declare class McButtonToggleModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<McButtonToggleModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<McButtonToggleModule, [typeof i1.McButtonToggleGroup, typeof i1.McButtonToggle], [typeof i2.McCommonModule, typeof i3.McButtonModule], [typeof i2.McCommonModule, typeof i1.McButtonToggleGroup, typeof i1.McButtonToggle]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<McButtonToggleModule, [typeof i1.McButtonToggleGroup, typeof i1.McButtonToggle], [typeof i2.McCommonModule, typeof i3.McButtonModule, typeof i4.McTitleModule], [typeof i2.McCommonModule, typeof i1.McButtonToggleGroup, typeof i1.McButtonToggle]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<McButtonToggleModule>;
 }