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

package/dist/styled-components/cjs/components/LinkButton/LinkButton.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,64 +18,64 @@ const config = {
     variations: {
         view: {
             default: (0, _styledcomponents.css)`
-                ${_styledcomponents.linkButtonTokens.linkButtonIconColor}: var(--text-primary);
-                ${_styledcomponents.linkButtonTokens.linkButtonTextColor}: var(--text-primary);
-                ${_styledcomponents.linkButtonTokens.linkButtonBackgroundColor}: var(--surface-clear);
-                ${_styledcomponents.linkButtonTokens.linkButtonIconColorHover}: var(--text-primary-hover);
-                ${_styledcomponents.linkButtonTokens.linkButtonIconColorActive}: var(--text-primary-active);
-                ${_styledcomponents.linkButtonTokens.linkButtonFocusColor}: var(--surface-accent);
-                ${_styledcomponents.linkButtonTokens.linkButtonTextColorHover}: var(--text-primary-hover);
-                ${_styledcomponents.linkButtonTokens.linkButtonTextColorActive}: var(--text-primary-active);
+                ${_styledcomponents.linkButtonTokens.linkButtonIconColor}: ${_sdds_scan.textPrimary};
+                ${_styledcomponents.linkButtonTokens.linkButtonTextColor}: ${_sdds_scan.textPrimary};
+                ${_styledcomponents.linkButtonTokens.linkButtonBackgroundColor}: ${_sdds_scan.surfaceClear};
+                ${_styledcomponents.linkButtonTokens.linkButtonIconColorHover}: ${_sdds_scan.textPrimaryHover};
+                ${_styledcomponents.linkButtonTokens.linkButtonIconColorActive}: ${_sdds_scan.textPrimaryActive};
+                ${_styledcomponents.linkButtonTokens.linkButtonFocusColor}: ${_sdds_scan.surfaceAccent};
+                ${_styledcomponents.linkButtonTokens.linkButtonTextColorHover}: ${_sdds_scan.textPrimaryHover};
+                ${_styledcomponents.linkButtonTokens.linkButtonTextColorActive}: ${_sdds_scan.textPrimaryActive};
             `,
             accent: (0, _styledcomponents.css)`
-                ${_styledcomponents.linkButtonTokens.linkButtonIconColor}: var(--text-accent);
-                ${_styledcomponents.linkButtonTokens.linkButtonTextColor}: var(--text-accent);
-                ${_styledcomponents.linkButtonTokens.linkButtonBackgroundColor}: var(--surface-clear);
-                ${_styledcomponents.linkButtonTokens.linkButtonIconColorHover}: var(--text-accent-hover);
-                ${_styledcomponents.linkButtonTokens.linkButtonIconColorActive}: var(--text-accent-active);
-                ${_styledcomponents.linkButtonTokens.linkButtonFocusColor}: var(--surface-accent);
-                ${_styledcomponents.linkButtonTokens.linkButtonTextColorHover}: var(--text-accent-hover);
-                ${_styledcomponents.linkButtonTokens.linkButtonTextColorActive}: var(--text-accent-active);
+                ${_styledcomponents.linkButtonTokens.linkButtonIconColor}: ${_sdds_scan.textAccent};
+                ${_styledcomponents.linkButtonTokens.linkButtonTextColor}: ${_sdds_scan.textAccent};
+                ${_styledcomponents.linkButtonTokens.linkButtonBackgroundColor}: ${_sdds_scan.surfaceClear};
+                ${_styledcomponents.linkButtonTokens.linkButtonIconColorHover}: ${_sdds_scan.textAccentHover};
+                ${_styledcomponents.linkButtonTokens.linkButtonIconColorActive}: ${_sdds_scan.textAccentActive};
+                ${_styledcomponents.linkButtonTokens.linkButtonFocusColor}: ${_sdds_scan.surfaceAccent};
+                ${_styledcomponents.linkButtonTokens.linkButtonTextColorHover}: ${_sdds_scan.textAccentHover};
+                ${_styledcomponents.linkButtonTokens.linkButtonTextColorActive}: ${_sdds_scan.textAccentActive};
             `,
             positive: (0, _styledcomponents.css)`
-                ${_styledcomponents.linkButtonTokens.linkButtonIconColor}: var(--text-positive);
-                ${_styledcomponents.linkButtonTokens.linkButtonTextColor}: var(--text-positive);
-                ${_styledcomponents.linkButtonTokens.linkButtonBackgroundColor}: var(--surface-clear);
-                ${_styledcomponents.linkButtonTokens.linkButtonIconColorHover}: var(--text-positive-hover);
-                ${_styledcomponents.linkButtonTokens.linkButtonIconColorActive}: var(--text-positive-active);
-                ${_styledcomponents.linkButtonTokens.linkButtonFocusColor}: var(--surface-accent);
-                ${_styledcomponents.linkButtonTokens.linkButtonTextColorHover}: var(--text-positive-hover);
-                ${_styledcomponents.linkButtonTokens.linkButtonTextColorActive}: var(--text-positive-active);
+                ${_styledcomponents.linkButtonTokens.linkButtonIconColor}: ${_sdds_scan.textPositive};
+                ${_styledcomponents.linkButtonTokens.linkButtonTextColor}: ${_sdds_scan.textPositive};
+                ${_styledcomponents.linkButtonTokens.linkButtonBackgroundColor}: ${_sdds_scan.surfaceClear};
+                ${_styledcomponents.linkButtonTokens.linkButtonIconColorHover}: ${_sdds_scan.textPositiveHover};
+                ${_styledcomponents.linkButtonTokens.linkButtonIconColorActive}: ${_sdds_scan.textPositiveActive};
+                ${_styledcomponents.linkButtonTokens.linkButtonFocusColor}: ${_sdds_scan.surfaceAccent};
+                ${_styledcomponents.linkButtonTokens.linkButtonTextColorHover}: ${_sdds_scan.textPositiveHover};
+                ${_styledcomponents.linkButtonTokens.linkButtonTextColorActive}: ${_sdds_scan.textPositiveActive};
             `,
             warning: (0, _styledcomponents.css)`
-                ${_styledcomponents.linkButtonTokens.linkButtonIconColor}: var(--text-warning);
-                ${_styledcomponents.linkButtonTokens.linkButtonTextColor}: var(--text-warning);
-                ${_styledcomponents.linkButtonTokens.linkButtonBackgroundColor}: var(--surface-clear);
-                ${_styledcomponents.linkButtonTokens.linkButtonIconColorHover}: var(--text-warning-hover);
-                ${_styledcomponents.linkButtonTokens.linkButtonIconColorActive}: var(--text-warning-active);
-                ${_styledcomponents.linkButtonTokens.linkButtonFocusColor}: var(--surface-accent);
-                ${_styledcomponents.linkButtonTokens.linkButtonTextColorHover}: var(--text-warning-hover);
-                ${_styledcomponents.linkButtonTokens.linkButtonTextColorActive}: var(--text-warning-active);
+                ${_styledcomponents.linkButtonTokens.linkButtonIconColor}: ${_sdds_scan.textWarning};
+                ${_styledcomponents.linkButtonTokens.linkButtonTextColor}: ${_sdds_scan.textWarning};
+                ${_styledcomponents.linkButtonTokens.linkButtonBackgroundColor}: ${_sdds_scan.surfaceClear};
+                ${_styledcomponents.linkButtonTokens.linkButtonIconColorHover}: ${_sdds_scan.textWarningHover};
+                ${_styledcomponents.linkButtonTokens.linkButtonIconColorActive}: ${_sdds_scan.textWarningActive};
+                ${_styledcomponents.linkButtonTokens.linkButtonFocusColor}: ${_sdds_scan.surfaceAccent};
+                ${_styledcomponents.linkButtonTokens.linkButtonTextColorHover}: ${_sdds_scan.textWarningHover};
+                ${_styledcomponents.linkButtonTokens.linkButtonTextColorActive}: ${_sdds_scan.textWarningActive};
             `,
             negative: (0, _styledcomponents.css)`
-                ${_styledcomponents.linkButtonTokens.linkButtonIconColor}: var(--text-negative);
-                ${_styledcomponents.linkButtonTokens.linkButtonTextColor}: var(--text-negative);
-                ${_styledcomponents.linkButtonTokens.linkButtonBackgroundColor}: var(--surface-clear);
-                ${_styledcomponents.linkButtonTokens.linkButtonIconColorHover}: var(--text-negative-hover);
-                ${_styledcomponents.linkButtonTokens.linkButtonIconColorActive}: var(--text-negative-active);
-                ${_styledcomponents.linkButtonTokens.linkButtonFocusColor}: var(--surface-accent);
-                ${_styledcomponents.linkButtonTokens.linkButtonTextColorHover}: var(--text-negative-hover);
-                ${_styledcomponents.linkButtonTokens.linkButtonTextColorActive}: var(--text-negative-active);
+                ${_styledcomponents.linkButtonTokens.linkButtonIconColor}: ${_sdds_scan.textNegative};
+                ${_styledcomponents.linkButtonTokens.linkButtonTextColor}: ${_sdds_scan.textNegative};
+                ${_styledcomponents.linkButtonTokens.linkButtonBackgroundColor}: ${_sdds_scan.surfaceClear};
+                ${_styledcomponents.linkButtonTokens.linkButtonIconColorHover}: ${_sdds_scan.textNegativeHover};
+                ${_styledcomponents.linkButtonTokens.linkButtonIconColorActive}: ${_sdds_scan.textNegativeActive};
+                ${_styledcomponents.linkButtonTokens.linkButtonFocusColor}: ${_sdds_scan.surfaceAccent};
+                ${_styledcomponents.linkButtonTokens.linkButtonTextColorHover}: ${_sdds_scan.textNegativeHover};
+                ${_styledcomponents.linkButtonTokens.linkButtonTextColorActive}: ${_sdds_scan.textNegativeActive};
             `,
             info: (0, _styledcomponents.css)`
-                ${_styledcomponents.linkButtonTokens.linkButtonIconColor}: var(--text-info);
-                ${_styledcomponents.linkButtonTokens.linkButtonTextColor}: var(--text-info);
-                ${_styledcomponents.linkButtonTokens.linkButtonBackgroundColor}: var(--surface-clear);
-                ${_styledcomponents.linkButtonTokens.linkButtonIconColorHover}: var(--text-info-hover);
-                ${_styledcomponents.linkButtonTokens.linkButtonIconColorActive}: var(--text-info-active);
-                ${_styledcomponents.linkButtonTokens.linkButtonFocusColor}: var(--surface-accent);
-                ${_styledcomponents.linkButtonTokens.linkButtonTextColorHover}: var(--text-info-hover);
-                ${_styledcomponents.linkButtonTokens.linkButtonTextColorActive}: var(--text-info-active);
+                ${_styledcomponents.linkButtonTokens.linkButtonIconColor}: ${_sdds_scan.textInfo};
+                ${_styledcomponents.linkButtonTokens.linkButtonTextColor}: ${_sdds_scan.textInfo};
+                ${_styledcomponents.linkButtonTokens.linkButtonBackgroundColor}: ${_sdds_scan.surfaceClear};
+                ${_styledcomponents.linkButtonTokens.linkButtonIconColorHover}: ${_sdds_scan.textInfoHover};
+                ${_styledcomponents.linkButtonTokens.linkButtonIconColorActive}: ${_sdds_scan.textInfoActive};
+                ${_styledcomponents.linkButtonTokens.linkButtonFocusColor}: ${_sdds_scan.surfaceAccent};
+                ${_styledcomponents.linkButtonTokens.linkButtonTextColorHover}: ${_sdds_scan.textInfoHover};
+                ${_styledcomponents.linkButtonTokens.linkButtonTextColorActive}: ${_sdds_scan.textInfoActive};
             `
         },
         size: {
@@ -82,12 +83,12 @@ const config = {
                 ${_styledcomponents.linkButtonTokens.linkButtonHeight}: 3rem;
                 ${_styledcomponents.linkButtonTokens.linkButtonPadding}: 0.75rem 0;
                 ${_styledcomponents.linkButtonTokens.linkButtonRadius}: 0.75rem;
-                ${_styledcomponents.linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_styledcomponents.linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-m-font-size);
-                ${_styledcomponents.linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_styledcomponents.linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
-                ${_styledcomponents.linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_styledcomponents.linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_styledcomponents.linkButtonTokens.linkButtonFontFamily}: ${_sdds_scan.bodyM.fontFamily};
+                ${_styledcomponents.linkButtonTokens.linkButtonFontSize}: ${_sdds_scan.bodyM.fontSize};
+                ${_styledcomponents.linkButtonTokens.linkButtonFontStyle}: ${_sdds_scan.bodyM.fontStyle};
+                ${_styledcomponents.linkButtonTokens.linkButtonFontWeight}: ${_sdds_scan.bodyMBold.fontWeight};
+                ${_styledcomponents.linkButtonTokens.linkButtonLetterSpacing}: ${_sdds_scan.bodyM.letterSpacing};
+                ${_styledcomponents.linkButtonTokens.linkButtonLineHeight}: ${_sdds_scan.bodyM.lineHeight};
 
                 ${_styledcomponents.linkButtonTokens.linkButtonSpinnerSize}: 1.375rem;
                 ${_styledcomponents.linkButtonTokens.linkButtonSpinnerColor}: inherit;
@@ -101,12 +102,12 @@ const config = {
                 ${_styledcomponents.linkButtonTokens.linkButtonHeight}: 2.5rem;
                 ${_styledcomponents.linkButtonTokens.linkButtonPadding}: 0.5rem 0;
                 ${_styledcomponents.linkButtonTokens.linkButtonRadius}: 0.625rem;
-                ${_styledcomponents.linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_styledcomponents.linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_styledcomponents.linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_styledcomponents.linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${_styledcomponents.linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_styledcomponents.linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_styledcomponents.linkButtonTokens.linkButtonFontFamily}: ${_sdds_scan.bodyS.fontFamily};
+                ${_styledcomponents.linkButtonTokens.linkButtonFontSize}: ${_sdds_scan.bodyS.fontSize};
+                ${_styledcomponents.linkButtonTokens.linkButtonFontStyle}: ${_sdds_scan.bodyS.fontStyle};
+                ${_styledcomponents.linkButtonTokens.linkButtonFontWeight}: ${_sdds_scan.bodySBold.fontWeight};
+                ${_styledcomponents.linkButtonTokens.linkButtonLetterSpacing}: ${_sdds_scan.bodyS.letterSpacing};
+                ${_styledcomponents.linkButtonTokens.linkButtonLineHeight}: ${_sdds_scan.bodyS.lineHeight};
 
                 ${_styledcomponents.linkButtonTokens.linkButtonSpinnerSize}: 1.375rem;
                 ${_styledcomponents.linkButtonTokens.linkButtonSpinnerColor}: inherit;
@@ -120,12 +121,12 @@ const config = {
                 ${_styledcomponents.linkButtonTokens.linkButtonHeight}: 2rem;
                 ${_styledcomponents.linkButtonTokens.linkButtonPadding}: 0.5rem 0;
                 ${_styledcomponents.linkButtonTokens.linkButtonRadius}: 0.5rem;
-                ${_styledcomponents.linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_styledcomponents.linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_styledcomponents.linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_styledcomponents.linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight);
-                ${_styledcomponents.linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_styledcomponents.linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_styledcomponents.linkButtonTokens.linkButtonFontFamily}: ${_sdds_scan.bodyXS.fontFamily};
+                ${_styledcomponents.linkButtonTokens.linkButtonFontSize}: ${_sdds_scan.bodyXS.fontSize};
+                ${_styledcomponents.linkButtonTokens.linkButtonFontStyle}: ${_sdds_scan.bodyXS.fontStyle};
+                ${_styledcomponents.linkButtonTokens.linkButtonFontWeight}: ${_sdds_scan.bodyXSBold.fontWeight};
+                ${_styledcomponents.linkButtonTokens.linkButtonLetterSpacing}: ${_sdds_scan.bodyXS.letterSpacing};
+                ${_styledcomponents.linkButtonTokens.linkButtonLineHeight}: ${_sdds_scan.bodyXS.lineHeight};
 
                 ${_styledcomponents.linkButtonTokens.linkButtonSpinnerSize}: 1rem;
                 ${_styledcomponents.linkButtonTokens.linkButtonSpinnerColor}: inherit;

package/dist/styled-components/cjs/components/List/List.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,13 +18,13 @@ const config = {
     variations: {
         view: {
             default: (0, _styledcomponents.css)`
-                ${_styledcomponents.listTokens.listItemColor}: var(--text-primary);
-                ${_styledcomponents.listTokens.listItemColorHover}: var(--text-primary);
+                ${_styledcomponents.listTokens.listItemColor}: ${_sdds_scan.textPrimary};
+                ${_styledcomponents.listTokens.listItemColorHover}: ${_sdds_scan.textPrimary};
                 ${_styledcomponents.listTokens.listItemBackground}: transparent;
-                ${_styledcomponents.listTokens.listItemBackgroundHover}: var(--surface-transparent-secondary);
+                ${_styledcomponents.listTokens.listItemBackgroundHover}: ${_sdds_scan.surfaceTransparentSecondary};
                 ${_styledcomponents.listTokens.listItemBorderColor}: transparent;
                 ${_styledcomponents.listTokens.listItemBorderColorHover}: transparent;
-                ${_styledcomponents.listTokens.listItemFocusColor}: var(--surface-accent);
+                ${_styledcomponents.listTokens.listItemFocusColor}: ${_sdds_scan.surfaceAccent};
                 ${_styledcomponents.listTokens.listDisabledOpacity}: 0.4;
             `
         },
@@ -38,12 +39,12 @@ const config = {
                 ${_styledcomponents.listTokens.listItemGap}: 0.375rem;
                 ${_styledcomponents.listTokens.listItemTightDifference}: 0.25rem;
 
-                ${_styledcomponents.listTokens.listItemFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_styledcomponents.listTokens.listItemFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_styledcomponents.listTokens.listItemFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_styledcomponents.listTokens.listItemFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_styledcomponents.listTokens.listItemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_styledcomponents.listTokens.listItemLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_styledcomponents.listTokens.listItemFontFamily}: ${_sdds_scan.bodyS.fontFamily};
+                ${_styledcomponents.listTokens.listItemFontSize}: ${_sdds_scan.bodyS.fontSize};
+                ${_styledcomponents.listTokens.listItemFontStyle}: ${_sdds_scan.bodyS.fontStyle};
+                ${_styledcomponents.listTokens.listItemFontWeight}: ${_sdds_scan.bodyS.fontWeight};
+                ${_styledcomponents.listTokens.listItemLetterSpacing}: ${_sdds_scan.bodyS.letterSpacing};
+                ${_styledcomponents.listTokens.listItemLineHeight}: ${_sdds_scan.bodyS.lineHeight};
             `,
             m: (0, _styledcomponents.css)`
                 ${_styledcomponents.listTokens.listItemPaddingTop}: 0.75rem;
@@ -55,12 +56,12 @@ const config = {
                 ${_styledcomponents.listTokens.listItemGap}: 0.5rem;
                 ${_styledcomponents.listTokens.listItemTightDifference}: 0.25rem;
 
-                ${_styledcomponents.listTokens.listItemFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_styledcomponents.listTokens.listItemFontSize}: var(--plasma-typo-body-m-font-size);
-                ${_styledcomponents.listTokens.listItemFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_styledcomponents.listTokens.listItemFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${_styledcomponents.listTokens.listItemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_styledcomponents.listTokens.listItemLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_styledcomponents.listTokens.listItemFontFamily}: ${_sdds_scan.bodyM.fontFamily};
+                ${_styledcomponents.listTokens.listItemFontSize}: ${_sdds_scan.bodyM.fontSize};
+                ${_styledcomponents.listTokens.listItemFontStyle}: ${_sdds_scan.bodyM.fontStyle};
+                ${_styledcomponents.listTokens.listItemFontWeight}: ${_sdds_scan.bodyM.fontWeight};
+                ${_styledcomponents.listTokens.listItemLetterSpacing}: ${_sdds_scan.bodyM.letterSpacing};
+                ${_styledcomponents.listTokens.listItemLineHeight}: ${_sdds_scan.bodyM.lineHeight};
             `,
             l: (0, _styledcomponents.css)`
                 ${_styledcomponents.listTokens.listItemPaddingTop}: 1rem;
@@ -72,12 +73,12 @@ const config = {
                 ${_styledcomponents.listTokens.listItemGap}: 0.5rem;
                 ${_styledcomponents.listTokens.listItemTightDifference}: 0.25rem;
 
-                ${_styledcomponents.listTokens.listItemFontFamily}: var(--plasma-typo-body-l-font-family);
-                ${_styledcomponents.listTokens.listItemFontSize}: var(--plasma-typo-body-l-font-size);
-                ${_styledcomponents.listTokens.listItemFontStyle}: var(--plasma-typo-body-l-font-style);
-                ${_styledcomponents.listTokens.listItemFontWeight}: var(--plasma-typo-body-l-font-weight);
-                ${_styledcomponents.listTokens.listItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${_styledcomponents.listTokens.listItemLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${_styledcomponents.listTokens.listItemFontFamily}: ${_sdds_scan.bodyL.fontFamily};
+                ${_styledcomponents.listTokens.listItemFontSize}: ${_sdds_scan.bodyL.fontSize};
+                ${_styledcomponents.listTokens.listItemFontStyle}: ${_sdds_scan.bodyL.fontStyle};
+                ${_styledcomponents.listTokens.listItemFontWeight}: ${_sdds_scan.bodyL.fontWeight};
+                ${_styledcomponents.listTokens.listItemLetterSpacing}: ${_sdds_scan.bodyL.letterSpacing};
+                ${_styledcomponents.listTokens.listItemLineHeight}: ${_sdds_scan.bodyL.lineHeight};
             `
         },
         disabled: {

package/dist/styled-components/cjs/components/Loader/Loader.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,67 +18,67 @@ const config = {
     variations: {
         view: {
             default: (0, _styledcomponents.css)`
-                ${_styledcomponents.loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary);
-                ${_styledcomponents.loaderTokens.progressBarCircularStroke}: var(--surface-solid-default);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentColor}: var(--text-primary);
+                ${_styledcomponents.loaderTokens.progressBarCircularBackgroundStroke}: ${_sdds_scan.surfaceTransparentTertiary};
+                ${_styledcomponents.loaderTokens.progressBarCircularStroke}: ${_sdds_scan.surfaceSolidDefault};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentColor}: ${_sdds_scan.textPrimary};
 
-                ${_styledcomponents.loaderTokens.spinnerColor}: var(--text-primary);
+                ${_styledcomponents.loaderTokens.spinnerColor}: ${_sdds_scan.textPrimary};
 
-                ${_styledcomponents.loaderTokens.overlayColor}: var(--overlay-soft);
+                ${_styledcomponents.loaderTokens.overlayColor}: ${_sdds_scan.overlaySoft};
             `,
             secondary: (0, _styledcomponents.css)`
-                ${_styledcomponents.loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary);
-                ${_styledcomponents.loaderTokens.progressBarCircularStroke}: var(--surface-transparent-secondary);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentColor}: var(--text-primary);
+                ${_styledcomponents.loaderTokens.progressBarCircularBackgroundStroke}: ${_sdds_scan.surfaceTransparentTertiary};
+                ${_styledcomponents.loaderTokens.progressBarCircularStroke}: ${_sdds_scan.surfaceTransparentSecondary};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentColor}: ${_sdds_scan.textPrimary};
 
-                ${_styledcomponents.loaderTokens.spinnerColor}: var(--text-secondary);
+                ${_styledcomponents.loaderTokens.spinnerColor}: ${_sdds_scan.textSecondary};
 
-                ${_styledcomponents.loaderTokens.overlayColor}: var(--overlay-soft);
+                ${_styledcomponents.loaderTokens.overlayColor}: ${_sdds_scan.overlaySoft};
             `,
             accent: (0, _styledcomponents.css)`
-                ${_styledcomponents.loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary);
-                ${_styledcomponents.loaderTokens.progressBarCircularStroke}: var(--surface-accent);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentColor}: var(--text-primary);
+                ${_styledcomponents.loaderTokens.progressBarCircularBackgroundStroke}: ${_sdds_scan.surfaceTransparentTertiary};
+                ${_styledcomponents.loaderTokens.progressBarCircularStroke}: ${_sdds_scan.surfaceAccent};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentColor}: ${_sdds_scan.textPrimary};
 
-                ${_styledcomponents.loaderTokens.spinnerColor}: var(--text-accent);
+                ${_styledcomponents.loaderTokens.spinnerColor}: ${_sdds_scan.textAccent};
 
-                ${_styledcomponents.loaderTokens.overlayColor}: var(--overlay-soft);
+                ${_styledcomponents.loaderTokens.overlayColor}: ${_sdds_scan.overlaySoft};
             `,
             positive: (0, _styledcomponents.css)`
-                ${_styledcomponents.loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary);
-                ${_styledcomponents.loaderTokens.progressBarCircularStroke}: var(--surface-positive);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentColor}: var(--text-primary);
+                ${_styledcomponents.loaderTokens.progressBarCircularBackgroundStroke}: ${_sdds_scan.surfaceTransparentTertiary};
+                ${_styledcomponents.loaderTokens.progressBarCircularStroke}: ${_sdds_scan.surfacePositive};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentColor}: ${_sdds_scan.textPrimary};
 
-                ${_styledcomponents.loaderTokens.spinnerColor}: var(--text-positive);
+                ${_styledcomponents.loaderTokens.spinnerColor}: ${_sdds_scan.textPositive};
 
-                ${_styledcomponents.loaderTokens.overlayColor}: var(--overlay-soft);
+                ${_styledcomponents.loaderTokens.overlayColor}: ${_sdds_scan.overlaySoft};
             `,
             warning: (0, _styledcomponents.css)`
-                ${_styledcomponents.loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary);
-                ${_styledcomponents.loaderTokens.progressBarCircularStroke}: var(--surface-warning);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentColor}: var(--text-primary);
+                ${_styledcomponents.loaderTokens.progressBarCircularBackgroundStroke}: ${_sdds_scan.surfaceTransparentTertiary};
+                ${_styledcomponents.loaderTokens.progressBarCircularStroke}: ${_sdds_scan.surfaceWarning};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentColor}: ${_sdds_scan.textPrimary};
 
-                ${_styledcomponents.loaderTokens.spinnerColor}: var(--text-warning);
+                ${_styledcomponents.loaderTokens.spinnerColor}: ${_sdds_scan.textWarning};
 
-                ${_styledcomponents.loaderTokens.overlayColor}: var(--overlay-soft);
+                ${_styledcomponents.loaderTokens.overlayColor}: ${_sdds_scan.overlaySoft};
             `,
             negative: (0, _styledcomponents.css)`
-                ${_styledcomponents.loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary);
-                ${_styledcomponents.loaderTokens.progressBarCircularStroke}: var(--surface-negative);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentColor}: var(--text-primary);
+                ${_styledcomponents.loaderTokens.progressBarCircularBackgroundStroke}: ${_sdds_scan.surfaceTransparentTertiary};
+                ${_styledcomponents.loaderTokens.progressBarCircularStroke}: ${_sdds_scan.surfaceNegative};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentColor}: ${_sdds_scan.textPrimary};
 
-                ${_styledcomponents.loaderTokens.spinnerColor}: var(--text-negative);
+                ${_styledcomponents.loaderTokens.spinnerColor}: ${_sdds_scan.textNegative};
 
-                ${_styledcomponents.loaderTokens.overlayColor}: var(--overlay-soft);
+                ${_styledcomponents.loaderTokens.overlayColor}: ${_sdds_scan.overlaySoft};
             `,
             info: (0, _styledcomponents.css)`
-                ${_styledcomponents.loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary);
-                ${_styledcomponents.loaderTokens.progressBarCircularStroke}: var(--surface-info);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentColor}: var(--text-primary);
+                ${_styledcomponents.loaderTokens.progressBarCircularBackgroundStroke}: ${_sdds_scan.surfaceTransparentTertiary};
+                ${_styledcomponents.loaderTokens.progressBarCircularStroke}: ${_sdds_scan.surfaceInfo};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentColor}: ${_sdds_scan.textPrimary};
 
-                ${_styledcomponents.loaderTokens.spinnerColor}: var(--text-info);
+                ${_styledcomponents.loaderTokens.spinnerColor}: ${_sdds_scan.textInfo};
 
-                ${_styledcomponents.loaderTokens.overlayColor}: var(--overlay-soft);
+                ${_styledcomponents.loaderTokens.overlayColor}: ${_sdds_scan.overlaySoft};
             `
         },
         size: {
@@ -90,12 +91,12 @@ const config = {
                 ${_styledcomponents.loaderTokens.progressBarCircularWidth}: 8rem;
                 ${_styledcomponents.loaderTokens.progressBarCircularStrokeWidth}: 0.25rem;
                 ${_styledcomponents.loaderTokens.progressBarCircularStrokeSize}: 4;
-                ${_styledcomponents.loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-h2-font-family);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-h2-font-size);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-h2-font-style);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-h2-bold-font-weight);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-h2-letter-spacing);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-h2-line-height);
+                ${_styledcomponents.loaderTokens.progressBarCircularContentFontFamily}: ${_sdds_scan.h2.fontFamily};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentFontSize}: ${_sdds_scan.h2.fontSize};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentFontStyle}: ${_sdds_scan.h2.fontStyle};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentFontWeight}: ${_sdds_scan.h2Bold.fontWeight};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentLetterSpacing}: ${_sdds_scan.h2.letterSpacing};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentLineHeight}: ${_sdds_scan.h2.lineHeight};
 
                 ${_styledcomponents.loaderTokens.spinnerSize}: 8rem;
             `,
@@ -108,12 +109,12 @@ const config = {
                 ${_styledcomponents.loaderTokens.progressBarCircularWidth}: 5.5rem;
                 ${_styledcomponents.loaderTokens.progressBarCircularStrokeWidth}: 0.25rem;
                 ${_styledcomponents.loaderTokens.progressBarCircularStrokeSize}: 4;
-                ${_styledcomponents.loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-h5-font-family);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-h5-font-size);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-h5-font-style);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-h5-bold-font-weight);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-h5-letter-spacing);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-h5-line-height);
+                ${_styledcomponents.loaderTokens.progressBarCircularContentFontFamily}: ${_sdds_scan.h5.fontFamily};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentFontSize}: ${_sdds_scan.h5.fontSize};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentFontStyle}: ${_sdds_scan.h5.fontStyle};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentFontWeight}: ${_sdds_scan.h5Bold.fontWeight};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentLetterSpacing}: ${_sdds_scan.h5.letterSpacing};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentLineHeight}: ${_sdds_scan.h5.lineHeight};
 
                 ${_styledcomponents.loaderTokens.spinnerSize}: 5.5rem;
             `,
@@ -126,12 +127,12 @@ const config = {
                 ${_styledcomponents.loaderTokens.progressBarCircularWidth}: 3.5rem;
                 ${_styledcomponents.loaderTokens.progressBarCircularStrokeWidth}: 0.125rem;
                 ${_styledcomponents.loaderTokens.progressBarCircularStrokeSize}: 2;
-                ${_styledcomponents.loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-l-font-family);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-l-font-size);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-l-font-style);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-l-body-font-weight);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${_styledcomponents.loaderTokens.progressBarCircularContentFontFamily}: ${_sdds_scan.bodyL.fontFamily};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentFontSize}: ${_sdds_scan.bodyL.fontSize};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentFontStyle}: ${_sdds_scan.bodyL.fontStyle};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentFontWeight}: ${_sdds_scan.bodyL.fontWeight};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentLetterSpacing}: ${_sdds_scan.bodyL.letterSpacing};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentLineHeight}: ${_sdds_scan.bodyL.lineHeight};
 
                 ${_styledcomponents.loaderTokens.spinnerSize}: 3.5rem;
             `,
