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

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

@@ -1,3 +1,4 @@
+import { bodyS, bodyXS, onLightSurfaceSolidCard, outlineAccent, outlineSolidPrimary, outlineSolidPrimaryHover, surfaceAccent, surfaceSolidCard, surfaceSolidCardActive, surfaceSolidDefault, surfaceSolidPrimary, surfaceSolidTertiary, textAccent, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { css, sliderTokens } from '@salutejs/plasma-new-hope/emotion';
 export const config = {
     defaults: {
@@ -8,64 +9,64 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${sliderTokens.labelColor}: var(--text-primary);
+                ${sliderTokens.labelColor}: ${textPrimary};
 
-                ${sliderTokens.rangeValueColor}: var(--text-secondary);
+                ${sliderTokens.rangeValueColor}: ${textSecondary};
 
-                ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary);
-                ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card);
-                ${sliderTokens.thumbFocusBorderColor}: var(--surface-solid-default);
+                ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary};
+                ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard};
+                ${sliderTokens.thumbFocusBorderColor}: ${surfaceSolidDefault};
 
-                ${sliderTokens.railBackgroundColor}: var(--surface-solid-primary);
+                ${sliderTokens.railBackgroundColor}: ${surfaceSolidPrimary};
 
-                ${sliderTokens.fillColor}: var(--surface-solid-default);
+                ${sliderTokens.fillColor}: ${surfaceSolidDefault};
 
-                ${sliderTokens.tickDotColor}: var(--surface-solid-primary);
-                ${sliderTokens.tickDotFilledColor}: var(--surface-solid-default);
+                ${sliderTokens.tickDotColor}: ${surfaceSolidPrimary};
+                ${sliderTokens.tickDotFilledColor}: ${surfaceSolidDefault};
 
-                ${sliderTokens.textFieldCaretColor}: var(--text-accent);
-                ${sliderTokens.textFieldColor}: var(--text-primary);
-                ${sliderTokens.textFiledFocusColor}: var(--text-primary);
-                ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary);
+                ${sliderTokens.textFieldCaretColor}: ${textAccent};
+                ${sliderTokens.textFieldColor}: ${textPrimary};
+                ${sliderTokens.textFiledFocusColor}: ${textPrimary};
+                ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary};
 
-                ${sliderTokens.textFieldBorderColor}: var(--outline-solid-primary);
-                ${sliderTokens.textFieldBorderColorFocus}: var(--outline-accent);
-                ${sliderTokens.textFieldBorderColorHover}: var(--outline-solid-primary-hover);
+                ${sliderTokens.textFieldBorderColor}: ${outlineSolidPrimary};
+                ${sliderTokens.textFieldBorderColorFocus}: ${outlineAccent};
+                ${sliderTokens.textFieldBorderColorHover}: ${outlineSolidPrimaryHover};
 
-                ${sliderTokens.textFieldBackgroundColor}: var(--surface-solid-card);
-                ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-solid-card);
-                ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-solid-card-active);
+                ${sliderTokens.textFieldBackgroundColor}: ${surfaceSolidCard};
+                ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceSolidCard};
+                ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceSolidCardActive};
             `,
             accent: css`
-                ${sliderTokens.labelColor}: var(--text-primary);
+                ${sliderTokens.labelColor}: ${textPrimary};
 
-                ${sliderTokens.rangeValueColor}: var(--text-secondary);
+                ${sliderTokens.rangeValueColor}: ${textSecondary};
 
-                ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary);
-                ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card);
-                ${sliderTokens.thumbFocusBorderColor}: var(--surface-accent);
+                ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary};
+                ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard};
+                ${sliderTokens.thumbFocusBorderColor}: ${surfaceAccent};
 
-                ${sliderTokens.railBackgroundColor}: var(--surface-solid-primary);
+                ${sliderTokens.railBackgroundColor}: ${surfaceSolidPrimary};
 
-                ${sliderTokens.fillColor}: var(--surface-accent);
+                ${sliderTokens.fillColor}: ${surfaceAccent};
 
-                ${sliderTokens.tickDotColor}: var(--surface-solid-primary);
-                ${sliderTokens.tickDotFilledColor}: var(--surface-accent);
+                ${sliderTokens.tickDotColor}: ${surfaceSolidPrimary};
+                ${sliderTokens.tickDotFilledColor}: ${surfaceAccent};
 
-                ${sliderTokens.textFieldColor}: var(--text-secondary);
+                ${sliderTokens.textFieldColor}: ${textSecondary};
 
-                ${sliderTokens.textFieldCaretColor}: var(--text-accent);
-                ${sliderTokens.textFieldColor}: var(--text-primary);
-                ${sliderTokens.textFiledFocusColor}: var(--text-primary);
-                ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary);
+                ${sliderTokens.textFieldCaretColor}: ${textAccent};
+                ${sliderTokens.textFieldColor}: ${textPrimary};
+                ${sliderTokens.textFiledFocusColor}: ${textPrimary};
+                ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary};
 
-                ${sliderTokens.textFieldBorderColor}: var(--outline-solid-primary);
-                ${sliderTokens.textFieldBorderColorFocus}: var(--outline-accent);
-                ${sliderTokens.textFieldBorderColorHover}: var(--outline-solid-primary-hover);
+                ${sliderTokens.textFieldBorderColor}: ${outlineSolidPrimary};
+                ${sliderTokens.textFieldBorderColorFocus}: ${outlineAccent};
+                ${sliderTokens.textFieldBorderColorHover}: ${outlineSolidPrimaryHover};
 
-                ${sliderTokens.textFieldBackgroundColor}: var(--surface-solid-card);
-                ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-solid-card);
-                ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-solid-card-active);
+                ${sliderTokens.textFieldBackgroundColor}: ${surfaceSolidCard};
+                ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceSolidCard};
+                ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceSolidCardActive};
             `
         },
         size: {
@@ -79,24 +80,24 @@ export const config = {
                 ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem;
                 ${sliderTokens.labelWrapperVerticalMargin}: 0.625rem;
 
-                ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${sliderTokens.labelFontSize}: var(--plasma-typo-body-s-font-size);
-                ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${sliderTokens.labelFontFamily}: ${bodyS.fontFamily};
+                ${sliderTokens.labelFontSize}: ${bodyS.fontSize};
+                ${sliderTokens.labelFontStyle}: ${bodyS.fontStyle};
+                ${sliderTokens.labelFontWeight}: ${bodyS.fontWeight};
+                ${sliderTokens.labelLetterSpacing}: ${bodyS.letterSpacing};
+                ${sliderTokens.labelLineHeight}: ${bodyS.lineHeight};
 
                 ${sliderTokens.rangeValueHorizontalMargin}: 0.5rem;
                 ${sliderTokens.rangeValueBottomOffset}: 0.625rem;
                 ${sliderTokens.rangeValueHorizontalOffset}: 0.625rem;
                 ${sliderTokens.rangeValueVerticalMargin}: 0.5rem;
 
-                ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${sliderTokens.valueFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${sliderTokens.valueFontFamily}: ${bodyXS.fontFamily};
+                ${sliderTokens.valueFontSize}: ${bodyXS.fontSize};
+                ${sliderTokens.valueFontStyle}: ${bodyXS.fontStyle};
+                ${sliderTokens.valueFontWeight}: ${bodyXS.fontWeight};
+                ${sliderTokens.valueLetterSpacing}: ${bodyXS.letterSpacing};
+                ${sliderTokens.valueLineHeight}: ${bodyXS.lineHeight};
 
                 ${sliderTokens.tickSize}: 0.5rem;
 
@@ -111,12 +112,12 @@ export const config = {
                 ${sliderTokens.textFieldHeight}: 2.5rem;
                 ${sliderTokens.textFieldPadding}: 0.5rem 1rem 0.5rem 1rem;
                 ${sliderTokens.textFieldBorderRadius}: 0.625rem;
-                ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size);
-                ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${sliderTokens.textFieldFontFamily}: ${bodyS.fontFamily};
+                ${sliderTokens.textFieldFontSize}: ${bodyS.fontSize};
+                ${sliderTokens.textFieldFontStyle}: ${bodyS.fontStyle};
+                ${sliderTokens.textFieldFontWeight}: ${bodyS.fontWeight};
+                ${sliderTokens.textFieldLetterSpacing}: ${bodyS.letterSpacing};
+                ${sliderTokens.textFieldLineHeight}: ${bodyS.lineHeight};
             `
         },
         pointerSize: {

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

@@ -1,3 +1,4 @@
+import { textAccent, textNegative, textPositive, textPrimary, textSecondary, textTertiary, textWarning } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { css } from '@salutejs/plasma-new-hope/emotion';
 export const config = {
     defaults: {
@@ -7,28 +8,28 @@ export const config = {
     variations: {
         view: {
             default: css`
-                --plasma-spinner-color: var(--text-primary);
+                --plasma-spinner-color: ${textPrimary};
             `,
             secondary: css`
-                --plasma-spinner-color: var(--text-secondary);
+                --plasma-spinner-color: ${textSecondary};
             `,
             tertiary: css`
-                --plasma-spinner-color: var(--text-tertiary);
+                --plasma-spinner-color: ${textTertiary};
             `,
             paragraph: css`
                 --plasma-spinner-color: var(--text-paragraph);
             `,
             accent: css`
-                --plasma-spinner-color: var(--text-accent);
+                --plasma-spinner-color: ${textAccent};
             `,
             positive: css`
-                --plasma-spinner-color: var(--text-positive);
+                --plasma-spinner-color: ${textPositive};
             `,
             warning: css`
-                --plasma-spinner-color: var(--text-warning);
+                --plasma-spinner-color: ${textWarning};
             `,
             negative: css`
-                --plasma-spinner-color: var(--text-negative);
+                --plasma-spinner-color: ${textNegative};
             `
         }
     }

package/dist/emotion/es/components/Steps/StepItem.config.js

@@ -1,3 +1,4 @@
+import { inverseTextPrimary, surfaceSolidDefault, surfaceSolidDefaultHover, textPrimary, textPrimaryHover } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { css, stepsTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
 export const config = {
     defaults: {
@@ -6,14 +7,14 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${tokens.completedIndicatorColor}: var(--inverse-text-primary);
-                ${tokens.completedIndicatorColorHover}: var(--inverse-text-primary);
-                ${tokens.completedIndicatorBackground}: var(--surface-solid-default);
-                ${tokens.completedIndicatorBackgroundHover}: var(--surface-solid-default-hover);
-                ${tokens.completedTitleColor}: var(--text-primary);
-                ${tokens.completedTitleColorHover}: var(--text-primary-hover);
+                ${tokens.completedIndicatorColor}: ${inverseTextPrimary};
+                ${tokens.completedIndicatorColorHover}: ${inverseTextPrimary};
+                ${tokens.completedIndicatorBackground}: ${surfaceSolidDefault};
+                ${tokens.completedIndicatorBackgroundHover}: ${surfaceSolidDefaultHover};
+                ${tokens.completedTitleColor}: ${textPrimary};
+                ${tokens.completedTitleColorHover}: ${textPrimaryHover};
 
-                ${tokens.dividerColor}: var(--surface-solid-default);
+                ${tokens.dividerColor}: ${surfaceSolidDefault};
             `
         }
     }

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

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

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

@@ -1,3 +1,4 @@
+import { bodyM, bodyS, bodyXS, outlineAccent, outlineAccentHover, outlineSolidPrimary, outlineSolidPrimaryHover, surfaceAccent, surfaceAccentHover, surfaceSolidCard, surfaceSolidCardHover, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { css, switchTokens } from '@salutejs/plasma-new-hope/emotion';
 export const config = {
     defaults: {
@@ -10,18 +11,18 @@ export const config = {
     variations: {
         size: {
             s: css`
-                ${switchTokens.fontFamily}: var(--plasma-typo-body-m-font-family);
-                ${switchTokens.fontStyle}: var(--plasma-typo-body-m-font-style);
-                ${switchTokens.fontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${switchTokens.lineHeight}: var(--plasma-typo-body-m-line-height);
-                ${switchTokens.fontSize}: var(--plasma-typo-body-m-font-size);
-                ${switchTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height);
-                ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size);
-                ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${switchTokens.fontFamily}: ${bodyM.fontFamily};
+                ${switchTokens.fontStyle}: ${bodyM.fontStyle};
+                ${switchTokens.fontWeight}: ${bodyM.fontWeight};
+                ${switchTokens.lineHeight}: ${bodyM.lineHeight};
+                ${switchTokens.fontSize}: ${bodyM.fontSize};
+                ${switchTokens.letterSpacing}: ${bodyM.letterSpacing};
+                ${switchTokens.descriptionFontFamily}: ${bodyS.fontFamily};
+                ${switchTokens.descriptionFontStyle}: ${bodyS.fontStyle};
+                ${switchTokens.descriptionFontWeight}: ${bodyS.fontWeight};
+                ${switchTokens.descriptionLineHeight}: ${bodyS.lineHeight};
+                ${switchTokens.descriptionFontSize}: ${bodyS.fontSize};
+                ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing};
                 ${switchTokens.verticalGap}: 0.25rem;
                 ${switchTokens.labelOffset}: 0.75rem;
             `
@@ -50,21 +51,21 @@ export const config = {
         },
         view: {
             default: css`
-                ${switchTokens.labelColor}: var(--text-primary);
-                ${switchTokens.descriptionColor}: var(--text-secondary);
+                ${switchTokens.labelColor}: ${textPrimary};
+                ${switchTokens.descriptionColor}: ${textSecondary};
                 ${switchTokens.descriptionMaxLines}: 2;
-                ${switchTokens.trackBackgroundColorOn}: var(--surface-accent);
-                ${switchTokens.trackBackgroundColorOnHover}: var(--surface-accent-hover);
-                ${switchTokens.trackBackgroundColorOff}: var(--surface-solid-card);
-                ${switchTokens.trackBackgroundColorOffHover}: var(--surface-solid-card-hover);
+                ${switchTokens.trackBackgroundColorOn}: ${surfaceAccent};
+                ${switchTokens.trackBackgroundColorOnHover}: ${surfaceAccentHover};
+                ${switchTokens.trackBackgroundColorOff}: ${surfaceSolidCard};
+                ${switchTokens.trackBackgroundColorOffHover}: ${surfaceSolidCardHover};
                 ${switchTokens.trackBorderWidthOn}: 0;
                 ${switchTokens.trackBorderWidthOff}: 0.125rem;
-                ${switchTokens.trackBorderColorOn}: var(--outline-accent);
-                ${switchTokens.trackBorderColorOnHover}: var(--outline-accent-hover);
-                ${switchTokens.trackBorderColorOff}: var(--outline-solid-primary);
-                ${switchTokens.trackBorderColorOffHover}: var(--outline-solid-primary-hover);
-                ${switchTokens.thumbBackgroundColorOn}: var(--surface-solid-card);
-                ${switchTokens.thumbBackgroundColorOff}: var(--surface-accent);
+                ${switchTokens.trackBorderColorOn}: ${outlineAccent};
+                ${switchTokens.trackBorderColorOnHover}: ${outlineAccentHover};
+                ${switchTokens.trackBorderColorOff}: ${outlineSolidPrimary};
+                ${switchTokens.trackBorderColorOffHover}: ${outlineSolidPrimaryHover};
+                ${switchTokens.thumbBackgroundColorOn}: ${surfaceSolidCard};
+                ${switchTokens.thumbBackgroundColorOff}: ${surfaceAccent};
                 ${switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11);
             `
         },
@@ -75,7 +76,7 @@ export const config = {
         },
         focused: {
             true: css`
-                ${switchTokens.trackFocusColor}: var(--surface-accent);
+                ${switchTokens.trackFocusColor}: ${surfaceAccent};
             `
         }
     }