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

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

@@ -1,4 +1,5 @@
 import { css, loaderTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyL, bodyM, bodyS, bodyXS, bodyXXS, h2, h2Bold, h5, h5Bold, overlaySoft, surfaceAccent, surfaceInfo, surfaceNegative, surfacePositive, surfaceSolidDefault, surfaceTransparentSecondary, surfaceTransparentTertiary, surfaceWarning, textAccent, textInfo, textNegative, textPositive, textPrimary, textSecondary, textWarning } from '@salutejs/sdds-themes/tokens/sdds_scan';
 export const config = {
     defaults: {
         view: 'default',
@@ -7,67 +8,67 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary);
-                ${loaderTokens.progressBarCircularStroke}: var(--surface-solid-default);
-                ${loaderTokens.progressBarCircularContentColor}: var(--text-primary);
+                ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary};
+                ${loaderTokens.progressBarCircularStroke}: ${surfaceSolidDefault};
+                ${loaderTokens.progressBarCircularContentColor}: ${textPrimary};
 
-                ${loaderTokens.spinnerColor}: var(--text-primary);
+                ${loaderTokens.spinnerColor}: ${textPrimary};
 
-                ${loaderTokens.overlayColor}: var(--overlay-soft);
+                ${loaderTokens.overlayColor}: ${overlaySoft};
             `,
             secondary: css`
-                ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary);
-                ${loaderTokens.progressBarCircularStroke}: var(--surface-transparent-secondary);
-                ${loaderTokens.progressBarCircularContentColor}: var(--text-primary);
+                ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary};
+                ${loaderTokens.progressBarCircularStroke}: ${surfaceTransparentSecondary};
+                ${loaderTokens.progressBarCircularContentColor}: ${textPrimary};
 
-                ${loaderTokens.spinnerColor}: var(--text-secondary);
+                ${loaderTokens.spinnerColor}: ${textSecondary};
 
-                ${loaderTokens.overlayColor}: var(--overlay-soft);
+                ${loaderTokens.overlayColor}: ${overlaySoft};
             `,
             accent: css`
-                ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary);
-                ${loaderTokens.progressBarCircularStroke}: var(--surface-accent);
-                ${loaderTokens.progressBarCircularContentColor}: var(--text-primary);
+                ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary};
+                ${loaderTokens.progressBarCircularStroke}: ${surfaceAccent};
+                ${loaderTokens.progressBarCircularContentColor}: ${textPrimary};
 
-                ${loaderTokens.spinnerColor}: var(--text-accent);
+                ${loaderTokens.spinnerColor}: ${textAccent};
 
-                ${loaderTokens.overlayColor}: var(--overlay-soft);
+                ${loaderTokens.overlayColor}: ${overlaySoft};
             `,
             positive: css`
-                ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary);
-                ${loaderTokens.progressBarCircularStroke}: var(--surface-positive);
-                ${loaderTokens.progressBarCircularContentColor}: var(--text-primary);
+                ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary};
+                ${loaderTokens.progressBarCircularStroke}: ${surfacePositive};
+                ${loaderTokens.progressBarCircularContentColor}: ${textPrimary};
 
-                ${loaderTokens.spinnerColor}: var(--text-positive);
+                ${loaderTokens.spinnerColor}: ${textPositive};
 
-                ${loaderTokens.overlayColor}: var(--overlay-soft);
+                ${loaderTokens.overlayColor}: ${overlaySoft};
             `,
             warning: css`
-                ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary);
-                ${loaderTokens.progressBarCircularStroke}: var(--surface-warning);
-                ${loaderTokens.progressBarCircularContentColor}: var(--text-primary);
+                ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary};
+                ${loaderTokens.progressBarCircularStroke}: ${surfaceWarning};
+                ${loaderTokens.progressBarCircularContentColor}: ${textPrimary};
 
-                ${loaderTokens.spinnerColor}: var(--text-warning);
+                ${loaderTokens.spinnerColor}: ${textWarning};
 
-                ${loaderTokens.overlayColor}: var(--overlay-soft);
+                ${loaderTokens.overlayColor}: ${overlaySoft};
             `,
             negative: css`
