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

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

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

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

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

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

@@ -1,3 +1,4 @@
+import { bodyM, surfaceSolidCardBrightness, textAccent, textAccentMinor, textPrimary } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { css, toastNewTokens as toastTokens } from '@salutejs/plasma-new-hope/emotion';
 export const config = {
     defaults: {
@@ -7,11 +8,11 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${toastTokens.color}: var(--text-primary);
-                ${toastTokens.background}: var(--surface-solid-card-brightness);
+                ${toastTokens.color}: ${textPrimary};
+                ${toastTokens.background}: ${surfaceSolidCardBrightness};
 
-                ${toastTokens.closeIconColor}: var(--text-accent);
-                ${toastTokens.closeIconColorOnHover}: var(--text-accent-minor);
+                ${toastTokens.closeIconColor}: ${textAccent};
+                ${toastTokens.closeIconColorOnHover}: ${textAccentMinor};
             `
         },
         size: {
@@ -24,12 +25,12 @@ export const config = {
                 ${toastTokens.closeIconMargin}: -0.0625rem 0.125rem -0.0625rem 0.75rem;
                 ${toastTokens.contentLeftMargin}: -0.0625rem 0.5rem -0.0625rem 0rem;
 
-                ${toastTokens.fontFamily}: var(--plasma-typo-body-m-font-family);
-                ${toastTokens.fontSize}: var(--plasma-typo-body-m-font-size);
-                ${toastTokens.fontStyle}: var(--plasma-typo-body-m-font-style);
-                ${toastTokens.fontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${toastTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${toastTokens.lineHeight}: var(--plasma-typo-body-m-line-height);
+                ${toastTokens.fontFamily}: ${bodyM.fontFamily};
+                ${toastTokens.fontSize}: ${bodyM.fontSize};
+                ${toastTokens.fontStyle}: ${bodyM.fontStyle};
+                ${toastTokens.fontWeight}: ${bodyM.fontWeight};
+                ${toastTokens.letterSpacing}: ${bodyM.letterSpacing};
+                ${toastTokens.lineHeight}: ${bodyM.lineHeight};
             `
         },
         pilled: {

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

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

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

@@ -1,3 +1,4 @@
+import { surfaceSolidCard } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { tourTokens as tokens, css } from '@salutejs/plasma-new-hope/emotion';
 export const config = {
     defaults: {
@@ -7,7 +8,7 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${tokens.tailColor}: var(--surface-solid-card);
+                ${tokens.tailColor}: ${surfaceSolidCard};
                 ${tokens.overlayColor}: rgba(0, 0, 0, 0.45);
             `
         },

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

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

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

@@ -1,3 +1,4 @@
+import { bodyL, bodyLBold, bodyLMedium, bodyM, bodyMBold, bodyMMedium, bodyS, bodySBold, bodySMedium, bodyXS, bodyXSBold, bodyXSMedium, bodyXXS, bodyXXSBold, bodyXXSMedium } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { css, typographyTokens } from '@salutejs/plasma-new-hope/emotion';
 export const configL = {
     defaults: {
@@ -6,14 +7,14 @@ export const configL = {
     variations: {
         size: {
             l: css`
-                ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-l-font-family);
-                ${typographyTokens.typoFontSize}: var(--plasma-typo-body-l-font-size);
-                ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-l-font-style);
-                ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-l-font-weight);
-                ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-l-bold-font-weight);
-                ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-l-medium-font-weight);
-                ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${typographyTokens.typoFontFamily}: ${bodyL.fontFamily};
+                ${typographyTokens.typoFontSize}: ${bodyL.fontSize};
+                ${typographyTokens.typoFontStyle}: ${bodyL.fontStyle};
+                ${typographyTokens.typoFontWeight}: ${bodyL.fontWeight};
+                ${typographyTokens.typoFontWeightBold}: ${bodyLBold.fontWeight};
+                ${typographyTokens.typoFontWeightMedium}: ${bodyLMedium.fontWeight};
+                ${typographyTokens.typoFontLetterSpacing}: ${bodyL.letterSpacing};
+                ${typographyTokens.typoFontLineHeight}: ${bodyL.lineHeight};
             `
         }
     }
@@ -25,14 +26,14 @@ export const configM = {
     variations: {
         size: {
             m: css`
