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

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

@@ -1,3 +1,4 @@
+import { bodyM, bodyS, bodyXS, outlineAccent, outlineNegative, outlineNegativeHover, outlineSolidPrimary, outlineSolidPrimaryHover, surfaceAccent, surfaceClear, surfaceNegative, surfaceSolidCard, surfaceSolidPrimary, surfaceTransparentAccent, textAccent, textAccentActive, textAccentMinor, textNegative, textPrimary, textSecondary, textSecondaryActive, textSecondaryHover, textTertiary } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { css, autocompleteTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
 export const config = {
     defaults: {
@@ -8,90 +9,90 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${tokens.textFieldColor}: var(--text-primary);
-                ${tokens.textFieldClearColor}: var(--text-primary);
-
-                ${tokens.textFieldPlaceholderColor}: var(--text-secondary);
-                ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary);
-                ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary);
-                ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary);
-
-                ${tokens.textFieldBackgroundColor}: var(--surface-solid-card);
-                ${tokens.textFieldBackgroundColorFocus}: var(--surface-solid-card);
-                ${tokens.textFieldCaretColor}: var(--text-accent);
-                ${tokens.textFieldTextBeforeColor}: var(--text-secondary);
-                ${tokens.textFieldTextAfterColor}: var(--text-secondary);
-                ${tokens.textFieldLabelColor}: var(--text-primary);
-                ${tokens.textFieldLeftHelperColor}: var(--text-secondary);
-                ${tokens.textFieldFocusColor}: var(--text-accent);
-
-                ${tokens.textFieldContentSlotColor}: var(--text-secondary);
-                ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover);
-                ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active);
-                ${tokens.textFieldContentSlotRightColor}: var(--text-accent);
-                ${tokens.textFieldContentSlotRightColorHover}: var(--text-accent-minor);
-                ${tokens.textFieldContentSlotRightColorActive}: var(--text-accent-active);
-
-                ${tokens.focusColor}: var(--surface-accent);
-                ${tokens.textFieldIndicatorColor}: var(--surface-negative);
-                ${tokens.textFieldOptionalColor}: var(--text-tertiary);
-
-                ${tokens.textFieldBorderColor}: var(--outline-solid-primary);
-                ${tokens.textFieldBorderColorHover}: var(--outline-solid-primary-hover);
-                ${tokens.textFieldBorderColorFocus}: var(--outline-accent);
-
-                ${tokens.background}: var(--surface-solid-card);
+                ${tokens.textFieldColor}: ${textPrimary};
+                ${tokens.textFieldClearColor}: ${textPrimary};
+
+                ${tokens.textFieldPlaceholderColor}: ${textSecondary};
+                ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary};
+                ${tokens.textFieldClearPlaceholderColor}: ${textSecondary};
+                ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary};
+
+                ${tokens.textFieldBackgroundColor}: ${surfaceSolidCard};
+                ${tokens.textFieldBackgroundColorFocus}: ${surfaceSolidCard};
+                ${tokens.textFieldCaretColor}: ${textAccent};
+                ${tokens.textFieldTextBeforeColor}: ${textSecondary};
+                ${tokens.textFieldTextAfterColor}: ${textSecondary};
+                ${tokens.textFieldLabelColor}: ${textPrimary};
+                ${tokens.textFieldLeftHelperColor}: ${textSecondary};
+                ${tokens.textFieldFocusColor}: ${textAccent};
+
+                ${tokens.textFieldContentSlotColor}: ${textSecondary};
+                ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover};
+                ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive};
+                ${tokens.textFieldContentSlotRightColor}: ${textAccent};
+                ${tokens.textFieldContentSlotRightColorHover}: ${textAccentMinor};
+                ${tokens.textFieldContentSlotRightColorActive}: ${textAccentActive};
+
+                ${tokens.focusColor}: ${surfaceAccent};
+                ${tokens.textFieldIndicatorColor}: ${surfaceNegative};
+                ${tokens.textFieldOptionalColor}: ${textTertiary};
+
+                ${tokens.textFieldBorderColor}: ${outlineSolidPrimary};
+                ${tokens.textFieldBorderColorHover}: ${outlineSolidPrimaryHover};
+                ${tokens.textFieldBorderColorFocus}: ${outlineAccent};
+
+                ${tokens.background}: ${surfaceSolidCard};
                 ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);
                 ${tokens.itemBackground}: var(--plasma-colors-transparent);
