@salutejs/sdds-platform-ai 0.356.0-next-sbcom.0 → 0.357.0-dev.0

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

@@ -1,4 +1,5 @@
 import { css, buttonTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyL, bodyLBold, bodyM, bodyMBold, bodyS, bodySBold, bodyXS, bodyXSBold, inverseTextPrimary, inverseTextSecondary, onDarkSurfaceSolidDefault, onDarkTextPrimary, onDarkTextPrimaryActive, onDarkTextPrimaryHover, onDarkTextSecondary, onLightSurfaceTransparentDeep, onLightSurfaceTransparentDeepActive, onLightSurfaceTransparentDeepHover, onLightTextPrimary, onLightTextPrimaryActive, onLightTextPrimaryHover, onLightTextSecondary, outlineSolidDefault, outlineSolidDefaultActive, outlineSolidDefaultHover, surfaceAccent, surfaceAccentGradient, surfaceClear, surfaceNegative, surfaceNegativeActive, surfaceNegativeHover, surfacePositive, surfacePositiveActive, surfacePositiveHover, surfaceSolidDefault, surfaceSolidDefaultActive, surfaceSolidDefaultHover, surfaceTransparentSecondaryActive, surfaceTransparentSecondaryHover, surfaceWarning, surfaceWarningActive, surfaceWarningHover, textAccent, textPrimary, textPrimaryHover, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_platform_ai';
 export const config = {
     defaults: {
         view: 'default',
@@ -8,129 +9,129 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${buttonTokens.buttonColor}: var(--inverse-text-primary);
+                ${buttonTokens.buttonColor}: ${inverseTextPrimary};
 
-                ${buttonTokens.buttonTextColor}: var(--inverse-text-primary);
-                ${buttonTokens.buttonIconColor}: var(--inverse-text-primary);
-                ${buttonTokens.buttonValueColor}: var(--inverse-text-secondary);
+                ${buttonTokens.buttonTextColor}: ${inverseTextPrimary};
+                ${buttonTokens.buttonIconColor}: ${inverseTextPrimary};
+                ${buttonTokens.buttonValueColor}: ${inverseTextSecondary};
 
-                ${buttonTokens.buttonBackgroundColor}: var(--surface-solid-default);
-                ${buttonTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover);
-                ${buttonTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active);
+                ${buttonTokens.buttonBackgroundColor}: ${surfaceSolidDefault};
+                ${buttonTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover};
+                ${buttonTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive};
 
                 ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor});
             `,
             accent: css`
-                ${buttonTokens.buttonColor}: var(--text-primary);
-                ${buttonTokens.buttonTextColor}: var(--text-primary);
-                ${buttonTokens.buttonIconColor}: var(--text-primary);
+                ${buttonTokens.buttonColor}: ${textPrimary};
+                ${buttonTokens.buttonTextColor}: ${textPrimary};
+                ${buttonTokens.buttonIconColor}: ${textPrimary};
 
-                ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary);
+                ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary};
 
-                ${buttonTokens.buttonBackgroundColor}: var(--surface-accent-gradient);
+                ${buttonTokens.buttonBackgroundColor}: ${surfaceAccentGradient};
                 ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor});
             `,
             secondary: css`
-                ${buttonTokens.buttonColor}: var(--text-primary);
-                ${buttonTokens.buttonColorHover}: var(--text-primary-hover);
-                ${buttonTokens.buttonIconColor}: var(--text-primary);
+                ${buttonTokens.buttonColor}: ${textPrimary};
+                ${buttonTokens.buttonColorHover}: ${textPrimaryHover};
+                ${buttonTokens.buttonIconColor}: ${textPrimary};
 
-                ${buttonTokens.buttonValueColor}: var(--text-secondary);
+                ${buttonTokens.buttonValueColor}: ${textSecondary};
 
                 ${buttonTokens.buttonBackgroundColor}: transparent;
                 ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor});
 