-                ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${typographyTokens.typoFontSize}: var(--plasma-typo-body-m-font-size);
-                ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-m-bold-font-weight);
-                ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-m-medium-font-weight);
-                ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${typographyTokens.typoFontFamily}: ${bodyM.fontFamily};
+                ${typographyTokens.typoFontSize}: ${bodyM.fontSize};
+                ${typographyTokens.typoFontStyle}: ${bodyM.fontStyle};
+                ${typographyTokens.typoFontWeight}: ${bodyM.fontWeight};
+                ${typographyTokens.typoFontWeightBold}: ${bodyMBold.fontWeight};
+                ${typographyTokens.typoFontWeightMedium}: ${bodyMMedium.fontWeight};
+                ${typographyTokens.typoFontLetterSpacing}: ${bodyM.letterSpacing};
+                ${typographyTokens.typoFontLineHeight}: ${bodyM.lineHeight};
             `
         }
     }
@@ -44,14 +45,14 @@ export const configS = {
     variations: {
         size: {
             s: css`
-                ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${typographyTokens.typoFontSize}: var(--plasma-typo-body-s-font-size);
-                ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-s-bold-font-weight);
-                ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-s-medium-font-weight);
-                ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${typographyTokens.typoFontFamily}: ${bodyS.fontFamily};
+                ${typographyTokens.typoFontSize}: ${bodyS.fontSize};
+                ${typographyTokens.typoFontStyle}: ${bodyS.fontStyle};
+                ${typographyTokens.typoFontWeight}: ${bodyS.fontWeight};
+                ${typographyTokens.typoFontWeightBold}: ${bodySBold.fontWeight};
+                ${typographyTokens.typoFontWeightMedium}: ${bodySMedium.fontWeight};
+                ${typographyTokens.typoFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${typographyTokens.typoFontLineHeight}: ${bodyS.lineHeight};
             `
         }
     }
@@ -63,14 +64,14 @@ export const configXS = {
     variations: {
         size: {
             xs: css`
-                ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xs-bold-font-weight);
-                ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xs-medium-font-weight);
-                ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${typographyTokens.typoFontFamily}: ${bodyXS.fontFamily};
+                ${typographyTokens.typoFontSize}: ${bodyXS.fontSize};
+                ${typographyTokens.typoFontStyle}: ${bodyXS.fontStyle};
+                ${typographyTokens.typoFontWeight}: ${bodyXS.fontWeight};
+                ${typographyTokens.typoFontWeightBold}: ${bodyXSBold.fontWeight};
+                ${typographyTokens.typoFontWeightMedium}: ${bodyXSMedium.fontWeight};
+                ${typographyTokens.typoFontLetterSpacing}: ${bodyXS.letterSpacing};
+                ${typographyTokens.typoFontLineHeight}: ${bodyXS.lineHeight};
             `
         }
     }
@@ -82,14 +83,14 @@ export const configXXS = {
     variations: {
         size: {
             xxs: css`
-                ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xxs-font-family);
-                ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xxs-font-size);
-                ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xxs-font-style);
-                ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xxs-font-weight);
-                ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xxs-bold-font-weight);
-                ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xxs-medium-font-weight);
-                ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
-                ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xxs-line-height);
+                ${typographyTokens.typoFontFamily}: ${bodyXXS.fontFamily};
+                ${typographyTokens.typoFontSize}: ${bodyXXS.fontSize};
+                ${typographyTokens.typoFontStyle}: ${bodyXXS.fontStyle};
+                ${typographyTokens.typoFontWeight}: ${bodyXXS.fontWeight};
+                ${typographyTokens.typoFontWeightBold}: ${bodyXXSBold.fontWeight};
+                ${typographyTokens.typoFontWeightMedium}: ${bodyXXSMedium.fontWeight};
+                ${typographyTokens.typoFontLetterSpacing}: ${bodyXXS.letterSpacing};
+                ${typographyTokens.typoFontLineHeight}: ${bodyXXS.lineHeight};
             `
         }
     }