@ptsecurity/mosaic 13.6.2 → 13.8.4

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

@@ -20,7 +20,7 @@
             }
         },
         'dark-color-scheme': {
-            text: { value: '{dark-color-scheme.primary.palette.value.400}' },
+            text: { value: '{dark-color-scheme.primary.palette.value.300}' },
             'border-bottom': { value: 'rgba({dark-color-scheme.foreground.text-disabled}, 0.32)' },
 
             'state-visited': {
@@ -28,10 +28,10 @@
                 'border-bottom': { value: 'rgba({link.dark-color-scheme.state-visited.text}, 0.32)' }
             },
             'state-hover': {
-                'text': { value: '{dark-color-scheme.primary.palette.value.500}' },
+                'text': { value: '{dark-color-scheme.primary.palette.value.400}' },
                 'border-bottom': { value: 'rgba({link.dark-color-scheme.state-hover.text}, 0.32)' }
             },
-            'state-active': { value: '{dark-color-scheme.primary.palette.value.560}' },
+            'state-active': { value: '{dark-color-scheme.primary.palette.value.500}' },
             'state-focused': {
                 outline: { value: '{dark-color-scheme.states.focused-color}' }
             }

package/design-tokens/pt-2022/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/pt-2022/tokens/components/radio.json5

@@ -3,6 +3,7 @@
         'light-color-scheme': {
             'outer-circle-border': { value: '{light-color-scheme.foreground.border}' },
             'inner-circle-border': { value: 'transparent' },
+            'cap-color': { value: 'white' },
 
             states: {
                 checked: {
@@ -12,13 +13,14 @@
                 focused: {
                     'outer-circle-border': { value: '{light-color-scheme.states.focused-color}' },
                     'outer-circle-shadow': { value: '0 0 0 2px {light-color-scheme.states.focused-color}' },
-                    'inner-circle-shadow': { value: '0 0 0 1px {light-color-scheme.background.background}' }
+                    'inner-circle-shadow': { value: '0 0 0 2px {light-color-scheme.background.background}' }
                 }
             }
         },
         'dark-color-scheme': {
             'outer-circle-border': { value: '{dark-color-scheme.foreground.border}' },
             'inner-circle-border': { value: 'transparent' },
+            'cap-color': { value: 'white' },
 
             states: {
                 checked: {
@@ -29,12 +31,13 @@
                     '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}' }
+                    '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/pt-2022/tokens/components/tags.json5

@@ -55,7 +55,7 @@
         },
         'dark-color-scheme': {
             primary: {
-                background: { value: '{dark-color-scheme.primary.palette.value.700}' },
+                background: { value: '{dark-color-scheme.primary.palette.value.600}' },
                 border: { value: 'transparent' },
                 text: { value: '{dark-color-scheme.primary.palette.value.200}' },
                 icon: { value: '{icon.dark-color-scheme.primary.default}' },

package/design-tokens/pt-2022/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/pt-2022/tokens/properties/colors.json5

@@ -114,7 +114,7 @@
         states: {
             'focused-color': { value: '{dark-color-scheme.primary.palette.value.400}' },
             'focused-color-error': { value: '{light-color-scheme.error.palette.value.560}' },
-            'selected-color': { value: '{dark-color-scheme.primary.palette.value.600}' },
+            'selected-color': { value: '{dark-color-scheme.primary.palette.value.700}' },
             'pressed-shadow': { value: 'inset 1px 2px 2px 0 rgba(black, 0.2)' },
             'disabled-opacity': { value: 0.3 }
         }

package/design-tokens/pt-2022/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/pt-2022/tokens.d.ts

@@ -5104,7 +5104,7 @@ export declare const DarkColorSchemeBackgroundOverlayActive = "rgba(black, 0.1)"
 export declare const DarkColorSchemeBackgroundOverlayDisabled = "rgba(black, 0.2)";
 export declare const DarkColorSchemeStatesFocusedColor = "#4187ff";
 export declare const DarkColorSchemeStatesFocusedColorError = "#b9023a";
-export declare const DarkColorSchemeStatesSelectedColor = "#014b9d";
+export declare const DarkColorSchemeStatesSelectedColor = "#023c7f";
 export declare const DarkColorSchemeStatesPressedShadow = "inset 1px 2px 2px 0 rgba(black, 0.2)";
 export declare const DarkColorSchemeStatesDisabledOpacity = 0.3;
 export declare const FontFamilyAccent = "'TT Positive', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif";
@@ -5123,6 +5123,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 = "#eff6ff";
 export declare const PaletteBlue60 = "#e7f1ff";
 export declare const PaletteBlue100 = "#c8dfff";
@@ -8450,7 +8468,7 @@ export declare const BadgeLightColorSchemePastelPrimaryBackground = "#eff6ff";
 export declare const BadgeLightColorSchemePastelPrimaryBorder = "#a2c7fe";
 export declare const BadgeLightColorSchemePastelPrimaryColor = "#4187ff";
 export declare const BadgeLightColorSchemePastelInfoBackground = "#ebf8fd";
-export declare const BadgeLightColorSchemePastelInfoBorder = "#a2c7fe";
+export declare const BadgeLightColorSchemePastelInfoBorder = "#6ed3f2";
 export declare const BadgeLightColorSchemePastelInfoColor = "#2099b7";
 export declare const BadgeLightColorSchemePastelSuccessBackground = "#ecf9ef";
 export declare const BadgeLightColorSchemePastelSuccessBorder = "#8ed5a1";
@@ -8550,7 +8568,7 @@ export declare const ButtonDarkColorSchemePrimaryBackground = "#0059b8";
 export declare const ButtonDarkColorSchemePrimaryIcon = "white";
 export declare const ButtonDarkColorSchemePrimaryStatesActiveBorder = "darken(#014b9d, 5)";
 export declare const ButtonDarkColorSchemePrimaryStatesActiveBackground = "darken(#014b9d, 5)";
-export declare const ButtonDarkColorSchemePrimaryTransparentColor = "#0374eb";
+export declare const ButtonDarkColorSchemePrimaryTransparentColor = "#5697ff";
 export declare const ButtonDarkColorSchemePrimaryTransparentIcon = "#5697ff";
 export declare const ButtonDarkColorSchemePrimaryTransparentStatesHoverColor = "#014b9d";
 export declare const ButtonDarkColorSchemePrimaryTransparentStatesHoverIcon = "#0374eb";
@@ -8603,6 +8621,7 @@ export declare const CardDarkColorSchemeInfoBackground = "#143641";
 export declare const CardDarkColorSchemeInfoShadow = "#084453";
 export declare const CardSizeVerticalLine = "4px";
 export declare const CheckboxLightColorSchemeDefaultBorder = "#bdc7d1";
+export declare const CheckboxLightColorSchemeDefaultColor = "white";
 export declare const CheckboxLightColorSchemeDefaultStatesCheckedBorder = "#0374eb";
 export declare const CheckboxLightColorSchemeDefaultStatesCheckedBackground = "#0374eb";
 export declare const CheckboxLightColorSchemeDefaultStatesFocusedBorder = "#0374eb";
@@ -8612,6 +8631,7 @@ export declare const CheckboxLightColorSchemeDefaultStatesCheckedFocusedBackgrou
 export declare const CheckboxLightColorSchemeDefaultStatesCheckedFocusedShadow = "0 0 0 1px #0374eb";
 export declare const CheckboxLightColorSchemeDefaultStatesCheckedFocusedOutline = "1px solid white";
 export declare const CheckboxLightColorSchemeErrorBorder = "#db3c55";
+export declare const CheckboxLightColorSchemeErrorColor = "white";
 export declare const CheckboxLightColorSchemeErrorStatesCheckedBorder = "#db3c55";
 export declare const CheckboxLightColorSchemeErrorStatesCheckedBackground = "#db3c55";
 export declare const CheckboxLightColorSchemeErrorStatesFocusedBorder = "#db3c55";
@@ -8621,6 +8641,7 @@ export declare const CheckboxLightColorSchemeErrorStatesCheckedFocusedBackground
 export declare const CheckboxLightColorSchemeErrorStatesCheckedFocusedShadow = "0 0 0 1px #db3c55";
 export declare const CheckboxLightColorSchemeErrorStatesCheckedFocusedOutline = "1px solid white";
 export declare const CheckboxDarkColorSchemeDefaultBorder = "#515e69";
+export declare const CheckboxDarkColorSchemeDefaultColor = "white";
 export declare const CheckboxDarkColorSchemeDefaultStatesCheckedBorder = "#0059b8";
 export declare const CheckboxDarkColorSchemeDefaultStatesCheckedBackground = "#0059b8";
 export declare const CheckboxDarkColorSchemeDefaultStatesFocusedBorder = "#4187ff";
@@ -8630,6 +8651,7 @@ export declare const CheckboxDarkColorSchemeDefaultStatesCheckedFocusedBackgroun
 export declare const CheckboxDarkColorSchemeDefaultStatesCheckedFocusedShadow = "0 0 0 1px #4187ff";
 export declare const CheckboxDarkColorSchemeDefaultStatesCheckedFocusedOutline = "1px solid #19252f";
 export declare const CheckboxDarkColorSchemeErrorBorder = "#b9023a";
+export declare const CheckboxDarkColorSchemeErrorColor = "white";
 export declare const CheckboxDarkColorSchemeErrorStatesCheckedBorder = "#b9023a";
 export declare const CheckboxDarkColorSchemeErrorStatesCheckedBackground = "#b9023a";
 export declare const CheckboxDarkColorSchemeErrorStatesFocusedBorder = "#b9023a";
@@ -8648,7 +8670,7 @@ export declare const DatepickerToggleSizeHeight = "30px";
 export declare const DatepickerBodyLightColorSchemeStatesSelectedColor = "#0374eb";
 export declare const DatepickerBodyLightColorSchemeStatesSelectedBackground = "#e7f1ff";
 export declare const DatepickerBodyDarkColorSchemeStatesSelectedColor = "#4187ff";
-export declare const DatepickerBodyDarkColorSchemeStatesSelectedBackground = "#014b9d";
+export declare const DatepickerBodyDarkColorSchemeStatesSelectedBackground = "#023c7f";
 export declare const DatepickerBodySizeLabelPaddings = "8px 28px 12px 12px";
 export declare const DatepickerBodySizeCellMinSize = "32px";
 export declare const DatepickerBodySizeCellMargin = "5%";
@@ -8813,13 +8835,13 @@ export declare const LinkLightColorSchemeStateHoverText = "#0059b8";
 export declare const LinkLightColorSchemeStateHoverBorderBottom = "rgba(#0059b8, 0.32)";
 export declare const LinkLightColorSchemeStateActive = "#014b9d";
 export declare const LinkLightColorSchemeStateFocusedOutline = "#0374eb";
-export declare const LinkDarkColorSchemeText = "#4187ff";
+export declare const LinkDarkColorSchemeText = "#5697ff";
 export declare const LinkDarkColorSchemeBorderBottom = "rgba(#6d7a86, 0.32)";
 export declare const LinkDarkColorSchemeStateVisitedText = "#bb78a7";
 export declare const LinkDarkColorSchemeStateVisitedBorderBottom = "rgba(#bb78a7, 0.32)";
-export declare const LinkDarkColorSchemeStateHoverText = "#0374eb";
-export declare const LinkDarkColorSchemeStateHoverBorderBottom = "rgba(#0374eb, 0.32)";
-export declare const LinkDarkColorSchemeStateActive = "#0059b8";
+export declare const LinkDarkColorSchemeStateHoverText = "#4187ff";
+export declare const LinkDarkColorSchemeStateHoverBorderBottom = "rgba(#4187ff, 0.32)";
+export declare const LinkDarkColorSchemeStateActive = "#0374eb";
 export declare const LinkDarkColorSchemeStateFocusedOutline = "#4187ff";
 export declare const LinkSizeIconMargin = "4px";
 export declare const LinkSizeStateFocusedOutlineOffset = "2px";
@@ -8829,6 +8851,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 = "#19252f";
+export declare const LoaderOverlayLightColorSchemeCaption = "#6d7a86";
+export declare const LoaderOverlayDarkColorSchemeBackground = "mix(#19252f, transparent, 90%)";
+export declare const LoaderOverlayDarkColorSchemeText = "#f2f5f9";
+export declare const LoaderOverlayDarkColorSchemeCaption = "#8c99a5";
+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 #d7dee4, 0 6px 12px 0 rgba(39, 51, 62, 0.5))";
 export declare const ModalLightColorSchemeBodyTopShadow = "0 2px 4px 0 rgba(39, 51, 62, 0.16)";
 export declare const ModalLightColorSchemeBodyBottomShadow = "0 -2px 4px 0 rgba(39, 51, 62, 0.16)";
@@ -8943,19 +8976,22 @@ export declare const ProgressBarSizeHeight = "4px";
 export declare const ProgressSpinnerSizeSize = "16px";
 export declare const RadioLightColorSchemeOuterCircleBorder = "#bdc7d1";
 export declare const RadioLightColorSchemeInnerCircleBorder = "transparent";
+export declare const RadioLightColorSchemeCapColor = "white";
 export declare const RadioLightColorSchemeStatesCheckedOuterCircleBorder = "#0374eb";
 export declare const RadioLightColorSchemeStatesCheckedInnerCircleBorder = "#0374eb";
 export declare const RadioLightColorSchemeStatesFocusedOuterCircleBorder = "#0374eb";
 export declare const RadioLightColorSchemeStatesFocusedOuterCircleShadow = "0 0 0 2px #0374eb";
-export declare const RadioLightColorSchemeStatesFocusedInnerCircleShadow = "0 0 0 1px white";
+export declare const RadioLightColorSchemeStatesFocusedInnerCircleShadow = "0 0 0 2px white";
 export declare const RadioDarkColorSchemeOuterCircleBorder = "#515e69";
 export declare const RadioDarkColorSchemeInnerCircleBorder = "transparent";
+export declare const RadioDarkColorSchemeCapColor = "white";
 export declare const RadioDarkColorSchemeStatesCheckedOuterCircleBorder = "#0059b8";
 export declare const RadioDarkColorSchemeStatesCheckedInnerCircleBorder = "#0059b8";
 export declare const RadioDarkColorSchemeStatesFocusedOuterCircleBorder = "#4187ff";
 export declare const RadioDarkColorSchemeStatesFocusedOuterCircleShadow = "0 0 0 2px #4187ff";
-export declare const RadioDarkColorSchemeStatesFocusedInnerCircleShadow = "0 0 0 1px #19252f";
-export declare const RadioSizeSize = "14px";
+export declare const RadioDarkColorSchemeStatesFocusedInnerCircleShadow = "0 0 0 2px #19252f";
+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";
@@ -9022,9 +9058,9 @@ export declare const VerticalTabsLightColorSchemeStateSelectedBackground = "#e7f
 export declare const VerticalTabsLightColorSchemeStateHoverBackground = "rgba(black, 0.05)";
 export declare const VerticalTabsLightColorSchemeStateHoverSelectedBackground = "adjust-color(#e7f1ff, $saturation:-22%, $lightness:-5%)";
 export declare const VerticalTabsDarkColorSchemeStateNormalBackground = "transparent";
-export declare const VerticalTabsDarkColorSchemeStateSelectedBackground = "#014b9d";
+export declare const VerticalTabsDarkColorSchemeStateSelectedBackground = "#023c7f";
 export declare const VerticalTabsDarkColorSchemeStateHoverBackground = "rgba(black, 0.05)";
-export declare const VerticalTabsDarkColorSchemeStateHoverSelectedBackground = "adjust-color(#014b9d, $lightness:-1%)";
+export declare const VerticalTabsDarkColorSchemeStateHoverSelectedBackground = "adjust-color(#023c7f, $lightness:-1%)";
 export declare const TagsLightColorSchemePrimaryBackground = "#e7f1ff";
 export declare const TagsLightColorSchemePrimaryBorder = "transparent";
 export declare const TagsLightColorSchemePrimaryText = "#0374eb";
@@ -9052,7 +9088,7 @@ export declare const TagsLightColorSchemeErrorStatesFocused = "#db3c55";
 export declare const TagsLightColorSchemeErrorStatesDisabledText = "mix(#ea5868, transparent, 50%)";
 export declare const TagsLightColorSchemeErrorStatesDisabledBackground = "mix(#ea5868, transparent, 10%)";
 export declare const TagsLightColorSchemeErrorStatesDisabledBorder = "transparent";
-export declare const TagsDarkColorSchemePrimaryBackground = "#023c7f";
+export declare const TagsDarkColorSchemePrimaryBackground = "#014b9d";
 export declare const TagsDarkColorSchemePrimaryBorder = "transparent";
 export declare const TagsDarkColorSchemePrimaryText = "#a2c7fe";
 export declare const TagsDarkColorSchemePrimaryIcon = "#5697ff";
@@ -9097,6 +9133,41 @@ export declare const TextareaSizePadding = "5px 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 = "#bdc7d1";
+export declare const ToastLightColorSchemeText = "#19252f";
+export declare const ToastLightColorSchemeTextCaption = "#6d7a86";
+export declare const ToastLightColorSchemeShadow = "0 8px 16px 0 rgba(#27333e, 0.2)";
+export declare const ToastLightColorSchemeIconInfo = "#18a5c5";
+export declare const ToastLightColorSchemeIconError = "#ee6f79";
+export declare const ToastLightColorSchemeIconSuccess = "#4ba96c";
+export declare const ToastLightColorSchemeIconWarning = "#e19f12";
+export declare const ToastDarkColorSchemeBackground = "#333f4a";
+export declare const ToastDarkColorSchemeBorder = "rgba(25, 37, 47, 0.1)";
+export declare const ToastDarkColorSchemeText = "#f2f5f9";
+export declare const ToastDarkColorSchemeTextCaption = "#8c99a5";
+export declare const ToastDarkColorSchemeShadow = "0 8px 16px 0 rgba(#27333e, 0.2)";
+export declare const ToastDarkColorSchemeIconInfo = "#18a5c5";
+export declare const ToastDarkColorSchemeIconError = "#ee6f79";
+export declare const ToastDarkColorSchemeIconSuccess = "#4ba96c";
+export declare const ToastDarkColorSchemeIconWarning = "#e19f12";
+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 = "#bdc7d1";
 export declare const ToggleLightColorSchemeBackground = "white";
 export declare const ToggleLightColorSchemeCircleBorder = "#bdc7d1";

package/design-tokens/style-dictionary/build.js

@@ -6,6 +6,17 @@ require('./transforms/attribute/typography')(StyleDictionary);
 require('./transforms/attribute/palette')(StyleDictionary);
 require('./transforms/attribute/prefix')(StyleDictionary);
 require('./transforms/attribute/size')(StyleDictionary);
+require('./transforms/attribute/figma-border')(StyleDictionary);
+require('./transforms/attribute/figma-font')(StyleDictionary);
+require('./transforms/attribute/figma-typography')(StyleDictionary);
+require('./transforms/attribute/figma-opacity')(StyleDictionary);
+require('./transforms/attribute/figma-spacing')(StyleDictionary);
+require('./transforms/attribute/figma-sizing')(StyleDictionary);
+require('./transforms/attribute/figma-color')(StyleDictionary);
+require('./transforms/attribute/figma-shadow')(StyleDictionary);
+require('./transforms/attribute/figma-default')(StyleDictionary);
+require('./transforms/attribute/figma-group')(StyleDictionary);
+require('./transforms/value/figma-values')(StyleDictionary);
 
 // ==== Include custom filters ====
 require('./filters/palette')(StyleDictionary);
@@ -17,10 +28,12 @@ require('./filters/typography')(StyleDictionary);
 require('./transformGroups/scss')(StyleDictionary);
 require('./transformGroups/css')(StyleDictionary);
 require('./transformGroups/ts')(StyleDictionary);
+require('./transformGroups/figma')(StyleDictionary);
 
 // ==== Include custom formats ====
 require('./formats/typography')(StyleDictionary);
 require('./formats/palette')(StyleDictionary);
+require('./formats/figma')(StyleDictionary);
 
 // ==== Run build ====
 console.log('Build started...');

package/design-tokens/style-dictionary/configs/figma.js

@@ -0,0 +1,11 @@
+module.exports = {
+    figma: {
+        transformGroup: 'mc/figma',
+        files: [
+            {
+                destination: 'figma-tokens.json',
+                format: 'figmaTokensPlugin',
+            },
+        ],
+    },
+};

package/design-tokens/style-dictionary/configs/index.js

@@ -1,8 +1,8 @@
 const merge = require('lodash/merge');
-
 const scssConfig = require('./scss');
 const jsConfig = require('./js');
 const cssConfig = require('./css');
+const figmaConfig = require('./figma');
 
 const filterObj = {
     options: {
@@ -29,12 +29,12 @@ function getSources(theme) {
 }
 
 function getConfigs(theme) {
-
     scssConfig.scss.buildPath = theme.outputPath;
     jsConfig.js.buildPath = theme.outputPath;
     cssConfig.css.buildPath = theme.outputPath;
+    figmaConfig.figma.buildPath = theme.outputPath;
 
-    return filterOptions([scssConfig, jsConfig, cssConfig]);
+    return filterOptions([scssConfig, jsConfig, cssConfig, figmaConfig]);
 }
 
 module.exports = (theme) => {

package/design-tokens/style-dictionary/figma-types.js

@@ -0,0 +1,41 @@
+const typographySingleTypes = {
+    textTransform: 'textTransform',
+    textCase: 'textCase',
+    fontFeatureSettings: 'fontFeatureSettings',
+    lineHeight: 'lineHeight',
+    letterSpacing: 'letterSpacing',
+    fontFamily: 'fontFamily',
+    fontSize: 'fontSize',
+    fontWeight: 'fontWeight'
+};
+
+const typographyPluralTypes = {
+    fontFamilies: 'fontFamilies',
+    fontWeights: 'fontWeights',
+    lineHeights: 'lineHeights',
+    fontSizes: 'fontSizes'
+};
+
+const typographyTypes = {
+    ...typographySingleTypes,
+    ...typographyPluralTypes
+};
+
+const figmaTypes = {
+    ...typographyTypes,
+    typography: 'typography',
+    other: 'other',
+    color: 'color',
+    borderWidth: 'borderWidth',
+    borderRadius: 'borderRadius',
+    sizing: 'sizing',
+    spacing: 'spacing',
+    opacity: 'opacity',
+    boxShadow: 'boxShadow'
+};
+
+module.exports = {
+    figmaTypes,
+    typographySingleTypes,
+    typographyPluralTypes
+};

package/design-tokens/style-dictionary/formats/figma.js

@@ -0,0 +1,104 @@
+const { typographySingleTypes, figmaTypes } = require('../figma-types');
+const setProperty = require('lodash/set');
+
+const JSON_INDENTATION = 2;
+
+function buildTypography(tokens) {
+    return {
+        value: Object.entries(tokens).reduce(
+            (accum, [, item]) => {
+                const { value, attributes: { figmaPropType }} = item;
+                accum[figmaPropType] = cleanValue(value);
+
+                return accum;
+            },
+            {}
+        ),
+        type: figmaTypes.typography
+    };
+}
+
+function rebuildTokes(tokens, parentCategory = null) {
+    if (tokens.value === undefined) {
+        const firstItemType = Object.values(tokens)[0] ?.attributes?.figmaPropType;
+        if (Object.values(typographySingleTypes).includes(firstItemType)) {
+            return buildTypography(tokens);
+        }
+
+        return Object.entries(tokens).reduce(
+            (accum, [tokenKey, tokenValue]) => {
+                accum[tokenKey] = cleanValue(rebuildTokes(tokenValue, parentCategory));
+
+                return accum;
+            },
+            {}
+        );
+    }
+
+    if (typeof tokens.value === 'object') {
+        return rebuildTokes(tokens.value, tokens.attributes.category);
+    }
+
+    let { category, figmaPropType, figmaValue, figmaLink } = tokens.attributes;
+    const { original } = tokens;
+    figmaValue = figmaLink ? `{${figmaValue}}` : figmaValue;
+    let value = figmaValue ?? original.value;
+
+    if (parentCategory && category !== parentCategory) {
+        value = buildRefFromAttributes(tokens.attributes);
+    }
+
+    return { value: cleanValue(value), type: figmaPropType };
+}
+
+function cleanValue(value) {
+    return typeof value === 'string' ? value.replaceAll('.value.', '.') : value;
+}
+
+function buildRefFromAttributes(attributes) {
+    const { category, type, item, subitem } = attributes;
+    const ref = [category, type, item, subitem].filter((refPart) => !!refPart);
+
+    return `{${ref.join('.')}}`;
+}
+
+function findLastLeafAttributes(property) {
+    if (!property.attributes) {
+        return findLastLeafAttributes(property[Object.keys(property)[0]]);
+    }
+
+    return property.attributes;
+}
+
+function prepareFigmaTitle(value) {
+    return value
+        .replaceAll('-', ' ')
+        .split(' ')
+        .map((titlePart) => titlePart.charAt(0).toUpperCase() + titlePart.slice(1))
+        .join(' ');
+}
+
+module.exports = (styleDictionary) => {
+    styleDictionary.registerFormat({
+        name: 'figmaTokensPlugin',
+        formatter: ({ dictionary }) => {
+            const groupedDict = Object.entries(dictionary.tokens)
+                .filter(([, propValue]) => typeof propValue === 'object')
+                .reduce(
+                    (accum, [propName, propValue]) => {
+                        const { group, subgroup } = findLastLeafAttributes(propValue);
+                        const propPath = group === 'properties'
+                            ? `${prepareFigmaTitle(group)}.${propName}`
+                            : `${prepareFigmaTitle(subgroup)}.${propName}`;
+                        setProperty(accum, propPath, propValue);
+
+                        return accum;
+                    },
+                    {}
+                );
+            const figmaTokens = rebuildTokes(groupedDict);
+
+            return JSON.stringify(figmaTokens, null, JSON_INDENTATION);
+        }
+    });
+};