@salutejs/sdds-scan 0.357.0-next-sbcom.0 → 0.358.0-dev.0

package/dist/styled-components/es/components/Divider/Divider.config.js

@@ -1,4 +1,5 @@
 import { css, dividerTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { inverseTextTertiary, onDarkSurfaceTransparentTertiary, onLightSurfaceTransparentTertiary, surfaceTransparentTertiary } from '@salutejs/sdds-themes/tokens/sdds_scan';
 export const config = {
     defaults: {
         view: 'default',
@@ -8,17 +9,17 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${dividerTokens.background}: var(--surface-transparent-tertiary);
+                ${dividerTokens.background}: ${surfaceTransparentTertiary};
             `,
             dark: css`
-                ${dividerTokens.background}: var(--on-dark-surface-transparent-tertiary);
+                ${dividerTokens.background}: ${onDarkSurfaceTransparentTertiary};
             `,
             light: css`
-                ${dividerTokens.background}: var(--on-light-surface-transparent-tertiary);
+                ${dividerTokens.background}: ${onLightSurfaceTransparentTertiary};
             `,
             // TODO поменять на корректный токен --inverse-surface-transparent-tertiary когда он появится
             inverse: css`
-                ${dividerTokens.background}: var(--inverse-text-tertiary);
+                ${dividerTokens.background}: ${inverseTextTertiary};
             `
         },
         size: {

package/dist/styled-components/es/components/Drawer/Drawer.config.js

@@ -1,4 +1,5 @@
 import { css, drawerTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { overlayBlur, overlaySoft, surfaceSolidCard, surfaceTransparentPrimary } from '@salutejs/sdds-themes/tokens/sdds_scan';
 export const config = {
     defaults: {
         view: 'default',
@@ -7,11 +8,11 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${drawerTokens.background}: var(--surface-solid-card);
+                ${drawerTokens.background}: ${surfaceSolidCard};
                 ${drawerTokens.shadow}: 0 3.75rem 7rem -0.5rem rgba(0, 0, 0, 0.08);
-                ${drawerTokens.contentBackgroundColor}: var(--surface-transparent-primary);
-                ${drawerTokens.drawerOverlayWithBlurColor}: var(--overlay-blur);
-                ${drawerTokens.drawerOverlayColor}: var(--overlay-soft);
+                ${drawerTokens.contentBackgroundColor}: ${surfaceTransparentPrimary};
+                ${drawerTokens.drawerOverlayWithBlurColor}: ${overlayBlur};
+                ${drawerTokens.drawerOverlayColor}: ${overlaySoft};
             `
         },
         size: {

package/dist/styled-components/es/components/Dropdown/Dropdown.config.js

@@ -1,4 +1,5 @@
 import { css, dropdownTokens as tokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyM, bodyS, surfaceTransparentSecondary, surfaceTransparentTertiary } from '@salutejs/sdds-themes/tokens/sdds_scan';
 export const config = {
     defaults: {
         view: 'default',
@@ -23,12 +24,12 @@ export const config = {
                 ${tokens.dividerMarginTopTight}: 0.375rem;
                 ${tokens.dividerMarginBottomTight}: 0.375rem;
 
-                ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size);
-                ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${tokens.itemFontWeightBold}: var(--plasma-typo-body-m-font-weight);
-                ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${tokens.itemFontFamily}: ${bodyM.fontFamily};
+                ${tokens.itemFontSize}: ${bodyM.fontSize};
+                ${tokens.itemFontStyle}: ${bodyM.fontStyle};
+                ${tokens.itemFontWeightBold}: ${bodyM.fontWeight};
+                ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing};
+                ${tokens.itemFontLineHeight}: ${bodyM.lineHeight};
 
                 ${tokens.cellPadding}: 0rem;
                 ${tokens.cellPaddingLeftContent}: 0rem;
@@ -36,12 +37,12 @@ export const config = {
                 ${tokens.cellPaddingRightContent}: 0rem;
                 ${tokens.cellTextboxGap}: 0.125rem;
                 ${tokens.cellGap}: 0.375rem;
-                ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size);
-                ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily};
+                ${tokens.cellTitleFontSize}: ${bodyM.fontSize};
+                ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle};
+                ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight};
+                ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing};
+                ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight};
             `,
             s: css`
                 ${tokens.padding}: 0.125rem;
