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

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

@@ -1,4 +1,5 @@
 import { css, accordionTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyL, bodyM, bodyMBold, h2, h2Bold, h3, h3Bold, h4, h4Bold, h5, h5Bold, h6, h6Bold, surfaceAccent, surfaceClear, surfaceSolidCard, surfaceSolidTertiary, textPrimary } from '@salutejs/sdds-themes/tokens/sdds_platform_ai';
 export const config = {
     defaults: {
         view: 'default',
@@ -10,12 +11,12 @@ export const config = {
                 ${accordionTokens.accordionGap}: 0.125rem;
                 ${accordionTokens.accordionWidth}: 20rem;
                 ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) var(${accordionTokens.accordionItemPaddingHorizontal});
-                ${accordionTokens.accordionItemBackground}: var(--surface-solid-card);
-                ${accordionTokens.accordionItemTitleColor}: var(--text-primary);
-                ${accordionTokens.accordionItemTextColor}: var(--text-primary);
-                ${accordionTokens.accordionItemIconColor}: var(--text-primary);
-                ${accordionTokens.accordionItemFocus}: var(--surface-accent);
-                ${accordionTokens.accordionBackground}: var(--surface-clear);
+                ${accordionTokens.accordionItemBackground}: ${surfaceSolidCard};
+                ${accordionTokens.accordionItemTitleColor}: ${textPrimary};
+                ${accordionTokens.accordionItemTextColor}: ${textPrimary};
+                ${accordionTokens.accordionItemIconColor}: ${textPrimary};
+                ${accordionTokens.accordionItemFocus}: ${surfaceAccent};
+                ${accordionTokens.accordionBackground}: ${surfaceClear};
                 ${accordionTokens.accordionItemBorderBottom}: 0;
                 ${accordionTokens.accordionItemPaddingHorizontalLeft}: var(${accordionTokens.accordionItemPaddingHorizontal});
             `,
@@ -23,14 +24,14 @@ export const config = {
                 ${accordionTokens.accordionGap}: 0;
                 ${accordionTokens.accordionWidth}: 20rem;
                 ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) 0rem;
-                ${accordionTokens.accordionItemBackground}: var(--surface-clear);
-                ${accordionTokens.accordionItemTitleColor}: var(--text-primary);
-                ${accordionTokens.accordionItemTextColor}: var(--text-primary);
-                ${accordionTokens.accordionItemIconColor}: var(--text-primary);
-                ${accordionTokens.accordionItemFocus}: var(--surface-accent);
+                ${accordionTokens.accordionItemBackground}: ${surfaceClear};
+                ${accordionTokens.accordionItemTitleColor}: ${textPrimary};
+                ${accordionTokens.accordionItemTextColor}: ${textPrimary};
+                ${accordionTokens.accordionItemIconColor}: ${textPrimary};
+                ${accordionTokens.accordionItemFocus}: ${surfaceAccent};
                 ${accordionTokens.accordionItemViewBorderRadius}: 0rem;
-                ${accordionTokens.accordionBackground}: var(--surface-clear);
-                ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid var(--surface-solid-tertiary);
+                ${accordionTokens.accordionBackground}: ${surfaceClear};
+                ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid ${surfaceSolidTertiary};
                 ${accordionTokens.accordionItemPaddingHorizontalLeft}: 0;
             `
         },
@@ -42,19 +43,19 @@ export const config = {
                 ${accordionTokens.accordionItemGap}: 0.375rem;
                 ${accordionTokens.accordionItemBorderRadius}: 0.75rem;
 
-                ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-m-font-size);
-                ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
-                ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${accordionTokens.accordionItemTitleFontFamily}: ${bodyM.fontFamily};
+                ${accordionTokens.accordionItemTitleFontSize}: ${bodyM.fontSize};
+                ${accordionTokens.accordionItemTitleFontStyle}: ${bodyM.fontStyle};
+                ${accordionTokens.accordionItemTitleFontWeight}: ${bodyMBold.fontWeight};
+                ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyM.letterSpacing};
+                ${accordionTokens.accordionItemTitleLineHeight}: ${bodyM.lineHeight};
 
-                ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size);
-                ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily};
+                ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize};
+                ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle};
+                ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight};
+                ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing};
+                ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight};
             `,
             h2: css`
                 ${accordionTokens.accordionItemPaddingVertical}: 1rem;
