@ptsecurity/mosaic 17.0.0 → 17.1.0

package/_theming.scss

@@ -183,7 +183,7 @@ $dark-color-scheme-states-focused-color-error: #b9023a;
 $dark-color-scheme-states-selected-color: rgba(3, 116, 235, 0.3);
 $dark-color-scheme-states-pressed-shadow: inset 1px 2px 2px 0 rgba(black, 0.2);
 $dark-color-scheme-states-disabled-opacity: 0.45;
-$font-family-accent: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$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;
@@ -297,6 +297,32 @@ $palette-red-contrast-600: white;
 $palette-red-contrast-700: white;
 $palette-red-contrast-800: white;
 $palette-red-contrast-a100: #4D4D4D;
+$palette-orange-40: #fef2ef;
+$palette-orange-60: #ffebe6;
+$palette-orange-100: #fbd7ce;
+$palette-orange-200: #fbb5a3;
+$palette-orange-300: #ed7456;
+$palette-orange-400: #e95e3c;
+$palette-orange-500: #d84721;
+$palette-orange-560: #aa3617;
+$palette-orange-600: #8a2a11;
+$palette-orange-700: #75220d;
+$palette-orange-800: #601b09;
+$palette-orange-900: #481205;
+$palette-orange-1000: #3a0d03;
+$palette-orange-a100: rgba(215, 74, 0, 0.15);
+$palette-orange-contrast-40: #4D4D4D;
+$palette-orange-contrast-60: #4D4D4D;
+$palette-orange-contrast-100: #4D4D4D;
+$palette-orange-contrast-200: #4D4D4D;
+$palette-orange-contrast-300: #4D4D4D;
+$palette-orange-contrast-400: white;
+$palette-orange-contrast-500: white;
+$palette-orange-contrast-560: white;
+$palette-orange-contrast-600: white;
+$palette-orange-contrast-700: white;
+$palette-orange-contrast-800: white;
+$palette-orange-contrast-a100: #4D4D4D;
 $palette-grey-40: #f2f5f9;
 $palette-grey-60: #ebeef2;
 $palette-grey-100: #d7dee4;
@@ -664,7 +690,7 @@ $card-dark-color-scheme-info-shadow: #084453;
 $card-size-vertical-line: 4px;
 $checkbox-light-color-scheme-default-border: #bdc7d1;
 $checkbox-light-color-scheme-default-color: white;
-$checkbox-light-color-scheme-default-background: transparent;
+$checkbox-light-color-scheme-default-background: white;
 $checkbox-light-color-scheme-default-states-checked-border: #0374eb;
 $checkbox-light-color-scheme-default-states-checked-background: #0374eb;
 $checkbox-light-color-scheme-default-states-focused-border: #0374eb;
@@ -675,7 +701,7 @@ $checkbox-light-color-scheme-default-states-checked-focused-shadow: 0 0 0 1px #0
 $checkbox-light-color-scheme-default-states-checked-focused-outline: 1px solid white;
 $checkbox-light-color-scheme-error-border: #db3c55;
 $checkbox-light-color-scheme-error-color: white;
-$checkbox-light-color-scheme-error-background: transparent;
+$checkbox-light-color-scheme-error-background: white;
 $checkbox-light-color-scheme-error-states-checked-border: #db3c55;
 $checkbox-light-color-scheme-error-states-checked-background: #db3c55;
 $checkbox-light-color-scheme-error-states-focused-border: #db3c55;
@@ -686,7 +712,7 @@ $checkbox-light-color-scheme-error-states-checked-focused-shadow: 0 0 0 1px #db3
 $checkbox-light-color-scheme-error-states-checked-focused-outline: 1px solid white;
 $checkbox-dark-color-scheme-default-border: #515e69;
 $checkbox-dark-color-scheme-default-color: white;
-$checkbox-dark-color-scheme-default-background: transparent;
+$checkbox-dark-color-scheme-default-background: #19252f;
 $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;
@@ -697,7 +723,7 @@ $checkbox-dark-color-scheme-default-states-checked-focused-shadow: 0 0 0 1px #41
 $checkbox-dark-color-scheme-default-states-checked-focused-outline: 1px solid #19252f;
 $checkbox-dark-color-scheme-error-border: #b9023a;
 $checkbox-dark-color-scheme-error-color: white;
