@salutejs/sdds-serv 0.355.0-next-sbcom.0 → 0.355.0

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

@@ -1,4 +1,5 @@
 import { css, avatarTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
+import { bodyS, bodyXXS, inverseTextPrimary, onDarkSurfaceSolidDefault, onDarkSurfaceTransparentCard, onDarkTextPrimary, onLightSurfaceSolidDefault, onLightSurfaceTransparentDeep, onLightTextPrimary, surfaceAccent, surfaceClear, surfaceNegative, surfacePositive, surfaceSolidDefault, surfaceSolidTertiary, surfaceTransparentAccent, surfaceTransparentNegative, surfaceTransparentPositive, surfaceTransparentSecondary, surfaceTransparentWarning, surfaceWarning, textAccent, textAccentGradient, textNegative, textPositive, textPrimary, textWarning } from '@salutejs/sdds-themes/tokens/sdds_serv';
 export const config = {
     defaults: {
         view: 'default',
@@ -8,10 +9,10 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${tokens.color}: var(--text-accent-gradient);
+                ${tokens.color}: ${textAccentGradient};
                 ${tokens.backgroundColor}: linear-gradient(94deg, rgba(62, 121, 240, 0.2) 6.49%, rgba(39, 198, 229, 0.2) 93.51%);
-                ${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);
             `
@@ -31,12 +32,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;
@@ -48,12 +49,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;
@@ -70,12 +71,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;
@@ -87,12 +88,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;
@@ -109,12 +110,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;
@@ -126,12 +127,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;
@@ -146,12 +147,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%;
@@ -159,6 +160,14 @@ export const config = {
                 ${tokens.fontWeight}: 0;
                 ${tokens.lineHeight}: 0;
                 ${tokens.statusIconSize}: 0;
+                ${tokens.borderRadius}: 50%;
+            `
+        },
+        focused: {
+            true: css`
+                ${tokens.outlineSize}: 0.1rem;
+                ${tokens.outlineOffset}: -0.2rem;
+                ${tokens.outlineColor}: ${surfaceAccent};
             `
         },
         shape: {
@@ -174,104 +183,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/emotion/es/components/Badge/Badge.clear.config.js

@@ -1,4 +1,5 @@
 import { css, badgeTokens } from '@salutejs/plasma-new-hope/emotion';
+import { onDarkTextPrimary, onLightTextPrimary, textAccent, textNegative, textPositive, textPrimary, textWarning } from '@salutejs/sdds-themes/tokens/sdds_serv';
 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/emotion/es/components/Badge/Badge.config.js

@@ -1,4 +1,5 @@
 import { css, badgeTokens } from '@salutejs/plasma-new-hope/emotion';
+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_serv';
 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/emotion/es/components/Badge/Badge.transparent.config.js

@@ -1,4 +1,5 @@
 import { css, badgeTokens } from '@salutejs/plasma-new-hope/emotion';
+import { onDarkSurfaceTransparentCard, onDarkTextPrimary, onLightSurfaceTransparentDeep, surfaceTransparentAccent, surfaceTransparentNegative, surfaceTransparentPositive, surfaceTransparentSecondary, surfaceTransparentWarning, textAccent, textNegative, textPositive, textPrimary, textWarning } from '@salutejs/sdds-themes/tokens/sdds_serv';
 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/emotion/es/components/Breadcrumbs/Breadcrumbs.config.js

@@ -1,4 +1,5 @@
 import { css, breadcrumbsTokens } from '@salutejs/plasma-new-hope/emotion';
+import { bodyL, bodyLBold, bodyM, bodyMBold, bodyS, bodySBold, bodyXS, bodyXSBold, surfaceAccent, textPrimary } from '@salutejs/sdds-themes/tokens/sdds_serv';
 export const config = {
     defaults: {
         view: 'default',
@@ -7,53 +8,53 @@ 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: {
             l: css`
                 ${breadcrumbsTokens.breadcrumbsGap}: 0.5rem;
 
-                ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-l-font-family);
-                ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-l-font-size);
-                ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-l-font-style);
-                ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-l-bold-weight);
-                ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyL.fontFamily};
+                ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyL.fontSize};
+                ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyL.fontStyle};
+                ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyLBold.fontWeight};
+                ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyL.letterSpacing};
+                ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyL.lineHeight};
             `,
             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};
             `,
             xs: css`
                 ${breadcrumbsTokens.breadcrumbsGap}: 0rem;
 
-                ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-xs-bold-weight);
-                ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyXS.fontFamily};
+                ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyXS.fontSize};
+                ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyXS.fontStyle};
+                ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyXSBold.fontWeight};
+                ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyXS.letterSpacing};
+                ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyXS.lineHeight};
             `
         }
     }