@salutejs/sdds-platform-ai 0.356.0-next-sbcom.0 → 0.357.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_platform_ai = require("@salutejs/sdds-themes/tokens/sdds_platform_ai");
 const config = {
     defaults: {
         view: 'default',
@@ -18,129 +19,129 @@ const config = {
     variations: {
         view: {
             default: (0, _styledcomponents.css)`
-                ${_styledcomponents.buttonTokens.buttonColor}: var(--inverse-text-primary);
+                ${_styledcomponents.buttonTokens.buttonColor}: ${_sdds_platform_ai.inverseTextPrimary};
 
-                ${_styledcomponents.buttonTokens.buttonTextColor}: var(--inverse-text-primary);
-                ${_styledcomponents.buttonTokens.buttonIconColor}: var(--inverse-text-primary);
-                ${_styledcomponents.buttonTokens.buttonValueColor}: var(--inverse-text-secondary);
+                ${_styledcomponents.buttonTokens.buttonTextColor}: ${_sdds_platform_ai.inverseTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonIconColor}: ${_sdds_platform_ai.inverseTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonValueColor}: ${_sdds_platform_ai.inverseTextSecondary};
 
-                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: var(--surface-solid-default);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active);
+                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: ${_sdds_platform_ai.surfaceSolidDefault};
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorHover}: ${_sdds_platform_ai.surfaceSolidDefaultHover};
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorActive}: ${_sdds_platform_ai.surfaceSolidDefaultActive};
 
                 ${_styledcomponents.buttonTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonTokens.buttonBackgroundColor});
             `,
             accent: (0, _styledcomponents.css)`
-                ${_styledcomponents.buttonTokens.buttonColor}: var(--text-primary);
-                ${_styledcomponents.buttonTokens.buttonTextColor}: var(--text-primary);
-                ${_styledcomponents.buttonTokens.buttonIconColor}: var(--text-primary);
+                ${_styledcomponents.buttonTokens.buttonColor}: ${_sdds_platform_ai.textPrimary};
+                ${_styledcomponents.buttonTokens.buttonTextColor}: ${_sdds_platform_ai.textPrimary};
+                ${_styledcomponents.buttonTokens.buttonIconColor}: ${_sdds_platform_ai.textPrimary};
 
-                ${_styledcomponents.buttonTokens.buttonValueColor}: var(--on-dark-text-secondary);
+                ${_styledcomponents.buttonTokens.buttonValueColor}: ${_sdds_platform_ai.onDarkTextSecondary};
 
-                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: var(--surface-accent-gradient);
+                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: ${_sdds_platform_ai.surfaceAccentGradient};
                 ${_styledcomponents.buttonTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonTokens.buttonBackgroundColor});
             `,
             secondary: (0, _styledcomponents.css)`
-                ${_styledcomponents.buttonTokens.buttonColor}: var(--text-primary);
-                ${_styledcomponents.buttonTokens.buttonColorHover}: var(--text-primary-hover);
-                ${_styledcomponents.buttonTokens.buttonIconColor}: var(--text-primary);
+                ${_styledcomponents.buttonTokens.buttonColor}: ${_sdds_platform_ai.textPrimary};
+                ${_styledcomponents.buttonTokens.buttonColorHover}: ${_sdds_platform_ai.textPrimaryHover};
+                ${_styledcomponents.buttonTokens.buttonIconColor}: ${_sdds_platform_ai.textPrimary};
 
-                ${_styledcomponents.buttonTokens.buttonValueColor}: var(--text-secondary);
+                ${_styledcomponents.buttonTokens.buttonValueColor}: ${_sdds_platform_ai.textSecondary};
 
                 ${_styledcomponents.buttonTokens.buttonBackgroundColor}: transparent;
                 ${_styledcomponents.buttonTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonTokens.buttonBackgroundColor});
 
-                ${_styledcomponents.buttonTokens.buttonBorderColor}: var(--outline-solid-default);
-                ${_styledcomponents.buttonTokens.buttonBorderColorHover}: var(--outline-solid-default-hover);
-                ${_styledcomponents.buttonTokens.buttonBorderColorActive}: var(--outline-solid-default-active);
+                ${_styledcomponents.buttonTokens.buttonBorderColor}: ${_sdds_platform_ai.outlineSolidDefault};
+                ${_styledcomponents.buttonTokens.buttonBorderColorHover}: ${_sdds_platform_ai.outlineSolidDefaultHover};
+                ${_styledcomponents.buttonTokens.buttonBorderColorActive}: ${_sdds_platform_ai.outlineSolidDefaultActive};
             `,
             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.buttonColor}: ${_sdds_platform_ai.textPrimary};
+                ${_styledcomponents.buttonTokens.buttonTextColor}: ${_sdds_platform_ai.textPrimary};
+                ${_styledcomponents.buttonTokens.buttonIconColor}: ${_sdds_platform_ai.textPrimary};
+                ${_styledcomponents.buttonTokens.buttonValueColor}: ${_sdds_platform_ai.textSecondary};
 
-                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: var(--surface-clear);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active);
+                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: ${_sdds_platform_ai.surfaceClear};
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorHover}: ${_sdds_platform_ai.surfaceTransparentSecondaryHover};
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorActive}: ${_sdds_platform_ai.surfaceTransparentSecondaryActive};
 
                 ${_styledcomponents.buttonTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonTokens.buttonBackgroundColor});
             `,
             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.buttonBackgroundColorHover}: var(--surface-positive-hover);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColorActive}: var(--surface-positive-active);
+                ${_styledcomponents.buttonTokens.buttonColor}: ${_sdds_platform_ai.onDarkTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonTextColor}: ${_sdds_platform_ai.onDarkTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonIconColor}: ${_sdds_platform_ai.onDarkTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonValueColor}: ${_sdds_platform_ai.onDarkTextSecondary};
+                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: ${_sdds_platform_ai.surfacePositive};
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorHover}: ${_sdds_platform_ai.surfacePositiveHover};
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorActive}: ${_sdds_platform_ai.surfacePositiveActive};
 
                 ${_styledcomponents.buttonTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonTokens.buttonBackgroundColor});
             `,
             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.buttonColor}: ${_sdds_platform_ai.onDarkTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonTextColor}: ${_sdds_platform_ai.onDarkTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonIconColor}: ${_sdds_platform_ai.onDarkTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonValueColor}: ${_sdds_platform_ai.onDarkTextSecondary};
 