-$checkbox-dark-color-scheme-error-background: transparent;
+$checkbox-dark-color-scheme-error-background: #19252f;
 $checkbox-dark-color-scheme-error-states-checked-border: #b9023a;
 $checkbox-dark-color-scheme-error-states-checked-background: #b9023a;
 $checkbox-dark-color-scheme-error-states-focused-border: #b9023a;
@@ -1137,7 +1163,8 @@ $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-single-states-disable-border: #bdc7d1;
+$file-upload-light-color-scheme-single-states-disable-text: #8c99a5;
 $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;
@@ -1147,7 +1174,8 @@ $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-light-color-scheme-multiple-states-disable-border: #bdc7d1;
+$file-upload-light-color-scheme-multiple-states-disable-text: #8c99a5;
 $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;
@@ -1157,7 +1185,8 @@ $file-upload-dark-color-scheme-single-states-progress-border: mix(#515e69, trans
 $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-single-states-disable-border: #515e69;
+$file-upload-dark-color-scheme-single-states-disable-text: #6d7a86;
 $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;
@@ -1167,7 +1196,8 @@ $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-dark-color-scheme-multiple-states-disable-border: #515e69;
+$file-upload-dark-color-scheme-multiple-states-disable-text: #6d7a86;
 $file-upload-size-single-height: 48px;
 $file-upload-size-single-vertical-padding: 12px;
 $file-upload-size-single-border-width: 1px;
@@ -1615,8 +1645,9 @@ $scrollbar-dark-color-scheme-arrow-disabled: #333f4a;
 $scrollbar-dark-color-scheme-arrow-background: #27333e;
 $scrollbar-dark-color-scheme-corner-background: #27333e;
 $scrollbar-dark-color-scheme-resizer-background: #27333e;
-$scrollbar-size-track-width: 16px;
+$scrollbar-size-track-dimension: 16px;
 $scrollbar-size-thumb-width: 8px;
+$scrollbar-size-thumb-min-size: 20px;
 $scrollbar-size-thumb-border-width: 4px;
 $scrollbar-size-thumb-border-radius: 8px;
 $scrollbar-size-arrow-icon-width: 16px;
@@ -2376,6 +2407,38 @@ A100: #4D4D4D,
 )
 );
 
