npm - @salutejs/sdds-serv - Versions diffs - 0.355.0-next-sbcom.0 → 0.355.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1094) hide show

package/dist/emotion/es/components/Rating/Rating.config.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { css, ratingTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
+import { bodyL, bodyLBold, bodyM, bodyMBold, bodyS, bodySBold, bodyXS, bodyXSBold, bodyXXS, bodyXXSBold, dsplL, dsplLBold, dsplM, dsplMBold, dsplS, dsplSBold, h1, h1Bold, h2, h2Bold, h3, h3Bold, h4, h4Bold, h5, h5Bold, h6, h6Bold, textPrimary, textSecondary, textTertiary } from '@salutejs/sdds-themes/tokens/sdds_serv';
 export const config = {
     defaults: {
         view: 'default',
@@ -7,36 +8,36 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${tokens.color}: var(--text-primary);
-                ${tokens.helperTextColor}: var(--text-secondary);
-                ${tokens.iconColor}: var(--text-primary);
-                ${tokens.outlineIconColor}: var(--text-primary);
+                ${tokens.color}: ${textPrimary};
+                ${tokens.helperTextColor}: ${textSecondary};
+                ${tokens.iconColor}: ${textPrimary};
+                ${tokens.outlineIconColor}: ${textPrimary};
             `,
             accent: css`
-                ${tokens.color}: var(--text-primary);
-                ${tokens.helperTextColor}: var(--text-secondary);
+                ${tokens.color}: ${textPrimary};
+                ${tokens.helperTextColor}: ${textSecondary};
                 // TODO: change with token data-yellow, when it will be added to theme
                 ${tokens.iconColor}: #F3A912;
-                ${tokens.outlineIconColor}: var(--text-tertiary);
+                ${tokens.outlineIconColor}: ${textTertiary};
             `
         },
         size: {
             l: css`
                 ${tokens.gap}: 0.25rem;
-                ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family);
-                ${tokens.fontSize}: var(--plasma-typo-body-l-font-size);
-                ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style);
-                ${tokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight);
-                ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height);
+                ${tokens.fontFamily}: ${bodyL.fontFamily};
+                ${tokens.fontSize}: ${bodyL.fontSize};
+                ${tokens.fontStyle}: ${bodyL.fontStyle};
+                ${tokens.fontWeight}: ${bodyLBold.fontWeight};
+                ${tokens.letterSpacing}: ${bodyL.letterSpacing};
+                ${tokens.lineHeight}: ${bodyL.lineHeight};
-                ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.helperTextFontSize}: ${bodyXS.fontSize};
+                ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight};
                 ${tokens.contentGap}: 0.625rem;
                 ${tokens.singleIconContentGap}: 0.25rem;
@@ -47,19 +48,19 @@ export const config = {
             m: css`
                 ${tokens.gap}: 0.25rem;
-                ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family);
-                ${tokens.fontSize}: var(--plasma-typo-body-m-font-size);
-                ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style);
-                ${tokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight);
-                ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height);
+                ${tokens.fontFamily}: ${bodyM.fontFamily};
+                ${tokens.fontSize}: ${bodyM.fontSize};
+                ${tokens.fontStyle}: ${bodyM.fontStyle};
+                ${tokens.fontWeight}: ${bodyMBold.fontWeight};
+                ${tokens.letterSpacing}: ${bodyM.letterSpacing};
+                ${tokens.lineHeight}: ${bodyM.lineHeight};
-                ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.helperTextFontSize}: ${bodyXS.fontSize};
+                ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight};
                 ${tokens.contentGap}: 0.5rem;
                 ${tokens.singleIconContentGap}: 0.25rem;
@@ -70,19 +71,19 @@ export const config = {
             s: css`
                 ${tokens.gap}: 0.25rem;
-                ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family);
-                ${tokens.fontSize}: var(--plasma-typo-body-s-font-size);
-                ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style);
-                ${tokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tokens.fontFamily}: ${bodyS.fontFamily};
+                ${tokens.fontSize}: ${bodyS.fontSize};
+                ${tokens.fontStyle}: ${bodyS.fontStyle};
+                ${tokens.fontWeight}: ${bodySBold.fontWeight};
+                ${tokens.letterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.lineHeight}: ${bodyS.lineHeight};
-                ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.helperTextFontSize}: ${bodyXS.fontSize};
+                ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight};
                 ${tokens.contentGap}: 0.5rem;
                 ${tokens.singleIconContentGap}: 0.25rem;
