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

package/dist/emotion/cjs/components/Slider/Slider.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,64 +19,64 @@ const config = {
     variations: {
         view: {
             default: (0, _emotion.css)`
-                ${_emotion.sliderTokens.labelColor}: var(--text-primary);
+                ${_emotion.sliderTokens.labelColor}: ${_sdds_cs.textPrimary};
 
-                ${_emotion.sliderTokens.rangeValueColor}: var(--text-secondary);
+                ${_emotion.sliderTokens.rangeValueColor}: ${_sdds_cs.textSecondary};
 
-                ${_emotion.sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary);
-                ${_emotion.sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card);
-                ${_emotion.sliderTokens.thumbFocusBorderColor}: var(--surface-solid-default);
+                ${_emotion.sliderTokens.thumbBorderColor}: ${_sdds_cs.surfaceSolidTertiary};
+                ${_emotion.sliderTokens.thumbBackgroundColor}: ${_sdds_cs.onLightSurfaceSolidCard};
+                ${_emotion.sliderTokens.thumbFocusBorderColor}: ${_sdds_cs.surfaceSolidDefault};
 
-                ${_emotion.sliderTokens.railBackgroundColor}: var(--surface-solid-primary);
+                ${_emotion.sliderTokens.railBackgroundColor}: ${_sdds_cs.surfaceSolidPrimary};
 
-                ${_emotion.sliderTokens.fillColor}: var(--surface-solid-default);
+                ${_emotion.sliderTokens.fillColor}: ${_sdds_cs.surfaceSolidDefault};
 
-                ${_emotion.sliderTokens.tickDotColor}: var(--surface-solid-primary);
-                ${_emotion.sliderTokens.tickDotFilledColor}: var(--surface-solid-default);
+                ${_emotion.sliderTokens.tickDotColor}: ${_sdds_cs.surfaceSolidPrimary};
+                ${_emotion.sliderTokens.tickDotFilledColor}: ${_sdds_cs.surfaceSolidDefault};
 
-                ${_emotion.sliderTokens.textFieldCaretColor}: var(--text-accent);
-                ${_emotion.sliderTokens.textFieldColor}: var(--text-primary);
-                ${_emotion.sliderTokens.textFiledFocusColor}: var(--text-primary);
-                ${_emotion.sliderTokens.textFieldPlaceholderColor}: var(--text-secondary);
+                ${_emotion.sliderTokens.textFieldCaretColor}: ${_sdds_cs.textAccent};
+                ${_emotion.sliderTokens.textFieldColor}: ${_sdds_cs.textPrimary};
+                ${_emotion.sliderTokens.textFiledFocusColor}: ${_sdds_cs.textPrimary};
+                ${_emotion.sliderTokens.textFieldPlaceholderColor}: ${_sdds_cs.textSecondary};
 
-                ${_emotion.sliderTokens.textFieldBorderColor}: var(--outline-solid-primary);
-                ${_emotion.sliderTokens.textFieldBorderColorFocus}: var(--outline-accent);
-                ${_emotion.sliderTokens.textFieldBorderColorHover}: var(--outline-solid-primary-hover);
+                ${_emotion.sliderTokens.textFieldBorderColor}: ${_sdds_cs.outlineSolidPrimary};
+                ${_emotion.sliderTokens.textFieldBorderColorFocus}: ${_sdds_cs.outlineAccent};
+                ${_emotion.sliderTokens.textFieldBorderColorHover}: ${_sdds_cs.outlineSolidPrimaryHover};
 
-                ${_emotion.sliderTokens.textFieldBackgroundColor}: var(--surface-solid-card);
-                ${_emotion.sliderTokens.textFieldBackgroundColorHover}: var(--surface-solid-card);
-                ${_emotion.sliderTokens.textFieldBackgroundColorFocus}: var(--surface-solid-card-active);
+                ${_emotion.sliderTokens.textFieldBackgroundColor}: ${_sdds_cs.surfaceSolidCard};
+                ${_emotion.sliderTokens.textFieldBackgroundColorHover}: ${_sdds_cs.surfaceSolidCard};
+                ${_emotion.sliderTokens.textFieldBackgroundColorFocus}: ${_sdds_cs.surfaceSolidCardActive};
             `,
             accent: (0, _emotion.css)`
-                ${_emotion.sliderTokens.labelColor}: var(--text-primary);
+                ${_emotion.sliderTokens.labelColor}: ${_sdds_cs.textPrimary};
 
-                ${_emotion.sliderTokens.rangeValueColor}: var(--text-secondary);
+                ${_emotion.sliderTokens.rangeValueColor}: ${_sdds_cs.textSecondary};
 
-                ${_emotion.sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary);
-                ${_emotion.sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card);
-                ${_emotion.sliderTokens.thumbFocusBorderColor}: var(--surface-accent);
+                ${_emotion.sliderTokens.thumbBorderColor}: ${_sdds_cs.surfaceSolidTertiary};
+                ${_emotion.sliderTokens.thumbBackgroundColor}: ${_sdds_cs.onLightSurfaceSolidCard};
+                ${_emotion.sliderTokens.thumbFocusBorderColor}: ${_sdds_cs.surfaceAccent};
 
-                ${_emotion.sliderTokens.railBackgroundColor}: var(--surface-solid-primary);
+                ${_emotion.sliderTokens.railBackgroundColor}: ${_sdds_cs.surfaceSolidPrimary};
 
-                ${_emotion.sliderTokens.fillColor}: var(--surface-accent);
+                ${_emotion.sliderTokens.fillColor}: ${_sdds_cs.surfaceAccent};
 
-                ${_emotion.sliderTokens.tickDotColor}: var(--surface-solid-primary);
-                ${_emotion.sliderTokens.tickDotFilledColor}: var(--surface-accent);
+                ${_emotion.sliderTokens.tickDotColor}: ${_sdds_cs.surfaceSolidPrimary};
+                ${_emotion.sliderTokens.tickDotFilledColor}: ${_sdds_cs.surfaceAccent};
 
-                ${_emotion.sliderTokens.textFieldColor}: var(--text-secondary);
+                ${_emotion.sliderTokens.textFieldColor}: ${_sdds_cs.textSecondary};
 
-                ${_emotion.sliderTokens.textFieldCaretColor}: var(--text-accent);
-                ${_emotion.sliderTokens.textFieldColor}: var(--text-primary);
-                ${_emotion.sliderTokens.textFiledFocusColor}: var(--text-primary);
-                ${_emotion.sliderTokens.textFieldPlaceholderColor}: var(--text-secondary);
+                ${_emotion.sliderTokens.textFieldCaretColor}: ${_sdds_cs.textAccent};
+                ${_emotion.sliderTokens.textFieldColor}: ${_sdds_cs.textPrimary};
+                ${_emotion.sliderTokens.textFiledFocusColor}: ${_sdds_cs.textPrimary};
+                ${_emotion.sliderTokens.textFieldPlaceholderColor}: ${_sdds_cs.textSecondary};
 
-                ${_emotion.sliderTokens.textFieldBorderColor}: var(--outline-solid-primary);
-                ${_emotion.sliderTokens.textFieldBorderColorFocus}: var(--outline-accent);
-                ${_emotion.sliderTokens.textFieldBorderColorHover}: var(--outline-solid-primary-hover);
+                ${_emotion.sliderTokens.textFieldBorderColor}: ${_sdds_cs.outlineSolidPrimary};
+                ${_emotion.sliderTokens.textFieldBorderColorFocus}: ${_sdds_cs.outlineAccent};
+                ${_emotion.sliderTokens.textFieldBorderColorHover}: ${_sdds_cs.outlineSolidPrimaryHover};
 
-                ${_emotion.sliderTokens.textFieldBackgroundColor}: var(--surface-solid-card);
-                ${_emotion.sliderTokens.textFieldBackgroundColorHover}: var(--surface-solid-card);
-                ${_emotion.sliderTokens.textFieldBackgroundColorFocus}: var(--surface-solid-card-active);
+                ${_emotion.sliderTokens.textFieldBackgroundColor}: ${_sdds_cs.surfaceSolidCard};
+                ${_emotion.sliderTokens.textFieldBackgroundColorHover}: ${_sdds_cs.surfaceSolidCard};
+                ${_emotion.sliderTokens.textFieldBackgroundColorFocus}: ${_sdds_cs.surfaceSolidCardActive};
             `
         },
         size: {
@@ -89,24 +90,24 @@ const config = {
                 ${_emotion.sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem;
                 ${_emotion.sliderTokens.labelWrapperVerticalMargin}: 0.625rem;
 
-                ${_emotion.sliderTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_emotion.sliderTokens.labelFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_emotion.sliderTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_emotion.sliderTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_emotion.sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_emotion.sliderTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_emotion.sliderTokens.labelFontFamily}: ${_sdds_cs.bodyS.fontFamily};
+                ${_emotion.sliderTokens.labelFontSize}: ${_sdds_cs.bodyS.fontSize};
+                ${_emotion.sliderTokens.labelFontStyle}: ${_sdds_cs.bodyS.fontStyle};
+                ${_emotion.sliderTokens.labelFontWeight}: ${_sdds_cs.bodyS.fontWeight};
+                ${_emotion.sliderTokens.labelLetterSpacing}: ${_sdds_cs.bodyS.letterSpacing};
+                ${_emotion.sliderTokens.labelLineHeight}: ${_sdds_cs.bodyS.lineHeight};
 
                 ${_emotion.sliderTokens.rangeValueHorizontalMargin}: 0.5rem;
                 ${_emotion.sliderTokens.rangeValueBottomOffset}: 0.625rem;
                 ${_emotion.sliderTokens.rangeValueHorizontalOffset}: 0.625rem;
                 ${_emotion.sliderTokens.rangeValueVerticalMargin}: 0.5rem;
 
-                ${_emotion.sliderTokens.valueFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_emotion.sliderTokens.valueFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_emotion.sliderTokens.valueFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_emotion.sliderTokens.valueFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_emotion.sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_emotion.sliderTokens.valueLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_emotion.sliderTokens.valueFontFamily}: ${_sdds_cs.bodyXS.fontFamily};
+                ${_emotion.sliderTokens.valueFontSize}: ${_sdds_cs.bodyXS.fontSize};
+                ${_emotion.sliderTokens.valueFontStyle}: ${_sdds_cs.bodyXS.fontStyle};
+                ${_emotion.sliderTokens.valueFontWeight}: ${_sdds_cs.bodyXS.fontWeight};
+                ${_emotion.sliderTokens.valueLetterSpacing}: ${_sdds_cs.bodyXS.letterSpacing};
+                ${_emotion.sliderTokens.valueLineHeight}: ${_sdds_cs.bodyXS.lineHeight};
 
                 ${_emotion.sliderTokens.tickSize}: 0.5rem;
 
@@ -121,12 +122,12 @@ const config = {
                 ${_emotion.sliderTokens.textFieldHeight}: 2.5rem;
                 ${_emotion.sliderTokens.textFieldPadding}: 0.5rem 1rem 0.5rem 1rem;
                 ${_emotion.sliderTokens.textFieldBorderRadius}: 0.625rem;
-                ${_emotion.sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_emotion.sliderTokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_emotion.sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_emotion.sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_emotion.sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_emotion.sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_emotion.sliderTokens.textFieldFontFamily}: ${_sdds_cs.bodyS.fontFamily};
+                ${_emotion.sliderTokens.textFieldFontSize}: ${_sdds_cs.bodyS.fontSize};
+                ${_emotion.sliderTokens.textFieldFontStyle}: ${_sdds_cs.bodyS.fontStyle};
+                ${_emotion.sliderTokens.textFieldFontWeight}: ${_sdds_cs.bodyS.fontWeight};
+                ${_emotion.sliderTokens.textFieldLetterSpacing}: ${_sdds_cs.bodyS.letterSpacing};
+                ${_emotion.sliderTokens.textFieldLineHeight}: ${_sdds_cs.bodyS.lineHeight};
             `
         },
         pointerSize: {

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "config", {
         return config;
     }
 });
+const _sdds_cs = require("@salutejs/sdds-themes/tokens/sdds_cs");
 const _emotion = require("@salutejs/plasma-new-hope/emotion");
 const config = {
     defaults: {
@@ -17,28 +18,28 @@ const config = {
     variations: {
         view: {
             default: (0, _emotion.css)`
-                --plasma-spinner-color: var(--text-primary);
+                --plasma-spinner-color: ${_sdds_cs.textPrimary};
             `,
             secondary: (0, _emotion.css)`
-                --plasma-spinner-color: var(--text-secondary);
+                --plasma-spinner-color: ${_sdds_cs.textSecondary};
             `,
             tertiary: (0, _emotion.css)`
-                --plasma-spinner-color: var(--text-tertiary);
+                --plasma-spinner-color: ${_sdds_cs.textTertiary};
             `,
             paragraph: (0, _emotion.css)`
                 --plasma-spinner-color: var(--text-paragraph);
             `,
             accent: (0, _emotion.css)`
-                --plasma-spinner-color: var(--text-accent);
+                --plasma-spinner-color: ${_sdds_cs.textAccent};
             `,
             positive: (0, _emotion.css)`
-                --plasma-spinner-color: var(--text-positive);
+                --plasma-spinner-color: ${_sdds_cs.textPositive};
             `,
             warning: (0, _emotion.css)`
-                --plasma-spinner-color: var(--text-warning);
+                --plasma-spinner-color: ${_sdds_cs.textWarning};
             `,
             negative: (0, _emotion.css)`
-                --plasma-spinner-color: var(--text-negative);
+                --plasma-spinner-color: ${_sdds_cs.textNegative};
             `
         }
     }

package/dist/emotion/cjs/components/Steps/StepItem.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: {
@@ -16,14 +17,14 @@ const config = {
     variations: {
         view: {
             default: (0, _emotion.css)`
-                ${_emotion.stepsTokens.completedIndicatorColor}: var(--inverse-text-primary);
-                ${_emotion.stepsTokens.completedIndicatorColorHover}: var(--inverse-text-primary);
-                ${_emotion.stepsTokens.completedIndicatorBackground}: var(--surface-solid-default);
-                ${_emotion.stepsTokens.completedIndicatorBackgroundHover}: var(--surface-solid-default-hover);
-                ${_emotion.stepsTokens.completedTitleColor}: var(--text-primary);
-                ${_emotion.stepsTokens.completedTitleColorHover}: var(--text-primary-hover);
+                ${_emotion.stepsTokens.completedIndicatorColor}: ${_sdds_cs.inverseTextPrimary};
+                ${_emotion.stepsTokens.completedIndicatorColorHover}: ${_sdds_cs.inverseTextPrimary};
+                ${_emotion.stepsTokens.completedIndicatorBackground}: ${_sdds_cs.surfaceSolidDefault};
+                ${_emotion.stepsTokens.completedIndicatorBackgroundHover}: ${_sdds_cs.surfaceSolidDefaultHover};
+                ${_emotion.stepsTokens.completedTitleColor}: ${_sdds_cs.textPrimary};
+                ${_emotion.stepsTokens.completedTitleColorHover}: ${_sdds_cs.textPrimaryHover};
 
-                ${_emotion.stepsTokens.dividerColor}: var(--surface-solid-default);
+                ${_emotion.stepsTokens.dividerColor}: ${_sdds_cs.surfaceSolidDefault};
             `
         }
     }

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "config", {
         return config;
     }
 });
+const _sdds_cs = require("@salutejs/sdds-themes/tokens/sdds_cs");
 const _emotion = require("@salutejs/plasma-new-hope/emotion");
 const config = {
     defaults: {
@@ -17,44 +18,44 @@ const config = {
     variations: {
         view: {
             default: (0, _emotion.css)`
-                ${_emotion.stepsTokens.loaderSpinnerColor}: var(--on-dark-surface-solid-primary);
+                ${_emotion.stepsTokens.loaderSpinnerColor}: ${_sdds_cs.onDarkSurfaceSolidPrimary};
 
-                ${_emotion.stepsTokens.activeTitleColor}: var(--text-primary);
-                ${_emotion.stepsTokens.activeTitleColorHover}: var(--text-primary-hover);
-                ${_emotion.stepsTokens.activeIndicatorColor}: var(--inverse-text-primary);
-                ${_emotion.stepsTokens.activeIndicatorBackground}: var(--on-dark-surface-solid-primary);
+                ${_emotion.stepsTokens.activeTitleColor}: ${_sdds_cs.textPrimary};
+                ${_emotion.stepsTokens.activeTitleColorHover}: ${_sdds_cs.textPrimaryHover};
+                ${_emotion.stepsTokens.activeIndicatorColor}: ${_sdds_cs.inverseTextPrimary};
+                ${_emotion.stepsTokens.activeIndicatorBackground}: ${_sdds_cs.onDarkSurfaceSolidPrimary};
 
-                ${_emotion.stepsTokens.bulletActiveIndicatorBorder}: solid var(--on-dark-surface-solid-primary);
-                ${_emotion.stepsTokens.bulletActiveBackground}: var(--surface-clear);
+                ${_emotion.stepsTokens.bulletActiveIndicatorBorder}: solid ${_sdds_cs.onDarkSurfaceSolidPrimary};
+                ${_emotion.stepsTokens.bulletActiveBackground}: ${_sdds_cs.surfaceClear};
 
-                ${_emotion.stepsTokens.completedTitleColor}: var(--text-accent);
-                ${_emotion.stepsTokens.completedTitleColorHover}: var(--text-accent-hover);
-                ${_emotion.stepsTokens.completedIndicatorColor}: var(--text-positive);
-                ${_emotion.stepsTokens.completedIndicatorColorHover}: var(--text-positive-hover);
-                ${_emotion.stepsTokens.completedIndicatorBackground}: var(--surface-clear);
-                ${_emotion.stepsTokens.completedIndicatorBackgroundHover}: var(--surface-clear);
-                ${_emotion.stepsTokens.completedIndicatorBorder}: var(--surface-positive);
-                ${_emotion.stepsTokens.completedIndicatorBorderHover}: var(--surface-positive-hover);
+                ${_emotion.stepsTokens.completedTitleColor}: ${_sdds_cs.textAccent};
+                ${_emotion.stepsTokens.completedTitleColorHover}: ${_sdds_cs.textAccentHover};
+                ${_emotion.stepsTokens.completedIndicatorColor}: ${_sdds_cs.textPositive};
+                ${_emotion.stepsTokens.completedIndicatorColorHover}: ${_sdds_cs.textPositiveHover};
+                ${_emotion.stepsTokens.completedIndicatorBackground}: ${_sdds_cs.surfaceClear};
+                ${_emotion.stepsTokens.completedIndicatorBackgroundHover}: ${_sdds_cs.surfaceClear};
+                ${_emotion.stepsTokens.completedIndicatorBorder}: ${_sdds_cs.surfacePositive};
+                ${_emotion.stepsTokens.completedIndicatorBorderHover}: ${_sdds_cs.surfacePositiveHover};
 
-                ${_emotion.stepsTokens.completedBulletBorder}: var(--surface-positive);
-                ${_emotion.stepsTokens.completedBulletBorderHover}: var(--surface-positive-hover);
-                ${_emotion.stepsTokens.completedBulletBackground}: var(--surface-positive);
-                ${_emotion.stepsTokens.completedBulletBackgroundHover}: var(--surface-positive-hover);
+                ${_emotion.stepsTokens.completedBulletBorder}: ${_sdds_cs.surfacePositive};
+                ${_emotion.stepsTokens.completedBulletBorderHover}: ${_sdds_cs.surfacePositiveHover};
+                ${_emotion.stepsTokens.completedBulletBackground}: ${_sdds_cs.surfacePositive};
+                ${_emotion.stepsTokens.completedBulletBackgroundHover}: ${_sdds_cs.surfacePositiveHover};
 
-                ${_emotion.stepsTokens.inactiveTitleColor}: var(--text-primary);
-                ${_emotion.stepsTokens.inactiveTitleColorHover}: var(--text-primary-hover);
-                ${_emotion.stepsTokens.inactiveIndicatorColor}: var(--text-primary);
-                ${_emotion.stepsTokens.inactiveIndicatorColorHover}: var(--text-primary);
+                ${_emotion.stepsTokens.inactiveTitleColor}: ${_sdds_cs.textPrimary};
+                ${_emotion.stepsTokens.inactiveTitleColorHover}: ${_sdds_cs.textPrimaryHover};
+                ${_emotion.stepsTokens.inactiveIndicatorColor}: ${_sdds_cs.textPrimary};
+                ${_emotion.stepsTokens.inactiveIndicatorColorHover}: ${_sdds_cs.textPrimary};
 
-                ${_emotion.stepsTokens.inactiveIndicatorBackground}: var(--surface-solid-tertiary);
-                ${_emotion.stepsTokens.inactiveIndicatorBackgroundHover}: var(--surface-solid-tertiary-hover);
+                ${_emotion.stepsTokens.inactiveIndicatorBackground}: ${_sdds_cs.surfaceSolidTertiary};
+                ${_emotion.stepsTokens.inactiveIndicatorBackgroundHover}: ${_sdds_cs.surfaceSolidTertiaryHover};
 
-                ${_emotion.stepsTokens.contentColor}: var(--text-secondary);
-                ${_emotion.stepsTokens.focusColor}: var(--surface-accent);
+                ${_emotion.stepsTokens.contentColor}: ${_sdds_cs.textSecondary};
+                ${_emotion.stepsTokens.focusColor}: ${_sdds_cs.surfaceAccent};
 
-                ${_emotion.stepsTokens.dividerColor}: var(--surface-positive);
-                ${_emotion.stepsTokens.dividerGradientColor}: linear-gradient(90deg, var(--surface-positive) 35%, var(--on-dark-surface-solid-primary) 100%);
-                ${_emotion.stepsTokens.dividerVerticalGradientColor}: linear-gradient(180deg, var(--surface-positive) 35%, var(--on-dark-surface-solid-primary) 100%);
+                ${_emotion.stepsTokens.dividerColor}: ${_sdds_cs.surfacePositive};
+                ${_emotion.stepsTokens.dividerGradientColor}: linear-gradient(90deg, ${_sdds_cs.surfacePositive} 35%, ${_sdds_cs.onDarkSurfaceSolidPrimary} 100%);
+                ${_emotion.stepsTokens.dividerVerticalGradientColor}: linear-gradient(180deg, ${_sdds_cs.surfacePositive} 35%, ${_sdds_cs.onDarkSurfaceSolidPrimary} 100%);
 
                 ${_emotion.stepsTokens.disabledOpacity}: 0.4;
             `
@@ -72,33 +73,33 @@ const config = {
                 ${_emotion.stepsTokens.contentVerticalPadding}: 0.5rem;
                 ${_emotion.stepsTokens.verticalContentPaddingLeft}: 1rem;
 
-                ${_emotion.stepsTokens.indicatorFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_emotion.stepsTokens.indicatorFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_emotion.stepsTokens.indicatorFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_emotion.stepsTokens.indicatorFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_emotion.stepsTokens.indicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_emotion.stepsTokens.indicatorLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_emotion.stepsTokens.indicatorFontFamily}: ${_sdds_cs.bodyS.fontFamily};
+                ${_emotion.stepsTokens.indicatorFontSize}: ${_sdds_cs.bodyS.fontSize};
+                ${_emotion.stepsTokens.indicatorFontStyle}: ${_sdds_cs.bodyS.fontStyle};
+                ${_emotion.stepsTokens.indicatorFontWeight}: ${_sdds_cs.bodyS.fontWeight};
+                ${_emotion.stepsTokens.indicatorLetterSpacing}: ${_sdds_cs.bodyS.letterSpacing};
+                ${_emotion.stepsTokens.indicatorLineHeight}: ${_sdds_cs.bodyS.lineHeight};
 
-                ${_emotion.stepsTokens.activeIndicatorFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_emotion.stepsTokens.activeIndicatorFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_emotion.stepsTokens.activeIndicatorFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_emotion.stepsTokens.activeIndicatorFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_emotion.stepsTokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_emotion.stepsTokens.activeIndicatorLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_emotion.stepsTokens.activeIndicatorFontFamily}: ${_sdds_cs.bodyS.fontFamily};
+                ${_emotion.stepsTokens.activeIndicatorFontSize}: ${_sdds_cs.bodyS.fontSize};
+                ${_emotion.stepsTokens.activeIndicatorFontStyle}: ${_sdds_cs.bodyS.fontStyle};
+                ${_emotion.stepsTokens.activeIndicatorFontWeight}: ${_sdds_cs.bodyS.fontWeight};
+                ${_emotion.stepsTokens.activeIndicatorLetterSpacing}: ${_sdds_cs.bodyS.letterSpacing};
+                ${_emotion.stepsTokens.activeIndicatorLineHeight}: ${_sdds_cs.bodyS.lineHeight};
 
-                ${_emotion.stepsTokens.titleFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_emotion.stepsTokens.titleFontSize}: var(--plasma-typo-body-m-font-size);
-                ${_emotion.stepsTokens.titleFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_emotion.stepsTokens.titleFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${_emotion.stepsTokens.titleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_emotion.stepsTokens.titleLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_emotion.stepsTokens.titleFontFamily}: ${_sdds_cs.bodyM.fontFamily};
+                ${_emotion.stepsTokens.titleFontSize}: ${_sdds_cs.bodyM.fontSize};
+                ${_emotion.stepsTokens.titleFontStyle}: ${_sdds_cs.bodyM.fontStyle};
+                ${_emotion.stepsTokens.titleFontWeight}: ${_sdds_cs.bodyM.fontWeight};
+                ${_emotion.stepsTokens.titleLetterSpacing}: ${_sdds_cs.bodyM.letterSpacing};
+                ${_emotion.stepsTokens.titleLineHeight}: ${_sdds_cs.bodyM.lineHeight};
 
-                ${_emotion.stepsTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_emotion.stepsTokens.contentFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_emotion.stepsTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_emotion.stepsTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_emotion.stepsTokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_emotion.stepsTokens.contentLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_emotion.stepsTokens.contentFontFamily}: ${_sdds_cs.bodyS.fontFamily};
+                ${_emotion.stepsTokens.contentFontSize}: ${_sdds_cs.bodyS.fontSize};
+                ${_emotion.stepsTokens.contentFontStyle}: ${_sdds_cs.bodyS.fontStyle};
+                ${_emotion.stepsTokens.contentFontWeight}: ${_sdds_cs.bodyS.fontWeight};
+                ${_emotion.stepsTokens.contentLetterSpacing}: ${_sdds_cs.bodyS.letterSpacing};
+                ${_emotion.stepsTokens.contentLineHeight}: ${_sdds_cs.bodyS.lineHeight};
 
                 ${_emotion.stepsTokens.dividerThickness}: 0.125rem;
             `

package/dist/emotion/cjs/components/Switch/Switch.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: {
@@ -20,18 +21,18 @@ const config = {
     variations: {
         size: {
             s: (0, _emotion.css)`
-                ${_emotion.switchTokens.fontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_emotion.switchTokens.fontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_emotion.switchTokens.fontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${_emotion.switchTokens.lineHeight}: var(--plasma-typo-body-m-line-height);
-                ${_emotion.switchTokens.fontSize}: var(--plasma-typo-body-m-font-size);
-                ${_emotion.switchTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_emotion.switchTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_emotion.switchTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_emotion.switchTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_emotion.switchTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height);
-                ${_emotion.switchTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_emotion.switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${_emotion.switchTokens.fontFamily}: ${_sdds_cs.bodyM.fontFamily};
+                ${_emotion.switchTokens.fontStyle}: ${_sdds_cs.bodyM.fontStyle};
+                ${_emotion.switchTokens.fontWeight}: ${_sdds_cs.bodyM.fontWeight};
+                ${_emotion.switchTokens.lineHeight}: ${_sdds_cs.bodyM.lineHeight};
+                ${_emotion.switchTokens.fontSize}: ${_sdds_cs.bodyM.fontSize};
+                ${_emotion.switchTokens.letterSpacing}: ${_sdds_cs.bodyM.letterSpacing};
+                ${_emotion.switchTokens.descriptionFontFamily}: ${_sdds_cs.bodyS.fontFamily};
+                ${_emotion.switchTokens.descriptionFontStyle}: ${_sdds_cs.bodyS.fontStyle};
+                ${_emotion.switchTokens.descriptionFontWeight}: ${_sdds_cs.bodyS.fontWeight};
+                ${_emotion.switchTokens.descriptionLineHeight}: ${_sdds_cs.bodyS.lineHeight};
+                ${_emotion.switchTokens.descriptionFontSize}: ${_sdds_cs.bodyS.fontSize};
+                ${_emotion.switchTokens.descriptionLetterSpacing}: ${_sdds_cs.bodyXS.letterSpacing};
                 ${_emotion.switchTokens.verticalGap}: 0.25rem;
                 ${_emotion.switchTokens.labelOffset}: 0.75rem;
             `
@@ -60,21 +61,21 @@ const config = {
         },
         view: {
             default: (0, _emotion.css)`
-                ${_emotion.switchTokens.labelColor}: var(--text-primary);
-                ${_emotion.switchTokens.descriptionColor}: var(--text-secondary);
+                ${_emotion.switchTokens.labelColor}: ${_sdds_cs.textPrimary};
+                ${_emotion.switchTokens.descriptionColor}: ${_sdds_cs.textSecondary};
                 ${_emotion.switchTokens.descriptionMaxLines}: 2;
-                ${_emotion.switchTokens.trackBackgroundColorOn}: var(--surface-accent);
-                ${_emotion.switchTokens.trackBackgroundColorOnHover}: var(--surface-accent-hover);
-                ${_emotion.switchTokens.trackBackgroundColorOff}: var(--surface-solid-card);
-                ${_emotion.switchTokens.trackBackgroundColorOffHover}: var(--surface-solid-card-hover);
+                ${_emotion.switchTokens.trackBackgroundColorOn}: ${_sdds_cs.surfaceAccent};
+                ${_emotion.switchTokens.trackBackgroundColorOnHover}: ${_sdds_cs.surfaceAccentHover};
+                ${_emotion.switchTokens.trackBackgroundColorOff}: ${_sdds_cs.surfaceSolidCard};
+                ${_emotion.switchTokens.trackBackgroundColorOffHover}: ${_sdds_cs.surfaceSolidCardHover};
                 ${_emotion.switchTokens.trackBorderWidthOn}: 0;
                 ${_emotion.switchTokens.trackBorderWidthOff}: 0.125rem;
-                ${_emotion.switchTokens.trackBorderColorOn}: var(--outline-accent);
-                ${_emotion.switchTokens.trackBorderColorOnHover}: var(--outline-accent-hover);
-                ${_emotion.switchTokens.trackBorderColorOff}: var(--outline-solid-primary);
-                ${_emotion.switchTokens.trackBorderColorOffHover}: var(--outline-solid-primary-hover);
-                ${_emotion.switchTokens.thumbBackgroundColorOn}: var(--surface-solid-card);
-                ${_emotion.switchTokens.thumbBackgroundColorOff}: var(--surface-accent);
+                ${_emotion.switchTokens.trackBorderColorOn}: ${_sdds_cs.outlineAccent};
+                ${_emotion.switchTokens.trackBorderColorOnHover}: ${_sdds_cs.outlineAccentHover};
+                ${_emotion.switchTokens.trackBorderColorOff}: ${_sdds_cs.outlineSolidPrimary};
+                ${_emotion.switchTokens.trackBorderColorOffHover}: ${_sdds_cs.outlineSolidPrimaryHover};
+                ${_emotion.switchTokens.thumbBackgroundColorOn}: ${_sdds_cs.surfaceSolidCard};
+                ${_emotion.switchTokens.thumbBackgroundColorOff}: ${_sdds_cs.surfaceAccent};
                 ${_emotion.switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11);
             `
         },
@@ -85,7 +86,7 @@ const config = {
         },
         focused: {
             true: (0, _emotion.css)`
-                ${_emotion.switchTokens.trackFocusColor}: var(--surface-accent);
+                ${_emotion.switchTokens.trackFocusColor}: ${_sdds_cs.surfaceAccent};
             `
         }
     }