-                ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary);
-                ${loaderTokens.progressBarCircularStroke}: var(--surface-negative);
-                ${loaderTokens.progressBarCircularContentColor}: var(--text-primary);
+                ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary};
+                ${loaderTokens.progressBarCircularStroke}: ${surfaceNegative};
+                ${loaderTokens.progressBarCircularContentColor}: ${textPrimary};
 
-                ${loaderTokens.spinnerColor}: var(--text-negative);
+                ${loaderTokens.spinnerColor}: ${textNegative};
 
-                ${loaderTokens.overlayColor}: var(--overlay-soft);
+                ${loaderTokens.overlayColor}: ${overlaySoft};
             `,
             info: css`
-                ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary);
-                ${loaderTokens.progressBarCircularStroke}: var(--surface-info);
-                ${loaderTokens.progressBarCircularContentColor}: var(--text-primary);
+                ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary};
+                ${loaderTokens.progressBarCircularStroke}: ${surfaceInfo};
+                ${loaderTokens.progressBarCircularContentColor}: ${textPrimary};
 
-                ${loaderTokens.spinnerColor}: var(--text-info);
+                ${loaderTokens.spinnerColor}: ${textInfo};
 
-                ${loaderTokens.overlayColor}: var(--overlay-soft);
+                ${loaderTokens.overlayColor}: ${overlaySoft};
             `
         },
         size: {
@@ -80,12 +81,12 @@ export const config = {
                 ${loaderTokens.progressBarCircularWidth}: 8rem;
                 ${loaderTokens.progressBarCircularStrokeWidth}: 0.25rem;
                 ${loaderTokens.progressBarCircularStrokeSize}: 4;
-                ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-h2-font-family);
-                ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-h2-font-size);
-                ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-h2-font-style);
-                ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-h2-bold-font-weight);
-                ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-h2-letter-spacing);
-                ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-h2-line-height);
+                ${loaderTokens.progressBarCircularContentFontFamily}: ${h2.fontFamily};
+                ${loaderTokens.progressBarCircularContentFontSize}: ${h2.fontSize};
+                ${loaderTokens.progressBarCircularContentFontStyle}: ${h2.fontStyle};
+                ${loaderTokens.progressBarCircularContentFontWeight}: ${h2Bold.fontWeight};
+                ${loaderTokens.progressBarCircularContentLetterSpacing}: ${h2.letterSpacing};
+                ${loaderTokens.progressBarCircularContentLineHeight}: ${h2.lineHeight};
 
                 ${loaderTokens.spinnerSize}: 8rem;
             `,
@@ -98,12 +99,12 @@ export const config = {
                 ${loaderTokens.progressBarCircularWidth}: 5.5rem;
                 ${loaderTokens.progressBarCircularStrokeWidth}: 0.25rem;
                 ${loaderTokens.progressBarCircularStrokeSize}: 4;
-                ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-h5-font-family);
-                ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-h5-font-size);
-                ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-h5-font-style);
-                ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-h5-bold-font-weight);
-                ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-h5-letter-spacing);
-                ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-h5-line-height);
+                ${loaderTokens.progressBarCircularContentFontFamily}: ${h5.fontFamily};
+                ${loaderTokens.progressBarCircularContentFontSize}: ${h5.fontSize};
+                ${loaderTokens.progressBarCircularContentFontStyle}: ${h5.fontStyle};
+                ${loaderTokens.progressBarCircularContentFontWeight}: ${h5Bold.fontWeight};
+                ${loaderTokens.progressBarCircularContentLetterSpacing}: ${h5.letterSpacing};
+                ${loaderTokens.progressBarCircularContentLineHeight}: ${h5.lineHeight};
 
                 ${loaderTokens.spinnerSize}: 5.5rem;
             `,
@@ -116,12 +117,12 @@ export const config = {
                 ${loaderTokens.progressBarCircularWidth}: 3.5rem;
                 ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem;
                 ${loaderTokens.progressBarCircularStrokeSize}: 2;
-                ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-l-font-family);
-                ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-l-font-size);
-                ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-l-font-style);
-                ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-l-body-font-weight);
-                ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyL.fontFamily};
+                ${loaderTokens.progressBarCircularContentFontSize}: ${bodyL.fontSize};
+                ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyL.fontStyle};
+                ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyL.fontWeight};
+                ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyL.letterSpacing};
+                ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyL.lineHeight};
 
                 ${loaderTokens.spinnerSize}: 3.5rem;
             `,