-                ${buttonTokens.buttonBorderColor}: var(--outline-solid-default);
-                ${buttonTokens.buttonBorderColorHover}: var(--outline-solid-default-hover);
-                ${buttonTokens.buttonBorderColorActive}: var(--outline-solid-default-active);
+                ${buttonTokens.buttonBorderColor}: ${outlineSolidDefault};
+                ${buttonTokens.buttonBorderColorHover}: ${outlineSolidDefaultHover};
+                ${buttonTokens.buttonBorderColorActive}: ${outlineSolidDefaultActive};
             `,
             clear: css`
-                ${buttonTokens.buttonColor}: var(--text-primary);
-                ${buttonTokens.buttonTextColor}: var(--text-primary);
-                ${buttonTokens.buttonIconColor}: var(--text-primary);
-                ${buttonTokens.buttonValueColor}: var(--text-secondary);
+                ${buttonTokens.buttonColor}: ${textPrimary};
+                ${buttonTokens.buttonTextColor}: ${textPrimary};
+                ${buttonTokens.buttonIconColor}: ${textPrimary};
+                ${buttonTokens.buttonValueColor}: ${textSecondary};
 
-                ${buttonTokens.buttonBackgroundColor}: var(--surface-clear);
-                ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover);
-                ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active);
+                ${buttonTokens.buttonBackgroundColor}: ${surfaceClear};
+                ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover};
+                ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive};
 
                 ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor});
             `,
             positive: css`
-                ${buttonTokens.buttonColor}: var(--on-dark-text-primary);
-                ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary);
-                ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary);
-                ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary);
-                ${buttonTokens.buttonBackgroundColor}: var(--surface-positive);
-                ${buttonTokens.buttonBackgroundColorHover}: var(--surface-positive-hover);
-                ${buttonTokens.buttonBackgroundColorActive}: var(--surface-positive-active);
+                ${buttonTokens.buttonColor}: ${onDarkTextPrimary};
+                ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary};
+                ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary};
+                ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary};
+                ${buttonTokens.buttonBackgroundColor}: ${surfacePositive};
+                ${buttonTokens.buttonBackgroundColorHover}: ${surfacePositiveHover};
+                ${buttonTokens.buttonBackgroundColorActive}: ${surfacePositiveActive};
 
                 ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor});
             `,
             warning: css`
-                ${buttonTokens.buttonColor}: var(--on-dark-text-primary);
-                ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary);
-                ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary);
-                ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary);
+                ${buttonTokens.buttonColor}: ${onDarkTextPrimary};
+                ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary};
+                ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary};
+                ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary};
 
-                ${buttonTokens.buttonBackgroundColor}: var(--surface-warning);
-                ${buttonTokens.buttonBackgroundColorHover}: var(--surface-warning-hover);
-                ${buttonTokens.buttonBackgroundColorActive}: var(--surface-warning-active);
+                ${buttonTokens.buttonBackgroundColor}: ${surfaceWarning};
+                ${buttonTokens.buttonBackgroundColorHover}: ${surfaceWarningHover};
+                ${buttonTokens.buttonBackgroundColorActive}: ${surfaceWarningActive};
 
                 ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor});
             `,
             negative: css`
-                ${buttonTokens.buttonColor}: var(--on-dark-text-primary);
-                ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary);
-                ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary);
-                ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary);
+                ${buttonTokens.buttonColor}: ${onDarkTextPrimary};
+                ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary};
+                ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary};
+                ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary};
 
-                ${buttonTokens.buttonBackgroundColor}: var(--surface-negative);
-                ${buttonTokens.buttonBackgroundColorHover}: var(--surface-negative-hover);
-                ${buttonTokens.buttonBackgroundColorActive}: var(--surface-negative-active);
+                ${buttonTokens.buttonBackgroundColor}: ${surfaceNegative};
+                ${buttonTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover};
+                ${buttonTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive};
 
                 ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor});
             `,
             dark: css`
