@ptsecurity/mosaic 13.1.0 → 13.3.0

package/_theming.scss

@@ -108,6 +108,8 @@ $light-color-scheme-warning-default: #a26e0c;
 $light-color-scheme-foreground-text: #19252f;
 $light-color-scheme-foreground-text-less-contrast: #6d7a86;
 $light-color-scheme-foreground-text-disabled: #8c99a5;
+$light-color-scheme-foreground-text-error: #db3c55;
+$light-color-scheme-foreground-text-success: #016b37;
 $light-color-scheme-foreground-divider: #d7dee4;
 $light-color-scheme-foreground-border: #bdc7d1;
 $light-color-scheme-foreground-icon: #8c99a5;
@@ -130,6 +132,8 @@ $dark-color-scheme-warning-default: #7e5406;
 $dark-color-scheme-foreground-text: #f2f5f9;
 $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-border: #515e69;
 $dark-color-scheme-foreground-icon: #8c99a5;
@@ -146,6 +150,19 @@ $dark-color-scheme-states-disabled-opacity: 0.3;
 $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;
+$size-3xs: 2px;
+$size-xxs: 4px;
+$size-xs: 6px;
+$size-s: 8px;
+$size-m: 12px;
+$size-l: 16px;
+$size-xl: 20px;
+$size-xxl: 24px;
+$size-3xl: 32px;
+$size-4xl: 40px;
+$size-5xl: 48px;
+$size-6xl: 56px;
+$size-7xl: 64px;
 $palette-blue-40: #eff6ff;
 $palette-blue-60: #e7f1ff;
 $palette-blue-100: #c8dfff;
@@ -371,28 +388,6 @@ $alert-font-small-body: caption;
 $autocomplete-size-panel-padding: 4px 0;
 $autocomplete-size-panel-max-height: 256px;
 $autocomplete-size-panel-border-radius: 3px;
-$badge-size-default-min-width: 10px;
-$badge-size-default-padding: 0 8px;
-$badge-size-default-border-width: 1px;
-$badge-size-default-border-radius: 4px;
-$badge-size-default-height: 24px;
-$badge-size-default-font-default: caption;
-$badge-size-default-font-caps: caption-caps;
-$badge-size-default-font-mono: caption-mono;
-$badge-size-mini-height: 16px;
-$badge-size-mini-min-width: 10px;
-$badge-size-mini-border-width: 1px;
-$badge-size-mini-border-radius: 2px;
-$badge-size-mini-padding: 0 4px;
-$badge-size-mini-font-default: extra-small-text;
-$badge-size-mini-font-caps: extra-small-text-caps;
-$badge-size-mini-font-mono: extra-small-text-mono;
-$badge-font-default-default: caption;
-$badge-font-default-caps: caption-caps;
-$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;
 $badge-light-color-scheme-solid-primary-background: #4187ff;
 $badge-light-color-scheme-solid-primary-border: #4187ff;
 $badge-light-color-scheme-solid-primary-color: white;
@@ -471,6 +466,22 @@ $badge-dark-color-scheme-solid-light-color: white;
 $badge-dark-color-scheme-solid-second-background: #515e69;
 $badge-dark-color-scheme-solid-second-border: #515e69;
 $badge-dark-color-scheme-solid-second-color: white;
+$badge-size-default-height: 24px;
+$badge-size-default-min-width: 10px;
+$badge-size-default-padding: 0 8px;
+$badge-size-default-border-width: 1px;
+$badge-size-default-border-radius: 4px;
+$badge-size-mini-height: 16px;
+$badge-size-mini-min-width: 10px;
+$badge-size-mini-border-width: 1px;
+$badge-size-mini-border-radius: 2px;
+$badge-size-mini-padding: 0 4px;
+$badge-font-default-default: caption;
+$badge-font-default-caps: caption-caps;
+$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: 3px;
 $button-light-color-scheme-active-shadow: inset 0 1px 2px 0 rgba(black, 0.2);
@@ -523,16 +534,15 @@ $button-dark-color-scheme-error-color: #ea5868;
 $button-dark-color-scheme-error-icon: #ea5868;
 $button-dark-color-scheme-error-states-active-border: #333f4a;
 $button-dark-color-scheme-error-states-active-background: #333f4a;
+$button-size-height: 32px;
 $button-size-border-width: 1px;
 $button-size-border-radius: 3px;
-$button-size-vertical-padding: 6px;
-$button-size-horizontal-padding: 16px;
+$button-size-horizontal-padding: 12px;
 $button-font-default: body;
 $button-font-primary: body-strong;
 $button-font-primary-transparent: body;
-$icon-button-size-vertical-padding: 6px;
 $icon-button-size-horizontal-padding: 8px;
-$icon-button-size-icon-horizontal-padding: 16px;
+$icon-button-size-left-icon-padding: 6px;
 $card-light-color-scheme-error-vertical-line: #fbd6d6;
 $card-light-color-scheme-error-background: #fff3f3;
 $card-light-color-scheme-error-shadow: #fbd6d6;
@@ -599,6 +609,22 @@ $datepicker-calendar-font-header: caption;
 $datepicker-input-size-width: 130px;
 $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-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;
 $dropdown-item-size-padding: 5px 15px;
 $dropdown-item-size-icon-padding: 0 8px 2px 0;
 $dropdown-item-font-default: body;
@@ -609,7 +635,8 @@ $dropdown-group-header-font-default: body-strong;
 $dropdown-group-header-font-small: caption-caps;
 $dropdown-divider-size-height: 1px;
 $dropdown-divider-size-margin: 4px 0;
-$dropdown-trigger-size-icon-padding-right: 8px;
+$dropdown-trigger-size-button-right-padding: 8px;
+$dropdown-trigger-size-right-icon-padding: 2px;
 $dropdown-panel-size-max-width: 640px;
 $dropdown-panel-size-padding: 4px 0;
 $dropdown-panel-size-border-width: 1px;