@@ -60,12 +61,12 @@ export const config = {
                 ${tokens.dividerMarginTopTight}: 0.25rem;
                 ${tokens.dividerMarginBottomTight}: 0.25rem;
 
-                ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size);
-                ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${tokens.itemFontWeightBold}: var(--plasma-typo-body-s-font-weight);
-                ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tokens.itemFontFamily}: ${bodyS.fontFamily};
+                ${tokens.itemFontSize}: ${bodyS.fontSize};
+                ${tokens.itemFontStyle}: ${bodyS.fontStyle};
+                ${tokens.itemFontWeightBold}: ${bodyS.fontWeight};
+                ${tokens.itemFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.itemFontLineHeight}: ${bodyS.lineHeight};
 
                 ${tokens.cellPadding}: 0rem;
                 ${tokens.cellPaddingLeftContent}: 0rem;
@@ -73,18 +74,18 @@ export const config = {
                 ${tokens.cellPaddingRightContent}: 0rem;
                 ${tokens.cellTextboxGap}: 0.125rem;
                 ${tokens.cellGap}: 0.375rem;
-                ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size);
-                ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily};
+                ${tokens.cellTitleFontSize}: ${bodyS.fontSize};
+                ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle};
+                ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight};
+                ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight};
             `
         },
         view: {
             default: css`