-                ${buttonTokens.buttonColor}: var(--on-dark-text-primary);
-                ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover);
-                ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active);
+                ${buttonTokens.buttonColor}: ${onDarkTextPrimary};
+                ${buttonTokens.buttonColorHover}: ${onDarkTextPrimaryHover};
+                ${buttonTokens.buttonColorActive}: ${onDarkTextPrimaryActive};
 
-                ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary);
-                ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary);
-                ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary);
+                ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary};
+                ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary};
+                ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary};
 
-                ${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep);
-                ${buttonTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover);
-                ${buttonTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active);
+                ${buttonTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep};
+                ${buttonTokens.buttonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover};
+                ${buttonTokens.buttonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive};
 
                 ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor});
             `,
             black: css`
-                ${buttonTokens.buttonColor}: var(--text-accent);
-                ${buttonTokens.buttonTextColor}: var(--text-accent);
-                ${buttonTokens.buttonIconColor}: var(--text-accent);
+                ${buttonTokens.buttonColor}: ${textAccent};
+                ${buttonTokens.buttonTextColor}: ${textAccent};
+                ${buttonTokens.buttonIconColor}: ${textAccent};
 
-                ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary);
+                ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary};
 
-                ${buttonTokens.buttonBackgroundColor}: var(--surface-solid-default);
-                ${buttonTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover);
-                ${buttonTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active);
+                ${buttonTokens.buttonBackgroundColor}: ${surfaceSolidDefault};
+                ${buttonTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover};
+                ${buttonTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive};
 
                 ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor});
             `,
             white: css`
-                ${buttonTokens.buttonColor}: var(--on-light-text-primary);
-                ${buttonTokens.buttonColorHover}: var(--on-light-text-primary-hover);
-                ${buttonTokens.buttonColorActive}: var(--on-light-text-primary-active);
+                ${buttonTokens.buttonColor}: ${onLightTextPrimary};
+                ${buttonTokens.buttonColorHover}: ${onLightTextPrimaryHover};
+                ${buttonTokens.buttonColorActive}: ${onLightTextPrimaryActive};
 
-                ${buttonTokens.buttonTextColor}: var(--on-light-text-primary);
-                ${buttonTokens.buttonIconColor}: var(--on-light-text-primary);
-                ${buttonTokens.buttonValueColor}: var(--on-light-text-secondary);
+                ${buttonTokens.buttonTextColor}: ${onLightTextPrimary};
+                ${buttonTokens.buttonIconColor}: ${onLightTextPrimary};
+                ${buttonTokens.buttonValueColor}: ${onLightTextSecondary};
 
