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

package/dist/emotion/cjs/components/Loader/Loader.config.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "config", {
     }
 });
 const _emotion = require("@salutejs/plasma-new-hope/emotion");
+const _sdds_serv = require("@salutejs/sdds-themes/tokens/sdds_serv");
 const config = {
     defaults: {
         view: 'default',
@@ -17,67 +18,67 @@ const config = {
     variations: {
         view: {
             default: (0, _emotion.css)`
-                ${_emotion.loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary);
-                ${_emotion.loaderTokens.progressBarCircularStroke}: var(--surface-solid-default);
-                ${_emotion.loaderTokens.progressBarCircularContentColor}: var(--text-primary);
+                ${_emotion.loaderTokens.progressBarCircularBackgroundStroke}: ${_sdds_serv.surfaceTransparentTertiary};
+                ${_emotion.loaderTokens.progressBarCircularStroke}: ${_sdds_serv.surfaceSolidDefault};
+                ${_emotion.loaderTokens.progressBarCircularContentColor}: ${_sdds_serv.textPrimary};
 
-                ${_emotion.loaderTokens.spinnerColor}: var(--text-primary);
+                ${_emotion.loaderTokens.spinnerColor}: ${_sdds_serv.textPrimary};
 
-                ${_emotion.loaderTokens.overlayColor}: var(--overlay-soft);
+                ${_emotion.loaderTokens.overlayColor}: ${_sdds_serv.overlaySoft};
             `,
             secondary: (0, _emotion.css)`
-                ${_emotion.loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary);
-                ${_emotion.loaderTokens.progressBarCircularStroke}: var(--surface-transparent-secondary);
-                ${_emotion.loaderTokens.progressBarCircularContentColor}: var(--text-primary);
+                ${_emotion.loaderTokens.progressBarCircularBackgroundStroke}: ${_sdds_serv.surfaceTransparentTertiary};
+                ${_emotion.loaderTokens.progressBarCircularStroke}: ${_sdds_serv.surfaceTransparentSecondary};
+                ${_emotion.loaderTokens.progressBarCircularContentColor}: ${_sdds_serv.textPrimary};
 
-                ${_emotion.loaderTokens.spinnerColor}: var(--text-secondary);
+                ${_emotion.loaderTokens.spinnerColor}: ${_sdds_serv.textSecondary};
 
-                ${_emotion.loaderTokens.overlayColor}: var(--overlay-soft);
+                ${_emotion.loaderTokens.overlayColor}: ${_sdds_serv.overlaySoft};
             `,
             accent: (0, _emotion.css)`
-                ${_emotion.loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary);
-                ${_emotion.loaderTokens.progressBarCircularStroke}: var(--surface-accent);
-                ${_emotion.loaderTokens.progressBarCircularContentColor}: var(--text-primary);
+                ${_emotion.loaderTokens.progressBarCircularBackgroundStroke}: ${_sdds_serv.surfaceTransparentTertiary};
+                ${_emotion.loaderTokens.progressBarCircularStroke}: ${_sdds_serv.surfaceAccent};
+                ${_emotion.loaderTokens.progressBarCircularContentColor}: ${_sdds_serv.textPrimary};
 
-                ${_emotion.loaderTokens.spinnerColor}: var(--text-accent);
+                ${_emotion.loaderTokens.spinnerColor}: ${_sdds_serv.textAccent};
 
-                ${_emotion.loaderTokens.overlayColor}: var(--overlay-soft);
+                ${_emotion.loaderTokens.overlayColor}: ${_sdds_serv.overlaySoft};
             `,
             positive: (0, _emotion.css)`
-                ${_emotion.loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary);
-                ${_emotion.loaderTokens.progressBarCircularStroke}: var(--surface-positive);
-                ${_emotion.loaderTokens.progressBarCircularContentColor}: var(--text-primary);
+                ${_emotion.loaderTokens.progressBarCircularBackgroundStroke}: ${_sdds_serv.surfaceTransparentTertiary};
+                ${_emotion.loaderTokens.progressBarCircularStroke}: ${_sdds_serv.surfacePositive};
+                ${_emotion.loaderTokens.progressBarCircularContentColor}: ${_sdds_serv.textPrimary};
 
-                ${_emotion.loaderTokens.spinnerColor}: var(--text-positive);
+                ${_emotion.loaderTokens.spinnerColor}: ${_sdds_serv.textPositive};
 
-                ${_emotion.loaderTokens.overlayColor}: var(--overlay-soft);
+                ${_emotion.loaderTokens.overlayColor}: ${_sdds_serv.overlaySoft};
             `,
             warning: (0, _emotion.css)`
-                ${_emotion.loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary);
-                ${_emotion.loaderTokens.progressBarCircularStroke}: var(--surface-warning);
-                ${_emotion.loaderTokens.progressBarCircularContentColor}: var(--text-primary);
+                ${_emotion.loaderTokens.progressBarCircularBackgroundStroke}: ${_sdds_serv.surfaceTransparentTertiary};
+                ${_emotion.loaderTokens.progressBarCircularStroke}: ${_sdds_serv.surfaceWarning};
+                ${_emotion.loaderTokens.progressBarCircularContentColor}: ${_sdds_serv.textPrimary};
 
-                ${_emotion.loaderTokens.spinnerColor}: var(--text-warning);
+                ${_emotion.loaderTokens.spinnerColor}: ${_sdds_serv.textWarning};
 
-                ${_emotion.loaderTokens.overlayColor}: var(--overlay-soft);
+                ${_emotion.loaderTokens.overlayColor}: ${_sdds_serv.overlaySoft};
             `,
             negative: (0, _emotion.css)`
-                ${_emotion.loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary);
-                ${_emotion.loaderTokens.progressBarCircularStroke}: var(--surface-negative);
-                ${_emotion.loaderTokens.progressBarCircularContentColor}: var(--text-primary);
+                ${_emotion.loaderTokens.progressBarCircularBackgroundStroke}: ${_sdds_serv.surfaceTransparentTertiary};
+                ${_emotion.loaderTokens.progressBarCircularStroke}: ${_sdds_serv.surfaceNegative};
+                ${_emotion.loaderTokens.progressBarCircularContentColor}: ${_sdds_serv.textPrimary};
 
-                ${_emotion.loaderTokens.spinnerColor}: var(--text-negative);
+                ${_emotion.loaderTokens.spinnerColor}: ${_sdds_serv.textNegative};
 
-                ${_emotion.loaderTokens.overlayColor}: var(--overlay-soft);
+                ${_emotion.loaderTokens.overlayColor}: ${_sdds_serv.overlaySoft};
             `,
             info: (0, _emotion.css)`
-                ${_emotion.loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary);
-                ${_emotion.loaderTokens.progressBarCircularStroke}: var(--surface-info);
-                ${_emotion.loaderTokens.progressBarCircularContentColor}: var(--text-primary);
+                ${_emotion.loaderTokens.progressBarCircularBackgroundStroke}: ${_sdds_serv.surfaceTransparentTertiary};
+                ${_emotion.loaderTokens.progressBarCircularStroke}: ${_sdds_serv.surfaceInfo};
+                ${_emotion.loaderTokens.progressBarCircularContentColor}: ${_sdds_serv.textPrimary};
 
-                ${_emotion.loaderTokens.spinnerColor}: var(--text-info);
+                ${_emotion.loaderTokens.spinnerColor}: ${_sdds_serv.textInfo};
 
-                ${_emotion.loaderTokens.overlayColor}: var(--overlay-soft);
+                ${_emotion.loaderTokens.overlayColor}: ${_sdds_serv.overlaySoft};
             `
         },
         size: {
@@ -90,12 +91,12 @@ const config = {
                 ${_emotion.loaderTokens.progressBarCircularWidth}: 8rem;
                 ${_emotion.loaderTokens.progressBarCircularStrokeWidth}: 0.25rem;
                 ${_emotion.loaderTokens.progressBarCircularStrokeSize}: 4;
-                ${_emotion.loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-h2-font-family);
-                ${_emotion.loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-h2-font-size);
-                ${_emotion.loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-h2-font-style);
-                ${_emotion.loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-h2-bold-font-weight);
-                ${_emotion.loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-h2-letter-spacing);
-                ${_emotion.loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-h2-line-height);
+                ${_emotion.loaderTokens.progressBarCircularContentFontFamily}: ${_sdds_serv.h2.fontFamily};
+                ${_emotion.loaderTokens.progressBarCircularContentFontSize}: ${_sdds_serv.h2.fontSize};
+                ${_emotion.loaderTokens.progressBarCircularContentFontStyle}: ${_sdds_serv.h2.fontStyle};
+                ${_emotion.loaderTokens.progressBarCircularContentFontWeight}: ${_sdds_serv.h2Bold.fontWeight};
+                ${_emotion.loaderTokens.progressBarCircularContentLetterSpacing}: ${_sdds_serv.h2.letterSpacing};
+                ${_emotion.loaderTokens.progressBarCircularContentLineHeight}: ${_sdds_serv.h2.lineHeight};
 
                 ${_emotion.loaderTokens.spinnerSize}: 8rem;
             `,
@@ -108,12 +109,12 @@ const config = {
                 ${_emotion.loaderTokens.progressBarCircularWidth}: 5.5rem;
                 ${_emotion.loaderTokens.progressBarCircularStrokeWidth}: 0.25rem;
                 ${_emotion.loaderTokens.progressBarCircularStrokeSize}: 4;
-                ${_emotion.loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-h5-font-family);
-                ${_emotion.loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-h5-font-size);
-                ${_emotion.loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-h5-font-style);
-                ${_emotion.loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-h5-bold-font-weight);
-                ${_emotion.loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-h5-letter-spacing);
-                ${_emotion.loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-h5-line-height);
+                ${_emotion.loaderTokens.progressBarCircularContentFontFamily}: ${_sdds_serv.h5.fontFamily};
+                ${_emotion.loaderTokens.progressBarCircularContentFontSize}: ${_sdds_serv.h5.fontSize};
+                ${_emotion.loaderTokens.progressBarCircularContentFontStyle}: ${_sdds_serv.h5.fontStyle};
+                ${_emotion.loaderTokens.progressBarCircularContentFontWeight}: ${_sdds_serv.h5Bold.fontWeight};
+                ${_emotion.loaderTokens.progressBarCircularContentLetterSpacing}: ${_sdds_serv.h5.letterSpacing};
+                ${_emotion.loaderTokens.progressBarCircularContentLineHeight}: ${_sdds_serv.h5.lineHeight};
 
                 ${_emotion.loaderTokens.spinnerSize}: 5.5rem;
             `,
@@ -126,12 +127,12 @@ const config = {
                 ${_emotion.loaderTokens.progressBarCircularWidth}: 3.5rem;
                 ${_emotion.loaderTokens.progressBarCircularStrokeWidth}: 0.125rem;
                 ${_emotion.loaderTokens.progressBarCircularStrokeSize}: 2;
-                ${_emotion.loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-l-font-family);
-                ${_emotion.loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-l-font-size);
-                ${_emotion.loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-l-font-style);
-                ${_emotion.loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-l-body-font-weight);
-                ${_emotion.loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${_emotion.loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${_emotion.loaderTokens.progressBarCircularContentFontFamily}: ${_sdds_serv.bodyL.fontFamily};
+                ${_emotion.loaderTokens.progressBarCircularContentFontSize}: ${_sdds_serv.bodyL.fontSize};
+                ${_emotion.loaderTokens.progressBarCircularContentFontStyle}: ${_sdds_serv.bodyL.fontStyle};
+                ${_emotion.loaderTokens.progressBarCircularContentFontWeight}: ${_sdds_serv.bodyL.fontWeight};
+                ${_emotion.loaderTokens.progressBarCircularContentLetterSpacing}: ${_sdds_serv.bodyL.letterSpacing};
+                ${_emotion.loaderTokens.progressBarCircularContentLineHeight}: ${_sdds_serv.bodyL.lineHeight};
 
                 ${_emotion.loaderTokens.spinnerSize}: 3.5rem;
             `,
@@ -144,12 +145,12 @@ const config = {
                 ${_emotion.loaderTokens.progressBarCircularWidth}: 3rem;
                 ${_emotion.loaderTokens.progressBarCircularStrokeWidth}: 0.125rem;
                 ${_emotion.loaderTokens.progressBarCircularStrokeSize}: 2;
-                ${_emotion.loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_emotion.loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-m-font-size);
-                ${_emotion.loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_emotion.loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-m-body-font-weight);
-                ${_emotion.loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_emotion.loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_emotion.loaderTokens.progressBarCircularContentFontFamily}: ${_sdds_serv.bodyM.fontFamily};
+                ${_emotion.loaderTokens.progressBarCircularContentFontSize}: ${_sdds_serv.bodyM.fontSize};
+                ${_emotion.loaderTokens.progressBarCircularContentFontStyle}: ${_sdds_serv.bodyM.fontStyle};
+                ${_emotion.loaderTokens.progressBarCircularContentFontWeight}: ${_sdds_serv.bodyM.fontWeight};
+                ${_emotion.loaderTokens.progressBarCircularContentLetterSpacing}: ${_sdds_serv.bodyM.letterSpacing};
+                ${_emotion.loaderTokens.progressBarCircularContentLineHeight}: ${_sdds_serv.bodyM.lineHeight};
 
                 ${_emotion.loaderTokens.spinnerSize}: 3rem;
             `,
@@ -162,12 +163,12 @@ const config = {
                 ${_emotion.loaderTokens.progressBarCircularWidth}: 2.25rem;
                 ${_emotion.loaderTokens.progressBarCircularStrokeWidth}: 0.125rem;
                 ${_emotion.loaderTokens.progressBarCircularStrokeSize}: 2;
-                ${_emotion.loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_emotion.loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_emotion.loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_emotion.loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-s-body-font-weight);
-                ${_emotion.loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_emotion.loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_emotion.loaderTokens.progressBarCircularContentFontFamily}: ${_sdds_serv.bodyS.fontFamily};
+                ${_emotion.loaderTokens.progressBarCircularContentFontSize}: ${_sdds_serv.bodyS.fontSize};
+                ${_emotion.loaderTokens.progressBarCircularContentFontStyle}: ${_sdds_serv.bodyS.fontStyle};
+                ${_emotion.loaderTokens.progressBarCircularContentFontWeight}: ${_sdds_serv.bodyS.fontWeight};
+                ${_emotion.loaderTokens.progressBarCircularContentLetterSpacing}: ${_sdds_serv.bodyS.letterSpacing};
+                ${_emotion.loaderTokens.progressBarCircularContentLineHeight}: ${_sdds_serv.bodyS.lineHeight};
 
                 ${_emotion.loaderTokens.spinnerSize}: 2.25rem;
             `,
@@ -180,12 +181,12 @@ const config = {
                 ${_emotion.loaderTokens.progressBarCircularWidth}: 1.5rem;
                 ${_emotion.loaderTokens.progressBarCircularStrokeWidth}: 0.125rem;
                 ${_emotion.loaderTokens.progressBarCircularStrokeSize}: 2;
-                ${_emotion.loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_emotion.loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_emotion.loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_emotion.loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-xs-body-font-weight);
-                ${_emotion.loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_emotion.loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_emotion.loaderTokens.progressBarCircularContentFontFamily}: ${_sdds_serv.bodyXS.fontFamily};
+                ${_emotion.loaderTokens.progressBarCircularContentFontSize}: ${_sdds_serv.bodyXS.fontSize};
+                ${_emotion.loaderTokens.progressBarCircularContentFontStyle}: ${_sdds_serv.bodyXS.fontStyle};
+                ${_emotion.loaderTokens.progressBarCircularContentFontWeight}: ${_sdds_serv.bodyXS.fontWeight};
+                ${_emotion.loaderTokens.progressBarCircularContentLetterSpacing}: ${_sdds_serv.bodyXS.letterSpacing};
+                ${_emotion.loaderTokens.progressBarCircularContentLineHeight}: ${_sdds_serv.bodyXS.lineHeight};
 
                 ${_emotion.loaderTokens.spinnerSize}: 1.5rem;
             `,
@@ -198,12 +199,12 @@ const config = {
                 ${_emotion.loaderTokens.progressBarCircularWidth}: 1rem;
                 ${_emotion.loaderTokens.progressBarCircularStrokeWidth}: 0.125rem;
                 ${_emotion.loaderTokens.progressBarCircularStrokeSize}: 2;
-                ${_emotion.loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-xxs-font-family);
-                ${_emotion.loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-xxs-font-size);
-                ${_emotion.loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-xxs-font-style);
-                ${_emotion.loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-xxs-body-font-weight);
-                ${_emotion.loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
-                ${_emotion.loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-xxs-line-height);
+                ${_emotion.loaderTokens.progressBarCircularContentFontFamily}: ${_sdds_serv.bodyXXS.fontFamily};
+                ${_emotion.loaderTokens.progressBarCircularContentFontSize}: ${_sdds_serv.bodyXXS.fontSize};
+                ${_emotion.loaderTokens.progressBarCircularContentFontStyle}: ${_sdds_serv.bodyXXS.fontStyle};
+                ${_emotion.loaderTokens.progressBarCircularContentFontWeight}: ${_sdds_serv.bodyXXS.fontWeight};
+                ${_emotion.loaderTokens.progressBarCircularContentLetterSpacing}: ${_sdds_serv.bodyXXS.letterSpacing};
+                ${_emotion.loaderTokens.progressBarCircularContentLineHeight}: ${_sdds_serv.bodyXXS.lineHeight};
 
                 ${_emotion.loaderTokens.spinnerSize}: 1rem;
             `

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

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "config", {
     }
 });
 const _emotion = require("@salutejs/plasma-new-hope/emotion");
+const _sdds_serv = require("@salutejs/sdds-themes/tokens/sdds_serv");
 const config = {
     defaults: {
         view: 'default'
@@ -17,16 +18,16 @@ const config = {
         view: {
             default: (0, _emotion.css)`
                 ${_emotion.modalTokens.modalOverlayWithBlurColor}: rgba(35, 35, 35, 0.2);
-                ${_emotion.modalTokens.modalOverlayColor}: var(--overlay-soft);
-                ${_emotion.modalTokens.modalBodyBackground}: var(--surface-solid-card);
+                ${_emotion.modalTokens.modalOverlayColor}: ${_sdds_serv.overlaySoft};
+                ${_emotion.modalTokens.modalBodyBackground}: ${_sdds_serv.surfaceSolidCard};
                 ${_emotion.modalTokens.modalBodyBorderRadius}: 1.25rem;
                 ${_emotion.modalTokens.modalBodyPadding}: 2rem;
                 ${_emotion.modalTokens.modalContentPadding}: 0.625rem;
                 ${_emotion.modalTokens.modalCloseButtonRadius}: 0.375rem;
-                ${_emotion.modalTokens.modalCloseButtonColor}: var(--text-secondary);
-                ${_emotion.modalTokens.modalCloseButtonHoverColor}: var(--text-secondary-hover);
-                ${_emotion.modalTokens.modalCloseButtonActiveColor}: var(--text-secondary-active);
-                ${_emotion.modalTokens.modalOutlineFocusColor}: var(--surface-accent);
+                ${_emotion.modalTokens.modalCloseButtonColor}: ${_sdds_serv.textSecondary};
+                ${_emotion.modalTokens.modalCloseButtonHoverColor}: ${_sdds_serv.textSecondaryHover};
+                ${_emotion.modalTokens.modalCloseButtonActiveColor}: ${_sdds_serv.textSecondaryActive};
+                ${_emotion.modalTokens.modalOutlineFocusColor}: ${_sdds_serv.surfaceAccent};
             `
         }
     }

package/dist/emotion/cjs/components/Note/Note.config.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "config", {
     }
 });
 const _emotion = require("@salutejs/plasma-new-hope/emotion");
+const _sdds_serv = require("@salutejs/sdds-themes/tokens/sdds_serv");
 const config = {
     defaults: {
         view: 'default',
@@ -18,29 +19,29 @@ const config = {
     variations: {
         view: {
             default: (0, _emotion.css)`
-                ${_emotion.noteTokens.background}: var(--surface-transparent-secondary);
-                ${_emotion.noteTokens.color}: var(--text-primary);
-                ${_emotion.noteTokens.contentBeforeColor}: var(--text-primary);
+                ${_emotion.noteTokens.background}: ${_sdds_serv.surfaceTransparentSecondary};
+                ${_emotion.noteTokens.color}: ${_sdds_serv.textPrimary};
+                ${_emotion.noteTokens.contentBeforeColor}: ${_sdds_serv.textPrimary};
             `,
             positive: (0, _emotion.css)`
-                ${_emotion.noteTokens.background}: var(--surface-transparent-positive);
-                ${_emotion.noteTokens.color}: var(--text-primary);
-                ${_emotion.noteTokens.contentBeforeColor}: var(--text-positive);
+                ${_emotion.noteTokens.background}: ${_sdds_serv.surfaceTransparentPositive};
+                ${_emotion.noteTokens.color}: ${_sdds_serv.textPrimary};
+                ${_emotion.noteTokens.contentBeforeColor}: ${_sdds_serv.textPositive};
             `,
             warning: (0, _emotion.css)`
-                ${_emotion.noteTokens.background}: var(--surface-transparent-warning);
-                ${_emotion.noteTokens.color}: var(--text-primary);
-                ${_emotion.noteTokens.contentBeforeColor}: var(--text-warning);
+                ${_emotion.noteTokens.background}: ${_sdds_serv.surfaceTransparentWarning};
+                ${_emotion.noteTokens.color}: ${_sdds_serv.textPrimary};
+                ${_emotion.noteTokens.contentBeforeColor}: ${_sdds_serv.textWarning};
             `,
             negative: (0, _emotion.css)`
-                ${_emotion.noteTokens.background}: var(--surface-transparent-negative);
-                ${_emotion.noteTokens.color}: var(--text-primary);
-                ${_emotion.noteTokens.contentBeforeColor}: var(--text-negative);
+                ${_emotion.noteTokens.background}: ${_sdds_serv.surfaceTransparentNegative};
+                ${_emotion.noteTokens.color}: ${_sdds_serv.textPrimary};
+                ${_emotion.noteTokens.contentBeforeColor}: ${_sdds_serv.textNegative};
             `,
             info: (0, _emotion.css)`
-                ${_emotion.noteTokens.background}: var(--surface-transparent-info);
-                ${_emotion.noteTokens.color}: var(--text-primary);
-                ${_emotion.noteTokens.contentBeforeColor}: var(--text-info);
+                ${_emotion.noteTokens.background}: ${_sdds_serv.surfaceTransparentInfo};
+                ${_emotion.noteTokens.color}: ${_sdds_serv.textPrimary};
+                ${_emotion.noteTokens.contentBeforeColor}: ${_sdds_serv.textInfo};
             `
         },
         size: {
@@ -56,8 +57,8 @@ const config = {
 
                 ${_emotion.noteTokens.closeIconTop}: 1rem;
                 ${_emotion.noteTokens.closeIconRight}: 1rem;
-                ${_emotion.noteTokens.closeIconColor}: var(--text-secondary);
-                ${_emotion.noteTokens.closeIconColorOnHover}: var(--text-secondary-hover);
+                ${_emotion.noteTokens.closeIconColor}: ${_sdds_serv.textSecondary};
+                ${_emotion.noteTokens.closeIconColorOnHover}: ${_sdds_serv.textSecondaryHover};
                 ${_emotion.noteTokens.closeIconSize}: 1.5rem;
                 ${_emotion.noteTokens.closeIconButtonSize}: 1.5rem;
 
@@ -65,20 +66,20 @@ const config = {
                 ${_emotion.noteTokens.fixedContentBeforeHeight}: 2rem;
                 ${_emotion.noteTokens.fixedContentBeforePadding}: 0.25rem 0rem;
 
-                ${_emotion.noteTokens.titleFontFamily}: var(--plasma-typo-text-l-font-family);
-                ${_emotion.noteTokens.titleFontSize}: var(--plasma-typo-text-l-font-size);
-                ${_emotion.noteTokens.titleFontStyle}: var(--plasma-typo-text-l-font-style);
-                ${_emotion.noteTokens.titleFontWeight}: var(--plasma-typo-text-l-bold-font-weight);
-                ${_emotion.noteTokens.titleLetterSpacing}: var(--plasma-typo-text-l-letter-spacing);
-                ${_emotion.noteTokens.titleLineHeight}: var(--plasma-typo-text-l-line-height);
+                ${_emotion.noteTokens.titleFontFamily}: ${_sdds_serv.textL.fontFamily};
+                ${_emotion.noteTokens.titleFontSize}: ${_sdds_serv.textL.fontSize};
+                ${_emotion.noteTokens.titleFontStyle}: ${_sdds_serv.textL.fontStyle};
+                ${_emotion.noteTokens.titleFontWeight}: ${_sdds_serv.textLBold.fontWeight};
+                ${_emotion.noteTokens.titleLetterSpacing}: ${_sdds_serv.textL.letterSpacing};
+                ${_emotion.noteTokens.titleLineHeight}: ${_sdds_serv.textL.lineHeight};
                 ${_emotion.noteTokens.titlePaddingRight}: 1.875rem;
 
-                ${_emotion.noteTokens.textFontFamily}: var(--plasma-typo-text-l-font-family);
-                ${_emotion.noteTokens.textFontSize}: var(--plasma-typo-text-l-font-size);
-                ${_emotion.noteTokens.textFontStyle}: var(--plasma-typo-text-l-font-style);
-                ${_emotion.noteTokens.textFontWeight}: var(--plasma-typo-text-l-font-weight);
-                ${_emotion.noteTokens.textLetterSpacing}: var(--plasma-typo-text-l-letter-spacing);
-                ${_emotion.noteTokens.textLineHeight}: var(--plasma-typo-text-l-line-height);
+                ${_emotion.noteTokens.textFontFamily}: ${_sdds_serv.textL.fontFamily};
+                ${_emotion.noteTokens.textFontSize}: ${_sdds_serv.textL.fontSize};
+                ${_emotion.noteTokens.textFontStyle}: ${_sdds_serv.textL.fontStyle};
+                ${_emotion.noteTokens.textFontWeight}: ${_sdds_serv.textL.fontWeight};
+                ${_emotion.noteTokens.textLetterSpacing}: ${_sdds_serv.textL.letterSpacing};
+                ${_emotion.noteTokens.textLineHeight}: ${_sdds_serv.textL.lineHeight};
             `,
             m: (0, _emotion.css)`
                 ${_emotion.noteTokens.padding}: 1.25rem 1.5rem;
@@ -92,8 +93,8 @@ const config = {
 
                 ${_emotion.noteTokens.closeIconTop}: 0.75rem;
                 ${_emotion.noteTokens.closeIconRight}: 0.75rem;
-                ${_emotion.noteTokens.closeIconColor}: var(--text-secondary);
-                ${_emotion.noteTokens.closeIconColorOnHover}: var(--text-secondary-hover);
+                ${_emotion.noteTokens.closeIconColor}: ${_sdds_serv.textSecondary};
+                ${_emotion.noteTokens.closeIconColorOnHover}: ${_sdds_serv.textSecondaryHover};
                 ${_emotion.noteTokens.closeIconSize}: 1.5rem;
                 ${_emotion.noteTokens.closeIconButtonSize}: 1.5rem;
 
@@ -101,20 +102,20 @@ const config = {
                 ${_emotion.noteTokens.fixedContentBeforeHeight}: 1.625rem;
                 ${_emotion.noteTokens.fixedContentBeforePadding}: 0rem;
 
-                ${_emotion.noteTokens.titleFontFamily}: var(--plasma-typo-text-m-font-family);
-                ${_emotion.noteTokens.titleFontSize}: var(--plasma-typo-text-m-font-size);
-                ${_emotion.noteTokens.titleFontStyle}: var(--plasma-typo-text-m-font-style);
-                ${_emotion.noteTokens.titleFontWeight}: var(--plasma-typo-text-m-bold-font-weight);
-                ${_emotion.noteTokens.titleLetterSpacing}: var(--plasma-typo-text-m-letter-spacing);
-                ${_emotion.noteTokens.titleLineHeight}: var(--plasma-typo-text-m-line-height);
+                ${_emotion.noteTokens.titleFontFamily}: ${_sdds_serv.textM.fontFamily};
+                ${_emotion.noteTokens.titleFontSize}: ${_sdds_serv.textM.fontSize};
+                ${_emotion.noteTokens.titleFontStyle}: ${_sdds_serv.textM.fontStyle};
+                ${_emotion.noteTokens.titleFontWeight}: ${_sdds_serv.textMBold.fontWeight};
+                ${_emotion.noteTokens.titleLetterSpacing}: ${_sdds_serv.textM.letterSpacing};
+                ${_emotion.noteTokens.titleLineHeight}: ${_sdds_serv.textM.lineHeight};
                 ${_emotion.noteTokens.titlePaddingRight}: 1.75rem;
 
-                ${_emotion.noteTokens.textFontFamily}: var(--plasma-typo-text-m-font-family);
-                ${_emotion.noteTokens.textFontSize}: var(--plasma-typo-text-m-font-size);
-                ${_emotion.noteTokens.textFontStyle}: var(--plasma-typo-text-m-font-style);
-                ${_emotion.noteTokens.textFontWeight}: var(--plasma-typo-text-m-font-weight);
-                ${_emotion.noteTokens.textLetterSpacing}: var(--plasma-typo-text-m-letter-spacing);
-                ${_emotion.noteTokens.textLineHeight}: var(--plasma-typo-text-m-line-height);
+                ${_emotion.noteTokens.textFontFamily}: ${_sdds_serv.textM.fontFamily};
+                ${_emotion.noteTokens.textFontSize}: ${_sdds_serv.textM.fontSize};
+                ${_emotion.noteTokens.textFontStyle}: ${_sdds_serv.textM.fontStyle};
+                ${_emotion.noteTokens.textFontWeight}: ${_sdds_serv.textM.fontWeight};
+                ${_emotion.noteTokens.textLetterSpacing}: ${_sdds_serv.textM.letterSpacing};
+                ${_emotion.noteTokens.textLineHeight}: ${_sdds_serv.textM.lineHeight};
             `,
             s: (0, _emotion.css)`
                 ${_emotion.noteTokens.padding}: 1rem 1.25rem;
@@ -128,8 +129,8 @@ const config = {
 
                 ${_emotion.noteTokens.closeIconTop}: 0.625rem;
                 ${_emotion.noteTokens.closeIconRight}: 0.625rem;
-                ${_emotion.noteTokens.closeIconColor}: var(--text-secondary);
-                ${_emotion.noteTokens.closeIconColorOnHover}: var(--text-secondary-hover);
+                ${_emotion.noteTokens.closeIconColor}: ${_sdds_serv.textSecondary};
+                ${_emotion.noteTokens.closeIconColorOnHover}: ${_sdds_serv.textSecondaryHover};
                 ${_emotion.noteTokens.closeIconSize}: 1.5rem;
                 ${_emotion.noteTokens.closeIconButtonSize}: 1.5rem;
 
@@ -137,20 +138,20 @@ const config = {
                 ${_emotion.noteTokens.fixedContentBeforeHeight}: 1.125rem;
                 ${_emotion.noteTokens.fixedContentBeforePadding}: 0.063rem 0rem;
 
-                ${_emotion.noteTokens.titleFontFamily}: var(--plasma-typo-text-s-font-family);
-                ${_emotion.noteTokens.titleFontSize}: var(--plasma-typo-text-s-font-size);
-                ${_emotion.noteTokens.titleFontStyle}: var(--plasma-typo-text-s-font-style);
-                ${_emotion.noteTokens.titleFontWeight}: var(--plasma-typo-text-s-bold-font-weight);
-                ${_emotion.noteTokens.titleLetterSpacing}: var(--plasma-typo-text-s-letter-spacing);
-                ${_emotion.noteTokens.titleLineHeight}: var(--plasma-typo-text-s-line-height);
+                ${_emotion.noteTokens.titleFontFamily}: ${_sdds_serv.textS.fontFamily};
+                ${_emotion.noteTokens.titleFontSize}: ${_sdds_serv.textS.fontSize};
+                ${_emotion.noteTokens.titleFontStyle}: ${_sdds_serv.textS.fontStyle};
+                ${_emotion.noteTokens.titleFontWeight}: ${_sdds_serv.textSBold.fontWeight};
+                ${_emotion.noteTokens.titleLetterSpacing}: ${_sdds_serv.textS.letterSpacing};
+                ${_emotion.noteTokens.titleLineHeight}: ${_sdds_serv.textS.lineHeight};
                 ${_emotion.noteTokens.titlePaddingRight}: 1.625rem;
 
-                ${_emotion.noteTokens.textFontFamily}: var(--plasma-typo-text-s-font-family);
-                ${_emotion.noteTokens.textFontSize}: var(--plasma-typo-text-s-font-size);
-                ${_emotion.noteTokens.textFontStyle}: var(--plasma-typo-text-s-font-style);
-                ${_emotion.noteTokens.textFontWeight}: var(--plasma-typo-text-s-font-weight);
-                ${_emotion.noteTokens.textLetterSpacing}: var(--plasma-typo-text-s-letter-spacing);
-                ${_emotion.noteTokens.textLineHeight}: var(--plasma-typo-text-s-line-height);
+                ${_emotion.noteTokens.textFontFamily}: ${_sdds_serv.textS.fontFamily};
+                ${_emotion.noteTokens.textFontSize}: ${_sdds_serv.textS.fontSize};
+                ${_emotion.noteTokens.textFontStyle}: ${_sdds_serv.textS.fontStyle};
+                ${_emotion.noteTokens.textFontWeight}: ${_sdds_serv.textS.fontWeight};
+                ${_emotion.noteTokens.textLetterSpacing}: ${_sdds_serv.textS.letterSpacing};
+                ${_emotion.noteTokens.textLineHeight}: ${_sdds_serv.textS.lineHeight};
             `,
             xs: (0, _emotion.css)`
                 ${_emotion.noteTokens.padding}: 0.75rem 1rem;
@@ -164,8 +165,8 @@ const config = {
 
                 ${_emotion.noteTokens.closeIconTop}: 0.625rem;
                 ${_emotion.noteTokens.closeIconRight}: 0.625rem;
-                ${_emotion.noteTokens.closeIconColor}: var(--text-secondary);
-                ${_emotion.noteTokens.closeIconColorOnHover}: var(--text-secondary-hover);
+                ${_emotion.noteTokens.closeIconColor}: ${_sdds_serv.textSecondary};
+                ${_emotion.noteTokens.closeIconColorOnHover}: ${_sdds_serv.textSecondaryHover};
                 ${_emotion.noteTokens.closeIconSize}: 1rem;
                 ${_emotion.noteTokens.closeIconButtonSize}: 1rem;
 
@@ -173,20 +174,20 @@ const config = {
                 ${_emotion.noteTokens.fixedContentBeforeHeight}: 1rem;
                 ${_emotion.noteTokens.fixedContentBeforePadding}: 0rem;
 
-                ${_emotion.noteTokens.titleFontFamily}: var(--plasma-typo-text-xs-font-family);
-                ${_emotion.noteTokens.titleFontSize}: var(--plasma-typo-text-xs-font-size);
-                ${_emotion.noteTokens.titleFontStyle}: var(--plasma-typo-text-xs-font-style);
-                ${_emotion.noteTokens.titleFontWeight}: var(--plasma-typo-text-xs-bold-font-weight);
-                ${_emotion.noteTokens.titleLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing);
-                ${_emotion.noteTokens.titleLineHeight}: var(--plasma-typo-text-xs-line-height);
+                ${_emotion.noteTokens.titleFontFamily}: ${_sdds_serv.textXS.fontFamily};
+                ${_emotion.noteTokens.titleFontSize}: ${_sdds_serv.textXS.fontSize};
+                ${_emotion.noteTokens.titleFontStyle}: ${_sdds_serv.textXS.fontStyle};
+                ${_emotion.noteTokens.titleFontWeight}: ${_sdds_serv.textXSBold.fontWeight};
+                ${_emotion.noteTokens.titleLetterSpacing}: ${_sdds_serv.textXS.letterSpacing};
+                ${_emotion.noteTokens.titleLineHeight}: ${_sdds_serv.textXS.lineHeight};
                 ${_emotion.noteTokens.titlePaddingRight}: 1.5rem;
 
-                ${_emotion.noteTokens.textFontFamily}: var(--plasma-typo-text-xs-font-family);
-                ${_emotion.noteTokens.textFontSize}: var(--plasma-typo-text-xs-font-size);
-                ${_emotion.noteTokens.textFontStyle}: var(--plasma-typo-text-xs-font-style);
-                ${_emotion.noteTokens.textFontWeight}: var(--plasma-typo-text-xs-font-weight);
-                ${_emotion.noteTokens.textLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing);
-                ${_emotion.noteTokens.textLineHeight}: var(--plasma-typo-text-xs-line-height);
+                ${_emotion.noteTokens.textFontFamily}: ${_sdds_serv.textXS.fontFamily};
+                ${_emotion.noteTokens.textFontSize}: ${_sdds_serv.textXS.fontSize};
+                ${_emotion.noteTokens.textFontStyle}: ${_sdds_serv.textXS.fontStyle};
+                ${_emotion.noteTokens.textFontWeight}: ${_sdds_serv.textXS.fontWeight};
+                ${_emotion.noteTokens.textLetterSpacing}: ${_sdds_serv.textXS.letterSpacing};
+                ${_emotion.noteTokens.textLineHeight}: ${_sdds_serv.textXS.lineHeight};
             `
         },
         orientation: {