@salutejs/sdds-scan 0.357.0-next-sbcom.0 → 0.358.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 { bodyM, bodyMBold, bodyS, bodySBold, bodyXS, bodyXSBold, inverseTextPrimary, inverseTextPrimaryActive, inverseTextPrimaryHover, inverseTextSecondary, onDarkSurfaceSolidDefault, onDarkTextPrimary, onDarkTextPrimaryActive, onDarkTextPrimaryHover, onDarkTextSecondary, onLightSurfaceSolidDefault, onLightSurfaceTransparentDeep, onLightTextPrimary, onLightTextPrimaryActive, onLightTextPrimaryHover, onLightTextSecondary, surfaceAccent, surfaceAccentActive, surfaceAccentHover, surfaceClear, surfaceNegative, surfaceNegativeActive, surfaceNegativeHover, surfacePositive, surfacePositiveActive, surfacePositiveHover, surfaceSolidDefault, surfaceTransparentSecondary, surfaceTransparentSecondaryActive, surfaceTransparentSecondaryHover, surfaceWarning, surfaceWarningActive, surfaceWarningHover, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_scan';
 export const config = {
     defaults: {
         view: 'default',
@@ -8,104 +9,104 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${buttonTokens.buttonColor}: var(--inverse-text-primary);
-                ${buttonTokens.buttonTextColor}: var(--inverse-text-primary);
-                ${buttonTokens.buttonIconColor}: var(--inverse-text-primary);
-                ${buttonTokens.buttonValueColor}: var(--inverse-text-secondary);
-                ${buttonTokens.buttonBackgroundColor}: var(--surface-solid-default);
+                ${buttonTokens.buttonColor}: ${inverseTextPrimary};
+                ${buttonTokens.buttonTextColor}: ${inverseTextPrimary};
+                ${buttonTokens.buttonIconColor}: ${inverseTextPrimary};
+                ${buttonTokens.buttonValueColor}: ${inverseTextSecondary};
+                ${buttonTokens.buttonBackgroundColor}: ${surfaceSolidDefault};
                 ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor});
-                ${buttonTokens.buttonColorHover}: var(--inverse-text-primary-hover);
-                ${buttonTokens.buttonColorActive}: var(--inverse-text-primary-active);
+                ${buttonTokens.buttonColorHover}: ${inverseTextPrimaryHover};
+                ${buttonTokens.buttonColorActive}: ${inverseTextPrimaryActive};
             `,
             accent: 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-accent);
+                ${buttonTokens.buttonColor}: ${onDarkTextPrimary};
+                ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary};
+                ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary};
+                ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary};
+                ${buttonTokens.buttonBackgroundColor}: ${surfaceAccent};
                 ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor});
-                ${buttonTokens.buttonBackgroundColorHover}: var(--surface-accent-hover);
-                ${buttonTokens.buttonBackgroundColorActive}: var(--surface-accent-active);
+                ${buttonTokens.buttonBackgroundColorHover}: ${surfaceAccentHover};
+                ${buttonTokens.buttonBackgroundColorActive}: ${surfaceAccentActive};
             `,
             secondary: css`
-                ${buttonTokens.buttonColor}: var(--text-primary);
-                ${buttonTokens.buttonTextColor}: var(--text-primary);
-                ${buttonTokens.buttonIconColor}: var(--text-primary);
-                ${buttonTokens.buttonValueColor}: var(--text-secondary);
-                ${buttonTokens.buttonBackgroundColor}: var(--surface-transparent-secondary);
+                ${buttonTokens.buttonColor}: ${textPrimary};
+                ${buttonTokens.buttonTextColor}: ${textPrimary};
+                ${buttonTokens.buttonIconColor}: ${textPrimary};
+                ${buttonTokens.buttonValueColor}: ${textSecondary};
+                ${buttonTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary};
                 ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor});
-                ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover);
-                ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active);
+                ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover};
+                ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive};
             `,
             clear: css`
-                ${buttonTokens.buttonColor}: var(--text-primary);
-                ${buttonTokens.buttonTextColor}: var(--text-primary);
-                ${buttonTokens.buttonIconColor}: var(--text-primary);
-                ${buttonTokens.buttonValueColor}: var(--text-secondary);
-                ${buttonTokens.buttonBackgroundColor}: var(--surface-clear);
+                ${buttonTokens.buttonColor}: ${textPrimary};
+                ${buttonTokens.buttonTextColor}: ${textPrimary};
+                ${buttonTokens.buttonIconColor}: ${textPrimary};
+                ${buttonTokens.buttonValueColor}: ${textSecondary};
+                ${buttonTokens.buttonBackgroundColor}: ${surfaceClear};
                 ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor});
-                ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover);
-                ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active);
+                ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover};
+                ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive};
             `,
             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.buttonColor}: ${onDarkTextPrimary};