-                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: var(--surface-warning);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColorHover}: var(--surface-warning-hover);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColorActive}: var(--surface-warning-active);
+                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: ${_sdds_platform_ai.surfaceWarning};
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorHover}: ${_sdds_platform_ai.surfaceWarningHover};
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorActive}: ${_sdds_platform_ai.surfaceWarningActive};
 
                 ${_styledcomponents.buttonTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonTokens.buttonBackgroundColor});
             `,
             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.buttonColor}: ${_sdds_platform_ai.onDarkTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonTextColor}: ${_sdds_platform_ai.onDarkTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonIconColor}: ${_sdds_platform_ai.onDarkTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonValueColor}: ${_sdds_platform_ai.onDarkTextSecondary};
 
-                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: var(--surface-negative);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColorHover}: var(--surface-negative-hover);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColorActive}: var(--surface-negative-active);
+                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: ${_sdds_platform_ai.surfaceNegative};
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorHover}: ${_sdds_platform_ai.surfaceNegativeHover};
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorActive}: ${_sdds_platform_ai.surfaceNegativeActive};
 
                 ${_styledcomponents.buttonTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonTokens.buttonBackgroundColor});
             `,
             dark: (0, _styledcomponents.css)`
-                ${_styledcomponents.buttonTokens.buttonColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover);
-                ${_styledcomponents.buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active);
+                ${_styledcomponents.buttonTokens.buttonColor}: ${_sdds_platform_ai.onDarkTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonColorHover}: ${_sdds_platform_ai.onDarkTextPrimaryHover};
+                ${_styledcomponents.buttonTokens.buttonColorActive}: ${_sdds_platform_ai.onDarkTextPrimaryActive};
 
-                ${_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.buttonTextColor}: ${_sdds_platform_ai.onDarkTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonIconColor}: ${_sdds_platform_ai.onDarkTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonValueColor}: ${_sdds_platform_ai.onDarkTextSecondary};
 
-                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active);
+                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: ${_sdds_platform_ai.onLightSurfaceTransparentDeep};
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorHover}: ${_sdds_platform_ai.onLightSurfaceTransparentDeepHover};
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorActive}: ${_sdds_platform_ai.onLightSurfaceTransparentDeepActive};
 
                 ${_styledcomponents.buttonTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonTokens.buttonBackgroundColor});
             `,
             black: (0, _styledcomponents.css)`
-                ${_styledcomponents.buttonTokens.buttonColor}: var(--text-accent);
-                ${_styledcomponents.buttonTokens.buttonTextColor}: var(--text-accent);
-                ${_styledcomponents.buttonTokens.buttonIconColor}: var(--text-accent);
+                ${_styledcomponents.buttonTokens.buttonColor}: ${_sdds_platform_ai.textAccent};
+                ${_styledcomponents.buttonTokens.buttonTextColor}: ${_sdds_platform_ai.textAccent};
+                ${_styledcomponents.buttonTokens.buttonIconColor}: ${_sdds_platform_ai.textAccent};
 
-                ${_styledcomponents.buttonTokens.buttonValueColor}: var(--on-dark-text-secondary);
+                ${_styledcomponents.buttonTokens.buttonValueColor}: ${_sdds_platform_ai.onDarkTextSecondary};
 
-                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: var(--surface-solid-default);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active);
+                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: ${_sdds_platform_ai.surfaceSolidDefault};
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorHover}: ${_sdds_platform_ai.surfaceSolidDefaultHover};
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorActive}: ${_sdds_platform_ai.surfaceSolidDefaultActive};
 
                 ${_styledcomponents.buttonTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonTokens.buttonBackgroundColor});
             `,
             white: (0, _styledcomponents.css)`
-                ${_styledcomponents.buttonTokens.buttonColor}: var(--on-light-text-primary);
-                ${_styledcomponents.buttonTokens.buttonColorHover}: var(--on-light-text-primary-hover);
-                ${_styledcomponents.buttonTokens.buttonColorActive}: var(--on-light-text-primary-active);
+                ${_styledcomponents.buttonTokens.buttonColor}: ${_sdds_platform_ai.onLightTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonColorHover}: ${_sdds_platform_ai.onLightTextPrimaryHover};
+                ${_styledcomponents.buttonTokens.buttonColorActive}: ${_sdds_platform_ai.onLightTextPrimaryActive};
 
-                ${_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.buttonTextColor}: ${_sdds_platform_ai.onLightTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonIconColor}: ${_sdds_platform_ai.onLightTextPrimary};
+                ${_styledcomponents.buttonTokens.buttonValueColor}: ${_sdds_platform_ai.onLightTextSecondary};
 
-                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColorHover}: var(--surface-clear);
-                ${_styledcomponents.buttonTokens.buttonBackgroundColorActive}: var(--surface-clear);
+                ${_styledcomponents.buttonTokens.buttonBackgroundColor}: ${_sdds_platform_ai.onDarkSurfaceSolidDefault};
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorHover}: ${_sdds_platform_ai.surfaceClear};
+                ${_styledcomponents.buttonTokens.buttonBackgroundColorActive}: ${_sdds_platform_ai.surfaceClear};
 
                 ${_styledcomponents.buttonTokens.buttonLoadingBackgroundColor}: var(${_styledcomponents.buttonTokens.buttonBackgroundColor});
             `