-                ${buttonTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default);
-                ${buttonTokens.buttonBackgroundColorHover}: var(--surface-clear);
-                ${buttonTokens.buttonBackgroundColorActive}: var(--surface-clear);
+                ${buttonTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault};
+                ${buttonTokens.buttonBackgroundColorHover}: ${surfaceClear};
+                ${buttonTokens.buttonBackgroundColorActive}: ${surfaceClear};
 
                 ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor});
             `
@@ -141,12 +142,12 @@ export const config = {
                 ${buttonTokens.buttonWidth}: 12.5rem;
                 ${buttonTokens.buttonPadding}: 1.75rem;
                 ${buttonTokens.buttonRadius}: 1rem;
-                ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family);
-                ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size);
-                ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style);
-                ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight);
-                ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${buttonTokens.buttonFontFamily}: ${bodyL.fontFamily};
+                ${buttonTokens.buttonFontSize}: ${bodyL.fontSize};
+                ${buttonTokens.buttonFontStyle}: ${bodyL.fontStyle};
+                ${buttonTokens.buttonFontWeight}: ${bodyLBold.fontWeight};
+                ${buttonTokens.buttonLetterSpacing}: ${bodyL.letterSpacing};
+                ${buttonTokens.buttonLineHeight}: ${bodyL.lineHeight};
 
                 ${buttonTokens.buttonSpinnerSize}: 1.5rem;
                 ${buttonTokens.buttonSpinnerColor}: inherit;
@@ -163,12 +164,12 @@ export const config = {
                 ${buttonTokens.buttonPadding}: 1.75rem;
                 ${buttonTokens.buttonRadius}: 0.875rem;
 
-                ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family);
-                ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size);
-                ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style);
-                ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight);
-                ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${buttonTokens.buttonFontFamily}: ${bodyL.fontFamily};
+                ${buttonTokens.buttonFontSize}: ${bodyL.fontSize};
+                ${buttonTokens.buttonFontStyle}: ${bodyL.fontStyle};
+                ${buttonTokens.buttonFontWeight}: ${bodyLBold.fontWeight};
+                ${buttonTokens.buttonLetterSpacing}: ${bodyL.letterSpacing};
+                ${buttonTokens.buttonLineHeight}: ${bodyL.lineHeight};
 
                 ${buttonTokens.buttonSpinnerSize}: 1.375rem;
                 ${buttonTokens.buttonSpinnerColor}: inherit;
@@ -184,12 +185,12 @@ export const config = {
                 ${buttonTokens.buttonWidth}: 11.25rem;
                 ${buttonTokens.buttonPadding}: 1.5rem;
                 ${buttonTokens.buttonRadius}: 0.75rem;
-                ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size);
-                ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
-                ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${buttonTokens.buttonFontFamily}: ${bodyM.fontFamily};
+                ${buttonTokens.buttonFontSize}: ${bodyM.fontSize};
+                ${buttonTokens.buttonFontStyle}: ${bodyM.fontStyle};
+                ${buttonTokens.buttonFontWeight}: ${bodyMBold.fontWeight};
+                ${buttonTokens.buttonLetterSpacing}: ${bodyM.letterSpacing};
+                ${buttonTokens.buttonLineHeight}: ${bodyM.lineHeight};
 
                 ${buttonTokens.buttonSpinnerSize}: 1.375rem;
                 ${buttonTokens.buttonSpinnerColor}: inherit;
@@ -205,12 +206,12 @@ export const config = {
                 ${buttonTokens.buttonWidth}: 11.25rem;
                 ${buttonTokens.buttonPadding}: 1rem;
                 ${buttonTokens.buttonRadius}: 0.625rem;
-                ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size);
-                ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${buttonTokens.buttonFontFamily}: ${bodyS.fontFamily};
+                ${buttonTokens.buttonFontSize}: ${bodyS.fontSize};
+                ${buttonTokens.buttonFontStyle}: ${bodyS.fontStyle};
+                ${buttonTokens.buttonFontWeight}: ${bodySBold.fontWeight};
+                ${buttonTokens.buttonLetterSpacing}: ${bodyS.letterSpacing};
+                ${buttonTokens.buttonLineHeight}: ${bodyS.lineHeight};
 
                 ${buttonTokens.buttonSpinnerSize}: 1.375rem;
                 ${buttonTokens.buttonSpinnerColor}: inherit;
@@ -227,12 +228,12 @@ export const config = {
                 ${buttonTokens.buttonPadding}: 0.75rem;
                 ${buttonTokens.buttonRadius}: 0.5rem;
 
-                ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight);
-                ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily};
+                ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize};
+                ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle};
+                ${buttonTokens.buttonFontWeight}: ${bodyXSBold.fontWeight};
+                ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing};
+                ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight};
 
                 ${buttonTokens.buttonSpinnerSize}: 1rem;
                 ${buttonTokens.buttonSpinnerColor}: inherit;
@@ -251,7 +252,7 @@ export const config = {
         },
         focused: {
             true: css`
