@salutejs/sdds-platform-ai 0.356.0-next-sbcom.0 → 0.357.0-dev.0

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

@@ -1,4 +1,5 @@
 import { css, progressTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyL, bodyM, bodyXS, surfaceAccent, surfaceAccentGradient, surfaceInfo, surfaceNegative, surfacePositive, surfaceSolidDefault, surfaceTransparentSecondary, surfaceTransparentTertiary, surfaceWarning, textNegative, textPositive, textPrimary, textSecondary, textWarning } from '@salutejs/sdds-themes/tokens/sdds_platform_ai';
 export const config = {
     defaults: {
         view: 'default',
@@ -8,68 +9,68 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary);
-                ${progressTokens.progressFilledBackgroundColor}: var(--surface-solid-default);
-                ${progressTokens.labelColor}: var(--text-primary);
-                ${progressTokens.labelIconColor}: var(--text-primary);
-                ${progressTokens.valueColor}: var(--text-secondary);
-                ${progressTokens.captionColor}: var(--text-secondary);
+                ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary};
+                ${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidDefault};
+                ${progressTokens.labelColor}: ${textPrimary};
+                ${progressTokens.labelIconColor}: ${textPrimary};
+                ${progressTokens.valueColor}: ${textSecondary};
+                ${progressTokens.captionColor}: ${textSecondary};
             `,
             secondary: css`
-                ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary);
-                ${progressTokens.progressFilledBackgroundColor}: var(--surface-transparent-tertiary);
-                ${progressTokens.labelColor}: var(--text-primary);
-                ${progressTokens.labelIconColor}: var(--text-primary);
-                ${progressTokens.valueColor}: var(--text-secondary);
-                ${progressTokens.captionColor}: var(--text-secondary);
+                ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary};
+                ${progressTokens.progressFilledBackgroundColor}: ${surfaceTransparentTertiary};
+                ${progressTokens.labelColor}: ${textPrimary};
+                ${progressTokens.labelIconColor}: ${textPrimary};
+                ${progressTokens.valueColor}: ${textSecondary};
+                ${progressTokens.captionColor}: ${textSecondary};
             `,
             accent: css`
-                ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary);
-                ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent);
-                ${progressTokens.labelColor}: var(--text-primary);
-                ${progressTokens.labelIconColor}: var(--text-primary);
-                ${progressTokens.valueColor}: var(--text-secondary);
-                ${progressTokens.captionColor}: var(--text-secondary);
+                ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary};
+                ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccent};
+                ${progressTokens.labelColor}: ${textPrimary};
+                ${progressTokens.labelIconColor}: ${textPrimary};
+                ${progressTokens.valueColor}: ${textSecondary};
+                ${progressTokens.captionColor}: ${textSecondary};
             `,
             accentGradient: css`
-                ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary);
-                ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent-gradient);
-                ${progressTokens.labelColor}: var(--text-primary);
-                ${progressTokens.labelIconColor}: var(--text-primary);
-                ${progressTokens.valueColor}: var(--text-secondary);
-                ${progressTokens.captionColor}: var(--text-secondary);
+                ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary};
+                ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccentGradient};
+                ${progressTokens.labelColor}: ${textPrimary};
+                ${progressTokens.labelIconColor}: ${textPrimary};
+                ${progressTokens.valueColor}: ${textSecondary};
+                ${progressTokens.captionColor}: ${textSecondary};
             `,
             info: css`
-                ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary);
-                ${progressTokens.progressFilledBackgroundColor}: var(--surface-info);
-                ${progressTokens.labelColor}: var(--text-primary);
-                ${progressTokens.labelIconColor}: var(--text-primary);
-                ${progressTokens.valueColor}: var(--text-secondary);
-                ${progressTokens.captionColor}: var(--text-secondary);
+                ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary};
+                ${progressTokens.progressFilledBackgroundColor}: ${surfaceInfo};
+                ${progressTokens.labelColor}: ${textPrimary};
+                ${progressTokens.labelIconColor}: ${textPrimary};
+                ${progressTokens.valueColor}: ${textSecondary};
+                ${progressTokens.captionColor}: ${textSecondary};
             `,
             positive: css`
