@ptsecurity/mosaic 13.6.2 → 13.8.4

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;
@@ -69,6 +69,24 @@ $size-4xl: 40px;
 $size-5xl: 48px;
 $size-6xl: 56px;
 $size-7xl: 64px;
+$size-border-width: 1px;
+$size-border-radius: 4px;
+$size-option-height: 32px;
+$size-panel-height: 48px;
+$size-control-s-height: 16px;
+$size-control-m-height: 32px;
+$size-button-min-width: 64px;
+$size-badge-tag-height: 24px;
+$size-header-height: 56px;
+$size-footer-height: 64px;
+$padding-control-horizontal: 16px;
+$padding-option-horizontal: 16px;
+$padding-badge-tag-horizontal: 8px;
+$padding-header-right: 8px;
+$padding-header-footer-horizontal: 16px;
+$margin-control-group-s-vertical: 8px;
+$margin-icon-text-m-horizontal: 8px;
+$margin-icon-text-s-horizontal: 4px;
 $palette-blue-40: #eff6ff;
 $palette-blue-60: #e7f1ff;
 $palette-blue-100: #c8dfff;
@@ -329,7 +347,7 @@ $badge-light-color-scheme-pastel-primary-background: #eff6ff;
 $badge-light-color-scheme-pastel-primary-border: #a2c7fe;
 $badge-light-color-scheme-pastel-primary-color: #4187ff;
 $badge-light-color-scheme-pastel-info-background: #ebf8fd;
-$badge-light-color-scheme-pastel-info-border: #a2c7fe;
+$badge-light-color-scheme-pastel-info-border: #6ed3f2;
 $badge-light-color-scheme-pastel-info-color: #2099b7;
 $badge-light-color-scheme-pastel-success-background: #ecf9ef;
 $badge-light-color-scheme-pastel-success-border: #8ed5a1;
@@ -429,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;
@@ -482,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;
@@ -491,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;
@@ -500,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;
@@ -509,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;
@@ -527,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%;
@@ -692,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;
@@ -708,6 +730,17 @@ $list-size-horizontal-padding: 12px;
 $list-size-icon-right-margin: 8px;
 $list-size-item-height: 32px;
 $list-font-item: body;
+$loader-overlay-light-color-scheme-background: mix(white, transparent, 90%);
+$loader-overlay-light-color-scheme-text: #19252f;
+$loader-overlay-light-color-scheme-caption: #6d7a86;
+$loader-overlay-dark-color-scheme-background: mix(#19252f, transparent, 90%);
+$loader-overlay-dark-color-scheme-text: #f2f5f9;
+$loader-overlay-dark-color-scheme-caption: #8c99a5;
+$loader-overlay-size-text-max-width: 480px;
+$loader-overlay-size-fixed-top-padding: 72px;
+$loader-overlay-size-center-optical-compensation: -40%;
+$loader-overlay-font-text: body;
+$loader-overlay-font-caption: caption;
 $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);
 $modal-light-color-scheme-body-bottom-shadow: 0 -2px 4px 0 rgba(39, 51, 62, 0.16);