@@ -624,12 +651,28 @@ $form-field-dark-color-scheme-background: transparent;
 $form-field-dark-color-scheme-states-hover-border: #515e69;
 $form-field-dark-color-scheme-states-invalid-border: #b9023a;
 $form-field-dark-color-scheme-states-invalid-background: transparent;
+$form-field-size-height: 32px;
 $form-field-size-border-width: 1px;
 $form-field-size-border-radius: 3px;
 $form-field-size-button-width: 32px;
 $form-field-font-default: body;
 $form-field-hint-size-margin-top: 4px;
 $form-field-hint-font-default: caption;
+$form-field-password-hint-light-color-scheme-text-color: #19252f;
+$form-field-password-hint-light-color-scheme-icon-color: #19252f;
+$form-field-password-hint-light-color-scheme-states-invalid-icon-color: #db3c55;
+$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: #016b37;
+$form-field-password-hint-dark-color-scheme-text-color: #f2f5f9;
+$form-field-password-hint-dark-color-scheme-icon-color: #f2f5f9;
+$form-field-password-hint-dark-color-scheme-states-invalid-icon-color: #ea5868;
+$form-field-password-hint-dark-color-scheme-states-invalid-text-color: #f2f5f9;
+$form-field-password-hint-dark-color-scheme-states-valid-text-color: #319d5c;
+$form-field-password-hint-dark-color-scheme-states-valid-icon-color: #319d5c;
+$form-field-password-hint-size-margin-top: 8px;
+$form-field-password-hint-size-icon-margin: 4px;
+$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;
@@ -648,9 +691,8 @@ $forms-size-vertical-legend-margin-top: 32px;
 $forms-size-vertical-legend-margin-bottom: 12px;
 $forms-font-default-label: body;
 $forms-font-default-legend: subheading;
-$input-size-padding: 5px 16px;
+$input-size-padding: 0 16px;
 $input-size-width: 100%;
-$input-size-min-height: 30px;
 $input-font-default: body;
 $input-font-monospace: body-mono;
 $link-light-color-scheme-text: #0374eb;
@@ -672,13 +714,10 @@ $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-animation-transition: color ease-out 300ms;
-$link-animation-state-hover-transition: color 0ms;
 $link-font-default: body;
-$list-size-horizontal-padding: 16px;
-$list-size-icon-padding: 4px;
+$list-size-horizontal-padding: 12px;
+$list-size-icon-right-margin: 8px;
 $list-size-item-height: 32px;