-                ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary);
-                ${progressTokens.progressFilledBackgroundColor}: var(--surface-positive);
-                ${progressTokens.labelColor}: var(--text-primary);
-                ${progressTokens.labelIconColor}: var(--text-primary);
-                ${progressTokens.valueColor}: var(--text-secondary);
-                ${progressTokens.captionColor}: var(--text-positive);
+                ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary};
+                ${progressTokens.progressFilledBackgroundColor}: ${surfacePositive};
+                ${progressTokens.labelColor}: ${textPrimary};
+                ${progressTokens.labelIconColor}: ${textPrimary};
+                ${progressTokens.valueColor}: ${textSecondary};
+                ${progressTokens.captionColor}: ${textPositive};
             `,
             warning: css`
-                ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary);
-                ${progressTokens.progressFilledBackgroundColor}: var(--surface-warning);
-                ${progressTokens.labelColor}: var(--text-primary);
-                ${progressTokens.labelIconColor}: var(--text-primary);
-                ${progressTokens.valueColor}: var(--text-secondary);
-                ${progressTokens.captionColor}: var(--text-warning);
+                ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary};
+                ${progressTokens.progressFilledBackgroundColor}: ${surfaceWarning};
+                ${progressTokens.labelColor}: ${textPrimary};
+                ${progressTokens.labelIconColor}: ${textPrimary};
+                ${progressTokens.valueColor}: ${textSecondary};
+                ${progressTokens.captionColor}: ${textWarning};
             `,
             negative: css`
-                ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary);
-                ${progressTokens.progressFilledBackgroundColor}: var(--surface-negative);
-                ${progressTokens.labelColor}: var(--text-primary);
-                ${progressTokens.labelIconColor}: var(--text-primary);
-                ${progressTokens.valueColor}: var(--text-secondary);
-                ${progressTokens.captionColor}: var(--text-negative);
+                ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary};
+                ${progressTokens.progressFilledBackgroundColor}: ${surfaceNegative};
+                ${progressTokens.labelColor}: ${textPrimary};
+                ${progressTokens.labelIconColor}: ${textPrimary};
+                ${progressTokens.valueColor}: ${textSecondary};
+                ${progressTokens.captionColor}: ${textNegative};
             `
         },
         size: {
@@ -78,27 +79,27 @@ export const config = {
                 ${progressTokens.labelWrapperGap}: 0.375rem;
                 ${progressTokens.labelWrapperMarginRight}: 1.25rem;
 
-                ${progressTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${progressTokens.labelFontSize}: var(--plasma-typo-body-m-font-size);
-                ${progressTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${progressTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${progressTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${progressTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${progressTokens.labelFontFamily}: ${bodyM.fontFamily};
+                ${progressTokens.labelFontSize}: ${bodyM.fontSize};
+                ${progressTokens.labelFontStyle}: ${bodyM.fontStyle};
+                ${progressTokens.labelFontWeight}: ${bodyM.fontWeight};
+                ${progressTokens.labelLetterSpacing}: ${bodyM.letterSpacing};
+                ${progressTokens.labelLineHeight}: ${bodyM.lineHeight};
 
-                ${progressTokens.valueFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${progressTokens.valueFontSize}: var(--plasma-typo-body-m-font-size);
-                ${progressTokens.valueFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${progressTokens.valueFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${progressTokens.valueLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${progressTokens.valueLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${progressTokens.valueFontFamily}: ${bodyM.fontFamily};
+                ${progressTokens.valueFontSize}: ${bodyM.fontSize};
+                ${progressTokens.valueFontStyle}: ${bodyM.fontStyle};
+                ${progressTokens.valueFontWeight}: ${bodyM.fontWeight};
+                ${progressTokens.valueLetterSpacing}: ${bodyM.letterSpacing};
+                ${progressTokens.valueLineHeight}: ${bodyM.lineHeight};
                 ${progressTokens.valueMarginLeft}: 1.25rem;
 
-                ${progressTokens.captionFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${progressTokens.captionFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${progressTokens.captionFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${progressTokens.captionFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${progressTokens.captionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${progressTokens.captionLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${progressTokens.captionFontFamily}: ${bodyXS.fontFamily};
+                ${progressTokens.captionFontSize}: ${bodyXS.fontSize};
+                ${progressTokens.captionFontStyle}: ${bodyXS.fontStyle};
+                ${progressTokens.captionFontWeight}: ${bodyXS.fontWeight};
+                ${progressTokens.captionLetterSpacing}: ${bodyXS.letterSpacing};
+                ${progressTokens.captionLineHeight}: ${bodyXS.lineHeight};
                 ${progressTokens.captionMarginTop}: 0.5rem;
             `
         },