-                ${buttonTokens.buttonFocusColor}: var(--surface-accent);
+                ${buttonTokens.buttonFocusColor}: ${surfaceAccent};
             `
         },
         stretching: {

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

@@ -1,4 +1,5 @@
 import { css, buttonGroupTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyL, bodyLBold, bodyM, bodyMBold, bodyS, bodySBold, bodyXS, bodyXSBold, inverseTextPrimary, inverseTextSecondary, onDarkSurfaceSolidDefault, onDarkTextPrimary, onDarkTextSecondary, onLightSurfaceTransparentDeep, onLightSurfaceTransparentDeepActive, onLightSurfaceTransparentDeepHover, onLightTextPrimary, onLightTextSecondary, outlineSolidDefault, outlineSolidDefaultActive, outlineSolidDefaultHover, surfaceAccentGradient, surfaceClear, surfaceNegative, surfaceNegativeActive, surfaceNegativeHover, surfacePositive, surfacePositiveActive, surfacePositiveHover, surfaceSolidDefault, surfaceSolidDefaultActive, surfaceSolidDefaultHover, surfaceWarning, surfaceWarningActive, surfaceWarningHover, textAccent, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_platform_ai';
 export const config = {
     defaults: {
         view: 'default',
@@ -7,123 +8,123 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${buttonGroupTokens.buttonColor}: var(--inverse-text-primary);
-                ${buttonGroupTokens.buttonTextColor}: var(--inverse-text-primary);
-                ${buttonGroupTokens.buttonIconColor}: var(--inverse-text-primary);
-                ${buttonGroupTokens.buttonValueColor}: var(--inverse-text-secondary);
+                ${buttonGroupTokens.buttonColor}: ${inverseTextPrimary};
+                ${buttonGroupTokens.buttonTextColor}: ${inverseTextPrimary};
+                ${buttonGroupTokens.buttonIconColor}: ${inverseTextPrimary};
+                ${buttonGroupTokens.buttonValueColor}: ${inverseTextSecondary};
 
-                ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-solid-default);
-                ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover);
-                ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active);
+                ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceSolidDefault};
+                ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover};
+                ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive};
 
                 ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor});
             `,
             accent: css`
-                ${buttonGroupTokens.buttonColor}: var(--text-primary);
-                ${buttonGroupTokens.buttonTextColor}: var(--text-primary);
-                ${buttonGroupTokens.buttonIconColor}: var(--text-primary);
+                ${buttonGroupTokens.buttonColor}: ${textPrimary};
+                ${buttonGroupTokens.buttonTextColor}: ${textPrimary};
+                ${buttonGroupTokens.buttonIconColor}: ${textPrimary};
 
-                ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary);
+                ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary};
 
-                ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-accent-gradient);
+                ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceAccentGradient};
 
                 ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor});
             `,
             secondary: css`
-                ${buttonGroupTokens.buttonColor}: var(--text-primary);
-                ${buttonGroupTokens.buttonTextColor}: var(--text-primary);
-                ${buttonGroupTokens.buttonIconColor}: var(--text-primary);
+                ${buttonGroupTokens.buttonColor}: ${textPrimary};
+                ${buttonGroupTokens.buttonTextColor}: ${textPrimary};
+                ${buttonGroupTokens.buttonIconColor}: ${textPrimary};
 
-                ${buttonGroupTokens.buttonValueColor}: var(--text-secondary);
+                ${buttonGroupTokens.buttonValueColor}: ${textSecondary};
 
                 ${buttonGroupTokens.buttonBackgroundColor}: transparent;
                 ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor});
 
-                ${buttonGroupTokens.buttonBorderColor}: var(--outline-solid-default);
-                ${buttonGroupTokens.buttonBorderColorHover}: var(--outline-solid-default-hover);
-                ${buttonGroupTokens.buttonBorderColorActive}: var(--outline-solid-default-active);
+                ${buttonGroupTokens.buttonBorderColor}: ${outlineSolidDefault};
+                ${buttonGroupTokens.buttonBorderColorHover}: ${outlineSolidDefaultHover};
+                ${buttonGroupTokens.buttonBorderColorActive}: ${outlineSolidDefaultActive};
             `,
             clear: css`
-                ${buttonGroupTokens.buttonColor}: var(--text-primary);
-                ${buttonGroupTokens.buttonTextColor}: var(--text-primary);
-                ${buttonGroupTokens.buttonIconColor}: var(--text-primary);
-                ${buttonGroupTokens.buttonValueColor}: var(--text-secondary);
-
-                ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-clear);
-                ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default);
-                ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default);
+                ${buttonGroupTokens.buttonColor}: ${textPrimary};
+                ${buttonGroupTokens.buttonTextColor}: ${textPrimary};
+                ${buttonGroupTokens.buttonIconColor}: ${textPrimary};
+                ${buttonGroupTokens.buttonValueColor}: ${textSecondary};
+
+                ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceClear};
+                ${buttonGroupTokens.buttonBackgroundColorHover}: ${onDarkSurfaceSolidDefault};
+                ${buttonGroupTokens.buttonBackgroundColorActive}: ${onDarkSurfaceSolidDefault};
                 ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor});
             `,
             positive: css`
-                ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary);
-                ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary);
-                ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary);
-                ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary);
+                ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary};
 
-                ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-positive);
-                ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-positive-hover);
-                ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-positive-active);
+                ${buttonGroupTokens.buttonBackgroundColor}: ${surfacePositive};
+                ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfacePositiveHover};
+                ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfacePositiveActive};
 
                 ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor});
             `,
             warning: css`
-                ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary);
-                ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary);
-                ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary);
-                ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary);
+                ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary};
 
-                ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-warning);
-                ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-warning-hover);
-                ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-warning-active);
+                ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceWarning};
+                ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceWarningHover};
+                ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceWarningActive};
 
                 ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor});
             `,
             negative: css`
-                ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary);
-                ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary);
-                ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary);
-                ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary);
+                ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary};
 
-                ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-negative);
-                ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-negative-hover);
-                ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-negative-active);
+                ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceNegative};
+                ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover};
+                ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive};
 
                 ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor});
             `,
             dark: css`
-                ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary);
-                ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary);
-                ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary);
-                ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary);
+                ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary};
 
-                ${buttonGroupTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep);
-                ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover);
-                ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active);
+                ${buttonGroupTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep};
+                ${buttonGroupTokens.buttonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover};
+                ${buttonGroupTokens.buttonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive};
 
                 ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor});
             `,
             black: css`
-                ${buttonGroupTokens.buttonColor}: var(--text-accent);
-                ${buttonGroupTokens.buttonTextColor}: var(--text-accent);
-                ${buttonGroupTokens.buttonIconColor}: var(--text-accent);
+                ${buttonGroupTokens.buttonColor}: ${textAccent};
+                ${buttonGroupTokens.buttonTextColor}: ${textAccent};
+                ${buttonGroupTokens.buttonIconColor}: ${textAccent};
 
-                ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary);
+                ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary};
 
-                ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-solid-default);
-                ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover);
-                ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active);
+                ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceSolidDefault};
+                ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover};
+                ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive};
 
                 ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor});
             `,
             white: css`
-                ${buttonGroupTokens.buttonColor}: var(--on-light-text-primary);
-                ${buttonGroupTokens.buttonTextColor}: var(--on-light-text-primary);
-                ${buttonGroupTokens.buttonIconColor}: var(--on-light-text-primary);
-                ${buttonGroupTokens.buttonValueColor}: var(--on-light-text-secondary);
+                ${buttonGroupTokens.buttonColor}: ${onLightTextPrimary};
+                ${buttonGroupTokens.buttonTextColor}: ${onLightTextPrimary};
+                ${buttonGroupTokens.buttonIconColor}: ${onLightTextPrimary};
+                ${buttonGroupTokens.buttonValueColor}: ${onLightTextSecondary};
 
-                ${buttonGroupTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default);
-                ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-clear);
-                ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-clear);
+                ${buttonGroupTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault};
+                ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceClear};
+                ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceClear};
 
                 ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor});
             `