-                ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary);
-                ${tokens.dividerColor}: var(--surface-transparent-tertiary);
+                ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary};
+                ${tokens.dividerColor}: ${surfaceTransparentTertiary};
             `
         }
     }

package/dist/styled-components/es/components/Dropzone/Dropzone.config.js

@@ -1,4 +1,5 @@
 import { css, dropzoneTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyS, h4, h4Bold, outlineAccent, outlineSolidSecondary, outlineSolidSecondaryHover, overlaySoft, surfaceSolidCard, surfaceSolidCardHover, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_scan';
 export const config = {
     defaults: {
         view: 'default',
@@ -7,14 +8,14 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${dropzoneTokens.background}: var(--surface-solid-card);
-                ${dropzoneTokens.backgroundHover}: var(--surface-solid-card-hover);
-                ${dropzoneTokens.overlayColorActive}: var(--overlay-soft);
-                ${dropzoneTokens.borderColor}: var(--outline-solid-secondary);
-                ${dropzoneTokens.borderColorHover}: var(--outline-solid-secondary-hover);
-                ${dropzoneTokens.borderColorActive}: var(--outline-accent);
-                ${dropzoneTokens.titleColor}: var(--text-primary);
-                ${dropzoneTokens.descriptionColor}: var(--text-secondary);
+                ${dropzoneTokens.background}: ${surfaceSolidCard};
+                ${dropzoneTokens.backgroundHover}: ${surfaceSolidCardHover};
+                ${dropzoneTokens.overlayColorActive}: ${overlaySoft};
+                ${dropzoneTokens.borderColor}: ${outlineSolidSecondary};
+                ${dropzoneTokens.borderColorHover}: ${outlineSolidSecondaryHover};
+                ${dropzoneTokens.borderColorActive}: ${outlineAccent};
+                ${dropzoneTokens.titleColor}: ${textPrimary};
+                ${dropzoneTokens.descriptionColor}: ${textSecondary};
             `
         },
         size: {
@@ -25,19 +26,19 @@ export const config = {
                 ${dropzoneTokens.contentGap}: 0.375rem;
                 ${dropzoneTokens.contentColumnGap}: 0.5rem;
 
-                ${dropzoneTokens.titleFontFamily}: var(--plasma-typo-h4-font-family);
-                ${dropzoneTokens.titleFontSize}: var(--plasma-typo-h4-font-size);
-                ${dropzoneTokens.titleFontStyle}: var(--plasma-typo-h4-font-style);
-                ${dropzoneTokens.titleFontWeight}: var(--plasma-typo-h4-bold-font-weight);
-                ${dropzoneTokens.titleLetterSpacing}: var(--plasma-typo-h4-letter-spacing);
-                ${dropzoneTokens.titleLineHeight}: var(--plasma-typo-h4-line-height);
+                ${dropzoneTokens.titleFontFamily}: ${h4.fontFamily};
+                ${dropzoneTokens.titleFontSize}: ${h4.fontSize};
+                ${dropzoneTokens.titleFontStyle}: ${h4.fontStyle};
+                ${dropzoneTokens.titleFontWeight}: ${h4Bold.fontWeight};
+                ${dropzoneTokens.titleLetterSpacing}: ${h4.letterSpacing};
+                ${dropzoneTokens.titleLineHeight}: ${h4.lineHeight};
 
-                ${dropzoneTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${dropzoneTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size);
-                ${dropzoneTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${dropzoneTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${dropzoneTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${dropzoneTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${dropzoneTokens.descriptionFontFamily}: ${bodyS.fontFamily};
+                ${dropzoneTokens.descriptionFontSize}: ${bodyS.fontSize};
+                ${dropzoneTokens.descriptionFontStyle}: ${bodyS.fontStyle};
+                ${dropzoneTokens.descriptionFontWeight}: ${bodyS.fontWeight};
+                ${dropzoneTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing};
+                ${dropzoneTokens.descriptionLineHeight}: ${bodyS.lineHeight};
             `
         },
         disabled: {

package/dist/styled-components/es/components/EmbedIconButton/EmbedIconButton.config.js

@@ -1,4 +1,5 @@
 import { css, embedIconButtonTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyL, bodyLBold, bodyM, bodyMBold, bodyS, bodySBold, surfaceAccent, surfaceClear, textAccent, textAccentActive, textAccentHover, textInfo, textInfoActive, textInfoHover, textNegative, textNegativeActive, textNegativeHover, textPositive, textPositiveActive, textPositiveHover, textPrimary, textPrimaryActive, textPrimaryHover, textSecondary, textSecondaryActive, textSecondaryHover, textWarning, textWarningActive, textWarningHover } from '@salutejs/sdds-themes/tokens/sdds_scan';
 export const config = {
     defaults: {
         view: 'default',
@@ -8,53 +9,53 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${embedIconButtonTokens.embedIconButtonColor}: var(--text-primary);
-                ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-clear);
+                ${embedIconButtonTokens.embedIconButtonColor}: ${textPrimary};
+                ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear};
                 ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor});
-                ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-primary-hover);
-                ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-primary-active);
+                ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPrimaryHover};
+                ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPrimaryActive};
             `,
             accent: css`
-                ${embedIconButtonTokens.embedIconButtonColor}: var(--text-accent);
-                ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-clear);
+                ${embedIconButtonTokens.embedIconButtonColor}: ${textAccent};
+                ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear};
                 ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor});
-                ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-accent-hover);
-                ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-accent-active);
+                ${embedIconButtonTokens.embedIconButtonColorHover}: ${textAccentHover};
+                ${embedIconButtonTokens.embedIconButtonColorActive}: ${textAccentActive};
             `,
             secondary: css`
-                ${embedIconButtonTokens.embedIconButtonColor}: var(--text-secondary);
-                ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-clear);
+                ${embedIconButtonTokens.embedIconButtonColor}: ${textSecondary};
+                ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear};
                 ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor});
-                ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-secondary-hover);
-                ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-secondary-active);
+                ${embedIconButtonTokens.embedIconButtonColorHover}: ${textSecondaryHover};
+                ${embedIconButtonTokens.embedIconButtonColorActive}: ${textSecondaryActive};
             `,
             positive: css`
-                ${embedIconButtonTokens.embedIconButtonColor}: var(--text-positive);
-                ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-clear);
+                ${embedIconButtonTokens.embedIconButtonColor}: ${textPositive};
+                ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear};
                 ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor});
-                ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-positive-hover);
-                ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-positive-active);
+                ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPositiveHover};
+                ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPositiveActive};
             `,
             warning: css`
-                ${embedIconButtonTokens.embedIconButtonColor}: var(--text-warning);
-                ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-clear);
+                ${embedIconButtonTokens.embedIconButtonColor}: ${textWarning};
+                ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear};
                 ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor});
-                ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-warning-hover);
-                ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-warning-active);
+                ${embedIconButtonTokens.embedIconButtonColorHover}: ${textWarningHover};
+                ${embedIconButtonTokens.embedIconButtonColorActive}: ${textWarningActive};
             `,
             negative: css`
-                ${embedIconButtonTokens.embedIconButtonColor}: var(--text-negative);
-                ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-clear);
+                ${embedIconButtonTokens.embedIconButtonColor}: ${textNegative};
+                ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear};
                 ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor});
-                ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-negative-hover);
-                ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-negative-active);
+                ${embedIconButtonTokens.embedIconButtonColorHover}: ${textNegativeHover};
+                ${embedIconButtonTokens.embedIconButtonColorActive}: ${textNegativeActive};
             `,
             info: css`
-                ${embedIconButtonTokens.embedIconButtonColor}: var(--text-info);
-                ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-clear);
+                ${embedIconButtonTokens.embedIconButtonColor}: ${textInfo};
+                ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear};
                 ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor});
-                ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-info-hover);
-                ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-info-active);
+                ${embedIconButtonTokens.embedIconButtonColorHover}: ${textInfoHover};
+                ${embedIconButtonTokens.embedIconButtonColorActive}: ${textInfoActive};
             `
         },
         size: {
@@ -63,12 +64,12 @@ export const config = {
                 ${embedIconButtonTokens.embedIconButtonWidth}: 2.25rem;
                 ${embedIconButtonTokens.embedIconButtonPadding}: 0rem;
                 ${embedIconButtonTokens.embedIconButtonRadius}: 0.75rem;
-                ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-l-font-family);
-                ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-l-font-size);
-                ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-l-font-style);
-                ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight);
-                ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyL.fontFamily};
+                ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyL.fontSize};
+                ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyL.fontStyle};
+                ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyLBold.fontWeight};
+                ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyL.letterSpacing};
+                ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyL.lineHeight};
 
                 ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.75rem;
                 ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit;
