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

package/dist/styled-components/cjs/components/Button/Button.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,104 +19,104 @@ const config = {
     variations: {
         view: {
             default: (0, _styledcomponents.css)`
-                ${_styledcomponents.buttonTokens.buttonColor}: var(--inverse-text-primary);
-                ${_styledcomponents.buttonTokens.buttonTextColor}: var(--inverse-text-primary);
-                ${_styledcomponents.buttonTokens.buttonIconColor}: var(--inverse-text-primary);
-                ${_styledcomponents.buttonTokens.buttonValueColor}: var(--inverse-text-secondary);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: var(--surface-solid-default);
+                ${_styledcomponents.buttonTokens.buttonColor}: ${_sdds_scan.inverseTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonTextColor}: ${_sdds_scan.inverseTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonIconColor}: ${_sdds_scan.inverseTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonValueColor}: ${_sdds_scan.inverseTextSecondary};
+                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: ${_sdds_scan.surfaceSolidDefault};
                 ${_styledcomponents.buttonTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonTokens.buttonBackgroundColor});
-                ${_styledcomponents.buttonTokens.buttonColorHover}: var(--inverse-text-primary-hover);
-                ${_styledcomponents.buttonTokens.buttonColorActive}: var(--inverse-text-primary-active);
+                ${_styledcomponents.buttonTokens.buttonColorHover}: ${_sdds_scan.inverseTextPrimaryHover};
+                ${_styledcomponents.buttonTokens.buttonColorActive}: ${_sdds_scan.inverseTextPrimaryActive};
             `,
             accent: (0, _styledcomponents.css)`
-                ${_styledcomponents.buttonTokens.buttonColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonTokens.buttonTextColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonTokens.buttonIconColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonTokens.buttonValueColor}: var(--on-dark-text-secondary);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: var(--surface-accent);
+                ${_styledcomponents.buttonTokens.buttonColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonTextColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonIconColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonValueColor}: ${_sdds_scan.onDarkTextSecondary};
+                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: ${_sdds_scan.surfaceAccent};
                 ${_styledcomponents.buttonTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonTokens.buttonBackgroundColor});
-                ${_styledcomponents.buttonTokens.buttonBackgroundColorHover}: var(--surface-accent-hover);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColorActive}: var(--surface-accent-active);
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorHover}: ${_sdds_scan.surfaceAccentHover};
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorActive}: ${_sdds_scan.surfaceAccentActive};
             `,
             secondary: (0, _styledcomponents.css)`
-                ${_styledcomponents.buttonTokens.buttonColor}: var(--text-primary);
-                ${_styledcomponents.buttonTokens.buttonTextColor}: var(--text-primary);
-                ${_styledcomponents.buttonTokens.buttonIconColor}: var(--text-primary);
-                ${_styledcomponents.buttonTokens.buttonValueColor}: var(--text-secondary);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: var(--surface-transparent-secondary);
+                ${_styledcomponents.buttonTokens.buttonColor}: ${_sdds_scan.textPrimary};
+                ${_styledcomponents.buttonTokens.buttonTextColor}: ${_sdds_scan.textPrimary};
+                ${_styledcomponents.buttonTokens.buttonIconColor}: ${_sdds_scan.textPrimary};
+                ${_styledcomponents.buttonTokens.buttonValueColor}: ${_sdds_scan.textSecondary};
+                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: ${_sdds_scan.surfaceTransparentSecondary};
                 ${_styledcomponents.buttonTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonTokens.buttonBackgroundColor});
-                ${_styledcomponents.buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active);
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorHover}: ${_sdds_scan.surfaceTransparentSecondaryHover};
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorActive}: ${_sdds_scan.surfaceTransparentSecondaryActive};
             `,
             clear: (0, _styledcomponents.css)`
-                ${_styledcomponents.buttonTokens.buttonColor}: var(--text-primary);
-                ${_styledcomponents.buttonTokens.buttonTextColor}: var(--text-primary);
-                ${_styledcomponents.buttonTokens.buttonIconColor}: var(--text-primary);
-                ${_styledcomponents.buttonTokens.buttonValueColor}: var(--text-secondary);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: var(--surface-clear);
+                ${_styledcomponents.buttonTokens.buttonColor}: ${_sdds_scan.textPrimary};
+                ${_styledcomponents.buttonTokens.buttonTextColor}: ${_sdds_scan.textPrimary};
+                ${_styledcomponents.buttonTokens.buttonIconColor}: ${_sdds_scan.textPrimary};
+                ${_styledcomponents.buttonTokens.buttonValueColor}: ${_sdds_scan.textSecondary};
+                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: ${_sdds_scan.surfaceClear};
                 ${_styledcomponents.buttonTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonTokens.buttonBackgroundColor});
-                ${_styledcomponents.buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active);
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorHover}: ${_sdds_scan.surfaceTransparentSecondaryHover};
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorActive}: ${_sdds_scan.surfaceTransparentSecondaryActive};
             `,
             positive: (0, _styledcomponents.css)`
-                ${_styledcomponents.buttonTokens.buttonColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonTokens.buttonTextColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonTokens.buttonIconColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonTokens.buttonValueColor}: var(--on-dark-text-secondary);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: var(--surface-positive);
+                ${_styledcomponents.buttonTokens.buttonColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonTextColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonIconColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonValueColor}: ${_sdds_scan.onDarkTextSecondary};
+                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: ${_sdds_scan.surfacePositive};
                 ${_styledcomponents.buttonTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonTokens.buttonBackgroundColor});
-                ${_styledcomponents.buttonTokens.buttonBackgroundColorHover}: var(--surface-positive-hover);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColorActive}: var(--surface-positive-active);
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorHover}: ${_sdds_scan.surfacePositiveHover};
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorActive}: ${_sdds_scan.surfacePositiveActive};
             `,
             warning: (0, _styledcomponents.css)`
-                ${_styledcomponents.buttonTokens.buttonColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonTokens.buttonTextColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonTokens.buttonIconColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonTokens.buttonValueColor}: var(--on-dark-text-secondary);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: var(--surface-warning);
+                ${_styledcomponents.buttonTokens.buttonColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonTextColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonIconColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonValueColor}: ${_sdds_scan.onDarkTextSecondary};
+                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: ${_sdds_scan.surfaceWarning};
                 ${_styledcomponents.buttonTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonTokens.buttonBackgroundColor});
-                ${_styledcomponents.buttonTokens.buttonBackgroundColorHover}: var(--surface-warning-hover);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColorActive}: var(--surface-warning-active);
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorHover}: ${_sdds_scan.surfaceWarningHover};
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorActive}: ${_sdds_scan.surfaceWarningActive};
             `,
             negative: (0, _styledcomponents.css)`
-                ${_styledcomponents.buttonTokens.buttonColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonTokens.buttonTextColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonTokens.buttonIconColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonTokens.buttonValueColor}: var(--on-dark-text-secondary);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: var(--surface-negative);
+                ${_styledcomponents.buttonTokens.buttonColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonTextColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonIconColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonValueColor}: ${_sdds_scan.onDarkTextSecondary};
+                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: ${_sdds_scan.surfaceNegative};
                 ${_styledcomponents.buttonTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonTokens.buttonBackgroundColor});
-                ${_styledcomponents.buttonTokens.buttonBackgroundColorHover}: var(--surface-negative-hover);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColorActive}: var(--surface-negative-active);
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorHover}: ${_sdds_scan.surfaceNegativeHover};
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorActive}: ${_sdds_scan.surfaceNegativeActive};
             `,
             dark: (0, _styledcomponents.css)`
-                ${_styledcomponents.buttonTokens.buttonColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonTokens.buttonTextColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonTokens.buttonIconColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonTokens.buttonValueColor}: var(--on-dark-text-secondary);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep);
+                ${_styledcomponents.buttonTokens.buttonColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonTextColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonIconColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonValueColor}: ${_sdds_scan.onDarkTextSecondary};
+                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: ${_sdds_scan.onLightSurfaceTransparentDeep};
                 ${_styledcomponents.buttonTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonTokens.buttonBackgroundColor});
-                ${_styledcomponents.buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover);
-                ${_styledcomponents.buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active);
+                ${_styledcomponents.buttonTokens.buttonColorHover}: ${_sdds_scan.onDarkTextPrimaryHover};
+                ${_styledcomponents.buttonTokens.buttonColorActive}: ${_sdds_scan.onDarkTextPrimaryActive};
             `,
             black: (0, _styledcomponents.css)`
-                ${_styledcomponents.buttonTokens.buttonColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonTokens.buttonTextColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonTokens.buttonIconColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonTokens.buttonValueColor}: var(--on-dark-text-secondary);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default);
+                ${_styledcomponents.buttonTokens.buttonColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonTextColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonIconColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonValueColor}: ${_sdds_scan.onDarkTextSecondary};
+                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: ${_sdds_scan.onLightSurfaceSolidDefault};
                 ${_styledcomponents.buttonTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonTokens.buttonBackgroundColor});
-                ${_styledcomponents.buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover);
-                ${_styledcomponents.buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active);
+                ${_styledcomponents.buttonTokens.buttonColorHover}: ${_sdds_scan.onDarkTextPrimaryHover};
+                ${_styledcomponents.buttonTokens.buttonColorActive}: ${_sdds_scan.onDarkTextPrimaryActive};
             `,
             white: (0, _styledcomponents.css)`
-                ${_styledcomponents.buttonTokens.buttonColor}: var(--on-light-text-primary);
-                ${_styledcomponents.buttonTokens.buttonTextColor}: var(--on-light-text-primary);
-                ${_styledcomponents.buttonTokens.buttonIconColor}: var(--on-light-text-primary);
-                ${_styledcomponents.buttonTokens.buttonValueColor}: var(--on-light-text-secondary);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default);
+                ${_styledcomponents.buttonTokens.buttonColor}: ${_sdds_scan.onLightTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonTextColor}: ${_sdds_scan.onLightTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonIconColor}: ${_sdds_scan.onLightTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonValueColor}: ${_sdds_scan.onLightTextSecondary};
+                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: ${_sdds_scan.onDarkSurfaceSolidDefault};
                 ${_styledcomponents.buttonTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonTokens.buttonBackgroundColor});
-                ${_styledcomponents.buttonTokens.buttonColorHover}: var(--on-light-text-primary-hover);
-                ${_styledcomponents.buttonTokens.buttonColorActive}: var(--on-light-text-primary-active);
+                ${_styledcomponents.buttonTokens.buttonColorHover}: ${_sdds_scan.onLightTextPrimaryHover};
+                ${_styledcomponents.buttonTokens.buttonColorActive}: ${_sdds_scan.onLightTextPrimaryActive};
             `
         },
         size: {
@@ -124,12 +125,12 @@ const config = {
                 ${_styledcomponents.buttonTokens.buttonWidth}: 11.25rem;
                 ${_styledcomponents.buttonTokens.buttonPadding}: 1.25rem;
                 ${_styledcomponents.buttonTokens.buttonRadius}: 0.75rem;
-                ${_styledcomponents.buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_styledcomponents.buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size);
-                ${_styledcomponents.buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_styledcomponents.buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
-                ${_styledcomponents.buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_styledcomponents.buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_styledcomponents.buttonTokens.buttonFontFamily}: ${_sdds_scan.bodyM.fontFamily};
+                ${_styledcomponents.buttonTokens.buttonFontSize}: ${_sdds_scan.bodyM.fontSize};
+                ${_styledcomponents.buttonTokens.buttonFontStyle}: ${_sdds_scan.bodyM.fontStyle};
+                ${_styledcomponents.buttonTokens.buttonFontWeight}: ${_sdds_scan.bodyMBold.fontWeight};
+                ${_styledcomponents.buttonTokens.buttonLetterSpacing}: ${_sdds_scan.bodyM.letterSpacing};
+                ${_styledcomponents.buttonTokens.buttonLineHeight}: ${_sdds_scan.bodyM.lineHeight};
 
                 ${_styledcomponents.buttonTokens.buttonSpinnerSize}: 1.375rem;
                 ${_styledcomponents.buttonTokens.buttonSpinnerColor}: inherit;
@@ -145,12 +146,12 @@ const config = {
                 ${_styledcomponents.buttonTokens.buttonWidth}: 11.25rem;
                 ${_styledcomponents.buttonTokens.buttonPadding}: 1rem;
                 ${_styledcomponents.buttonTokens.buttonRadius}: 0.625rem;
-                ${_styledcomponents.buttonTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_styledcomponents.buttonTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_styledcomponents.buttonTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_styledcomponents.buttonTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${_styledcomponents.buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_styledcomponents.buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_styledcomponents.buttonTokens.buttonFontFamily}: ${_sdds_scan.bodyS.fontFamily};
+                ${_styledcomponents.buttonTokens.buttonFontSize}: ${_sdds_scan.bodyS.fontSize};
+                ${_styledcomponents.buttonTokens.buttonFontStyle}: ${_sdds_scan.bodyS.fontStyle};
+                ${_styledcomponents.buttonTokens.buttonFontWeight}: ${_sdds_scan.bodySBold.fontWeight};
+                ${_styledcomponents.buttonTokens.buttonLetterSpacing}: ${_sdds_scan.bodyS.letterSpacing};
+                ${_styledcomponents.buttonTokens.buttonLineHeight}: ${_sdds_scan.bodyS.lineHeight};
 
                 ${_styledcomponents.buttonTokens.buttonSpinnerSize}: 1.375rem;
                 ${_styledcomponents.buttonTokens.buttonSpinnerColor}: inherit;
@@ -166,12 +167,12 @@ const config = {
                 ${_styledcomponents.buttonTokens.buttonWidth}: 10rem;
                 ${_styledcomponents.buttonTokens.buttonPadding}: 0.75rem;
                 ${_styledcomponents.buttonTokens.buttonRadius}: 0.5rem;
-                ${_styledcomponents.buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_styledcomponents.buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_styledcomponents.buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_styledcomponents.buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight);
-                ${_styledcomponents.buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_styledcomponents.buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_styledcomponents.buttonTokens.buttonFontFamily}: ${_sdds_scan.bodyXS.fontFamily};
+                ${_styledcomponents.buttonTokens.buttonFontSize}: ${_sdds_scan.bodyXS.fontSize};
+                ${_styledcomponents.buttonTokens.buttonFontStyle}: ${_sdds_scan.bodyXS.fontStyle};
+                ${_styledcomponents.buttonTokens.buttonFontWeight}: ${_sdds_scan.bodyXSBold.fontWeight};
+                ${_styledcomponents.buttonTokens.buttonLetterSpacing}: ${_sdds_scan.bodyXS.letterSpacing};
+                ${_styledcomponents.buttonTokens.buttonLineHeight}: ${_sdds_scan.bodyXS.lineHeight};
 
                 ${_styledcomponents.buttonTokens.buttonSpinnerSize}: 1rem;
                 ${_styledcomponents.buttonTokens.buttonSpinnerColor}: inherit;
@@ -190,7 +191,7 @@ const config = {
         },
         focused: {
             true: (0, _styledcomponents.css)`
-                ${_styledcomponents.buttonTokens.buttonFocusColor}: var(--surface-accent);
+                ${_styledcomponents.buttonTokens.buttonFocusColor}: ${_sdds_scan.surfaceAccent};
             `
         },
         stretching: {

package/dist/styled-components/cjs/components/ButtonGroup/ButtonGroup.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,124 +18,124 @@ const config = {
     variations: {
         view: {
             default: (0, _styledcomponents.css)`
-                ${_styledcomponents.buttonGroupTokens.buttonColor}: var(--inverse-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonTextColor}: var(--inverse-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonIconColor}: var(--inverse-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonValueColor}: var(--inverse-text-secondary);
-                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColor}: var(--surface-solid-default);
+                ${_styledcomponents.buttonGroupTokens.buttonColor}: ${_sdds_scan.inverseTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonTextColor}: ${_sdds_scan.inverseTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonIconColor}: ${_sdds_scan.inverseTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonValueColor}: ${_sdds_scan.inverseTextSecondary};
+                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColor}: ${_sdds_scan.surfaceSolidDefault};
                 ${_styledcomponents.buttonGroupTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonGroupTokens.buttonBackgroundColor});
-                ${_styledcomponents.buttonGroupTokens.buttonColorHover}: var(--inverse-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover);
-                ${_styledcomponents.buttonGroupTokens.buttonColorActive}: var(--inverse-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active);
+                ${_styledcomponents.buttonGroupTokens.buttonColorHover}: ${_sdds_scan.inverseTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorHover}: ${_sdds_scan.surfaceSolidDefaultHover};
+                ${_styledcomponents.buttonGroupTokens.buttonColorActive}: ${_sdds_scan.inverseTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorActive}: ${_sdds_scan.surfaceSolidDefaultActive};
             `,
             accent: (0, _styledcomponents.css)`
-                ${_styledcomponents.buttonGroupTokens.buttonColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary);
-                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColor}: var(--surface-accent);
+                ${_styledcomponents.buttonGroupTokens.buttonColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonTextColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonIconColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonValueColor}: ${_sdds_scan.onDarkTextSecondary};
+                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColor}: ${_sdds_scan.surfaceAccent};
                 ${_styledcomponents.buttonGroupTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonGroupTokens.buttonBackgroundColor});
-                ${_styledcomponents.buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-accent-hover);
-                ${_styledcomponents.buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-accent-active);
+                ${_styledcomponents.buttonGroupTokens.buttonColorHover}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorHover}: ${_sdds_scan.surfaceAccentHover};
+                ${_styledcomponents.buttonGroupTokens.buttonColorActive}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorActive}: ${_sdds_scan.surfaceAccentActive};
             `,
             secondary: (0, _styledcomponents.css)`
-                ${_styledcomponents.buttonGroupTokens.buttonColor}: var(--text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonTextColor}: var(--text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonIconColor}: var(--text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonValueColor}: var(--text-secondary);
-                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColor}: var(--surface-transparent-secondary);
+                ${_styledcomponents.buttonGroupTokens.buttonColor}: ${_sdds_scan.textPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonTextColor}: ${_sdds_scan.textPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonIconColor}: ${_sdds_scan.textPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonValueColor}: ${_sdds_scan.textSecondary};
+                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColor}: ${_sdds_scan.surfaceTransparentSecondary};
                 ${_styledcomponents.buttonGroupTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonGroupTokens.buttonBackgroundColor});
-                ${_styledcomponents.buttonGroupTokens.buttonColorHover}: var(--text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover);
-                ${_styledcomponents.buttonGroupTokens.buttonColorActive}: var(--text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active);
+                ${_styledcomponents.buttonGroupTokens.buttonColorHover}: ${_sdds_scan.textPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorHover}: ${_sdds_scan.surfaceTransparentSecondaryHover};
+                ${_styledcomponents.buttonGroupTokens.buttonColorActive}: ${_sdds_scan.textPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorActive}: ${_sdds_scan.surfaceTransparentSecondaryActive};
             `,
             clear: (0, _styledcomponents.css)`
-                ${_styledcomponents.buttonGroupTokens.buttonColor}: var(--text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonTextColor}: var(--text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonIconColor}: var(--text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonValueColor}: var(--text-secondary);
-                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColor}: var(--surface-clear);
+                ${_styledcomponents.buttonGroupTokens.buttonColor}: ${_sdds_scan.textPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonTextColor}: ${_sdds_scan.textPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonIconColor}: ${_sdds_scan.textPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonValueColor}: ${_sdds_scan.textSecondary};
+                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColor}: ${_sdds_scan.surfaceClear};
                 ${_styledcomponents.buttonGroupTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonGroupTokens.buttonBackgroundColor});
-                ${_styledcomponents.buttonGroupTokens.buttonColorHover}: var(--text-primary-hover);
-                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-clear);
-                ${_styledcomponents.buttonGroupTokens.buttonColorActive}: var(--text-primary-active);
-                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-clear);
+                ${_styledcomponents.buttonGroupTokens.buttonColorHover}: ${_sdds_scan.textPrimaryHover};
+                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorHover}: ${_sdds_scan.surfaceClear};
+                ${_styledcomponents.buttonGroupTokens.buttonColorActive}: ${_sdds_scan.textPrimaryActive};
+                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorActive}: ${_sdds_scan.surfaceClear};
             `,
             positive: (0, _styledcomponents.css)`
-                ${_styledcomponents.buttonGroupTokens.buttonColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary);
-                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColor}: var(--surface-positive);
+                ${_styledcomponents.buttonGroupTokens.buttonColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonTextColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonIconColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonValueColor}: ${_sdds_scan.onDarkTextSecondary};
+                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColor}: ${_sdds_scan.surfacePositive};
                 ${_styledcomponents.buttonGroupTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonGroupTokens.buttonBackgroundColor});
-                ${_styledcomponents.buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-positive-hover);
-                ${_styledcomponents.buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-positive-active);
+                ${_styledcomponents.buttonGroupTokens.buttonColorHover}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorHover}: ${_sdds_scan.surfacePositiveHover};
+                ${_styledcomponents.buttonGroupTokens.buttonColorActive}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorActive}: ${_sdds_scan.surfacePositiveActive};
             `,
             warning: (0, _styledcomponents.css)`
-                ${_styledcomponents.buttonGroupTokens.buttonColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary);
-                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColor}: var(--surface-warning);
+                ${_styledcomponents.buttonGroupTokens.buttonColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonTextColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonIconColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonValueColor}: ${_sdds_scan.onDarkTextSecondary};
+                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColor}: ${_sdds_scan.surfaceWarning};
                 ${_styledcomponents.buttonGroupTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonGroupTokens.buttonBackgroundColor});
-                ${_styledcomponents.buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-warning-hover);
-                ${_styledcomponents.buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-warning-active);
+                ${_styledcomponents.buttonGroupTokens.buttonColorHover}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorHover}: ${_sdds_scan.surfaceWarningHover};
+                ${_styledcomponents.buttonGroupTokens.buttonColorActive}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorActive}: ${_sdds_scan.surfaceWarningActive};
             `,
             negative: (0, _styledcomponents.css)`
-                ${_styledcomponents.buttonGroupTokens.buttonColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary);
-                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColor}: var(--surface-negative);
+                ${_styledcomponents.buttonGroupTokens.buttonColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonTextColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonIconColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonValueColor}: ${_sdds_scan.onDarkTextSecondary};
+                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColor}: ${_sdds_scan.surfaceNegative};
                 ${_styledcomponents.buttonGroupTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonGroupTokens.buttonBackgroundColor});
-                ${_styledcomponents.buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-negative-hover);
-                ${_styledcomponents.buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-negative-active);
+                ${_styledcomponents.buttonGroupTokens.buttonColorHover}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorHover}: ${_sdds_scan.surfaceNegativeHover};
+                ${_styledcomponents.buttonGroupTokens.buttonColorActive}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorActive}: ${_sdds_scan.surfaceNegativeActive};
             `,
             dark: (0, _styledcomponents.css)`
-                ${_styledcomponents.buttonGroupTokens.buttonColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary);
-                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep);
+                ${_styledcomponents.buttonGroupTokens.buttonColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonTextColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonIconColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonValueColor}: ${_sdds_scan.onDarkTextSecondary};
+                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColor}: ${_sdds_scan.onLightSurfaceTransparentDeep};
                 ${_styledcomponents.buttonGroupTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonGroupTokens.buttonBackgroundColor});
-                ${_styledcomponents.buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover);
-                ${_styledcomponents.buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active);
+                ${_styledcomponents.buttonGroupTokens.buttonColorHover}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorHover}: ${_sdds_scan.onLightSurfaceTransparentDeepHover};
+                ${_styledcomponents.buttonGroupTokens.buttonColorActive}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorActive}: ${_sdds_scan.onLightSurfaceTransparentDeepActive};
             `,
             black: (0, _styledcomponents.css)`
-                ${_styledcomponents.buttonGroupTokens.buttonColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary);
-                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default);
+                ${_styledcomponents.buttonGroupTokens.buttonColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonTextColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonIconColor}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonValueColor}: ${_sdds_scan.onDarkTextSecondary};
+                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColor}: ${_sdds_scan.onLightSurfaceSolidDefault};
                 ${_styledcomponents.buttonGroupTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonGroupTokens.buttonBackgroundColor});
-                ${_styledcomponents.buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-solid-default-hover);
-                ${_styledcomponents.buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active);
+                ${_styledcomponents.buttonGroupTokens.buttonColorHover}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorHover}: ${_sdds_scan.onLightSurfaceSolidDefaultHover};
+                ${_styledcomponents.buttonGroupTokens.buttonColorActive}: ${_sdds_scan.onDarkTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorActive}: ${_sdds_scan.onLightSurfaceSolidDefaultActive};
             `,
             white: (0, _styledcomponents.css)`
-                ${_styledcomponents.buttonGroupTokens.buttonColor}: var(--on-light-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonTextColor}: var(--on-light-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonIconColor}: var(--on-light-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonValueColor}: var(--on-light-text-secondary);
-                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default);
+                ${_styledcomponents.buttonGroupTokens.buttonColor}: ${_sdds_scan.onLightTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonTextColor}: ${_sdds_scan.onLightTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonIconColor}: ${_sdds_scan.onLightTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonValueColor}: ${_sdds_scan.onLightTextSecondary};
+                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColor}: ${_sdds_scan.onDarkSurfaceSolidDefault};
                 ${_styledcomponents.buttonGroupTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonGroupTokens.buttonBackgroundColor});
-                ${_styledcomponents.buttonGroupTokens.buttonColorHover}: var(--on-light-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover);
-                ${_styledcomponents.buttonGroupTokens.buttonColorActive}: var(--on-light-text-primary);
-                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default-active);
+                ${_styledcomponents.buttonGroupTokens.buttonColorHover}: ${_sdds_scan.onLightTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorHover}: ${_sdds_scan.onDarkSurfaceSolidDefaultHover};
+                ${_styledcomponents.buttonGroupTokens.buttonColorActive}: ${_sdds_scan.onLightTextPrimary};
+                ${_styledcomponents.buttonGroupTokens.buttonBackgroundColorActive}: ${_sdds_scan.onDarkSurfaceSolidDefaultActive};
             `
         },
         size: {
@@ -146,12 +147,12 @@ const config = {
                 ${_styledcomponents.buttonGroupTokens.buttonHeight}: 3rem;
                 ${_styledcomponents.buttonGroupTokens.buttonPadding}: 1.25rem;
 
-                ${_styledcomponents.buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_styledcomponents.buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size);
-                ${_styledcomponents.buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_styledcomponents.buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
-                ${_styledcomponents.buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_styledcomponents.buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_styledcomponents.buttonGroupTokens.buttonFontFamily}: ${_sdds_scan.bodyM.fontFamily};
+                ${_styledcomponents.buttonGroupTokens.buttonFontSize}: ${_sdds_scan.bodyM.fontSize};
+                ${_styledcomponents.buttonGroupTokens.buttonFontStyle}: ${_sdds_scan.bodyM.fontStyle};
+                ${_styledcomponents.buttonGroupTokens.buttonFontWeight}: ${_sdds_scan.bodyMBold.fontWeight};
+                ${_styledcomponents.buttonGroupTokens.buttonLetterSpacing}: ${_sdds_scan.bodyM.letterSpacing};
+                ${_styledcomponents.buttonGroupTokens.buttonLineHeight}: ${_sdds_scan.bodyM.lineHeight};
             `,
             s: (0, _styledcomponents.css)`
                 ${_styledcomponents.buttonGroupTokens.buttonSegmentedRadius}: 0.25rem;
@@ -160,12 +161,12 @@ const config = {
 
                 ${_styledcomponents.buttonGroupTokens.buttonHeight}: 2.5rem;
                 ${_styledcomponents.buttonGroupTokens.buttonPadding}: 1rem;
-                ${_styledcomponents.buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_styledcomponents.buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_styledcomponents.buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_styledcomponents.buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${_styledcomponents.buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_styledcomponents.buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_styledcomponents.buttonGroupTokens.buttonFontFamily}: ${_sdds_scan.bodyS.fontFamily};
+                ${_styledcomponents.buttonGroupTokens.buttonFontSize}: ${_sdds_scan.bodyS.fontSize};
+                ${_styledcomponents.buttonGroupTokens.buttonFontStyle}: ${_sdds_scan.bodyS.fontStyle};
+                ${_styledcomponents.buttonGroupTokens.buttonFontWeight}: ${_sdds_scan.bodySBold.fontWeight};
+                ${_styledcomponents.buttonGroupTokens.buttonLetterSpacing}: ${_sdds_scan.bodyS.letterSpacing};
+                ${_styledcomponents.buttonGroupTokens.buttonLineHeight}: ${_sdds_scan.bodyS.lineHeight};
             `,
             xs: (0, _styledcomponents.css)`
                 ${_styledcomponents.buttonGroupTokens.buttonSegmentedRadius}: 0.125rem;
@@ -174,12 +175,12 @@ const config = {
 
                 ${_styledcomponents.buttonGroupTokens.buttonHeight}: 2rem;
                 ${_styledcomponents.buttonGroupTokens.buttonPadding}: 0.75rem;
-                ${_styledcomponents.buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_styledcomponents.buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_styledcomponents.buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_styledcomponents.buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight);
-                ${_styledcomponents.buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_styledcomponents.buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_styledcomponents.buttonGroupTokens.buttonFontFamily}: ${_sdds_scan.bodyXS.fontFamily};
+                ${_styledcomponents.buttonGroupTokens.buttonFontSize}: ${_sdds_scan.bodyXS.fontSize};
+                ${_styledcomponents.buttonGroupTokens.buttonFontStyle}: ${_sdds_scan.bodyXS.fontStyle};
+                ${_styledcomponents.buttonGroupTokens.buttonFontWeight}: ${_sdds_scan.bodyXSBold.fontWeight};
+                ${_styledcomponents.buttonGroupTokens.buttonLetterSpacing}: ${_sdds_scan.bodyXS.letterSpacing};
+                ${_styledcomponents.buttonGroupTokens.buttonLineHeight}: ${_sdds_scan.bodyXS.lineHeight};
             `
         },
         orientation: {