@@ -822,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;
@@ -901,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;
@@ -931,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;
@@ -976,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: {

package/design-tokens/legacy-2017/tokens/components/loader-overlay.json5

@@ -0,0 +1,23 @@
+{
+    'loader-overlay': {
+        'light-color-scheme': {
+            background: { value: 'mix({light-color-scheme.background.background}, transparent, 90%)' },
+            text: { value: '{light-color-scheme.foreground.text}' },
+            caption: { value: '{light-color-scheme.foreground.text-less-contrast}' }
+        },
+        'dark-color-scheme': {
+            background: { value: 'mix({dark-color-scheme.background.background}, transparent, 90%)' },
+            text: { value: '{dark-color-scheme.foreground.text}' },
+            caption: { value: '{dark-color-scheme.foreground.text-less-contrast}' }
+        },
+        size: {
+            'text-max-width': { value: '480px' },
+            'fixed-top-padding': { value: '72px' },
+            'center-optical-compensation': { value: '-40%' }
+        },
+        font: {
+            text: { value: 'body' },
+            caption: { value: 'caption' },
+        }
+    }
+}

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

@@ -1,8 +1,9 @@
 {
     radio: {
         'light-color-scheme': {
-            'outer-circle-border': { value: '{light-color-scheme.second.palette.value.300}' },
+            'outer-circle-border': { value: '{light-color-scheme.second.palette.value.500}' },
             'inner-circle-border': { value: 'transparent' },
+            'cap-color': { value: 'white' },
 
             states: {
                 checked: {
@@ -10,9 +11,9 @@
                     'inner-circle-border': { value: '{light-color-scheme.primary.palette.value.500}' }
                 },
                 focused: {
-                    'outer-circle-border': { value: '{light-color-scheme.states.focused-color}' },
-                    'outer-circle-shadow': { value: '0 0 0 2px {light-color-scheme.second.palette.value.300}' },
-                    'inner-circle-shadow': { value: '0 0 0 1px {light-color-scheme.background.background}' }
+                    'outer-circle-border': { value: '{light-color-scheme.primary.palette.value.500}' },
+                    'outer-circle-shadow': { value: '0 0 0 2px {light-color-scheme.primary.palette.value.500}' },
+                    'inner-circle-shadow': { value: '0 0 0 2px {light-color-scheme.background.background}' }
                 }
             }
         },
@@ -22,19 +23,19 @@
 
             states: {
                 checked: {
-                    'outer-circle-border': { value: '{dark-color-scheme.primary.palette.value.400}' },
+                    'outer-circle-border': { value: '{dark-color-scheme.primary.palette.value.600}' },
                     'inner-circle-border': { value: '{dark-color-scheme.primary.palette.value.600}' }
                 },
                 focused: {
-                    'outer-circle-border': { value: '{dark-color-scheme.states.focused-color}' },
-                    'outer-circle-shadow': { value: '0 0 0 2px {dark-color-scheme.states.focused-color}' },
-
-                    'inner-circle-shadow': { value: '0 0 0 1px {dark-color-scheme.background.background}' }
+                    'outer-circle-border': { value: '{dark-color-scheme.primary.palette.value.500}' },
+                    'outer-circle-shadow': { value: '0 0 0 2px {dark-color-scheme.primary.palette.value.500}' },
+                    'inner-circle-shadow': { value: '0 0 0 2px {dark-color-scheme.background.background}' }
                 }
             }
         },
         size: {
-            size: { value: '14px' },
+            'outer-size': { value: '14px' },
+            'inner-size': { value: '10px' },
             'cap-size': { value: '6px' },
             'label-margin': { value: '{margin.iconText_M-horizontal}' }
         },

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

@@ -0,0 +1,54 @@
+{
+    toast: {
+        'light-color-scheme': {
+            background: { value: '{light-color-scheme.background.background}' },
+            border: { value: '{light-color-scheme.foreground.border}' },
+            text: { value: '{light-color-scheme.foreground.text}' },
+            'text-caption': { value: '{light-color-scheme.foreground.text-less-contrast}' },
+            'shadow': { value: '0 8px 16px 0 rgba({light-color-scheme.second.palette.value.800}, 0.2)' },
+
+            'icon_info': { value: '{icon.light-color-scheme.info.default}' },
+            'icon_error': { value: '{icon.light-color-scheme.error.default}' },
+            'icon_success': { value: '{icon.light-color-scheme.success.default}' },
+            'icon_warning': { value: '{icon.light-color-scheme.warning.default}' }
+        },
+        'dark-color-scheme': {
+            background: { value: '{dark-color-scheme.second.palette.value.700}' },
+            border: { value: '{dark-color-scheme.second.palette.value.A100}' },
+            text: { value: '{dark-color-scheme.foreground.text}' },
+            'text-caption': { value: '{dark-color-scheme.foreground.text-less-contrast}' },
+            'shadow': { value: '0 8px 16px 0 rgba({light-color-scheme.second.palette.value.800}, 0.2)' },
+
+            'icon_info': { value: '{icon.dark-color-scheme.info.default}' },
+            'icon_error': { value: '{icon.dark-color-scheme.error.default}' },
+            'icon_success': { value: '{icon.dark-color-scheme.success.default}' },
+            'icon_warning': { value: '{icon.dark-color-scheme.warning.default}' }
+        },
+        size: {
+            'border-width': { value: '1px' },
+            'border-radius': { value: '3px' },
+
+            'width': { value: '360px' },
+            'padding-vertical': { value: '{size.m}' },
+            'padding-left': { value: '{size.m}' },
+            'padding-right': { value: '{size.l}' },
+
+            'close-button-width': { value: '{size.3xl}' },
+            'close-button-margin': { value: '{size.s}' },
+
+            'icon-margin': { value: '{size.s}' },
+            'caption-margin': { value: '{size.s}' },
+
+            'actionbar-margin': { value: '{size.s}' },
+            'actionbar-gap': { value: '{size.m}' },
+
+            'vertical-margin': { value: '{size.l}' },
+            'horizontal-margin': { value: '{size.l}' },
+            'gap': { value: '{size.m}' }
+        },
+        font: {
+            title: { value: 'body' },
+            caption: { value: 'body' },
+        }
+    }
+}

package/design-tokens/legacy-2017/tokens/properties/globals.json5

@@ -14,36 +14,36 @@
         '6xl': { value: '56px' },
         '7xl': { value: '64px' },
 
-        'border-width': '1px',
-        'border-radius': '4px',
+        'border-width': { 'value': '1px' },
+        'border-radius': { 'value': '4px' },
 
         // this will be deleted
-        'option-height': '32px',
-        'panel-height': '48px',
+        'option-height': { 'value': '32px' },
+        'panel-height': { 'value': '48px' },
         // у radio и checkbox в макетах 20px, у тоггла есть две модификации на 16px и 14px
-        'control_S-height': '16px',
+        'control_S-height': { 'value': '16px' },
         // в form-field это реализовано через отступы
-        'control_M-height': '32px',
+        'control_M-height': { 'value': '32px' },
         // этого нет сейчас
-        'button-minWidth': '64px',
+        'button-minWidth': { 'value': '64px' },
         // badge на padding
-        'badge_tag-height': '24px',
+        'badge_tag-height': { 'value': '24px' },
         // modal; sidepanel - сейчас в этих компонентах paddings
-        'header-height': '56px',
-        'footer-height': '64px',
+        'header-height': { 'value': '56px' },
+        'footer-height': { 'value': '64px' },
         // this will be deleted
     },
     padding: {
-        'control-horizontal': '16px',
-        'option-horizontal': '16px',
-        'badge_tag-horizontal': '8px',
-        'header-right': '8px',
-        'headerFooter-horizontal': '16px',
+        'control-horizontal': { 'value': '16px' },
+        'option-horizontal': { 'value': '16px' },
+        'badge_tag-horizontal': { 'value': '8px' },
+        'header-right': { 'value': '8px' },
+        'headerFooter-horizontal': { 'value': '16px' }
     },
     margin: {
         // у radio-group нет таких отступов, а у checkbox вообще нет группы
-        'controlGroup_S-vertical': '8px',
-        'iconText_M-horizontal': '8px',
-        'iconText_S-horizontal': '4px'
+        'controlGroup_S-vertical': { 'value': '8px' },
+        'iconText_M-horizontal': { 'value': '8px' },
+        'iconText_S-horizontal': { 'value': '4px' }
     }
 }