+                ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary};
+                ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary};
+                ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary};
+                ${buttonTokens.buttonBackgroundColor}: ${surfacePositive};
                 ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor});
-                ${buttonTokens.buttonBackgroundColorHover}: var(--surface-positive-hover);
-                ${buttonTokens.buttonBackgroundColorActive}: var(--surface-positive-active);
+                ${buttonTokens.buttonBackgroundColorHover}: ${surfacePositiveHover};
+                ${buttonTokens.buttonBackgroundColorActive}: ${surfacePositiveActive};
             `,
             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.buttonBackgroundColor}: var(--surface-warning);
+                ${buttonTokens.buttonColor}: ${onDarkTextPrimary};
+                ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary};
+                ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary};
+                ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary};
+                ${buttonTokens.buttonBackgroundColor}: ${surfaceWarning};
                 ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor});
-                ${buttonTokens.buttonBackgroundColorHover}: var(--surface-warning-hover);
-                ${buttonTokens.buttonBackgroundColorActive}: var(--surface-warning-active);
+                ${buttonTokens.buttonBackgroundColorHover}: ${surfaceWarningHover};
+                ${buttonTokens.buttonBackgroundColorActive}: ${surfaceWarningActive};
             `,
             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.buttonBackgroundColor}: var(--surface-negative);
+                ${buttonTokens.buttonColor}: ${onDarkTextPrimary};
+                ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary};
+                ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary};
+                ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary};
+                ${buttonTokens.buttonBackgroundColor}: ${surfaceNegative};
                 ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor});
-                ${buttonTokens.buttonBackgroundColorHover}: var(--surface-negative-hover);
-                ${buttonTokens.buttonBackgroundColorActive}: var(--surface-negative-active);
+                ${buttonTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover};
+                ${buttonTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive};
             `,
             dark: 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(--on-light-surface-transparent-deep);
+                ${buttonTokens.buttonColor}: ${onDarkTextPrimary};
+                ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary};
+                ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary};
+                ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary};
+                ${buttonTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep};
                 ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor});
-                ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover);
-                ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active);
+                ${buttonTokens.buttonColorHover}: ${onDarkTextPrimaryHover};
+                ${buttonTokens.buttonColorActive}: ${onDarkTextPrimaryActive};
             `,
             black: 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(--on-light-surface-solid-default);
+                ${buttonTokens.buttonColor}: ${onDarkTextPrimary};
+                ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary};
+                ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary};
+                ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary};
+                ${buttonTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault};
                 ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor});
-                ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover);
-                ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active);
+                ${buttonTokens.buttonColorHover}: ${onDarkTextPrimaryHover};
+                ${buttonTokens.buttonColorActive}: ${onDarkTextPrimaryActive};
             `,
             white: css`
-                ${buttonTokens.buttonColor}: var(--on-light-text-primary);
-                ${buttonTokens.buttonTextColor}: var(--on-light-text-primary);
-                ${buttonTokens.buttonIconColor}: var(--on-light-text-primary);
-                ${buttonTokens.buttonValueColor}: var(--on-light-text-secondary);
-                ${buttonTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default);
+                ${buttonTokens.buttonColor}: ${onLightTextPrimary};
+                ${buttonTokens.buttonTextColor}: ${onLightTextPrimary};
+                ${buttonTokens.buttonIconColor}: ${onLightTextPrimary};
+                ${buttonTokens.buttonValueColor}: ${onLightTextSecondary};
+                ${buttonTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault};
                 ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor});