-                ${tokens.itemBackgroundHover}: var(--surface-transparent-accent);
-                ${tokens.itemColor}: var(--text-primary);
+                ${tokens.itemBackgroundHover}: ${surfaceTransparentAccent};
+                ${tokens.itemColor}: ${textPrimary};
 
-                ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary);
+                ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary};
 
-                ${tokens.dropdownBorderColor}: var(--surface-solid-primary);
+                ${tokens.dropdownBorderColor}: ${surfaceSolidPrimary};
             `,
             negative: css`
-                ${tokens.textFieldColor}: var(--text-primary);
-                ${tokens.textFieldClearColor}: var(--text-primary);
-
-                ${tokens.textFieldPlaceholderColor}: var(--text-secondary);
-                ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary);
-                ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary);
-                ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary);
-
-                ${tokens.textFieldBackgroundColor}: var(--surface-solid-card);
-                ${tokens.textFieldBackgroundColorFocus}: var(--surface-solid-card);
-                ${tokens.textFieldCaretColor}: var(--text-accent);
-                ${tokens.textFieldTextBeforeColor}: var(--text-secondary);
-                ${tokens.textFieldTextAfterColor}: var(--text-secondary);
-                ${tokens.textFieldLabelColor}: var(--text-primary);
-                ${tokens.textFieldLeftHelperColor}: var(--text-negative);
-                ${tokens.textFieldFocusColor}: var(--text-accent);
-
-                ${tokens.textFieldContentSlotColor}: var(--text-secondary);
-                ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover);
-                ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active);
-                ${tokens.textFieldContentSlotRightColor}: var(--text-accent);
-                ${tokens.textFieldContentSlotRightColorHover}: var(--text-accent-minor);
-                ${tokens.textFieldContentSlotRightColorActive}: var(--text-accent-active);
-
-                ${tokens.focusColor}: var(--surface-accent);
-                ${tokens.textFieldIndicatorColor}: var(--surface-negative);
-                ${tokens.textFieldOptionalColor}: var(--text-tertiary);
-
-                ${tokens.textFieldBorderColor}: var(--outline-negative);
-                ${tokens.textFieldBorderColorHover}: var(--outline-negative-hover);
-                ${tokens.textFieldBorderColorFocus}: var(--outline-accent);
-
-                ${tokens.background}: var(--surface-solid-card);
+                ${tokens.textFieldColor}: ${textPrimary};
+                ${tokens.textFieldClearColor}: ${textPrimary};
+
+                ${tokens.textFieldPlaceholderColor}: ${textSecondary};
+                ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary};
+                ${tokens.textFieldClearPlaceholderColor}: ${textSecondary};
+                ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary};
+
+                ${tokens.textFieldBackgroundColor}: ${surfaceSolidCard};
+                ${tokens.textFieldBackgroundColorFocus}: ${surfaceSolidCard};
+                ${tokens.textFieldCaretColor}: ${textAccent};
+                ${tokens.textFieldTextBeforeColor}: ${textSecondary};
+                ${tokens.textFieldTextAfterColor}: ${textSecondary};
+                ${tokens.textFieldLabelColor}: ${textPrimary};
+                ${tokens.textFieldLeftHelperColor}: ${textNegative};
+                ${tokens.textFieldFocusColor}: ${textAccent};
+
+                ${tokens.textFieldContentSlotColor}: ${textSecondary};
+                ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover};
+                ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive};
+                ${tokens.textFieldContentSlotRightColor}: ${textAccent};
+                ${tokens.textFieldContentSlotRightColorHover}: ${textAccentMinor};
+                ${tokens.textFieldContentSlotRightColorActive}: ${textAccentActive};
+
+                ${tokens.focusColor}: ${surfaceAccent};
+                ${tokens.textFieldIndicatorColor}: ${surfaceNegative};
+                ${tokens.textFieldOptionalColor}: ${textTertiary};
+
+                ${tokens.textFieldBorderColor}: ${outlineNegative};
+                ${tokens.textFieldBorderColorHover}: ${outlineNegativeHover};
+                ${tokens.textFieldBorderColorFocus}: ${outlineAccent};
+
+                ${tokens.background}: ${surfaceSolidCard};
                 ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04);
                 ${tokens.itemBackground}: var(--plasma-colors-transparent);