@@ -144,12 +145,12 @@ const config = {
                 ${_styledcomponents.loaderTokens.progressBarCircularWidth}: 3rem;
                 ${_styledcomponents.loaderTokens.progressBarCircularStrokeWidth}: 0.125rem;
                 ${_styledcomponents.loaderTokens.progressBarCircularStrokeSize}: 2;
-                ${_styledcomponents.loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-m-font-size);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-m-body-font-weight);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_styledcomponents.loaderTokens.progressBarCircularContentFontFamily}: ${_sdds_scan.bodyM.fontFamily};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentFontSize}: ${_sdds_scan.bodyM.fontSize};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentFontStyle}: ${_sdds_scan.bodyM.fontStyle};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentFontWeight}: ${_sdds_scan.bodyM.fontWeight};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentLetterSpacing}: ${_sdds_scan.bodyM.letterSpacing};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentLineHeight}: ${_sdds_scan.bodyM.lineHeight};
 
                 ${_styledcomponents.loaderTokens.spinnerSize}: 3rem;
             `,
@@ -162,12 +163,12 @@ const config = {
                 ${_styledcomponents.loaderTokens.progressBarCircularWidth}: 2.25rem;
                 ${_styledcomponents.loaderTokens.progressBarCircularStrokeWidth}: 0.125rem;
                 ${_styledcomponents.loaderTokens.progressBarCircularStrokeSize}: 2;
-                ${_styledcomponents.loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-s-body-font-weight);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_styledcomponents.loaderTokens.progressBarCircularContentFontFamily}: ${_sdds_scan.bodyS.fontFamily};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentFontSize}: ${_sdds_scan.bodyS.fontSize};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentFontStyle}: ${_sdds_scan.bodyS.fontStyle};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentFontWeight}: ${_sdds_scan.bodyS.fontWeight};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentLetterSpacing}: ${_sdds_scan.bodyS.letterSpacing};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentLineHeight}: ${_sdds_scan.bodyS.lineHeight};
 
                 ${_styledcomponents.loaderTokens.spinnerSize}: 2.25rem;
             `,