+$color-orange-palette: (
+40: #fef2ef,
+60: #ffebe6,
+100: #fbd7ce,
+200: #fbb5a3,
+300: #ed7456,
+400: #e95e3c,
+500: #d84721,
+560: #aa3617,
+600: #8a2a11,
+700: #75220d,
+800: #601b09,
+900: #481205,
+1000: #3a0d03,
+A100: rgba(215, 74, 0, 0.15),
+contrast: (
+40: #4D4D4D,
+60: #4D4D4D,
+100: #4D4D4D,
+200: #4D4D4D,
+300: #4D4D4D,
+400: white,
+500: white,
+560: white,
+600: white,
+700: white,
+800: white,
+A100: #4D4D4D,
+
+)
+);
+
 $color-grey-palette: (
 40: #f2f5f9,
 60: #ebeef2,
@@ -2512,35 +2575,35 @@ $typography-display-1-font-size: 56px;
 $typography-display-1-line-height: 76px;
 $typography-display-1-letter-spacing: normal;
 $typography-display-1-font-weight: normal;
-$typography-display-1-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-display-1-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: initial;
 $typography-display-2-font-size: 45px;
 $typography-display-2-line-height: 56px;
 $typography-display-2-letter-spacing: normal;
 $typography-display-2-font-weight: normal;
-$typography-display-2-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-display-2-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: initial;
 $typography-display-3-font-size: 34px;
 $typography-display-3-line-height: 44px;
 $typography-display-3-letter-spacing: normal;
 $typography-display-3-font-weight: normal;
-$typography-display-3-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-display-3-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: initial;
 $typography-headline-font-size: 24px;
 $typography-headline-line-height: 32px;
 $typography-headline-letter-spacing: normal;
 $typography-headline-font-weight: normal;
-$typography-headline-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-headline-font-family: 'TT-Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-headline-text-transform: null;
 $typography-headline-font-feature-settings: initial;
 $typography-title-font-size: 20px;
 $typography-title-line-height: 28px;
 $typography-title-letter-spacing: normal;
 $typography-title-font-weight: 600;
-$typography-title-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-title-font-family: 'TT-Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-title-text-transform: null;
 $typography-title-font-feature-settings: initial;
 $typography-subheading-font-size: 15px;
@@ -2870,28 +2933,28 @@ $md-typography-md-h1-font-size: 45px;
 $md-typography-md-h1-line-height: 48px;
 $md-typography-md-h1-letter-spacing: normal;
 $md-typography-md-h1-font-weight: normal;
-$md-typography-md-h1-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$md-typography-md-h1-font-family: 'TT-Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $md-typography-md-h1-text-transform: null;
 $md-typography-md-h1-font-feature-settings: initial;
 $md-typography-md-h2-font-size: 34px;
 $md-typography-md-h2-line-height: 38px;
 $md-typography-md-h2-letter-spacing: normal;
 $md-typography-md-h2-font-weight: normal;
-$md-typography-md-h2-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$md-typography-md-h2-font-family: 'TT-Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $md-typography-md-h2-text-transform: null;
 $md-typography-md-h2-font-feature-settings: initial;
 $md-typography-md-h3-font-size: 24px;
 $md-typography-md-h3-line-height: 28px;
 $md-typography-md-h3-letter-spacing: normal;
 $md-typography-md-h3-font-weight: normal;
-$md-typography-md-h3-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$md-typography-md-h3-font-family: 'TT-Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $md-typography-md-h3-text-transform: null;
 $md-typography-md-h3-font-feature-settings: initial;
 $md-typography-md-h4-font-size: 20px;
 $md-typography-md-h4-line-height: 24px;
 $md-typography-md-h4-letter-spacing: normal;
 $md-typography-md-h4-font-weight: 600;
-$md-typography-md-h4-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$md-typography-md-h4-font-family: 'TT-Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $md-typography-md-h4-text-transform: null;
 $md-typography-md-h4-font-feature-settings: initial;
 $md-typography-md-h5-font-size: 15px;
@@ -3692,6 +3755,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         default: (
             border: $checkbox-light-color-scheme-default-border,
             color: $checkbox-light-color-scheme-default-color,
+            background: $checkbox-light-color-scheme-default-background,
 
             checked: (
                 border: $checkbox-light-color-scheme-default-states-checked-border,
@@ -3711,6 +3775,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         error: (
             border: $checkbox-light-color-scheme-error-border,
             color: $checkbox-light-color-scheme-error-color,
+            background: $checkbox-light-color-scheme-error-background,
 
             checked: (
                 border: $checkbox-light-color-scheme-error-states-checked-border,
@@ -3924,6 +3989,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
                 disabled: (
                     background: $file-upload-light-color-scheme-single-states-disable-background,
                     border: $file-upload-light-color-scheme-single-states-disable-border,
+                    text: $file-upload-light-color-scheme-single-states-disable-text,
                 )
             )
         ),
@@ -3948,6 +4014,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
                 disabled: (
                     background: $file-upload-light-color-scheme-multiple-states-disable-background,
                     border: $file-upload-light-color-scheme-multiple-states-disable-border,
+                    text: $file-upload-light-color-scheme-multiple-states-disable-text,
                 )
             )
         )
@@ -4505,6 +4572,8 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
     $checkbox: (
         default: (
             border: $checkbox-dark-color-scheme-default-border,
+            color: $checkbox-dark-color-scheme-default-color,
+            background: $checkbox-dark-color-scheme-default-background,
 
             checked: (
                 border: $checkbox-dark-color-scheme-default-states-checked-border,
@@ -4523,6 +4592,8 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
         ),
         error: (
             border: $checkbox-dark-color-scheme-error-border,
+            color: $checkbox-dark-color-scheme-error-color,
+            background: $checkbox-dark-color-scheme-error-background,
 
             checked: (
                 border: $checkbox-dark-color-scheme-error-states-checked-border,
@@ -4736,6 +4807,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
                 disabled: (
                     background: $file-upload-dark-color-scheme-single-states-disable-background,
                     border: $file-upload-dark-color-scheme-single-states-disable-border,
+                    text: $file-upload-dark-color-scheme-single-states-disable-text,
                 ),
             ),
         ),
@@ -4760,6 +4832,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
                 disabled: (
                     background: $file-upload-dark-color-scheme-multiple-states-disable-background,
                     border: $file-upload-dark-color-scheme-multiple-states-disable-border,
+                    text: $file-upload-dark-color-scheme-multiple-states-disable-text,
                 ),
             ),
         )
@@ -5516,7 +5589,8 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
                 ),
                 disabled: (
                     background: map-get($tokens, 'file-upload-#{$scheme}-single-states-disable-background'),
-                    border: map-get($tokens, 'file-upload-#{$scheme}-single-states-disable-border')
+                    border: map-get($tokens, 'file-upload-#{$scheme}-single-states-disable-border'),
+                    text: map-get($tokens, 'file-upload-#{$scheme}-single-states-disable-text')
                 )
             )
         ),