-                ${buttonTokens.buttonColorHover}: var(--on-light-text-primary-hover);
-                ${buttonTokens.buttonColorActive}: var(--on-light-text-primary-active);
+                ${buttonTokens.buttonColorHover}: ${onLightTextPrimaryHover};
+                ${buttonTokens.buttonColorActive}: ${onLightTextPrimaryActive};
             `
         },
         size: {
@@ -114,12 +115,12 @@ export const config = {
                 ${buttonTokens.buttonWidth}: 11.25rem;
                 ${buttonTokens.buttonPadding}: 1.25rem;
                 ${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;
@@ -135,12 +136,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;
@@ -156,12 +157,12 @@ export const config = {
                 ${buttonTokens.buttonWidth}: 10rem;
                 ${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;
@@ -180,7 +181,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 { bodyM, bodyMBold, bodyS, bodySBold, bodyXS, bodyXSBold, inverseTextPrimary, inverseTextSecondary, onDarkSurfaceSolidDefault, onDarkSurfaceSolidDefaultActive, onDarkSurfaceSolidDefaultHover, onDarkTextPrimary, onDarkTextSecondary, onLightSurfaceSolidDefault, onLightSurfaceSolidDefaultActive, onLightSurfaceSolidDefaultHover, onLightSurfaceTransparentDeep, onLightSurfaceTransparentDeepActive, onLightSurfaceTransparentDeepHover, onLightTextPrimary, onLightTextSecondary, surfaceAccent, surfaceAccentActive, surfaceAccentHover, surfaceClear, surfaceNegative, surfaceNegativeActive, surfaceNegativeHover, surfacePositive, surfacePositiveActive, surfacePositiveHover, surfaceSolidDefault, surfaceSolidDefaultActive, surfaceSolidDefaultHover, surfaceTransparentSecondary, surfaceTransparentSecondaryActive, surfaceTransparentSecondaryHover, surfaceWarning, surfaceWarningActive, surfaceWarningHover, textPrimary, textPrimaryActive, textPrimaryHover, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_scan';
 export const config = {
     defaults: {
         view: 'default',
@@ -7,124 +8,124 @@ 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.buttonBackgroundColor}: var(--surface-solid-default);
+                ${buttonGroupTokens.buttonColor}: ${inverseTextPrimary};
+                ${buttonGroupTokens.buttonTextColor}: ${inverseTextPrimary};
+                ${buttonGroupTokens.buttonIconColor}: ${inverseTextPrimary};
+                ${buttonGroupTokens.buttonValueColor}: ${inverseTextSecondary};
+                ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceSolidDefault};
                 ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor});
-                ${buttonGroupTokens.buttonColorHover}: var(--inverse-text-primary);
-                ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover);
-                ${buttonGroupTokens.buttonColorActive}: var(--inverse-text-primary);
-                ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active);
+                ${buttonGroupTokens.buttonColorHover}: ${inverseTextPrimary};
+                ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover};
+                ${buttonGroupTokens.buttonColorActive}: ${inverseTextPrimary};
+                ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive};
             `,
             accent: 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.buttonBackgroundColor}: var(--surface-accent);
+                ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary};
+                ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceAccent};
                 ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor});