@@ -138,12 +139,12 @@ export const config = {
             size: 'm',
             valuePlacement: 'top',
             style: css`
-                ${progressTokens.valueFontFamily}: var(--plasma-typo-body-l-font-family);
-                ${progressTokens.valueFontSize}: var(--plasma-typo-body-l-font-size);
-                ${progressTokens.valueFontStyle}: var(--plasma-typo-body-l-font-style);
-                ${progressTokens.valueFontWeight}: var(--plasma-typo-body-l-font-weight);
-                ${progressTokens.valueLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${progressTokens.valueLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${progressTokens.valueFontFamily}: ${bodyL.fontFamily};
+                ${progressTokens.valueFontSize}: ${bodyL.fontSize};
+                ${progressTokens.valueFontStyle}: ${bodyL.fontStyle};
+                ${progressTokens.valueFontWeight}: ${bodyL.fontWeight};
+                ${progressTokens.valueLetterSpacing}: ${bodyL.letterSpacing};
+                ${progressTokens.valueLineHeight}: ${bodyL.lineHeight};
             `
         }
     ]

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

@@ -1,4 +1,5 @@
 import { css, progressBarCircularTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyL, bodyM, bodyS, bodyXS, bodyXXS, h2, h2Bold, h5, h5Bold, surfaceAccent, surfaceInfo, surfaceNegative, surfacePositive, surfaceSolidDefault, surfaceTransparentSecondary, surfaceTransparentTertiary, surfaceWarning, textPrimary } from '@salutejs/sdds-themes/tokens/sdds_platform_ai';
 export const config = {
     defaults: {
         view: 'default',
@@ -7,39 +8,39 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary);
-                ${progressBarCircularTokens.progressStroke}: var(--surface-solid-default);
-                ${progressBarCircularTokens.contentColor}: var(--text-primary);
+                ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary};
+                ${progressBarCircularTokens.progressStroke}: ${surfaceSolidDefault};
+                ${progressBarCircularTokens.contentColor}: ${textPrimary};
             `,
             secondary: css`
-                ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary);
-                ${progressBarCircularTokens.progressStroke}: var(--surface-transparent-secondary);
-                ${progressBarCircularTokens.contentColor}: var(--text-primary);
+                ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary};
+                ${progressBarCircularTokens.progressStroke}: ${surfaceTransparentSecondary};
+                ${progressBarCircularTokens.contentColor}: ${textPrimary};
             `,
             accent: css`
-                ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary);
-                ${progressBarCircularTokens.progressStroke}: var(--surface-accent);
-                ${progressBarCircularTokens.contentColor}: var(--text-primary);
+                ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary};
+                ${progressBarCircularTokens.progressStroke}: ${surfaceAccent};
+                ${progressBarCircularTokens.contentColor}: ${textPrimary};
             `,
             positive: css`
-                ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary);
-                ${progressBarCircularTokens.progressStroke}: var(--surface-positive);
-                ${progressBarCircularTokens.contentColor}: var(--text-primary);
+                ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary};
+                ${progressBarCircularTokens.progressStroke}: ${surfacePositive};
+                ${progressBarCircularTokens.contentColor}: ${textPrimary};
             `,
             warning: css`