@@ -78,12 +79,12 @@ export const config = {
                 ${embedIconButtonTokens.embedIconButtonWidth}: 1.5rem;
                 ${embedIconButtonTokens.embedIconButtonPadding}: 0rem;
                 ${embedIconButtonTokens.embedIconButtonRadius}: 0.625rem;
-                ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-m-font-size);
-                ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
-                ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyM.fontFamily};
+                ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyM.fontSize};
+                ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyM.fontStyle};
+                ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyMBold.fontWeight};
+                ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyM.letterSpacing};
+                ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyM.lineHeight};
 
                 ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.25rem;
                 ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit;
@@ -93,12 +94,12 @@ export const config = {
                 ${embedIconButtonTokens.embedIconButtonWidth}: 1rem;
                 ${embedIconButtonTokens.embedIconButtonPadding}: 0rem;
                 ${embedIconButtonTokens.embedIconButtonRadius}: 0.5rem;
-                ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-s-font-size);
-                ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyS.fontFamily};
+                ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyS.fontSize};
+                ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyS.fontStyle};
+                ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodySBold.fontWeight};
+                ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyS.letterSpacing};
+                ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyS.lineHeight};
 
                 ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 0.75rem;
                 ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit;
@@ -111,7 +112,7 @@ export const config = {
         },
         focused: {
             true: css`
-                ${embedIconButtonTokens.embedIconButtonFocusColor}: var(--surface-accent);
+                ${embedIconButtonTokens.embedIconButtonFocusColor}: ${surfaceAccent};
             `
         }
     }

package/dist/styled-components/es/components/EmptyState/EmptyState.config.js