-$list-size-icon-width: 24px;
 $list-font-item: body;
 $modal-light-color-scheme-shadow: (0 0 0 1px #d7dee4, 0 6px 12px 0 rgba(39, 51, 62, 0.5));
 $modal-light-color-scheme-body-top-shadow: 0 2px 4px 0 rgba(39, 51, 62, 0.16);
@@ -698,7 +737,8 @@ $modal-size-border-width: 1px;
 $modal-header-light-color-scheme-border: #d7dee4;
 $modal-header-dark-color-scheme-border: #333f4a;
 $modal-header-size-border-radius: 4px 4px 0 0;
-$modal-header-size-padding: 14px 16px;
+$modal-header-size-height: 56px;
+$modal-header-size-padding: 0 16px;
 $modal-header-font-default: title;
 $modal-body-size-max-height: calc(100vh - 260px);
 $modal-body-size-padding: 16px 24px 24px;
@@ -706,13 +746,15 @@ $modal-body-font-default: body;
 $modal-footer-light-color-scheme-border: #f2f5f9;
 $modal-footer-dark-color-scheme-border: #333f4a;
 $modal-footer-size-border-radius: 0 0 4px 4px;
-$modal-footer-size-padding: 16px 16px;
+$modal-footer-size-height: 64px;
+$modal-footer-size-padding: 0 16px;
 $modal-confirm-size-padding: 24px;
 $navbar-light-color-scheme-background: #19252f;
 $navbar-light-color-scheme-divider-background: #515e69;
 $navbar-dark-color-scheme-background: #333f4a;
 $navbar-dark-color-scheme-divider-background: #515e69;
 $navbar-size-icon-margin: 6px;
+$navbar-size-right-icon-margin: 2px;
 $navbar-font-title: body;
 $vertical-navbar-size-states-expanded-width: 240px;
 $vertical-navbar-size-states-collapsed-width: 56px;
@@ -766,8 +808,8 @@ $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-background: #333f4a;
-$popover-header-size-height: 10px 16px;
-$popover-header-size-padding: 10px 16px;
+$popover-header-size-height: 40px;
+$popover-header-size-padding: 0 16px;
 $popover-header-font-default: subheading;
 $popover-footer-light-color-scheme-border: #f2f5f9;
 $popover-footer-light-color-scheme-background: #f2f5f9;
@@ -808,7 +850,6 @@ $radio-dark-color-scheme-states-focused-inner-circle-shadow: 0 0 0 1px #19252f;
 $radio-size-size: 14px;
 $radio-size-label-margin: 8px;
 $radio-font-default: body;
-$select-size-height: 30px;
 $select-size-left-padding: 16px;
 $select-size-right-padding: 8px;
 $select-size-left-padding-multiple: 8px;
@@ -822,22 +863,40 @@ $select-panel-font-default: body;
 $sidepanel-light-color-scheme-border: #bdc7d1;
 $sidepanel-dark-color-scheme-border: #19252f;
 $sidepanel-font-default: body;
-$sidepanel-header-size-padding: 14px 16px;
+$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-size-padding: 16px;
+$sidepanel-footer-size-height: 64px;
+$sidepanel-footer-size-padding: 0 16px;
 $sidepanel-footer-font-default: body;
 $table-size-border-width: 1px;
 $table-size-row-padding-vertical: 8px;
 $table-size-row-padding-horizontal: 16px;
 $table-font-header: caption;
-$table-font-body: body;
+$table-font-body: body-tabular;
 $tabs-light-color-scheme-border: #d7dee4;
-$tabs-light-color-scheme-state-active: #0374eb;
-$tabs-light-color-scheme-state-disabled-overlay: rgba(white, 0.3);
+$tabs-light-color-scheme-state-normal-icon: #8c99a5;
+$tabs-light-color-scheme-state-normal-text: #19252f;
+$tabs-light-color-scheme-state-hover-icon: #19252f;
+$tabs-light-color-scheme-state-hover-text: #19252f;
+$tabs-light-color-scheme-state-active-marker-color: #0374eb;
+$tabs-light-color-scheme-state-empty-icon: #8c99a5;
+$tabs-light-color-scheme-state-empty-text: #8c99a5;
+$tabs-light-color-scheme-state-disabled-icon: #8c99a5;
+$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-active: #0059b8;
-$tabs-dark-color-scheme-state-disabled-overlay: rgba(black, 0.2);
+$tabs-dark-color-scheme-state-normal-icon: #8c99a5;
+$tabs-dark-color-scheme-state-normal-text: #f2f5f9;
+$tabs-dark-color-scheme-state-hover-icon: #f2f5f9;
+$tabs-dark-color-scheme-state-hover-text: #f2f5f9;
+$tabs-dark-color-scheme-state-active-marker-color: #0059b8;
+$tabs-dark-color-scheme-state-empty-icon: #6d7a86;
+$tabs-dark-color-scheme-state-empty-text: #6d7a86;
+$tabs-dark-color-scheme-state-disabled-icon: #6d7a86;
+$tabs-dark-color-scheme-state-disabled-text: #6d7a86;
+$tabs-dark-color-scheme-state-disabled-marker-opacity: 0.3;
 $tabs-size-height: 40px;
 $tabs-size-highlight-height: 4px;
 $tabs-size-padding-horizontal: 16px;
@@ -845,6 +904,14 @@ $tabs-size-border-width: 1px;
 $tabs-size-border-radius: 3px;
 $tabs-size-label-icon-margin: 8px;
 $tabs-font-default: body;
+$vertical-tabs-light-color-scheme-state-normal-background: transparent;
+$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: #014b9d;
+$vertical-tabs-dark-color-scheme-state-hover-background: rgba(black, 0.05);
+$vertical-tabs-dark-color-scheme-state-hover-selected-background: adjust-color(#014b9d, $lightness:-1%);
 $tags-light-color-scheme-primary-background: #e7f1ff;
 $tags-light-color-scheme-primary-border: #e7f1ff;
 $tags-light-color-scheme-primary-text: #0374eb;
@@ -897,13 +964,12 @@ $tags-size-margin: 2px;
 $tags-size-height: 24px;
 $tags-size-border-width: 1px;
 $tags-size-border-radius: 4px;
-$tags-size-icon-padding: 3px;
+$tags-size-icon-padding: 4px;
 $tags-size-text-margin: 8px;
 $tags-font-default: caption;
 $tags-font-mono: caption-mono;
 $tags-font-caps: caption-caps;
 $tag-list-size-padding: 1px 6px;
-$tag-list-size-min-height: 30px;
 $tag-input-size-height: 22px;
 $tag-input-size-margin: 2px 4px;
 $tag-input-font-default: body;
@@ -984,7 +1050,9 @@ $extended-tooltip-header-size-height: 40px;
 $extended-tooltip-header-size-padding: 10px 16px;
 $extended-tooltip-header-font-default: subheading;
 $tree-size-node-height: 32px;
-$tree-size-padding-left: 8px;
+$tree-size-padding-left: 12px;
+$tree-size-toggle-padding: 4px;
+$tree-size-icon-padding: 8px;
 $tree-size-padding-right: 16px;
 $tree-font-node: body;
 $light-color-scheme-primary-palette: (
@@ -1600,102 +1668,133 @@ $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-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-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-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-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-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-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-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-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-font-feature-settings: "ss01" on, "ss04" on;
 $typography-body-caps-font-size: 15px;
 $typography-body-caps-line-height: 20px;
 $typography-body-caps-letter-spacing: 1.7px;
 $typography-body-caps-font-weight: normal;
 $typography-body-caps-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-body-caps-text-transform: uppercase;
+$typography-body-caps-font-feature-settings: "ss01" on, "ss04" on;
 $typography-body-mono-font-size: 15px;
 $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-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-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-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;
 $typography-caption-caps-font-weight: normal;
 $typography-caption-caps-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-caption-caps-text-transform: uppercase;
+$typography-caption-caps-font-feature-settings: "ss01" on, "ss04" on;
 $typography-caption-mono-font-size: 13px;
 $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-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-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-font-feature-settings: "ss01" on, "ss04" on;
 $typography-extra-small-text-caps-font-size: 11px;
 $typography-extra-small-text-caps-line-height: 16px;
 $typography-extra-small-text-caps-letter-spacing: 1px;
 $typography-extra-small-text-caps-font-weight: normal;
 $typography-extra-small-text-caps-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-extra-small-text-caps-text-transform: uppercase;
+$typography-extra-small-text-caps-font-feature-settings: "ss01" on, "ss04" on;
 $typography-extra-small-text-mono-font-size: 11px;
 $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;
 
 $mosaic: (
   'typography': (
@@ -1705,7 +1804,8 @@ $mosaic: (
       'letter-spacing': $typography-display-1-letter-spacing,
       'font-weight': $typography-display-1-font-weight,
       'font-family': $typography-display-1-font-family,
-      'text-transform': $typography-display-1-text-transform
+      'text-transform': $typography-display-1-text-transform,
+      'font-feature-settings': $typography-display-1-font-feature-settings
     ),
     'display-2': (
       'font-size': $typography-display-2-font-size,
@@ -1713,7 +1813,8 @@ $mosaic: (
       'letter-spacing': $typography-display-2-letter-spacing,
       'font-weight': $typography-display-2-font-weight,
       'font-family': $typography-display-2-font-family,
-      'text-transform': $typography-display-2-text-transform
+      'text-transform': $typography-display-2-text-transform,
+      'font-feature-settings': $typography-display-2-font-feature-settings
     ),
     'display-3': (
       'font-size': $typography-display-3-font-size,
@@ -1721,7 +1822,8 @@ $mosaic: (
       'letter-spacing': $typography-display-3-letter-spacing,
       'font-weight': $typography-display-3-font-weight,
       'font-family': $typography-display-3-font-family,
-      'text-transform': $typography-display-3-text-transform
+      'text-transform': $typography-display-3-text-transform,
+      'font-feature-settings': $typography-display-3-font-feature-settings
     ),
     'headline': (
       'font-size': $typography-headline-font-size,
@@ -1729,7 +1831,8 @@ $mosaic: (
       'letter-spacing': $typography-headline-letter-spacing,
       'font-weight': $typography-headline-font-weight,
       'font-family': $typography-headline-font-family,
-      'text-transform': $typography-headline-text-transform
+      'text-transform': $typography-headline-text-transform,
+      'font-feature-settings': $typography-headline-font-feature-settings
     ),
     'title': (
       'font-size': $typography-title-font-size,
@@ -1737,7 +1840,8 @@ $mosaic: (
       'letter-spacing': $typography-title-letter-spacing,
       'font-weight': $typography-title-font-weight,
       'font-family': $typography-title-font-family,
-      'text-transform': $typography-title-text-transform
+      'text-transform': $typography-title-text-transform,
+      'font-feature-settings': $typography-title-font-feature-settings
     ),
     'subheading': (
       'font-size': $typography-subheading-font-size,
@@ -1745,7 +1849,8 @@ $mosaic: (
       'letter-spacing': $typography-subheading-letter-spacing,
       'font-weight': $typography-subheading-font-weight,
       'font-family': $typography-subheading-font-family,
-      'text-transform': $typography-subheading-text-transform
+      'text-transform': $typography-subheading-text-transform,
+      'font-feature-settings': $typography-subheading-font-feature-settings
     ),
     'body': (
       'font-size': $typography-body-font-size,
@@ -1753,7 +1858,17 @@ $mosaic: (
       'letter-spacing': $typography-body-letter-spacing,
       'font-weight': $typography-body-font-weight,
       'font-family': $typography-body-font-family,
-      'text-transform': $typography-body-text-transform
+      'text-transform': $typography-body-text-transform,
+      'font-feature-settings': $typography-body-font-feature-settings
+    ),
+    'body-tabular': (
+      'font-size': $typography-body-tabular-font-size,
+      'line-height': $typography-body-tabular-line-height,
+      'letter-spacing': $typography-body-tabular-letter-spacing,
+      'font-weight': $typography-body-tabular-font-weight,
+      'font-family': $typography-body-tabular-font-family,
+      'text-transform': $typography-body-tabular-text-transform,
+      'font-feature-settings': $typography-body-tabular-font-feature-settings
     ),
     'body-strong': (
       'font-size': $typography-body-strong-font-size,
@@ -1761,7 +1876,8 @@ $mosaic: (
       'letter-spacing': $typography-body-strong-letter-spacing,
       'font-weight': $typography-body-strong-font-weight,
       'font-family': $typography-body-strong-font-family,
-      'text-transform': $typography-body-strong-text-transform
+      'text-transform': $typography-body-strong-text-transform,
+      'font-feature-settings': $typography-body-strong-font-feature-settings
     ),
     'body-caps': (
       'font-size': $typography-body-caps-font-size,
@@ -1769,7 +1885,8 @@ $mosaic: (
       'letter-spacing': $typography-body-caps-letter-spacing,
       'font-weight': $typography-body-caps-font-weight,
       'font-family': $typography-body-caps-font-family,
-      'text-transform': $typography-body-caps-text-transform
+      'text-transform': $typography-body-caps-text-transform,
+      'font-feature-settings': $typography-body-caps-font-feature-settings
     ),
     'body-mono': (
       'font-size': $typography-body-mono-font-size,
@@ -1777,7 +1894,8 @@ $mosaic: (
       'letter-spacing': $typography-body-mono-letter-spacing,
       'font-weight': $typography-body-mono-font-weight,
       'font-family': $typography-body-mono-font-family,
-      'text-transform': $typography-body-mono-text-transform
+      'text-transform': $typography-body-mono-text-transform,
+      'font-feature-settings': $typography-body-mono-font-feature-settings
     ),
     'caption': (
       'font-size': $typography-caption-font-size,
@@ -1785,7 +1903,17 @@ $mosaic: (
       'letter-spacing': $typography-caption-letter-spacing,
       'font-weight': $typography-caption-font-weight,
       'font-family': $typography-caption-font-family,
-      'text-transform': $typography-caption-text-transform
+      'text-transform': $typography-caption-text-transform,
+      'font-feature-settings': $typography-caption-font-feature-settings
+    ),
+    'caption-tabular': (
+      'font-size': $typography-caption-tabular-font-size,
+      'line-height': $typography-caption-tabular-line-height,
+      'letter-spacing': $typography-caption-tabular-letter-spacing,
+      'font-weight': $typography-caption-tabular-font-weight,
+      'font-family': $typography-caption-tabular-font-family,
+      'text-transform': $typography-caption-tabular-text-transform,
+      'font-feature-settings': $typography-caption-tabular-font-feature-settings
     ),
     'caption-caps': (
       'font-size': $typography-caption-caps-font-size,
@@ -1793,7 +1921,8 @@ $mosaic: (
       'letter-spacing': $typography-caption-caps-letter-spacing,
       'font-weight': $typography-caption-caps-font-weight,
       'font-family': $typography-caption-caps-font-family,
-      'text-transform': $typography-caption-caps-text-transform
+      'text-transform': $typography-caption-caps-text-transform,
+      'font-feature-settings': $typography-caption-caps-font-feature-settings
     ),
     'caption-mono': (
       'font-size': $typography-caption-mono-font-size,
@@ -1801,7 +1930,8 @@ $mosaic: (
       'letter-spacing': $typography-caption-mono-letter-spacing,
       'font-weight': $typography-caption-mono-font-weight,
       'font-family': $typography-caption-mono-font-family,
-      'text-transform': $typography-caption-mono-text-transform
+      'text-transform': $typography-caption-mono-text-transform,
+      'font-feature-settings': $typography-caption-mono-font-feature-settings
     ),
     'small-text': (
       'font-size': $typography-small-text-font-size,
@@ -1809,7 +1939,8 @@ $mosaic: (
       'letter-spacing': $typography-small-text-letter-spacing,
       'font-weight': $typography-small-text-font-weight,
       'font-family': $typography-small-text-font-family,
-      'text-transform': $typography-small-text-text-transform
+      'text-transform': $typography-small-text-text-transform,
+      'font-feature-settings': $typography-small-text-font-feature-settings
     ),
     'extra-small-text': (
       'font-size': $typography-extra-small-text-font-size,
@@ -1817,7 +1948,8 @@ $mosaic: (
       'letter-spacing': $typography-extra-small-text-letter-spacing,
       'font-weight': $typography-extra-small-text-font-weight,
       'font-family': $typography-extra-small-text-font-family,
-      'text-transform': $typography-extra-small-text-text-transform
+      'text-transform': $typography-extra-small-text-text-transform,
+      'font-feature-settings': $typography-extra-small-text-font-feature-settings
     ),
     'extra-small-text-caps': (
       'font-size': $typography-extra-small-text-caps-font-size,
@@ -1825,7 +1957,8 @@ $mosaic: (
       'letter-spacing': $typography-extra-small-text-caps-letter-spacing,
       'font-weight': $typography-extra-small-text-caps-font-weight,
       'font-family': $typography-extra-small-text-caps-font-family,
-      'text-transform': $typography-extra-small-text-caps-text-transform
+      'text-transform': $typography-extra-small-text-caps-text-transform,
+      'font-feature-settings': $typography-extra-small-text-caps-font-feature-settings
     ),
     'extra-small-text-mono': (
       'font-size': $typography-extra-small-text-mono-font-size,
@@ -1833,7 +1966,8 @@ $mosaic: (
       'letter-spacing': $typography-extra-small-text-mono-letter-spacing,
       'font-weight': $typography-extra-small-text-mono-font-weight,
       'font-family': $typography-extra-small-text-mono-font-family,
-      'text-transform': $typography-extra-small-text-mono-text-transform
+      'text-transform': $typography-extra-small-text-mono-text-transform,
+      'font-feature-settings': $typography-extra-small-text-mono-font-feature-settings
     )
   )
 );
@@ -2570,6 +2704,11 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
         state-selected-background: $datepicker-body-light-color-scheme-states-selected-background
     );
 
+    $dl: (
+        dt: $description-list-light-color-scheme-dt,
+        dd: $description-list-light-color-scheme-dd
+    );
+
     $form-field: (
         border: $form-field-light-color-scheme-border,
         background: $form-field-light-color-scheme-background,
@@ -2579,6 +2718,17 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
         state-invalid-background: $form-field-light-color-scheme-states-invalid-background
     );
 
+    $form-field-password-hint: (
+        text-color: $form-field-password-hint-light-color-scheme-text-color,
+        icon-color: $form-field-password-hint-light-color-scheme-text-color,
+
+        state-invalid-text-color: $form-field-password-hint-light-color-scheme-states-invalid-text-color,
+        state-invalid-icon-color: $form-field-password-hint-light-color-scheme-states-invalid-icon-color,
+
+        state-valid-text-color: $form-field-password-hint-light-color-scheme-states-valid-text-color,
+        state-valid-icon-color: $form-field-password-hint-light-color-scheme-states-valid-icon-color
+    );
+
     $forms: (
         label: $forms-light-color-scheme-label,
         legend: $forms-light-color-scheme-legend,
@@ -2665,8 +2815,27 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
 
     $tabs: (
         border: $tabs-light-color-scheme-border,
-        state-active: $tabs-light-color-scheme-state-active,
-        state-disabled-overlay: $tabs-light-color-scheme-state-disabled-overlay
+        state-normal-icon: $tabs-light-color-scheme-state-normal-icon,
+        state-normal-text: $tabs-light-color-scheme-state-normal-text,
+
+        state-hover-icon: $tabs-light-color-scheme-state-hover-icon,
+        state-hover-text: $tabs-light-color-scheme-state-hover-text,
+
+        state-active-marker: $tabs-light-color-scheme-state-active-marker-color,
+
+        state-empty-icon: $tabs-light-color-scheme-state-empty-icon,
+        state-empty-text: $tabs-light-color-scheme-state-empty-text,
+
+        state-disabled-icon: $tabs-light-color-scheme-state-disabled-icon,
+        state-disabled-text: $tabs-light-color-scheme-state-disabled-text,
+        state-disabled-marker-opacity: $tabs-light-color-scheme-state-disabled-marker-opacity
+    );
+
+    $vertical-tabs: (
+        state-normal-background: $vertical-tabs-light-color-scheme-state-normal-background,
+        state-selected-background: $vertical-tabs-light-color-scheme-state-selected-background,
+        state-hover-background: $vertical-tabs-light-color-scheme-state-hover-background,
+        state-hover-selected-background: $vertical-tabs-light-color-scheme-state-hover-selected-background
     );
 
     $tags: (
@@ -2750,7 +2919,9 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
         card: $card,
         checkbox: $checkbox,
         datepicker: $datepicker,
+        dl: $dl,
         form-field: $form-field,
+        form-field-password-hint: $form-field-password-hint,
         forms: $forms,
         link: $link,
         modal: $modal,
@@ -2761,6 +2932,7 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
         radio: $radio,
         sidepanel: $sidepanel,
         tabs: $tabs,
+        vertical-tabs: $vertical-tabs,
         tags: $tags,
         toggle: $toggle,
         tooltip: $tooltip
@@ -2956,6 +3128,11 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
         state-selected-background: $datepicker-body-dark-color-scheme-states-selected-background
     );
 
+    $dl: (
+        dt: $description-list-dark-color-scheme-dt,
+        dd: $description-list-dark-color-scheme-dd
+    );
+
     $form-field: (
         border: $form-field-dark-color-scheme-border,
         background: $form-field-dark-color-scheme-background,
@@ -2965,6 +3142,17 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
         state-invalid-background: $form-field-dark-color-scheme-states-invalid-background
     );
 
+    $form-field-password-hint: (
+        text-color: $form-field-password-hint-dark-color-scheme-text-color,
+        icon-color: $form-field-password-hint-dark-color-scheme-text-color,
+
+        state-invalid-text-color: $form-field-password-hint-dark-color-scheme-states-invalid-text-color,
+        state-invalid-icon-color: $form-field-password-hint-dark-color-scheme-states-invalid-icon-color,
+
+        state-valid-text-color: $form-field-password-hint-dark-color-scheme-states-valid-text-color,
+        state-valid-icon-color: $form-field-password-hint-dark-color-scheme-states-valid-icon-color
+    );
+
     $forms: (
         label: $forms-dark-color-scheme-label,
         legend: $forms-dark-color-scheme-legend,
@@ -3051,8 +3239,27 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
 
     $tabs: (
         border: $tabs-dark-color-scheme-border,
-        state-active: $tabs-dark-color-scheme-state-active,
-        state-disabled-overlay: $tabs-dark-color-scheme-state-disabled-overlay
+        state-normal-icon: $tabs-dark-color-scheme-state-normal-icon,
+        state-normal-text: $tabs-dark-color-scheme-state-normal-text,
+
+        state-hover-icon: $tabs-dark-color-scheme-state-hover-icon,
+        state-hover-text: $tabs-dark-color-scheme-state-hover-text,
+
+        state-active-marker: $tabs-dark-color-scheme-state-active-marker-color,
+
+        state-empty-icon: $tabs-dark-color-scheme-state-empty-icon,
+        state-empty-text: $tabs-dark-color-scheme-state-empty-text,
+
+        state-disabled-icon: $tabs-dark-color-scheme-state-disabled-icon,
+        state-disabled-text: $tabs-dark-color-scheme-state-disabled-text,
+        state-disabled-marker-opacity: $tabs-dark-color-scheme-state-disabled-marker-opacity
+    );
+
+    $vertical-tabs: (
+        state-normal-background: $vertical-tabs-dark-color-scheme-state-normal-background,
+        state-selected-background: $vertical-tabs-dark-color-scheme-state-selected-background,
+        state-hover-background: $vertical-tabs-dark-color-scheme-state-hover-background,
+        state-hover-selected-background: $vertical-tabs-dark-color-scheme-state-hover-selected-background
     );
 
     $tags: (
@@ -3136,7 +3343,9 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
         card: $card,
         checkbox: $checkbox,
         datepicker: $datepicker,
+        dl: $dl,
         form-field: $form-field,
+        form-field-password-hint: $form-field-password-hint,
         forms: $forms,
         link: $link,
         modal: $modal,
@@ -3147,6 +3356,7 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
         radio: $radio,
         sidepanel: $sidepanel,
         tabs: $tabs,
+        vertical-tabs: $vertical-tabs,
         tags: $tags,
         toggle: $toggle,
         tooltip: $tooltip
@@ -3314,12 +3524,11 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
     $checkbox: map-get(map-get($theme, components), checkbox);
 
     .mc-pseudo-checkbox {
-        border-color: mc-color($second);
-        background-color: map-get($background, background);
+        border-color: map-get($checkbox, border);
 
         & .mc-checkbox-checkmark,
         & .mc-checkbox-mixedmark {
-            color: white;
+            color: map-get($background, background);
         }
 
         &.mc-checked,
@@ -3375,7 +3584,8 @@ $fonts: (
     $letter-spacing: normal,
     $font-weight: normal,
     $font-family: null,
-    $text-transform: null
+    $text-transform: null,
+    $font-feature-settings: null
 ) {
     @return (
         font-size: $font-size,
@@ -3383,7 +3593,8 @@ $fonts: (
         font-weight: $font-weight,
         font-family: $font-family,
         letter-spacing: $letter-spacing,
-        text-transform: $text-transform
+        text-transform: $text-transform,
+        font-feature-settings: $font-feature-settings
     );
 }
 
@@ -3411,6 +3622,10 @@ $fonts: (
     @return _mc-get-type-value($config, $level, text-transform);
 }
 
+@function mc-font-feature-settings($config, $level) {
+    @return _mc-get-type-value($config, $level, font-feature-settings);
+}
+
 // Gets the font-family from a typography config and removes the quotes around it.
 @function mc-font-family($config, $level: null) {
     $font-family: map-get($config, font-family);
@@ -3429,10 +3644,12 @@ $fonts: (
     $line-height: mc-line-height($config, $level);
     $font-family: mc-font-family($config, $level);
     $text-transform: mc-text-transform($config, $level);
+    $font-feature-settings: mc-font-feature-settings($config, $level);
 
     font: $font-weight #{$font-size}/#{$line-height} $font-family;
     letter-spacing: mc-letter-spacing($config, $level);
     text-transform: mc-text-transform($config, $level);
+    font-feature-settings: mc-font-feature-settings($config, $level);
 }
 
 @mixin mc-base-typography($config) {
@@ -3464,6 +3681,10 @@ $fonts: (
         @include mc-typography-level-to-styles($config, body);
     }
 
+    .mc-body_tabular {
+        @include mc-typography-level-to-styles($config, body-tabular);
+    }
+
     .mc-body_strong {
         @include mc-typography-level-to-styles($config, body-strong);
     }
@@ -3480,6 +3701,10 @@ $fonts: (
         @include mc-typography-level-to-styles($config, caption);
     }
 
+    .mc-caption_tabular {
+        @include mc-typography-level-to-styles($config, caption-tabular);
+    }
+
     .mc-caption_caps {
         @include mc-typography-level-to-styles($config, caption-caps);
     }
@@ -3518,10 +3743,12 @@ $fonts: (
         body-strong:        map-get($typography, body-strong),
         body-caps:          map-get($typography, body-caps),
         body-mono:          map-get($typography, body-mono),
+        body-tabular:       map-get($typography, body-tabular),
 
         caption:            map-get($typography, caption),
         caption-caps:       map-get($typography, caption-caps),
         caption-mono:       map-get($typography, caption-mono),
+        caption-tabular:    map-get($typography, caption-tabular),
 
         small-text:         map-get($typography, small-text),
         extra-small-text:   map-get($typography, extra-small-text),
@@ -4271,6 +4498,46 @@ $mc-datepicker-today-fade-amount: 0.2;
 
 
 
+@mixin mc-dl-theme($theme) {
+    $dl: map-get(map-get($theme, components), dl);
+
+    .mc-dt {
+        color: map-get($dl, dt);
+    }
+
+    .mc-dd {
+        color: map-get($dl, dd);
+    }
+}
+
+@mixin mc-dl-typography($config) {
+    .mc-dl {
+        & .mc-dt {
+            @include mc-typography-level-to-styles($config, $description-list-font-horizontal-dt);
+        }
+
+        & .mc-dd {
+            @include mc-typography-level-to-styles($config, $description-list-font-horizontal-dd);
+        }
+    }
+
+    .mc-dl.mc-dl_vertical {
+        & .mc-dt {
+            @include mc-typography-level-to-styles($config, $description-list-font-vertical-dt);
+        }
+
+        & .mc-dd {
+            @include mc-typography-level-to-styles($config, $description-list-font-vertical-dd);
+        }
+    }
+
+}
+
+
+
+
+
+
 @mixin mc-dropdown-theme($theme) {
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
@@ -4390,12 +4657,12 @@ $mc-datepicker-today-fade-amount: 0.2;
                     }
                 }
 
-                & .mc-form-field__hint {
+                & .mc-hint {
                     color: mc-color($error);
                 }
             }
 
-            &.mc-focused {
+            &.cdk-focused {
                 &:not(.ng-invalid) .mc-form-field__container {
                     border-color: map-get(map-get($theme, states), focused-color);
                     box-shadow: 0 0 0 1px map-get(map-get($theme, states), focused-color);
@@ -4425,6 +4692,32 @@ $mc-datepicker-today-fade-amount: 0.2;
             /* stylelint-enable no-descending-specificity */
         }
     }
+
+    .mc-password-hint {
+        $password-hint: map-get(map-get($theme, components), form-field-password-hint);
+
+        color: map-get($password-hint, text-color);
+
+        & .mc-password-hint__icon {
+            color: map-get($password-hint, icon-color);
+        }
+
+        &.mc-password-hint_valid {
+            color: map-get($password-hint, state-valid-text-color);
+
+            & .mc-password-hint__icon {
+                color: map-get($password-hint, state-valid-icon-color);
+            }
+        }
+
+        &.mc-password-hint_invalid {
+            color: map-get($password-hint, state-invalid-text-color);
+
+            & .mc-password-hint__icon {
+                color: map-get($password-hint, state-invalid-icon-color);
+            }
+        }
+    }
 }
 
 @mixin mc-form-field-typography($config) {
@@ -4447,6 +4740,7 @@ $mc-datepicker-today-fade-amount: 0.2;
 
 @mixin mc-input-theme($theme) {
     $foreground: map-get($theme, foreground);
+    $background: map-get($theme, background);
 
     .mc-input {
         color: map-get($foreground, text);
@@ -4463,6 +4757,25 @@ $mc-datepicker-today-fade-amount: 0.2;
             color: map-get($foreground, text-disabled);
         }
     }
+
+    .mc-password-toggle {
+        color: map-get($foreground, icon);
+
+        &:hover {
+            color: map-get($foreground, text);
+        }
+
+        &[disabled] {
+            cursor: default;
+
+            color: map-get($foreground, text-disabled);
+        }
+
+        &.cdk-keyboard-focused {
+            border-color: map-get(map-get($theme, states), focused-color);
+            box-shadow: 0 0 0 1px map-get(map-get($theme, states), focused-color);
+        }
+    }
 }
 
 @mixin mc-input-typography($config) {
@@ -4486,7 +4799,7 @@ $mc-datepicker-today-fade-amount: 0.2;
     text-decoration: none;
     cursor: pointer;
 
-    transition: $link-animation-transition;
+    transition: color ease-out 300ms;
 
     &:focus {
         outline: none;
@@ -4495,7 +4808,7 @@ $mc-datepicker-today-fade-amount: 0.2;
     /* stylelint-disable no-descending-specificity */
     &:hover {
         color: map-get($link, state-hover-text);
-        transition: $link-animation-state-hover-transition;
+        transition: color 0ms;
 
         &.mc-text-only,
         &.mc-text-with-icon .mc-link__text {
@@ -5205,6 +5518,7 @@ button {
     $states: map-get($theme, states);
 
     $tabs: map-get(map-get($theme, components), tabs);
+    $vertical-tabs: map-get(map-get($theme, components), vertical-tabs);
 
     .mc-tab-group_vertical .mc-tab-header__content {
         border-right-color: map-get($foreground, divider);
@@ -5254,13 +5568,21 @@ button {
             border-bottom-color: transparent;
         }
 
-        &.mc-tab-label_empty .mc-tab-overlay{
-            background: map-get($tabs, state-disabled-overlay);
+        &.mc-tab-label_empty {
+            color: map-get($tabs, state-empty-text);
+
+            & .mc-icon {
+                color: map-get($tabs, state-empty-icon);
+            }
         }
 
         &:hover {
-            & .mc-tab-overlay {
-                background: map-get($background, overlay-hover);
+            background: map-get($background, overlay-hover);
+
+            color: map-get($tabs, state-hover-text);
+
+            & .mc-icon {
+                color: map-get($tabs, state-hover-icon);
             }
         }
 
@@ -5269,166 +5591,140 @@ button {
                 color: map-get($tabs, border);
                 bottom-color: transparent;
             }
-
-            & .mc-tab-overlay {
-                background: transparent;
-            }
         }
 
         &[disabled] {
             cursor: default;
 
-            & .mc-tab-overlay {
-                background: map-get($tabs, state-disabled-overlay);
+            color: map-get($tabs, state-disabled-text);
+
+            & .mc-icon {
+                color: map-get($tabs, state-disabled-icon);
             }
         }
     }
 
+    .mc-tab-link,
     .mc-tab-label_horizontal {
-        color: map-get($foreground, text);
+        color: map-get($tabs, state-normal-text);
 
-        border-bottom-color: map-get($tabs, border);
-
-        & .mc-tab-overlay {
-            background: transparent;
+        & .mc-icon {
+            color: map-get($tabs, state-normal-icon);
         }
 
+        border-bottom-color: map-get($tabs, border);
+
         &.cdk-keyboard-focused:after {
             border-color: map-get(map-get($theme, states), focused-color);
             border-bottom-color: transparent;
         }
 
-        &.mc-tab-label_empty .mc-tab-overlay{
-            background: map-get($tabs, state-disabled-overlay);
-        }
-
-        &:hover {
-            &:before {
-                background-color: map-get($tabs, border);
-            }
-
-            & .mc-tab-overlay {
-                background: map-get($background, overlay-hover);
-            }
+        &.mc-tab-label_empty {
+            color: map-get($tabs, state-empty-text);
 
             & .mc-icon {
-                color: map-get($foreground, text);
+                color: map-get($tabs, state-empty-icon);
             }
         }
 
         &.mc-active {
             border-bottom-color: transparent;
 
+            color: map-get($tabs, state-normal-text);
+
+            & .mc-icon {
+                color: map-get($tabs, state-normal-icon);
+            }
+
             &:before {
-                background-color: map-get($tabs, state-active);
+                background-color: map-get($tabs, state-active-marker);
             }
+        }
 
-            & .mc-tab-overlay {
-                background: transparent;
+        &:hover {
+            background: map-get($background, overlay-hover);
+
+            color: map-get($tabs, state-hover-text);
+
+            & .mc-icon {
+                color: map-get($tabs, state-hover-icon);
             }
         }
 
         &[disabled] {
             cursor: default;
 
-            & .mc-tab-overlay {
-                background: map-get($tabs, state-disabled-overlay);
+            color: map-get($tabs, state-disabled-text);
+
+            &:before {
+                opacity: map-get($tabs, state-disabled-marker-opacity);
+            }
+
+            & .mc-icon {
+                color: map-get($tabs, state-disabled-icon);
             }
         }
     }
 
     .mc-tab-label_vertical {
-        color: map-get($foreground, text);
+        background: map-get($vertical-tabs, state-normal-background);
+        color: map-get($tabs, state-normal-text);
 
-        & .mc-tab-overlay {
-            background: transparent;
+        & .mc-icon {
+            color: map-get($tabs, state-normal-icon);
         }
 
         &.cdk-keyboard-focused:after {
             border-color: map-get(map-get($theme, states), focused-color);
         }
 
-        &.mc-tab-label_empty .mc-tab-overlay{
-            background: map-get($tabs, state-disabled-overlay);
+        &.mc-tab-label_empty {
+            color: map-get($tabs, state-empty-text);
+
+            & .mc-icon {
+                color: map-get($tabs, state-empty-icon);
+            }
         }
 
         &:hover {
-            &:before {
-                background-color: map-get($tabs, border);
-            }
+            background: map-get($vertical-tabs, state-hover-background);
 
-            & .mc-tab-overlay {
-                background: map-get($background, overlay-hover);
-            }
+            color: map-get($tabs, state-hover-text);
 
             & .mc-icon {
-                color: map-get($foreground, text);
+                color: map-get($tabs, state-hover-icon);
             }
         }
 
         &.mc-active {
-            border-bottom-color: transparent;
+            color: map-get($tabs, state-normal-text);
             background: map-get($states, selected-color);
 
-            &:before {
-                background-color: map-get($tabs, state-active);
+            & .mc-icon {
+                color: map-get($tabs, state-normal-icon);
             }
 
-            & .mc-tab-overlay {
-                background: transparent;
+            &:before {
+                background-color: map-get($tabs, state-active-marker);
             }
 
             &:hover {
-                & .mc-tab-overlay {
-                    background: map-get($background, overlay-hover);
-                }
+                background: map-get($vertical-tabs, state-hover-selected-background);
 
                 & .mc-icon {
-                    color: map-get($foreground, text);
+                    color: map-get($tabs, state-hover-icon);
                 }
             }
         }
 
         &[disabled] {
             cursor: default;
-            background: transparent;
+            background: map-get($vertical-tabs, state-normal-background);
 
-            & .mc-tab-overlay {
-                background: map-get($tabs, state-disabled-overlay);
-            }
-        }
-    }
-
-    .mc-tab-link {
-        &.mc-tab-label_empty .mc-tab-overlay{
-            background: map-get($tabs, state-disabled-overlay);
-        }
-
-        &:hover {
-            &:before {
-                background-color: map-get($tabs, border);
-            }
+            color: map-get($tabs, state-disabled-text);
 
             & .mc-icon {
-                color: map-get($foreground, text);
-            }
-        }
-
-        &.mc-active {
-            border-bottom-color: transparent;
-
-            &:before {
-                background-color: map-get($tabs, state-active);
-            }
-
-            & .mc-tab-overlay {
-                background: transparent;
-            }
-        }
-
-        &[disabled] {
-            & .mc-tab-overlay {
-                background: map-get($tabs, state-disabled-overlay);
+                color: map-get($tabs, state-disabled-icon);
             }
         }
     }
@@ -6082,6 +6378,7 @@ button {
     @include mc-checkbox-typography($config);
     @include mc-datepicker-typography($config);
     @include mc-dropdown-typography($config);
+    @include mc-dl-typography($config);
     @include mc-form-field-typography($config);
     @include mc-forms-typography($config);
     @include mc-input-typography($config);
@@ -6554,6 +6851,7 @@ button {
     @include mc-card-theme($theme);
     @include mc-checkbox-theme($theme);
     @include mc-datepicker-theme($theme);
+    @include mc-dl-theme($theme);
     @include mc-divider-theme($theme);
     @include mc-dropdown-theme($theme);
     @include mc-form-field-theme($theme);