@ptsecurity/mosaic 13.7.2 → 13.8.4

package/_theming.scss

@@ -148,7 +148,7 @@ $dark-color-scheme-background-overlay-active: rgba(black, 0.1);
 $dark-color-scheme-background-overlay-disabled: rgba(black, 0.2);
 $dark-color-scheme-states-focused-color: #4187ff;
 $dark-color-scheme-states-focused-color-error: #b9023a;
-$dark-color-scheme-states-selected-color: #014b9d;
+$dark-color-scheme-states-selected-color: #023c7f;
 $dark-color-scheme-states-pressed-shadow: inset 1px 2px 2px 0 rgba(black, 0.2);
 $dark-color-scheme-states-disabled-opacity: 0.3;
 $font-family-accent: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
@@ -545,7 +545,7 @@ $button-dark-color-scheme-primary-background: #0059b8;
 $button-dark-color-scheme-primary-icon: white;
 $button-dark-color-scheme-primary-states-active-border: darken(#014b9d, 5);
 $button-dark-color-scheme-primary-states-active-background: darken(#014b9d, 5);
-$button-dark-color-scheme-primary-transparent-color: #0374eb;
+$button-dark-color-scheme-primary-transparent-color: #5697ff;
 $button-dark-color-scheme-primary-transparent-icon: #5697ff;
 $button-dark-color-scheme-primary-transparent-states-hover-color: #014b9d;
 $button-dark-color-scheme-primary-transparent-states-hover-icon: #0374eb;
@@ -598,6 +598,7 @@ $card-dark-color-scheme-info-background: #143641;
 $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-states-checked-border: #0374eb;
 $checkbox-light-color-scheme-default-states-checked-background: #0374eb;
 $checkbox-light-color-scheme-default-states-focused-border: #0374eb;
@@ -607,6 +608,7 @@ $checkbox-light-color-scheme-default-states-checked-focused-background: #0374eb;
 $checkbox-light-color-scheme-default-states-checked-focused-shadow: 0 0 0 1px #0374eb;
 $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-states-checked-border: #db3c55;
 $checkbox-light-color-scheme-error-states-checked-background: #db3c55;
 $checkbox-light-color-scheme-error-states-focused-border: #db3c55;
@@ -616,6 +618,7 @@ $checkbox-light-color-scheme-error-states-checked-focused-background: #db3c55;
 $checkbox-light-color-scheme-error-states-checked-focused-shadow: 0 0 0 1px #db3c55;
 $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-states-checked-border: #0059b8;
 $checkbox-dark-color-scheme-default-states-checked-background: #0059b8;
 $checkbox-dark-color-scheme-default-states-focused-border: #4187ff;
@@ -625,6 +628,7 @@ $checkbox-dark-color-scheme-default-states-checked-focused-background: #0059b8;
 $checkbox-dark-color-scheme-default-states-checked-focused-shadow: 0 0 0 1px #4187ff;
 $checkbox-dark-color-scheme-default-states-checked-focused-outline: 1px solid #19252f;
 $checkbox-dark-color-scheme-error-border: #b9023a;
+$checkbox-dark-color-scheme-error-color: white;
 $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;
@@ -643,7 +647,7 @@ $datepicker-toggle-size-height: 30px;
 $datepicker-body-light-color-scheme-states-selected-color: #0374eb;
 $datepicker-body-light-color-scheme-states-selected-background: #e7f1ff;
 $datepicker-body-dark-color-scheme-states-selected-color: #4187ff;
-$datepicker-body-dark-color-scheme-states-selected-background: #014b9d;
+$datepicker-body-dark-color-scheme-states-selected-background: #023c7f;
 $datepicker-body-size-label-paddings: 8px 28px 12px 12px;
 $datepicker-body-size-cell-min-size: 32px;
 $datepicker-body-size-cell-margin: 5%;
@@ -808,13 +812,13 @@ $link-light-color-scheme-state-hover-text: #0059b8;
 $link-light-color-scheme-state-hover-border-bottom: rgba(#0059b8, 0.32);
 $link-light-color-scheme-state-active: #014b9d;
 $link-light-color-scheme-state-focused-outline: #0374eb;
-$link-dark-color-scheme-text: #4187ff;
+$link-dark-color-scheme-text: #5697ff;
 $link-dark-color-scheme-border-bottom: rgba(#6d7a86, 0.32);
 $link-dark-color-scheme-state-visited-text: #bb78a7;
 $link-dark-color-scheme-state-visited-border-bottom: rgba(#bb78a7, 0.32);
-$link-dark-color-scheme-state-hover-text: #0374eb;
-$link-dark-color-scheme-state-hover-border-bottom: rgba(#0374eb, 0.32);
-$link-dark-color-scheme-state-active: #0059b8;
+$link-dark-color-scheme-state-hover-text: #4187ff;
+$link-dark-color-scheme-state-hover-border-bottom: rgba(#4187ff, 0.32);
+$link-dark-color-scheme-state-active: #0374eb;
 $link-dark-color-scheme-state-focused-outline: #4187ff;
 $link-size-icon-margin: 4px;
 $link-size-state-focused-outline-offset: 2px;
@@ -949,19 +953,22 @@ $progress-bar-size-height: 4px;
 $progress-spinner-size-size: 16px;
 $radio-light-color-scheme-outer-circle-border: #bdc7d1;
 $radio-light-color-scheme-inner-circle-border: transparent;
+$radio-light-color-scheme-cap-color: white;
 $radio-light-color-scheme-states-checked-outer-circle-border: #0374eb;
 $radio-light-color-scheme-states-checked-inner-circle-border: #0374eb;
 $radio-light-color-scheme-states-focused-outer-circle-border: #0374eb;
 $radio-light-color-scheme-states-focused-outer-circle-shadow: 0 0 0 2px #0374eb;
-$radio-light-color-scheme-states-focused-inner-circle-shadow: 0 0 0 1px white;
+$radio-light-color-scheme-states-focused-inner-circle-shadow: 0 0 0 2px white;
 $radio-dark-color-scheme-outer-circle-border: #515e69;
 $radio-dark-color-scheme-inner-circle-border: transparent;
+$radio-dark-color-scheme-cap-color: white;
 $radio-dark-color-scheme-states-checked-outer-circle-border: #0059b8;
 $radio-dark-color-scheme-states-checked-inner-circle-border: #0059b8;
 $radio-dark-color-scheme-states-focused-outer-circle-border: #4187ff;
 $radio-dark-color-scheme-states-focused-outer-circle-shadow: 0 0 0 2px #4187ff;
-$radio-dark-color-scheme-states-focused-inner-circle-shadow: 0 0 0 1px #19252f;
-$radio-size-size: 14px;
+$radio-dark-color-scheme-states-focused-inner-circle-shadow: 0 0 0 2px #19252f;
+$radio-size-outer-size: 14px;
+$radio-size-inner-size: 10px;
 $radio-size-cap-size: 6px;
 $radio-size-label-margin: 8px;
 $radio-font-default: body;
@@ -1028,9 +1035,9 @@ $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-selected-background: #023c7f;
 $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%);
+$vertical-tabs-dark-color-scheme-state-hover-selected-background: adjust-color(#023c7f, $lightness:-1%);
 $tags-light-color-scheme-primary-background: #e7f1ff;
 $tags-light-color-scheme-primary-border: transparent;
 $tags-light-color-scheme-primary-text: #0374eb;
@@ -1058,7 +1065,7 @@ $tags-light-color-scheme-error-states-focused: #db3c55;
 $tags-light-color-scheme-error-states-disabled-text: mix(#ea5868, transparent, 50%);
 $tags-light-color-scheme-error-states-disabled-background: mix(#ea5868, transparent, 10%);
 $tags-light-color-scheme-error-states-disabled-border: transparent;
-$tags-dark-color-scheme-primary-background: #023c7f;
+$tags-dark-color-scheme-primary-background: #014b9d;
 $tags-dark-color-scheme-primary-border: transparent;
 $tags-dark-color-scheme-primary-text: #a2c7fe;
 $tags-dark-color-scheme-primary-icon: #5697ff;
@@ -1103,6 +1110,41 @@ $textarea-size-padding: 5px 12px;
 $textarea-font-default: body;
 $textarea-font-mono: body-mono;
 $timepicker-size-padding-right: 16px;
+$toast-light-color-scheme-background: white;
+$toast-light-color-scheme-border: #bdc7d1;
+$toast-light-color-scheme-text: #19252f;
+$toast-light-color-scheme-text-caption: #6d7a86;
+$toast-light-color-scheme-shadow: 0 8px 16px 0 rgba(#27333e, 0.2);
+$toast-light-color-scheme-icon-info: #18a5c5;
+$toast-light-color-scheme-icon-error: #ee6f79;
+$toast-light-color-scheme-icon-success: #4ba96c;
+$toast-light-color-scheme-icon-warning: #e19f12;
+$toast-dark-color-scheme-background: #333f4a;
+$toast-dark-color-scheme-border: rgba(25, 37, 47, 0.1);
+$toast-dark-color-scheme-text: #f2f5f9;
+$toast-dark-color-scheme-text-caption: #8c99a5;
+$toast-dark-color-scheme-shadow: 0 8px 16px 0 rgba(#27333e, 0.2);
+$toast-dark-color-scheme-icon-info: #18a5c5;
+$toast-dark-color-scheme-icon-error: #ee6f79;
+$toast-dark-color-scheme-icon-success: #4ba96c;
+$toast-dark-color-scheme-icon-warning: #e19f12;
+$toast-size-border-width: 1px;
+$toast-size-border-radius: 3px;
+$toast-size-width: 360px;
+$toast-size-padding-vertical: 12px;
+$toast-size-padding-left: 12px;
+$toast-size-padding-right: 16px;
+$toast-size-close-button-width: 32px;
+$toast-size-close-button-margin: 8px;
+$toast-size-icon-margin: 8px;
+$toast-size-caption-margin: 8px;
+$toast-size-actionbar-margin: 8px;
+$toast-size-actionbar-gap: 12px;
+$toast-size-vertical-margin: 16px;
+$toast-size-horizontal-margin: 16px;
+$toast-size-gap: 12px;
+$toast-font-title: body;
+$toast-font-caption: body;
 $toggle-light-color-scheme-border: #bdc7d1;
 $toggle-light-color-scheme-background: white;
 $toggle-light-color-scheme-circle-border: #bdc7d1;
@@ -2835,6 +2877,7 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
     $checkbox: (
         primary: (
             border: $checkbox-light-color-scheme-default-border,
+            color: $checkbox-light-color-scheme-default-color,
 
             checked: (
                 border: $checkbox-light-color-scheme-default-states-checked-border,
@@ -2853,6 +2896,7 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
         ),
         error: (
             border: $checkbox-light-color-scheme-error-border,
+            color: $checkbox-light-color-scheme-error-color,
 
             checked: (
                 border: $checkbox-light-color-scheme-error-states-checked-border,
@@ -2983,6 +3027,7 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
     $radio: (
         outer-circle_border: $radio-light-color-scheme-outer-circle-border,
         inner-circle_border: $radio-light-color-scheme-inner-circle-border,
+        cap-color: $radio-light-color-scheme-cap-color,
 
         outer-circle_checked-state_border: $radio-light-color-scheme-states-checked-outer-circle-border,
         outer-circle_focused-state_border: $radio-light-color-scheme-states-focused-outer-circle-border,
@@ -3078,6 +3123,19 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
         )
     );
 
+    $toast: (
+        background: $toast-light-color-scheme-background,
+        border: $toast-light-color-scheme-border,
+        text: $toast-light-color-scheme-text,
+        text-caption: $toast-light-color-scheme-text-caption,
+        shadow: $toast-light-color-scheme-shadow,
+
+        icon_info: $toast-light-color-scheme-icon-info,
+        icon_error: $toast-light-color-scheme-icon-error,
+        icon_success: $toast-light-color-scheme-icon-success,
+        icon_warning: $toast-light-color-scheme-icon-warning
+    );
+
     $tooltip: (
         background: $tooltip-light-color-scheme-background,
         color: $tooltip-light-color-scheme-text,
@@ -3124,6 +3182,7 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
         tabs: $tabs,
         vertical-tabs: $vertical-tabs,
         tags: $tags,
+        toast: $toast,
         toggle: $toggle,
         tooltip: $tooltip
     );
@@ -3453,6 +3512,7 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
     $radio: (
         outer-circle_border: $radio-dark-color-scheme-outer-circle-border,
         inner-circle_border: $radio-dark-color-scheme-inner-circle-border,
+        cap-color: $radio-dark-color-scheme-cap-color,
 
         outer-circle_checked-state_border: $radio-dark-color-scheme-states-checked-outer-circle-border,
         outer-circle_focused-state_border: $radio-dark-color-scheme-states-focused-outer-circle-border,
@@ -3548,6 +3608,19 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
         )
     );
 
+    $toast: (
+        background: $toast-dark-color-scheme-background,
+        border: $toast-dark-color-scheme-border,
+        text: $toast-dark-color-scheme-text,
+        text-caption: $toast-dark-color-scheme-text-caption,
+        shadow: $toast-dark-color-scheme-shadow,
+
+        icon_info: $toast-dark-color-scheme-icon-info,
+        icon_error: $toast-dark-color-scheme-icon-error,
+        icon_success: $toast-dark-color-scheme-icon-success,
+        icon_warning: $toast-dark-color-scheme-icon-warning
+    );
+
     $tooltip: (
         background: $tooltip-dark-color-scheme-background,
         color: $tooltip-dark-color-scheme-text,
@@ -3594,6 +3667,7 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
         tabs: $tabs,
         vertical-tabs: $vertical-tabs,
         tags: $tags,
+        toast: $toast,
         toggle: $toggle,
         tooltip: $tooltip
     );
@@ -3765,6 +3839,11 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
 @mixin mc-pseudo-checkbox-color($states) {
     border-color: map-get($states, border);
 
+    & .mc-checkbox-checkmark,
+    & .mc-checkbox-mixedmark {
+        color: map-get($states, color);
+    }
+
     &.mc-checked,
     &.mc-indeterminate {
         border-color: map-get($states, checked, border);
@@ -3782,26 +3861,11 @@ $dark-warning: mc-palette($dark-color-scheme-warning-palette, $dark-color-scheme
     .mc-pseudo-checkbox {
         border-color: map-get($checkbox, border);
 
-        & .mc-checkbox-checkmark,
-        & .mc-checkbox-mixedmark {
-            color: map-get($background, background);
-        }
-
         &.mc-primary {
-            & .mc-checkbox-checkmark,
-            & .mc-checkbox-mixedmark {
-                color: map-get($foreground, primary);
-            }
-
             @include mc-pseudo-checkbox-color(map-get($checkbox, primary));
         }
 
         &.mc-error {
-            & .mc-checkbox-checkmark,
-            & .mc-checkbox-mixedmark {
-                color: map-get($foreground, error);
-            }
-
             @include mc-pseudo-checkbox-color(map-get($checkbox, error));
         }
 
@@ -4602,6 +4666,11 @@ $fonts: (
         border-color: map-get($states, border);
 
         background-color: map-get($states, background);
+
+        & .mc-checkbox-checkmark,
+        & .mc-checkbox-mixedmark {
+            color: map-get($states, color);
+        }
     }
 
     &.mc-checked,
@@ -4643,15 +4712,6 @@ $fonts: (
 
     $checkbox: map-get(map-get($theme, components), checkbox);
 
-    .mc-checkbox-frame {
-        border-color: map-get($checkbox, border);
-
-        & .mc-checkbox-checkmark,
-        & .mc-checkbox-mixedmark {
-            color: map-get($background, background);
-        }
-    }
-
     .mc-checkbox {
         &:hover {
             .mc-checkbox-frame {
@@ -5688,25 +5748,11 @@ button {
             }
         }
 
-        &.mc-selected {
-            & .mc-radio-button__outer-circle {
-                border-color: map-get($radio, outer-circle_checked-state_border);
-            }
-
-            & .mc-radio-button__inner-circle {
-                display: flex;
-                background-color: map-get($radio, inner-circle_checked-state_border);
-
-                .mc-radio-button__inner-circle-cap {
-                    background: map-get($background, background);
-                }
-            }
-        }
-
         &.cdk-keyboard-focused {
             & .mc-radio-button__outer-circle {
                 border-color: map-get($radio, outer-circle_focused-state_border);
                 box-shadow: map-get($radio, outer-circle_focused-state_shadow);
+                background: map-get($background, background);
             }
 
             & .mc-radio-button__inner-circle {
@@ -5728,7 +5774,33 @@ button {
 
             & .mc-radio-button__inner-circle {
                 border-color: map-get($background, background-disabled);
-                background: map-get($foreground, text-disabled);
+                background: map-get($background, background-disabled);
+
+                & .mc-radio-button__inner-circle-cap {
+                    background: map-get($background, background-disabled);
+                }
+            }
+
+            &.mc-selected {
+                & .mc-radio-button__inner-circle-cap {
+                    background: map-get($foreground, border);
+                }
+            }
+        }
+        
+        &.mc-selected:not(.mc-disabled) {
+            & .mc-radio-button__outer-circle {
+                border-color: map-get($radio, outer-circle_checked-state_border);
+                background: map-get($radio, inner-circle_checked-state_border);
+            }
+
+            & .mc-radio-button__inner-circle {
+                display: flex;
+                background-color: map-get($radio, inner-circle_checked-state_border);
+
+                & .mc-radio-button__inner-circle-cap {
+                    background: map-get($radio, cap-color);
+                }
             }
         }
     }
@@ -6248,6 +6320,64 @@ button {
 
 
 
+@mixin mc-toast-theme($theme) {
+    $foreground: map-get($theme, foreground);
+
+    $toast: map-get(map-get($theme, components), toast);
+
+    .mc-toast {
+        &.mc-toast_info .mc-toast__icon {
+            color: map-get($toast, icon_info);
+        }
+
+        &.mc-toast_success .mc-toast__icon {
+            color: map-get($toast, icon_success);
+        }
+
+        &.mc-toast_warning .mc-toast__icon {
+            color: map-get($toast, icon_warning);
+        }
+
+        &.mc-toast_error .mc-toast__icon {
+            color: map-get($toast, icon_error);
+        }
+    }
+
+    .mc-toast__wrapper {
+        border-color: map-get($toast, border);
+
+        background: map-get($toast, background);
+
+        box-shadow: map-get($toast, shadow);
+    }
+
+    .mc-toast__title {
+        color: map-get($toast, text);
+    }
+
+    .mc-toast__caption {
+        color: map-get($toast, text-caption);
+    }
+}
+
+@mixin mc-toast-typography($config) {
+    .mc-toast {
+        @include mc-typography-level-to-styles($config, body);
+    }
+
+    .mc-toast__title {
+        @include mc-typography-level-to-styles($config, $toast-font-title);
+    }
+
+    .mc-toast__caption {
+        @include mc-typography-level-to-styles($config, $toast-font-caption);
+    }
+}
+
+
+
+
+
 @mixin mc-toggle-theme($theme) {
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
@@ -6746,6 +6876,7 @@ button {
     @include mc-tabs-typography($config);
     @include mc-tag-typography($config);
     @include mc-textarea-typography($config);
+    @include mc-toast-typography($config);
     @include mc-toggle-typography($config);
     @include mc-tooltip-typography($config);
     @include mc-tree-select-typography($config);
@@ -7128,6 +7259,7 @@ button {
 
 
 
+
 @mixin mc-option-action-theme($theme) {
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
@@ -7229,6 +7361,7 @@ button {
     @include mc-tabs-theme($theme);
     @include mc-tag-theme($theme);
     @include mc-textarea-theme($theme);
+    @include mc-toast-theme($theme);
     @include mc-toggle-theme($theme);
     @include mc-tooltip-theme($theme);
     @include mc-tree-select-theme($theme);

package/_visual.scss

@@ -50,7 +50,7 @@ $dark-color-scheme-background-overlay-active: rgba(black, 0.1);
 $dark-color-scheme-background-overlay-disabled: rgba(black, 0.2);
 $dark-color-scheme-states-focused-color: #4187ff;
 $dark-color-scheme-states-focused-color-error: #b9023a;
-$dark-color-scheme-states-selected-color: #014b9d;
+$dark-color-scheme-states-selected-color: #023c7f;
 $dark-color-scheme-states-pressed-shadow: inset 1px 2px 2px 0 rgba(black, 0.2);
 $dark-color-scheme-states-disabled-opacity: 0.3;
 $font-family-accent: 'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
@@ -447,7 +447,7 @@ $button-dark-color-scheme-primary-background: #0059b8;
 $button-dark-color-scheme-primary-icon: white;
 $button-dark-color-scheme-primary-states-active-border: darken(#014b9d, 5);
 $button-dark-color-scheme-primary-states-active-background: darken(#014b9d, 5);
-$button-dark-color-scheme-primary-transparent-color: #0374eb;
+$button-dark-color-scheme-primary-transparent-color: #5697ff;
 $button-dark-color-scheme-primary-transparent-icon: #5697ff;
 $button-dark-color-scheme-primary-transparent-states-hover-color: #014b9d;
 $button-dark-color-scheme-primary-transparent-states-hover-icon: #0374eb;
@@ -500,6 +500,7 @@ $card-dark-color-scheme-info-background: #143641;
 $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-states-checked-border: #0374eb;
 $checkbox-light-color-scheme-default-states-checked-background: #0374eb;
 $checkbox-light-color-scheme-default-states-focused-border: #0374eb;
@@ -509,6 +510,7 @@ $checkbox-light-color-scheme-default-states-checked-focused-background: #0374eb;
 $checkbox-light-color-scheme-default-states-checked-focused-shadow: 0 0 0 1px #0374eb;
 $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-states-checked-border: #db3c55;
 $checkbox-light-color-scheme-error-states-checked-background: #db3c55;
 $checkbox-light-color-scheme-error-states-focused-border: #db3c55;
@@ -518,6 +520,7 @@ $checkbox-light-color-scheme-error-states-checked-focused-background: #db3c55;
 $checkbox-light-color-scheme-error-states-checked-focused-shadow: 0 0 0 1px #db3c55;
 $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-states-checked-border: #0059b8;
 $checkbox-dark-color-scheme-default-states-checked-background: #0059b8;
 $checkbox-dark-color-scheme-default-states-focused-border: #4187ff;
@@ -527,6 +530,7 @@ $checkbox-dark-color-scheme-default-states-checked-focused-background: #0059b8;
 $checkbox-dark-color-scheme-default-states-checked-focused-shadow: 0 0 0 1px #4187ff;
 $checkbox-dark-color-scheme-default-states-checked-focused-outline: 1px solid #19252f;
 $checkbox-dark-color-scheme-error-border: #b9023a;
+$checkbox-dark-color-scheme-error-color: white;
 $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;
@@ -545,7 +549,7 @@ $datepicker-toggle-size-height: 30px;
 $datepicker-body-light-color-scheme-states-selected-color: #0374eb;
 $datepicker-body-light-color-scheme-states-selected-background: #e7f1ff;
 $datepicker-body-dark-color-scheme-states-selected-color: #4187ff;
-$datepicker-body-dark-color-scheme-states-selected-background: #014b9d;
+$datepicker-body-dark-color-scheme-states-selected-background: #023c7f;
 $datepicker-body-size-label-paddings: 8px 28px 12px 12px;
 $datepicker-body-size-cell-min-size: 32px;
 $datepicker-body-size-cell-margin: 5%;
@@ -710,13 +714,13 @@ $link-light-color-scheme-state-hover-text: #0059b8;
 $link-light-color-scheme-state-hover-border-bottom: rgba(#0059b8, 0.32);
 $link-light-color-scheme-state-active: #014b9d;
 $link-light-color-scheme-state-focused-outline: #0374eb;
-$link-dark-color-scheme-text: #4187ff;
+$link-dark-color-scheme-text: #5697ff;
 $link-dark-color-scheme-border-bottom: rgba(#6d7a86, 0.32);
 $link-dark-color-scheme-state-visited-text: #bb78a7;
 $link-dark-color-scheme-state-visited-border-bottom: rgba(#bb78a7, 0.32);
-$link-dark-color-scheme-state-hover-text: #0374eb;
-$link-dark-color-scheme-state-hover-border-bottom: rgba(#0374eb, 0.32);
-$link-dark-color-scheme-state-active: #0059b8;
+$link-dark-color-scheme-state-hover-text: #4187ff;
+$link-dark-color-scheme-state-hover-border-bottom: rgba(#4187ff, 0.32);
+$link-dark-color-scheme-state-active: #0374eb;
 $link-dark-color-scheme-state-focused-outline: #4187ff;
 $link-size-icon-margin: 4px;
 $link-size-state-focused-outline-offset: 2px;
@@ -851,19 +855,22 @@ $progress-bar-size-height: 4px;
 $progress-spinner-size-size: 16px;
 $radio-light-color-scheme-outer-circle-border: #bdc7d1;
 $radio-light-color-scheme-inner-circle-border: transparent;
+$radio-light-color-scheme-cap-color: white;
 $radio-light-color-scheme-states-checked-outer-circle-border: #0374eb;
 $radio-light-color-scheme-states-checked-inner-circle-border: #0374eb;
 $radio-light-color-scheme-states-focused-outer-circle-border: #0374eb;
 $radio-light-color-scheme-states-focused-outer-circle-shadow: 0 0 0 2px #0374eb;
-$radio-light-color-scheme-states-focused-inner-circle-shadow: 0 0 0 1px white;
+$radio-light-color-scheme-states-focused-inner-circle-shadow: 0 0 0 2px white;
 $radio-dark-color-scheme-outer-circle-border: #515e69;
 $radio-dark-color-scheme-inner-circle-border: transparent;
+$radio-dark-color-scheme-cap-color: white;
 $radio-dark-color-scheme-states-checked-outer-circle-border: #0059b8;
 $radio-dark-color-scheme-states-checked-inner-circle-border: #0059b8;
 $radio-dark-color-scheme-states-focused-outer-circle-border: #4187ff;
 $radio-dark-color-scheme-states-focused-outer-circle-shadow: 0 0 0 2px #4187ff;
-$radio-dark-color-scheme-states-focused-inner-circle-shadow: 0 0 0 1px #19252f;
-$radio-size-size: 14px;
+$radio-dark-color-scheme-states-focused-inner-circle-shadow: 0 0 0 2px #19252f;
+$radio-size-outer-size: 14px;
+$radio-size-inner-size: 10px;
 $radio-size-cap-size: 6px;
 $radio-size-label-margin: 8px;
 $radio-font-default: body;
@@ -930,9 +937,9 @@ $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-selected-background: #023c7f;
 $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%);
+$vertical-tabs-dark-color-scheme-state-hover-selected-background: adjust-color(#023c7f, $lightness:-1%);
 $tags-light-color-scheme-primary-background: #e7f1ff;
 $tags-light-color-scheme-primary-border: transparent;
 $tags-light-color-scheme-primary-text: #0374eb;
@@ -960,7 +967,7 @@ $tags-light-color-scheme-error-states-focused: #db3c55;
 $tags-light-color-scheme-error-states-disabled-text: mix(#ea5868, transparent, 50%);
 $tags-light-color-scheme-error-states-disabled-background: mix(#ea5868, transparent, 10%);
 $tags-light-color-scheme-error-states-disabled-border: transparent;
-$tags-dark-color-scheme-primary-background: #023c7f;
+$tags-dark-color-scheme-primary-background: #014b9d;
 $tags-dark-color-scheme-primary-border: transparent;
 $tags-dark-color-scheme-primary-text: #a2c7fe;
 $tags-dark-color-scheme-primary-icon: #5697ff;
@@ -1005,6 +1012,41 @@ $textarea-size-padding: 5px 12px;
 $textarea-font-default: body;
 $textarea-font-mono: body-mono;
 $timepicker-size-padding-right: 16px;
+$toast-light-color-scheme-background: white;
+$toast-light-color-scheme-border: #bdc7d1;
+$toast-light-color-scheme-text: #19252f;
+$toast-light-color-scheme-text-caption: #6d7a86;
+$toast-light-color-scheme-shadow: 0 8px 16px 0 rgba(#27333e, 0.2);
+$toast-light-color-scheme-icon-info: #18a5c5;
+$toast-light-color-scheme-icon-error: #ee6f79;
+$toast-light-color-scheme-icon-success: #4ba96c;
+$toast-light-color-scheme-icon-warning: #e19f12;
+$toast-dark-color-scheme-background: #333f4a;
+$toast-dark-color-scheme-border: rgba(25, 37, 47, 0.1);
+$toast-dark-color-scheme-text: #f2f5f9;
+$toast-dark-color-scheme-text-caption: #8c99a5;
+$toast-dark-color-scheme-shadow: 0 8px 16px 0 rgba(#27333e, 0.2);
+$toast-dark-color-scheme-icon-info: #18a5c5;
+$toast-dark-color-scheme-icon-error: #ee6f79;
+$toast-dark-color-scheme-icon-success: #4ba96c;
+$toast-dark-color-scheme-icon-warning: #e19f12;
+$toast-size-border-width: 1px;
+$toast-size-border-radius: 3px;
+$toast-size-width: 360px;
+$toast-size-padding-vertical: 12px;
+$toast-size-padding-left: 12px;
+$toast-size-padding-right: 16px;
+$toast-size-close-button-width: 32px;
+$toast-size-close-button-margin: 8px;
+$toast-size-icon-margin: 8px;
+$toast-size-caption-margin: 8px;
+$toast-size-actionbar-margin: 8px;
+$toast-size-actionbar-gap: 12px;
+$toast-size-vertical-margin: 16px;
+$toast-size-horizontal-margin: 16px;
+$toast-size-gap: 12px;
+$toast-font-title: body;
+$toast-font-caption: body;
 $toggle-light-color-scheme-border: #bdc7d1;
 $toggle-light-color-scheme-background: white;
 $toggle-light-color-scheme-circle-border: #bdc7d1;

package/design-tokens/legacy-2017/tokens/components/checkbox.json5

@@ -3,6 +3,7 @@
         'light-color-scheme': {
             default: {
                 border: { value: '{light-color-scheme.foreground.border}' },
+                color: { value: 'white' },
 
                 states: {
                     checked: {
@@ -23,6 +24,7 @@
             }, 
             error: {
                 border: { value: '{light-color-scheme.error.palette.value.400}' },
+                color: { value: 'white' },
 
                 states: {
                     checked: {
@@ -45,6 +47,7 @@
         'dark-color-scheme': {
             default: {
                 border: { value: '{dark-color-scheme.foreground.border}' },
+                color: { value: 'white' },
 
                 states: {
                     checked: {
@@ -65,6 +68,7 @@
             }, 
             error: {
                 border: { value: '{dark-color-scheme.error.palette.value.400}' },
+                color: { value: 'white' },
 
                 states: {
                     checked: {