package/design-tokens/legacy-2017/tokens.d.ts

@@ -4820,6 +4820,24 @@ export declare const Size4xl = "40px";
 export declare const Size5xl = "48px";
 export declare const Size6xl = "56px";
 export declare const Size7xl = "64px";
+export declare const SizeBorderWidth = "1px";
+export declare const SizeBorderRadius = "4px";
+export declare const SizeOptionHeight = "32px";
+export declare const SizePanelHeight = "48px";
+export declare const SizeControlSHeight = "16px";
+export declare const SizeControlMHeight = "32px";
+export declare const SizeButtonMinWidth = "64px";
+export declare const SizeBadgeTagHeight = "24px";
+export declare const SizeHeaderHeight = "56px";
+export declare const SizeFooterHeight = "64px";
+export declare const PaddingControlHorizontal = "16px";
+export declare const PaddingOptionHorizontal = "16px";
+export declare const PaddingBadgeTagHorizontal = "8px";
+export declare const PaddingHeaderRight = "8px";
+export declare const PaddingHeaderFooterHorizontal = "16px";
+export declare const MarginControlGroupSVertical = "8px";
+export declare const MarginIconTextMHorizontal = "8px";
+export declare const MarginIconTextSHorizontal = "4px";
 export declare const PaletteBlue40 = "#F5FAFD";
 export declare const PaletteBlue60 = "#EBF4FB";
 export declare const PaletteBlue100 = "#D8EAF7";
