@salutejs/sdds-serv 0.355.0-next-sbcom.0 → 0.355.0

package/dist/emotion/es/components/Modal/Modal.config.js

@@ -1,4 +1,5 @@
 import { css, modalTokens } from '@salutejs/plasma-new-hope/emotion';
+import { overlaySoft, surfaceAccent, surfaceSolidCard, textSecondary, textSecondaryActive, textSecondaryHover } from '@salutejs/sdds-themes/tokens/sdds_serv';
 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/emotion/es/components/Note/Note.config.js

@@ -1,4 +1,5 @@
 import { css, noteTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
+import { surfaceTransparentInfo, surfaceTransparentNegative, surfaceTransparentPositive, surfaceTransparentSecondary, surfaceTransparentWarning, textInfo, textL, textLBold, textM, textMBold, textNegative, textPositive, textPrimary, textS, textSBold, textSecondary, textSecondaryHover, textWarning, textXS, textXSBold } from '@salutejs/sdds-themes/tokens/sdds_serv';
 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}: 1rem;
                 ${tokens.closeIconRight}: 1rem;
-                ${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}: 2rem;
                 ${tokens.fixedContentBeforePadding}: 0.25rem 0rem;
 
-                ${tokens.titleFontFamily}: var(--plasma-typo-text-l-font-family);
-                ${tokens.titleFontSize}: var(--plasma-typo-text-l-font-size);
-                ${tokens.titleFontStyle}: var(--plasma-typo-text-l-font-style);
-                ${tokens.titleFontWeight}: var(--plasma-typo-text-l-bold-font-weight);
-                ${tokens.titleLetterSpacing}: var(--plasma-typo-text-l-letter-spacing);
-                ${tokens.titleLineHeight}: var(--plasma-typo-text-l-line-height);
+                ${tokens.titleFontFamily}: ${textL.fontFamily};
+                ${tokens.titleFontSize}: ${textL.fontSize};
+                ${tokens.titleFontStyle}: ${textL.fontStyle};
+                ${tokens.titleFontWeight}: ${textLBold.fontWeight};
+                ${tokens.titleLetterSpacing}: ${textL.letterSpacing};
+                ${tokens.titleLineHeight}: ${textL.lineHeight};
                 ${tokens.titlePaddingRight}: 1.875rem;
 
-                ${tokens.textFontFamily}: var(--plasma-typo-text-l-font-family);
-                ${tokens.textFontSize}: var(--plasma-typo-text-l-font-size);
-                ${tokens.textFontStyle}: var(--plasma-typo-text-l-font-style);
-                ${tokens.textFontWeight}: var(--plasma-typo-text-l-font-weight);
-                ${tokens.textLetterSpacing}: var(--plasma-typo-text-l-letter-spacing);
-                ${tokens.textLineHeight}: var(--plasma-typo-text-l-line-height);
+                ${tokens.textFontFamily}: ${textL.fontFamily};
+                ${tokens.textFontSize}: ${textL.fontSize};
+                ${tokens.textFontStyle}: ${textL.fontStyle};
+                ${tokens.textFontWeight}: ${textL.fontWeight};
+                ${tokens.textLetterSpacing}: ${textL.letterSpacing};
+                ${tokens.textLineHeight}: ${textL.lineHeight};
             `,
             m: css`
                 ${tokens.padding}: 1.25rem 1.5rem;
@@ -82,8 +83,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;
 
@@ -91,20 +92,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;
@@ -118,8 +119,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;
 
@@ -127,20 +128,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};
             `,
             xs: css`
                 ${tokens.padding}: 0.75rem 1rem;
@@ -154,8 +155,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}: 1rem;
                 ${tokens.closeIconButtonSize}: 1rem;
 