-                ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary);
-                ${progressBarCircularTokens.progressStroke}: var(--surface-warning);
-                ${progressBarCircularTokens.contentColor}: var(--text-primary);
+                ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary};
+                ${progressBarCircularTokens.progressStroke}: ${surfaceWarning};
+                ${progressBarCircularTokens.contentColor}: ${textPrimary};
             `,
             negative: css`
-                ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary);
-                ${progressBarCircularTokens.progressStroke}: var(--surface-negative);
-                ${progressBarCircularTokens.contentColor}: var(--text-primary);
+                ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary};
+                ${progressBarCircularTokens.progressStroke}: ${surfaceNegative};
+                ${progressBarCircularTokens.contentColor}: ${textPrimary};
             `,
             info: css`
-                ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary);
-                ${progressBarCircularTokens.progressStroke}: var(--surface-info);
-                ${progressBarCircularTokens.contentColor}: var(--text-primary);
+                ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary};
+                ${progressBarCircularTokens.progressStroke}: ${surfaceInfo};
+                ${progressBarCircularTokens.contentColor}: ${textPrimary};
             `
         },
         size: {
@@ -49,12 +50,12 @@ export const config = {
                 ${progressBarCircularTokens.width}: 8rem;
                 ${progressBarCircularTokens.strokeWidth}: 0.25rem;
                 ${progressBarCircularTokens.strokeSize}: 4;
-                ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-h2-font-family);
-                ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-h2-font-size);
-                ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-h2-font-style);
-                ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-h2-bold-font-weight);
-                ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-h2-letter-spacing);
-                ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-h2-line-height);
+                ${progressBarCircularTokens.contentFontFamily}: ${h2.fontFamily};
+                ${progressBarCircularTokens.contentFontSize}: ${h2.fontSize};
+                ${progressBarCircularTokens.contentFontStyle}: ${h2.fontStyle};
+                ${progressBarCircularTokens.contentFontWeight}: ${h2Bold.fontWeight};
+                ${progressBarCircularTokens.contentLetterSpacing}: ${h2.letterSpacing};
+                ${progressBarCircularTokens.contentLineHeight}: ${h2.lineHeight};
             `,
             xl: css`
                 ${progressBarCircularTokens.size}: 88;
@@ -62,12 +63,12 @@ export const config = {
                 ${progressBarCircularTokens.width}: 5.5rem;
                 ${progressBarCircularTokens.strokeWidth}: 0.25rem;
                 ${progressBarCircularTokens.strokeSize}: 4;
-                ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-h5-font-family);
-                ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-h5-font-size);
-                ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-h5-font-style);
-                ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-h5-bold-font-weight);
-                ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-h5-letter-spacing);
-                ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-h5-line-height);
+                ${progressBarCircularTokens.contentFontFamily}: ${h5.fontFamily};
+                ${progressBarCircularTokens.contentFontSize}: ${h5.fontSize};
+                ${progressBarCircularTokens.contentFontStyle}: ${h5.fontStyle};
+                ${progressBarCircularTokens.contentFontWeight}: ${h5Bold.fontWeight};
+                ${progressBarCircularTokens.contentLetterSpacing}: ${h5.letterSpacing};
+                ${progressBarCircularTokens.contentLineHeight}: ${h5.lineHeight};
             `,
             l: css`
                 ${progressBarCircularTokens.size}: 56;
@@ -75,12 +76,12 @@ export const config = {
                 ${progressBarCircularTokens.width}: 3.5rem;
                 ${progressBarCircularTokens.strokeWidth}: 0.125rem;
                 ${progressBarCircularTokens.strokeSize}: 2;
-                ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-l-font-family);
-                ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-l-font-size);
-                ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-l-font-style);
-                ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-l-body-font-weight);
-                ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${progressBarCircularTokens.contentFontFamily}: ${bodyL.fontFamily};
+                ${progressBarCircularTokens.contentFontSize}: ${bodyL.fontSize};
+                ${progressBarCircularTokens.contentFontStyle}: ${bodyL.fontStyle};
+                ${progressBarCircularTokens.contentFontWeight}: ${bodyL.fontWeight};
+                ${progressBarCircularTokens.contentLetterSpacing}: ${bodyL.letterSpacing};
+                ${progressBarCircularTokens.contentLineHeight}: ${bodyL.lineHeight};
             `,
             m: css`
                 ${progressBarCircularTokens.size}: 48;
@@ -88,12 +89,12 @@ export const config = {
                 ${progressBarCircularTokens.width}: 3rem;
                 ${progressBarCircularTokens.strokeWidth}: 0.125rem;
                 ${progressBarCircularTokens.strokeSize}: 2;
-                ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-m-font-size);
-                ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-m-body-font-weight);
-                ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${progressBarCircularTokens.contentFontFamily}: ${bodyM.fontFamily};
+                ${progressBarCircularTokens.contentFontSize}: ${bodyM.fontSize};
+                ${progressBarCircularTokens.contentFontStyle}: ${bodyM.fontStyle};
+                ${progressBarCircularTokens.contentFontWeight}: ${bodyM.fontWeight};
+                ${progressBarCircularTokens.contentLetterSpacing}: ${bodyM.letterSpacing};
+                ${progressBarCircularTokens.contentLineHeight}: ${bodyM.lineHeight};
             `,
             s: css`
                 ${progressBarCircularTokens.size}: 32;
@@ -101,12 +102,12 @@ export const config = {
                 ${progressBarCircularTokens.width}: 2.25rem;
                 ${progressBarCircularTokens.strokeWidth}: 0.125rem;
                 ${progressBarCircularTokens.strokeSize}: 2;
-                ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-s-font-size);
-                ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-s-body-font-weight);
-                ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${progressBarCircularTokens.contentFontFamily}: ${bodyS.fontFamily};
+                ${progressBarCircularTokens.contentFontSize}: ${bodyS.fontSize};
+                ${progressBarCircularTokens.contentFontStyle}: ${bodyS.fontStyle};
+                ${progressBarCircularTokens.contentFontWeight}: ${bodyS.fontWeight};
+                ${progressBarCircularTokens.contentLetterSpacing}: ${bodyS.letterSpacing};
+                ${progressBarCircularTokens.contentLineHeight}: ${bodyS.lineHeight};
             `,
             xs: css`
                 ${progressBarCircularTokens.size}: 24;
@@ -114,12 +115,12 @@ export const config = {
                 ${progressBarCircularTokens.width}: 1.5rem;
                 ${progressBarCircularTokens.strokeWidth}: 0.125rem;
                 ${progressBarCircularTokens.strokeSize}: 2;
-                ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-xs-body-font-weight);
-                ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${progressBarCircularTokens.contentFontFamily}: ${bodyXS.fontFamily};
+                ${progressBarCircularTokens.contentFontSize}: ${bodyXS.fontSize};
+                ${progressBarCircularTokens.contentFontStyle}: ${bodyXS.fontStyle};
+                ${progressBarCircularTokens.contentFontWeight}: ${bodyXS.fontWeight};
+                ${progressBarCircularTokens.contentLetterSpacing}: ${bodyXS.letterSpacing};
+                ${progressBarCircularTokens.contentLineHeight}: ${bodyXS.lineHeight};
             `,
             xxs: css`
                 ${progressBarCircularTokens.size}: 16;
@@ -127,12 +128,12 @@ export const config = {
                 ${progressBarCircularTokens.width}: 1rem;
                 ${progressBarCircularTokens.strokeWidth}: 0.125rem;
                 ${progressBarCircularTokens.strokeSize}: 2;
-                ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-xxs-font-family);
-                ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-xxs-font-size);
-                ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-xxs-font-style);
-                ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-xxs-body-font-weight);
-                ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
-                ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-xxs-line-height);
+                ${progressBarCircularTokens.contentFontFamily}: ${bodyXXS.fontFamily};
+                ${progressBarCircularTokens.contentFontSize}: ${bodyXXS.fontSize};
+                ${progressBarCircularTokens.contentFontStyle}: ${bodyXXS.fontStyle};
+                ${progressBarCircularTokens.contentFontWeight}: ${bodyXXS.fontWeight};
+                ${progressBarCircularTokens.contentLetterSpacing}: ${bodyXXS.letterSpacing};
+                ${progressBarCircularTokens.contentLineHeight}: ${bodyXXS.lineHeight};
             `
         }
     }

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

