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

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

@@ -1,4 +1,5 @@
 import { css, avatarTokens as tokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyS, bodyXXS, inverseTextPrimary, onDarkSurfaceSolidDefault, onDarkSurfaceTransparentCard, onDarkTextPrimary, onLightSurfaceSolidDefault, onLightSurfaceTransparentDeep, onLightTextPrimary, surfaceAccent, surfaceClear, surfaceNegative, surfacePositive, surfaceSolidDefault, surfaceSolidTertiary, surfaceTransparentAccent, surfaceTransparentNegative, surfaceTransparentPositive, surfaceTransparentSecondary, surfaceTransparentWarning, surfaceWarning, textAccent, textNegative, textPositive, textPrimary, textWarning } from '@salutejs/sdds-themes/tokens/sdds_scan';
 export const config = {
     defaults: {
         view: 'default',
@@ -12,8 +13,8 @@ export const config = {
                 ${tokens.color}: radial-gradient(88% 150% at 0% 100%, rgba(0, 120, 153, 1), rgba(25, 125, 97, 1) 100%);
                 ${tokens.backgroundColor}: radial-gradient(88% 150% at 0% 100%, rgba(0, 120, 153, 0.2), rgba(25, 125, 97, 0.2) 100%);
                 /* stylelint-enable value-list-comma-space-after */
-                ${tokens.statusOnlineColor}: var(--surface-positive);
-                ${tokens.statusOfflineColor}: var(--surface-solid-tertiary);
+                ${tokens.statusOnlineColor}: ${surfacePositive};
+                ${tokens.statusOfflineColor}: ${surfaceSolidTertiary};
                 ${tokens.scaleHover}: 1.02;
                 ${tokens.fontFamily}: var(--plasma-typo-text-font-family);
             `
@@ -33,12 +34,12 @@ export const config = {
                 ${tokens.badgePadding}: 0 0.688rem;
                 ${tokens.badgePaddingIconOnly}: 0 0.375rem;
 
-                ${tokens.badgeFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${tokens.badgeFontSize}: var(--plasma-typo-body-s-font-size);
-                ${tokens.badgeFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${tokens.badgeFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${tokens.badgeLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tokens.badgeLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tokens.badgeFontFamily}: ${bodyS.fontFamily};
+                ${tokens.badgeFontSize}: ${bodyS.fontSize};
+                ${tokens.badgeFontStyle}: ${bodyS.fontStyle};
+                ${tokens.badgeFontWeight}: ${bodyS.fontWeight};
+                ${tokens.badgeLetterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.badgeLineHeight}: ${bodyS.lineHeight};
 
                 ${tokens.badgeLeftContentMarginLeft}: -0.063rem;
                 ${tokens.badgeLeftContentMarginRight}: 0.25rem;
@@ -50,12 +51,12 @@ export const config = {
                 ${tokens.counterBorderRadius}: 1rem;
                 ${tokens.counterHeight}: 1.75rem;
                 ${tokens.counterPadding}: 0 0.625rem;
-                ${tokens.counterFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${tokens.counterFontSize}: var(--plasma-typo-body-s-font-size);
-                ${tokens.counterFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${tokens.counterFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${tokens.counterLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tokens.counterLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tokens.counterFontFamily}: ${bodyS.fontFamily};
+                ${tokens.counterFontSize}: ${bodyS.fontSize};
+                ${tokens.counterFontStyle}: ${bodyS.fontStyle};
+                ${tokens.counterFontWeight}: ${bodyS.fontWeight};
+                ${tokens.counterLetterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.counterLineHeight}: ${bodyS.lineHeight};
             `,
             l: css`
                 ${tokens.avatarSize}: 3rem;
@@ -72,12 +73,12 @@ export const config = {
                 ${tokens.badgePadding}: 0 0.438rem;
                 ${tokens.badgePaddingIconOnly}: 0 0.25rem;
 
-                ${tokens.badgeFontFamily}: var(--plasma-typo-body-xxs-font-family);
-                ${tokens.badgeFontSize}: var(--plasma-typo-body-xxs-font-size);
-                ${tokens.badgeFontStyle}: var(--plasma-typo-body-xxs-font-style);
-                ${tokens.badgeFontWeight}: var(--plasma-typo-body-xxs-font-weight);
-                ${tokens.badgeLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
-                ${tokens.badgeLineHeight}: var(--plasma-typo-body-xxs-line-height);
+                ${tokens.badgeFontFamily}: ${bodyXXS.fontFamily};
+                ${tokens.badgeFontSize}: ${bodyXXS.fontSize};
+                ${tokens.badgeFontStyle}: ${bodyXXS.fontStyle};
+                ${tokens.badgeFontWeight}: ${bodyXXS.fontWeight};
+                ${tokens.badgeLetterSpacing}: ${bodyXXS.letterSpacing};
+                ${tokens.badgeLineHeight}: ${bodyXXS.lineHeight};
 
                 ${tokens.badgeLeftContentMarginLeft}: -0.063rem;
                 ${tokens.badgeLeftContentMarginRight}: 0.125rem;
@@ -89,12 +90,12 @@ export const config = {
                 ${tokens.counterBorderRadius}: 1rem;
                 ${tokens.counterHeight}: 1.25rem;
                 ${tokens.counterPadding}: 0 0.375rem;
-                ${tokens.counterFontFamily}: var(--plasma-typo-body-xxs-font-family);
-                ${tokens.counterFontSize}: var(--plasma-typo-body-xxs-font-size);
-                ${tokens.counterFontStyle}: var(--plasma-typo-body-xxs-font-style);
-                ${tokens.counterFontWeight}: var(--plasma-typo-body-xxs-font-weight);
-                ${tokens.counterLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
-                ${tokens.counterLineHeight}: var(--plasma-typo-body-xxs-line-height);
+                ${tokens.counterFontFamily}: ${bodyXXS.fontFamily};
+                ${tokens.counterFontSize}: ${bodyXXS.fontSize};
+                ${tokens.counterFontStyle}: ${bodyXXS.fontStyle};
+                ${tokens.counterFontWeight}: ${bodyXXS.fontWeight};
+                ${tokens.counterLetterSpacing}: ${bodyXXS.letterSpacing};
+                ${tokens.counterLineHeight}: ${bodyXXS.lineHeight};
             `,
             m: css`
                 ${tokens.avatarSize}: 2.25rem;
@@ -111,12 +112,12 @@ export const config = {
                 ${tokens.badgePadding}: 0 0.25rem;
                 ${tokens.badgePaddingIconOnly}: 0 0.188rem;
 
-                ${tokens.badgeFontFamily}: var(--plasma-typo-body-xxs-font-family);
-                ${tokens.badgeFontSize}: var(--plasma-typo-body-xxs-font-size);
-                ${tokens.badgeFontStyle}: var(--plasma-typo-body-xxs-font-style);
-                ${tokens.badgeFontWeight}: var(--plasma-typo-body-xxs-font-weight);
-                ${tokens.badgeLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
-                ${tokens.badgeLineHeight}: var(--plasma-typo-body-xxs-line-height);
+                ${tokens.badgeFontFamily}: ${bodyXXS.fontFamily};
+                ${tokens.badgeFontSize}: ${bodyXXS.fontSize};
+                ${tokens.badgeFontStyle}: ${bodyXXS.fontStyle};
+                ${tokens.badgeFontWeight}: ${bodyXXS.fontWeight};
+                ${tokens.badgeLetterSpacing}: ${bodyXXS.letterSpacing};
+                ${tokens.badgeLineHeight}: ${bodyXXS.lineHeight};
 
                 ${tokens.badgeLeftContentMarginLeft}: -0.063rem;
                 ${tokens.badgeLeftContentMarginRight}: 0.125rem;
@@ -128,12 +129,12 @@ export const config = {
                 ${tokens.counterBorderRadius}: 1rem;
                 ${tokens.counterHeight}: 1rem;
                 ${tokens.counterPadding}: 0 0.25rem;
-                ${tokens.counterFontFamily}: var(--plasma-typo-body-xxs-font-family);
-                ${tokens.counterFontSize}: var(--plasma-typo-body-xxs-font-size);
-                ${tokens.counterFontStyle}: var(--plasma-typo-body-xxs-font-style);
-                ${tokens.counterFontWeight}: var(--plasma-typo-body-xxs-font-weight);
-                ${tokens.counterLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
-                ${tokens.counterLineHeight}: var(--plasma-typo-body-xxs-line-height);
+                ${tokens.counterFontFamily}: ${bodyXXS.fontFamily};
+                ${tokens.counterFontSize}: ${bodyXXS.fontSize};
+                ${tokens.counterFontStyle}: ${bodyXXS.fontStyle};
+                ${tokens.counterFontWeight}: ${bodyXXS.fontWeight};
+                ${tokens.counterLetterSpacing}: ${bodyXXS.letterSpacing};
+                ${tokens.counterLineHeight}: ${bodyXXS.lineHeight};
             `,
             s: css`
                 ${tokens.avatarSize}: 1.5rem;
@@ -148,12 +149,12 @@ export const config = {
                 ${tokens.counterBorderRadius}: 1rem;
                 ${tokens.counterHeight}: 0.75rem;
                 ${tokens.counterPadding}: 0 0.125rem;
-                ${tokens.counterFontFamily}: var(--plasma-typo-body-xxs-font-family);
-                ${tokens.counterFontSize}: var(--plasma-typo-body-xxs-font-size);
-                ${tokens.counterFontStyle}: var(--plasma-typo-body-xxs-font-style);
-                ${tokens.counterFontWeight}: var(--plasma-typo-body-xxs-font-weight);
-                ${tokens.counterLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
-                ${tokens.counterLineHeight}: var(--plasma-typo-body-xxs-line-height);
+                ${tokens.counterFontFamily}: ${bodyXXS.fontFamily};
+                ${tokens.counterFontSize}: ${bodyXXS.fontSize};
+                ${tokens.counterFontStyle}: ${bodyXXS.fontStyle};
+                ${tokens.counterFontWeight}: ${bodyXXS.fontWeight};
+                ${tokens.counterLetterSpacing}: ${bodyXXS.letterSpacing};
+                ${tokens.counterLineHeight}: ${bodyXXS.lineHeight};
             `,
             fit: css`
                 ${tokens.avatarSize}: 100%;
@@ -168,7 +169,7 @@ export const config = {
             true: css`
                 ${tokens.outlineSize}: 0.1rem;
                 ${tokens.outlineOffset}: -0.2rem;
-                ${tokens.outlineColor}: var(--surface-accent);
+                ${tokens.outlineColor}: ${surfaceAccent};
             `
         },
         shape: {
@@ -184,104 +185,104 @@ export const config = {
         },
         badgeView: {
             default: css`
-                ${tokens.badgeColor}: var(--inverse-text-primary);
-                ${tokens.badgeBackground}: var(--surface-solid-default);
+                ${tokens.badgeColor}: ${inverseTextPrimary};
+                ${tokens.badgeBackground}: ${surfaceSolidDefault};
 
-                ${tokens.badgeColorTransparent}: var(--text-primary);
-                ${tokens.badgeBackgroundTransparent}: var(--surface-transparent-secondary);
+                ${tokens.badgeColorTransparent}: ${textPrimary};
+                ${tokens.badgeBackgroundTransparent}: ${surfaceTransparentSecondary};
 
-                ${tokens.badgeColorClear}: var(--text-primary);
-                ${tokens.badgeBackgroundClear}: var(--surface-clear);
+                ${tokens.badgeColorClear}: ${textPrimary};
+                ${tokens.badgeBackgroundClear}: ${surfaceClear};
             `,
             accent: css`
-                ${tokens.badgeColor}: var(--on-dark-text-primary);
-                ${tokens.badgeBackground}: var(--surface-accent);
+                ${tokens.badgeColor}: ${onDarkTextPrimary};
+                ${tokens.badgeBackground}: ${surfaceAccent};
 
-                ${tokens.badgeColorTransparent}: var(--text-accent);
-                ${tokens.badgeBackgroundTransparent}: var(--surface-transparent-accent);
+                ${tokens.badgeColorTransparent}: ${textAccent};
+                ${tokens.badgeBackgroundTransparent}: ${surfaceTransparentAccent};
 
-                ${tokens.badgeColorClear}: var(--text-accent);
-                ${tokens.badgeBackgroundClear}: var(--surface-clear);
+                ${tokens.badgeColorClear}: ${textAccent};
+                ${tokens.badgeBackgroundClear}: ${surfaceClear};
             `,
             positive: css`
-                ${tokens.badgeColor}: var(--on-dark-text-primary);
-                ${tokens.badgeBackground}: var(--surface-positive);
+                ${tokens.badgeColor}: ${onDarkTextPrimary};
+                ${tokens.badgeBackground}: ${surfacePositive};
 
-                ${tokens.badgeColorTransparent}: var(--text-positive);
-                ${tokens.badgeBackgroundTransparent}: var(--surface-transparent-positive);
+                ${tokens.badgeColorTransparent}: ${textPositive};
+                ${tokens.badgeBackgroundTransparent}: ${surfaceTransparentPositive};
 
-                ${tokens.badgeColorClear}: var(--text-positive);
-                ${tokens.badgeBackgroundClear}: var(--surface-clear);
+                ${tokens.badgeColorClear}: ${textPositive};
+                ${tokens.badgeBackgroundClear}: ${surfaceClear};
             `,
             warning: css`
-                ${tokens.badgeColor}: var(--on-dark-text-primary);
-                ${tokens.badgeBackground}: var(--surface-warning);
+                ${tokens.badgeColor}: ${onDarkTextPrimary};
+                ${tokens.badgeBackground}: ${surfaceWarning};
 
-                ${tokens.badgeColorTransparent}: var(--text-warning);
-                ${tokens.badgeBackgroundTransparent}: var(--surface-transparent-warning);
+                ${tokens.badgeColorTransparent}: ${textWarning};
+                ${tokens.badgeBackgroundTransparent}: ${surfaceTransparentWarning};
 
-                ${tokens.badgeColorClear}: var(--text-warning);
-                ${tokens.badgeBackgroundClear}: var(--surface-clear);
+                ${tokens.badgeColorClear}: ${textWarning};
+                ${tokens.badgeBackgroundClear}: ${surfaceClear};
             `,
             negative: css`
-                ${tokens.badgeColor}: var(--on-dark-text-primary);
-                ${tokens.badgeBackground}: var(--surface-negative);
+                ${tokens.badgeColor}: ${onDarkTextPrimary};
+                ${tokens.badgeBackground}: ${surfaceNegative};
 
-                ${tokens.badgeColorTransparent}: var(--text-negative);
-                ${tokens.badgeBackgroundTransparent}: var(--surface-transparent-negative);
+                ${tokens.badgeColorTransparent}: ${textNegative};
+                ${tokens.badgeBackgroundTransparent}: ${surfaceTransparentNegative};
 
-                ${tokens.badgeColorClear}: var(--text-negative);
-                ${tokens.badgeBackgroundClear}: var(--surface-clear);
+                ${tokens.badgeColorClear}: ${textNegative};
+                ${tokens.badgeBackgroundClear}: ${surfaceClear};
             `,
             dark: css`
-                ${tokens.badgeColor}: var(--on-dark-text-primary);
-                ${tokens.badgeBackground}: var(--on-light-surface-solid-default);
+                ${tokens.badgeColor}: ${onDarkTextPrimary};
+                ${tokens.badgeBackground}: ${onLightSurfaceSolidDefault};
 
-                ${tokens.badgeColorTransparent}: var(--on-dark-text-primary);
-                ${tokens.badgeBackgroundTransparent}: var(--on-light-surface-transparent-deep);
+                ${tokens.badgeColorTransparent}: ${onDarkTextPrimary};
+                ${tokens.badgeBackgroundTransparent}: ${onLightSurfaceTransparentDeep};
 
-                ${tokens.badgeColorClear}: var(--on-light-text-primary);
-                ${tokens.badgeBackgroundClear}: var(--surface-clear);
+                ${tokens.badgeColorClear}: ${onLightTextPrimary};
+                ${tokens.badgeBackgroundClear}: ${surfaceClear};
             `,
             light: css`
-                ${tokens.badgeColor}: var(--on-light-text-primary);
-                ${tokens.badgeBackground}: var(--on-dark-surface-solid-default);
+                ${tokens.badgeColor}: ${onLightTextPrimary};
+                ${tokens.badgeBackground}: ${onDarkSurfaceSolidDefault};
 
-                ${tokens.badgeColorTransparent}: var(--on-dark-text-primary);
-                ${tokens.badgeBackgroundTransparent}: var(--on-dark-surface-transparent-card);
+                ${tokens.badgeColorTransparent}: ${onDarkTextPrimary};
+                ${tokens.badgeBackgroundTransparent}: ${onDarkSurfaceTransparentCard};
 
-                ${tokens.badgeColorClear}: var(--on-dark-text-primary);
-                ${tokens.badgeBackgroundClear}: var(--surface-clear);
+                ${tokens.badgeColorClear}: ${onDarkTextPrimary};
+                ${tokens.badgeBackgroundClear}: ${surfaceClear};
             `
         },
         counterView: {
             default: css`
-                ${tokens.counterColor}: var(--inverse-text-primary);
-                ${tokens.counterBackground}: var(--surface-solid-default);
+                ${tokens.counterColor}: ${inverseTextPrimary};
+                ${tokens.counterBackground}: ${surfaceSolidDefault};
             `,
             accent: css`
-                ${tokens.counterColor}: var(--on-dark-text-primary);
-                ${tokens.counterBackground}: var(--surface-accent);
+                ${tokens.counterColor}: ${onDarkTextPrimary};
+                ${tokens.counterBackground}: ${surfaceAccent};
             `,
             positive: css`
-                ${tokens.counterColor}: var(--on-dark-text-primary);
-                ${tokens.counterBackground}: var(--surface-positive);
+                ${tokens.counterColor}: ${onDarkTextPrimary};
+                ${tokens.counterBackground}: ${surfacePositive};
             `,
             warning: css`
-                ${tokens.counterColor}: var(--on-dark-text-primary);
-                ${tokens.counterBackground}: var(--surface-warning);
+                ${tokens.counterColor}: ${onDarkTextPrimary};
+                ${tokens.counterBackground}: ${surfaceWarning};
             `,
             negative: css`
-                ${tokens.counterColor}: var(--on-dark-text-primary);
-                ${tokens.counterBackground}: var(--surface-negative);
+                ${tokens.counterColor}: ${onDarkTextPrimary};
+                ${tokens.counterBackground}: ${surfaceNegative};
             `,
             dark: css`
-                ${tokens.counterColor}: var(--on-dark-text-primary);
-                ${tokens.counterBackground}: var(--on-light-surface-solid-default);
+                ${tokens.counterColor}: ${onDarkTextPrimary};
+                ${tokens.counterBackground}: ${onLightSurfaceSolidDefault};
             `,
             light: css`
-                ${tokens.counterColor}: var(--on-light-text-primary);
-                ${tokens.counterBackground}: var(--on-dark-surface-solid-default);
+                ${tokens.counterColor}: ${onLightTextPrimary};
+                ${tokens.counterBackground}: ${onDarkSurfaceSolidDefault};
             `
         }
     }

package/dist/styled-components/es/components/Badge/Badge.clear.config.js

@@ -1,4 +1,5 @@
 import { css, badgeTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { onDarkTextPrimary, onLightTextPrimary, textAccent, textNegative, textPositive, textPrimary, textWarning } from '@salutejs/sdds-themes/tokens/sdds_scan';
 import { pilled, sizeL, sizeM, sizeS, sizeXS } from './Badge.config.common';
 export const config = {
     defaults: {
@@ -8,25 +9,25 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${badgeTokens.color}: var(--text-primary);
+                ${badgeTokens.color}: ${textPrimary};
             `,
             accent: css`
-                ${badgeTokens.color}: var(--text-accent);
+                ${badgeTokens.color}: ${textAccent};
             `,
             positive: css`
-                ${badgeTokens.color}: var(--text-positive);
+                ${badgeTokens.color}: ${textPositive};
             `,
             warning: css`
-                ${badgeTokens.color}: var(--text-warning);
+                ${badgeTokens.color}: ${textWarning};
             `,
             negative: css`
-                ${badgeTokens.color}: var(--text-negative);
+                ${badgeTokens.color}: ${textNegative};
             `,
             dark: css`
-                ${badgeTokens.color}: var(--on-light-text-primary);
+                ${badgeTokens.color}: ${onLightTextPrimary};
             `,
             light: css`
-                ${badgeTokens.color}: var(--on-dark-text-primary);
+                ${badgeTokens.color}: ${onDarkTextPrimary};
             `
         },
         size: {

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

@@ -1,4 +1,5 @@
 import { css, badgeTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { inverseTextPrimary, onDarkSurfaceSolidDefault, onDarkSurfaceTransparentCard, onDarkTextPrimary, onLightSurfaceSolidDefault, onLightSurfaceTransparentDeep, onLightTextPrimary, surfaceAccent, surfaceClear, surfaceNegative, surfacePositive, surfaceSolidDefault, surfaceTransparentAccent, surfaceTransparentNegative, surfaceTransparentPositive, surfaceTransparentSecondary, surfaceTransparentWarning, surfaceWarning, textAccent, textNegative, textPositive, textPrimary, textWarning } from '@salutejs/sdds-themes/tokens/sdds_scan';
 import { pilled, sizeL, sizeM, sizeS, sizeXS } from './Badge.config.common';
 export const config = {
     defaults: {
@@ -8,67 +9,67 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${badgeTokens.color}: var(--inverse-text-primary);
-                ${badgeTokens.background}: var(--surface-solid-default);
+                ${badgeTokens.color}: ${inverseTextPrimary};
+                ${badgeTokens.background}: ${surfaceSolidDefault};
 
-                ${badgeTokens.colorTransparent}: var(--text-primary);
-                ${badgeTokens.backgroundTransparent}: var(--surface-transparent-secondary);
+                ${badgeTokens.colorTransparent}: ${textPrimary};
+                ${badgeTokens.backgroundTransparent}: ${surfaceTransparentSecondary};
 
-                ${badgeTokens.colorClear}: var(--text-primary);
+                ${badgeTokens.colorClear}: ${textPrimary};
             `,
             accent: css`
-                ${badgeTokens.color}: var(--on-dark-text-primary);
-                ${badgeTokens.background}: var(--surface-accent);
+                ${badgeTokens.color}: ${onDarkTextPrimary};
+                ${badgeTokens.background}: ${surfaceAccent};
 
-                ${badgeTokens.colorTransparent}: var(--text-accent);
-                ${badgeTokens.backgroundTransparent}: var(--surface-transparent-accent);
+                ${badgeTokens.colorTransparent}: ${textAccent};
+                ${badgeTokens.backgroundTransparent}: ${surfaceTransparentAccent};
 
-                ${badgeTokens.colorClear}: var(--text-accent);
+                ${badgeTokens.colorClear}: ${textAccent};
             `,
             positive: css`
-                ${badgeTokens.color}: var(--on-dark-text-primary);
-                ${badgeTokens.background}: var(--surface-positive);
+                ${badgeTokens.color}: ${onDarkTextPrimary};
+                ${badgeTokens.background}: ${surfacePositive};
 
-                ${badgeTokens.colorTransparent}: var(--text-positive);
-                ${badgeTokens.backgroundTransparent}: var(--surface-transparent-positive);
+                ${badgeTokens.colorTransparent}: ${textPositive};
+                ${badgeTokens.backgroundTransparent}: ${surfaceTransparentPositive};
 
-                ${badgeTokens.colorClear}: var(--text-positive);
+                ${badgeTokens.colorClear}: ${textPositive};
             `,
             warning: css`
-                ${badgeTokens.color}: var(--on-dark-text-primary);
-                ${badgeTokens.background}: var(--surface-warning);
+                ${badgeTokens.color}: ${onDarkTextPrimary};
+                ${badgeTokens.background}: ${surfaceWarning};
 
-                ${badgeTokens.colorTransparent}: var(--text-warning);
-                ${badgeTokens.backgroundTransparent}: var(--surface-transparent-warning);
+                ${badgeTokens.colorTransparent}: ${textWarning};
+                ${badgeTokens.backgroundTransparent}: ${surfaceTransparentWarning};
 
-                ${badgeTokens.colorClear}: var(--text-warning);
+                ${badgeTokens.colorClear}: ${textWarning};
             `,
             negative: css`
-                ${badgeTokens.color}: var(--on-dark-text-primary);
-                ${badgeTokens.background}: var(--surface-negative);
+                ${badgeTokens.color}: ${onDarkTextPrimary};
+                ${badgeTokens.background}: ${surfaceNegative};
 
-                ${badgeTokens.colorTransparent}: var(--text-negative);
-                ${badgeTokens.backgroundTransparent}: var(--surface-transparent-negative);
+                ${badgeTokens.colorTransparent}: ${textNegative};
+                ${badgeTokens.backgroundTransparent}: ${surfaceTransparentNegative};
 
-                ${badgeTokens.colorClear}: var(--text-negative);
+                ${badgeTokens.colorClear}: ${textNegative};
             `,
             dark: css`
-                ${badgeTokens.color}: var(--on-dark-text-primary);
-                ${badgeTokens.background}: var(--on-light-surface-solid-default);
+                ${badgeTokens.color}: ${onDarkTextPrimary};
+                ${badgeTokens.background}: ${onLightSurfaceSolidDefault};
 
-                ${badgeTokens.colorTransparent}: var(--on-dark-text-primary);
-                ${badgeTokens.backgroundTransparent}: var(--on-light-surface-transparent-deep);
+                ${badgeTokens.colorTransparent}: ${onDarkTextPrimary};
+                ${badgeTokens.backgroundTransparent}: ${onLightSurfaceTransparentDeep};
 
-                ${badgeTokens.colorClear}: var(--on-light-text-primary);
+                ${badgeTokens.colorClear}: ${onLightTextPrimary};
             `,
             light: css`
-                ${badgeTokens.color}: var(--on-light-text-primary);
-                ${badgeTokens.background}: var(--on-dark-surface-solid-default);
+                ${badgeTokens.color}: ${onLightTextPrimary};
+                ${badgeTokens.background}: ${onDarkSurfaceSolidDefault};
 
-                ${badgeTokens.colorTransparent}: var(--on-dark-text-primary);
-                ${badgeTokens.backgroundTransparent}: var(--on-dark-surface-transparent-card);
+                ${badgeTokens.colorTransparent}: ${onDarkTextPrimary};
+                ${badgeTokens.backgroundTransparent}: ${onDarkSurfaceTransparentCard};
 
-                ${badgeTokens.colorClear}: var(--on-dark-text-primary);
+                ${badgeTokens.colorClear}: ${onDarkTextPrimary};
             `
         },
         size: {
@@ -95,7 +96,7 @@ export const config = {
         },
         clear: {
             true: css`
-                ${badgeTokens.backgroundClear}: var(--surface-clear);
+                ${badgeTokens.backgroundClear}: ${surfaceClear};
             `
         }
     }

package/dist/styled-components/es/components/Badge/Badge.transparent.config.js

@@ -1,4 +1,5 @@
 import { css, badgeTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { onDarkSurfaceTransparentCard, onDarkTextPrimary, onLightSurfaceTransparentDeep, surfaceTransparentAccent, surfaceTransparentNegative, surfaceTransparentPositive, surfaceTransparentSecondary, surfaceTransparentWarning, textAccent, textNegative, textPositive, textPrimary, textWarning } from '@salutejs/sdds-themes/tokens/sdds_scan';
 import { pilled, sizeL, sizeM, sizeS, sizeXS } from './Badge.config.common';
 export const config = {
     defaults: {
@@ -8,32 +9,32 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${badgeTokens.color}: var(--text-primary);
-                ${badgeTokens.background}: var(--surface-transparent-secondary);
+                ${badgeTokens.color}: ${textPrimary};
+                ${badgeTokens.background}: ${surfaceTransparentSecondary};
             `,
             accent: css`
-                ${badgeTokens.color}: var(--text-accent);
-                ${badgeTokens.background}: var(--surface-transparent-accent);
+                ${badgeTokens.color}: ${textAccent};
+                ${badgeTokens.background}: ${surfaceTransparentAccent};
             `,
             positive: css`
-                ${badgeTokens.color}: var(--text-positive);
-                ${badgeTokens.background}: var(--surface-transparent-positive);
+                ${badgeTokens.color}: ${textPositive};
+                ${badgeTokens.background}: ${surfaceTransparentPositive};
             `,
             warning: css`
-                ${badgeTokens.color}: var(--text-warning);
-                ${badgeTokens.background}: var(--surface-transparent-warning);
+                ${badgeTokens.color}: ${textWarning};
+                ${badgeTokens.background}: ${surfaceTransparentWarning};
             `,
             negative: css`
-                ${badgeTokens.color}: var(--text-negative);
-                ${badgeTokens.background}: var(--surface-transparent-negative);
+                ${badgeTokens.color}: ${textNegative};
+                ${badgeTokens.background}: ${surfaceTransparentNegative};
             `,
             dark: css`
-                ${badgeTokens.color}: var(--on-dark-text-primary);
-                ${badgeTokens.background}: var(--on-light-surface-transparent-deep);
+                ${badgeTokens.color}: ${onDarkTextPrimary};
+                ${badgeTokens.background}: ${onLightSurfaceTransparentDeep};
             `,
             light: css`
-                ${badgeTokens.color}: var(--on-dark-text-primary);
-                ${badgeTokens.background}: var(--on-dark-surface-transparent-card);
+                ${badgeTokens.color}: ${onDarkTextPrimary};
+                ${badgeTokens.background}: ${onDarkSurfaceTransparentCard};
             `
         },
         size: {

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

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