@@ -5540,7 +5614,8 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
                 ),
                 disabled: (
                     background: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-disable-background'),
-                    border: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-disable-border')
+                    border: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-disable-border'),
+                    text: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-disable-text')
                 )
             )
         )
@@ -6803,15 +6878,30 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
     // webkit
     &::-webkit-scrollbar,
     ::-webkit-scrollbar {
-        width: var(--mc-scrollbar-size-track-width, $scrollbar-size-track-width);
+        &:vertical {
+            width: var(--mc-scrollbar-size-track-dimension, $scrollbar-size-track-dimension);
+        }
+
+        &:horizontal {
+            height: var(--mc-scrollbar-size-track-dimension, $scrollbar-size-track-dimension);
+        }
     }
 
+    /* stylelint-disable no-descending-specificity */
     &::-webkit-scrollbar-thumb,
     ::-webkit-scrollbar-thumb {
         width: var(--mc-scrollbar-size-thumb-width, $scrollbar-size-thumb-width);
         border-width: var(--mc-scrollbar-size-thumb-inset-border-width, $scrollbar-size-thumb-border-width);
         border-radius: var(--mc-scrollbar-size-thumb-inset-border-radius, $scrollbar-size-thumb-border-radius);
-        min-height: 20px;
+
+        // these props are used to set the user-friendly thumb for long content.
+        &:vertical {
+            min-height: var(--mc-scrollbar-size-thumb-min-size, $scrollbar-size-thumb-min-size);
+        }
+
+        &:horizontal {
+            min-width: var(--mc-scrollbar-size-thumb-min-size, $scrollbar-size-thumb-min-size);
+        }
     }
 
     &::-webkit-scrollbar-button,
@@ -8306,7 +8396,8 @@ $mc-datepicker-today-fade-amount: 0.2;
         }
     }
 