-                ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary);
-                ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-accent-hover);
-                ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary);
-                ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-accent-active);
+                ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceAccentHover};
+                ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceAccentActive};
             `,
             secondary: 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-transparent-secondary);
+                ${buttonGroupTokens.buttonColor}: ${textPrimary};
+                ${buttonGroupTokens.buttonTextColor}: ${textPrimary};
+                ${buttonGroupTokens.buttonIconColor}: ${textPrimary};
+                ${buttonGroupTokens.buttonValueColor}: ${textSecondary};
+                ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary};
                 ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor});
-                ${buttonGroupTokens.buttonColorHover}: var(--text-primary);
-                ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover);
-                ${buttonGroupTokens.buttonColorActive}: var(--text-primary);
-                ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active);
+                ${buttonGroupTokens.buttonColorHover}: ${textPrimary};
+                ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover};
+                ${buttonGroupTokens.buttonColorActive}: ${textPrimary};
+                ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive};
             `,
             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.buttonColor}: ${textPrimary};
+                ${buttonGroupTokens.buttonTextColor}: ${textPrimary};
+                ${buttonGroupTokens.buttonIconColor}: ${textPrimary};
+                ${buttonGroupTokens.buttonValueColor}: ${textSecondary};
+                ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceClear};
                 ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor});
-                ${buttonGroupTokens.buttonColorHover}: var(--text-primary-hover);
-                ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-clear);
-                ${buttonGroupTokens.buttonColorActive}: var(--text-primary-active);
-                ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-clear);
+                ${buttonGroupTokens.buttonColorHover}: ${textPrimaryHover};
+                ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceClear};
+                ${buttonGroupTokens.buttonColorActive}: ${textPrimaryActive};
+                ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceClear};
             `,
             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.buttonBackgroundColor}: var(--surface-positive);
+                ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary};
+                ${buttonGroupTokens.buttonBackgroundColor}: ${surfacePositive};
                 ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor});
-                ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary);
-                ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-positive-hover);
-                ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary);
-                ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-positive-active);
+                ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfacePositiveHover};
+                ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfacePositiveActive};
             `,
             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.buttonBackgroundColor}: var(--surface-warning);
+                ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary};
+                ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceWarning};
                 ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor});
-                ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary);
-                ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-warning-hover);
-                ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary);
-                ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-warning-active);
+                ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceWarningHover};
+                ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceWarningActive};
             `,
             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.buttonBackgroundColor}: var(--surface-negative);
+                ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary};
+                ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceNegative};
                 ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor});
-                ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary);
-                ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-negative-hover);
-                ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary);
-                ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-negative-active);
+                ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover};
+                ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive};
             `,
             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.buttonBackgroundColor}: var(--on-light-surface-transparent-deep);
+                ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary};
+                ${buttonGroupTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep};
                 ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor});
-                ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary);
-                ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover);
-                ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary);
-                ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active);
+                ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover};
+                ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive};
             `,
             black: 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.buttonBackgroundColor}: var(--on-light-surface-solid-default);
+                ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary};
+                ${buttonGroupTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault};
                 ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor});
-                ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary);
-                ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-solid-default-hover);
-                ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary);
-                ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active);
+                ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover};
+                ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive};
             `,
             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.buttonBackgroundColor}: var(--on-dark-surface-solid-default);
+                ${buttonGroupTokens.buttonColor}: ${onLightTextPrimary};
+                ${buttonGroupTokens.buttonTextColor}: ${onLightTextPrimary};
+                ${buttonGroupTokens.buttonIconColor}: ${onLightTextPrimary};
+                ${buttonGroupTokens.buttonValueColor}: ${onLightTextSecondary};
+                ${buttonGroupTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault};
                 ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor});
-                ${buttonGroupTokens.buttonColorHover}: var(--on-light-text-primary);
-                ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover);
-                ${buttonGroupTokens.buttonColorActive}: var(--on-light-text-primary);
-                ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default-active);
+                ${buttonGroupTokens.buttonColorHover}: ${onLightTextPrimary};
+                ${buttonGroupTokens.buttonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover};
+                ${buttonGroupTokens.buttonColorActive}: ${onLightTextPrimary};
+                ${buttonGroupTokens.buttonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive};
             `
         },
         size: {
@@ -136,12 +137,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;
@@ -150,12 +151,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.125rem;
@@ -164,12 +165,12 @@ export const config = {
 
                 ${buttonGroupTokens.buttonHeight}: 2rem;
                 ${buttonGroupTokens.buttonPadding}: 0.75rem;
-                ${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: {