@salutejs/sdds-scan 0.357.0-next-sbcom.0 → 0.358.0-dev.0

package/dist/styled-components/cjs/components/Typography/Text.config.js

@@ -23,6 +23,7 @@ _export(exports, {
     }
 });
 const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const _sdds_scan = require("@salutejs/sdds-themes/tokens/sdds_scan");
 const configL = {
     defaults: {
         size: 'l'
@@ -30,14 +31,14 @@ const configL = {
     variations: {
         size: {
             l: (0, _styledcomponents.css)`
-                ${_styledcomponents.typographyTokens.typoFontFamily}: var(--plasma-typo-text-l-font-family);
-                ${_styledcomponents.typographyTokens.typoFontSize}: var(--plasma-typo-text-l-font-size);
-                ${_styledcomponents.typographyTokens.typoFontStyle}: var(--plasma-typo-text-l-font-style);
-                ${_styledcomponents.typographyTokens.typoFontWeight}: var(--plasma-typo-text-l-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-l-bold-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-l-medium-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-l-letter-spacing);
-                ${_styledcomponents.typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-l-line-height);
+                ${_styledcomponents.typographyTokens.typoFontFamily}: ${_sdds_scan.textL.fontFamily};
+                ${_styledcomponents.typographyTokens.typoFontSize}: ${_sdds_scan.textL.fontSize};
+                ${_styledcomponents.typographyTokens.typoFontStyle}: ${_sdds_scan.textL.fontStyle};
+                ${_styledcomponents.typographyTokens.typoFontWeight}: ${_sdds_scan.textL.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightBold}: ${_sdds_scan.textLBold.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: ${_sdds_scan.textLMedium.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: ${_sdds_scan.textL.letterSpacing};
+                ${_styledcomponents.typographyTokens.typoFontLineHeight}: ${_sdds_scan.textL.lineHeight};
             `
         }
     }
@@ -49,14 +50,14 @@ const configM = {
     variations: {
         size: {
             m: (0, _styledcomponents.css)`
-                ${_styledcomponents.typographyTokens.typoFontFamily}: var(--plasma-typo-text-m-font-family);
-                ${_styledcomponents.typographyTokens.typoFontSize}: var(--plasma-typo-text-m-font-size);
-                ${_styledcomponents.typographyTokens.typoFontStyle}: var(--plasma-typo-text-m-font-style);
-                ${_styledcomponents.typographyTokens.typoFontWeight}: var(--plasma-typo-text-m-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-m-bold-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-m-medium-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-m-letter-spacing);
-                ${_styledcomponents.typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-m-line-height);
+                ${_styledcomponents.typographyTokens.typoFontFamily}: ${_sdds_scan.textM.fontFamily};
+                ${_styledcomponents.typographyTokens.typoFontSize}: ${_sdds_scan.textM.fontSize};
+                ${_styledcomponents.typographyTokens.typoFontStyle}: ${_sdds_scan.textM.fontStyle};
+                ${_styledcomponents.typographyTokens.typoFontWeight}: ${_sdds_scan.textM.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightBold}: ${_sdds_scan.textMBold.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: ${_sdds_scan.textMMedium.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: ${_sdds_scan.textM.letterSpacing};
+                ${_styledcomponents.typographyTokens.typoFontLineHeight}: ${_sdds_scan.textM.lineHeight};
             `
         }
     }
@@ -68,14 +69,14 @@ const configS = {
     variations: {
         size: {
             s: (0, _styledcomponents.css)`
-                ${_styledcomponents.typographyTokens.typoFontFamily}: var(--plasma-typo-text-s-font-family);
-                ${_styledcomponents.typographyTokens.typoFontSize}: var(--plasma-typo-text-s-font-size);
-                ${_styledcomponents.typographyTokens.typoFontStyle}: var(--plasma-typo-text-s-font-style);
-                ${_styledcomponents.typographyTokens.typoFontWeight}: var(--plasma-typo-text-s-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-s-bold-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-s-medium-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-s-letter-spacing);
-                ${_styledcomponents.typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-s-line-height);
+                ${_styledcomponents.typographyTokens.typoFontFamily}: ${_sdds_scan.textS.fontFamily};
+                ${_styledcomponents.typographyTokens.typoFontSize}: ${_sdds_scan.textS.fontSize};
+                ${_styledcomponents.typographyTokens.typoFontStyle}: ${_sdds_scan.textS.fontStyle};
+                ${_styledcomponents.typographyTokens.typoFontWeight}: ${_sdds_scan.textS.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightBold}: ${_sdds_scan.textSBold.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: ${_sdds_scan.textSMedium.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: ${_sdds_scan.textS.letterSpacing};
+                ${_styledcomponents.typographyTokens.typoFontLineHeight}: ${_sdds_scan.textS.lineHeight};
             `
         }
     }
@@ -87,14 +88,14 @@ const configXS = {
     variations: {
         size: {
             xs: (0, _styledcomponents.css)`
-                ${_styledcomponents.typographyTokens.typoFontFamily}: var(--plasma-typo-text-xs-font-family);
-                ${_styledcomponents.typographyTokens.typoFontSize}: var(--plasma-typo-text-xs-font-size);
-                ${_styledcomponents.typographyTokens.typoFontStyle}: var(--plasma-typo-text-xs-font-style);
-                ${_styledcomponents.typographyTokens.typoFontWeight}: var(--plasma-typo-text-xs-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-xs-bold-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-xs-medium-font-weight);
-                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing);
-                ${_styledcomponents.typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-xs-line-height);
+                ${_styledcomponents.typographyTokens.typoFontFamily}: ${_sdds_scan.textXS.fontFamily};
+                ${_styledcomponents.typographyTokens.typoFontSize}: ${_sdds_scan.textXS.fontSize};
+                ${_styledcomponents.typographyTokens.typoFontStyle}: ${_sdds_scan.textXS.fontStyle};
+                ${_styledcomponents.typographyTokens.typoFontWeight}: ${_sdds_scan.textXS.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightBold}: ${_sdds_scan.textXSBold.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontWeightMedium}: ${_sdds_scan.textXSMedium.fontWeight};
+                ${_styledcomponents.typographyTokens.typoFontLetterSpacing}: ${_sdds_scan.textXS.letterSpacing};
+                ${_styledcomponents.typographyTokens.typoFontLineHeight}: ${_sdds_scan.textXS.lineHeight};
             `
         }
     }

package/dist/styled-components/cjs/index.js

@@ -37,6 +37,7 @@ _export_star(require("./components/DateTimePicker"), exports);
 _export_star(require("./components/TimePicker"), exports);
 _export_star(require("./components/Range"), exports);
 _export_star(require("./components/NumberInput"), exports);
+_export_star(require("./components/NumberFormat"), exports);
 _export_star(require("./components/TextArea"), exports);
 _export_star(require("./components/TextField"), exports);
 _export_star(require("./components/TextFieldGroup"), exports);

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, bodyLBold, bodyM, bodyMBold, bodyS, bodySBold, bodyXS, bodyXSBold, surfaceAccent, surfaceClear, surfaceSolidCard, surfaceSolidTertiary, textPrimary } from '@salutejs/sdds-themes/tokens/sdds_scan';
 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;
             `
         },
@@ -41,19 +42,19 @@ export const config = {
                 ${accordionTokens.accordionItemGap}: 0.25rem;
                 ${accordionTokens.accordionItemBorderRadius}: 0.875rem;
 
-                ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-l-font-family);
-                ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-l-font-size);
-                ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-l-font-style);
-                ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-l-bold-font-weight);
-                ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${accordionTokens.accordionItemTitleFontFamily}: ${bodyL.fontFamily};
+                ${accordionTokens.accordionItemTitleFontSize}: ${bodyL.fontSize};
+                ${accordionTokens.accordionItemTitleFontStyle}: ${bodyL.fontStyle};
+                ${accordionTokens.accordionItemTitleFontWeight}: ${bodyLBold.fontWeight};
+                ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyL.letterSpacing};
+                ${accordionTokens.accordionItemTitleLineHeight}: ${bodyL.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};
             `,
             m: css`
                 ${accordionTokens.accordionItemPaddingVertical}: 0.875rem;
@@ -62,19 +63,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};
             `,
             s: css`
                 ${accordionTokens.accordionItemPaddingVertical}: 0.6875rem;
@@ -83,19 +84,19 @@ export const config = {
                 ${accordionTokens.accordionItemGap}: 0.375rem;
                 ${accordionTokens.accordionItemBorderRadius}: 0.625rem;
 
-                ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-s-font-size);
-                ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${accordionTokens.accordionItemTitleFontFamily}: ${bodyS.fontFamily};
+                ${accordionTokens.accordionItemTitleFontSize}: ${bodyS.fontSize};
+                ${accordionTokens.accordionItemTitleFontStyle}: ${bodyS.fontStyle};
+                ${accordionTokens.accordionItemTitleFontWeight}: ${bodySBold.fontWeight};
+                ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyS.letterSpacing};
+                ${accordionTokens.accordionItemTitleLineHeight}: ${bodyS.lineHeight};
 
-                ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-s-font-size);
-                ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${accordionTokens.accordionItemTextFontFamily}: ${bodyS.fontFamily};
+                ${accordionTokens.accordionItemTextFontSize}: ${bodyS.fontSize};
+                ${accordionTokens.accordionItemTextFontStyle}: ${bodyS.fontStyle};
+                ${accordionTokens.accordionItemTextFontWeight}: ${bodyS.fontWeight};
+                ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyS.letterSpacing};
+                ${accordionTokens.accordionItemTextLineHeight}: ${bodyS.lineHeight};
             `,
             xs: css`
                 ${accordionTokens.accordionItemPaddingVertical}: 0.5rem;
@@ -104,19 +105,19 @@ export const config = {
                 ${accordionTokens.accordionItemGap}: 0.25rem;
                 ${accordionTokens.accordionItemBorderRadius}: 0.5rem;
 
-                ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-xs-bold-font-weight);
-                ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${accordionTokens.accordionItemTitleFontFamily}: ${bodyXS.fontFamily};
+                ${accordionTokens.accordionItemTitleFontSize}: ${bodyXS.fontSize};
+                ${accordionTokens.accordionItemTitleFontStyle}: ${bodyXS.fontStyle};
+                ${accordionTokens.accordionItemTitleFontWeight}: ${bodyXSBold.fontWeight};
+                ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyXS.letterSpacing};
+                ${accordionTokens.accordionItemTitleLineHeight}: ${bodyXS.lineHeight};
 
-                ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${accordionTokens.accordionItemTextFontFamily}: ${bodyXS.fontFamily};
+                ${accordionTokens.accordionItemTextFontSize}: ${bodyXS.fontSize};
+                ${accordionTokens.accordionItemTextFontStyle}: ${bodyXS.fontStyle};
+                ${accordionTokens.accordionItemTextFontWeight}: ${bodyXS.fontWeight};
+                ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyXS.letterSpacing};
+                ${accordionTokens.accordionItemTextLineHeight}: ${bodyXS.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 { bodyS, bodySBold, bodyXS, bodyXSBold, inverseTextPrimary, inverseTextSecondary, surfaceAccent, surfaceClear, surfaceSolidDefault, surfaceSolidDefaultActive, surfaceSolidDefaultHover, textNegative, textPrimary, textSecondary, textSecondaryActive, textSecondaryHover } from '@salutejs/sdds-themes/tokens/sdds_scan';
 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}: 1rem;
                 ${attachTokens.buttonRadius}: 0.625rem;
-                ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${attachTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size);
-                ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${attachTokens.buttonFontFamily}: ${bodyS.fontFamily};
+                ${attachTokens.buttonFontSize}: ${bodyS.fontSize};
+                ${attachTokens.buttonFontStyle}: ${bodyS.fontStyle};
+                ${attachTokens.buttonFontWeight}: ${bodySBold.fontWeight};
+                ${attachTokens.buttonLetterSpacing}: ${bodyS.letterSpacing};
+                ${attachTokens.buttonLineHeight}: ${bodyS.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-xs-font-family);
-                ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height);
-
-                ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size);
-                ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height);
-
-                ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${attachTokens.cellLabelFontFamily}: ${bodyXS.fontFamily};
+                ${attachTokens.cellLabelFontSize}: ${bodyXS.fontSize};
+                ${attachTokens.cellLabelFontStyle}: ${bodyXS.fontStyle};
+                ${attachTokens.cellLabelFontWeight}: ${bodyXS.fontWeight};
+                ${attachTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing};
+                ${attachTokens.cellLabelLineHeight}: ${bodyXS.lineHeight};
+
+                ${attachTokens.cellTitleFontFamily}: ${bodyS.fontFamily};
+                ${attachTokens.cellTitleFontSize}: ${bodyS.fontSize};
+                ${attachTokens.cellTitleFontStyle}: ${bodyS.fontStyle};
+                ${attachTokens.cellTitleFontWeight}: ${bodyS.fontWeight};
+                ${attachTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing};
+                ${attachTokens.cellTitleLineHeight}: ${bodyS.lineHeight};
+
+                ${attachTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily};
+                ${attachTokens.cellSubtitleFontSize}: ${bodyXS.fontSize};
+                ${attachTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle};
+                ${attachTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight};
+                ${attachTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing};
+                ${attachTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight};
 
                 ${attachTokens.iconButtonHeight}: 2.5rem;
                 ${attachTokens.iconButtonWidth}: 2.5rem;
                 ${attachTokens.iconButtonPadding}: 1rem;
                 ${attachTokens.iconButtonRadius}: 0.625rem;
-                ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size);
-                ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${attachTokens.iconButtonFontFamily}: ${bodyS.fontFamily};
+                ${attachTokens.iconButtonFontSize}: ${bodyS.fontSize};
+                ${attachTokens.iconButtonFontStyle}: ${bodyS.fontStyle};
+                ${attachTokens.iconButtonFontWeight}: ${bodySBold.fontWeight};
+                ${attachTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing};
+                ${attachTokens.iconButtonLineHeight}: ${bodyS.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;