-                ${tokens.itemBackgroundHover}: var(--surface-transparent-accent);
-                ${tokens.itemColor}: var(--text-primary);
+                ${tokens.itemBackgroundHover}: ${surfaceTransparentAccent};
+                ${tokens.itemColor}: ${textPrimary};
 
-                ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary);
+                ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary};
 
-                ${tokens.dropdownBorderColor}: var(--surface-solid-primary);
+                ${tokens.dropdownBorderColor}: ${surfaceSolidPrimary};
             `
         },
         size: {
@@ -107,28 +108,28 @@ export const config = {
                 ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0;
                 ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem;
 
-                ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size);
-                ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${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.textFieldFontSize}: ${bodyM.fontSize};
+                ${tokens.textFieldFontStyle}: ${bodyM.fontStyle};
+                ${tokens.textFieldFontWeight}: ${bodyM.fontWeight};
+                ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing};
+                ${tokens.textFieldLineHeight}: ${bodyM.lineHeight};
 
                 ${tokens.textFieldLabelOffset}: 0.5rem;
-                ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size);
-                ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height);
-
-                ${tokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
-                ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-s-font-size);
-                ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily};
+                ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize};
+                ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle};
+                ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight};
+                ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight};
+
+                ${tokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
+                ${tokens.textFieldLeftHelperFontFamily}: ${bodyS.fontFamily};
+                ${tokens.textFieldLeftHelperFontSize}: ${bodyS.fontSize};
+                ${tokens.textFieldLeftHelperFontStyle}: ${bodyS.fontStyle};
+                ${tokens.textFieldLeftHelperFontWeight}: ${bodyS.fontWeight};
+                ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.textFieldLeftHelperLineHeight}: ${bodyS.lineHeight};
 
                 ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0;
                 ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0;
@@ -148,12 +149,12 @@ export const config = {
                 ${tokens.itemPadding}: 0.6875rem 0.75rem;
                 ${tokens.itemBorderRadius}: 0.5rem;
 
-                ${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.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${tokens.itemFontFamily}: ${bodyM.fontFamily};
+                ${tokens.itemFontSize}: ${bodyM.fontSize};
+                ${tokens.itemFontStyle}: ${bodyM.fontStyle};
+                ${tokens.itemFontWeight}: ${bodyM.fontWeight};
+                ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing};
+                ${tokens.itemFontLineHeight}: ${bodyM.lineHeight};
 
                 ${tokens.emptyStatePadding}: 1.375rem 0.625rem 0.625rem 0.625rem;
                 ${tokens.emptyStateGap}: 0.25rem;
@@ -167,37 +168,37 @@ export const config = {
         labelPlacement: {
             inner: css`
                 ${tokens.textFieldPlaceholderColor}: var(--plasma-input-label-color, var(--plasma-input-placeholder-color, var(--plasma-colors-secondary)));
-                ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize};
+                ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight};
             `,
             outer: css``
         },
         disabled: {
             true: css`
-                ${tokens.itemColor}: var(--text-secondary);
-                ${tokens.background}: var(--surface-solid-primary);
-                ${tokens.textFieldColor}: var(--text-secondary);
-                ${tokens.textFieldLabelColor}: var(--text-secondary);
-                ${tokens.textFieldBackgroundColor}: var(--surface-solid-primary);
-                ${tokens.textFieldBackgroundColorHover}: var(--surface-solid-primary);
-                ${tokens.textFieldBackgroundColorFocus}: var(--surface-solid-primary);
-                ${tokens.textFieldBorderColor}: var(--surface-solid-primary);
-                ${tokens.textFieldBorderColorHover}: var(--surface-solid-primary);
-                ${tokens.textFieldBorderColorFocus}: var(--surface-solid-primary);
+                ${tokens.itemColor}: ${textSecondary};
+                ${tokens.background}: ${surfaceSolidPrimary};
+                ${tokens.textFieldColor}: ${textSecondary};
+                ${tokens.textFieldLabelColor}: ${textSecondary};
+                ${tokens.textFieldBackgroundColor}: ${surfaceSolidPrimary};
+                ${tokens.textFieldBackgroundColorHover}: ${surfaceSolidPrimary};
+                ${tokens.textFieldBackgroundColorFocus}: ${surfaceSolidPrimary};
+                ${tokens.textFieldBorderColor}: ${surfaceSolidPrimary};
+                ${tokens.textFieldBorderColorHover}: ${surfaceSolidPrimary};
+                ${tokens.textFieldBorderColorFocus}: ${surfaceSolidPrimary};
             `
         },
         readOnly: {
             true: css`