@@ -7274,6 +7292,7 @@ export declare const CardDarkColorSchemeInfoBackground = "#114E77";
 export declare const CardDarkColorSchemeInfoShadow = "#4D4D4D";
 export declare const CardSizeVerticalLine = "4px";
 export declare const CheckboxLightColorSchemeDefaultBorder = "#B3B3B3";
+export declare const CheckboxLightColorSchemeDefaultColor = "white";
 export declare const CheckboxLightColorSchemeDefaultStatesCheckedBorder = "#206EA2";
 export declare const CheckboxLightColorSchemeDefaultStatesCheckedBackground = "#338FCC";
 export declare const CheckboxLightColorSchemeDefaultStatesFocusedBorder = "#338FCC";
@@ -7283,6 +7302,7 @@ export declare const CheckboxLightColorSchemeDefaultStatesCheckedFocusedBackgrou
 export declare const CheckboxLightColorSchemeDefaultStatesCheckedFocusedShadow = "0 0 0 1px #338FCC";
 export declare const CheckboxLightColorSchemeDefaultStatesCheckedFocusedOutline = "1px solid white";
 export declare const CheckboxLightColorSchemeErrorBorder = "#E76E5C";
+export declare const CheckboxLightColorSchemeErrorColor = "white";
 export declare const CheckboxLightColorSchemeErrorStatesCheckedBorder = "#B23522";
 export declare const CheckboxLightColorSchemeErrorStatesCheckedBackground = "#E04D36";
 export declare const CheckboxLightColorSchemeErrorStatesFocusedBorder = "#E76E5C";
@@ -7292,6 +7312,7 @@ export declare const CheckboxLightColorSchemeErrorStatesCheckedFocusedBackground
 export declare const CheckboxLightColorSchemeErrorStatesCheckedFocusedShadow = "0 0 0 1px #E76E5C";
 export declare const CheckboxLightColorSchemeErrorStatesCheckedFocusedOutline = "1px solid white";
 export declare const CheckboxDarkColorSchemeDefaultBorder = "#808080";
+export declare const CheckboxDarkColorSchemeDefaultColor = "white";
 export declare const CheckboxDarkColorSchemeDefaultStatesCheckedBorder = "#57A4D7";
 export declare const CheckboxDarkColorSchemeDefaultStatesCheckedBackground = "#206EA2";
 export declare const CheckboxDarkColorSchemeDefaultStatesFocusedBorder = "#57A4D7";
@@ -7301,6 +7322,7 @@ export declare const CheckboxDarkColorSchemeDefaultStatesCheckedFocusedBackgroun
 export declare const CheckboxDarkColorSchemeDefaultStatesCheckedFocusedShadow = "0 0 0 1px #57A4D7";
 export declare const CheckboxDarkColorSchemeDefaultStatesCheckedFocusedOutline = "1px solid #333333";
 export declare const CheckboxDarkColorSchemeErrorBorder = "#E76E5C";
+export declare const CheckboxDarkColorSchemeErrorColor = "white";
 export declare const CheckboxDarkColorSchemeErrorStatesCheckedBorder = "#E76E5C";
 export declare const CheckboxDarkColorSchemeErrorStatesCheckedBackground = "#B23522";
 export declare const CheckboxDarkColorSchemeErrorStatesFocusedBorder = "#E76E5C";
@@ -7500,6 +7522,17 @@ export declare const ListSizeHorizontalPadding = "12px";
 export declare const ListSizeIconRightMargin = "8px";
 export declare const ListSizeItemHeight = "32px";
 export declare const ListFontItem = "body";