@@ -136,12 +137,12 @@ export const config = {
 
                 ${buttonGroupTokens.buttonHeight}: 4rem;
                 ${buttonGroupTokens.buttonPadding}: 1.75rem;
-                ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family);
-                ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size);
-                ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style);
-                ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight);
-                ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${buttonGroupTokens.buttonFontFamily}: ${bodyL.fontFamily};
+                ${buttonGroupTokens.buttonFontSize}: ${bodyL.fontSize};
+                ${buttonGroupTokens.buttonFontStyle}: ${bodyL.fontStyle};
+                ${buttonGroupTokens.buttonFontWeight}: ${bodyLBold.fontWeight};
+                ${buttonGroupTokens.buttonLetterSpacing}: ${bodyL.letterSpacing};
+                ${buttonGroupTokens.buttonLineHeight}: ${bodyL.lineHeight};
             `,
             l: css`
                 ${buttonGroupTokens.buttonSegmentedRadius}: 0.375rem;
@@ -151,12 +152,12 @@ export const config = {
                 ${buttonGroupTokens.buttonHeight}: 3.5rem;
                 ${buttonGroupTokens.buttonPadding}: 1.75rem;
 
-                ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family);
-                ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size);
-                ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style);
-                ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight);
-                ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${buttonGroupTokens.buttonFontFamily}: ${bodyL.fontFamily};
+                ${buttonGroupTokens.buttonFontSize}: ${bodyL.fontSize};
+                ${buttonGroupTokens.buttonFontStyle}: ${bodyL.fontStyle};
+                ${buttonGroupTokens.buttonFontWeight}: ${bodyLBold.fontWeight};
+                ${buttonGroupTokens.buttonLetterSpacing}: ${bodyL.letterSpacing};
+                ${buttonGroupTokens.buttonLineHeight}: ${bodyL.lineHeight};
             `,
             m: css`
                 ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem;