@@ -180,12 +181,12 @@ const config = {
                 ${_styledcomponents.loaderTokens.progressBarCircularWidth}: 1.5rem;
                 ${_styledcomponents.loaderTokens.progressBarCircularStrokeWidth}: 0.125rem;
                 ${_styledcomponents.loaderTokens.progressBarCircularStrokeSize}: 2;
-                ${_styledcomponents.loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-xs-body-font-weight);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_styledcomponents.loaderTokens.progressBarCircularContentFontFamily}: ${_sdds_scan.bodyXS.fontFamily};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentFontSize}: ${_sdds_scan.bodyXS.fontSize};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentFontStyle}: ${_sdds_scan.bodyXS.fontStyle};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentFontWeight}: ${_sdds_scan.bodyXS.fontWeight};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentLetterSpacing}: ${_sdds_scan.bodyXS.letterSpacing};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentLineHeight}: ${_sdds_scan.bodyXS.lineHeight};
 
                 ${_styledcomponents.loaderTokens.spinnerSize}: 1.5rem;
             `,
@@ -198,12 +199,12 @@ const config = {
                 ${_styledcomponents.loaderTokens.progressBarCircularWidth}: 1rem;
                 ${_styledcomponents.loaderTokens.progressBarCircularStrokeWidth}: 0.125rem;
                 ${_styledcomponents.loaderTokens.progressBarCircularStrokeSize}: 2;
-                ${_styledcomponents.loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-xxs-font-family);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-xxs-font-size);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-xxs-font-style);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-xxs-body-font-weight);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
-                ${_styledcomponents.loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-xxs-line-height);
+                ${_styledcomponents.loaderTokens.progressBarCircularContentFontFamily}: ${_sdds_scan.bodyXXS.fontFamily};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentFontSize}: ${_sdds_scan.bodyXXS.fontSize};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentFontStyle}: ${_sdds_scan.bodyXXS.fontStyle};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentFontWeight}: ${_sdds_scan.bodyXXS.fontWeight};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentLetterSpacing}: ${_sdds_scan.bodyXXS.letterSpacing};
+                ${_styledcomponents.loaderTokens.progressBarCircularContentLineHeight}: ${_sdds_scan.bodyXXS.lineHeight};
 
                 ${_styledcomponents.loaderTokens.spinnerSize}: 1rem;
             `