@@ -134,12 +135,12 @@ export const config = {
                 ${loaderTokens.progressBarCircularWidth}: 3rem;
                 ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem;
                 ${loaderTokens.progressBarCircularStrokeSize}: 2;
-                ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-m-font-size);
-                ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-m-body-font-weight);
-                ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyM.fontFamily};
+                ${loaderTokens.progressBarCircularContentFontSize}: ${bodyM.fontSize};
+                ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyM.fontStyle};
+                ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyM.fontWeight};
+                ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyM.letterSpacing};
+                ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyM.lineHeight};
 
                 ${loaderTokens.spinnerSize}: 3rem;
             `,
@@ -152,12 +153,12 @@ export const config = {
                 ${loaderTokens.progressBarCircularWidth}: 2.25rem;
                 ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem;
                 ${loaderTokens.progressBarCircularStrokeSize}: 2;
-                ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-s-font-size);
-                ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-s-body-font-weight);
-                ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyS.fontFamily};
+                ${loaderTokens.progressBarCircularContentFontSize}: ${bodyS.fontSize};
+                ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyS.fontStyle};
+                ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyS.fontWeight};
+                ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyS.letterSpacing};
+                ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyS.lineHeight};
 
                 ${loaderTokens.spinnerSize}: 2.25rem;
             `,
@@ -170,12 +171,12 @@ export const config = {
                 ${loaderTokens.progressBarCircularWidth}: 1.5rem;
                 ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem;
                 ${loaderTokens.progressBarCircularStrokeSize}: 2;
-                ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-xs-body-font-weight);
-                ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyXS.fontFamily};
+                ${loaderTokens.progressBarCircularContentFontSize}: ${bodyXS.fontSize};
+                ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyXS.fontStyle};
+                ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyXS.fontWeight};
+                ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyXS.letterSpacing};
+                ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyXS.lineHeight};
 
                 ${loaderTokens.spinnerSize}: 1.5rem;
             `,
@@ -188,12 +189,12 @@ export const config = {
                 ${loaderTokens.progressBarCircularWidth}: 1rem;
                 ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem;
                 ${loaderTokens.progressBarCircularStrokeSize}: 2;
-                ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-xxs-font-family);
-                ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-xxs-font-size);
-                ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-xxs-font-style);
-                ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-xxs-body-font-weight);
-                ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
-                ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-xxs-line-height);
+                ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyXXS.fontFamily};
+                ${loaderTokens.progressBarCircularContentFontSize}: ${bodyXXS.fontSize};
+                ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyXXS.fontStyle};
+                ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyXXS.fontWeight};
+                ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyXXS.letterSpacing};
+                ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyXXS.lineHeight};
 
                 ${loaderTokens.spinnerSize}: 1rem;
             `

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