@@ -63,19 +64,19 @@ export const config = {
                 ${accordionTokens.accordionItemBorderRadius}: 0.75rem;
                 ${accordionTokens.accordionItemIconSize}: 1.5rem;
 
-                ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h2-font-family);
-                ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h2-font-size);
-                ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h2-font-style);
-                ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h2-bold-font-weight);
-                ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h2-letter-spacing);
-                ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h2-line-height);
+                ${accordionTokens.accordionItemTitleFontFamily}: ${h2.fontFamily};
+                ${accordionTokens.accordionItemTitleFontSize}: ${h2.fontSize};
+                ${accordionTokens.accordionItemTitleFontStyle}: ${h2.fontStyle};
+                ${accordionTokens.accordionItemTitleFontWeight}: ${h2Bold.fontWeight};
+                ${accordionTokens.accordionItemTitleLetterSpacing}: ${h2.letterSpacing};
+                ${accordionTokens.accordionItemTitleLineHeight}: ${h2.lineHeight};
 
-                ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family);
-                ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size);
-                ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style);
-                ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight);
-                ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily};
+                ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize};
+                ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle};
+                ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight};
+                ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing};
+                ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight};
             `,
             h3: css`
                 ${accordionTokens.accordionItemPaddingVertical}: 0.875rem;
@@ -84,19 +85,19 @@ export const config = {
                 ${accordionTokens.accordionItemBorderRadius}: 0.75rem;
                 ${accordionTokens.accordionItemIconSize}: 1.5rem;
 
-                ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h3-font-family);
-                ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h3-font-size);
-                ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h3-font-style);
-                ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h3-bold-font-weight);
-                ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h3-letter-spacing);
-                ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h3-line-height);
+                ${accordionTokens.accordionItemTitleFontFamily}: ${h3.fontFamily};
+                ${accordionTokens.accordionItemTitleFontSize}: ${h3.fontSize};
+                ${accordionTokens.accordionItemTitleFontStyle}: ${h3.fontStyle};
+                ${accordionTokens.accordionItemTitleFontWeight}: ${h3Bold.fontWeight};
+                ${accordionTokens.accordionItemTitleLetterSpacing}: ${h3.letterSpacing};
+                ${accordionTokens.accordionItemTitleLineHeight}: ${h3.lineHeight};
 
-                ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family);
-                ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size);
-                ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style);
-                ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight);
-                ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily};
+                ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize};
+                ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle};
+                ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight};
+                ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing};
+                ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight};
             `,
             h4: css`
                 ${accordionTokens.accordionItemPaddingVertical}: 0.688rem;
@@ -104,19 +105,19 @@ export const config = {
                 ${accordionTokens.accordionItemGap}: 0.25rem;
                 ${accordionTokens.accordionItemBorderRadius}: 0.625rem;
 
-                ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h4-font-family);
-                ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h4-font-size);
-                ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h4-font-style);
-                ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h4-bold-font-weight);
-                ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h4-letter-spacing);
-                ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h4-line-height);
+                ${accordionTokens.accordionItemTitleFontFamily}: ${h4.fontFamily};
+                ${accordionTokens.accordionItemTitleFontSize}: ${h4.fontSize};
+                ${accordionTokens.accordionItemTitleFontStyle}: ${h4.fontStyle};
+                ${accordionTokens.accordionItemTitleFontWeight}: ${h4Bold.fontWeight};
+                ${accordionTokens.accordionItemTitleLetterSpacing}: ${h4.letterSpacing};
+                ${accordionTokens.accordionItemTitleLineHeight}: ${h4.lineHeight};
 
-                ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size);
-                ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily};
+                ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize};
+                ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle};
+                ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight};
+                ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing};
+                ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight};
             `,
             h5: css`
                 ${accordionTokens.accordionItemPaddingVertical}: 0.5rem;
@@ -124,19 +125,19 @@ export const config = {
                 ${accordionTokens.accordionItemGap}: 0.25rem;
                 ${accordionTokens.accordionItemBorderRadius}: 0.5rem;
 
-                ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h5-font-family);
-                ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h5-font-size);
-                ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h5-font-style);
-                ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h5-bold-font-weight);
-                ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h5-letter-spacing);
-                ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h5-line-height);
+                ${accordionTokens.accordionItemTitleFontFamily}: ${h5.fontFamily};
+                ${accordionTokens.accordionItemTitleFontSize}: ${h5.fontSize};
+                ${accordionTokens.accordionItemTitleFontStyle}: ${h5.fontStyle};
+                ${accordionTokens.accordionItemTitleFontWeight}: ${h5Bold.fontWeight};
+                ${accordionTokens.accordionItemTitleLetterSpacing}: ${h5.letterSpacing};
+                ${accordionTokens.accordionItemTitleLineHeight}: ${h5.lineHeight};
 
-                ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size);
-                ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily};
+                ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize};
+                ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle};
+                ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight};
+                ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing};
+                ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight};
             `,
             h6: css`
                 ${accordionTokens.accordionItemPaddingVertical}: 0.5rem;
