@ptsecurity/mosaic 13.6.2 → 13.7.1

package/_theming.scss

@@ -167,6 +167,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;
@@ -427,7 +445,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;
@@ -806,6 +824,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);
@@ -2896,6 +2925,13 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
         state-focused-outline: $link-light-color-scheme-state-focused-outline
     );
 
+    $loader-overlay: (
+        background: $loader-overlay-light-color-scheme-background,
+
+        text: $loader-overlay-light-color-scheme-text,
+        caption: $loader-overlay-light-color-scheme-caption,
+    );
+
     $modal: (
         background-mask: $modal-light-color-scheme-background-mask,
         shadow: $modal-light-color-scheme-shadow,
@@ -3077,6 +3113,7 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
         form-field-password-hint: $form-field-password-hint,
         forms: $forms,
         link: $link,
+        loader-overlay: $loader-overlay,
         modal: $modal,
         navbar: $navbar,
         navbar-item: $navbar-item,
@@ -3358,6 +3395,13 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
         state-focused-outline: $link-dark-color-scheme-state-focused-outline
     );
 
+    $loader-overlay: (
+        background: $loader-overlay-dark-color-scheme-background,
+
+        text: $loader-overlay-dark-color-scheme-text,
+        caption: $loader-overlay-dark-color-scheme-caption,
+    );
+
     $modal: (
         background-mask: $modal-dark-color-scheme-background-mask,
         shadow: $modal-dark-color-scheme-shadow,
@@ -3539,6 +3583,7 @@ $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default
         form-field-password-hint: $form-field-password-hint,
         forms: $forms,
         link: $link,
+        loader-overlay: $loader-overlay,
         modal: $modal,
         navbar: $navbar,
         navbar-item: $navbar-item,
@@ -4249,6 +4294,10 @@ $fonts: (
             @include mc-badge-color(map-get($badge, success_pastel));
         }
 
+        &.mc-badge_info {
+            @include mc-badge-color(map-get($badge, info_pastel));
+        }
+
         &.mc-badge_warning {
             @include mc-badge-color(map-get($badge, warning_pastel));
         }
@@ -4879,6 +4928,7 @@ $mc-datepicker-today-fade-amount: 0.2;
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
 
+    $primary: map-get($theme, primary);
     $second: map-get($theme, second);
     $error: map-get($theme, error);
 
@@ -4912,10 +4962,6 @@ $mc-datepicker-today-fade-amount: 0.2;
                         color: mc-color($error);
                     }
                 }
-
-                & .mc-hint {
-                    color: mc-color($error);
-                }
             }
 
             &.cdk-focused {
@@ -4945,6 +4991,20 @@ $mc-datepicker-today-fade-amount: 0.2;
         }
     }
 
+    .mc-hint {
+        &.mc-primary {
+            color: mc-color($primary);
+        }
+
+        &.mc-second {
+            color: mc-color($second);
+        }
+
+        &.mc-error {
+            color: mc-color($error);
+        }
+    }
+
     .mc-password-hint {
         $password-hint: map-get(map-get($theme, components), form-field-password-hint);
 
@@ -5254,6 +5314,40 @@ $mc-datepicker-today-fade-amount: 0.2;
 
 
 
+@mixin mc-loader-overlay-theme($theme) {
+    $background: map-get($theme, background);
+    $primary: map-get($theme, primary);
+
+    $loader-overlay: map-get(map-get($theme, components), loader-overlay);
+
+    .mc-loader-overlay {
+        background: map-get($loader-overlay, background);
+    }
+
+    .mc-loader-overlay-text {
+        color: map-get($loader-overlay, text);
+    }
+
+    .mc-loader-overlay-caption {
+        color: map-get($loader-overlay, caption);
+    }
+}
+
+@mixin mc-loader-overlay-typography($config) {
+    .mc-loader-overlay-text {
+        @include mc-typography-level-to-styles($config, $loader-overlay-font-text);
+    }
+
+    .mc-loader-overlay-caption {
+        @include mc-typography-level-to-styles($config, $loader-overlay-font-caption);
+    }
+}
+
+
+
+
+
+
 @mixin mc-modal-theme($theme) {
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
@@ -6013,7 +6107,7 @@ button {
         box-shadow: 0 0 0 1px map-get($params, focused);
     }
 
-    & .mc-icon {
+    &:not(.mc-disabled) .mc-icon {
         color: map-get($params, icon);
 
         &.mc-tag-remove:hover {
@@ -6640,6 +6734,7 @@ button {
     @include mc-input-typography($config);
     @include mc-link-typography($config);
     @include mc-list-typography($config);
+    @include mc-loader-overlay-typography($config);
     @include mc-modal-typography($config);
     @include mc-navbar-typography($config);
     @include mc-option-typography($config);
@@ -6873,6 +6968,7 @@ button {
 
 
 
+
 @mixin mc-progress-bar-theme($theme) {
     $primary: map-get($theme, primary);
     $second: map-get($theme, second);
@@ -7116,6 +7212,7 @@ button {
     @include mc-input-theme($theme);
     @include mc-link-theme($theme);
     @include mc-list-theme($theme);
+    @include mc-loader-overlay-theme($theme);
     @include mc-modal-theme($theme);
     @include mc-navbar-theme($theme);
     @include mc-option-theme($theme);

package/_visual.scss

@@ -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;
@@ -708,6 +726,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);

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/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";
@@ -7500,6 +7518,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)";

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/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/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

@@ -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";
@@ -8829,6 +8847,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)";

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) => {