@@ -151,12 +152,12 @@ const config = {
                 ${_styledcomponents.buttonTokens.buttonWidth}: 12.5rem;
                 ${_styledcomponents.buttonTokens.buttonPadding}: 1.75rem;
                 ${_styledcomponents.buttonTokens.buttonRadius}: 1rem;
-                ${_styledcomponents.buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family);
-                ${_styledcomponents.buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size);
-                ${_styledcomponents.buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style);
-                ${_styledcomponents.buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight);
-                ${_styledcomponents.buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${_styledcomponents.buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${_styledcomponents.buttonTokens.buttonFontFamily}: ${_sdds_platform_ai.bodyL.fontFamily};
+                ${_styledcomponents.buttonTokens.buttonFontSize}: ${_sdds_platform_ai.bodyL.fontSize};
+                ${_styledcomponents.buttonTokens.buttonFontStyle}: ${_sdds_platform_ai.bodyL.fontStyle};
+                ${_styledcomponents.buttonTokens.buttonFontWeight}: ${_sdds_platform_ai.bodyLBold.fontWeight};
+                ${_styledcomponents.buttonTokens.buttonLetterSpacing}: ${_sdds_platform_ai.bodyL.letterSpacing};
+                ${_styledcomponents.buttonTokens.buttonLineHeight}: ${_sdds_platform_ai.bodyL.lineHeight};
 
                 ${_styledcomponents.buttonTokens.buttonSpinnerSize}: 1.5rem;
                 ${_styledcomponents.buttonTokens.buttonSpinnerColor}: inherit;
@@ -173,12 +174,12 @@ const config = {
                 ${_styledcomponents.buttonTokens.buttonPadding}: 1.75rem;
                 ${_styledcomponents.buttonTokens.buttonRadius}: 0.875rem;
 
-                ${_styledcomponents.buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family);
-                ${_styledcomponents.buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size);
-                ${_styledcomponents.buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style);
-                ${_styledcomponents.buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight);
-                ${_styledcomponents.buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${_styledcomponents.buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${_styledcomponents.buttonTokens.buttonFontFamily}: ${_sdds_platform_ai.bodyL.fontFamily};
+                ${_styledcomponents.buttonTokens.buttonFontSize}: ${_sdds_platform_ai.bodyL.fontSize};
+                ${_styledcomponents.buttonTokens.buttonFontStyle}: ${_sdds_platform_ai.bodyL.fontStyle};
+                ${_styledcomponents.buttonTokens.buttonFontWeight}: ${_sdds_platform_ai.bodyLBold.fontWeight};
+                ${_styledcomponents.buttonTokens.buttonLetterSpacing}: ${_sdds_platform_ai.bodyL.letterSpacing};
+                ${_styledcomponents.buttonTokens.buttonLineHeight}: ${_sdds_platform_ai.bodyL.lineHeight};
 
                 ${_styledcomponents.buttonTokens.buttonSpinnerSize}: 1.375rem;
                 ${_styledcomponents.buttonTokens.buttonSpinnerColor}: inherit;
@@ -194,12 +195,12 @@ const config = {
                 ${_styledcomponents.buttonTokens.buttonWidth}: 11.25rem;
                 ${_styledcomponents.buttonTokens.buttonPadding}: 1.5rem;
                 ${_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_platform_ai.bodyM.fontFamily};
+                ${_styledcomponents.buttonTokens.buttonFontSize}: ${_sdds_platform_ai.bodyM.fontSize};
+                ${_styledcomponents.buttonTokens.buttonFontStyle}: ${_sdds_platform_ai.bodyM.fontStyle};
+                ${_styledcomponents.buttonTokens.buttonFontWeight}: ${_sdds_platform_ai.bodyMBold.fontWeight};
+                ${_styledcomponents.buttonTokens.buttonLetterSpacing}: ${_sdds_platform_ai.bodyM.letterSpacing};
+                ${_styledcomponents.buttonTokens.buttonLineHeight}: ${_sdds_platform_ai.bodyM.lineHeight};
 
                 ${_styledcomponents.buttonTokens.buttonSpinnerSize}: 1.375rem;
                 ${_styledcomponents.buttonTokens.buttonSpinnerColor}: inherit;
@@ -215,12 +216,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_platform_ai.bodyS.fontFamily};
+                ${_styledcomponents.buttonTokens.buttonFontSize}: ${_sdds_platform_ai.bodyS.fontSize};
+                ${_styledcomponents.buttonTokens.buttonFontStyle}: ${_sdds_platform_ai.bodyS.fontStyle};
+                ${_styledcomponents.buttonTokens.buttonFontWeight}: ${_sdds_platform_ai.bodySBold.fontWeight};
+                ${_styledcomponents.buttonTokens.buttonLetterSpacing}: ${_sdds_platform_ai.bodyS.letterSpacing};
+                ${_styledcomponents.buttonTokens.buttonLineHeight}: ${_sdds_platform_ai.bodyS.lineHeight};
 
                 ${_styledcomponents.buttonTokens.buttonSpinnerSize}: 1.375rem;
                 ${_styledcomponents.buttonTokens.buttonSpinnerColor}: inherit;
@@ -237,12 +238,12 @@ const config = {
                 ${_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_platform_ai.bodyXS.fontFamily};
+                ${_styledcomponents.buttonTokens.buttonFontSize}: ${_sdds_platform_ai.bodyXS.fontSize};
+                ${_styledcomponents.buttonTokens.buttonFontStyle}: ${_sdds_platform_ai.bodyXS.fontStyle};
+                ${_styledcomponents.buttonTokens.buttonFontWeight}: ${_sdds_platform_ai.bodyXSBold.fontWeight};
+                ${_styledcomponents.buttonTokens.buttonLetterSpacing}: ${_sdds_platform_ai.bodyXS.letterSpacing};
+                ${_styledcomponents.buttonTokens.buttonLineHeight}: ${_sdds_platform_ai.bodyXS.lineHeight};
 
                 ${_styledcomponents.buttonTokens.buttonSpinnerSize}: 1rem;
                 ${_styledcomponents.buttonTokens.buttonSpinnerColor}: inherit;
@@ -261,7 +262,7 @@ const config = {
         },
         focused: {
             true: (0, _styledcomponents.css)`
-                ${_styledcomponents.buttonTokens.buttonFocusColor}: var(--surface-accent);
+                ${_styledcomponents.buttonTokens.buttonFocusColor}: ${_sdds_platform_ai.surfaceAccent};
             `
         },
         stretching: {