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

package/dist/styled-components/cjs/components/Toolbar/Toolbar.config.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "config", {
     }
 });
 const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const _sdds_scan = require("@salutejs/sdds-themes/tokens/sdds_scan");
 const config = {
     defaults: {
         view: 'default',
@@ -17,11 +18,11 @@ const config = {
     variations: {
         view: {
             default: (0, _styledcomponents.css)`
-                /* TODO: заменить значение box-shadow на var(--shadow-down-soft-s). https://github.com/salute-developers/plasma/issues/1131 */
+                /* TODO: заменить значение box-shadow на ${_sdds_scan.shadowDownSoftS}. https://github.com/salute-developers/plasma/issues/1131 */
                 ${_styledcomponents.toolbarTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);
-                ${_styledcomponents.toolbarTokens.background}: var(--surface-solid-card-brightness);
+                ${_styledcomponents.toolbarTokens.background}: ${_sdds_scan.surfaceSolidCardBrightness};
 
-                ${_styledcomponents.toolbarTokens.dividerColor}: var(--surface-transparent-tertiary);
+                ${_styledcomponents.toolbarTokens.dividerColor}: ${_sdds_scan.surfaceTransparentTertiary};
             `
         },
         size: {

package/dist/styled-components/cjs/components/Tooltip/Tooltip.config.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "config", {
     }
 });
 const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const _sdds_scan = require("@salutejs/sdds-themes/tokens/sdds_scan");
 const config = {
     defaults: {
         view: 'default',
@@ -18,9 +19,9 @@ const config = {
         view: {
             // TODO заменить тень на токен https://github.com/salute-developers/plasma/issues/1131
             default: (0, _styledcomponents.css)`
-                ${_styledcomponents.tooltipTokens.backgroundColor}: var(--surface-solid-card-brightness);
+                ${_styledcomponents.tooltipTokens.backgroundColor}: ${_sdds_scan.surfaceSolidCardBrightness};
                 ${_styledcomponents.tooltipTokens.boxShadow}: 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08);
-                ${_styledcomponents.tooltipTokens.color}: var(--text-primary);
+                ${_styledcomponents.tooltipTokens.color}: ${_sdds_scan.textPrimary};
             `
         },
         size: {
@@ -33,12 +34,12 @@ const config = {
                 ${_styledcomponents.tooltipTokens.minHeight}: 2rem;
                 ${_styledcomponents.tooltipTokens.borderRadius}: 0.5rem;
 
-                ${_styledcomponents.tooltipTokens.textFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_styledcomponents.tooltipTokens.textFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_styledcomponents.tooltipTokens.textFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_styledcomponents.tooltipTokens.textFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_styledcomponents.tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_styledcomponents.tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_styledcomponents.tooltipTokens.textFontFamily}: ${_sdds_scan.bodyXS.fontFamily};
+                ${_styledcomponents.tooltipTokens.textFontSize}: ${_sdds_scan.bodyXS.fontSize};
+                ${_styledcomponents.tooltipTokens.textFontStyle}: ${_sdds_scan.bodyXS.fontStyle};
+                ${_styledcomponents.tooltipTokens.textFontWeight}: ${_sdds_scan.bodyXS.fontWeight};
+                ${_styledcomponents.tooltipTokens.textFontLetterSpacing}: ${_sdds_scan.bodyXS.letterSpacing};
+                ${_styledcomponents.tooltipTokens.textFontLineHeight}: ${_sdds_scan.bodyXS.lineHeight};
 
                 ${_styledcomponents.tooltipTokens.contentLeftMargin}: 0.25rem;
 
@@ -47,7 +48,7 @@ const config = {
                 ${_styledcomponents.tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+");
                 ${_styledcomponents.tooltipTokens.arrowHeight}: 0.375rem;
                 ${_styledcomponents.tooltipTokens.arrowEdgeMargin}: 0.5625rem;
-                ${_styledcomponents.tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness);
+                ${_styledcomponents.tooltipTokens.arrowBackground}: ${_sdds_scan.surfaceSolidCardBrightness};
             `,
             m: (0, _styledcomponents.css)`
                 ${_styledcomponents.tooltipTokens.paddingTop}: 0.6875rem;
@@ -58,12 +59,12 @@ const config = {
                 ${_styledcomponents.tooltipTokens.minHeight}: 2.5rem;
                 ${_styledcomponents.tooltipTokens.borderRadius}: 0.625rem;
 
-                ${_styledcomponents.tooltipTokens.textFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_styledcomponents.tooltipTokens.textFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_styledcomponents.tooltipTokens.textFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_styledcomponents.tooltipTokens.textFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_styledcomponents.tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_styledcomponents.tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_styledcomponents.tooltipTokens.textFontFamily}: ${_sdds_scan.bodyS.fontFamily};
+                ${_styledcomponents.tooltipTokens.textFontSize}: ${_sdds_scan.bodyS.fontSize};
+                ${_styledcomponents.tooltipTokens.textFontStyle}: ${_sdds_scan.bodyS.fontStyle};
+                ${_styledcomponents.tooltipTokens.textFontWeight}: ${_sdds_scan.bodyS.fontWeight};
+                ${_styledcomponents.tooltipTokens.textFontLetterSpacing}: ${_sdds_scan.bodyS.letterSpacing};
+                ${_styledcomponents.tooltipTokens.textFontLineHeight}: ${_sdds_scan.bodyS.lineHeight};
 
                 ${_styledcomponents.tooltipTokens.contentLeftMargin}: 0.375rem;
 
@@ -72,7 +73,7 @@ const config = {
                 ${_styledcomponents.tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg==");
                 ${_styledcomponents.tooltipTokens.arrowHeight}: 0.5rem;
                 ${_styledcomponents.tooltipTokens.arrowEdgeMargin}: 0.625rem;
-                ${_styledcomponents.tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness);
+                ${_styledcomponents.tooltipTokens.arrowBackground}: ${_sdds_scan.surfaceSolidCardBrightness};
             `
         }
     }

package/dist/styled-components/cjs/components/Tour/Tour.config.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "config", {
     }
 });
 const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const _sdds_scan = require("@salutejs/sdds-themes/tokens/sdds_scan");
 const config = {
     defaults: {
         view: 'default',
@@ -17,8 +18,8 @@ const config = {
     variations: {
         view: {
             default: (0, _styledcomponents.css)`
-                ${_styledcomponents.tourTokens.tailColor}: var(--surface-solid-card);
-                ${_styledcomponents.tourTokens.overlayColor}: var(--inverse-overlay-soft);
+                ${_styledcomponents.tourTokens.tailColor}: ${_sdds_scan.surfaceSolidCard};
+                ${_styledcomponents.tourTokens.overlayColor}: ${_sdds_scan.inverseOverlaySoft};
             `
         },
         size: {

package/dist/styled-components/cjs/components/Tree/Tree.config.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "config", {
     }
 });
 const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const _sdds_scan = require("@salutejs/sdds-themes/tokens/sdds_scan");
 const config = {
     defaults: {
         view: 'default',
@@ -17,24 +18,24 @@ const config = {
     variations: {
         view: {
             default: (0, _styledcomponents.css)`
-                ${_styledcomponents.treeTokens.iconFolderColor}: var(--text-primary);
-                ${_styledcomponents.treeTokens.arrowColor}: var(--text-secondary);
-                ${_styledcomponents.treeTokens.arrowColorHover}: var(--text-secondary-hover);
-                ${_styledcomponents.treeTokens.arrowColorActive}: var(--text-secondary-active);
-                ${_styledcomponents.treeTokens.color}: var(--text-primary);
-                ${_styledcomponents.treeTokens.colorSelected}: var(--text-primary);
-                ${_styledcomponents.treeTokens.itemBackgroundColorSelected}: var(--surface-transparent-secondary);
+                ${_styledcomponents.treeTokens.iconFolderColor}: ${_sdds_scan.textPrimary};
+                ${_styledcomponents.treeTokens.arrowColor}: ${_sdds_scan.textSecondary};
+                ${_styledcomponents.treeTokens.arrowColorHover}: ${_sdds_scan.textSecondaryHover};
+                ${_styledcomponents.treeTokens.arrowColorActive}: ${_sdds_scan.textSecondaryActive};
+                ${_styledcomponents.treeTokens.color}: ${_sdds_scan.textPrimary};
+                ${_styledcomponents.treeTokens.colorSelected}: ${_sdds_scan.textPrimary};
+                ${_styledcomponents.treeTokens.itemBackgroundColorSelected}: ${_sdds_scan.surfaceTransparentSecondary};
                 ${_styledcomponents.treeTokens.itemBackgroundColorPrimary}: transparent;
 
-                ${_styledcomponents.treeTokens.itemBackgroundColorHover}: var(--surface-transparent-secondary-hover);
-                ${_styledcomponents.treeTokens.itemBackgroundColorActive}: var(--surface-transparent-secondary-active);
-                ${_styledcomponents.treeTokens.checkboxBorderColor}: var(--text-secondary);
-                ${_styledcomponents.treeTokens.checkboxBackgroundColor}: var(--text-accent);
+                ${_styledcomponents.treeTokens.itemBackgroundColorHover}: ${_sdds_scan.surfaceTransparentSecondaryHover};
+                ${_styledcomponents.treeTokens.itemBackgroundColorActive}: ${_sdds_scan.surfaceTransparentSecondaryActive};
+                ${_styledcomponents.treeTokens.checkboxBorderColor}: ${_sdds_scan.textSecondary};
+                ${_styledcomponents.treeTokens.checkboxBackgroundColor}: ${_sdds_scan.textAccent};
                 ${_styledcomponents.treeTokens.itemDisabledOpacity}: 0.4;
-                ${_styledcomponents.treeTokens.itemDisabledBorderColor}: var(--text-secondary);
-                ${_styledcomponents.treeTokens.itemDisabledColor}: var(--text-secondary);
-                ${_styledcomponents.treeTokens.itemDraggableBorderColor}: var(--surface-positive);
-                ${_styledcomponents.treeTokens.itemDraggableLineColor}: var(--surface-solid-default);
+                ${_styledcomponents.treeTokens.itemDisabledBorderColor}: ${_sdds_scan.textSecondary};
+                ${_styledcomponents.treeTokens.itemDisabledColor}: ${_sdds_scan.textSecondary};
+                ${_styledcomponents.treeTokens.itemDraggableBorderColor}: ${_sdds_scan.surfacePositive};
+                ${_styledcomponents.treeTokens.itemDraggableLineColor}: ${_sdds_scan.surfaceSolidDefault};
             `
         },
         size: {
@@ -62,12 +63,12 @@ const config = {
                 ${_styledcomponents.treeTokens.checkboxInnerSize}: 1.25rem;
                 ${_styledcomponents.treeTokens.checkboxBorderRadius}: 0.375rem;
 
-                ${_styledcomponents.treeTokens.fontFamily}: var(--plasma-typo-body-l-font-family);
-                ${_styledcomponents.treeTokens.fontSize}: var(--plasma-typo-body-l-font-size);
-                ${_styledcomponents.treeTokens.fontStyle}: var(--plasma-typo-body-l-font-style);
-                ${_styledcomponents.treeTokens.fontWeight}: var(--plasma-typo-body-l-font-weight);
-                ${_styledcomponents.treeTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${_styledcomponents.treeTokens.lineHeight}: var(--plasma-typo-body-l-line-height);
+                ${_styledcomponents.treeTokens.fontFamily}: ${_sdds_scan.bodyL.fontFamily};
+                ${_styledcomponents.treeTokens.fontSize}: ${_sdds_scan.bodyL.fontSize};
+                ${_styledcomponents.treeTokens.fontStyle}: ${_sdds_scan.bodyL.fontStyle};
+                ${_styledcomponents.treeTokens.fontWeight}: ${_sdds_scan.bodyL.fontWeight};
+                ${_styledcomponents.treeTokens.letterSpacing}: ${_sdds_scan.bodyL.letterSpacing};
+                ${_styledcomponents.treeTokens.lineHeight}: ${_sdds_scan.bodyL.lineHeight};
             `,
             l: (0, _styledcomponents.css)`
                 ${_styledcomponents.treeTokens.itemHeight}: 3.5rem;
@@ -93,12 +94,12 @@ const config = {
                 ${_styledcomponents.treeTokens.checkboxInnerSize}: 1.25rem;
                 ${_styledcomponents.treeTokens.checkboxBorderRadius}: 0.375rem;
 
-                ${_styledcomponents.treeTokens.fontFamily}: var(--plasma-typo-body-l-font-family);
-                ${_styledcomponents.treeTokens.fontSize}: var(--plasma-typo-body-l-font-size);
-                ${_styledcomponents.treeTokens.fontStyle}: var(--plasma-typo-body-l-font-style);
-                ${_styledcomponents.treeTokens.fontWeight}: var(--plasma-typo-body-l-font-weight);
-                ${_styledcomponents.treeTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${_styledcomponents.treeTokens.lineHeight}: var(--plasma-typo-body-l-line-height);
+                ${_styledcomponents.treeTokens.fontFamily}: ${_sdds_scan.bodyL.fontFamily};
+                ${_styledcomponents.treeTokens.fontSize}: ${_sdds_scan.bodyL.fontSize};
+                ${_styledcomponents.treeTokens.fontStyle}: ${_sdds_scan.bodyL.fontStyle};
+                ${_styledcomponents.treeTokens.fontWeight}: ${_sdds_scan.bodyL.fontWeight};
+                ${_styledcomponents.treeTokens.letterSpacing}: ${_sdds_scan.bodyL.letterSpacing};
+                ${_styledcomponents.treeTokens.lineHeight}: ${_sdds_scan.bodyL.lineHeight};
             `,
             m: (0, _styledcomponents.css)`
                 ${_styledcomponents.treeTokens.itemHeight}: 3rem;
@@ -124,12 +125,12 @@ const config = {
                 ${_styledcomponents.treeTokens.checkboxInnerSize}: 1.25rem;
                 ${_styledcomponents.treeTokens.checkboxBorderRadius}: 0.375rem;
 
-                ${_styledcomponents.treeTokens.fontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_styledcomponents.treeTokens.fontSize}: var(--plasma-typo-body-m-font-size);
-                ${_styledcomponents.treeTokens.fontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_styledcomponents.treeTokens.fontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${_styledcomponents.treeTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_styledcomponents.treeTokens.lineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_styledcomponents.treeTokens.fontFamily}: ${_sdds_scan.bodyM.fontFamily};
+                ${_styledcomponents.treeTokens.fontSize}: ${_sdds_scan.bodyM.fontSize};
+                ${_styledcomponents.treeTokens.fontStyle}: ${_sdds_scan.bodyM.fontStyle};
+                ${_styledcomponents.treeTokens.fontWeight}: ${_sdds_scan.bodyM.fontWeight};
+                ${_styledcomponents.treeTokens.letterSpacing}: ${_sdds_scan.bodyM.letterSpacing};
+                ${_styledcomponents.treeTokens.lineHeight}: ${_sdds_scan.bodyM.lineHeight};
             `,
             s: (0, _styledcomponents.css)`
                 ${_styledcomponents.treeTokens.itemHeight}: 2.5rem;
@@ -155,12 +156,12 @@ const config = {
                 ${_styledcomponents.treeTokens.checkboxInnerSize}: 1.25rem;
                 ${_styledcomponents.treeTokens.checkboxBorderRadius}: 0.375rem;
 
-                ${_styledcomponents.treeTokens.fontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_styledcomponents.treeTokens.fontSize}: var(--plasma-typo-body-s-font-size);
-                ${_styledcomponents.treeTokens.fontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_styledcomponents.treeTokens.fontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_styledcomponents.treeTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_styledcomponents.treeTokens.lineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_styledcomponents.treeTokens.fontFamily}: ${_sdds_scan.bodyS.fontFamily};
+                ${_styledcomponents.treeTokens.fontSize}: ${_sdds_scan.bodyS.fontSize};
+                ${_styledcomponents.treeTokens.fontStyle}: ${_sdds_scan.bodyS.fontStyle};
+                ${_styledcomponents.treeTokens.fontWeight}: ${_sdds_scan.bodyS.fontWeight};
+                ${_styledcomponents.treeTokens.letterSpacing}: ${_sdds_scan.bodyS.letterSpacing};
+                ${_styledcomponents.treeTokens.lineHeight}: ${_sdds_scan.bodyS.lineHeight};
             `,
             xs: (0, _styledcomponents.css)`
                 ${_styledcomponents.treeTokens.itemHeight}: 2rem;
@@ -186,12 +187,12 @@ const config = {
                 ${_styledcomponents.treeTokens.checkboxInnerSize}: 0.875rem;
                 ${_styledcomponents.treeTokens.checkboxBorderRadius}: 0.25rem;
 
-                ${_styledcomponents.treeTokens.fontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_styledcomponents.treeTokens.fontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_styledcomponents.treeTokens.fontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_styledcomponents.treeTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_styledcomponents.treeTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_styledcomponents.treeTokens.lineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_styledcomponents.treeTokens.fontFamily}: ${_sdds_scan.bodyXS.fontFamily};
+                ${_styledcomponents.treeTokens.fontSize}: ${_sdds_scan.bodyXS.fontSize};
+                ${_styledcomponents.treeTokens.fontStyle}: ${_sdds_scan.bodyXS.fontStyle};
+                ${_styledcomponents.treeTokens.fontWeight}: ${_sdds_scan.bodyXS.fontWeight};
+                ${_styledcomponents.treeTokens.letterSpacing}: ${_sdds_scan.bodyXS.letterSpacing};
+                ${_styledcomponents.treeTokens.lineHeight}: ${_sdds_scan.bodyXS.lineHeight};
             `
         }
     }

package/dist/styled-components/cjs/components/Typography/Body.config.js

@@ -26,6 +26,7 @@ _export(exports, {
     }
 });
 const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const _sdds_scan = require("@salutejs/sdds-themes/tokens/sdds_scan");
 const configL = {
     defaults: {
         size: 'l'
@@ -33,14 +34,14 @@ const configL = {
     variations: {
         size: {
             l: (0, _styledcomponents.css)`
-                ${_styledcomponents.typographyTokens.typoFontFamily}: var(--plasma-typo-body-l-font-family);
-                ${_styledcomponents.typographyTokens.typoFontSize}: var(--plasma-typo-body-l-font-size);
-                ${_styledcomponents.typographyTokens.typoFontStyle}: var(--plasma-typo-body-l-font-style);
-                ${_styledcomponents.typographyTokens.typoFontWeight}: var(--plasma-typo-body-l-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-l-bold-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-l-medium-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${_styledcomponents.typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${_styledcomponents.typographyTokens.typoFontFamily}: ${_sdds_scan.bodyL.fontFamily};
+                ${_styledcomponents.typographyTokens.typoFontSize}: ${_sdds_scan.bodyL.fontSize};
+                ${_styledcomponents.typographyTokens.typoFontStyle}: ${_sdds_scan.bodyL.fontStyle};
+                ${_styledcomponents.typographyTokens.typoFontWeight}: ${_sdds_scan.bodyL.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightBold}: ${_sdds_scan.bodyLBold.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: ${_sdds_scan.bodyLMedium.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: ${_sdds_scan.bodyL.letterSpacing};
+                ${_styledcomponents.typographyTokens.typoFontLineHeight}: ${_sdds_scan.bodyL.lineHeight};
             `
         }
     }
@@ -52,14 +53,14 @@ const configM = {
     variations: {
         size: {
             m: (0, _styledcomponents.css)`
-                ${_styledcomponents.typographyTokens.typoFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_styledcomponents.typographyTokens.typoFontSize}: var(--plasma-typo-body-m-font-size);
-                ${_styledcomponents.typographyTokens.typoFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_styledcomponents.typographyTokens.typoFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-m-bold-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-m-medium-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_styledcomponents.typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_styledcomponents.typographyTokens.typoFontFamily}: ${_sdds_scan.bodyM.fontFamily};
+                ${_styledcomponents.typographyTokens.typoFontSize}: ${_sdds_scan.bodyM.fontSize};
+                ${_styledcomponents.typographyTokens.typoFontStyle}: ${_sdds_scan.bodyM.fontStyle};
+                ${_styledcomponents.typographyTokens.typoFontWeight}: ${_sdds_scan.bodyM.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightBold}: ${_sdds_scan.bodyMBold.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: ${_sdds_scan.bodyMMedium.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: ${_sdds_scan.bodyM.letterSpacing};
+                ${_styledcomponents.typographyTokens.typoFontLineHeight}: ${_sdds_scan.bodyM.lineHeight};
             `
         }
     }
@@ -71,14 +72,14 @@ const configS = {
     variations: {
         size: {
             s: (0, _styledcomponents.css)`
-                ${_styledcomponents.typographyTokens.typoFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_styledcomponents.typographyTokens.typoFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_styledcomponents.typographyTokens.typoFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_styledcomponents.typographyTokens.typoFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-s-bold-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-s-medium-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_styledcomponents.typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_styledcomponents.typographyTokens.typoFontFamily}: ${_sdds_scan.bodyS.fontFamily};
+                ${_styledcomponents.typographyTokens.typoFontSize}: ${_sdds_scan.bodyS.fontSize};
+                ${_styledcomponents.typographyTokens.typoFontStyle}: ${_sdds_scan.bodyS.fontStyle};
+                ${_styledcomponents.typographyTokens.typoFontWeight}: ${_sdds_scan.bodyS.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightBold}: ${_sdds_scan.bodySBold.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: ${_sdds_scan.bodySMedium.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: ${_sdds_scan.bodyS.letterSpacing};
+                ${_styledcomponents.typographyTokens.typoFontLineHeight}: ${_sdds_scan.bodyS.lineHeight};
             `
         }
     }
@@ -90,14 +91,14 @@ const configXS = {
     variations: {
         size: {
             xs: (0, _styledcomponents.css)`
-                ${_styledcomponents.typographyTokens.typoFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_styledcomponents.typographyTokens.typoFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_styledcomponents.typographyTokens.typoFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_styledcomponents.typographyTokens.typoFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xs-bold-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xs-medium-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_styledcomponents.typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_styledcomponents.typographyTokens.typoFontFamily}: ${_sdds_scan.bodyXS.fontFamily};
+                ${_styledcomponents.typographyTokens.typoFontSize}: ${_sdds_scan.bodyXS.fontSize};
+                ${_styledcomponents.typographyTokens.typoFontStyle}: ${_sdds_scan.bodyXS.fontStyle};
+                ${_styledcomponents.typographyTokens.typoFontWeight}: ${_sdds_scan.bodyXS.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightBold}: ${_sdds_scan.bodyXSBold.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: ${_sdds_scan.bodyXSMedium.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: ${_sdds_scan.bodyXS.letterSpacing};
+                ${_styledcomponents.typographyTokens.typoFontLineHeight}: ${_sdds_scan.bodyXS.lineHeight};
             `
         }
     }
@@ -109,14 +110,14 @@ const configXXS = {
     variations: {
         size: {
             xxs: (0, _styledcomponents.css)`
-                ${_styledcomponents.typographyTokens.typoFontFamily}: var(--plasma-typo-body-xxs-font-family);
-                ${_styledcomponents.typographyTokens.typoFontSize}: var(--plasma-typo-body-xxs-font-size);
-                ${_styledcomponents.typographyTokens.typoFontStyle}: var(--plasma-typo-body-xxs-font-style);
-                ${_styledcomponents.typographyTokens.typoFontWeight}: var(--plasma-typo-body-xxs-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xxs-bold-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xxs-medium-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
-                ${_styledcomponents.typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xxs-line-height);
+                ${_styledcomponents.typographyTokens.typoFontFamily}: ${_sdds_scan.bodyXXS.fontFamily};
+                ${_styledcomponents.typographyTokens.typoFontSize}: ${_sdds_scan.bodyXXS.fontSize};
+                ${_styledcomponents.typographyTokens.typoFontStyle}: ${_sdds_scan.bodyXXS.fontStyle};
+                ${_styledcomponents.typographyTokens.typoFontWeight}: ${_sdds_scan.bodyXXS.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightBold}: ${_sdds_scan.bodyXXSBold.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: ${_sdds_scan.bodyXXSMedium.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: ${_sdds_scan.bodyXXS.letterSpacing};
+                ${_styledcomponents.typographyTokens.typoFontLineHeight}: ${_sdds_scan.bodyXXS.lineHeight};
             `
         }
     }

package/dist/styled-components/cjs/components/Typography/Dspl.config.js

@@ -20,6 +20,7 @@ _export(exports, {
     }
 });
 const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const _sdds_scan = require("@salutejs/sdds-themes/tokens/sdds_scan");
 const configL = {
     defaults: {
         size: 'l'
@@ -27,14 +28,14 @@ const configL = {
     variations: {
         size: {
             l: (0, _styledcomponents.css)`
-                ${_styledcomponents.typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-l-font-family);
-                ${_styledcomponents.typographyTokens.typoFontSize}: var(--plasma-typo-dspl-l-font-size);
-                ${_styledcomponents.typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-l-font-style);
-                ${_styledcomponents.typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-l-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-l-bold-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-l-medium-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-l-letter-spacing);
-                ${_styledcomponents.typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-l-line-height);
+                ${_styledcomponents.typographyTokens.typoFontFamily}: ${_sdds_scan.dsplL.fontFamily};
+                ${_styledcomponents.typographyTokens.typoFontSize}: ${_sdds_scan.dsplL.fontSize};
+                ${_styledcomponents.typographyTokens.typoFontStyle}: ${_sdds_scan.dsplL.fontStyle};
+                ${_styledcomponents.typographyTokens.typoFontWeight}: ${_sdds_scan.dsplL.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightBold}: ${_sdds_scan.dsplLBold.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: ${_sdds_scan.dsplLMedium.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: ${_sdds_scan.dsplL.letterSpacing};
+                ${_styledcomponents.typographyTokens.typoFontLineHeight}: ${_sdds_scan.dsplL.lineHeight};
             `
         }
     }
@@ -46,14 +47,14 @@ const configM = {
     variations: {
         size: {
             m: (0, _styledcomponents.css)`
-                ${_styledcomponents.typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-m-font-family);
-                ${_styledcomponents.typographyTokens.typoFontSize}: var(--plasma-typo-dspl-m-font-size);
-                ${_styledcomponents.typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-m-font-style);
-                ${_styledcomponents.typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-m-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-m-bold-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-m-medium-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-m-letter-spacing);
-                ${_styledcomponents.typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-m-line-height);
+                ${_styledcomponents.typographyTokens.typoFontFamily}: ${_sdds_scan.dsplM.fontFamily};
+                ${_styledcomponents.typographyTokens.typoFontSize}: ${_sdds_scan.dsplM.fontSize};
+                ${_styledcomponents.typographyTokens.typoFontStyle}: ${_sdds_scan.dsplM.fontStyle};
+                ${_styledcomponents.typographyTokens.typoFontWeight}: ${_sdds_scan.dsplM.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightBold}: ${_sdds_scan.dsplMBold.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: ${_sdds_scan.dsplMMedium.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: ${_sdds_scan.dsplM.letterSpacing};
+                ${_styledcomponents.typographyTokens.typoFontLineHeight}: ${_sdds_scan.dsplM.lineHeight};
             `
         }
     }
@@ -65,14 +66,14 @@ const configS = {
     variations: {
         size: {
             s: (0, _styledcomponents.css)`
-                ${_styledcomponents.typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-s-font-family);
-                ${_styledcomponents.typographyTokens.typoFontSize}: var(--plasma-typo-dspl-s-font-size);
-                ${_styledcomponents.typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-s-font-style);
-                ${_styledcomponents.typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-s-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-s-bold-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-s-medium-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-s-letter-spacing);
-                ${_styledcomponents.typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-s-line-height);
+                ${_styledcomponents.typographyTokens.typoFontFamily}: ${_sdds_scan.dsplS.fontFamily};
+                ${_styledcomponents.typographyTokens.typoFontSize}: ${_sdds_scan.dsplS.fontSize};
+                ${_styledcomponents.typographyTokens.typoFontStyle}: ${_sdds_scan.dsplS.fontStyle};
+                ${_styledcomponents.typographyTokens.typoFontWeight}: ${_sdds_scan.dsplS.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightBold}: ${_sdds_scan.dsplSBold.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: ${_sdds_scan.dsplSMedium.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: ${_sdds_scan.dsplS.letterSpacing};
+                ${_styledcomponents.typographyTokens.typoFontLineHeight}: ${_sdds_scan.dsplS.lineHeight};
             `
         }
     }

package/dist/styled-components/cjs/components/Typography/Heading.config.js

@@ -29,6 +29,7 @@ _export(exports, {
     }
 });
 const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const _sdds_scan = require("@salutejs/sdds-themes/tokens/sdds_scan");
 const configH1 = {
     defaults: {
         size: 'h1'
@@ -36,14 +37,14 @@ const configH1 = {
     variations: {
         size: {
             h1: (0, _styledcomponents.css)`
-                ${_styledcomponents.typographyTokens.typoFontFamily}: var(--plasma-typo-h1-font-family);
-                ${_styledcomponents.typographyTokens.typoFontSize}: var(--plasma-typo-h1-font-size);
-                ${_styledcomponents.typographyTokens.typoFontStyle}: var(--plasma-typo-h1-font-style);
-                ${_styledcomponents.typographyTokens.typoFontWeight}: var(--plasma-typo-h1-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightBold}: var(--plasma-typo-h1-bold-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h1-medium-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h1-letter-spacing);
-                ${_styledcomponents.typographyTokens.typoFontLineHeight}: var(--plasma-typo-h1-line-height);
+                ${_styledcomponents.typographyTokens.typoFontFamily}: ${_sdds_scan.h1.fontFamily};
+                ${_styledcomponents.typographyTokens.typoFontSize}: ${_sdds_scan.h1.fontSize};
+                ${_styledcomponents.typographyTokens.typoFontStyle}: ${_sdds_scan.h1.fontStyle};
+                ${_styledcomponents.typographyTokens.typoFontWeight}: ${_sdds_scan.h1.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightBold}: ${_sdds_scan.h1Bold.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: ${_sdds_scan.h1Medium.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: ${_sdds_scan.h1.letterSpacing};
+                ${_styledcomponents.typographyTokens.typoFontLineHeight}: ${_sdds_scan.h1.lineHeight};
             `
         }
     }
@@ -55,14 +56,14 @@ const configH2 = {
     variations: {
         size: {
             h2: (0, _styledcomponents.css)`
-                ${_styledcomponents.typographyTokens.typoFontFamily}: var(--plasma-typo-h2-font-family);
-                ${_styledcomponents.typographyTokens.typoFontSize}: var(--plasma-typo-h2-font-size);
-                ${_styledcomponents.typographyTokens.typoFontStyle}: var(--plasma-typo-h2-font-style);
-                ${_styledcomponents.typographyTokens.typoFontWeight}: var(--plasma-typo-h2-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightBold}: var(--plasma-typo-h2-bold-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h2-medium-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h2-letter-spacing);
-                ${_styledcomponents.typographyTokens.typoFontLineHeight}: var(--plasma-typo-h2-line-height);
+                ${_styledcomponents.typographyTokens.typoFontFamily}: ${_sdds_scan.h2.fontFamily};
+                ${_styledcomponents.typographyTokens.typoFontSize}: ${_sdds_scan.h2.fontSize};
+                ${_styledcomponents.typographyTokens.typoFontStyle}: ${_sdds_scan.h2.fontStyle};
+                ${_styledcomponents.typographyTokens.typoFontWeight}: ${_sdds_scan.h2.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightBold}: ${_sdds_scan.h2Bold.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: ${_sdds_scan.h2Medium.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: ${_sdds_scan.h2.letterSpacing};
+                ${_styledcomponents.typographyTokens.typoFontLineHeight}: ${_sdds_scan.h2.lineHeight};
             `
         }
     }
@@ -74,14 +75,14 @@ const configH3 = {
     variations: {
         size: {
             h3: (0, _styledcomponents.css)`
-                ${_styledcomponents.typographyTokens.typoFontFamily}: var(--plasma-typo-h3-font-family);
-                ${_styledcomponents.typographyTokens.typoFontSize}: var(--plasma-typo-h3-font-size);
-                ${_styledcomponents.typographyTokens.typoFontStyle}: var(--plasma-typo-h3-font-style);
-                ${_styledcomponents.typographyTokens.typoFontWeight}: var(--plasma-typo-h3-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightBold}: var(--plasma-typo-h3-bold-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h3-medium-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing);
-                ${_styledcomponents.typographyTokens.typoFontLineHeight}: var(--plasma-typo-h3-line-height);
+                ${_styledcomponents.typographyTokens.typoFontFamily}: ${_sdds_scan.h3.fontFamily};
+                ${_styledcomponents.typographyTokens.typoFontSize}: ${_sdds_scan.h3.fontSize};
+                ${_styledcomponents.typographyTokens.typoFontStyle}: ${_sdds_scan.h3.fontStyle};
+                ${_styledcomponents.typographyTokens.typoFontWeight}: ${_sdds_scan.h3.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightBold}: ${_sdds_scan.h3Bold.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: ${_sdds_scan.h3Medium.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: ${_sdds_scan.h3.letterSpacing};
+                ${_styledcomponents.typographyTokens.typoFontLineHeight}: ${_sdds_scan.h3.lineHeight};
             `
         }
     }
@@ -93,14 +94,14 @@ const configH4 = {
     variations: {
         size: {
             h4: (0, _styledcomponents.css)`
-                ${_styledcomponents.typographyTokens.typoFontFamily}: var(--plasma-typo-h4-font-family);
-                ${_styledcomponents.typographyTokens.typoFontSize}: var(--plasma-typo-h4-font-size);
-                ${_styledcomponents.typographyTokens.typoFontStyle}: var(--plasma-typo-h4-font-style);
-                ${_styledcomponents.typographyTokens.typoFontWeight}: var(--plasma-typo-h4-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightBold}: var(--plasma-typo-h4-bold-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h4-medium-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing);
-                ${_styledcomponents.typographyTokens.typoFontLineHeight}: var(--plasma-typo-h4-line-height);
+                ${_styledcomponents.typographyTokens.typoFontFamily}: ${_sdds_scan.h4.fontFamily};
+                ${_styledcomponents.typographyTokens.typoFontSize}: ${_sdds_scan.h4.fontSize};
+                ${_styledcomponents.typographyTokens.typoFontStyle}: ${_sdds_scan.h4.fontStyle};
+                ${_styledcomponents.typographyTokens.typoFontWeight}: ${_sdds_scan.h4.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightBold}: ${_sdds_scan.h4Bold.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: ${_sdds_scan.h4Medium.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: ${_sdds_scan.h4.letterSpacing};
+                ${_styledcomponents.typographyTokens.typoFontLineHeight}: ${_sdds_scan.h4.lineHeight};
             `
         }
     }
@@ -112,14 +113,14 @@ const configH5 = {
     variations: {
         size: {
             h5: (0, _styledcomponents.css)`
-                ${_styledcomponents.typographyTokens.typoFontFamily}: var(--plasma-typo-h5-font-family);
-                ${_styledcomponents.typographyTokens.typoFontSize}: var(--plasma-typo-h5-font-size);
-                ${_styledcomponents.typographyTokens.typoFontStyle}: var(--plasma-typo-h5-font-style);
-                ${_styledcomponents.typographyTokens.typoFontWeight}: var(--plasma-typo-h5-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightBold}: var(--plasma-typo-h5-bold-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h5-medium-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing);
-                ${_styledcomponents.typographyTokens.typoFontLineHeight}: var(--plasma-typo-h5-line-height);
+                ${_styledcomponents.typographyTokens.typoFontFamily}: ${_sdds_scan.h5.fontFamily};
+                ${_styledcomponents.typographyTokens.typoFontSize}: ${_sdds_scan.h5.fontSize};
+                ${_styledcomponents.typographyTokens.typoFontStyle}: ${_sdds_scan.h5.fontStyle};
+                ${_styledcomponents.typographyTokens.typoFontWeight}: ${_sdds_scan.h5.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightBold}: ${_sdds_scan.h5Bold.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: ${_sdds_scan.h5Medium.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: ${_sdds_scan.h5.letterSpacing};
+                ${_styledcomponents.typographyTokens.typoFontLineHeight}: ${_sdds_scan.h5.lineHeight};
             `
         }
     }
@@ -131,14 +132,14 @@ const configH6 = {
     variations: {
         size: {
             h6: (0, _styledcomponents.css)`
-                ${_styledcomponents.typographyTokens.typoFontFamily}: var(--plasma-typo-h6-font-family);
-                ${_styledcomponents.typographyTokens.typoFontSize}: var(--plasma-typo-h6-font-size);
-                ${_styledcomponents.typographyTokens.typoFontStyle}: var(--plasma-typo-h6-font-style);
-                ${_styledcomponents.typographyTokens.typoFontWeight}: var(--plasma-typo-h6-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing);
-                ${_styledcomponents.typographyTokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height);
+                ${_styledcomponents.typographyTokens.typoFontFamily}: ${_sdds_scan.h6.fontFamily};
+                ${_styledcomponents.typographyTokens.typoFontSize}: ${_sdds_scan.h6.fontSize};
+                ${_styledcomponents.typographyTokens.typoFontStyle}: ${_sdds_scan.h6.fontStyle};
+                ${_styledcomponents.typographyTokens.typoFontWeight}: ${_sdds_scan.h6.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightBold}: ${_sdds_scan.h6Bold.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: ${_sdds_scan.h6Medium.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: ${_sdds_scan.h6.letterSpacing};
+                ${_styledcomponents.typographyTokens.typoFontLineHeight}: ${_sdds_scan.h6.lineHeight};
             `
         }
     }