@@ -1,4 +1,5 @@
 import { css, modalTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { overlaySoft, surfaceAccent, surfaceSolidCard, textSecondary, textSecondaryActive, textSecondaryHover } from '@salutejs/sdds-themes/tokens/sdds_scan';
 export const config = {
     defaults: {
         view: 'default'
@@ -7,16 +8,16 @@ export const config = {
         view: {
             default: css`
                 ${modalTokens.modalOverlayWithBlurColor}: rgba(35, 35, 35, 0.2);
-                ${modalTokens.modalOverlayColor}: var(--overlay-soft);
-                ${modalTokens.modalBodyBackground}: var(--surface-solid-card);
+                ${modalTokens.modalOverlayColor}: ${overlaySoft};
+                ${modalTokens.modalBodyBackground}: ${surfaceSolidCard};
                 ${modalTokens.modalBodyBorderRadius}: 1.25rem;
                 ${modalTokens.modalBodyPadding}: 2rem;
                 ${modalTokens.modalContentPadding}: 0.625rem;
                 ${modalTokens.modalCloseButtonRadius}: 0.375rem;
-                ${modalTokens.modalCloseButtonColor}: var(--text-secondary);
-                ${modalTokens.modalCloseButtonHoverColor}: var(--text-secondary-hover);
-                ${modalTokens.modalCloseButtonActiveColor}: var(--text-secondary-active);
-                ${modalTokens.modalOutlineFocusColor}: var(--surface-accent);
+                ${modalTokens.modalCloseButtonColor}: ${textSecondary};
+                ${modalTokens.modalCloseButtonHoverColor}: ${textSecondaryHover};
+                ${modalTokens.modalCloseButtonActiveColor}: ${textSecondaryActive};
+                ${modalTokens.modalOutlineFocusColor}: ${surfaceAccent};
             `
         }
     }

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

@@ -1,4 +1,5 @@
 import { css, noteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components';
+import { surfaceTransparentInfo, surfaceTransparentNegative, surfaceTransparentPositive, surfaceTransparentSecondary, surfaceTransparentWarning, textInfo, textM, textMBold, textNegative, textPositive, textPrimary, textS, textSBold, textSecondary, textSecondaryHover, textWarning } from '@salutejs/sdds-themes/tokens/sdds_scan';
 export const config = {
     defaults: {
         view: 'default',
@@ -8,29 +9,29 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${tokens.background}: var(--surface-transparent-secondary);
-                ${tokens.color}: var(--text-primary);
-                ${tokens.contentBeforeColor}: var(--text-primary);
+                ${tokens.background}: ${surfaceTransparentSecondary};
+                ${tokens.color}: ${textPrimary};
+                ${tokens.contentBeforeColor}: ${textPrimary};
             `,
             positive: css`
-                ${tokens.background}: var(--surface-transparent-positive);
-                ${tokens.color}: var(--text-primary);
-                ${tokens.contentBeforeColor}: var(--text-positive);
+                ${tokens.background}: ${surfaceTransparentPositive};
+                ${tokens.color}: ${textPrimary};
+                ${tokens.contentBeforeColor}: ${textPositive};
             `,
             warning: css`
-                ${tokens.background}: var(--surface-transparent-warning);
-                ${tokens.color}: var(--text-primary);
-                ${tokens.contentBeforeColor}: var(--text-warning);
+                ${tokens.background}: ${surfaceTransparentWarning};
+                ${tokens.color}: ${textPrimary};
+                ${tokens.contentBeforeColor}: ${textWarning};
             `,
             negative: css`
-                ${tokens.background}: var(--surface-transparent-negative);
-                ${tokens.color}: var(--text-primary);
-                ${tokens.contentBeforeColor}: var(--text-negative);
+                ${tokens.background}: ${surfaceTransparentNegative};
+                ${tokens.color}: ${textPrimary};
+                ${tokens.contentBeforeColor}: ${textNegative};
             `,
             info: css`
-                ${tokens.background}: var(--surface-transparent-info);
-                ${tokens.color}: var(--text-primary);
-                ${tokens.contentBeforeColor}: var(--text-info);
+                ${tokens.background}: ${surfaceTransparentInfo};
+                ${tokens.color}: ${textPrimary};
+                ${tokens.contentBeforeColor}: ${textInfo};
             `
         },
         size: {
@@ -46,8 +47,8 @@ export const config = {
 
                 ${tokens.closeIconTop}: 0.75rem;
                 ${tokens.closeIconRight}: 0.75rem;
-                ${tokens.closeIconColor}: var(--text-secondary);
-                ${tokens.closeIconColorOnHover}: var(--text-secondary-hover);
+                ${tokens.closeIconColor}: ${textSecondary};
+                ${tokens.closeIconColorOnHover}: ${textSecondaryHover};
                 ${tokens.closeIconSize}: 1.5rem;
                 ${tokens.closeIconButtonSize}: 1.5rem;
 
@@ -55,20 +56,20 @@ export const config = {
                 ${tokens.fixedContentBeforeHeight}: 1.625rem;
                 ${tokens.fixedContentBeforePadding}: 0rem;
 
-                ${tokens.titleFontFamily}: var(--plasma-typo-text-m-font-family);
-                ${tokens.titleFontSize}: var(--plasma-typo-text-m-font-size);
-                ${tokens.titleFontStyle}: var(--plasma-typo-text-m-font-style);
-                ${tokens.titleFontWeight}: var(--plasma-typo-text-m-bold-font-weight);
-                ${tokens.titleLetterSpacing}: var(--plasma-typo-text-m-letter-spacing);
-                ${tokens.titleLineHeight}: var(--plasma-typo-text-m-line-height);
+                ${tokens.titleFontFamily}: ${textM.fontFamily};
+                ${tokens.titleFontSize}: ${textM.fontSize};
+                ${tokens.titleFontStyle}: ${textM.fontStyle};
+                ${tokens.titleFontWeight}: ${textMBold.fontWeight};
+                ${tokens.titleLetterSpacing}: ${textM.letterSpacing};
+                ${tokens.titleLineHeight}: ${textM.lineHeight};
                 ${tokens.titlePaddingRight}: 1.75rem;
 
-                ${tokens.textFontFamily}: var(--plasma-typo-text-m-font-family);
-                ${tokens.textFontSize}: var(--plasma-typo-text-m-font-size);
-                ${tokens.textFontStyle}: var(--plasma-typo-text-m-font-style);
-                ${tokens.textFontWeight}: var(--plasma-typo-text-m-font-weight);
-                ${tokens.textLetterSpacing}: var(--plasma-typo-text-m-letter-spacing);
-                ${tokens.textLineHeight}: var(--plasma-typo-text-m-line-height);
+                ${tokens.textFontFamily}: ${textM.fontFamily};
+                ${tokens.textFontSize}: ${textM.fontSize};
+                ${tokens.textFontStyle}: ${textM.fontStyle};
+                ${tokens.textFontWeight}: ${textM.fontWeight};
+                ${tokens.textLetterSpacing}: ${textM.letterSpacing};
+                ${tokens.textLineHeight}: ${textM.lineHeight};
             `,
             s: css`
                 ${tokens.padding}: 1rem 1.25rem;
@@ -82,8 +83,8 @@ export const config = {
 
                 ${tokens.closeIconTop}: 0.625rem;
                 ${tokens.closeIconRight}: 0.625rem;
-                ${tokens.closeIconColor}: var(--text-secondary);
-                ${tokens.closeIconColorOnHover}: var(--text-secondary-hover);
+                ${tokens.closeIconColor}: ${textSecondary};
+                ${tokens.closeIconColorOnHover}: ${textSecondaryHover};
                 ${tokens.closeIconSize}: 1.5rem;
                 ${tokens.closeIconButtonSize}: 1.5rem;
 
@@ -91,20 +92,20 @@ export const config = {
                 ${tokens.fixedContentBeforeHeight}: 1.125rem;
                 ${tokens.fixedContentBeforePadding}: 0.063rem 0rem;
 
-                ${tokens.titleFontFamily}: var(--plasma-typo-text-s-font-family);
-                ${tokens.titleFontSize}: var(--plasma-typo-text-s-font-size);
-                ${tokens.titleFontStyle}: var(--plasma-typo-text-s-font-style);
-                ${tokens.titleFontWeight}: var(--plasma-typo-text-s-bold-font-weight);
-                ${tokens.titleLetterSpacing}: var(--plasma-typo-text-s-letter-spacing);
-                ${tokens.titleLineHeight}: var(--plasma-typo-text-s-line-height);
+                ${tokens.titleFontFamily}: ${textS.fontFamily};
+                ${tokens.titleFontSize}: ${textS.fontSize};
+                ${tokens.titleFontStyle}: ${textS.fontStyle};
+                ${tokens.titleFontWeight}: ${textSBold.fontWeight};
+                ${tokens.titleLetterSpacing}: ${textS.letterSpacing};
+                ${tokens.titleLineHeight}: ${textS.lineHeight};
                 ${tokens.titlePaddingRight}: 1.625rem;
 
-                ${tokens.textFontFamily}: var(--plasma-typo-text-s-font-family);
-                ${tokens.textFontSize}: var(--plasma-typo-text-s-font-size);
-                ${tokens.textFontStyle}: var(--plasma-typo-text-s-font-style);
-                ${tokens.textFontWeight}: var(--plasma-typo-text-s-font-weight);
-                ${tokens.textLetterSpacing}: var(--plasma-typo-text-s-letter-spacing);
-                ${tokens.textLineHeight}: var(--plasma-typo-text-s-line-height);
+                ${tokens.textFontFamily}: ${textS.fontFamily};
+                ${tokens.textFontSize}: ${textS.fontSize};
+                ${tokens.textFontStyle}: ${textS.fontStyle};
+                ${tokens.textFontWeight}: ${textS.fontWeight};
+                ${tokens.textLetterSpacing}: ${textS.letterSpacing};
+                ${tokens.textLineHeight}: ${textS.lineHeight};
             `
         },
         orientation: {