@@ -144,19 +145,19 @@ export const config = {
                 ${accordionTokens.accordionItemGap}: 0.25rem;
                 ${accordionTokens.accordionItemBorderRadius}: 0.5rem;
 
-                ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h6-font-family);
-                ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h6-font-size);
-                ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h6-font-style);
-                ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h6-bold-font-weight);
-                ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h6-letter-spacing);
-                ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h6-line-height);
+                ${accordionTokens.accordionItemTitleFontFamily}: ${h6.fontFamily};
+                ${accordionTokens.accordionItemTitleFontSize}: ${h6.fontSize};
+                ${accordionTokens.accordionItemTitleFontStyle}: ${h6.fontStyle};
+                ${accordionTokens.accordionItemTitleFontWeight}: ${h6Bold.fontWeight};
+                ${accordionTokens.accordionItemTitleLetterSpacing}: ${h6.letterSpacing};
+                ${accordionTokens.accordionItemTitleLineHeight}: ${h6.lineHeight};
 
-                ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size);
-                ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily};
+                ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize};
+                ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle};
+                ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight};
+                ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing};
+                ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight};
             `
         }
     }

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

@@ -1,4 +1,5 @@
 import { css, attachTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyM, bodyMBold, bodyS, bodyXS, bodyXSBold, inverseTextPrimary, inverseTextSecondary, surfaceAccent, surfaceClear, surfaceSolidDefault, surfaceSolidDefaultActive, surfaceSolidDefaultHover, textNegative, textPrimary, textSecondary, textSecondaryActive, textSecondaryHover } from '@salutejs/sdds-themes/tokens/sdds_platform_ai';
 export const config = {
     defaults: {
         view: 'default',
@@ -9,55 +10,55 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${attachTokens.buttonColor}: var(--inverse-text-primary);
-                ${attachTokens.buttonValueColor}: var(--inverse-text-secondary);
-                ${attachTokens.buttonBackgroundColor}: var(--surface-solid-default);
+                ${attachTokens.buttonColor}: ${inverseTextPrimary};
+                ${attachTokens.buttonValueColor}: ${inverseTextSecondary};
+                ${attachTokens.buttonBackgroundColor}: ${surfaceSolidDefault};
                 ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor});
-                ${attachTokens.buttonColorHover}: var(--inverse-text-primary);
-                ${attachTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover);
-                ${attachTokens.buttonColorActive}: var(--inverse-text-primary);
-                ${attachTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active);
+                ${attachTokens.buttonColorHover}: ${inverseTextPrimary};
+                ${attachTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover};
+                ${attachTokens.buttonColorActive}: ${inverseTextPrimary};
+                ${attachTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive};
 
                 ${attachTokens.buttonDisabledOpacity}: 0.4;
-                ${attachTokens.buttonFocusColor}: var(--surface-accent);
+                ${attachTokens.buttonFocusColor}: ${surfaceAccent};
 
-                ${attachTokens.cellColor}: var(--text-primary);
-                ${attachTokens.cellLabelColor}: var(--text-secondary);
-                ${attachTokens.cellTitleColor}: var(--text-primary);
-                ${attachTokens.cellSubtitleColor}: var(--text-secondary);
+                ${attachTokens.cellColor}: ${textPrimary};
+                ${attachTokens.cellLabelColor}: ${textSecondary};
+                ${attachTokens.cellTitleColor}: ${textPrimary};
+                ${attachTokens.cellSubtitleColor}: ${textSecondary};
                 ${attachTokens.cellBackgroundColor}: transparent;
 
-                ${attachTokens.iconButtonColor}: var(--inverse-text-primary);
-                ${attachTokens.iconButtonBackgroundColor}: var(--surface-solid-default);
+                ${attachTokens.iconButtonColor}: ${inverseTextPrimary};
+                ${attachTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault};
                 ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor});
-                ${attachTokens.iconButtonColorHover}: var(--inverse-text-primary);
-                ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover);
-                ${attachTokens.iconButtonColorActive}: var(--inverse-text-primary);
-                ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active);
+                ${attachTokens.iconButtonColorHover}: ${inverseTextPrimary};
+                ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover};
+                ${attachTokens.iconButtonColorActive}: ${inverseTextPrimary};
+                ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive};
 
                 ${attachTokens.iconButtonDisabledOpacity}: 0.4;
-                ${attachTokens.iconButtonFocusColor}: var(--surface-accent);
+                ${attachTokens.iconButtonFocusColor}: ${surfaceAccent};
 
-                ${attachTokens.iconButtonCancelColor}: var(--text-secondary);
-                ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear);
+                ${attachTokens.iconButtonCancelColor}: ${textSecondary};
+                ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear};
                 ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor});
-                ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover);
-                ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear);
-                ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active);
-                ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear);
+                ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover};
+                ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear};
+                ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive};
+                ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear};
 
                 ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4;
-                ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent);
+                ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent};
 
-                ${attachTokens.moreIconColor}: var(--text-primary);
+                ${attachTokens.moreIconColor}: ${textPrimary};
             `
         },
         helperTextView: {
             default: css`
-                ${attachTokens.helperTextColor}: var(--text-secondary);
+                ${attachTokens.helperTextColor}: ${textSecondary};
             `,
             negative: css`
-                ${attachTokens.helperTextColor}: var(--text-negative);
+                ${attachTokens.helperTextColor}: ${textNegative};
             `
         },
         size: {
@@ -72,12 +73,12 @@ export const config = {
                 ${attachTokens.buttonWidth}: 11.25rem;
                 ${attachTokens.buttonPadding}: 1.25rem;
                 ${attachTokens.buttonRadius}: 1.5rem;
-                ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${attachTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size);
-                ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
-                ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${attachTokens.buttonFontFamily}: ${bodyM.fontFamily};
+                ${attachTokens.buttonFontSize}: ${bodyM.fontSize};
+                ${attachTokens.buttonFontStyle}: ${bodyM.fontStyle};
+                ${attachTokens.buttonFontWeight}: ${bodyMBold.fontWeight};
+                ${attachTokens.buttonLetterSpacing}: ${bodyM.letterSpacing};
+                ${attachTokens.buttonLineHeight}: ${bodyM.lineHeight};
 
                 ${attachTokens.buttonSpinnerSize}: 1.375rem;
                 ${attachTokens.buttonSpinnerColor}: inherit;
@@ -96,37 +97,37 @@ export const config = {
                 ${attachTokens.cellTextboxGap}: 0.125rem;
                 ${attachTokens.cellGap}: 0.375rem;
 
-                ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size);
-                ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height);
-
-                ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size);
-                ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height);
-
-                ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size);
-                ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${attachTokens.cellLabelFontFamily}: ${bodyS.fontFamily};
+                ${attachTokens.cellLabelFontSize}: ${bodyS.fontSize};
+                ${attachTokens.cellLabelFontStyle}: ${bodyS.fontStyle};
+                ${attachTokens.cellLabelFontWeight}: ${bodyS.fontWeight};
+                ${attachTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing};
+                ${attachTokens.cellLabelLineHeight}: ${bodyS.lineHeight};
+
+                ${attachTokens.cellTitleFontFamily}: ${bodyM.fontFamily};
+                ${attachTokens.cellTitleFontSize}: ${bodyM.fontSize};
+                ${attachTokens.cellTitleFontStyle}: ${bodyM.fontStyle};
+                ${attachTokens.cellTitleFontWeight}: ${bodyM.fontWeight};
+                ${attachTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing};
+                ${attachTokens.cellTitleLineHeight}: ${bodyM.lineHeight};
+
+                ${attachTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily};
+                ${attachTokens.cellSubtitleFontSize}: ${bodyS.fontSize};
+                ${attachTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle};
+                ${attachTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight};
+                ${attachTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing};
+                ${attachTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight};
 
                 ${attachTokens.iconButtonHeight}: 3rem;
                 ${attachTokens.iconButtonWidth}: 3rem;
                 ${attachTokens.iconButtonPadding}: 1.25rem;
                 ${attachTokens.iconButtonRadius}: 0.75rem;
-                ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size);
-                ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
-                ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${attachTokens.iconButtonFontFamily}: ${bodyM.fontFamily};
+                ${attachTokens.iconButtonFontSize}: ${bodyM.fontSize};
+                ${attachTokens.iconButtonFontStyle}: ${bodyM.fontStyle};
+                ${attachTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight};
+                ${attachTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing};
+                ${attachTokens.iconButtonLineHeight}: ${bodyM.lineHeight};
 
                 ${attachTokens.iconButtonSpinnerSize}: 1.375rem;
                 ${attachTokens.iconButtonSpinnerColor}: inherit;
@@ -135,12 +136,12 @@ export const config = {
                 ${attachTokens.iconButtonCancelWidth}: 2rem;
                 ${attachTokens.iconButtonCancelPadding}: 0.75rem;
                 ${attachTokens.iconButtonCancelRadius}: 0.5rem;
-                ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight);
-                ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily};
+                ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize};
+                ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle};
+                ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight};
+                ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing};
+                ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight};
 
                 ${attachTokens.iconButtonCancelSpinnerSize}: 1rem;
                 ${attachTokens.iconButtonCancelSpinnerColor}: inherit;