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

package/dist/emotion/cjs/components/Select/Select.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,90 +20,90 @@ const config = {
     variations: {
         view: {
             default: (0, _emotion.css)`
-                ${_emotion.selectTokens.textFieldColor}: var(--text-primary);
-                ${_emotion.selectTokens.textFieldPlaceholderColor}: var(--text-secondary);
-                ${_emotion.selectTokens.textFieldBackgroundColor}: var(--surface-solid-card);
-                ${_emotion.selectTokens.textFieldBackgroundColorFocus}: var(--surface-solid-card);
-                ${_emotion.selectTokens.textFieldLabelColor}: var(--text-primary);
-                ${_emotion.selectTokens.textFieldLeftHelperColor}: var(--text-secondary);
-                ${_emotion.selectTokens.textFieldContentSlotColor}: var(--text-secondary);
-                ${_emotion.selectTokens.textFieldBorderColor}: var(--outline-solid-primary);
-                ${_emotion.selectTokens.textFieldBorderColorHover}: var(--outline-solid-primary-hover);
-                ${_emotion.selectTokens.textFieldBorderColorFocus}: var(--outline-accent);
+                ${_emotion.selectTokens.textFieldColor}: ${_sdds_cs.textPrimary};
+                ${_emotion.selectTokens.textFieldPlaceholderColor}: ${_sdds_cs.textSecondary};
+                ${_emotion.selectTokens.textFieldBackgroundColor}: ${_sdds_cs.surfaceSolidCard};
+                ${_emotion.selectTokens.textFieldBackgroundColorFocus}: ${_sdds_cs.surfaceSolidCard};
+                ${_emotion.selectTokens.textFieldLabelColor}: ${_sdds_cs.textPrimary};
+                ${_emotion.selectTokens.textFieldLeftHelperColor}: ${_sdds_cs.textSecondary};
+                ${_emotion.selectTokens.textFieldContentSlotColor}: ${_sdds_cs.textSecondary};
+                ${_emotion.selectTokens.textFieldBorderColor}: ${_sdds_cs.outlineSolidPrimary};
+                ${_emotion.selectTokens.textFieldBorderColorHover}: ${_sdds_cs.outlineSolidPrimaryHover};
+                ${_emotion.selectTokens.textFieldBorderColorFocus}: ${_sdds_cs.outlineAccent};
 
-                ${_emotion.selectTokens.textFieldIndicatorColor}: var(--surface-negative);
-                ${_emotion.selectTokens.textFieldOptionalColor}: var(--text-tertiary);
+                ${_emotion.selectTokens.textFieldIndicatorColor}: ${_sdds_cs.surfaceNegative};
+                ${_emotion.selectTokens.textFieldOptionalColor}: ${_sdds_cs.textTertiary};
 
-                ${_emotion.selectTokens.buttonColor}: var(--text-accent);
-                ${_emotion.selectTokens.buttonColorHover}: var(--text-accent-minor);
-                ${_emotion.selectTokens.buttonColorActive}: var(--text-accent-active);
-                ${_emotion.selectTokens.buttonArrowColor}: var(--text-primary);
-                ${_emotion.selectTokens.buttonArrowColorHover}: var(--text-primary-hover);
-                ${_emotion.selectTokens.buttonArrowColorActive}: var(--text-primary-hover);
-                ${_emotion.selectTokens.buttonBackgroundColor}: var(--surface-solid-primary);
-                ${_emotion.selectTokens.buttonBackgroundColorHover}: var(--surface-solid-primary-hover);
-                ${_emotion.selectTokens.buttonBackgroundColorActive}: var(--surface-solid-primary-active);
+                ${_emotion.selectTokens.buttonColor}: ${_sdds_cs.textAccent};
+                ${_emotion.selectTokens.buttonColorHover}: ${_sdds_cs.textAccentMinor};
+                ${_emotion.selectTokens.buttonColorActive}: ${_sdds_cs.textAccentActive};
+                ${_emotion.selectTokens.buttonArrowColor}: ${_sdds_cs.textPrimary};
+                ${_emotion.selectTokens.buttonArrowColorHover}: ${_sdds_cs.textPrimaryHover};
+                ${_emotion.selectTokens.buttonArrowColorActive}: ${_sdds_cs.textPrimaryHover};
+                ${_emotion.selectTokens.buttonBackgroundColor}: ${_sdds_cs.surfaceSolidPrimary};
+                ${_emotion.selectTokens.buttonBackgroundColorHover}: ${_sdds_cs.surfaceSolidPrimaryHover};
+                ${_emotion.selectTokens.buttonBackgroundColorActive}: ${_sdds_cs.surfaceSolidPrimaryActive};
 
-                ${_emotion.selectTokens.disclosureIconColor}: var(--text-accent);
-                ${_emotion.selectTokens.disclosureIconColorHover}: var(--text-accent-minor);
-                ${_emotion.selectTokens.itemBackgroundHover}: var(--surface-transparent-accent);
+                ${_emotion.selectTokens.disclosureIconColor}: ${_sdds_cs.textAccent};
+                ${_emotion.selectTokens.disclosureIconColorHover}: ${_sdds_cs.textAccentMinor};
+                ${_emotion.selectTokens.itemBackgroundHover}: ${_sdds_cs.surfaceTransparentAccent};
                 ${_emotion.selectTokens.itemDisabledOpacity}: 1;
-                ${_emotion.selectTokens.itemDisabledColor}: var(--text-secondary);
+                ${_emotion.selectTokens.itemDisabledColor}: ${_sdds_cs.textSecondary};
 
-                ${_emotion.selectTokens.dropdownBorderColor}: var(--outline-solid-primary);
-                ${_emotion.selectTokens.checkboxIconColor}: var(--text-primary);
+                ${_emotion.selectTokens.dropdownBorderColor}: ${_sdds_cs.outlineSolidPrimary};
+                ${_emotion.selectTokens.checkboxIconColor}: ${_sdds_cs.textPrimary};
 
-                ${_emotion.selectTokens.dividerColor}: var(--surface-solid-primary);
+                ${_emotion.selectTokens.dividerColor}: ${_sdds_cs.surfaceSolidPrimary};
 
-                ${_emotion.selectTokens.itemIconColor}: var(--text-accent);
+                ${_emotion.selectTokens.itemIconColor}: ${_sdds_cs.textAccent};
 
-                ${_emotion.selectTokens.checkboxFillColor}: var(--text-accent);
-                ${_emotion.selectTokens.checkboxIconColor}: var(--on-dark-text-primary);
+                ${_emotion.selectTokens.checkboxFillColor}: ${_sdds_cs.textAccent};
+                ${_emotion.selectTokens.checkboxIconColor}: ${_sdds_cs.onDarkTextPrimary};
                 ${_emotion.selectTokens.checkboxTriggerBorderCheckedColor}: none;
-                ${_emotion.selectTokens.checkboxTriggerBorderColor}: var(--outline-accent);
+                ${_emotion.selectTokens.checkboxTriggerBorderColor}: ${_sdds_cs.outlineAccent};
             `,
             negative: (0, _emotion.css)`
-                ${_emotion.selectTokens.textFieldColor}: var(--text-primary);
-                ${_emotion.selectTokens.textFieldPlaceholderColor}: var(--text-secondary);
-                ${_emotion.selectTokens.textFieldBackgroundColor}: var(--surface-solid-card);
-                ${_emotion.selectTokens.textFieldBackgroundColorFocus}: var(--surface-solid-card);
-                ${_emotion.selectTokens.textFieldLabelColor}: var(--text-primary);
-                ${_emotion.selectTokens.textFieldLeftHelperColor}: var(--text-negative);
-                ${_emotion.selectTokens.textFieldContentSlotColor}: var(--text-secondary);
-                ${_emotion.selectTokens.textFieldBorderColor}: var(--outline-negative);
-                ${_emotion.selectTokens.textFieldBorderColorHover}: var(--outline-negative-hover);
-                ${_emotion.selectTokens.textFieldBorderColorFocus}: var(--outline-accent);
+                ${_emotion.selectTokens.textFieldColor}: ${_sdds_cs.textPrimary};
+                ${_emotion.selectTokens.textFieldPlaceholderColor}: ${_sdds_cs.textSecondary};
+                ${_emotion.selectTokens.textFieldBackgroundColor}: ${_sdds_cs.surfaceSolidCard};
+                ${_emotion.selectTokens.textFieldBackgroundColorFocus}: ${_sdds_cs.surfaceSolidCard};
+                ${_emotion.selectTokens.textFieldLabelColor}: ${_sdds_cs.textPrimary};
+                ${_emotion.selectTokens.textFieldLeftHelperColor}: ${_sdds_cs.textNegative};
+                ${_emotion.selectTokens.textFieldContentSlotColor}: ${_sdds_cs.textSecondary};
+                ${_emotion.selectTokens.textFieldBorderColor}: ${_sdds_cs.outlineNegative};
+                ${_emotion.selectTokens.textFieldBorderColorHover}: ${_sdds_cs.outlineNegativeHover};
+                ${_emotion.selectTokens.textFieldBorderColorFocus}: ${_sdds_cs.outlineAccent};
 
-                ${_emotion.selectTokens.textFieldIndicatorColor}: var(--surface-negative);
-                ${_emotion.selectTokens.textFieldOptionalColor}: var(--text-tertiary);
+                ${_emotion.selectTokens.textFieldIndicatorColor}: ${_sdds_cs.surfaceNegative};
+                ${_emotion.selectTokens.textFieldOptionalColor}: ${_sdds_cs.textTertiary};
 
-                ${_emotion.selectTokens.buttonColor}: var(--text-accent);
-                ${_emotion.selectTokens.buttonColorHover}: var(--text-accent-minor);
-                ${_emotion.selectTokens.buttonColorActive}: var(--text-accent-active);
-                ${_emotion.selectTokens.buttonArrowColor}: var(--text-primary);
-                ${_emotion.selectTokens.buttonArrowColorHover}: var(--text-primary-hover);
-                ${_emotion.selectTokens.buttonArrowColorActive}: var(--text-primary-hover);
-                ${_emotion.selectTokens.buttonBackgroundColor}: var(--surface-solid-primary);
-                ${_emotion.selectTokens.buttonBackgroundColorHover}: var(--surface-solid-primary-hover);
-                ${_emotion.selectTokens.buttonBackgroundColorActive}: var(--surface-solid-primary-active);
+                ${_emotion.selectTokens.buttonColor}: ${_sdds_cs.textAccent};
+                ${_emotion.selectTokens.buttonColorHover}: ${_sdds_cs.textAccentMinor};
+                ${_emotion.selectTokens.buttonColorActive}: ${_sdds_cs.textAccentActive};
+                ${_emotion.selectTokens.buttonArrowColor}: ${_sdds_cs.textPrimary};
+                ${_emotion.selectTokens.buttonArrowColorHover}: ${_sdds_cs.textPrimaryHover};
+                ${_emotion.selectTokens.buttonArrowColorActive}: ${_sdds_cs.textPrimaryHover};
+                ${_emotion.selectTokens.buttonBackgroundColor}: ${_sdds_cs.surfaceSolidPrimary};
+                ${_emotion.selectTokens.buttonBackgroundColorHover}: ${_sdds_cs.surfaceSolidPrimaryHover};
+                ${_emotion.selectTokens.buttonBackgroundColorActive}: ${_sdds_cs.surfaceSolidPrimaryActive};
 
-                ${_emotion.selectTokens.disclosureIconColor}: var(--text-accent);
-                ${_emotion.selectTokens.disclosureIconColorHover}: var(--text-accent-minor);
-                ${_emotion.selectTokens.itemBackgroundHover}: var(--surface-transparent-accent);
+                ${_emotion.selectTokens.disclosureIconColor}: ${_sdds_cs.textAccent};
+                ${_emotion.selectTokens.disclosureIconColorHover}: ${_sdds_cs.textAccentMinor};
+                ${_emotion.selectTokens.itemBackgroundHover}: ${_sdds_cs.surfaceTransparentAccent};
                 ${_emotion.selectTokens.itemDisabledOpacity}: 1;
-                ${_emotion.selectTokens.itemDisabledColor}: var(--text-secondary);
+                ${_emotion.selectTokens.itemDisabledColor}: ${_sdds_cs.textSecondary};
 
-                ${_emotion.selectTokens.dropdownBorderColor}: var(--outline-solid-primary);
-                ${_emotion.selectTokens.checkboxIconColor}: var(--text-accent);
+                ${_emotion.selectTokens.dropdownBorderColor}: ${_sdds_cs.outlineSolidPrimary};
+                ${_emotion.selectTokens.checkboxIconColor}: ${_sdds_cs.textAccent};
 
-                ${_emotion.selectTokens.dividerColor}: var(--surface-solid-primary);
+                ${_emotion.selectTokens.dividerColor}: ${_sdds_cs.surfaceSolidPrimary};
 
-                ${_emotion.selectTokens.itemIconColor}: var(--text-accent);
+                ${_emotion.selectTokens.itemIconColor}: ${_sdds_cs.textAccent};
 
-                ${_emotion.selectTokens.checkboxFillColor}: var(--text-accent);
-                ${_emotion.selectTokens.checkboxIconColor}: var(--on-dark-text-primary);
+                ${_emotion.selectTokens.checkboxFillColor}: ${_sdds_cs.textAccent};
+                ${_emotion.selectTokens.checkboxIconColor}: ${_sdds_cs.onDarkTextPrimary};
                 ${_emotion.selectTokens.checkboxTriggerBorderCheckedColor}: none;
-                ${_emotion.selectTokens.checkboxTriggerBorderColor}: var(--outline-accent);
+                ${_emotion.selectTokens.checkboxTriggerBorderColor}: ${_sdds_cs.outlineAccent};
             `
         },
         size: {
@@ -119,28 +120,28 @@ const config = {
                 ${_emotion.selectTokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0;
                 ${_emotion.selectTokens.textFieldTextAfterMargin}: 0 0 0 0.25rem;
 
-                ${_emotion.selectTokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_emotion.selectTokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size);
-                ${_emotion.selectTokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_emotion.selectTokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${_emotion.selectTokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_emotion.selectTokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_emotion.selectTokens.textFieldFontFamily}: ${_sdds_cs.bodyM.fontFamily};
+                ${_emotion.selectTokens.textFieldFontSize}: ${_sdds_cs.bodyM.fontSize};
+                ${_emotion.selectTokens.textFieldFontStyle}: ${_sdds_cs.bodyM.fontStyle};
+                ${_emotion.selectTokens.textFieldFontWeight}: ${_sdds_cs.bodyM.fontWeight};
+                ${_emotion.selectTokens.textFieldLetterSpacing}: ${_sdds_cs.bodyM.letterSpacing};
+                ${_emotion.selectTokens.textFieldLineHeight}: ${_sdds_cs.bodyM.lineHeight};
 
                 ${_emotion.selectTokens.textFieldLabelOffset}: 0.5rem;
-                ${_emotion.selectTokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_emotion.selectTokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_emotion.selectTokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_emotion.selectTokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_emotion.selectTokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_emotion.selectTokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_emotion.selectTokens.textFieldLabelFontFamily}: ${_sdds_cs.bodyS.fontFamily};
+                ${_emotion.selectTokens.textFieldLabelFontSize}: ${_sdds_cs.bodyS.fontSize};
+                ${_emotion.selectTokens.textFieldLabelFontStyle}: ${_sdds_cs.bodyS.fontStyle};
+                ${_emotion.selectTokens.textFieldLabelFontWeight}: ${_sdds_cs.bodyS.fontWeight};
+                ${_emotion.selectTokens.textFieldLabelLetterSpacing}: ${_sdds_cs.bodyS.letterSpacing};
+                ${_emotion.selectTokens.textFieldLabelLineHeight}: ${_sdds_cs.bodyS.lineHeight};
 
-                ${_emotion.selectTokens.textFieldLeftHelperPadding}: 0.25rem 0 0 0;
-                ${_emotion.selectTokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_emotion.selectTokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_emotion.selectTokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_emotion.selectTokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_emotion.selectTokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_emotion.selectTokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_emotion.selectTokens.textFieldLeftHelperOffset}: 0.25rem 0 0 0;
+                ${_emotion.selectTokens.textFieldLeftHelperFontFamily}: ${_sdds_cs.bodyS.fontFamily};
+                ${_emotion.selectTokens.textFieldLeftHelperFontSize}: ${_sdds_cs.bodyS.fontSize};
+                ${_emotion.selectTokens.textFieldLeftHelperFontStyle}: ${_sdds_cs.bodyS.fontStyle};
+                ${_emotion.selectTokens.textFieldLeftHelperFontWeight}: ${_sdds_cs.bodyS.fontWeight};
+                ${_emotion.selectTokens.textFieldLeftHelperLetterSpacing}: ${_sdds_cs.bodyS.letterSpacing};
+                ${_emotion.selectTokens.textFieldLeftHelperLineHeight}: ${_sdds_cs.bodyS.lineHeight};
 
                 ${_emotion.selectTokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0;
                 ${_emotion.selectTokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0;
@@ -163,12 +164,12 @@ const config = {
                 ${_emotion.selectTokens.textFieldChipClearContentMarginLeft}: 0.375rem;
                 ${_emotion.selectTokens.textFieldChipClearContentMarginRight}: 0rem;
                 ${_emotion.selectTokens.textFieldChipCloseIconSize}: 1rem;
-                ${_emotion.selectTokens.textFieldChipFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_emotion.selectTokens.textFieldChipFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_emotion.selectTokens.textFieldChipFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_emotion.selectTokens.textFieldChipFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_emotion.selectTokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_emotion.selectTokens.textFieldChipLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_emotion.selectTokens.textFieldChipFontFamily}: ${_sdds_cs.bodyS.fontFamily};
+                ${_emotion.selectTokens.textFieldChipFontSize}: ${_sdds_cs.bodyS.fontSize};
+                ${_emotion.selectTokens.textFieldChipFontStyle}: ${_sdds_cs.bodyS.fontStyle};
+                ${_emotion.selectTokens.textFieldChipFontWeight}: ${_sdds_cs.bodyS.fontWeight};
+                ${_emotion.selectTokens.textFieldChipLetterSpacing}: ${_sdds_cs.bodyS.letterSpacing};
+                ${_emotion.selectTokens.textFieldChipLineHeight}: ${_sdds_cs.bodyS.lineHeight};
 
                 ${_emotion.selectTokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem;
                 ${_emotion.selectTokens.targetHeight}: 2.5rem;
@@ -194,19 +195,19 @@ const config = {
                 ${_emotion.selectTokens.cellPaddingRightContent}: 0rem;
                 ${_emotion.selectTokens.cellTextboxGap}: 0.125rem;
                 ${_emotion.selectTokens.cellGap}: 0.375rem;
-                ${_emotion.selectTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_emotion.selectTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size);
-                ${_emotion.selectTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_emotion.selectTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${_emotion.selectTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_emotion.selectTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_emotion.selectTokens.cellTitleFontFamily}: ${_sdds_cs.bodyM.fontFamily};
+                ${_emotion.selectTokens.cellTitleFontSize}: ${_sdds_cs.bodyM.fontSize};
+                ${_emotion.selectTokens.cellTitleFontStyle}: ${_sdds_cs.bodyM.fontStyle};
+                ${_emotion.selectTokens.cellTitleFontWeight}: ${_sdds_cs.bodyM.fontWeight};
+                ${_emotion.selectTokens.cellTitleLetterSpacing}: ${_sdds_cs.bodyM.letterSpacing};
+                ${_emotion.selectTokens.cellTitleLineHeight}: ${_sdds_cs.bodyM.lineHeight};
 
-                ${_emotion.selectTokens.fontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_emotion.selectTokens.fontSize}: var(--plasma-typo-body-m-font-size);
-                ${_emotion.selectTokens.fontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_emotion.selectTokens.fontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${_emotion.selectTokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_emotion.selectTokens.fontLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_emotion.selectTokens.fontFamily}: ${_sdds_cs.bodyM.fontFamily};
+                ${_emotion.selectTokens.fontSize}: ${_sdds_cs.bodyM.fontSize};
+                ${_emotion.selectTokens.fontStyle}: ${_sdds_cs.bodyM.fontStyle};
+                ${_emotion.selectTokens.fontWeight}: ${_sdds_cs.bodyM.fontWeight};
+                ${_emotion.selectTokens.fontLetterSpacing}: ${_sdds_cs.bodyM.letterSpacing};
+                ${_emotion.selectTokens.fontLineHeight}: ${_sdds_cs.bodyM.lineHeight};
 
                 ${_emotion.selectTokens.checkboxTriggerSize}: 1.25rem;
                 ${_emotion.selectTokens.checkboxTriggerSizeTight}: 0.875rem;
@@ -227,46 +228,46 @@ const config = {
         labelPlacement: {
             inner: (0, _emotion.css)`
                 ${_emotion.selectTokens.textFieldPlaceholderColor}: var(--plasma-input-label-color, var(--plasma-input-placeholder-color, var(--plasma-colors-secondary)));
-                ${_emotion.selectTokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_emotion.selectTokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_emotion.selectTokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_emotion.selectTokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_emotion.selectTokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_emotion.selectTokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_emotion.selectTokens.textFieldLabelInnerFontFamily}: ${_sdds_cs.bodyXS.fontFamily};
+                ${_emotion.selectTokens.textFieldLabelInnerFontSize}: ${_sdds_cs.bodyXS.fontSize};
+                ${_emotion.selectTokens.textFieldLabelInnerFontStyle}: ${_sdds_cs.bodyXS.fontStyle};
+                ${_emotion.selectTokens.textFieldLabelInnerFontWeight}: ${_sdds_cs.bodyXS.fontWeight};
+                ${_emotion.selectTokens.textFieldLabelInnerLetterSpacing}: ${_sdds_cs.bodyXS.letterSpacing};
+                ${_emotion.selectTokens.textFieldLabelInnerLineHeight}: ${_sdds_cs.bodyXS.lineHeight};
             `,
             outer: (0, _emotion.css)``
         },
         chipView: {
             default: (0, _emotion.css)`
-                ${_emotion.selectTokens.textFieldChipColor}: var(--inverse-text-primary);
-                ${_emotion.selectTokens.textFieldChipColorHover}: var(--inverse-text-primary);
-                ${_emotion.selectTokens.textFieldChipBackground}: var(--surface-solid-default);
-                ${_emotion.selectTokens.textFieldChipBackgroundHover}: var(--surface-solid-default-hover);
-                ${_emotion.selectTokens.textFieldChipCloseIconColor}: var(--inverse-text-secondary);
-                ${_emotion.selectTokens.textFieldChipCloseIconColorHover}: var(--inverse-text-primary);
+                ${_emotion.selectTokens.textFieldChipColor}: ${_sdds_cs.inverseTextPrimary};
+                ${_emotion.selectTokens.textFieldChipColorHover}: ${_sdds_cs.inverseTextPrimary};
+                ${_emotion.selectTokens.textFieldChipBackground}: ${_sdds_cs.surfaceSolidDefault};
+                ${_emotion.selectTokens.textFieldChipBackgroundHover}: ${_sdds_cs.surfaceSolidDefaultHover};
+                ${_emotion.selectTokens.textFieldChipCloseIconColor}: ${_sdds_cs.inverseTextSecondary};
+                ${_emotion.selectTokens.textFieldChipCloseIconColorHover}: ${_sdds_cs.inverseTextPrimary};
                 ${_emotion.selectTokens.textFieldChipOpacityReadonly}: 1;
             `
         },
         disabled: {
             true: (0, _emotion.css)`
                 ${_emotion.selectTokens.textFieldDisabledOpacity}: 1;
-                ${_emotion.selectTokens.textFieldBackgroundColor}: var(--surface-solid-primary);
-                ${_emotion.selectTokens.textFieldBackgroundColorFocus}: var(--surface-solid-primary);
-                ${_emotion.selectTokens.textFieldBorderColor}: var(--surface-solid-primary);
-                ${_emotion.selectTokens.textFieldBorderColorHover}: var(--surface-solid-primary);
-                ${_emotion.selectTokens.textFieldBorderColorFocus}: var(--surface-solid-primary);
-                ${_emotion.selectTokens.textFieldColor}: var(--text-secondary);
+                ${_emotion.selectTokens.textFieldBackgroundColor}: ${_sdds_cs.surfaceSolidPrimary};
+                ${_emotion.selectTokens.textFieldBackgroundColorFocus}: ${_sdds_cs.surfaceSolidPrimary};
+                ${_emotion.selectTokens.textFieldBorderColor}: ${_sdds_cs.surfaceSolidPrimary};
+                ${_emotion.selectTokens.textFieldBorderColorHover}: ${_sdds_cs.surfaceSolidPrimary};
+                ${_emotion.selectTokens.textFieldBorderColorFocus}: ${_sdds_cs.surfaceSolidPrimary};
+                ${_emotion.selectTokens.textFieldColor}: ${_sdds_cs.textSecondary};
             `
         },
         readOnly: {
             true: (0, _emotion.css)`
-                ${_emotion.selectTokens.textFieldColorReadOnly}: var(--text-primary);
-                ${_emotion.selectTokens.textFieldBackgroundColorReadOnly}: var(--surface-clear);
-                ${_emotion.selectTokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary);
-                ${_emotion.selectTokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary);
-                ${_emotion.selectTokens.textFieldLabelColorReadOnly}: var(--text-secondary);
+                ${_emotion.selectTokens.textFieldColorReadOnly}: ${_sdds_cs.textPrimary};
+                ${_emotion.selectTokens.textFieldBackgroundColorReadOnly}: ${_sdds_cs.surfaceClear};
+                ${_emotion.selectTokens.textFieldPlaceholderColorReadOnly}: ${_sdds_cs.textSecondary};
+                ${_emotion.selectTokens.textFieldLeftHelperColorReadOnly}: ${_sdds_cs.textSecondary};
+                ${_emotion.selectTokens.textFieldLabelColorReadOnly}: ${_sdds_cs.textSecondary};
                 ${_emotion.selectTokens.disclosureIconOpacityReadOnly}: 0.4;
-                ${_emotion.selectTokens.textFieldTitleCaptionColorReadOnly}: var(--text-secondary);
+                ${_emotion.selectTokens.textFieldTitleCaptionColorReadOnly}: ${_sdds_cs.textSecondary};
                 ${_emotion.selectTokens.textFieldBorderColor}: transparent;
                 ${_emotion.selectTokens.textFieldBorderWidth}: 0;
             `

package/dist/emotion/cjs/components/Sheet/Sheet.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,8 +19,8 @@ const config = {
             default: (0, _emotion.css)`
                 ${_emotion.sheetTokens.sheetOverlayColor}: var(--overlay-soft);
                 ${_emotion.sheetTokens.sheetOverlayWithBlurColor}: var(--overlay-blur);
-                ${_emotion.sheetTokens.contentBackgroundColor}: var(--surface-solid-card);
-                ${_emotion.sheetTokens.handleBackgroundColor}: var(--surface-solid-tertiary);
+                ${_emotion.sheetTokens.contentBackgroundColor}: ${_sdds_cs.surfaceSolidCard};
+                ${_emotion.sheetTokens.handleBackgroundColor}: ${_sdds_cs.surfaceSolidTertiary};
             `
         },
         handlePlacement: {

package/dist/emotion/cjs/components/Skeleton/LineSkeleton.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: {
@@ -29,72 +30,72 @@ const config = {
         },
         size: {
             bodyL: (0, _emotion.css)`
-                ${_emotion.skeletonTokens.lineHeight}: var(--plasma-typo-body-l-line-height);
-                ${_emotion.skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-l-font-size);
+                ${_emotion.skeletonTokens.lineHeight}: ${_sdds_cs.bodyL.lineHeight};
+                ${_emotion.skeletonTokens.visibleLineHeight}: ${_sdds_cs.bodyL.fontSize};
             `,
             bodyM: (0, _emotion.css)`
-                ${_emotion.skeletonTokens.lineHeight}: var(--plasma-typo-body-m-line-height);
-                ${_emotion.skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-m-font-size);
+                ${_emotion.skeletonTokens.lineHeight}: ${_sdds_cs.bodyM.lineHeight};
+                ${_emotion.skeletonTokens.visibleLineHeight}: ${_sdds_cs.bodyM.fontSize};
             `,
             bodyS: (0, _emotion.css)`
-                ${_emotion.skeletonTokens.lineHeight}: var(--plasma-typo-body-s-line-height);
-                ${_emotion.skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-s-font-size);
+                ${_emotion.skeletonTokens.lineHeight}: ${_sdds_cs.bodyS.lineHeight};
+                ${_emotion.skeletonTokens.visibleLineHeight}: ${_sdds_cs.bodyS.fontSize};
             `,
             bodyXS: (0, _emotion.css)`
-                ${_emotion.skeletonTokens.lineHeight}: var(--plasma-typo-body-xs-line-height);
-                ${_emotion.skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-xs-font-size);
+                ${_emotion.skeletonTokens.lineHeight}: ${_sdds_cs.bodyXS.lineHeight};
+                ${_emotion.skeletonTokens.visibleLineHeight}: ${_sdds_cs.bodyXS.fontSize};
             `,
             bodyXXS: (0, _emotion.css)`
-                ${_emotion.skeletonTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height);
-                ${_emotion.skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-xxs-font-size);
+                ${_emotion.skeletonTokens.lineHeight}: ${_sdds_cs.bodyXXS.lineHeight};
+                ${_emotion.skeletonTokens.visibleLineHeight}: ${_sdds_cs.bodyXXS.fontSize};
             `,
             dsplL: (0, _emotion.css)`
-                ${_emotion.skeletonTokens.lineHeight}: var(--plasma-typo-dspl-l-line-height);
-                ${_emotion.skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-l-font-size);
+                ${_emotion.skeletonTokens.lineHeight}: ${_sdds_cs.dsplL.lineHeight};
+                ${_emotion.skeletonTokens.visibleLineHeight}: ${_sdds_cs.dsplL.fontSize};
             `,
             dsplM: (0, _emotion.css)`
-                ${_emotion.skeletonTokens.lineHeight}: var(--plasma-typo-dspl-m-line-height);
-                ${_emotion.skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-m-font-size);
+                ${_emotion.skeletonTokens.lineHeight}: ${_sdds_cs.dsplM.lineHeight};
+                ${_emotion.skeletonTokens.visibleLineHeight}: ${_sdds_cs.dsplM.fontSize};
             `,
             dsplS: (0, _emotion.css)`
-                ${_emotion.skeletonTokens.lineHeight}: var(--plasma-typo-dspl-s-line-height);
-                ${_emotion.skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-s-font-size);
+                ${_emotion.skeletonTokens.lineHeight}: ${_sdds_cs.dsplS.lineHeight};
+                ${_emotion.skeletonTokens.visibleLineHeight}: ${_sdds_cs.dsplS.fontSize};
             `,
             h1: (0, _emotion.css)`
-                ${_emotion.skeletonTokens.lineHeight}: var(--plasma-typo-h1-line-height);
-                ${_emotion.skeletonTokens.visibleLineHeight}: var(--plasma-typo-h1-font-size);
+                ${_emotion.skeletonTokens.lineHeight}: ${_sdds_cs.h1.lineHeight};
+                ${_emotion.skeletonTokens.visibleLineHeight}: ${_sdds_cs.h1.fontSize};
             `,
             h2: (0, _emotion.css)`
-                ${_emotion.skeletonTokens.lineHeight}: var(--plasma-typo-h2-line-height);
-                ${_emotion.skeletonTokens.visibleLineHeight}: var(--plasma-typo-h2-font-size);
+                ${_emotion.skeletonTokens.lineHeight}: ${_sdds_cs.h2.lineHeight};
+                ${_emotion.skeletonTokens.visibleLineHeight}: ${_sdds_cs.h2.fontSize};
             `,
             h3: (0, _emotion.css)`
-                ${_emotion.skeletonTokens.lineHeight}: var(--plasma-typo-h3-line-height);
-                ${_emotion.skeletonTokens.visibleLineHeight}: var(--plasma-typo-h3-font-size);
+                ${_emotion.skeletonTokens.lineHeight}: ${_sdds_cs.h3.lineHeight};
+                ${_emotion.skeletonTokens.visibleLineHeight}: ${_sdds_cs.h3.fontSize};
             `,
             h4: (0, _emotion.css)`
-                ${_emotion.skeletonTokens.lineHeight}: var(--plasma-typo-h4-line-height);
-                ${_emotion.skeletonTokens.visibleLineHeight}: var(--plasma-typo-h4-font-size);
+                ${_emotion.skeletonTokens.lineHeight}: ${_sdds_cs.h4.lineHeight};
+                ${_emotion.skeletonTokens.visibleLineHeight}: ${_sdds_cs.h4.fontSize};
             `,
             h5: (0, _emotion.css)`
-                ${_emotion.skeletonTokens.lineHeight}: var(--plasma-typo-h5-line-height);
-                ${_emotion.skeletonTokens.visibleLineHeight}: var(--plasma-typo-h5-font-size);
+                ${_emotion.skeletonTokens.lineHeight}: ${_sdds_cs.h5.lineHeight};
+                ${_emotion.skeletonTokens.visibleLineHeight}: ${_sdds_cs.h5.fontSize};
             `,
             textL: (0, _emotion.css)`
-                ${_emotion.skeletonTokens.lineHeight}: var(--plasma-typo-text-l-line-height);
-                ${_emotion.skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-l-font-size);
+                ${_emotion.skeletonTokens.lineHeight}: ${_sdds_cs.textL.lineHeight};
+                ${_emotion.skeletonTokens.visibleLineHeight}: ${_sdds_cs.textL.fontSize};
             `,
             textM: (0, _emotion.css)`
-                ${_emotion.skeletonTokens.lineHeight}: var(--plasma-typo-text-m-line-height);
-                ${_emotion.skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-m-font-size);
+                ${_emotion.skeletonTokens.lineHeight}: ${_sdds_cs.textM.lineHeight};
+                ${_emotion.skeletonTokens.visibleLineHeight}: ${_sdds_cs.textM.fontSize};
             `,
             textS: (0, _emotion.css)`
-                ${_emotion.skeletonTokens.lineHeight}: var(--plasma-typo-text-s-line-height);
-                ${_emotion.skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-s-font-size);
+                ${_emotion.skeletonTokens.lineHeight}: ${_sdds_cs.textS.lineHeight};
+                ${_emotion.skeletonTokens.visibleLineHeight}: ${_sdds_cs.textS.fontSize};
             `,
             textXS: (0, _emotion.css)`
-                ${_emotion.skeletonTokens.lineHeight}: var(--plasma-typo-text-xs-line-height);
-                ${_emotion.skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-xs-font-size);
+                ${_emotion.skeletonTokens.lineHeight}: ${_sdds_cs.textXS.lineHeight};
+                ${_emotion.skeletonTokens.visibleLineHeight}: ${_sdds_cs.textXS.fontSize};
             `
         }
     }