@@ -1,4 +1,5 @@
 import { css, radioboxTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyM, bodyS, bodyXS, onDarkTextPrimary, textAccent, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_platform_ai';
 export const config = {
     defaults: {
         view: 'accent',
@@ -19,18 +20,18 @@ export const config = {
                 ${radioboxTokens.contentTopOffset}: 0;
                 ${radioboxTokens.contentLeftOffset}: 0.5rem;
                 ${radioboxTokens.descriptionMarginTop}: 0.125rem;
-                ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size);
-                ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height);
-                ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${radioboxTokens.labelFontFamily}: ${bodyS.fontFamily};
+                ${radioboxTokens.labelFontSize}: ${bodyS.fontSize};
+                ${radioboxTokens.labelFontStyle}: ${bodyS.fontStyle};
+                ${radioboxTokens.labelFontWeight}: ${bodyS.fontWeight};
+                ${radioboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing};
+                ${radioboxTokens.labelLineHeight}: ${bodyS.lineHeight};
+                ${radioboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily};
+                ${radioboxTokens.descriptionFontSize}: ${bodyXS.fontSize};
+                ${radioboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle};
+                ${radioboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight};
+                ${radioboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing};
+                ${radioboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight};
             `,
             m: css`
                 ${radioboxTokens.margin}: 0;
@@ -42,29 +43,29 @@ export const config = {
                 ${radioboxTokens.contentTopOffset}: 0.125rem;
                 ${radioboxTokens.contentLeftOffset}: 0.625rem;
                 ${radioboxTokens.descriptionMarginTop}: 0.125rem;
-                ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size);
-                ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height);
-                ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size);
-                ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${radioboxTokens.labelFontFamily}: ${bodyM.fontFamily};
+                ${radioboxTokens.labelFontSize}: ${bodyM.fontSize};
+                ${radioboxTokens.labelFontStyle}: ${bodyM.fontStyle};
+                ${radioboxTokens.labelFontWeight}: ${bodyM.fontWeight};
+                ${radioboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing};
+                ${radioboxTokens.labelLineHeight}: ${bodyM.lineHeight};
+                ${radioboxTokens.descriptionFontFamily}: ${bodyS.fontFamily};
+                ${radioboxTokens.descriptionFontSize}: ${bodyS.fontSize};
+                ${radioboxTokens.descriptionFontStyle}: ${bodyS.fontStyle};
+                ${radioboxTokens.descriptionFontWeight}: ${bodyS.fontWeight};
+                ${radioboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing};
+                ${radioboxTokens.descriptionLineHeight}: ${bodyS.lineHeight};
             `
         },
         /**
          * Вид контрола.
          */ view: {
             accent: css`
-                ${radioboxTokens.fillColor}: var(--text-primary);
-                ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary);
-                ${radioboxTokens.descriptionColor}: var(--text-secondary);
+                ${radioboxTokens.fillColor}: ${textPrimary};
+                ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary};
+                ${radioboxTokens.descriptionColor}: ${textSecondary};
                 ${radioboxTokens.triggerBackgroundColor}: transparent;
-                ${radioboxTokens.triggerBorderColor}: var(--text-secondary);
+                ${radioboxTokens.triggerBorderColor}: ${textSecondary};
                 ${radioboxTokens.triggerBorderCheckedColor}: transparent;
             `
         },
@@ -75,7 +76,7 @@ export const config = {
         },
         focused: {
             true: css`
-                ${radioboxTokens.focusColor}: var(--text-accent);
+                ${radioboxTokens.focusColor}: ${textAccent};
             `
         }
     }