@@ -166,12 +167,12 @@ export const config = {
                 ${buttonGroupTokens.buttonHeight}: 3rem;
                 ${buttonGroupTokens.buttonPadding}: 1.25rem;
 
-                ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size);
-                ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
-                ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${buttonGroupTokens.buttonFontFamily}: ${bodyM.fontFamily};
+                ${buttonGroupTokens.buttonFontSize}: ${bodyM.fontSize};
+                ${buttonGroupTokens.buttonFontStyle}: ${bodyM.fontStyle};
+                ${buttonGroupTokens.buttonFontWeight}: ${bodyMBold.fontWeight};
+                ${buttonGroupTokens.buttonLetterSpacing}: ${bodyM.letterSpacing};
+                ${buttonGroupTokens.buttonLineHeight}: ${bodyM.lineHeight};
             `,
             s: css`
                 ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem;
@@ -180,12 +181,12 @@ export const config = {
 
                 ${buttonGroupTokens.buttonHeight}: 2.5rem;
                 ${buttonGroupTokens.buttonPadding}: 1rem;
-                ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size);
-                ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${buttonGroupTokens.buttonFontFamily}: ${bodyS.fontFamily};
+                ${buttonGroupTokens.buttonFontSize}: ${bodyS.fontSize};
+                ${buttonGroupTokens.buttonFontStyle}: ${bodyS.fontStyle};
+                ${buttonGroupTokens.buttonFontWeight}: ${bodySBold.fontWeight};
+                ${buttonGroupTokens.buttonLetterSpacing}: ${bodyS.letterSpacing};
+                ${buttonGroupTokens.buttonLineHeight}: ${bodyS.lineHeight};
             `,
             xs: css`
                 ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem;
@@ -194,12 +195,12 @@ export const config = {
 
                 ${buttonGroupTokens.buttonHeight}: 2.5rem;
                 ${buttonGroupTokens.buttonPadding}: 1rem;
-                ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight);
-                ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${buttonGroupTokens.buttonFontFamily}: ${bodyXS.fontFamily};
+                ${buttonGroupTokens.buttonFontSize}: ${bodyXS.fontSize};
+                ${buttonGroupTokens.buttonFontStyle}: ${bodyXS.fontStyle};
+                ${buttonGroupTokens.buttonFontWeight}: ${bodyXSBold.fontWeight};
+                ${buttonGroupTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing};
+                ${buttonGroupTokens.buttonLineHeight}: ${bodyXS.lineHeight};
             `
         },
         orientation: {