@@ -93,19 +94,19 @@ export const config = {
             xs: css`
                 ${tokens.gap}: 0.25rem;
-                ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight);
-                ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.fontFamily}: ${bodyXS.fontFamily};
+                ${tokens.fontSize}: ${bodyXS.fontSize};
+                ${tokens.fontStyle}: ${bodyXS.fontStyle};
+                ${tokens.fontWeight}: ${bodyXSBold.fontWeight};
+                ${tokens.letterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.lineHeight}: ${bodyXS.lineHeight};
-                ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xxs-font-family);
-                ${tokens.helperTextFontSize}: var(--plasma-typo-body-xxs-font-size);
-                ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xxs-font-style);
-                ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xxs-font-weight);
-                ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
-                ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xxs-line-height);
+                ${tokens.helperTextFontFamily}: ${bodyXXS.fontFamily};
+                ${tokens.helperTextFontSize}: ${bodyXXS.fontSize};
+                ${tokens.helperTextFontStyle}: ${bodyXXS.fontStyle};
+                ${tokens.helperTextFontWeight}: ${bodyXXS.fontWeight};
+                ${tokens.helperTextLetterSpacing}: ${bodyXXS.letterSpacing};
+                ${tokens.helperTextLineHeight}: ${bodyXXS.lineHeight};
                 ${tokens.iconMarginBottom}: 0.125rem;
                 ${tokens.contentGap}: 0.375rem;
@@ -120,19 +121,19 @@ export const config = {
             xxs: css`
                 ${tokens.gap}: 0.25rem;
-                ${tokens.fontFamily}: var(--plasma-typo-body-xxs-font-family);
-                ${tokens.fontSize}: var(--plasma-typo-body-xxs-font-size);
-                ${tokens.fontStyle}: var(--plasma-typo-body-xxs-font-style);
-                ${tokens.fontWeight}: var(--plasma-typo-body-xxs-bold-font-weight);
-                ${tokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
-                ${tokens.lineHeight}: var(--plasma-typo-body-xxs-line-height);
+                ${tokens.fontFamily}: ${bodyXXS.fontFamily};
+                ${tokens.fontSize}: ${bodyXXS.fontSize};
+                ${tokens.fontStyle}: ${bodyXXS.fontStyle};
+                ${tokens.fontWeight}: ${bodyXXSBold.fontWeight};
+                ${tokens.letterSpacing}: ${bodyXXS.letterSpacing};
+                ${tokens.lineHeight}: ${bodyXXS.lineHeight};
-                ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xxs-font-family);
-                ${tokens.helperTextFontSize}: var(--plasma-typo-body-xxs-font-size);
-                ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xxs-font-style);
-                ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xxs-font-weight);
-                ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
-                ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xxs-line-height);
+                ${tokens.helperTextFontFamily}: ${bodyXXS.fontFamily};
+                ${tokens.helperTextFontSize}: ${bodyXXS.fontSize};
+                ${tokens.helperTextFontStyle}: ${bodyXXS.fontStyle};
+                ${tokens.helperTextFontWeight}: ${bodyXXS.fontWeight};
+                ${tokens.helperTextLetterSpacing}: ${bodyXXS.letterSpacing};
+                ${tokens.helperTextLineHeight}: ${bodyXXS.lineHeight};
                 ${tokens.contentGap}: 0.375rem;
                 ${tokens.singleIconContentGap}: 0.25rem;