@@ -1,4 +1,5 @@
 import { css, emptyStateTokens as tokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/sdds-themes/tokens/sdds_scan';
 export const config = {
     defaults: {
         size: 'l'
@@ -12,12 +13,12 @@ export const config = {
                 ${tokens.descriptionMargin}: 0 0 1rem 0;
                 ${tokens.buttonMargin}: -1rem 0 0 0;
                 ${tokens.buttonHeight}: 3.5rem;
-                ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family);
-                ${tokens.fontSize}: var(--plasma-typo-body-l-font-size);
-                ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style);
-                ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight);
-                ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${tokens.fontFamily}: ${bodyL.fontFamily};
+                ${tokens.fontSize}: ${bodyL.fontSize};
+                ${tokens.fontStyle}: ${bodyL.fontStyle};
+                ${tokens.fontWeight}: ${bodyL.fontWeight};
+                ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing};
+                ${tokens.fontLineHeight}: ${bodyL.lineHeight};
             `,
             m: css`
                 ${tokens.borderRadius}: 0.75rem;
@@ -26,12 +27,12 @@ export const config = {
                 ${tokens.descriptionMargin}: 0 0 0.875rem 0;
                 ${tokens.buttonMargin}: -0.875rem 0 0 0;
                 ${tokens.buttonHeight}: 3rem;
-                ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family);
-                ${tokens.fontSize}: var(--plasma-typo-body-m-font-size);
-                ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style);
-                ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${tokens.fontFamily}: ${bodyM.fontFamily};
+                ${tokens.fontSize}: ${bodyM.fontSize};
+                ${tokens.fontStyle}: ${bodyM.fontStyle};
+                ${tokens.fontWeight}: ${bodyM.fontWeight};
+                ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing};
+                ${tokens.fontLineHeight}: ${bodyM.lineHeight};
             `,
             s: css`
                 ${tokens.borderRadius}: 0.625rem;
@@ -40,12 +41,12 @@ export const config = {
                 ${tokens.descriptionMargin}: 0 0 0.625rem 0;
                 ${tokens.buttonMargin}: -0.625rem 0 0 0;
                 ${tokens.buttonHeight}: 2.5rem;
-                ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family);
-                ${tokens.fontSize}: var(--plasma-typo-body-s-font-size);
-                ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style);
-                ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tokens.fontFamily}: ${bodyS.fontFamily};
+                ${tokens.fontSize}: ${bodyS.fontSize};
+                ${tokens.fontStyle}: ${bodyS.fontStyle};
+                ${tokens.fontWeight}: ${bodyS.fontWeight};
+                ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.fontLineHeight}: ${bodyS.lineHeight};
             `,
             xs: css`
                 ${tokens.borderRadius}: 0.5rem;