-    &:active {
+    &:active,
+    &.mc-active {
         color: map-get($link, state-active-text);
     }
 
@@ -9303,6 +9394,11 @@ button {
         border-right-color: map-get($foreground, divider);
     }
 
+    .mc-tab-nav-bar:after,
+    .mc-tab-list__content:after {
+        border-bottom-color: map-get($tabs, border);
+    }
+
     .mc-tab-header__pagination {
         border-bottom-color: map-get($tabs, border);
 
@@ -10565,7 +10661,7 @@ button {
 
 @mixin mc-file-upload-text-color($states) {
     &, .mc-icon, .mc-link {
-        color: map-get($states, border);
+        color: map-get($states, text);
     }
 }
 

package/_visual.scss

@@ -137,7 +137,7 @@ $dark-color-scheme-states-focused-color-error: #b9023a;
 $dark-color-scheme-states-selected-color: rgba(3, 116, 235, 0.3);
 $dark-color-scheme-states-pressed-shadow: inset 1px 2px 2px 0 rgba(black, 0.2);
 $dark-color-scheme-states-disabled-opacity: 0.45;
-$font-family-accent: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$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;
@@ -251,6 +251,32 @@ $palette-red-contrast-600: white;
 $palette-red-contrast-700: white;
 $palette-red-contrast-800: white;
 $palette-red-contrast-a100: #4D4D4D;
+$palette-orange-40: #fef2ef;
+$palette-orange-60: #ffebe6;
+$palette-orange-100: #fbd7ce;
+$palette-orange-200: #fbb5a3;
+$palette-orange-300: #ed7456;
+$palette-orange-400: #e95e3c;
+$palette-orange-500: #d84721;
+$palette-orange-560: #aa3617;
+$palette-orange-600: #8a2a11;
+$palette-orange-700: #75220d;
+$palette-orange-800: #601b09;
+$palette-orange-900: #481205;
+$palette-orange-1000: #3a0d03;
+$palette-orange-a100: rgba(215, 74, 0, 0.15);
+$palette-orange-contrast-40: #4D4D4D;
+$palette-orange-contrast-60: #4D4D4D;
+$palette-orange-contrast-100: #4D4D4D;
+$palette-orange-contrast-200: #4D4D4D;
+$palette-orange-contrast-300: #4D4D4D;
+$palette-orange-contrast-400: white;
+$palette-orange-contrast-500: white;
+$palette-orange-contrast-560: white;
+$palette-orange-contrast-600: white;
+$palette-orange-contrast-700: white;
+$palette-orange-contrast-800: white;
+$palette-orange-contrast-a100: #4D4D4D;
 $palette-grey-40: #f2f5f9;
 $palette-grey-60: #ebeef2;
 $palette-grey-100: #d7dee4;
@@ -618,7 +644,7 @@ $card-dark-color-scheme-info-shadow: #084453;
 $card-size-vertical-line: 4px;
 $checkbox-light-color-scheme-default-border: #bdc7d1;
 $checkbox-light-color-scheme-default-color: white;
-$checkbox-light-color-scheme-default-background: transparent;
+$checkbox-light-color-scheme-default-background: white;
 $checkbox-light-color-scheme-default-states-checked-border: #0374eb;
 $checkbox-light-color-scheme-default-states-checked-background: #0374eb;
 $checkbox-light-color-scheme-default-states-focused-border: #0374eb;
@@ -629,7 +655,7 @@ $checkbox-light-color-scheme-default-states-checked-focused-shadow: 0 0 0 1px #0
 $checkbox-light-color-scheme-default-states-checked-focused-outline: 1px solid white;
 $checkbox-light-color-scheme-error-border: #db3c55;
 $checkbox-light-color-scheme-error-color: white;
-$checkbox-light-color-scheme-error-background: transparent;
+$checkbox-light-color-scheme-error-background: white;
 $checkbox-light-color-scheme-error-states-checked-border: #db3c55;
 $checkbox-light-color-scheme-error-states-checked-background: #db3c55;
 $checkbox-light-color-scheme-error-states-focused-border: #db3c55;
@@ -640,7 +666,7 @@ $checkbox-light-color-scheme-error-states-checked-focused-shadow: 0 0 0 1px #db3
 $checkbox-light-color-scheme-error-states-checked-focused-outline: 1px solid white;
 $checkbox-dark-color-scheme-default-border: #515e69;
 $checkbox-dark-color-scheme-default-color: white;
-$checkbox-dark-color-scheme-default-background: transparent;
+$checkbox-dark-color-scheme-default-background: #19252f;
 $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;
@@ -651,7 +677,7 @@ $checkbox-dark-color-scheme-default-states-checked-focused-shadow: 0 0 0 1px #41
 $checkbox-dark-color-scheme-default-states-checked-focused-outline: 1px solid #19252f;
 $checkbox-dark-color-scheme-error-border: #b9023a;
 $checkbox-dark-color-scheme-error-color: white;
-$checkbox-dark-color-scheme-error-background: transparent;
+$checkbox-dark-color-scheme-error-background: #19252f;
 $checkbox-dark-color-scheme-error-states-checked-border: #b9023a;
 $checkbox-dark-color-scheme-error-states-checked-background: #b9023a;
 $checkbox-dark-color-scheme-error-states-focused-border: #b9023a;
@@ -1091,7 +1117,8 @@ $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-single-states-disable-border: #bdc7d1;
+$file-upload-light-color-scheme-single-states-disable-text: #8c99a5;
 $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;
@@ -1101,7 +1128,8 @@ $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-light-color-scheme-multiple-states-disable-border: #bdc7d1;
+$file-upload-light-color-scheme-multiple-states-disable-text: #8c99a5;
 $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;
@@ -1111,7 +1139,8 @@ $file-upload-dark-color-scheme-single-states-progress-border: mix(#515e69, trans
 $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-single-states-disable-border: #515e69;
+$file-upload-dark-color-scheme-single-states-disable-text: #6d7a86;
 $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;
@@ -1121,7 +1150,8 @@ $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-dark-color-scheme-multiple-states-disable-border: #515e69;
+$file-upload-dark-color-scheme-multiple-states-disable-text: #6d7a86;
 $file-upload-size-single-height: 48px;
 $file-upload-size-single-vertical-padding: 12px;
 $file-upload-size-single-border-width: 1px;
@@ -1569,8 +1599,9 @@ $scrollbar-dark-color-scheme-arrow-disabled: #333f4a;
 $scrollbar-dark-color-scheme-arrow-background: #27333e;
 $scrollbar-dark-color-scheme-corner-background: #27333e;
 $scrollbar-dark-color-scheme-resizer-background: #27333e;
-$scrollbar-size-track-width: 16px;
+$scrollbar-size-track-dimension: 16px;
 $scrollbar-size-thumb-width: 8px;
+$scrollbar-size-thumb-min-size: 20px;
 $scrollbar-size-thumb-border-width: 4px;
 $scrollbar-size-thumb-border-radius: 8px;
 $scrollbar-size-arrow-icon-width: 16px;
@@ -2330,6 +2361,38 @@ A100: #4D4D4D,
 )
 );
 
+$color-orange-palette: (
+40: #fef2ef,
+60: #ffebe6,
+100: #fbd7ce,
+200: #fbb5a3,
+300: #ed7456,
+400: #e95e3c,
+500: #d84721,
+560: #aa3617,
+600: #8a2a11,
+700: #75220d,
+800: #601b09,
+900: #481205,
+1000: #3a0d03,
+A100: rgba(215, 74, 0, 0.15),
+contrast: (
+40: #4D4D4D,
+60: #4D4D4D,
+100: #4D4D4D,
+200: #4D4D4D,
+300: #4D4D4D,
+400: white,
+500: white,
+560: white,
+600: white,
+700: white,
+800: white,
+A100: #4D4D4D,
+
+)
+);
+
 $color-grey-palette: (
 40: #f2f5f9,
 60: #ebeef2,
@@ -2466,35 +2529,35 @@ $typography-display-1-font-size: 56px;
 $typography-display-1-line-height: 76px;
 $typography-display-1-letter-spacing: normal;
 $typography-display-1-font-weight: normal;
-$typography-display-1-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-display-1-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: initial;
 $typography-display-2-font-size: 45px;
 $typography-display-2-line-height: 56px;
 $typography-display-2-letter-spacing: normal;
 $typography-display-2-font-weight: normal;
-$typography-display-2-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-display-2-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: initial;
 $typography-display-3-font-size: 34px;
 $typography-display-3-line-height: 44px;
 $typography-display-3-letter-spacing: normal;
 $typography-display-3-font-weight: normal;
-$typography-display-3-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-display-3-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: initial;
 $typography-headline-font-size: 24px;
 $typography-headline-line-height: 32px;
 $typography-headline-letter-spacing: normal;
 $typography-headline-font-weight: normal;
-$typography-headline-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-headline-font-family: 'TT-Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-headline-text-transform: null;
 $typography-headline-font-feature-settings: initial;
 $typography-title-font-size: 20px;
 $typography-title-line-height: 28px;
 $typography-title-letter-spacing: normal;
 $typography-title-font-weight: 600;
-$typography-title-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$typography-title-font-family: 'TT-Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $typography-title-text-transform: null;
 $typography-title-font-feature-settings: initial;
 $typography-subheading-font-size: 15px;
@@ -2824,28 +2887,28 @@ $md-typography-md-h1-font-size: 45px;
 $md-typography-md-h1-line-height: 48px;
 $md-typography-md-h1-letter-spacing: normal;
 $md-typography-md-h1-font-weight: normal;
-$md-typography-md-h1-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$md-typography-md-h1-font-family: 'TT-Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $md-typography-md-h1-text-transform: null;
 $md-typography-md-h1-font-feature-settings: initial;
 $md-typography-md-h2-font-size: 34px;
 $md-typography-md-h2-line-height: 38px;
 $md-typography-md-h2-letter-spacing: normal;
 $md-typography-md-h2-font-weight: normal;
-$md-typography-md-h2-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$md-typography-md-h2-font-family: 'TT-Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $md-typography-md-h2-text-transform: null;
 $md-typography-md-h2-font-feature-settings: initial;
 $md-typography-md-h3-font-size: 24px;
 $md-typography-md-h3-line-height: 28px;
 $md-typography-md-h3-letter-spacing: normal;
 $md-typography-md-h3-font-weight: normal;
-$md-typography-md-h3-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$md-typography-md-h3-font-family: 'TT-Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $md-typography-md-h3-text-transform: null;
 $md-typography-md-h3-font-feature-settings: initial;
 $md-typography-md-h4-font-size: 20px;
 $md-typography-md-h4-line-height: 24px;
 $md-typography-md-h4-letter-spacing: normal;
 $md-typography-md-h4-font-weight: 600;
-$md-typography-md-h4-font-family: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+$md-typography-md-h4-font-family: 'TT-Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 $md-typography-md-h4-text-transform: null;
 $md-typography-md-h4-font-feature-settings: initial;
 $md-typography-md-h5-font-size: 15px;

package/autocomplete/autocomplete-trigger.directive.d.ts

@@ -90,6 +90,12 @@ export declare class McAutocompleteTrigger implements AfterViewInit, ControlValu
     /** Stream of keyboard events that can close the panel. */
     private readonly closeKeyEventStream;
     constructor(elementRef: ElementRef<HTMLInputElement>, viewContainerRef: ViewContainerRef, changeDetectorRef: ChangeDetectorRef, overlay: Overlay, zone: NgZone, scrollStrategy: any, dir: Directionality, formField: McFormField, document: any, viewportRuler?: ViewportRuler | undefined);
+    /**
+     * Event handler for input blur events.
+     * Determines whether the blur event is triggered outside the specific target
+     * @returns A boolean indicating if the blur event happened outside the target element
+     */
+    onInputBlur: (event: FocusEvent) => boolean;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     /** `View -> model callback called when value changes` */
@@ -153,5 +159,5 @@ export declare class McAutocompleteTrigger implements AfterViewInit, ControlValu
     private resetActiveItem;
     private canOpen;
     static ɵfac: i0.ɵɵFactoryDeclaration<McAutocompleteTrigger, [null, null, null, null, null, null, { optional: true; }, { optional: true; host: true; }, { optional: true; }, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McAutocompleteTrigger, "input[mcAutocomplete], textarea[mcAutocomplete]", ["mcAutocompleteTrigger"], { "autocomplete": { "alias": "mcAutocomplete"; "required": false; }; "connectedTo": { "alias": "mcAutocompleteConnectedTo"; "required": false; }; "autocompleteAttribute": { "alias": "autocomplete"; "required": false; }; "autocompleteDisabled": { "alias": "mcAutocompleteDisabled"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McAutocompleteTrigger, "input[mcAutocomplete], textarea[mcAutocomplete]", ["mcAutocompleteTrigger"], { "autocomplete": { "alias": "mcAutocomplete"; "required": false; }; "connectedTo": { "alias": "mcAutocompleteConnectedTo"; "required": false; }; "autocompleteAttribute": { "alias": "autocomplete"; "required": false; }; "autocompleteDisabled": { "alias": "mcAutocompleteDisabled"; "required": false; }; "onInputBlur": { "alias": "mcAutocompleteOnBlur"; "required": false; }; }, {}, never, never, false, never>;
 }

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

@@ -407,7 +407,8 @@
                 ),
                 disabled: (
                     background: map-get($tokens, 'file-upload-#{$scheme}-single-states-disable-background'),
-                    border: map-get($tokens, 'file-upload-#{$scheme}-single-states-disable-border')
+                    border: map-get($tokens, 'file-upload-#{$scheme}-single-states-disable-border'),
+                    text: map-get($tokens, 'file-upload-#{$scheme}-single-states-disable-text')
                 )
             )
         ),
@@ -431,7 +432,8 @@
                 ),
                 disabled: (
                     background: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-disable-background'),
-                    border: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-disable-border')
+                    border: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-disable-border'),
+                    text: map-get($tokens, 'file-upload-#{$scheme}-multiple-states-disable-text')
                 )
             )
         )