@salutejs/sdds-cs 0.362.0-next-sbcom.0 → 0.362.0

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "config", {
         return config;
     }
 });
+const _sdds_cs = require("@salutejs/sdds-themes/tokens/sdds_cs");
 const _emotion = require("@salutejs/plasma-new-hope/emotion");
 const config = {
     defaults: {
@@ -19,65 +20,65 @@ const config = {
     variations: {
         view: {
             default: (0, _emotion.css)`
-                ${_emotion.timePickerTokens.background}: var(--surface-solid-card);
-                ${_emotion.timePickerTokens.backgroundError}: var(--surface-solid-card);
-                ${_emotion.timePickerTokens.backgroundSuccess}: var(--surface-solid-card);
+                ${_emotion.timePickerTokens.background}: ${_sdds_cs.surfaceSolidCard};
+                ${_emotion.timePickerTokens.backgroundError}: ${_sdds_cs.surfaceSolidCard};
+                ${_emotion.timePickerTokens.backgroundSuccess}: ${_sdds_cs.surfaceSolidCard};
 
-                ${_emotion.timePickerTokens.labelColor}: var(--text-primary);
+                ${_emotion.timePickerTokens.labelColor}: ${_sdds_cs.textPrimary};
 
-                ${_emotion.timePickerTokens.textFieldColor}: var(--text-primary);
-                ${_emotion.timePickerTokens.textFieldPlaceholderColor}: var(--text-secondary);
-                ${_emotion.timePickerTokens.textFieldPlaceholderColorFocus}: var(--text-tertiary);
-                ${_emotion.timePickerTokens.textFieldCaretColor}: var(--text-accent);
+                ${_emotion.timePickerTokens.textFieldColor}: ${_sdds_cs.textPrimary};
+                ${_emotion.timePickerTokens.textFieldPlaceholderColor}: ${_sdds_cs.textSecondary};
+                ${_emotion.timePickerTokens.textFieldPlaceholderColorFocus}: ${_sdds_cs.textTertiary};
+                ${_emotion.timePickerTokens.textFieldCaretColor}: ${_sdds_cs.textAccent};
 
-                ${_emotion.timePickerTokens.indicatorColor}: var(--surface-negative);
+                ${_emotion.timePickerTokens.indicatorColor}: ${_sdds_cs.surfaceNegative};
 
-                ${_emotion.timePickerTokens.timePickerShadow}: var(--shadow-down-soft-s);
+                ${_emotion.timePickerTokens.timePickerShadow}: ${_sdds_cs.shadowDownSoftS};
 
-                ${_emotion.timePickerTokens.textFieldBackgroundColor}: var(--surface-solid-card);
-                ${_emotion.timePickerTokens.textFieldBackgroundColorHover}: var(--surface-solid-card);
-                ${_emotion.timePickerTokens.textFieldBackgroundColorFocus}: var(--surface-solid-card);
+                ${_emotion.timePickerTokens.textFieldBackgroundColor}: ${_sdds_cs.surfaceSolidCard};
+                ${_emotion.timePickerTokens.textFieldBackgroundColorHover}: ${_sdds_cs.surfaceSolidCard};
+                ${_emotion.timePickerTokens.textFieldBackgroundColorFocus}: ${_sdds_cs.surfaceSolidCard};
                 ${_emotion.timePickerTokens.textFieldBackgroundErrorColor}: var--surface-solid-card);
                 ${_emotion.timePickerTokens.textFieldBackgroundErrorColorFocus}: var--surface-solid-card);
-                ${_emotion.timePickerTokens.textFieldBackgroundSuccessColor}: var(--surface-solid-card);
-                ${_emotion.timePickerTokens.textFieldBackgroundSuccessColorFocus}: var(--surface-solid-card);
+                ${_emotion.timePickerTokens.textFieldBackgroundSuccessColor}: ${_sdds_cs.surfaceSolidCard};
+                ${_emotion.timePickerTokens.textFieldBackgroundSuccessColorFocus}: ${_sdds_cs.surfaceSolidCard};
 
-                ${_emotion.timePickerTokens.borderColor}: var(--outline-solid-primary);
-                ${_emotion.timePickerTokens.borderColorFocus}: var(--outline-accent);
-                ${_emotion.timePickerTokens.borderColorHover}: var(--outline-solid-primary-hover);
+                ${_emotion.timePickerTokens.borderColor}: ${_sdds_cs.outlineSolidPrimary};
+                ${_emotion.timePickerTokens.borderColorFocus}: ${_sdds_cs.outlineAccent};
+                ${_emotion.timePickerTokens.borderColorHover}: ${_sdds_cs.outlineSolidPrimaryHover};
 
-                ${_emotion.timePickerTokens.textFieldBorderColorError}: var(--text-negative);
-                ${_emotion.timePickerTokens.textFieldBorderColorErrorFocus}: var(--text-negative);
-                ${_emotion.timePickerTokens.textFieldBorderColorErrorHover}: var(--text-negative);
+                ${_emotion.timePickerTokens.textFieldBorderColorError}: ${_sdds_cs.textNegative};
+                ${_emotion.timePickerTokens.textFieldBorderColorErrorFocus}: ${_sdds_cs.textNegative};
+                ${_emotion.timePickerTokens.textFieldBorderColorErrorHover}: ${_sdds_cs.textNegative};
 
-                ${_emotion.timePickerTokens.textFieldBorderColorSuccess}: var(--text-negative);
-                ${_emotion.timePickerTokens.textFieldBorderColorSuccessFocus}: var(--text-negative);
-                ${_emotion.timePickerTokens.textFieldBorderColorSuccessHover}: var(--text-negative);
+                ${_emotion.timePickerTokens.textFieldBorderColorSuccess}: ${_sdds_cs.textNegative};
+                ${_emotion.timePickerTokens.textFieldBorderColorSuccessFocus}: ${_sdds_cs.textNegative};
+                ${_emotion.timePickerTokens.textFieldBorderColorSuccessHover}: ${_sdds_cs.textNegative};
 
-                ${_emotion.timePickerTokens.textFieldContentSlotColor}: var(--text-secondary);
-                ${_emotion.timePickerTokens.textFieldContentSlotColorHover}: var(--text-secondary-hover);
-                ${_emotion.timePickerTokens.textFieldContentSlotColorActive}: var(--text-secondary-active);
+                ${_emotion.timePickerTokens.textFieldContentSlotColor}: ${_sdds_cs.textSecondary};
+                ${_emotion.timePickerTokens.textFieldContentSlotColorHover}: ${_sdds_cs.textSecondaryHover};
+                ${_emotion.timePickerTokens.textFieldContentSlotColorActive}: ${_sdds_cs.textSecondaryActive};
 
-                ${_emotion.timePickerTokens.textFieldContentRightSlotColor}: var(--text-accent);
-                ${_emotion.timePickerTokens.textFieldContentRightSlotColorHover}: var(--text-accent-minor);
-                ${_emotion.timePickerTokens.textFieldContentSlotRightOpacityReadOnly}: var(--text-accent-active);
+                ${_emotion.timePickerTokens.textFieldContentRightSlotColor}: ${_sdds_cs.textAccent};
+                ${_emotion.timePickerTokens.textFieldContentRightSlotColorHover}: ${_sdds_cs.textAccentMinor};
+                ${_emotion.timePickerTokens.textFieldContentSlotRightOpacityReadOnly}: ${_sdds_cs.textAccentActive};
 
-                ${_emotion.timePickerTokens.textFieldTextBeforeColor}: var(--text-tertiary);
-                ${_emotion.timePickerTokens.textFieldTextAfterColor}: var(--text-tertiary);
+                ${_emotion.timePickerTokens.textFieldTextBeforeColor}: ${_sdds_cs.textTertiary};
+                ${_emotion.timePickerTokens.textFieldTextAfterColor}: ${_sdds_cs.textTertiary};
 
-                ${_emotion.timePickerTokens.textFieldPlaceholderColorFocus}: var(--text-tertiary);
+                ${_emotion.timePickerTokens.textFieldPlaceholderColorFocus}: ${_sdds_cs.textTertiary};
 
-                ${_emotion.timePickerTokens.timePickerBackground}: var(--surface-solid-card);
-                ${_emotion.timePickerTokens.itemBackgroundHover}: var(--surface-solid-secondary);
-                ${_emotion.timePickerTokens.itemBackgroundActive}: var(--surface-solid-secondary);
-                ${_emotion.timePickerTokens.itemFocusColor}: var(--surface-accent);
+                ${_emotion.timePickerTokens.timePickerBackground}: ${_sdds_cs.surfaceSolidCard};
+                ${_emotion.timePickerTokens.itemBackgroundHover}: ${_sdds_cs.surfaceSolidSecondary};
+                ${_emotion.timePickerTokens.itemBackgroundActive}: ${_sdds_cs.surfaceSolidSecondary};
+                ${_emotion.timePickerTokens.itemFocusColor}: ${_sdds_cs.surfaceAccent};
 
-                ${_emotion.timePickerTokens.scrollbarColor}: var(--surface-solid-tertiary);
+                ${_emotion.timePickerTokens.scrollbarColor}: ${_sdds_cs.surfaceSolidTertiary};
                 ${_emotion.timePickerTokens.scrollbarTrackColor}: var(--surface-transparent-primary);
 
-                ${_emotion.timePickerTokens.leftHelperColor}: var(--text-secondary);
-                ${_emotion.timePickerTokens.leftHelperColorError}: var(--text-negative);
-                ${_emotion.timePickerTokens.leftHelperColorSuccess}: var(--text-positive);
+                ${_emotion.timePickerTokens.leftHelperColor}: ${_sdds_cs.textSecondary};
+                ${_emotion.timePickerTokens.leftHelperColorError}: ${_sdds_cs.textNegative};
+                ${_emotion.timePickerTokens.leftHelperColorSuccess}: ${_sdds_cs.textPositive};
             `
         },
         size: {
@@ -87,12 +88,12 @@ const config = {
 
                 ${_emotion.timePickerTokens.labelOffset}: 0.5rem;
 
-                ${_emotion.timePickerTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_emotion.timePickerTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_emotion.timePickerTokens.labelFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_emotion.timePickerTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_emotion.timePickerTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_emotion.timePickerTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_emotion.timePickerTokens.labelFontFamily}: ${_sdds_cs.bodyS.fontFamily};
+                ${_emotion.timePickerTokens.labelFontStyle}: ${_sdds_cs.bodyS.fontStyle};
+                ${_emotion.timePickerTokens.labelFontSize}: ${_sdds_cs.bodyS.fontSize};
+                ${_emotion.timePickerTokens.labelFontWeight}: ${_sdds_cs.bodyS.fontWeight};
+                ${_emotion.timePickerTokens.labelLetterSpacing}: ${_sdds_cs.bodyS.letterSpacing};
+                ${_emotion.timePickerTokens.labelLineHeight}: ${_sdds_cs.bodyS.lineHeight};
                 ${_emotion.timePickerTokens.textFieldBorderWidth}: 0.0625rem;
 
                 ${_emotion.timePickerTokens.indicatorSize}: 0.375rem;
@@ -106,12 +107,12 @@ const config = {
                 ${_emotion.timePickerTokens.textFieldBorderWidth}: 0.125rem;
                 ${_emotion.timePickerTokens.textFieldBorderRadius}: 0.75rem;
                 ${_emotion.timePickerTokens.textFieldPadding}: 0.55rem 0.75rem;
-                ${_emotion.timePickerTokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_emotion.timePickerTokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_emotion.timePickerTokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size);
-                ${_emotion.timePickerTokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${_emotion.timePickerTokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_emotion.timePickerTokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_emotion.timePickerTokens.textFieldFontFamily}: ${_sdds_cs.bodyM.fontFamily};
+                ${_emotion.timePickerTokens.textFieldFontStyle}: ${_sdds_cs.bodyM.fontStyle};
+                ${_emotion.timePickerTokens.textFieldFontSize}: ${_sdds_cs.bodyM.fontSize};
+                ${_emotion.timePickerTokens.textFieldFontWeight}: ${_sdds_cs.bodyM.fontWeight};
+                ${_emotion.timePickerTokens.textFieldLetterSpacing}: ${_sdds_cs.bodyM.letterSpacing};
+                ${_emotion.timePickerTokens.textFieldLineHeight}: ${_sdds_cs.bodyM.lineHeight};
 
                 ${_emotion.timePickerTokens.textFieldLeftContentMargin}: 0 0.5rem 0 0rem;
                 ${_emotion.timePickerTokens.textFieldRightContentMargin}: 0 0rem 0 0.75rem;
@@ -124,24 +125,24 @@ const config = {
 
                 ${_emotion.timePickerTokens.columnHeight}: 19rem;
 
-                ${_emotion.timePickerTokens.itemFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_emotion.timePickerTokens.itemFontSize}: var(--plasma-typo-body-m-font-size);
-                ${_emotion.timePickerTokens.itemFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_emotion.timePickerTokens.itemFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${_emotion.timePickerTokens.itemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_emotion.timePickerTokens.itemLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_emotion.timePickerTokens.itemFontFamily}: ${_sdds_cs.bodyM.fontFamily};
+                ${_emotion.timePickerTokens.itemFontSize}: ${_sdds_cs.bodyM.fontSize};
+                ${_emotion.timePickerTokens.itemFontStyle}: ${_sdds_cs.bodyM.fontStyle};
+                ${_emotion.timePickerTokens.itemFontWeight}: ${_sdds_cs.bodyM.fontWeight};
+                ${_emotion.timePickerTokens.itemLetterSpacing}: ${_sdds_cs.bodyM.letterSpacing};
+                ${_emotion.timePickerTokens.itemLineHeight}: ${_sdds_cs.bodyM.lineHeight};
 
                 ${_emotion.timePickerTokens.itemHeight}: 2.5rem;
                 ${_emotion.timePickerTokens.itemBorderRadius}: 0.5rem;
                 ${_emotion.timePickerTokens.itemPadding}: 0rem;
 
                 ${_emotion.timePickerTokens.leftHelperOffset}: 0.25rem 0 0 0;
-                ${_emotion.timePickerTokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_emotion.timePickerTokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_emotion.timePickerTokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_emotion.timePickerTokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_emotion.timePickerTokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_emotion.timePickerTokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_emotion.timePickerTokens.leftHelperFontFamily}: ${_sdds_cs.bodyXS.fontFamily};
+                ${_emotion.timePickerTokens.leftHelperFontStyle}: ${_sdds_cs.bodyXS.fontStyle};
+                ${_emotion.timePickerTokens.leftHelperFontSize}: ${_sdds_cs.bodyXS.fontSize};
+                ${_emotion.timePickerTokens.leftHelperFontWeight}: ${_sdds_cs.bodyXS.fontWeight};
+                ${_emotion.timePickerTokens.leftHelperLetterSpacing}: ${_sdds_cs.bodyXS.letterSpacing};
+                ${_emotion.timePickerTokens.leftHelperLineHeight}: ${_sdds_cs.bodyXS.lineHeight};
 
                 ${_emotion.timePickerTokens.scrollbarWidth}: 0.125rem;
                 ${_emotion.timePickerTokens.scrollbarMargin}: 0.25rem;
@@ -151,31 +152,31 @@ const config = {
             true: (0, _emotion.css)`
                 ${_emotion.timePickerTokens.disabledOpacity}: 1;
 
-                ${_emotion.timePickerTokens.textFieldColor}: var(--text-secondary);
+                ${_emotion.timePickerTokens.textFieldColor}: ${_sdds_cs.textSecondary};
 
-                ${_emotion.timePickerTokens.textFieldBackgroundColor}: var(--surface-solid-primary);
-                ${_emotion.timePickerTokens.textFieldBackgroundColorFocus}: var(--surface-solid-primary);
+                ${_emotion.timePickerTokens.textFieldBackgroundColor}: ${_sdds_cs.surfaceSolidPrimary};
+                ${_emotion.timePickerTokens.textFieldBackgroundColorFocus}: ${_sdds_cs.surfaceSolidPrimary};
 
-                ${_emotion.timePickerTokens.textFieldBorderColor}: var(--surface-solid-primary);
-                ${_emotion.timePickerTokens.textFieldBorderColorHover}: var(--surface-solid-primary);
-                ${_emotion.timePickerTokens.textFieldBorderColorFocus}: var(--surface-solid-primary);
+                ${_emotion.timePickerTokens.textFieldBorderColor}: ${_sdds_cs.surfaceSolidPrimary};
+                ${_emotion.timePickerTokens.textFieldBorderColorHover}: ${_sdds_cs.surfaceSolidPrimary};
+                ${_emotion.timePickerTokens.textFieldBorderColorFocus}: ${_sdds_cs.surfaceSolidPrimary};
             `
         },
         readonly: {
             true: (0, _emotion.css)`
-                ${_emotion.timePickerTokens.labelColorReadOnly}: var(--text-secondary);
-                ${_emotion.timePickerTokens.leftHelperColorReadOnly}: var(--text-secondary);
+                ${_emotion.timePickerTokens.labelColorReadOnly}: ${_sdds_cs.textSecondary};
+                ${_emotion.timePickerTokens.leftHelperColorReadOnly}: ${_sdds_cs.textSecondary};
 
-                ${_emotion.timePickerTokens.textFieldColorReadOnly}: var(--text-primary);
-                ${_emotion.timePickerTokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary);
+                ${_emotion.timePickerTokens.textFieldColorReadOnly}: ${_sdds_cs.textPrimary};
+                ${_emotion.timePickerTokens.textFieldPlaceholderColorReadOnly}: ${_sdds_cs.textSecondary};
 
-                ${_emotion.timePickerTokens.textFieldContentSlotColorHover}: var(--text-secondary);
-                ${_emotion.timePickerTokens.textFieldContentSlotColorActive}: var(--text-secondary);
+                ${_emotion.timePickerTokens.textFieldContentSlotColorHover}: ${_sdds_cs.textSecondary};
+                ${_emotion.timePickerTokens.textFieldContentSlotColorActive}: ${_sdds_cs.textSecondary};
 
                 ${_emotion.timePickerTokens.textFieldBorderWidth}: 0;
                 ${_emotion.timePickerTokens.textFieldBorderColor}: transparent;
 
-                ${_emotion.timePickerTokens.textFieldBackgroundColorReadOnly}: var(--surface-clear);
+                ${_emotion.timePickerTokens.textFieldBackgroundColorReadOnly}: ${_sdds_cs.surfaceClear};
                 ${_emotion.timePickerTokens.textFieldContentSlotRightOpacityReadOnly}: 0.4;
             `
         }

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "config", {
         return config;
     }
 });
+const _sdds_cs = require("@salutejs/sdds-themes/tokens/sdds_cs");
 const _emotion = require("@salutejs/plasma-new-hope/emotion");
 const config = {
     defaults: {
@@ -18,31 +19,31 @@ const config = {
     variations: {
         view: {
             default: (0, _emotion.css)`
-                ${_emotion.toastTokens.color}: var(--text-primary);
-                ${_emotion.toastTokens.background}: var(--surface-solid-card-brightness);
+                ${_emotion.toastTokens.color}: ${_sdds_cs.textPrimary};
+                ${_emotion.toastTokens.background}: ${_sdds_cs.surfaceSolidCardBrightness};
 
-                ${_emotion.toastTokens.closeIconColor}: var(--text-accent);
-                ${_emotion.toastTokens.closeIconColorOnHover}: var(--text-accent-minor);
+                ${_emotion.toastTokens.closeIconColor}: ${_sdds_cs.textAccent};
+                ${_emotion.toastTokens.closeIconColorOnHover}: ${_sdds_cs.textAccentMinor};
             `,
             /**
              * @deprecated
              * светлый и темный фон регулировать через `view` компонента `ViewContainer`
              */ dark: (0, _emotion.css)`
-                ${_emotion.toastTokens.color}: var(--on-dark-text-primary);
-                ${_emotion.toastTokens.background}: var(--on-dark-surface-solid-primary-brightness);
+                ${_emotion.toastTokens.color}: ${_sdds_cs.onDarkTextPrimary};
+                ${_emotion.toastTokens.background}: ${_sdds_cs.onDarkSurfaceSolidPrimaryBrightness};
 
-                ${_emotion.toastTokens.closeIconColor}: var(--on-dark-text-accent);
-                ${_emotion.toastTokens.closeIconColorOnHover}: var(--on-dark-text-accent-minor);
+                ${_emotion.toastTokens.closeIconColor}: ${_sdds_cs.onDarkTextAccent};
+                ${_emotion.toastTokens.closeIconColorOnHover}: ${_sdds_cs.onDarkTextAccentMinor};
             `,
             /**
              * @deprecated
              * светлый и темный фон регулировать через `view` компонента `ViewContainer`
              */ light: (0, _emotion.css)`
-                ${_emotion.toastTokens.color}: var(--on-light-text-primary);
-                ${_emotion.toastTokens.background}: var(--on-light-surface-solid-primary-brightness);
+                ${_emotion.toastTokens.color}: ${_sdds_cs.onLightTextPrimary};
+                ${_emotion.toastTokens.background}: ${_sdds_cs.onLightSurfaceSolidPrimaryBrightness};
 
-                ${_emotion.toastTokens.closeIconColor}: var(--on-light-text-accent);
-                ${_emotion.toastTokens.closeIconColorOnHover}: var(--on-light-text-accent-minor);
+                ${_emotion.toastTokens.closeIconColor}: ${_sdds_cs.onLightTextAccent};
+                ${_emotion.toastTokens.closeIconColorOnHover}: ${_sdds_cs.onLightTextAccentMinor};
             `
         },
         size: {
@@ -51,12 +52,12 @@ const config = {
                 ${_emotion.toastTokens.maxWidth}: calc(100vw - 5rem);
                 ${_emotion.toastTokens.padding}: 0.5rem 0.75rem;
 
-                ${_emotion.toastTokens.fontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_emotion.toastTokens.fontSize}: var(--plasma-typo-body-m-font-size);
-                ${_emotion.toastTokens.fontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_emotion.toastTokens.fontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${_emotion.toastTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_emotion.toastTokens.lineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_emotion.toastTokens.fontFamily}: ${_sdds_cs.bodyM.fontFamily};
+                ${_emotion.toastTokens.fontSize}: ${_sdds_cs.bodyM.fontSize};
+                ${_emotion.toastTokens.fontStyle}: ${_sdds_cs.bodyM.fontStyle};
+                ${_emotion.toastTokens.fontWeight}: ${_sdds_cs.bodyM.fontWeight};
+                ${_emotion.toastTokens.letterSpacing}: ${_sdds_cs.bodyM.letterSpacing};
+                ${_emotion.toastTokens.lineHeight}: ${_sdds_cs.bodyM.lineHeight};
 
                 ${_emotion.toastTokens.contentLeftMargin}: -0.0625rem 0.5rem -0.0625rem 0rem;
                 ${_emotion.toastTokens.closeIconMargin}: -0.0625rem 0.125rem -0.0625rem 0.75rem;

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "config", {
         return config;
     }
 });
+const _sdds_cs = require("@salutejs/sdds-themes/tokens/sdds_cs");
 const _emotion = require("@salutejs/plasma-new-hope/emotion");
 const config = {
     defaults: {
@@ -17,11 +18,11 @@ const config = {
     variations: {
         view: {
             default: (0, _emotion.css)`
-                ${_emotion.toastNewTokens.color}: var(--text-primary);
-                ${_emotion.toastNewTokens.background}: var(--surface-solid-card-brightness);
+                ${_emotion.toastNewTokens.color}: ${_sdds_cs.textPrimary};
+                ${_emotion.toastNewTokens.background}: ${_sdds_cs.surfaceSolidCardBrightness};
 
-                ${_emotion.toastNewTokens.closeIconColor}: var(--text-accent);
-                ${_emotion.toastNewTokens.closeIconColorOnHover}: var(--text-accent-minor);
+                ${_emotion.toastNewTokens.closeIconColor}: ${_sdds_cs.textAccent};
+                ${_emotion.toastNewTokens.closeIconColorOnHover}: ${_sdds_cs.textAccentMinor};
             `
         },
         size: {
@@ -34,12 +35,12 @@ const config = {
                 ${_emotion.toastNewTokens.closeIconMargin}: -0.0625rem 0.125rem -0.0625rem 0.75rem;
                 ${_emotion.toastNewTokens.contentLeftMargin}: -0.0625rem 0.5rem -0.0625rem 0rem;
 
-                ${_emotion.toastNewTokens.fontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_emotion.toastNewTokens.fontSize}: var(--plasma-typo-body-m-font-size);
-                ${_emotion.toastNewTokens.fontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_emotion.toastNewTokens.fontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${_emotion.toastNewTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_emotion.toastNewTokens.lineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_emotion.toastNewTokens.fontFamily}: ${_sdds_cs.bodyM.fontFamily};
+                ${_emotion.toastNewTokens.fontSize}: ${_sdds_cs.bodyM.fontSize};
+                ${_emotion.toastNewTokens.fontStyle}: ${_sdds_cs.bodyM.fontStyle};
+                ${_emotion.toastNewTokens.fontWeight}: ${_sdds_cs.bodyM.fontWeight};
+                ${_emotion.toastNewTokens.letterSpacing}: ${_sdds_cs.bodyM.letterSpacing};
+                ${_emotion.toastNewTokens.lineHeight}: ${_sdds_cs.bodyM.lineHeight};
             `
         },
         pilled: {

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "config", {
         return config;
     }
 });
+const _sdds_cs = require("@salutejs/sdds-themes/tokens/sdds_cs");
 const _emotion = require("@salutejs/plasma-new-hope/emotion");
 const config = {
     defaults: {
@@ -25,12 +26,12 @@ const config = {
                 ${_emotion.tooltipTokens.minHeight}: 2rem;
                 ${_emotion.tooltipTokens.borderRadius}: 0.5rem;
 
-                ${_emotion.tooltipTokens.textFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_emotion.tooltipTokens.textFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_emotion.tooltipTokens.textFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_emotion.tooltipTokens.textFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_emotion.tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_emotion.tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_emotion.tooltipTokens.textFontFamily}: ${_sdds_cs.bodyS.fontFamily};
+                ${_emotion.tooltipTokens.textFontSize}: ${_sdds_cs.bodyS.fontSize};
+                ${_emotion.tooltipTokens.textFontStyle}: ${_sdds_cs.bodyS.fontStyle};
+                ${_emotion.tooltipTokens.textFontWeight}: ${_sdds_cs.bodyS.fontWeight};
+                ${_emotion.tooltipTokens.textFontLetterSpacing}: ${_sdds_cs.bodyS.letterSpacing};
+                ${_emotion.tooltipTokens.textFontLineHeight}: ${_sdds_cs.bodyS.lineHeight};
 
                 ${_emotion.tooltipTokens.contentLeftMargin}: 0.25rem;
 
@@ -44,16 +45,16 @@ const config = {
         view: {
             // TODO заменить тень на токен https://github.com/salute-developers/plasma/issues/1131
             default: (0, _emotion.css)`
-                ${_emotion.tooltipTokens.backgroundColor}: var(--inverse-surface-solid-card);
-                ${_emotion.tooltipTokens.arrowBackground}: var(--inverse-surface-solid-card);
+                ${_emotion.tooltipTokens.backgroundColor}: ${_sdds_cs.inverseSurfaceSolidCard};
+                ${_emotion.tooltipTokens.arrowBackground}: ${_sdds_cs.inverseSurfaceSolidCard};
                 ${_emotion.tooltipTokens.boxShadow}: 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08);
-                ${_emotion.tooltipTokens.color}: var(--inverse-text-primary);
+                ${_emotion.tooltipTokens.color}: ${_sdds_cs.inverseTextPrimary};
             `,
             secondary: (0, _emotion.css)`
-                ${_emotion.tooltipTokens.backgroundColor}: var(--on-dark-surface-solid-secondary);
-                ${_emotion.tooltipTokens.arrowBackground}: var(--on-dark-surface-solid-secondary);
+                ${_emotion.tooltipTokens.backgroundColor}: ${_sdds_cs.onDarkSurfaceSolidSecondary};
+                ${_emotion.tooltipTokens.arrowBackground}: ${_sdds_cs.onDarkSurfaceSolidSecondary};
                 ${_emotion.tooltipTokens.boxShadow}: 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08);
-                ${_emotion.tooltipTokens.color}: var(--inverse-text-primary);
+                ${_emotion.tooltipTokens.color}: ${_sdds_cs.inverseTextPrimary};
             `
         }
     }

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "config", {
         return config;
     }
 });
+const _sdds_cs = require("@salutejs/sdds-themes/tokens/sdds_cs");
 const _emotion = require("@salutejs/plasma-new-hope/emotion");
 const config = {
     defaults: {
@@ -17,7 +18,7 @@ const config = {
     variations: {
         view: {
             default: (0, _emotion.css)`
-                ${_emotion.tourTokens.tailColor}: var(--surface-solid-card);
+                ${_emotion.tourTokens.tailColor}: ${_sdds_cs.surfaceSolidCard};
                 ${_emotion.tourTokens.overlayColor}: rgba(0, 0, 0, 0.45);
             `
         },

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "config", {
         return config;
     }
 });
+const _sdds_cs = require("@salutejs/sdds-themes/tokens/sdds_cs");
 const _emotion = require("@salutejs/plasma-new-hope/emotion");
 const config = {
     defaults: {
@@ -17,23 +18,23 @@ const config = {
     variations: {
         view: {
             default: (0, _emotion.css)`
-                ${_emotion.treeTokens.iconFolderColor}: var(--text-primary);
-                ${_emotion.treeTokens.arrowColor}: var(--text-accent);
-                ${_emotion.treeTokens.arrowColorHover}: var(--text-accent-minor);
-                ${_emotion.treeTokens.arrowColorActive}: var(--text-accent-active);
-                ${_emotion.treeTokens.color}: var(--text-primary);
-                ${_emotion.treeTokens.colorSelected}: var(--text-primary);
-                ${_emotion.treeTokens.itemBackgroundColorSelected}: var(--surface-solid-primary);
+                ${_emotion.treeTokens.iconFolderColor}: ${_sdds_cs.textPrimary};
+                ${_emotion.treeTokens.arrowColor}: ${_sdds_cs.textAccent};
+                ${_emotion.treeTokens.arrowColorHover}: ${_sdds_cs.textAccentMinor};
+                ${_emotion.treeTokens.arrowColorActive}: ${_sdds_cs.textAccentActive};
+                ${_emotion.treeTokens.color}: ${_sdds_cs.textPrimary};
+                ${_emotion.treeTokens.colorSelected}: ${_sdds_cs.textPrimary};
+                ${_emotion.treeTokens.itemBackgroundColorSelected}: ${_sdds_cs.surfaceSolidPrimary};
                 ${_emotion.treeTokens.itemBackgroundColorPrimary}: transparent;
-                ${_emotion.treeTokens.itemBackgroundColorHover}: var(--surface-transparent-accent);
-                ${_emotion.treeTokens.itemBackgroundColorActive}: var(--surface-solid-primary-active);
-                ${_emotion.treeTokens.checkboxBorderColor}: var(--text-accent);
-                ${_emotion.treeTokens.checkboxBackgroundColor}: var(--text-accent);
+                ${_emotion.treeTokens.itemBackgroundColorHover}: ${_sdds_cs.surfaceTransparentAccent};
+                ${_emotion.treeTokens.itemBackgroundColorActive}: ${_sdds_cs.surfaceSolidPrimaryActive};
+                ${_emotion.treeTokens.checkboxBorderColor}: ${_sdds_cs.textAccent};
+                ${_emotion.treeTokens.checkboxBackgroundColor}: ${_sdds_cs.textAccent};
                 ${_emotion.treeTokens.itemDisabledOpacity}: 1;
-                ${_emotion.treeTokens.itemDisabledBorderColor}: var(--text-secondary);
-                ${_emotion.treeTokens.itemDisabledColor}: var(--text-secondary);
-                ${_emotion.treeTokens.itemDraggableBorderColor}: var(--surface-positive);
-                ${_emotion.treeTokens.itemDraggableLineColor}: var(--surface-solid-default);
+                ${_emotion.treeTokens.itemDisabledBorderColor}: ${_sdds_cs.textSecondary};
+                ${_emotion.treeTokens.itemDisabledColor}: ${_sdds_cs.textSecondary};
+                ${_emotion.treeTokens.itemDraggableBorderColor}: ${_sdds_cs.surfacePositive};
+                ${_emotion.treeTokens.itemDraggableLineColor}: ${_sdds_cs.surfaceSolidDefault};
             `
         },
         size: {
@@ -61,12 +62,12 @@ const config = {
                 ${_emotion.treeTokens.checkboxInnerSize}: 1.25rem;
                 ${_emotion.treeTokens.checkboxBorderRadius}: 0.375rem;
 
-                ${_emotion.treeTokens.fontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_emotion.treeTokens.fontSize}: var(--plasma-typo-body-m-font-size);
-                ${_emotion.treeTokens.fontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_emotion.treeTokens.fontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${_emotion.treeTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_emotion.treeTokens.lineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_emotion.treeTokens.fontFamily}: ${_sdds_cs.bodyM.fontFamily};
+                ${_emotion.treeTokens.fontSize}: ${_sdds_cs.bodyM.fontSize};
+                ${_emotion.treeTokens.fontStyle}: ${_sdds_cs.bodyM.fontStyle};
+                ${_emotion.treeTokens.fontWeight}: ${_sdds_cs.bodyM.fontWeight};
+                ${_emotion.treeTokens.letterSpacing}: ${_sdds_cs.bodyM.letterSpacing};
+                ${_emotion.treeTokens.lineHeight}: ${_sdds_cs.bodyM.lineHeight};
             `
         }
     }

package/dist/emotion/cjs/components/Typography/Body.config.js

@@ -25,6 +25,7 @@ _export(exports, {
         return configXXS;
     }
 });
+const _sdds_cs = require("@salutejs/sdds-themes/tokens/sdds_cs");
 const _emotion = require("@salutejs/plasma-new-hope/emotion");
 const configL = {
     defaults: {
@@ -33,14 +34,14 @@ const configL = {
     variations: {
         size: {
             l: (0, _emotion.css)`
-                ${_emotion.typographyTokens.typoFontFamily}: var(--plasma-typo-body-l-font-family);
-                ${_emotion.typographyTokens.typoFontSize}: var(--plasma-typo-body-l-font-size);
-                ${_emotion.typographyTokens.typoFontStyle}: var(--plasma-typo-body-l-font-style);
-                ${_emotion.typographyTokens.typoFontWeight}: var(--plasma-typo-body-l-font-weight);
-                ${_emotion.typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-l-bold-font-weight);
-                ${_emotion.typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-l-medium-font-weight);
-                ${_emotion.typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${_emotion.typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${_emotion.typographyTokens.typoFontFamily}: ${_sdds_cs.bodyL.fontFamily};
+                ${_emotion.typographyTokens.typoFontSize}: ${_sdds_cs.bodyL.fontSize};
+                ${_emotion.typographyTokens.typoFontStyle}: ${_sdds_cs.bodyL.fontStyle};
+                ${_emotion.typographyTokens.typoFontWeight}: ${_sdds_cs.bodyL.fontWeight};
+                ${_emotion.typographyTokens.typoFontWeightBold}: ${_sdds_cs.bodyLBold.fontWeight};
+                ${_emotion.typographyTokens.typoFontWeightMedium}: ${_sdds_cs.bodyLMedium.fontWeight};
+                ${_emotion.typographyTokens.typoFontLetterSpacing}: ${_sdds_cs.bodyL.letterSpacing};
+                ${_emotion.typographyTokens.typoFontLineHeight}: ${_sdds_cs.bodyL.lineHeight};
             `
         }
     }
@@ -52,14 +53,14 @@ const configM = {
     variations: {
         size: {
             m: (0, _emotion.css)`
-                ${_emotion.typographyTokens.typoFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_emotion.typographyTokens.typoFontSize}: var(--plasma-typo-body-m-font-size);
-                ${_emotion.typographyTokens.typoFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_emotion.typographyTokens.typoFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${_emotion.typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-m-bold-font-weight);
-                ${_emotion.typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-m-medium-font-weight);
-                ${_emotion.typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_emotion.typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_emotion.typographyTokens.typoFontFamily}: ${_sdds_cs.bodyM.fontFamily};
+                ${_emotion.typographyTokens.typoFontSize}: ${_sdds_cs.bodyM.fontSize};
+                ${_emotion.typographyTokens.typoFontStyle}: ${_sdds_cs.bodyM.fontStyle};
+                ${_emotion.typographyTokens.typoFontWeight}: ${_sdds_cs.bodyM.fontWeight};
+                ${_emotion.typographyTokens.typoFontWeightBold}: ${_sdds_cs.bodyMBold.fontWeight};
+                ${_emotion.typographyTokens.typoFontWeightMedium}: ${_sdds_cs.bodyMMedium.fontWeight};
+                ${_emotion.typographyTokens.typoFontLetterSpacing}: ${_sdds_cs.bodyM.letterSpacing};
+                ${_emotion.typographyTokens.typoFontLineHeight}: ${_sdds_cs.bodyM.lineHeight};
             `
         }
     }
@@ -71,14 +72,14 @@ const configS = {
     variations: {
         size: {
             s: (0, _emotion.css)`
-                ${_emotion.typographyTokens.typoFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_emotion.typographyTokens.typoFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_emotion.typographyTokens.typoFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_emotion.typographyTokens.typoFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_emotion.typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-s-bold-font-weight);
-                ${_emotion.typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-s-medium-font-weight);
-                ${_emotion.typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_emotion.typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_emotion.typographyTokens.typoFontFamily}: ${_sdds_cs.bodyS.fontFamily};
+                ${_emotion.typographyTokens.typoFontSize}: ${_sdds_cs.bodyS.fontSize};
+                ${_emotion.typographyTokens.typoFontStyle}: ${_sdds_cs.bodyS.fontStyle};
+                ${_emotion.typographyTokens.typoFontWeight}: ${_sdds_cs.bodyS.fontWeight};
+                ${_emotion.typographyTokens.typoFontWeightBold}: ${_sdds_cs.bodySBold.fontWeight};
+                ${_emotion.typographyTokens.typoFontWeightMedium}: ${_sdds_cs.bodySMedium.fontWeight};
+                ${_emotion.typographyTokens.typoFontLetterSpacing}: ${_sdds_cs.bodyS.letterSpacing};
+                ${_emotion.typographyTokens.typoFontLineHeight}: ${_sdds_cs.bodyS.lineHeight};
             `
         }
     }
@@ -90,14 +91,14 @@ const configXS = {
     variations: {
         size: {
             xs: (0, _emotion.css)`
-                ${_emotion.typographyTokens.typoFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_emotion.typographyTokens.typoFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_emotion.typographyTokens.typoFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_emotion.typographyTokens.typoFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_emotion.typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xs-bold-font-weight);
-                ${_emotion.typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xs-medium-font-weight);
-                ${_emotion.typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_emotion.typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_emotion.typographyTokens.typoFontFamily}: ${_sdds_cs.bodyXS.fontFamily};
+                ${_emotion.typographyTokens.typoFontSize}: ${_sdds_cs.bodyXS.fontSize};
+                ${_emotion.typographyTokens.typoFontStyle}: ${_sdds_cs.bodyXS.fontStyle};
+                ${_emotion.typographyTokens.typoFontWeight}: ${_sdds_cs.bodyXS.fontWeight};
+                ${_emotion.typographyTokens.typoFontWeightBold}: ${_sdds_cs.bodyXSBold.fontWeight};
+                ${_emotion.typographyTokens.typoFontWeightMedium}: ${_sdds_cs.bodyXSMedium.fontWeight};
+                ${_emotion.typographyTokens.typoFontLetterSpacing}: ${_sdds_cs.bodyXS.letterSpacing};
+                ${_emotion.typographyTokens.typoFontLineHeight}: ${_sdds_cs.bodyXS.lineHeight};
             `
         }
     }
@@ -109,14 +110,14 @@ const configXXS = {
     variations: {
         size: {
             xxs: (0, _emotion.css)`
-                ${_emotion.typographyTokens.typoFontFamily}: var(--plasma-typo-body-xxs-font-family);
-                ${_emotion.typographyTokens.typoFontSize}: var(--plasma-typo-body-xxs-font-size);
-                ${_emotion.typographyTokens.typoFontStyle}: var(--plasma-typo-body-xxs-font-style);
-                ${_emotion.typographyTokens.typoFontWeight}: var(--plasma-typo-body-xxs-font-weight);
-                ${_emotion.typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xxs-bold-font-weight);
-                ${_emotion.typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xxs-medium-font-weight);
-                ${_emotion.typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
-                ${_emotion.typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xxs-line-height);
+                ${_emotion.typographyTokens.typoFontFamily}: ${_sdds_cs.bodyXXS.fontFamily};
+                ${_emotion.typographyTokens.typoFontSize}: ${_sdds_cs.bodyXXS.fontSize};
+                ${_emotion.typographyTokens.typoFontStyle}: ${_sdds_cs.bodyXXS.fontStyle};
+                ${_emotion.typographyTokens.typoFontWeight}: ${_sdds_cs.bodyXXS.fontWeight};
+                ${_emotion.typographyTokens.typoFontWeightBold}: ${_sdds_cs.bodyXXSBold.fontWeight};
+                ${_emotion.typographyTokens.typoFontWeightMedium}: ${_sdds_cs.bodyXXSMedium.fontWeight};
+                ${_emotion.typographyTokens.typoFontLetterSpacing}: ${_sdds_cs.bodyXXS.letterSpacing};
+                ${_emotion.typographyTokens.typoFontLineHeight}: ${_sdds_cs.bodyXXS.lineHeight};
             `
         }
     }