-                ${tokens.textFieldColorReadOnly}: var(--text-primary);
-                ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-clear);
-                ${tokens.textFieldBorderColorReadOnly}: var(--surface-clear);
-                ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary);
-                ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary);
-                ${tokens.textFieldLabelColorReadOnly}: var(--text-secondary);
+                ${tokens.textFieldColorReadOnly}: ${textPrimary};
+                ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceClear};
+                ${tokens.textFieldBorderColorReadOnly}: ${surfaceClear};
+                ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary};
+                ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary};
+                ${tokens.textFieldLabelColorReadOnly}: ${textSecondary};
                 ${tokens.textFieldBorderColor}: transparent;
                 ${tokens.textFieldBorderWidth}: 0;
             `

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

@@ -1,3 +1,4 @@
+import { bodyS, bodyXXS, inverseTextPrimary, onDarkTextPrimary, onLightSurfaceSolidPrimary, surfaceAccent, surfaceNegative, surfacePositive, surfaceSolidDefault, surfaceSolidTertiary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { css, avatarTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
 export const config = {
     defaults: {
@@ -8,10 +9,10 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${tokens.color}: var(--text-secondary);
-                ${tokens.backgroundColor}: var(--surface-solid-tertiary);
-                ${tokens.statusOnlineColor}: var(--surface-positive);
-                ${tokens.statusOfflineColor}: var(--on-light-surface-solid-primary);
+                ${tokens.color}: ${textSecondary};
+                ${tokens.backgroundColor}: ${surfaceSolidTertiary};
+                ${tokens.statusOnlineColor}: ${surfacePositive};
+                ${tokens.statusOfflineColor}: ${onLightSurfaceSolidPrimary};
                 ${tokens.scaleHover}: 1.02;
                 ${tokens.fontFamily}: var(--plasma-typo-text-font-family);
             `
