@salutejs/sdds-cs 0.362.0-next-sbcom.0 → 0.362.0

package/dist/emotion/cjs/components/Attach/Attach.config.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "config", {
         return config;
     }
 });
+const _sdds_cs = require("@salutejs/sdds-themes/tokens/sdds_cs");
 const _emotion = require("@salutejs/plasma-new-hope/emotion");
 const config = {
     defaults: {
@@ -19,135 +20,135 @@ const config = {
     variations: {
         view: {
             accent: (0, _emotion.css)`
-                ${_emotion.attachTokens.buttonColor}: var(--on-dark-text-primary);
-                ${_emotion.attachTokens.buttonValueColor}: var(--on-light-text-accent-minor);
-                ${_emotion.attachTokens.buttonBackgroundColor}: var(--surface-accent);
+                ${_emotion.attachTokens.buttonColor}: ${_sdds_cs.onDarkTextPrimary};
+                ${_emotion.attachTokens.buttonValueColor}: ${_sdds_cs.onLightTextAccentMinor};
+                ${_emotion.attachTokens.buttonBackgroundColor}: ${_sdds_cs.surfaceAccent};
                 ${_emotion.attachTokens.buttonLoadingBackgroundColor}: var(${_emotion.attachTokens.buttonBackgroundColor});
-                ${_emotion.attachTokens.buttonColorHover}: var(--on-dark-text-primary);
-                ${_emotion.attachTokens.buttonBackgroundColorHover}: var(--surface-accent-hover);
-                ${_emotion.attachTokens.buttonColorActive}: var(--on-dark-text-primary);
-                ${_emotion.attachTokens.buttonBackgroundColorActive}: var(--surface-accent-active);
+                ${_emotion.attachTokens.buttonColorHover}: ${_sdds_cs.onDarkTextPrimary};
+                ${_emotion.attachTokens.buttonBackgroundColorHover}: ${_sdds_cs.surfaceAccentHover};
+                ${_emotion.attachTokens.buttonColorActive}: ${_sdds_cs.onDarkTextPrimary};
+                ${_emotion.attachTokens.buttonBackgroundColorActive}: ${_sdds_cs.surfaceAccentActive};
 
                 ${_emotion.attachTokens.buttonDisabledOpacity}: 0.4;
-                ${_emotion.attachTokens.buttonFocusColor}: var(--surface-accent);
+                ${_emotion.attachTokens.buttonFocusColor}: ${_sdds_cs.surfaceAccent};
 
-                ${_emotion.attachTokens.cellColor}: var(--text-primary);
-                ${_emotion.attachTokens.cellLabelColor}: var(--text-secondary);
-                ${_emotion.attachTokens.cellTitleColor}: var(--text-primary);
-                ${_emotion.attachTokens.cellSubtitleColor}: var(--text-secondary);
+                ${_emotion.attachTokens.cellColor}: ${_sdds_cs.textPrimary};
+                ${_emotion.attachTokens.cellLabelColor}: ${_sdds_cs.textSecondary};
+                ${_emotion.attachTokens.cellTitleColor}: ${_sdds_cs.textPrimary};
+                ${_emotion.attachTokens.cellSubtitleColor}: ${_sdds_cs.textSecondary};
                 ${_emotion.attachTokens.cellBackgroundColor}: transparent;
 
-                ${_emotion.attachTokens.iconButtonColor}: var(--on-dark-text-primary);
-                ${_emotion.attachTokens.iconButtonBackgroundColor}: var(--surface-accent);
+                ${_emotion.attachTokens.iconButtonColor}: ${_sdds_cs.onDarkTextPrimary};
+                ${_emotion.attachTokens.iconButtonBackgroundColor}: ${_sdds_cs.surfaceAccent};
                 ${_emotion.attachTokens.iconButtonLoadingBackgroundColor}: var(${_emotion.attachTokens.iconButtonBackgroundColor});
-                ${_emotion.attachTokens.iconButtonColorHover}: var(--on-dark-text-primary);
-                ${_emotion.attachTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover);
-                ${_emotion.attachTokens.iconButtonColorActive}: var(--on-dark-text-primary);
-                ${_emotion.attachTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active);
+                ${_emotion.attachTokens.iconButtonColorHover}: ${_sdds_cs.onDarkTextPrimary};
+                ${_emotion.attachTokens.iconButtonBackgroundColorHover}: ${_sdds_cs.surfaceAccentHover};
+                ${_emotion.attachTokens.iconButtonColorActive}: ${_sdds_cs.onDarkTextPrimary};
+                ${_emotion.attachTokens.iconButtonBackgroundColorActive}: ${_sdds_cs.surfaceAccentActive};
 
                 ${_emotion.attachTokens.iconButtonDisabledOpacity}: 0.4;
-                ${_emotion.attachTokens.iconButtonFocusColor}: var(--surface-accent);
+                ${_emotion.attachTokens.iconButtonFocusColor}: ${_sdds_cs.surfaceAccent};
 
-                ${_emotion.attachTokens.iconButtonCancelColor}: var(--text-secondary);
-                ${_emotion.attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear);
+                ${_emotion.attachTokens.iconButtonCancelColor}: ${_sdds_cs.textSecondary};
+                ${_emotion.attachTokens.iconButtonCancelBackgroundColor}: ${_sdds_cs.surfaceClear};
                 ${_emotion.attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${_emotion.attachTokens.iconButtonCancelBackgroundColor});
-                ${_emotion.attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover);
-                ${_emotion.attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear);
-                ${_emotion.attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active);
-                ${_emotion.attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear);
+                ${_emotion.attachTokens.iconButtonCancelColorHover}: ${_sdds_cs.textSecondaryHover};
+                ${_emotion.attachTokens.iconButtonCancelBackgroundColorHover}: ${_sdds_cs.surfaceClear};
+                ${_emotion.attachTokens.iconButtonCancelColorActive}: ${_sdds_cs.textSecondaryActive};
+                ${_emotion.attachTokens.iconButtonCancelBackgroundColorActive}: ${_sdds_cs.surfaceClear};
 
                 ${_emotion.attachTokens.iconButtonCancelDisabledOpacity}: 0.4;
-                ${_emotion.attachTokens.iconButtonCancelFocusColor}: var(--surface-accent);
+                ${_emotion.attachTokens.iconButtonCancelFocusColor}: ${_sdds_cs.surfaceAccent};
             `,
             secondary: (0, _emotion.css)`
-                ${_emotion.attachTokens.buttonColor}: var(--text-accent);
-                ${_emotion.attachTokens.buttonValueColor}: var(--text-secondary);
-                ${_emotion.attachTokens.buttonBackgroundColor}: var(--surface-solid-primary);
+                ${_emotion.attachTokens.buttonColor}: ${_sdds_cs.textAccent};
+                ${_emotion.attachTokens.buttonValueColor}: ${_sdds_cs.textSecondary};
+                ${_emotion.attachTokens.buttonBackgroundColor}: ${_sdds_cs.surfaceSolidPrimary};
                 ${_emotion.attachTokens.buttonLoadingBackgroundColor}: var(${_emotion.attachTokens.buttonBackgroundColor});
-                ${_emotion.attachTokens.buttonColorHover}: var(--text-accent-minor);
-                ${_emotion.attachTokens.buttonBackgroundColorHover}: var(--surface-solid-primary-hover);
-                ${_emotion.attachTokens.buttonColorActive}: var(--text-accent-active);
-                ${_emotion.attachTokens.buttonBackgroundColorActive}: var(--surface-solid-primary-active);
+                ${_emotion.attachTokens.buttonColorHover}: ${_sdds_cs.textAccentMinor};
+                ${_emotion.attachTokens.buttonBackgroundColorHover}: ${_sdds_cs.surfaceSolidPrimaryHover};
+                ${_emotion.attachTokens.buttonColorActive}: ${_sdds_cs.textAccentActive};
+                ${_emotion.attachTokens.buttonBackgroundColorActive}: ${_sdds_cs.surfaceSolidPrimaryActive};
 
                 ${_emotion.attachTokens.buttonDisabledOpacity}: 0.4;
-                ${_emotion.attachTokens.buttonFocusColor}: var(--surface-accent);
+                ${_emotion.attachTokens.buttonFocusColor}: ${_sdds_cs.surfaceAccent};
 
-                ${_emotion.attachTokens.cellColor}: var(--text-primary);
-                ${_emotion.attachTokens.cellLabelColor}: var(--text-secondary);
-                ${_emotion.attachTokens.cellTitleColor}: var(--text-primary);
-                ${_emotion.attachTokens.cellSubtitleColor}: var(--text-secondary);
+                ${_emotion.attachTokens.cellColor}: ${_sdds_cs.textPrimary};
+                ${_emotion.attachTokens.cellLabelColor}: ${_sdds_cs.textSecondary};
+                ${_emotion.attachTokens.cellTitleColor}: ${_sdds_cs.textPrimary};
+                ${_emotion.attachTokens.cellSubtitleColor}: ${_sdds_cs.textSecondary};
                 ${_emotion.attachTokens.cellBackgroundColor}: transparent;
 
-                ${_emotion.attachTokens.iconButtonColor}: var(--text-accent);
-                ${_emotion.attachTokens.iconButtonBackgroundColor}: var(--surface-solid-primary);
+                ${_emotion.attachTokens.iconButtonColor}: ${_sdds_cs.textAccent};
+                ${_emotion.attachTokens.iconButtonBackgroundColor}: ${_sdds_cs.surfaceSolidPrimary};
                 ${_emotion.attachTokens.iconButtonLoadingBackgroundColor}: var(${_emotion.attachTokens.iconButtonBackgroundColor});
-                ${_emotion.attachTokens.iconButtonColorHover}: var(--text-accent-minor);
-                ${_emotion.attachTokens.iconButtonBackgroundColorHover}: var(--surface-solid-primary-hover);
-                ${_emotion.attachTokens.iconButtonColorActive}: var(--text-accent-minor);
-                ${_emotion.attachTokens.iconButtonBackgroundColorActive}: var(--surface-solid-primary-active);
+                ${_emotion.attachTokens.iconButtonColorHover}: ${_sdds_cs.textAccentMinor};
+                ${_emotion.attachTokens.iconButtonBackgroundColorHover}: ${_sdds_cs.surfaceSolidPrimaryHover};
+                ${_emotion.attachTokens.iconButtonColorActive}: ${_sdds_cs.textAccentMinor};
+                ${_emotion.attachTokens.iconButtonBackgroundColorActive}: ${_sdds_cs.surfaceSolidPrimaryActive};
 
                 ${_emotion.attachTokens.iconButtonDisabledOpacity}: 0.4;
-                ${_emotion.attachTokens.iconButtonFocusColor}: var(--surface-accent);
+                ${_emotion.attachTokens.iconButtonFocusColor}: ${_sdds_cs.surfaceAccent};
 
-                ${_emotion.attachTokens.iconButtonCancelColor}: var(--text-secondary);
-                ${_emotion.attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear);
+                ${_emotion.attachTokens.iconButtonCancelColor}: ${_sdds_cs.textSecondary};
+                ${_emotion.attachTokens.iconButtonCancelBackgroundColor}: ${_sdds_cs.surfaceClear};
                 ${_emotion.attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${_emotion.attachTokens.iconButtonCancelBackgroundColor});
-                ${_emotion.attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover);
-                ${_emotion.attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear);
-                ${_emotion.attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active);
-                ${_emotion.attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear);
+                ${_emotion.attachTokens.iconButtonCancelColorHover}: ${_sdds_cs.textSecondaryHover};
+                ${_emotion.attachTokens.iconButtonCancelBackgroundColorHover}: ${_sdds_cs.surfaceClear};
+                ${_emotion.attachTokens.iconButtonCancelColorActive}: ${_sdds_cs.textSecondaryActive};
+                ${_emotion.attachTokens.iconButtonCancelBackgroundColorActive}: ${_sdds_cs.surfaceClear};
 
                 ${_emotion.attachTokens.iconButtonCancelDisabledOpacity}: 0.4;
-                ${_emotion.attachTokens.iconButtonCancelFocusColor}: var(--surface-accent);
+                ${_emotion.attachTokens.iconButtonCancelFocusColor}: ${_sdds_cs.surfaceAccent};
             `,
             clear: (0, _emotion.css)`
-                ${_emotion.attachTokens.buttonColor}: var(--text-accent);
-                ${_emotion.attachTokens.buttonValueColor}: var(--text-accent-minor);
-                ${_emotion.attachTokens.buttonBackgroundColor}: var(--surface-clear);
-                ${_emotion.attachTokens.buttonLoadingBackgroundColor}: var(--surface-transparent-accent);
-                ${_emotion.attachTokens.buttonColorHover}: var(--text-accent-minor);
-                ${_emotion.attachTokens.buttonBackgroundColorHover}: var(--surface-transparent-accent);
-                ${_emotion.attachTokens.buttonColorActive}: var(--text-accent-active);
-                ${_emotion.attachTokens.buttonBackgroundColorActive}: var(--surface-clear);
+                ${_emotion.attachTokens.buttonColor}: ${_sdds_cs.textAccent};
+                ${_emotion.attachTokens.buttonValueColor}: ${_sdds_cs.textAccentMinor};
+                ${_emotion.attachTokens.buttonBackgroundColor}: ${_sdds_cs.surfaceClear};
+                ${_emotion.attachTokens.buttonLoadingBackgroundColor}: ${_sdds_cs.surfaceTransparentAccent};
+                ${_emotion.attachTokens.buttonColorHover}: ${_sdds_cs.textAccentMinor};
+                ${_emotion.attachTokens.buttonBackgroundColorHover}: ${_sdds_cs.surfaceTransparentAccent};
+                ${_emotion.attachTokens.buttonColorActive}: ${_sdds_cs.textAccentActive};
+                ${_emotion.attachTokens.buttonBackgroundColorActive}: ${_sdds_cs.surfaceClear};
 
                 ${_emotion.attachTokens.buttonDisabledOpacity}: 0.4;
-                ${_emotion.attachTokens.buttonFocusColor}: var(--surface-accent);
+                ${_emotion.attachTokens.buttonFocusColor}: ${_sdds_cs.surfaceAccent};
 
-                ${_emotion.attachTokens.cellColor}: var(--text-primary);
-                ${_emotion.attachTokens.cellLabelColor}: var(--text-secondary);
-                ${_emotion.attachTokens.cellTitleColor}: var(--text-primary);
-                ${_emotion.attachTokens.cellSubtitleColor}: var(--text-secondary);
+                ${_emotion.attachTokens.cellColor}: ${_sdds_cs.textPrimary};
+                ${_emotion.attachTokens.cellLabelColor}: ${_sdds_cs.textSecondary};
+                ${_emotion.attachTokens.cellTitleColor}: ${_sdds_cs.textPrimary};
+                ${_emotion.attachTokens.cellSubtitleColor}: ${_sdds_cs.textSecondary};
                 ${_emotion.attachTokens.cellBackgroundColor}: transparent;
 
-                ${_emotion.attachTokens.iconButtonColor}: var(--text-accent);
-                ${_emotion.attachTokens.iconButtonBackgroundColor}: var(--surface-clear);
-                ${_emotion.attachTokens.iconButtonLoadingBackgroundColor}: var(--surface-transparent-accent);
-                ${_emotion.attachTokens.iconButtonColorHover}: var(--text-accent-minor);
-                ${_emotion.attachTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-accent);
-                ${_emotion.attachTokens.iconButtonColorActive}: var(--text-accent-active);
-                ${_emotion.attachTokens.iconButtonBackgroundColorActive}: var(--surface-clear);
+                ${_emotion.attachTokens.iconButtonColor}: ${_sdds_cs.textAccent};
+                ${_emotion.attachTokens.iconButtonBackgroundColor}: ${_sdds_cs.surfaceClear};
+                ${_emotion.attachTokens.iconButtonLoadingBackgroundColor}: ${_sdds_cs.surfaceTransparentAccent};
+                ${_emotion.attachTokens.iconButtonColorHover}: ${_sdds_cs.textAccentMinor};
+                ${_emotion.attachTokens.iconButtonBackgroundColorHover}: ${_sdds_cs.surfaceTransparentAccent};
+                ${_emotion.attachTokens.iconButtonColorActive}: ${_sdds_cs.textAccentActive};
+                ${_emotion.attachTokens.iconButtonBackgroundColorActive}: ${_sdds_cs.surfaceClear};
 
                 ${_emotion.attachTokens.iconButtonDisabledOpacity}: 0.4;
-                ${_emotion.attachTokens.iconButtonFocusColor}: var(--surface-accent);
+                ${_emotion.attachTokens.iconButtonFocusColor}: ${_sdds_cs.surfaceAccent};
 
-                ${_emotion.attachTokens.iconButtonCancelColor}: var(--text-secondary);
-                ${_emotion.attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear);
+                ${_emotion.attachTokens.iconButtonCancelColor}: ${_sdds_cs.textSecondary};
+                ${_emotion.attachTokens.iconButtonCancelBackgroundColor}: ${_sdds_cs.surfaceClear};
                 ${_emotion.attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${_emotion.attachTokens.iconButtonCancelBackgroundColor});
-                ${_emotion.attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover);
-                ${_emotion.attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear);
-                ${_emotion.attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active);
-                ${_emotion.attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear);
+                ${_emotion.attachTokens.iconButtonCancelColorHover}: ${_sdds_cs.textSecondaryHover};
+                ${_emotion.attachTokens.iconButtonCancelBackgroundColorHover}: ${_sdds_cs.surfaceClear};
+                ${_emotion.attachTokens.iconButtonCancelColorActive}: ${_sdds_cs.textSecondaryActive};
+                ${_emotion.attachTokens.iconButtonCancelBackgroundColorActive}: ${_sdds_cs.surfaceClear};
 
                 ${_emotion.attachTokens.iconButtonCancelDisabledOpacity}: 0.4;
-                ${_emotion.attachTokens.iconButtonCancelFocusColor}: var(--surface-accent);
+                ${_emotion.attachTokens.iconButtonCancelFocusColor}: ${_sdds_cs.surfaceAccent};
             `
         },
         helperTextView: {
             default: (0, _emotion.css)`
-                ${_emotion.attachTokens.helperTextColor}: var(--text-secondary);
+                ${_emotion.attachTokens.helperTextColor}: ${_sdds_cs.textSecondary};
             `,
             negative: (0, _emotion.css)`
-                ${_emotion.attachTokens.helperTextColor}: var(--text-negative);
+                ${_emotion.attachTokens.helperTextColor}: ${_sdds_cs.textNegative};
             `
         },
         size: {
@@ -161,12 +162,12 @@ const config = {
                 ${_emotion.attachTokens.buttonWidth}: 11.25rem;
                 ${_emotion.attachTokens.buttonPadding}: 1rem;
                 ${_emotion.attachTokens.buttonRadius}: 0.625rem;
-                ${_emotion.attachTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_emotion.attachTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size);
-                ${_emotion.attachTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_emotion.attachTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
-                ${_emotion.attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_emotion.attachTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_emotion.attachTokens.buttonFontFamily}: ${_sdds_cs.bodyM.fontFamily};
+                ${_emotion.attachTokens.buttonFontSize}: ${_sdds_cs.bodyM.fontSize};
+                ${_emotion.attachTokens.buttonFontStyle}: ${_sdds_cs.bodyM.fontStyle};
+                ${_emotion.attachTokens.buttonFontWeight}: ${_sdds_cs.bodyMBold.fontWeight};
+                ${_emotion.attachTokens.buttonLetterSpacing}: ${_sdds_cs.bodyM.letterSpacing};
+                ${_emotion.attachTokens.buttonLineHeight}: ${_sdds_cs.bodyM.lineHeight};
 
                 ${_emotion.attachTokens.buttonSpinnerSize}: 1.375rem;
                 ${_emotion.attachTokens.buttonSpinnerColor}: inherit;
@@ -185,37 +186,37 @@ const config = {
                 ${_emotion.attachTokens.cellTextboxGap}: 0.125rem;
                 ${_emotion.attachTokens.cellGap}: 0.375rem;
 
-                ${_emotion.attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_emotion.attachTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_emotion.attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_emotion.attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_emotion.attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_emotion.attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height);
-
-                ${_emotion.attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_emotion.attachTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size);
-                ${_emotion.attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_emotion.attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${_emotion.attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_emotion.attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height);
-
-                ${_emotion.attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_emotion.attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_emotion.attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_emotion.attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_emotion.attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_emotion.attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_emotion.attachTokens.cellLabelFontFamily}: ${_sdds_cs.bodyS.fontFamily};
+                ${_emotion.attachTokens.cellLabelFontSize}: ${_sdds_cs.bodyS.fontSize};
+                ${_emotion.attachTokens.cellLabelFontStyle}: ${_sdds_cs.bodyS.fontStyle};
+                ${_emotion.attachTokens.cellLabelFontWeight}: ${_sdds_cs.bodyS.fontWeight};
+                ${_emotion.attachTokens.cellLabelLetterSpacing}: ${_sdds_cs.bodyS.letterSpacing};
+                ${_emotion.attachTokens.cellLabelLineHeight}: ${_sdds_cs.bodyS.lineHeight};
+
+                ${_emotion.attachTokens.cellTitleFontFamily}: ${_sdds_cs.bodyM.fontFamily};
+                ${_emotion.attachTokens.cellTitleFontSize}: ${_sdds_cs.bodyM.fontSize};
+                ${_emotion.attachTokens.cellTitleFontStyle}: ${_sdds_cs.bodyM.fontStyle};
+                ${_emotion.attachTokens.cellTitleFontWeight}: ${_sdds_cs.bodyM.fontWeight};
+                ${_emotion.attachTokens.cellTitleLetterSpacing}: ${_sdds_cs.bodyM.letterSpacing};
+                ${_emotion.attachTokens.cellTitleLineHeight}: ${_sdds_cs.bodyM.lineHeight};
+
+                ${_emotion.attachTokens.cellSubtitleFontFamily}: ${_sdds_cs.bodyS.fontFamily};
+                ${_emotion.attachTokens.cellSubtitleFontSize}: ${_sdds_cs.bodyS.fontSize};
+                ${_emotion.attachTokens.cellSubtitleFontStyle}: ${_sdds_cs.bodyS.fontStyle};
+                ${_emotion.attachTokens.cellSubtitleFontWeight}: ${_sdds_cs.bodyS.fontWeight};
+                ${_emotion.attachTokens.cellSubtitleLetterSpacing}: ${_sdds_cs.bodyS.letterSpacing};
+                ${_emotion.attachTokens.cellSubtitleLineHeight}: ${_sdds_cs.bodyS.lineHeight};
 
                 ${_emotion.attachTokens.iconButtonHeight}: 2.5rem;
                 ${_emotion.attachTokens.iconButtonWidth}: 2.5rem;
                 ${_emotion.attachTokens.iconButtonPadding}: 1rem;
                 ${_emotion.attachTokens.iconButtonRadius}: 0.625rem;
-                ${_emotion.attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_emotion.attachTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_emotion.attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_emotion.attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${_emotion.attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_emotion.attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_emotion.attachTokens.iconButtonFontFamily}: ${_sdds_cs.bodyS.fontFamily};
+                ${_emotion.attachTokens.iconButtonFontSize}: ${_sdds_cs.bodyS.fontSize};
+                ${_emotion.attachTokens.iconButtonFontStyle}: ${_sdds_cs.bodyS.fontStyle};
+                ${_emotion.attachTokens.iconButtonFontWeight}: ${_sdds_cs.bodySBold.fontWeight};
+                ${_emotion.attachTokens.iconButtonLetterSpacing}: ${_sdds_cs.bodyS.letterSpacing};
+                ${_emotion.attachTokens.iconButtonLineHeight}: ${_sdds_cs.bodyS.lineHeight};
 
                 ${_emotion.attachTokens.iconButtonSpinnerSize}: 1.375rem;
                 ${_emotion.attachTokens.iconButtonSpinnerColor}: inherit;
@@ -224,12 +225,12 @@ const config = {
                 ${_emotion.attachTokens.iconButtonCancelWidth}: 2rem;
                 ${_emotion.attachTokens.iconButtonCancelPadding}: 0.75rem;
                 ${_emotion.attachTokens.iconButtonCancelRadius}: 0.5rem;
-                ${_emotion.attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_emotion.attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_emotion.attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_emotion.attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight);
-                ${_emotion.attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_emotion.attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_emotion.attachTokens.iconButtonCancelFontFamily}: ${_sdds_cs.bodyXS.fontFamily};
+                ${_emotion.attachTokens.iconButtonCancelFontSize}: ${_sdds_cs.bodyXS.fontSize};
+                ${_emotion.attachTokens.iconButtonCancelFontStyle}: ${_sdds_cs.bodyXS.fontStyle};
+                ${_emotion.attachTokens.iconButtonCancelFontWeight}: ${_sdds_cs.bodyXSBold.fontWeight};
+                ${_emotion.attachTokens.iconButtonCancelLetterSpacing}: ${_sdds_cs.bodyXS.letterSpacing};
+                ${_emotion.attachTokens.iconButtonCancelLineHeight}: ${_sdds_cs.bodyXS.lineHeight};
 
                 ${_emotion.attachTokens.iconButtonCancelSpinnerSize}: 1rem;
                 ${_emotion.attachTokens.iconButtonCancelSpinnerColor}: inherit;