@@ -163,20 +164,20 @@ export const config = {
                 ${tokens.fixedContentBeforeHeight}: 1rem;
                 ${tokens.fixedContentBeforePadding}: 0rem;
 
-                ${tokens.titleFontFamily}: var(--plasma-typo-text-xs-font-family);
-                ${tokens.titleFontSize}: var(--plasma-typo-text-xs-font-size);
-                ${tokens.titleFontStyle}: var(--plasma-typo-text-xs-font-style);
-                ${tokens.titleFontWeight}: var(--plasma-typo-text-xs-bold-font-weight);
-                ${tokens.titleLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing);
-                ${tokens.titleLineHeight}: var(--plasma-typo-text-xs-line-height);
+                ${tokens.titleFontFamily}: ${textXS.fontFamily};
+                ${tokens.titleFontSize}: ${textXS.fontSize};
+                ${tokens.titleFontStyle}: ${textXS.fontStyle};
+                ${tokens.titleFontWeight}: ${textXSBold.fontWeight};
+                ${tokens.titleLetterSpacing}: ${textXS.letterSpacing};
+                ${tokens.titleLineHeight}: ${textXS.lineHeight};
                 ${tokens.titlePaddingRight}: 1.5rem;
 
-                ${tokens.textFontFamily}: var(--plasma-typo-text-xs-font-family);
-                ${tokens.textFontSize}: var(--plasma-typo-text-xs-font-size);
-                ${tokens.textFontStyle}: var(--plasma-typo-text-xs-font-style);
-                ${tokens.textFontWeight}: var(--plasma-typo-text-xs-font-weight);
-                ${tokens.textLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing);
-                ${tokens.textLineHeight}: var(--plasma-typo-text-xs-line-height);
+                ${tokens.textFontFamily}: ${textXS.fontFamily};
+                ${tokens.textFontSize}: ${textXS.fontSize};
+                ${tokens.textFontStyle}: ${textXS.fontStyle};
+                ${tokens.textFontWeight}: ${textXS.fontWeight};
+                ${tokens.textLetterSpacing}: ${textXS.letterSpacing};
+                ${tokens.textLineHeight}: ${textXS.lineHeight};
             `
         },
         orientation: {

package/dist/emotion/es/components/Notification/Notification.config.js

@@ -1,4 +1,5 @@
 import { css, notificationTokens } from '@salutejs/plasma-new-hope/emotion';
+import { bodyS, bodySBold, surfaceTransparentCard, textInfo, textNegative, textPositive, textPrimary, textSecondary, textTertiary, textWarning } from '@salutejs/sdds-themes/tokens/sdds_serv';
 export const config = {
     defaults: {
         view: 'default',
@@ -7,10 +8,10 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${notificationTokens.titleColor}: var(--text-primary);
-                ${notificationTokens.contentLeftIconColor}: var(--text-primary);
-                ${notificationTokens.contentColor}: var(--text-secondary);
-                ${notificationTokens.background}: var(--surface-transparent-card);
+                ${notificationTokens.titleColor}: ${textPrimary};
+                ${notificationTokens.contentLeftIconColor}: ${textPrimary};
+                ${notificationTokens.contentColor}: ${textSecondary};
+                ${notificationTokens.background}: ${surfaceTransparentCard};
                 ${notificationTokens.borderRadius}: 0.75rem;
                 ${notificationTokens.padding}: 0.375rem;
 
@@ -39,32 +40,32 @@ export const config = {
                 ${notificationTokens.contentLeftIconMargin}: 0.375rem;
                 ${notificationTokens.contentTopIconMargin}: 0.5rem;
 
-                ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size);
-                ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily};
+                ${notificationTokens.contentFontSize}: ${bodyS.fontSize};
+                ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle};
+                ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight};
+                ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight};
 
-                ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size);
-                ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily};
+                ${notificationTokens.titleFontSize}: ${bodyS.fontSize};
+                ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle};
+                ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight};
+                ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight};
 
-                ${notificationTokens.closeIconColor}: var(--text-tertiary);
-                ${notificationTokens.closeIconColorOnHover}: var(--text-primary);
+                ${notificationTokens.closeIconColor}: ${textTertiary};
+                ${notificationTokens.closeIconColorOnHover}: ${textPrimary};
 
                 ${notificationTokens.horizontalLayoutGap}: 0.375rem;
                 ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem;
                 ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem;
             `,
             negative: css`
-                ${notificationTokens.titleColor}: var(--text-negative);
-                ${notificationTokens.contentLeftIconColor}: var(--text-negative);
-                ${notificationTokens.contentColor}: var(--text-secondary);
-                ${notificationTokens.background}: var(--surface-transparent-card);
+                ${notificationTokens.titleColor}: ${textNegative};
+                ${notificationTokens.contentLeftIconColor}: ${textNegative};
+                ${notificationTokens.contentColor}: ${textSecondary};
+                ${notificationTokens.background}: ${surfaceTransparentCard};
                 ${notificationTokens.borderRadius}: 0.75rem;
                 ${notificationTokens.padding}: 0.375rem;
 
@@ -93,32 +94,32 @@ export const config = {
                 ${notificationTokens.contentLeftIconMargin}: 0.375rem;
                 ${notificationTokens.contentTopIconMargin}: 0.5rem;
 
-                ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size);
-                ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily};
+                ${notificationTokens.contentFontSize}: ${bodyS.fontSize};
+                ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle};
+                ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight};
+                ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight};
 
-                ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size);
-                ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily};
+                ${notificationTokens.titleFontSize}: ${bodyS.fontSize};
+                ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle};
+                ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight};
+                ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight};
 
-                ${notificationTokens.closeIconColor}: var(--text-tertiary);
-                ${notificationTokens.closeIconColorOnHover}: var(--text-primary);
+                ${notificationTokens.closeIconColor}: ${textTertiary};
+                ${notificationTokens.closeIconColorOnHover}: ${textPrimary};
 
                 ${notificationTokens.horizontalLayoutGap}: 0.375rem;
                 ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem;
                 ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem;
             `,
             positive: css`
-                ${notificationTokens.titleColor}: var(--text-positive);
-                ${notificationTokens.contentLeftIconColor}: var(--text-positive);
-                ${notificationTokens.contentColor}: var(--text-secondary);
-                ${notificationTokens.background}: var(--surface-transparent-card);
+                ${notificationTokens.titleColor}: ${textPositive};
+                ${notificationTokens.contentLeftIconColor}: ${textPositive};
+                ${notificationTokens.contentColor}: ${textSecondary};
+                ${notificationTokens.background}: ${surfaceTransparentCard};
                 ${notificationTokens.borderRadius}: 0.75rem;
                 ${notificationTokens.padding}: 0.375rem;
 
@@ -147,32 +148,32 @@ export const config = {
                 ${notificationTokens.contentLeftIconMargin}: 0.375rem;
                 ${notificationTokens.contentTopIconMargin}: 0.5rem;
 
-                ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size);
-                ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily};
+                ${notificationTokens.contentFontSize}: ${bodyS.fontSize};
+                ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle};
+                ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight};
+                ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight};
 
-                ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size);
-                ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily};
+                ${notificationTokens.titleFontSize}: ${bodyS.fontSize};
+                ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle};
+                ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight};
+                ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight};
 
-                ${notificationTokens.closeIconColor}: var(--text-tertiary);
-                ${notificationTokens.closeIconColorOnHover}: var(--text-primary);
+                ${notificationTokens.closeIconColor}: ${textTertiary};
+                ${notificationTokens.closeIconColorOnHover}: ${textPrimary};
 
                 ${notificationTokens.horizontalLayoutGap}: 0.375rem;
                 ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem;
                 ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem;
             `,
             warning: css`
-                ${notificationTokens.titleColor}: var(--text-warning);
-                ${notificationTokens.contentLeftIconColor}: var(--text-warning);
-                ${notificationTokens.contentColor}: var(--text-secondary);
-                ${notificationTokens.background}: var(--surface-transparent-card);
+                ${notificationTokens.titleColor}: ${textWarning};
+                ${notificationTokens.contentLeftIconColor}: ${textWarning};
+                ${notificationTokens.contentColor}: ${textSecondary};
+                ${notificationTokens.background}: ${surfaceTransparentCard};
                 ${notificationTokens.borderRadius}: 0.75rem;
                 ${notificationTokens.padding}: 0.375rem;
 
@@ -201,32 +202,32 @@ export const config = {
                 ${notificationTokens.contentLeftIconMargin}: 0.375rem;
                 ${notificationTokens.contentTopIconMargin}: 0.5rem;
 
-                ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size);
-                ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily};
+                ${notificationTokens.contentFontSize}: ${bodyS.fontSize};
+                ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle};
+                ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight};
+                ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight};
 
-                ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size);
-                ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily};
+                ${notificationTokens.titleFontSize}: ${bodyS.fontSize};
+                ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle};
+                ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight};
+                ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight};
 
-                ${notificationTokens.closeIconColor}: var(--text-tertiary);
-                ${notificationTokens.closeIconColorOnHover}: var(--text-primary);
+                ${notificationTokens.closeIconColor}: ${textTertiary};
+                ${notificationTokens.closeIconColorOnHover}: ${textPrimary};
 
                 ${notificationTokens.horizontalLayoutGap}: 0.375rem;
                 ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem;
                 ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem;
             `,
             info: css`
-                ${notificationTokens.titleColor}: var(--text-info);
-                ${notificationTokens.contentLeftIconColor}: var(--text-info);
-                ${notificationTokens.contentColor}: var(--text-secondary);
-                ${notificationTokens.background}: var(--surface-transparent-card);
+                ${notificationTokens.titleColor}: ${textInfo};
+                ${notificationTokens.contentLeftIconColor}: ${textInfo};
+                ${notificationTokens.contentColor}: ${textSecondary};
+                ${notificationTokens.background}: ${surfaceTransparentCard};
                 ${notificationTokens.borderRadius}: 0.75rem;
                 ${notificationTokens.padding}: 0.375rem;
 
@@ -255,22 +256,22 @@ export const config = {
                 ${notificationTokens.contentLeftIconMargin}: 0.375rem;
                 ${notificationTokens.contentTopIconMargin}: 0.5rem;
 
-                ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size);
-                ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height);
-
-                ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size);
-                ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height);
-
-                ${notificationTokens.closeIconColor}: var(--text-tertiary);
-                ${notificationTokens.closeIconColorOnHover}: var(--text-primary);
+                ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily};
+                ${notificationTokens.contentFontSize}: ${bodyS.fontSize};
+                ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle};
+                ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight};
+                ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight};
+
+                ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily};
+                ${notificationTokens.titleFontSize}: ${bodyS.fontSize};
+                ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle};
+                ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight};
+                ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight};
+
+                ${notificationTokens.closeIconColor}: ${textTertiary};
+                ${notificationTokens.closeIconColorOnHover}: ${textPrimary};
 
                 ${notificationTokens.horizontalLayoutGap}: 0.375rem;
                 ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem;