@salutejs/sdds-scan 0.357.0-next-sbcom.0 → 0.358.0-dev.0

package/dist/styled-components/es/components/Steps/StepItem.config.js

@@ -1,4 +1,5 @@
 import { css, stepsTokens as tokens } from '@salutejs/plasma-new-hope/styled-components';
+import { inverseTextPrimary, onDarkTextPrimary, onDarkTextPrimaryHover, surfaceAccent, surfaceAccentHover, surfaceNegative, surfaceNegativeHover, surfacePositive, surfacePositiveHover, surfaceSolidDefault, surfaceSolidDefaultHover, surfaceWarning, surfaceWarningHover, textNegative, textNegativeHover, textPositive, textPositiveHover, textPrimary, textPrimaryHover, textWarning, textWarningHover } from '@salutejs/sdds-themes/tokens/sdds_scan';
 export const config = {
     defaults: {
         view: 'default'
@@ -6,54 +7,54 @@ 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};
             `,
             accent: css`
-                ${tokens.completedIndicatorColor}: var(--on-dark-text-primary);
-                ${tokens.completedIndicatorColorHover}: var(--on-dark-text-primary-hover);
-                ${tokens.completedIndicatorBackground}: var(--surface-accent);
-                ${tokens.completedIndicatorBackgroundHover}: var(--surface-accent-hover);
-                ${tokens.completedTitleColor}: var(--text-primary);
-                ${tokens.completedTitleColorHover}: var(--text-primary-hover);
+                ${tokens.completedIndicatorColor}: ${onDarkTextPrimary};
+                ${tokens.completedIndicatorColorHover}: ${onDarkTextPrimaryHover};
+                ${tokens.completedIndicatorBackground}: ${surfaceAccent};
+                ${tokens.completedIndicatorBackgroundHover}: ${surfaceAccentHover};
+                ${tokens.completedTitleColor}: ${textPrimary};
+                ${tokens.completedTitleColorHover}: ${textPrimaryHover};
 
-                ${tokens.dividerColor}: var(--surface-accent);
+                ${tokens.dividerColor}: ${surfaceAccent};
             `,
             negative: css`
-                ${tokens.completedIndicatorColor}: var(--on-dark-text-primary);
-                ${tokens.completedIndicatorColorHover}: var(--on-dark-text-primary-hover);
-                ${tokens.completedIndicatorBackground}: var(--surface-negative);
-                ${tokens.completedIndicatorBackgroundHover}: var(--surface-negative-hover);
-                ${tokens.completedTitleColor}: var(--text-negative);
-                ${tokens.completedTitleColorHover}: var(--text-negative-hover);
+                ${tokens.completedIndicatorColor}: ${onDarkTextPrimary};
+                ${tokens.completedIndicatorColorHover}: ${onDarkTextPrimaryHover};
+                ${tokens.completedIndicatorBackground}: ${surfaceNegative};
+                ${tokens.completedIndicatorBackgroundHover}: ${surfaceNegativeHover};
+                ${tokens.completedTitleColor}: ${textNegative};
+                ${tokens.completedTitleColorHover}: ${textNegativeHover};
 
-                ${tokens.dividerColor}: var(--surface-negative);
+                ${tokens.dividerColor}: ${surfaceNegative};
             `,
             warning: css`
-                ${tokens.completedIndicatorColor}: var(--on-dark-text-primary);
-                ${tokens.completedIndicatorColorHover}: var(--on-dark-text-primary-hover);
-                ${tokens.completedIndicatorBackground}: var(--surface-warning);
-                ${tokens.completedIndicatorBackgroundHover}: var(--surface-warning-hover);
-                ${tokens.completedTitleColor}: var(--text-warning);
-                ${tokens.completedTitleColorHover}: var(--text-warning-hover);
+                ${tokens.completedIndicatorColor}: ${onDarkTextPrimary};
+                ${tokens.completedIndicatorColorHover}: ${onDarkTextPrimaryHover};
+                ${tokens.completedIndicatorBackground}: ${surfaceWarning};
+                ${tokens.completedIndicatorBackgroundHover}: ${surfaceWarningHover};
+                ${tokens.completedTitleColor}: ${textWarning};
+                ${tokens.completedTitleColorHover}: ${textWarningHover};
 
-                ${tokens.dividerColor}: var(--surface-warning);
+                ${tokens.dividerColor}: ${surfaceWarning};
             `,
             positive: css`
-                ${tokens.completedIndicatorColor}: var(--on-dark-text-primary);
-                ${tokens.completedIndicatorColorHover}: var(--on-dark-text-primary-hover);
-                ${tokens.completedIndicatorBackground}: var(--surface-positive);
-                ${tokens.completedIndicatorBackgroundHover}: var(--surface-positive-hover);
-                ${tokens.completedTitleColor}: var(--text-positive);
-                ${tokens.completedTitleColorHover}: var(--text-positive-hover);
+                ${tokens.completedIndicatorColor}: ${onDarkTextPrimary};
+                ${tokens.completedIndicatorColorHover}: ${onDarkTextPrimaryHover};
+                ${tokens.completedIndicatorBackground}: ${surfacePositive};
+                ${tokens.completedIndicatorBackgroundHover}: ${surfacePositiveHover};
+                ${tokens.completedTitleColor}: ${textPositive};
+                ${tokens.completedTitleColorHover}: ${textPositiveHover};
 
-                ${tokens.dividerColor}: var(--surface-positive);
+                ${tokens.dividerColor}: ${surfacePositive};
             `
         }
     }

package/dist/styled-components/es/components/Steps/Steps.config.js

@@ -1,40 +1,41 @@
 import { css, stepsTokens as tokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyL, bodyM, bodyS, bodyXS, inverseTextPrimary, onDarkTextPrimary, onDarkTextPrimaryHover, surfaceAccent, surfaceAccentHover, surfaceClear, surfaceNegative, surfaceNegativeHover, surfacePositive, surfacePositiveHover, surfaceSolidDefault, surfaceSolidDefaultHover, surfaceTransparentSecondary, surfaceTransparentSecondaryHover, surfaceWarning, surfaceWarningHover, textAccent, textNegative, textPositive, textPrimary, textPrimaryHover, textSecondary, textSecondaryHover, textWarning } from '@salutejs/sdds-themes/tokens/sdds_scan';
 const baseItemView = `
-    ${tokens.activeTitleColor}: var(--text-primary);
-    ${tokens.activeTitleColorHover}: var(--text-primary-hover);
-    ${tokens.activeIndicatorBorder}: solid var(--surface-solid-default);
-    ${tokens.activeIndicatorColor}: var(--text-primary);
-    ${tokens.activeIndicatorBackground}: var(--surface-clear);
+    ${tokens.activeTitleColor}: ${textPrimary};
+    ${tokens.activeTitleColorHover}: ${textPrimaryHover};
+    ${tokens.activeIndicatorBorder}: solid ${surfaceSolidDefault};
+    ${tokens.activeIndicatorColor}: ${textPrimary};
+    ${tokens.activeIndicatorBackground}: ${surfaceClear};
     
-    ${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.inactiveTitleColor}: var(--text-secondary);
-    ${tokens.inactiveTitleColorHover}: var(--text-secondary-hover);
-    ${tokens.inactiveIndicatorColor}: var(--text-secondary);
-    ${tokens.inactiveIndicatorColorHover}: var(--text-secondary);
-    ${tokens.inactiveIndicatorBackground}: var(--surface-transparent-secondary);
-    ${tokens.inactiveIndicatorBackgroundHover}: var(--surface-transparent-secondary-hover);
+    ${tokens.inactiveTitleColor}: ${textSecondary};
+    ${tokens.inactiveTitleColorHover}: ${textSecondaryHover};
+    ${tokens.inactiveIndicatorColor}: ${textSecondary};
+    ${tokens.inactiveIndicatorColorHover}: ${textSecondary};
+    ${tokens.inactiveIndicatorBackground}: ${surfaceTransparentSecondary};
+    ${tokens.inactiveIndicatorBackgroundHover}: ${surfaceTransparentSecondaryHover};
 
-    ${tokens.contentColor}: var(--text-secondary);
-    ${tokens.focusColor}: var(--surface-accent);
+    ${tokens.contentColor}: ${textSecondary};
+    ${tokens.focusColor}: ${surfaceAccent};
 
     ${tokens.disabledOpacity}: 0.4;
 `;
 const accentConfig = `
-    ${tokens.completedTitleColor}: var(--text-primary);
-    ${tokens.completedTitleColorHover}: var(--text-primary-hover);
+    ${tokens.completedTitleColor}: ${textPrimary};
+    ${tokens.completedTitleColorHover}: ${textPrimaryHover};
     
-    ${tokens.completedIndicatorBackground}: var(--surface-accent);
-    ${tokens.completedIndicatorBackgroundHover}: var(--surface-accent-hover);
+    ${tokens.completedIndicatorBackground}: ${surfaceAccent};
+    ${tokens.completedIndicatorBackgroundHover}: ${surfaceAccentHover};
     
     // Цвет контента внутри элемента Step
-    ${tokens.completedIndicatorColor}: var(--on-dark-text-primary);
-    ${tokens.completedIndicatorColorHover}: var(--on-dark-text-primary-hover);
+    ${tokens.completedIndicatorColor}: ${onDarkTextPrimary};
+    ${tokens.completedIndicatorColorHover}: ${onDarkTextPrimaryHover};
 `;
 export const config = {
     defaults: {
@@ -44,10 +45,10 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${tokens.dividerColor}: var(--surface-solid-default);
+                ${tokens.dividerColor}: ${surfaceSolidDefault};
             `,
             accent: css`
-                ${tokens.dividerColor}: var(--surface-accent);
+                ${tokens.dividerColor}: ${surfaceAccent};
             `
         },
         itemView: {
@@ -57,26 +58,26 @@ export const config = {
             negative: css`
                 ${baseItemView};
 
-                ${tokens.activeTitleColor}: var(--surface-negative);
-                ${tokens.activeTitleColorHover}: var(--surface-negative-hover);
-                ${tokens.activeIndicatorBorder}: solid var(--surface-negative);
-                ${tokens.activeIndicatorColor}: var(--text-negative);
+                ${tokens.activeTitleColor}: ${surfaceNegative};
+                ${tokens.activeTitleColorHover}: ${surfaceNegativeHover};
+                ${tokens.activeIndicatorBorder}: solid ${surfaceNegative};
+                ${tokens.activeIndicatorColor}: ${textNegative};
             `,
             warning: css`
                 ${baseItemView};
 
-                ${tokens.activeTitleColor}: var(--surface-warning);
-                ${tokens.activeTitleColorHover}: var(--surface-warning-hover);
-                ${tokens.activeIndicatorBorder}: solid var(--surface-warning);
-                ${tokens.activeIndicatorColor}: var(--text-warning);
+                ${tokens.activeTitleColor}: ${surfaceWarning};
+                ${tokens.activeTitleColorHover}: ${surfaceWarningHover};
+                ${tokens.activeIndicatorBorder}: solid ${surfaceWarning};
+                ${tokens.activeIndicatorColor}: ${textWarning};
             `,
             positive: css`
                 ${baseItemView};
 
-                ${tokens.activeTitleColor}: var(--surface-positive);
-                ${tokens.activeTitleColorHover}: var(--surface-positive-hover);
-                ${tokens.activeIndicatorBorder}: solid var(--surface-positive);
-                ${tokens.activeIndicatorColor}: var(--text-positive);
+                ${tokens.activeTitleColor}: ${surfacePositive};
+                ${tokens.activeTitleColorHover}: ${surfacePositiveHover};
+                ${tokens.activeIndicatorBorder}: solid ${surfacePositive};
+                ${tokens.activeIndicatorColor}: ${textPositive};
             `
         },
         size: {
@@ -92,33 +93,33 @@ export const config = {
                 ${tokens.contentVerticalPadding}: 1.0625rem;
                 ${tokens.verticalContentPaddingLeft}: 0.75rem;
 
-                ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.indicatorFontSize}: ${bodyXS.fontSize};
+                ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.indicatorLineHeight}: ${bodyXS.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-l-font-family);
-                ${tokens.titleFontSize}: var(--plasma-typo-body-l-font-size);
-                ${tokens.titleFontStyle}: var(--plasma-typo-body-l-font-style);
-                ${tokens.titleFontWeight}: var(--plasma-typo-body-l-font-weight);
-                ${tokens.titleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${tokens.titleLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${tokens.titleFontFamily}: ${bodyL.fontFamily};
+                ${tokens.titleFontSize}: ${bodyL.fontSize};
+                ${tokens.titleFontStyle}: ${bodyL.fontStyle};
+                ${tokens.titleFontWeight}: ${bodyL.fontWeight};
+                ${tokens.titleLetterSpacing}: ${bodyL.letterSpacing};
+                ${tokens.titleLineHeight}: ${bodyL.lineHeight};
 
-                ${tokens.contentFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${tokens.contentFontSize}: var(--plasma-typo-body-m-font-size);
-                ${tokens.contentFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${tokens.contentFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${tokens.contentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${tokens.contentLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${tokens.contentFontFamily}: ${bodyM.fontFamily};
+                ${tokens.contentFontSize}: ${bodyM.fontSize};
+                ${tokens.contentFontStyle}: ${bodyM.fontStyle};
+                ${tokens.contentFontWeight}: ${bodyM.fontWeight};
+                ${tokens.contentLetterSpacing}: ${bodyM.letterSpacing};
+                ${tokens.contentLineHeight}: ${bodyM.lineHeight};
 
                 ${tokens.dividerThickness}: 0.125rem;
             `,
@@ -134,33 +135,33 @@ export const config = {
                 ${tokens.contentVerticalPadding}: 0.875rem;
                 ${tokens.verticalContentPaddingLeft}: 0.75rem;
 
-                ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.indicatorFontSize}: ${bodyXS.fontSize};
+                ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.indicatorLineHeight}: ${bodyXS.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;
             `,
@@ -176,33 +177,33 @@ export const config = {
                 ${tokens.contentVerticalPadding}: 0.6875rem;
                 ${tokens.verticalContentPaddingLeft}: 0.75rem;
 
-                ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.indicatorFontSize}: ${bodyXS.fontSize};
+                ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight};
 
-                ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.activeIndicatorFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.activeIndicatorFontSize}: ${bodyXS.fontSize};
+                ${tokens.activeIndicatorFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.activeIndicatorFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.activeIndicatorLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.activeIndicatorLineHeight}: ${bodyXS.lineHeight};
 
-                ${tokens.titleFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${tokens.titleFontSize}: var(--plasma-typo-body-s-font-size);
-                ${tokens.titleFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${tokens.titleFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${tokens.titleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tokens.titleLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tokens.titleFontFamily}: ${bodyS.fontFamily};
+                ${tokens.titleFontSize}: ${bodyS.fontSize};
+                ${tokens.titleFontStyle}: ${bodyS.fontStyle};
+                ${tokens.titleFontWeight}: ${bodyS.fontWeight};
+                ${tokens.titleLetterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.titleLineHeight}: ${bodyS.lineHeight};
 
-                ${tokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.contentFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.contentFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.contentFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.contentFontSize}: ${bodyXS.fontSize};
+                ${tokens.contentFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.contentFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.contentLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.contentLineHeight}: ${bodyXS.lineHeight};
 
                 ${tokens.dividerThickness}: 0.125rem;
             `,
@@ -218,33 +219,33 @@ export const config = {
                 ${tokens.contentVerticalPadding}: 0.5625rem;
                 ${tokens.verticalContentPaddingLeft}: 0.75rem;
 
-                ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.indicatorFontSize}: ${bodyXS.fontSize};
+                ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight};
 
-                ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.activeIndicatorFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.activeIndicatorFontSize}: ${bodyXS.fontSize};
+                ${tokens.activeIndicatorFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.activeIndicatorFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.activeIndicatorLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.activeIndicatorLineHeight}: ${bodyXS.lineHeight};
 
-                ${tokens.titleFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.titleFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.titleFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.titleFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.titleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.titleLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.titleFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.titleFontSize}: ${bodyXS.fontSize};
+                ${tokens.titleFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.titleFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.titleLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.titleLineHeight}: ${bodyXS.lineHeight};
 
-                ${tokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.contentFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.contentFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.contentFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.contentFontSize}: ${bodyXS.fontSize};
+                ${tokens.contentFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.contentFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.contentLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.contentLineHeight}: ${bodyXS.lineHeight};
 
                 ${tokens.dividerThickness}: 0.125rem;
             `
@@ -255,8 +256,8 @@ export const config = {
             view: 'accent',
             itemView: 'default',
             style: css`
-                ${tokens.activeIndicatorBorder}: solid var(--text-accent);
-                ${tokens.activeIndicatorColor}: var(--text-accent);
+                ${tokens.activeIndicatorBorder}: solid ${textAccent};
+                ${tokens.activeIndicatorColor}: ${textAccent};
 
                 ${accentConfig};
             `

package/dist/styled-components/es/components/Switch/Switch.config.js

@@ -1,4 +1,5 @@
 import { css, switchTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyL, bodyM, bodyS, bodyXS, onDarkSurfaceSolidDefault, surfaceAccent, surfaceAccentHover, surfaceTransparentTertiary, surfaceTransparentTertiaryHover, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_scan';
 export const config = {
     defaults: {
         view: 'default',
@@ -10,50 +11,50 @@ export const config = {
     variations: {
         size: {
             s: css`
-                ${switchTokens.fontFamily}: var(--plasma-typo-body-s-font-family);
-                ${switchTokens.fontStyle}: var(--plasma-typo-body-s-font-style);
-                ${switchTokens.fontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${switchTokens.lineHeight}: var(--plasma-typo-body-s-line-height);
-                ${switchTokens.fontSize}: var(--plasma-typo-body-s-font-size);
-                ${switchTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height);
-                ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${switchTokens.fontFamily}: ${bodyS.fontFamily};
+                ${switchTokens.fontStyle}: ${bodyS.fontStyle};
+                ${switchTokens.fontWeight}: ${bodyS.fontWeight};
+                ${switchTokens.lineHeight}: ${bodyS.lineHeight};
+                ${switchTokens.fontSize}: ${bodyS.fontSize};
+                ${switchTokens.letterSpacing}: ${bodyS.letterSpacing};
+                ${switchTokens.descriptionFontFamily}: ${bodyXS.fontFamily};
+                ${switchTokens.descriptionFontStyle}: ${bodyXS.fontStyle};
+                ${switchTokens.descriptionFontWeight}: ${bodyXS.fontWeight};
+                ${switchTokens.descriptionLineHeight}: ${bodyXS.lineHeight};
+                ${switchTokens.descriptionFontSize}: ${bodyXS.fontSize};
+                ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing};
                 ${switchTokens.verticalGap}: 0.25rem;
                 ${switchTokens.labelOffset}: 0.75rem;
             `,
             m: 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;
             `,
             l: css`
-                ${switchTokens.fontFamily}: var(--plasma-typo-body-l-font-family);
-                ${switchTokens.fontStyle}: var(--plasma-typo-body-l-font-style);
-                ${switchTokens.fontWeight}: var(--plasma-typo-body-l-font-weight);
-                ${switchTokens.lineHeight}: var(--plasma-typo-body-l-line-height);
-                ${switchTokens.fontSize}: var(--plasma-typo-body-l-font-size);
-                ${switchTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height);
-                ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size);
-                ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
+                ${switchTokens.fontFamily}: ${bodyL.fontFamily};
+                ${switchTokens.fontStyle}: ${bodyL.fontStyle};
+                ${switchTokens.fontWeight}: ${bodyL.fontWeight};
+                ${switchTokens.lineHeight}: ${bodyL.lineHeight};
+                ${switchTokens.fontSize}: ${bodyL.fontSize};
+                ${switchTokens.letterSpacing}: ${bodyL.letterSpacing};
+                ${switchTokens.descriptionFontFamily}: ${bodyM.fontFamily};
+                ${switchTokens.descriptionFontStyle}: ${bodyM.fontStyle};
+                ${switchTokens.descriptionFontWeight}: ${bodyM.fontWeight};
+                ${switchTokens.descriptionLineHeight}: ${bodyM.lineHeight};
+                ${switchTokens.descriptionFontSize}: ${bodyM.fontSize};
+                ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing};
                 ${switchTokens.verticalGap}: 0.25rem;
                 ${switchTokens.labelOffset}: 0.75rem;
             `
@@ -82,17 +83,17 @@ export const config = {
         },
         view: {
             default: css`
-                ${switchTokens.labelColor}: var(--text-primary);
-                ${switchTokens.descriptionColor}: var(--text-secondary);
+                ${switchTokens.labelColor}: ${textPrimary};
+                ${switchTokens.descriptionColor}: ${textSecondary};
                 ${switchTokens.descriptionMaxLines}: initial;
-                ${switchTokens.trackBackgroundColorOn}: var(--surface-accent);
-                ${switchTokens.trackBackgroundColorOnHover}: var(--surface-accent-hover);
-                ${switchTokens.trackBackgroundColorOff}: var(--surface-transparent-tertiary);
-                ${switchTokens.trackBackgroundColorOffHover}: var(--surface-transparent-tertiary-hover);
+                ${switchTokens.trackBackgroundColorOn}: ${surfaceAccent};
+                ${switchTokens.trackBackgroundColorOnHover}: ${surfaceAccentHover};
+                ${switchTokens.trackBackgroundColorOff}: ${surfaceTransparentTertiary};
+                ${switchTokens.trackBackgroundColorOffHover}: ${surfaceTransparentTertiaryHover};
                 ${switchTokens.trackBorderWidthOn}: 0;
                 ${switchTokens.trackBorderWidthOff}: 0;
-                ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default);
-                ${switchTokens.thumbBackgroundColorOff}: var(--on-dark-surface-solid-default);
+                ${switchTokens.thumbBackgroundColorOn}: ${onDarkSurfaceSolidDefault};
+                ${switchTokens.thumbBackgroundColorOff}: ${onDarkSurfaceSolidDefault};
                 ${switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11);
             `
         },
@@ -103,7 +104,7 @@ export const config = {
         },
         focused: {
             true: css`
-                ${switchTokens.trackFocusColor}: var(--surface-accent);
+                ${switchTokens.trackFocusColor}: ${surfaceAccent};
             `
         }
     }