+export declare const LoaderOverlayLightColorSchemeBackground = "mix(white, transparent, 90%)";
+export declare const LoaderOverlayLightColorSchemeText = "#4D4D4D";
+export declare const LoaderOverlayLightColorSchemeCaption = "#999999";
+export declare const LoaderOverlayDarkColorSchemeBackground = "mix(#333333, transparent, 90%)";
+export declare const LoaderOverlayDarkColorSchemeText = "#F0F0F0";
+export declare const LoaderOverlayDarkColorSchemeCaption = "#999999";
+export declare const LoaderOverlaySizeTextMaxWidth = "480px";
+export declare const LoaderOverlaySizeFixedTopPadding = "72px";
+export declare const LoaderOverlaySizeCenterOpticalCompensation = "-40%";
+export declare const LoaderOverlayFontText = "body";
+export declare const LoaderOverlayFontCaption = "caption";
 export declare const ModalLightColorSchemeShadow = "(0 0 0 1px #B3B3B3, 0 6px 12px 0 rgba(0, 0, 0, 0.5))";
 export declare const ModalLightColorSchemeBodyTopShadow = "0 2px 4px 0 rgba(0, 0, 0, 0.16)";
 export declare const ModalLightColorSchemeBodyBottomShadow = "0 -2px 4px 0 rgba(0, 0, 0, 0.16)";
@@ -7612,21 +7645,23 @@ export declare const ProgressBarLightColorSchemeBackground = "#F0F0F0";
 export declare const ProgressBarDarkColorSchemeBackground = "#666666";
 export declare const ProgressBarSizeHeight = "4px";
 export declare const ProgressSpinnerSizeSize = "16px";
-export declare const RadioLightColorSchemeOuterCircleBorder = "#B3B3B3";
+export declare const RadioLightColorSchemeOuterCircleBorder = "#808080";
 export declare const RadioLightColorSchemeInnerCircleBorder = "transparent";
+export declare const RadioLightColorSchemeCapColor = "white";
 export declare const RadioLightColorSchemeStatesCheckedOuterCircleBorder = "#338FCC";
 export declare const RadioLightColorSchemeStatesCheckedInnerCircleBorder = "#338FCC";
 export declare const RadioLightColorSchemeStatesFocusedOuterCircleBorder = "#338FCC";
-export declare const RadioLightColorSchemeStatesFocusedOuterCircleShadow = "0 0 0 2px #B3B3B3";
-export declare const RadioLightColorSchemeStatesFocusedInnerCircleShadow = "0 0 0 1px white";
+export declare const RadioLightColorSchemeStatesFocusedOuterCircleShadow = "0 0 0 2px #338FCC";
+export declare const RadioLightColorSchemeStatesFocusedInnerCircleShadow = "0 0 0 2px white";
 export declare const RadioDarkColorSchemeOuterCircleBorder = "#999999";
 export declare const RadioDarkColorSchemeInnerCircleBorder = "transparent";
-export declare const RadioDarkColorSchemeStatesCheckedOuterCircleBorder = "#57A4D7";
+export declare const RadioDarkColorSchemeStatesCheckedOuterCircleBorder = "#206EA2";
 export declare const RadioDarkColorSchemeStatesCheckedInnerCircleBorder = "#206EA2";
-export declare const RadioDarkColorSchemeStatesFocusedOuterCircleBorder = "#57A4D7";
-export declare const RadioDarkColorSchemeStatesFocusedOuterCircleShadow = "0 0 0 2px #57A4D7";
-export declare const RadioDarkColorSchemeStatesFocusedInnerCircleShadow = "0 0 0 1px #333333";
-export declare const RadioSizeSize = "14px";
+export declare const RadioDarkColorSchemeStatesFocusedOuterCircleBorder = "#338FCC";
+export declare const RadioDarkColorSchemeStatesFocusedOuterCircleShadow = "0 0 0 2px #338FCC";
+export declare const RadioDarkColorSchemeStatesFocusedInnerCircleShadow = "0 0 0 2px #333333";
+export declare const RadioSizeOuterSize = "14px";
+export declare const RadioSizeInnerSize = "10px";
 export declare const RadioSizeCapSize = "6px";
 export declare const RadioSizeLabelMargin = "8px";
 export declare const RadioFontDefault = "body";