@@ -145,19 +146,19 @@ export const config = {
             h1: css`
                 ${tokens.gap}: 0.25rem;
-                ${tokens.fontFamily}: var(--plasma-typo-h1-font-family);
-                ${tokens.fontSize}: var(--plasma-typo-h1-font-size);
-                ${tokens.fontStyle}: var(--plasma-typo-h1-font-style);
-                ${tokens.fontWeight}: var(--plasma-typo-h1-bold-font-weight);
-                ${tokens.letterSpacing}: var(--plasma-typo-h1-letter-spacing);
-                ${tokens.lineHeight}: var(--plasma-typo-h1-line-height);
+                ${tokens.fontFamily}: ${h1.fontFamily};
+                ${tokens.fontSize}: ${h1.fontSize};
+                ${tokens.fontStyle}: ${h1.fontStyle};
+                ${tokens.fontWeight}: ${h1Bold.fontWeight};
+                ${tokens.letterSpacing}: ${h1.letterSpacing};
+                ${tokens.lineHeight}: ${h1.lineHeight};
-                ${tokens.helperTextFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${tokens.helperTextFontSize}: var(--plasma-typo-body-m-font-size);
-                ${tokens.helperTextFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${tokens.helperTextFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${tokens.helperTextLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${tokens.helperTextFontFamily}: ${bodyM.fontFamily};
+                ${tokens.helperTextFontSize}: ${bodyM.fontSize};
+                ${tokens.helperTextFontStyle}: ${bodyM.fontStyle};
+                ${tokens.helperTextFontWeight}: ${bodyM.fontWeight};
+                ${tokens.helperTextLetterSpacing}: ${bodyM.letterSpacing};
+                ${tokens.helperTextLineHeight}: ${bodyM.lineHeight};
                 ${tokens.contentGap}: 1rem;
                 ${tokens.singleIconContentGap}: 0.5rem;
@@ -176,19 +177,19 @@ export const config = {
             h2: css`
                 ${tokens.gap}: 0.25rem;
-                ${tokens.fontFamily}: var(--plasma-typo-h2-font-family);
-                ${tokens.fontSize}: var(--plasma-typo-h2-font-size);
-                ${tokens.fontStyle}: var(--plasma-typo-h2-font-style);
-                ${tokens.fontWeight}: var(--plasma-typo-h2-bold-font-weight);
-                ${tokens.letterSpacing}: var(--plasma-typo-h2-letter-spacing);
-                ${tokens.lineHeight}: var(--plasma-typo-h2-line-height);
+                ${tokens.fontFamily}: ${h2.fontFamily};
+                ${tokens.fontSize}: ${h2.fontSize};
+                ${tokens.fontStyle}: ${h2.fontStyle};
+                ${tokens.fontWeight}: ${h2Bold.fontWeight};
+                ${tokens.letterSpacing}: ${h2.letterSpacing};
+                ${tokens.lineHeight}: ${h2.lineHeight};
-                ${tokens.helperTextFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${tokens.helperTextFontSize}: var(--plasma-typo-body-s-font-size);
-                ${tokens.helperTextFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${tokens.helperTextFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tokens.helperTextLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tokens.helperTextFontFamily}: ${bodyS.fontFamily};
+                ${tokens.helperTextFontSize}: ${bodyS.fontSize};
+                ${tokens.helperTextFontStyle}: ${bodyS.fontStyle};
+                ${tokens.helperTextFontWeight}: ${bodyS.fontWeight};
+                ${tokens.helperTextLetterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.helperTextLineHeight}: ${bodyS.lineHeight};
                 ${tokens.contentGap}: 0.875rem;
                 ${tokens.singleIconContentGap}: 0.5rem;
@@ -207,19 +208,19 @@ export const config = {
             h3: css`
                 ${tokens.gap}: 0.25rem;
-                ${tokens.fontFamily}: var(--plasma-typo-h3-font-family);
-                ${tokens.fontSize}: var(--plasma-typo-h3-font-size);
-                ${tokens.fontStyle}: var(--plasma-typo-h3-font-style);
-                ${tokens.fontWeight}: var(--plasma-typo-h3-bold-font-weight);
-                ${tokens.letterSpacing}: var(--plasma-typo-h3-letter-spacing);
-                ${tokens.lineHeight}: var(--plasma-typo-h3-line-height);
+                ${tokens.fontFamily}: ${h3.fontFamily};
+                ${tokens.fontSize}: ${h3.fontSize};
+                ${tokens.fontStyle}: ${h3.fontStyle};
+                ${tokens.fontWeight}: ${h3Bold.fontWeight};
+                ${tokens.letterSpacing}: ${h3.letterSpacing};
+                ${tokens.lineHeight}: ${h3.lineHeight};
-                ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.helperTextFontSize}: ${bodyXS.fontSize};
+                ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight};
                 ${tokens.contentGap}: 0.75rem;
                 ${tokens.singleIconContentGap}: 0.375rem;
@@ -238,19 +239,19 @@ export const config = {
             h4: css`
                 ${tokens.gap}: 0.25rem;
-                ${tokens.fontFamily}: var(--plasma-typo-h4-font-family);
-                ${tokens.fontSize}: var(--plasma-typo-h4-font-size);
-                ${tokens.fontStyle}: var(--plasma-typo-h4-font-style);
-                ${tokens.fontWeight}: var(--plasma-typo-h4-bold-font-weight);
-                ${tokens.letterSpacing}: var(--plasma-typo-h4-letter-spacing);
-                ${tokens.lineHeight}: var(--plasma-typo-h4-line-height);
+                ${tokens.fontFamily}: ${h4.fontFamily};
+                ${tokens.fontSize}: ${h4.fontSize};
+                ${tokens.fontStyle}: ${h4.fontStyle};
+                ${tokens.fontWeight}: ${h4Bold.fontWeight};
+                ${tokens.letterSpacing}: ${h4.letterSpacing};
+                ${tokens.lineHeight}: ${h4.lineHeight};
-                ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.helperTextFontSize}: ${bodyXS.fontSize};
+                ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight};
                 ${tokens.contentGap}: 0.625rem;
                 ${tokens.singleIconContentGap}: 0.25rem;
@@ -269,19 +270,19 @@ export const config = {
             h5: css`
                 ${tokens.gap}: 0.25rem;
-                ${tokens.fontFamily}: var(--plasma-typo-h5-font-family);
-                ${tokens.fontSize}: var(--plasma-typo-h5-font-size);
-                ${tokens.fontStyle}: var(--plasma-typo-h5-font-style);
-                ${tokens.fontWeight}: var(--plasma-typo-h5-bold-font-weight);
-                ${tokens.letterSpacing}: var(--plasma-typo-h5-letter-spacing);
-                ${tokens.lineHeight}: var(--plasma-typo-h5-line-height);
+                ${tokens.fontFamily}: ${h5.fontFamily};
+                ${tokens.fontSize}: ${h5.fontSize};
+                ${tokens.fontStyle}: ${h5.fontStyle};
+                ${tokens.fontWeight}: ${h5Bold.fontWeight};
+                ${tokens.letterSpacing}: ${h5.letterSpacing};
+                ${tokens.lineHeight}: ${h5.lineHeight};
-                ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.helperTextFontSize}: ${bodyXS.fontSize};
+                ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight};
                 ${tokens.contentGap}: 0.625rem;
                 ${tokens.singleIconContentGap}: 0.25rem;
@@ -300,19 +301,19 @@ export const config = {
             h6: css`
                 ${tokens.gap}: 0.25rem;
-                ${tokens.fontFamily}: var(--plasma-typo-h6-font-family);
-                ${tokens.fontSize}: var(--plasma-typo-h6-font-size);
-                ${tokens.fontStyle}: var(--plasma-typo-h6-font-style);
-                ${tokens.fontWeight}: var(--plasma-typo-h6-bold-font-weight);
-                ${tokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing);
-                ${tokens.lineHeight}: var(--plasma-typo-h6-line-height);
+                ${tokens.fontFamily}: ${h6.fontFamily};
+                ${tokens.fontSize}: ${h6.fontSize};
+                ${tokens.fontStyle}: ${h6.fontStyle};
+                ${tokens.fontWeight}: ${h6Bold.fontWeight};
+                ${tokens.letterSpacing}: ${h6.letterSpacing};
+                ${tokens.lineHeight}: ${h6.lineHeight};
-                ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.helperTextFontSize}: ${bodyXS.fontSize};
+                ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight};
                 ${tokens.contentGap}: 0.625rem;
                 ${tokens.singleIconContentGap}: 0.25rem;
@@ -331,19 +332,19 @@ export const config = {
             displayL: css`
                 ${tokens.gap}: 0.375rem;
-                ${tokens.fontFamily}: var(--plasma-typo-dspl-l-font-family);
-                ${tokens.fontSize}: var(--plasma-typo-dspl-l-font-size);
-                ${tokens.fontStyle}: var(--plasma-typo-dspl-l-font-style);
-                ${tokens.fontWeight}: var(--plasma-typo-dspl-l-bold-font-weight);
-                ${tokens.letterSpacing}: var(--plasma-typo-dspl-l-letter-spacing);
-                ${tokens.lineHeight}: var(--plasma-typo-dspl-l-line-height);
+                ${tokens.fontFamily}: ${dsplL.fontFamily};
+                ${tokens.fontSize}: ${dsplL.fontSize};
+                ${tokens.fontStyle}: ${dsplL.fontStyle};
+                ${tokens.fontWeight}: ${dsplLBold.fontWeight};
+                ${tokens.letterSpacing}: ${dsplL.letterSpacing};
+                ${tokens.lineHeight}: ${dsplL.lineHeight};
-                ${tokens.helperTextFontFamily}: var(--plasma-typo-h3-font-family);
-                ${tokens.helperTextFontSize}: var(--plasma-typo-h3-font-size);
-                ${tokens.helperTextFontStyle}: var(--plasma-typo-h3-font-style);
-                ${tokens.helperTextFontWeight}: var(--plasma-typo-h3-font-weight);
-                ${tokens.helperTextLetterSpacing}: var(--plasma-typo-h3-letter-spacing);
-                ${tokens.helperTextLineHeight}: var(--plasma-typo-h3-line-height);
+                ${tokens.helperTextFontFamily}: ${h3.fontFamily};
+                ${tokens.helperTextFontSize}: ${h3.fontSize};
+                ${tokens.helperTextFontStyle}: ${h3.fontStyle};
+                ${tokens.helperTextFontWeight}: ${h3.fontWeight};
+                ${tokens.helperTextLetterSpacing}: ${h3.letterSpacing};
+                ${tokens.helperTextLineHeight}: ${h3.lineHeight};
                 ${tokens.contentGap}: 1.5rem;
                 ${tokens.singleIconContentGap}: 0.75rem;
@@ -362,19 +363,19 @@ export const config = {
             displayM: css`
                 ${tokens.gap}: 0.375rem;
-                ${tokens.fontFamily}: var(--plasma-typo-dspl-m-font-family);
-                ${tokens.fontSize}: var(--plasma-typo-dspl-m-font-size);
-                ${tokens.fontStyle}: var(--plasma-typo-dspl-m-font-style);
-                ${tokens.fontWeight}: var(--plasma-typo-dspl-m-bold-font-weight);
-                ${tokens.letterSpacing}: var(--plasma-typo-dspl-m-letter-spacing);
-                ${tokens.lineHeight}: var(--plasma-typo-dspl-m-line-height);
+                ${tokens.fontFamily}: ${dsplM.fontFamily};
+                ${tokens.fontSize}: ${dsplM.fontSize};
+                ${tokens.fontStyle}: ${dsplM.fontStyle};
+                ${tokens.fontWeight}: ${dsplMBold.fontWeight};
+                ${tokens.letterSpacing}: ${dsplM.letterSpacing};
+                ${tokens.lineHeight}: ${dsplM.lineHeight};
-                ${tokens.helperTextFontFamily}: var(--plasma-typo-body-l-font-family);
-                ${tokens.helperTextFontSize}: var(--plasma-typo-body-l-font-size);
-                ${tokens.helperTextFontStyle}: var(--plasma-typo-body-l-font-style);
-                ${tokens.helperTextFontWeight}: var(--plasma-typo-body-l-font-weight);
-                ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${tokens.helperTextLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${tokens.helperTextFontFamily}: ${bodyL.fontFamily};
+                ${tokens.helperTextFontSize}: ${bodyL.fontSize};
+                ${tokens.helperTextFontStyle}: ${bodyL.fontStyle};
+                ${tokens.helperTextFontWeight}: ${bodyL.fontWeight};
+                ${tokens.helperTextLetterSpacing}: ${bodyL.letterSpacing};
+                ${tokens.helperTextLineHeight}: ${bodyL.lineHeight};
                 ${tokens.contentGap}: 1.5rem;
                 ${tokens.singleIconContentGap}: 0.75rem;
@@ -393,19 +394,19 @@ export const config = {
             displayS: css`
                 ${tokens.gap}: 0.375rem;
-                ${tokens.fontFamily}: var(--plasma-typo-dspl-s-font-family);
-                ${tokens.fontSize}: var(--plasma-typo-dspl-s-font-size);
-                ${tokens.fontStyle}: var(--plasma-typo-dspl-s-font-style);
-                ${tokens.fontWeight}: var(--plasma-typo-dspl-s-bold-font-weight);
-                ${tokens.letterSpacing}: var(--plasma-typo-dspl-s-letter-spacing);
-                ${tokens.lineHeight}: var(--plasma-typo-dspl-s-line-height);
-                ${tokens.helperTextFontFamily}: var(--plasma-typo-body-l-font-family);
-                ${tokens.helperTextFontSize}: var(--plasma-typo-body-l-font-size);
-                ${tokens.helperTextFontStyle}: var(--plasma-typo-body-l-font-style);
-                ${tokens.helperTextFontWeight}: var(--plasma-typo-body-l-font-weight);
-                ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${tokens.helperTextLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${tokens.fontFamily}: ${dsplS.fontFamily};
+                ${tokens.fontSize}: ${dsplS.fontSize};
+                ${tokens.fontStyle}: ${dsplS.fontStyle};
+                ${tokens.fontWeight}: ${dsplSBold.fontWeight};
+                ${tokens.letterSpacing}: ${dsplS.letterSpacing};
+                ${tokens.lineHeight}: ${dsplS.lineHeight};
+                ${tokens.helperTextFontFamily}: ${bodyL.fontFamily};
+                ${tokens.helperTextFontSize}: ${bodyL.fontSize};
+                ${tokens.helperTextFontStyle}: ${bodyL.fontStyle};
+                ${tokens.helperTextFontWeight}: ${bodyL.fontWeight};
+                ${tokens.helperTextLetterSpacing}: ${bodyL.letterSpacing};
+                ${tokens.helperTextLineHeight}: ${bodyL.lineHeight};
                 ${tokens.contentGap}: 1.5rem;
                 ${tokens.singleIconContentGap}: 0.75rem;

package/dist/emotion/es/components/Scrollbar/Scrollbar.config.js CHANGED Viewed

@@ -1,10 +1,11 @@
+import { surfaceTransparentPrimary, surfaceTransparentTertiary, surfaceTransparentTertiaryActive, surfaceTransparentTertiaryHover } from '@salutejs/sdds-themes/tokens/sdds_serv';
 export const config = {
     view: {
         default: {
-            trackColor: 'var(--surface-transparent-primary)',
-            thumbColor: 'var(--surface-transparent-tertiary)',
-            thumbHoverColor: 'var(--surface-transparent-tertiary-hover)',
-            thumbActiveColor: 'var(--surface-transparent-tertiary-active)'
+            trackColor: `${surfaceTransparentPrimary}`,
+            thumbColor: `${surfaceTransparentTertiary}`,
+            thumbHoverColor: `${surfaceTransparentTertiaryHover}`,
+            thumbActiveColor: `${surfaceTransparentTertiaryActive}`
         }
     },
     size: {

package/dist/emotion/es/components/Segment/SegmentGroup.config.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { css, segmentTokens } from '@salutejs/plasma-new-hope/emotion';
+import { surfaceTransparentSecondary, textAccent, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_serv';
 export const config = {
     defaults: {
         view: 'clear',
@@ -7,14 +8,14 @@ export const config = {
     variations: {
         view: {
             clear: css`
-                ${segmentTokens.arrowColor}: var(--text-secondary);
+                ${segmentTokens.arrowColor}: ${textSecondary};
                 ${segmentTokens.groupBackgroundColor}: transparent;
-                ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent);
+                ${segmentTokens.groupFilledBackgroundColor}: ${textAccent};
             `,
             filled: css`
-                ${segmentTokens.arrowColor}: var(--text-secondary);
+                ${segmentTokens.arrowColor}: ${textSecondary};
                 ${segmentTokens.groupBackgroundColor}: transparent;
-                ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent);
+                ${segmentTokens.groupFilledBackgroundColor}: ${textAccent};
             `
         },
         size: {
@@ -73,7 +74,7 @@ export const config = {
         },
         filledBackground: {
             true: css`
-                ${segmentTokens.groupFilledBackgroundColor}: var(--surface-transparent-secondary);
+                ${segmentTokens.groupFilledBackgroundColor}: ${surfaceTransparentSecondary};
             `
         },
         orientation: {