package/dist/styled-components/cjs/components/Modal/Modal.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,16 +18,16 @@ const config = {
         view: {
             default: (0, _styledcomponents.css)`
                 ${_styledcomponents.modalTokens.modalOverlayWithBlurColor}: rgba(35, 35, 35, 0.2);
-                ${_styledcomponents.modalTokens.modalOverlayColor}: var(--overlay-soft);
-                ${_styledcomponents.modalTokens.modalBodyBackground}: var(--surface-solid-card);
+                ${_styledcomponents.modalTokens.modalOverlayColor}: ${_sdds_scan.overlaySoft};
+                ${_styledcomponents.modalTokens.modalBodyBackground}: ${_sdds_scan.surfaceSolidCard};
                 ${_styledcomponents.modalTokens.modalBodyBorderRadius}: 1.25rem;
                 ${_styledcomponents.modalTokens.modalBodyPadding}: 2rem;
                 ${_styledcomponents.modalTokens.modalContentPadding}: 0.625rem;
                 ${_styledcomponents.modalTokens.modalCloseButtonRadius}: 0.375rem;
-                ${_styledcomponents.modalTokens.modalCloseButtonColor}: var(--text-secondary);
-                ${_styledcomponents.modalTokens.modalCloseButtonHoverColor}: var(--text-secondary-hover);
-                ${_styledcomponents.modalTokens.modalCloseButtonActiveColor}: var(--text-secondary-active);
-                ${_styledcomponents.modalTokens.modalOutlineFocusColor}: var(--surface-accent);
+                ${_styledcomponents.modalTokens.modalCloseButtonColor}: ${_sdds_scan.textSecondary};
+                ${_styledcomponents.modalTokens.modalCloseButtonHoverColor}: ${_sdds_scan.textSecondaryHover};
+                ${_styledcomponents.modalTokens.modalCloseButtonActiveColor}: ${_sdds_scan.textSecondaryActive};
+                ${_styledcomponents.modalTokens.modalOutlineFocusColor}: ${_sdds_scan.surfaceAccent};
             `
         }
     }