@@ -7765,6 +7800,41 @@ export declare const TextareaSizePadding = "5 12px";
 export declare const TextareaFontDefault = "body";
 export declare const TextareaFontMono = "body-mono";
 export declare const TimepickerSizePaddingRight = "16px";
+export declare const ToastLightColorSchemeBackground = "white";
+export declare const ToastLightColorSchemeBorder = "#B3B3B3";
+export declare const ToastLightColorSchemeText = "#4D4D4D";
+export declare const ToastLightColorSchemeTextCaption = "#999999";
+export declare const ToastLightColorSchemeShadow = "0 8px 16px 0 rgba(#333333, 0.2)";
+export declare const ToastLightColorSchemeIconInfo = "#57A4D7";
+export declare const ToastLightColorSchemeIconError = "#E76E5C";
+export declare const ToastLightColorSchemeIconSuccess = "#6FBA53";
+export declare const ToastLightColorSchemeIconWarning = "#DFA739";
+export declare const ToastDarkColorSchemeBackground = "#4D4D4D";
+export declare const ToastDarkColorSchemeBorder = "rgba(0, 0, 0, 0.1)";
+export declare const ToastDarkColorSchemeText = "#F0F0F0";
+export declare const ToastDarkColorSchemeTextCaption = "#999999";
+export declare const ToastDarkColorSchemeShadow = "0 8px 16px 0 rgba(#333333, 0.2)";
+export declare const ToastDarkColorSchemeIconInfo = "#338FCC";
+export declare const ToastDarkColorSchemeIconError = "#E04D36";
+export declare const ToastDarkColorSchemeIconSuccess = "#52A832";
+export declare const ToastDarkColorSchemeIconWarning = "#D6930D";
+export declare const ToastSizeBorderWidth = "1px";
+export declare const ToastSizeBorderRadius = "3px";
+export declare const ToastSizeWidth = "360px";
+export declare const ToastSizePaddingVertical = "12px";
+export declare const ToastSizePaddingLeft = "12px";
+export declare const ToastSizePaddingRight = "16px";
+export declare const ToastSizeCloseButtonWidth = "32px";
+export declare const ToastSizeCloseButtonMargin = "8px";
+export declare const ToastSizeIconMargin = "8px";
+export declare const ToastSizeCaptionMargin = "8px";
+export declare const ToastSizeActionbarMargin = "8px";
+export declare const ToastSizeActionbarGap = "12px";
+export declare const ToastSizeVerticalMargin = "16px";
+export declare const ToastSizeHorizontalMargin = "16px";
+export declare const ToastSizeGap = "12px";
+export declare const ToastFontTitle = "body";
+export declare const ToastFontCaption = "body";
 export declare const ToggleLightColorSchemeBorder = "#B3B3B3";
 export declare const ToggleLightColorSchemeBackground = "linear-gradient(to bottom, #E6E6E6, #F0F0F0)";
 export declare const ToggleLightColorSchemeCircleBorder = "#B3B3B3";

package/design-tokens/pt-2022/tokens/components/badge.json5

@@ -51,7 +51,7 @@
                 },
                 info: {
                     background: { value: '{light-color-scheme.info.palette.value.40}' },
-                    border: { value: '{light-color-scheme.primary.palette.value.200}' },
+                    border: { value: '{light-color-scheme.info.palette.value.200}' },
                     color: { value: '{light-color-scheme.info.palette.value.400}' }
                 },
                 success: {

package/design-tokens/pt-2022/tokens/components/button.json5

@@ -78,7 +78,7 @@
             },
 
             primary_transparent: {
-                color: { value: '{dark-color-scheme.primary.palette.value.500}' },
+                color: { value: '{dark-color-scheme.primary.palette.value.300}' },
                 icon: { value: '{icon.dark-color-scheme.primary.default}' },
 
                 states: {

package/design-tokens/pt-2022/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.default}' },
+                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.default}' },
+                color: { value: 'white' },
 
                 states: {
                     checked: {