@@ -54,12 +55,12 @@ export const config = {
                 ${tokens.descriptionMargin}: 0 0 0.5rem 0;
                 ${tokens.buttonMargin}: -0.5rem 0 0 0;
                 ${tokens.buttonHeight}: 2rem;
-                ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.fontFamily}: ${bodyXS.fontFamily};
+                ${tokens.fontSize}: ${bodyXS.fontSize};
+                ${tokens.fontStyle}: ${bodyXS.fontStyle};
+                ${tokens.fontWeight}: ${bodyXS.fontWeight};
+                ${tokens.fontLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.fontLineHeight}: ${bodyXS.lineHeight};
             `
         }
     }

package/dist/styled-components/es/components/File/File.config.js

@@ -1,4 +1,5 @@
 import { css, fileTokens as tokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyM, bodyS, bodyXS, surfaceAccent, surfaceNegative, surfaceSolidDefault, surfaceTransparentSecondary, surfaceTransparentTertiary, textNegative, textPrimary, textPrimaryActive, textPrimaryHover, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_scan';
 export const config = {
     defaults: {
         view: 'default',
@@ -7,36 +8,36 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${tokens.embedIconButtonColor}: var(--text-primary);
-                ${tokens.embedIconButtonColorHover}: var(--text-primary-hover);
-                ${tokens.embedIconButtonColorActive}: var(--text-primary-active);
-                ${tokens.embedIconButtonFocusColor}: var(--surface-accent);
+                ${tokens.embedIconButtonColor}: ${textPrimary};
+                ${tokens.embedIconButtonColorHover}: ${textPrimaryHover};
+                ${tokens.embedIconButtonColorActive}: ${textPrimaryActive};
+                ${tokens.embedIconButtonFocusColor}: ${surfaceAccent};
 
-                ${tokens.cellTitleColor}: var(--text-primary);
-                ${tokens.cellSubtitleColor}: var(--text-secondary);
+                ${tokens.cellTitleColor}: ${textPrimary};
+                ${tokens.cellSubtitleColor}: ${textSecondary};
 
-                ${tokens.progressBarCircularContentColor}: var(--text-primary);
-                ${tokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary);
-                ${tokens.progressBarCircularStroke}: var(--surface-solid-default);
+                ${tokens.progressBarCircularContentColor}: ${textPrimary};
+                ${tokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary};
+                ${tokens.progressBarCircularStroke}: ${surfaceSolidDefault};
 
-                ${tokens.progressTrackBackgroundColor}: var(--surface-transparent-secondary);
-                ${tokens.progressFilledBackgroundColor}: var(--surface-solid-default);
+                ${tokens.progressTrackBackgroundColor}: ${surfaceTransparentSecondary};
+                ${tokens.progressFilledBackgroundColor}: ${surfaceSolidDefault};
             `,
             negative: css`
-                ${tokens.embedIconButtonColor}: var(--text-primary);
-                ${tokens.embedIconButtonColorHover}: var(--text-primary-hover);
-                ${tokens.embedIconButtonColorActive}: var(--text-primary-active);
-                ${tokens.embedIconButtonFocusColor}: var(--surface-accent);
+                ${tokens.embedIconButtonColor}: ${textPrimary};
+                ${tokens.embedIconButtonColorHover}: ${textPrimaryHover};
+                ${tokens.embedIconButtonColorActive}: ${textPrimaryActive};
+                ${tokens.embedIconButtonFocusColor}: ${surfaceAccent};
 
-                ${tokens.cellTitleColor}: var(--text-primary);
-                ${tokens.cellSubtitleColor}: var(--text-negative);
+                ${tokens.cellTitleColor}: ${textPrimary};
+                ${tokens.cellSubtitleColor}: ${textNegative};
 
-                ${tokens.progressBarCircularContentColor}: var(--text-primary);
-                ${tokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary);
-                ${tokens.progressBarCircularStroke}: var(--surface-negative);
+                ${tokens.progressBarCircularContentColor}: ${textPrimary};
+                ${tokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary};
+                ${tokens.progressBarCircularStroke}: ${surfaceNegative};
 
-                ${tokens.progressTrackBackgroundColor}: var(--surface-transparent-secondary);
-                ${tokens.progressFilledBackgroundColor}: var(--surface-negative);
+                ${tokens.progressTrackBackgroundColor}: ${surfaceTransparentSecondary};
+                ${tokens.progressFilledBackgroundColor}: ${surfaceNegative};
             `
         },
         size: {
@@ -51,19 +52,19 @@ export const config = {
                 ${tokens.cellGap}: 0.625rem;
                 ${tokens.cellPaddingRightContent}: 0.625rem;
 
-                ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size);
-                ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily};
+                ${tokens.cellTitleFontSize}: ${bodyM.fontSize};
+                ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle};
+                ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight};
+                ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing};
+                ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight};
 
-                ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize};
+                ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight};
 
                 ${tokens.progressBarCircularSize}: 36;
                 ${tokens.progressBarCircularHeight}: 2.25rem;
@@ -93,19 +94,19 @@ export const config = {
                 ${tokens.cellGap}: 0.5rem;
                 ${tokens.cellPaddingRightContent}: 0.5rem;
 
-                ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size);
-                ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height);
-
-                ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily};
+                ${tokens.cellTitleFontSize}: ${bodyS.fontSize};
+                ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle};
+                ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight};
+                ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight};
+
+                ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize};
+                ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight};
 
                 ${tokens.progressBarCircularSize}: 36;
                 ${tokens.progressBarCircularHeight}: 2.25rem;