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

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, textSecondary, textSecondaryHover, textWarning } from '@salutejs/sdds-themes/tokens/sdds_platform_ai';
 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};
             `
         },
         orientation: {

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

@@ -1,4 +1,5 @@
 import { css, notificationTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyS, bodySBold, outlineInfo, outlineNegative, shadowDownSoftM, surfaceAccentGradient, surfaceSolidSecondary, surfaceTransparentCard, textPrimary, textSecondary, textTertiary, textWarning } from '@salutejs/sdds-themes/tokens/sdds_platform_ai';
 export const config = {
     defaults: {
         view: 'default',
@@ -7,15 +8,15 @@ 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-solid-secondary);
+                ${notificationTokens.titleColor}: ${textPrimary};
+                ${notificationTokens.contentLeftIconColor}: ${textPrimary};
+                ${notificationTokens.contentColor}: ${textSecondary};
+                ${notificationTokens.background}: ${surfaceSolidSecondary};
                 ${notificationTokens.borderRadius}: 2rem;
                 ${notificationTokens.borderWidth}: 0.5rem;
-                ${notificationTokens.borderColor}: var(--surface-transparent-card);
+                ${notificationTokens.borderColor}: ${surfaceTransparentCard};
                 ${notificationTokens.padding}: 0.375rem;
-                ${notificationTokens.boxShadow}: var(--shadow-down-soft-m);
+                ${notificationTokens.boxShadow}: ${shadowDownSoftM};
 
                 ${notificationTokens.contentPaddingTop}: 0.125rem;
                 ${notificationTokens.contentPaddingRight}: 0.25rem;
@@ -42,37 +43,37 @@ 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-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}: 2rem;
                 ${notificationTokens.borderWidth}: 0.5rem;
-                ${notificationTokens.borderColor}: var(--outline-negative);
+                ${notificationTokens.borderColor}: ${outlineNegative};
                 ${notificationTokens.padding}: 0.375rem;
-                ${notificationTokens.boxShadow}: var(--shadow-down-soft-m);
+                ${notificationTokens.boxShadow}: ${shadowDownSoftM};
 
                 ${notificationTokens.contentPaddingTop}: 0.125rem;
                 ${notificationTokens.contentPaddingRight}: 0.25rem;
@@ -99,37 +100,37 @@ 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-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}: 2rem;
                 ${notificationTokens.borderWidth}: 0.5rem;
-                ${notificationTokens.borderColor}: var(--surface-accent-gradient);
+                ${notificationTokens.borderColor}: ${surfaceAccentGradient};
                 ${notificationTokens.padding}: 0.375rem;
-                ${notificationTokens.boxShadow}: var(--shadow-down-soft-m);
+                ${notificationTokens.boxShadow}: ${shadowDownSoftM};
 
                 ${notificationTokens.contentPaddingTop}: 0.125rem;
                 ${notificationTokens.contentPaddingRight}: 0.25rem;
@@ -156,32 +157,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;
 
@@ -210,37 +211,37 @@ 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-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}: 2rem;
                 ${notificationTokens.borderWidth}: 0.5rem;
-                ${notificationTokens.borderColor}: var(--outline-info);
+                ${notificationTokens.borderColor}: ${outlineInfo};
                 ${notificationTokens.padding}: 0.375rem;
-                ${notificationTokens.boxShadow}: var(--shadow-down-soft-m);
+                ${notificationTokens.boxShadow}: ${shadowDownSoftM};
 
                 ${notificationTokens.contentPaddingTop}: 0.125rem;
                 ${notificationTokens.contentPaddingRight}: 0.25rem;
@@ -267,22 +268,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;