@@ -29,12 +30,12 @@ export const config = {
                 ${tokens.counterHeight}: 1.25rem;
                 ${tokens.counterPadding}: 0 0.375rem;
 
-                ${tokens.counterFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${tokens.counterFontSize}: var(--plasma-typo-body-s-font-size);
-                ${tokens.counterFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${tokens.counterFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${tokens.counterLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tokens.counterLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tokens.counterFontFamily}: ${bodyS.fontFamily};
+                ${tokens.counterFontSize}: ${bodyS.fontSize};
+                ${tokens.counterFontStyle}: ${bodyS.fontStyle};
+                ${tokens.counterFontWeight}: ${bodyS.fontWeight};
+                ${tokens.counterLetterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.counterLineHeight}: ${bodyS.lineHeight};
             `,
             m: css`
                 ${tokens.avatarSize}: 2.25rem;
@@ -47,12 +48,12 @@ export const config = {
                 ${tokens.counterHeight}: 1rem;
                 ${tokens.counterPadding}: 0 0.25rem;
 
-                ${tokens.counterFontFamily}: var(--plasma-typo-body-xxs-font-family);
-                ${tokens.counterFontSize}: var(--plasma-typo-body-xxs-font-size);
-                ${tokens.counterFontStyle}: var(--plasma-typo-body-xxs-font-style);
-                ${tokens.counterFontWeight}: var(--plasma-typo-body-xxs-font-weight);
-                ${tokens.counterLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
-                ${tokens.counterLineHeight}: var(--plasma-typo-body-xxs-line-height);
+                ${tokens.counterFontFamily}: ${bodyXXS.fontFamily};
+                ${tokens.counterFontSize}: ${bodyXXS.fontSize};
+                ${tokens.counterFontStyle}: ${bodyXXS.fontStyle};
+                ${tokens.counterFontWeight}: ${bodyXXS.fontWeight};
+                ${tokens.counterLetterSpacing}: ${bodyXXS.letterSpacing};
+                ${tokens.counterLineHeight}: ${bodyXXS.lineHeight};
             `,
             s: css`
                 ${tokens.avatarSize}: 1.5rem;
@@ -65,12 +66,12 @@ export const config = {
                 ${tokens.counterHeight}: 0.75rem;
                 ${tokens.counterPadding}: 0 0.125rem;
 
-                ${tokens.counterFontFamily}: var(--plasma-typo-body-xxs-font-family);
-                ${tokens.counterFontSize}: var(--plasma-typo-body-xxs-font-size);
-                ${tokens.counterFontStyle}: var(--plasma-typo-body-xxs-font-style);
-                ${tokens.counterFontWeight}: var(--plasma-typo-body-xxs-font-weight);
-                ${tokens.counterLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
-                ${tokens.counterLineHeight}: var(--plasma-typo-body-xxs-line-height);
+                ${tokens.counterFontFamily}: ${bodyXXS.fontFamily};
+                ${tokens.counterFontSize}: ${bodyXXS.fontSize};
+                ${tokens.counterFontStyle}: ${bodyXXS.fontStyle};
+                ${tokens.counterFontWeight}: ${bodyXXS.fontWeight};
+                ${tokens.counterLetterSpacing}: ${bodyXXS.letterSpacing};
+                ${tokens.counterLineHeight}: ${bodyXXS.lineHeight};
             `,
             fit: css`
                 ${tokens.avatarSize}: 100%;
@@ -85,7 +86,7 @@ export const config = {
             true: css`
                 ${tokens.outlineSize}: 0.1rem;
                 ${tokens.outlineOffset}: -0.2rem;
-                ${tokens.outlineColor}: var(--surface-accent);
+                ${tokens.outlineColor}: ${surfaceAccent};
             `
         },
         shape: {
@@ -97,20 +98,20 @@ export const config = {
         },
         counterView: {
             default: css`
-                ${tokens.counterColor}: var(--inverse-text-primary);
-                ${tokens.counterBackground}: var(--surface-solid-default);
+                ${tokens.counterColor}: ${inverseTextPrimary};
+                ${tokens.counterBackground}: ${surfaceSolidDefault};
             `,
             accent: css`
-                ${tokens.counterColor}: var(--on-dark-text-primary);
-                ${tokens.counterBackground}: var(--surface-accent);
+                ${tokens.counterColor}: ${onDarkTextPrimary};
+                ${tokens.counterBackground}: ${surfaceAccent};
             `,
             positive: css`
-                ${tokens.counterColor}: var(--on-dark-text-primary);
-                ${tokens.counterBackground}: var(--surface-positive);
+                ${tokens.counterColor}: ${onDarkTextPrimary};
+                ${tokens.counterBackground}: ${surfacePositive};
             `,
             negative: css`
-                ${tokens.counterColor}: var(--on-dark-text-primary);
-                ${tokens.counterBackground}: var(--surface-negative);
+                ${tokens.counterColor}: ${onDarkTextPrimary};
+                ${tokens.counterBackground}: ${surfaceNegative};
             `
         }
     }

package/dist/emotion/es/components/Badge/Badge.clear.config.js

@@ -1,3 +1,4 @@
+import { textAccent, textNegative, textPositive, textPrimary } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { css, badgeTokens } from '@salutejs/plasma-new-hope/emotion';
 import { pilled, sizeS } from './Badge.config.common';
 export const config = {
@@ -8,16 +9,16 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${badgeTokens.color}: var(--text-primary);
+                ${badgeTokens.color}: ${textPrimary};
             `,
             accent: css`
-                ${badgeTokens.color}: var(--text-accent);
+                ${badgeTokens.color}: ${textAccent};
             `,
             positive: css`
-                ${badgeTokens.color}: var(--text-positive);
+                ${badgeTokens.color}: ${textPositive};
             `,
             negative: css`
-                ${badgeTokens.color}: var(--text-negative);
+                ${badgeTokens.color}: ${textNegative};
             `
         },
         size: {

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

@@ -1,3 +1,4 @@
+import { inverseTextPrimary, onDarkTextPrimary, surfaceAccent, surfaceClear, surfaceNegative, surfacePositive, surfaceSolidDefault, textAccent, textNegative, textPositive, textPrimary } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { css, badgeTokens } from '@salutejs/plasma-new-hope/emotion';
 import { pilled, sizeS } from './Badge.config.common';
 export const config = {
@@ -8,31 +9,31 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${badgeTokens.color}: var(--inverse-text-primary);
-                ${badgeTokens.background}: var(--surface-solid-default);
+                ${badgeTokens.color}: ${inverseTextPrimary};
+                ${badgeTokens.background}: ${surfaceSolidDefault};
 
-                ${badgeTokens.colorClear}: var(--text-primary);
+                ${badgeTokens.colorClear}: ${textPrimary};
             `,
             accent: css`
-                ${badgeTokens.color}: var(--on-dark-text-primary);
-                ${badgeTokens.background}: var(--surface-accent);
+                ${badgeTokens.color}: ${onDarkTextPrimary};
+                ${badgeTokens.background}: ${surfaceAccent};
 
-                ${badgeTokens.colorTransparent}: var(--text-accent);
-                ${badgeTokens.colorClear}: var(--text-accent);
+                ${badgeTokens.colorTransparent}: ${textAccent};
+                ${badgeTokens.colorClear}: ${textAccent};
             `,
             positive: css`
-                ${badgeTokens.color}: var(--on-dark-text-primary);
-                ${badgeTokens.background}: var(--surface-positive);
+                ${badgeTokens.color}: ${onDarkTextPrimary};
+                ${badgeTokens.background}: ${surfacePositive};
 
-                ${badgeTokens.colorTransparent}: var(--text-positive);
-                ${badgeTokens.colorClear}: var(--text-positive);
+                ${badgeTokens.colorTransparent}: ${textPositive};
+                ${badgeTokens.colorClear}: ${textPositive};
             `,
             negative: css`
-                ${badgeTokens.color}: var(--on-dark-text-primary);
-                ${badgeTokens.background}: var(--surface-negative);
+                ${badgeTokens.color}: ${onDarkTextPrimary};
+                ${badgeTokens.background}: ${surfaceNegative};
 
-                ${badgeTokens.colorTransparent}: var(--text-negative);
-                ${badgeTokens.colorClear}: var(--text-negative);
+                ${badgeTokens.colorTransparent}: ${textNegative};
+                ${badgeTokens.colorClear}: ${textNegative};
             `
         },
         size: {
@@ -50,7 +51,7 @@ export const config = {
         },
         clear: {
             true: css`
-                ${badgeTokens.backgroundClear}: var(--surface-clear);
+                ${badgeTokens.backgroundClear}: ${surfaceClear};
             `
         }
     }

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

@@ -1,3 +1,4 @@
+import { bodyS, bodySBold, surfaceAccent, textAccent, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { css, breadcrumbsTokens } from '@salutejs/plasma-new-hope/emotion';
 export const config = {
     defaults: {
@@ -7,23 +8,23 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${breadcrumbsTokens.breadcrumbsColor}: var(--text-accent);
-                ${breadcrumbsTokens.breadcrumbsColorText}: var(--text-primary);
-                ${breadcrumbsTokens.breadcrumbsColorSeparator}: var(--text-secondary);
+                ${breadcrumbsTokens.breadcrumbsColor}: ${textAccent};
+                ${breadcrumbsTokens.breadcrumbsColorText}: ${textPrimary};
+                ${breadcrumbsTokens.breadcrumbsColorSeparator}: ${textSecondary};
                 ${breadcrumbsTokens.breadcrumbsOpacity}: 1;
-                ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: var(--surface-accent);
+                ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: ${surfaceAccent};
             `
         },
         size: {
             s: css`
                 ${breadcrumbsTokens.breadcrumbsGap}: 0.25rem;
 
-                ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-s-font-size);
-                ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-s-bold-weight);
-                ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyS.fontFamily};
+                ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyS.fontSize};
+                ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyS.fontStyle};
+                ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodySBold.fontWeight};
+                ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyS.letterSpacing};
+                ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyS.lineHeight};
             `
         }
     }