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

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

@@ -1,4 +1,5 @@
 import { css, iconButtonTokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyL, bodyLBold, bodyM, bodyMBold, bodyS, bodySBold, bodyXS, bodyXSBold, inverseTextPrimary, onDarkSurfaceSolidDefault, onDarkTextPrimary, onDarkTextPrimaryActive, onDarkTextPrimaryHover, onLightSurfaceTransparentDeep, onLightTextPrimary, onLightTextPrimaryActive, onLightTextPrimaryHover, surfaceAccent, surfaceAccentGradient, surfaceClear, surfaceNegative, surfaceNegativeActive, surfaceNegativeHover, surfacePositive, surfacePositiveActive, surfacePositiveHover, surfaceSolidDefault, surfaceSolidDefaultActive, surfaceSolidDefaultHover, surfaceTransparentSecondaryActive, surfaceTransparentSecondaryHover, surfaceWarning, surfaceWarningActive, surfaceWarningHover, textAccent, textPrimary } from '@salutejs/sdds-themes/tokens/sdds_platform_ai';
 export const config = {
     defaults: {
         view: 'default',
@@ -8,86 +9,86 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${iconButtonTokens.iconButtonColor}: var(--inverse-text-primary);
+                ${iconButtonTokens.iconButtonColor}: ${inverseTextPrimary};
 
-                ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-solid-default);
-                ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover);
-                ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active);
+                ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault};
+                ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover};
+                ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive};
 
                 ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor});
             `,
             accent: css`
-                ${iconButtonTokens.iconButtonColor}: var(--on-light-text-primary);
-                ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-accent-gradient);
+                ${iconButtonTokens.iconButtonColor}: ${onLightTextPrimary};
+                ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceAccentGradient};
 
                 ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor});
             `,
             secondary: css`
-                ${iconButtonTokens.iconButtonColor}: var(--text-primary);
+                ${iconButtonTokens.iconButtonColor}: ${textPrimary};
 
                 ${iconButtonTokens.iconButtonBackgroundColor}: transparent;
 
                 ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor});
 
-                ${iconButtonTokens.iconButtonBorderColor}: var(--text-primary);
-                ${iconButtonTokens.iconButtonBorderColorHover}: var(--text-primary);
-                ${iconButtonTokens.iconButtonBorderColorActive}: var(--text-primary);
+                ${iconButtonTokens.iconButtonBorderColor}: ${textPrimary};
+                ${iconButtonTokens.iconButtonBorderColorHover}: ${textPrimary};
+                ${iconButtonTokens.iconButtonBorderColorActive}: ${textPrimary};
             `,
             clear: css`
-                ${iconButtonTokens.iconButtonColor}: var(--text-primary);
+                ${iconButtonTokens.iconButtonColor}: ${textPrimary};
 
-                ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-clear);
-                ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover);
-                ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active);
+                ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceClear};
+                ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover};
+                ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive};
 
                 ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor});
             `,
             positive: css`
-                ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary);
+                ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary};
 
-                ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-positive);
-                ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover);
-                ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active);
+                ${iconButtonTokens.iconButtonBackgroundColor}: ${surfacePositive};
+                ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfacePositiveHover};
+                ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfacePositiveActive};
 
                 ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor});
             `,
             warning: css`
-                ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary);
+                ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary};
 
-                ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-warning);
-                ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover);
-                ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active);
+                ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceWarning};
+                ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceWarningHover};
+                ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceWarningActive};
 
                 ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor});
             `,
             negative: css`
-                ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary);
+                ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary};
 
-                ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-negative);
-                ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover);
-                ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active);
+                ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceNegative};
+                ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceNegativeHover};
+                ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceNegativeActive};
                 ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor});
             `,
             dark: css`
-                ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary);
-                ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover);
-                ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active);
+                ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary};
+                ${iconButtonTokens.iconButtonColorHover}: ${onDarkTextPrimaryHover};
+                ${iconButtonTokens.iconButtonColorActive}: ${onDarkTextPrimaryActive};
 
-                ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep);
+                ${iconButtonTokens.iconButtonBackgroundColor}: ${onLightSurfaceTransparentDeep};
                 ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor});
             `,
             black: css`
-                ${iconButtonTokens.iconButtonColor}: var(--text-accent);
+                ${iconButtonTokens.iconButtonColor}: ${textAccent};
 
-                ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-solid-default);
+                ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault};
                 ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor});
             `,
             white: css`
-                ${iconButtonTokens.iconButtonColor}: var(--on-light-text-primary);
-                ${iconButtonTokens.iconButtonColorHover}: var(--on-light-text-primary-hover);
-                ${iconButtonTokens.iconButtonColorActive}: var(--on-light-text-primary-active);
+                ${iconButtonTokens.iconButtonColor}: ${onLightTextPrimary};
+                ${iconButtonTokens.iconButtonColorHover}: ${onLightTextPrimaryHover};
+                ${iconButtonTokens.iconButtonColorActive}: ${onLightTextPrimaryActive};
 
-                ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default);
+                ${iconButtonTokens.iconButtonBackgroundColor}: ${onDarkSurfaceSolidDefault};
                 ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor});
             `
         },
@@ -98,12 +99,12 @@ export const config = {
                 ${iconButtonTokens.iconButtonPadding}: 1.375rem;
                 ${iconButtonTokens.iconButtonRadius}: 1rem;
 
-                ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family);
-                ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size);
-                ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style);
-                ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight);
-                ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${iconButtonTokens.iconButtonFontFamily}: ${bodyL.fontFamily};
+                ${iconButtonTokens.iconButtonFontSize}: ${bodyL.fontSize};
+                ${iconButtonTokens.iconButtonFontStyle}: ${bodyL.fontStyle};
+                ${iconButtonTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight};
+                ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing};
+                ${iconButtonTokens.iconButtonLineHeight}: ${bodyL.lineHeight};
 
                 ${iconButtonTokens.iconButtonSpinnerSize}: 1.5rem;
                 ${iconButtonTokens.iconButtonSpinnerColor}: inherit;
@@ -114,12 +115,12 @@ export const config = {
                 ${iconButtonTokens.iconButtonPadding}: 1.5rem;
                 ${iconButtonTokens.iconButtonRadius}: 0.875rem;
 
-                ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family);
-                ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size);
-                ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style);
-                ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight);
-                ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${iconButtonTokens.iconButtonFontFamily}: ${bodyL.fontFamily};
+                ${iconButtonTokens.iconButtonFontSize}: ${bodyL.fontSize};
+                ${iconButtonTokens.iconButtonFontStyle}: ${bodyL.fontStyle};
+                ${iconButtonTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight};
+                ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing};
+                ${iconButtonTokens.iconButtonLineHeight}: ${bodyL.lineHeight};
 
                 ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem;
                 ${iconButtonTokens.iconButtonSpinnerColor}: inherit;
@@ -130,12 +131,12 @@ export const config = {
                 ${iconButtonTokens.iconButtonPadding}: 0.875rem;
                 ${iconButtonTokens.iconButtonRadius}: 0.75rem;
 
-                ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size);
-                ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
-                ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${iconButtonTokens.iconButtonFontFamily}: ${bodyM.fontFamily};
+                ${iconButtonTokens.iconButtonFontSize}: ${bodyM.fontSize};
+                ${iconButtonTokens.iconButtonFontStyle}: ${bodyM.fontStyle};
+                ${iconButtonTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight};
+                ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing};
+                ${iconButtonTokens.iconButtonLineHeight}: ${bodyM.lineHeight};
 
                 ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem;
                 ${iconButtonTokens.iconButtonSpinnerColor}: inherit;
@@ -147,12 +148,12 @@ export const config = {
                 ${iconButtonTokens.iconButtonPadding}: 1rem;
                 ${iconButtonTokens.iconButtonRadius}: 0.625rem;
 
-                ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size);
-                ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${iconButtonTokens.iconButtonFontFamily}: ${bodyS.fontFamily};
+                ${iconButtonTokens.iconButtonFontSize}: ${bodyS.fontSize};
+                ${iconButtonTokens.iconButtonFontStyle}: ${bodyS.fontStyle};
+                ${iconButtonTokens.iconButtonFontWeight}: ${bodySBold.fontWeight};
+                ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing};
+                ${iconButtonTokens.iconButtonLineHeight}: ${bodyS.lineHeight};
 
                 ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem;
                 ${iconButtonTokens.iconButtonSpinnerColor}: inherit;
@@ -162,12 +163,12 @@ export const config = {
                 ${iconButtonTokens.iconButtonWidth}: 2rem;
                 ${iconButtonTokens.iconButtonPadding}: 0.75rem;
                 ${iconButtonTokens.iconButtonRadius}: 0.5rem;
-                ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight);
-                ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${iconButtonTokens.iconButtonFontFamily}: ${bodyXS.fontFamily};
+                ${iconButtonTokens.iconButtonFontSize}: ${bodyXS.fontSize};
+                ${iconButtonTokens.iconButtonFontStyle}: ${bodyXS.fontStyle};
+                ${iconButtonTokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight};
+                ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing};
+                ${iconButtonTokens.iconButtonLineHeight}: ${bodyXS.lineHeight};
 
                 ${iconButtonTokens.iconButtonSpinnerSize}: 1rem;
                 ${iconButtonTokens.iconButtonSpinnerColor}: inherit;
@@ -180,7 +181,7 @@ export const config = {
         },
         focused: {
             true: css`
-                ${iconButtonTokens.iconButtonFocusColor}: var(--surface-accent);
+                ${iconButtonTokens.iconButtonFocusColor}: ${surfaceAccent};
             `
         }
     }

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

@@ -1,4 +1,5 @@
 import { css, indicatorTokens as tokens } from '@salutejs/plasma-new-hope/styled-components';
+import { onLightSurfaceSolidDefault, surfaceAccent, surfaceNegative, surfacePositive, surfaceSolidDefault, surfaceSolidTertiary, surfaceWarning } from '@salutejs/sdds-themes/tokens/sdds_platform_ai';
 export const config = {
     defaults: {
         size: 's',
@@ -7,25 +8,25 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${tokens.color}: var(--surface-solid-default);
+                ${tokens.color}: ${surfaceSolidDefault};
             `,
             accent: css`
-                ${tokens.color}: var(--surface-accent);
+                ${tokens.color}: ${surfaceAccent};
             `,
             inactive: css`
-                ${tokens.color}: var(--surface-solid-tertiary);
+                ${tokens.color}: ${surfaceSolidTertiary};
             `,
             positive: css`
-                ${tokens.color}: var(--surface-positive);
+                ${tokens.color}: ${surfacePositive};
             `,
             warning: css`
-                ${tokens.color}: var(--surface-warning);
+                ${tokens.color}: ${surfaceWarning};
             `,
             negative: css`
-                ${tokens.color}: var(--surface-negative);
+                ${tokens.color}: ${surfaceNegative};
             `,
             black: css`
-                ${tokens.color}: var(--on-light-surface-solid-default);
+                ${tokens.color}: ${onLightSurfaceSolidDefault};
             `
         },
         size: {

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

@@ -1,4 +1,5 @@
 import { css, informationWrapperTokens as tokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyM, bodyS, bodyXS, surfaceNegative, surfaceSolidCardBrightness, textNegative, textPositive, textPrimary, textSecondary, textTertiary, textWarning } from '@salutejs/sdds-themes/tokens/sdds_platform_ai';
 export const config = {
     defaults: {
         view: 'default',
@@ -7,50 +8,50 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${tokens.labelColor}: var(--text-primary);
-                ${tokens.leftHelperColor}: var(--text-secondary);
-                ${tokens.rightHelperColor}: var(--text-secondary);
-                ${tokens.titleCaptionColor}: var(--text-secondary);
-                ${tokens.hintIconColor}: var(--text-secondary);
-                ${tokens.indicatorColor}: var(--surface-negative);
-                ${tokens.optionalColor}: var(--text-tertiary);
+                ${tokens.labelColor}: ${textPrimary};
+                ${tokens.leftHelperColor}: ${textSecondary};
+                ${tokens.rightHelperColor}: ${textSecondary};
+                ${tokens.titleCaptionColor}: ${textSecondary};
+                ${tokens.hintIconColor}: ${textSecondary};
+                ${tokens.indicatorColor}: ${surfaceNegative};
+                ${tokens.optionalColor}: ${textTertiary};
             `,
             positive: css`
-                ${tokens.labelColor}: var(--text-primary);
-                ${tokens.leftHelperColor}: var(--text-positive);
-                ${tokens.rightHelperColor}: var(--text-secondary);
-                ${tokens.titleCaptionColor}: var(--text-secondary);
-                ${tokens.hintIconColor}: var(--text-secondary);
-                ${tokens.indicatorColor}: var(--surface-negative);
-                ${tokens.optionalColor}: var(--text-tertiary);
+                ${tokens.labelColor}: ${textPrimary};
+                ${tokens.leftHelperColor}: ${textPositive};
+                ${tokens.rightHelperColor}: ${textSecondary};
+                ${tokens.titleCaptionColor}: ${textSecondary};
+                ${tokens.hintIconColor}: ${textSecondary};
+                ${tokens.indicatorColor}: ${surfaceNegative};
+                ${tokens.optionalColor}: ${textTertiary};
             `,
             warning: css`
-                ${tokens.labelColor}: var(--text-primary);
-                ${tokens.leftHelperColor}: var(--text-warning);
-                ${tokens.rightHelperColor}: var(--text-secondary);
-                ${tokens.titleCaptionColor}: var(--text-secondary);
-                ${tokens.hintIconColor}: var(--text-secondary);
-                ${tokens.indicatorColor}: var(--surface-negative);
-                ${tokens.optionalColor}: var(--text-tertiary);
+                ${tokens.labelColor}: ${textPrimary};
+                ${tokens.leftHelperColor}: ${textWarning};
+                ${tokens.rightHelperColor}: ${textSecondary};
+                ${tokens.titleCaptionColor}: ${textSecondary};
+                ${tokens.hintIconColor}: ${textSecondary};
+                ${tokens.indicatorColor}: ${surfaceNegative};
+                ${tokens.optionalColor}: ${textTertiary};
             `,
             negative: css`
-                ${tokens.labelColor}: var(--text-primary);
-                ${tokens.leftHelperColor}: var(--text-negative);
-                ${tokens.rightHelperColor}: var(--text-secondary);
-                ${tokens.titleCaptionColor}: var(--text-secondary);
-                ${tokens.hintIconColor}: var(--text-secondary);
-                ${tokens.indicatorColor}: var(--surface-negative);
-                ${tokens.optionalColor}: var(--text-tertiary);
+                ${tokens.labelColor}: ${textPrimary};
+                ${tokens.leftHelperColor}: ${textNegative};
+                ${tokens.rightHelperColor}: ${textSecondary};
+                ${tokens.titleCaptionColor}: ${textSecondary};
+                ${tokens.hintIconColor}: ${textSecondary};
+                ${tokens.indicatorColor}: ${surfaceNegative};
+                ${tokens.optionalColor}: ${textTertiary};
             `
         },
         size: {
             m: css`
-                ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size);
-                ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${tokens.labelFontFamily}: ${bodyM.fontFamily};
+                ${tokens.labelFontSize}: ${bodyM.fontSize};
+                ${tokens.labelFontStyle}: ${bodyM.fontStyle};
+                ${tokens.labelFontWeight}: ${bodyM.fontWeight};
+                ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing};
+                ${tokens.labelLineHeight}: ${bodyM.lineHeight};
 
                 ${tokens.indicatorWrapperGap}: 0.25rem;
                 ${tokens.labelWrapperOffset}: 0.625rem;
@@ -62,29 +63,29 @@ export const config = {
                 ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.813rem auto auto;
 
                 ${tokens.titleCaptionOffset}: 0.313rem;
-                ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize};
+                ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight};
 
                 ${tokens.helpersPadding}: 0.25rem 0 0 0;
                 ${tokens.helpersGap}: 0.25rem;
 
-                ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.leftHelperFontSize}: ${bodyXS.fontSize};
+                ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight};
 
-                ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.rightHelperFontSize}: ${bodyXS.fontSize};
+                ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight};
 
                 ${tokens.indicatorSizeInner}: 0.5rem;
                 ${tokens.indicatorSizeOuter}: 0.375rem;
@@ -96,10 +97,10 @@ export const config = {
         },
         hintView: {
             default: css`
-                ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness);
+                ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness};
                 ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08));
-                ${tokens.tooltipColor}: var(--text-primary);
-                ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness);
+                ${tokens.tooltipColor}: ${textPrimary};
+                ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness};
             `
         },
         hintSize: {
@@ -112,12 +113,12 @@ export const config = {
                 ${tokens.tooltipMinHeight}: 2.5rem;
                 ${tokens.tooltipBorderRadius}: 0.625rem;
 
-                ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size);
-                ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily};
+                ${tokens.tooltipTextFontSize}: ${bodyS.fontSize};
+                ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle};
+                ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight};
+                ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight};
 
                 ${tokens.tooltipContentLeftMargin}: 0.375rem;
 
@@ -136,12 +137,12 @@ export const config = {
                 ${tokens.tooltipMinHeight}: 2rem;
                 ${tokens.tooltipBorderRadius}: 0.5rem;
 
-                ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize};
+                ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight};
 
                 ${tokens.tooltipContentLeftMargin}: 0.25rem;
 

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

@@ -1,4 +1,5 @@
 import { css, linkTokens as tokens } from '@salutejs/plasma-new-hope/styled-components';
+import { textAccent, textAccentActive, textAccentHover, textM, textNegative, textNegativeActive, textNegativeHover, textPositive, textPositiveActive, textPositiveHover, textPrimary, textPrimaryActive, textPrimaryHover, textSecondary, textSecondaryActive, textSecondaryHover, textTertiary, textTertiaryActive, textTertiaryHover, textWarning, textWarningActive, textWarningHover } from '@salutejs/sdds-themes/tokens/sdds_platform_ai';
 export const config = {
     defaults: {
         view: 'default',
@@ -7,40 +8,40 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);
-                ${tokens.linkColor}: var(--text-primary);
-                ${tokens.linkColorHover}: var(--text-primary-hover);
-                ${tokens.linkColorActive}: var(--text-primary-active);
-                ${tokens.linkColorVisited}: var(--text-primary);
-                ${tokens.linkColorVisitedHover}: var(--text-primary-hover);
-                ${tokens.linkColorVisitedActive}: var(--text-primary-active);
+                ${tokens.linkFontFamily}: ${textM.fontFamily};
+                ${tokens.linkColor}: ${textPrimary};
+                ${tokens.linkColorHover}: ${textPrimaryHover};
+                ${tokens.linkColorActive}: ${textPrimaryActive};
+                ${tokens.linkColorVisited}: ${textPrimary};
+                ${tokens.linkColorVisitedHover}: ${textPrimaryHover};
+                ${tokens.linkColorVisitedActive}: ${textPrimaryActive};
                 ${tokens.linkUnderlineBorder}: 0.063rem;
                 ${tokens.linkUnderlineOffset}: 0.25rem;
             `,
             secondary: css`
-                ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);
-                ${tokens.linkColor}: var(--text-secondary);
-                ${tokens.linkColorHover}: var(--text-secondary-hover);
-                ${tokens.linkColorActive}: var(--text-secondary-active);
-                ${tokens.linkColorVisited}: var(--text-secondary);
-                ${tokens.linkColorVisitedHover}: var(--text-secondary-hover);
-                ${tokens.linkColorVisitedActive}: var(--text-secondary-active);
+                ${tokens.linkFontFamily}: ${textM.fontFamily};
+                ${tokens.linkColor}: ${textSecondary};
+                ${tokens.linkColorHover}: ${textSecondaryHover};
+                ${tokens.linkColorActive}: ${textSecondaryActive};
+                ${tokens.linkColorVisited}: ${textSecondary};
+                ${tokens.linkColorVisitedHover}: ${textSecondaryHover};
+                ${tokens.linkColorVisitedActive}: ${textSecondaryActive};
                 ${tokens.linkUnderlineBorder}: 0.063rem;
                 ${tokens.linkUnderlineOffset}: 0.25rem;
             `,
             tertiary: css`
-                ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);
-                ${tokens.linkColor}: var(--text-tertiary);
-                ${tokens.linkColorHover}: var(--text-tertiary-hover);
-                ${tokens.linkColorActive}: var(--text-tertiary-active);
-                ${tokens.linkColorVisited}: var(--text-tertiary);
-                ${tokens.linkColorVisitedHover}: var(--text-tertiary-hover);
-                ${tokens.linkColorVisitedActive}: var(--text-tertiary-active);
+                ${tokens.linkFontFamily}: ${textM.fontFamily};
+                ${tokens.linkColor}: ${textTertiary};
+                ${tokens.linkColorHover}: ${textTertiaryHover};
+                ${tokens.linkColorActive}: ${textTertiaryActive};
+                ${tokens.linkColorVisited}: ${textTertiary};
+                ${tokens.linkColorVisitedHover}: ${textTertiaryHover};
+                ${tokens.linkColorVisitedActive}: ${textTertiaryActive};
                 ${tokens.linkUnderlineBorder}: 0.063rem;
                 ${tokens.linkUnderlineOffset}: 0.25rem;
             `,
             paragraph: css`
-                ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);
+                ${tokens.linkFontFamily}: ${textM.fontFamily};
                 ${tokens.linkColor}: var(--text-paragraph);
                 ${tokens.linkColorHover}: var(--text-paragraph-hover);
                 ${tokens.linkColorActive}: var(--text-paragraph-active);
@@ -51,51 +52,51 @@ export const config = {
                 ${tokens.linkUnderlineOffset}: 0.25rem;
             `,
             accent: css`
-                ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);
-                ${tokens.linkColor}: var(--text-accent);
-                ${tokens.linkColorHover}: var(--text-accent-hover);
-                ${tokens.linkColorActive}: var(--text-accent-active);
-                ${tokens.linkColorVisited}: var(--text-accent);
-                ${tokens.linkColorVisitedHover}: var(--text-accent-hover);
-                ${tokens.linkColorVisitedActive}: var(--text-accent-active);
+                ${tokens.linkFontFamily}: ${textM.fontFamily};
+                ${tokens.linkColor}: ${textAccent};
+                ${tokens.linkColorHover}: ${textAccentHover};
+                ${tokens.linkColorActive}: ${textAccentActive};
+                ${tokens.linkColorVisited}: ${textAccent};
+                ${tokens.linkColorVisitedHover}: ${textAccentHover};
+                ${tokens.linkColorVisitedActive}: ${textAccentActive};
                 ${tokens.linkUnderlineBorder}: 0.063rem;
                 ${tokens.linkUnderlineOffset}: 0.25rem;
             `,
             positive: css`
-                ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);
-                ${tokens.linkColor}: var(--text-positive);
-                ${tokens.linkColorHover}: var(--text-positive-hover);
-                ${tokens.linkColorActive}: var(--text-positive-active);
-                ${tokens.linkColorVisited}: var(--text-positive);
-                ${tokens.linkColorVisitedHover}: var(--text-positive-hover);
-                ${tokens.linkColorVisitedActive}: var(--text-positive-active);
+                ${tokens.linkFontFamily}: ${textM.fontFamily};
+                ${tokens.linkColor}: ${textPositive};
+                ${tokens.linkColorHover}: ${textPositiveHover};
+                ${tokens.linkColorActive}: ${textPositiveActive};
+                ${tokens.linkColorVisited}: ${textPositive};
+                ${tokens.linkColorVisitedHover}: ${textPositiveHover};
+                ${tokens.linkColorVisitedActive}: ${textPositiveActive};
                 ${tokens.linkUnderlineBorder}: 0.063rem;
                 ${tokens.linkUnderlineOffset}: 0.25rem;
             `,
             warning: css`
-                ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);
-                ${tokens.linkColor}: var(--text-warning);
-                ${tokens.linkColorHover}: var(--text-warning-hover);
-                ${tokens.linkColorActive}: var(--text-warning-active);
-                ${tokens.linkColorVisited}: var(--text-warning);
-                ${tokens.linkColorVisitedHover}: var(--text-warning-hover);
-                ${tokens.linkColorVisitedActive}: var(--text-warning-active);
+                ${tokens.linkFontFamily}: ${textM.fontFamily};
+                ${tokens.linkColor}: ${textWarning};
+                ${tokens.linkColorHover}: ${textWarningHover};
+                ${tokens.linkColorActive}: ${textWarningActive};
+                ${tokens.linkColorVisited}: ${textWarning};
+                ${tokens.linkColorVisitedHover}: ${textWarningHover};
+                ${tokens.linkColorVisitedActive}: ${textWarningActive};
                 ${tokens.linkUnderlineBorder}: 0.063rem;
                 ${tokens.linkUnderlineOffset}: 0.25rem;
             `,
             negative: css`
-                ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);
-                ${tokens.linkColor}: var(--text-negative);
-                ${tokens.linkColorHover}: var(--text-negative-hover);
-                ${tokens.linkColorActive}: var(--text-negative-active);
-                ${tokens.linkColorVisited}: var(--text-negative);
-                ${tokens.linkColorVisitedHover}: var(--text-negative-hover);
-                ${tokens.linkColorVisitedActive}: var(--text-negative-active);
+                ${tokens.linkFontFamily}: ${textM.fontFamily};
+                ${tokens.linkColor}: ${textNegative};
+                ${tokens.linkColorHover}: ${textNegativeHover};
+                ${tokens.linkColorActive}: ${textNegativeActive};
+                ${tokens.linkColorVisited}: ${textNegative};
+                ${tokens.linkColorVisitedHover}: ${textNegativeHover};
+                ${tokens.linkColorVisitedActive}: ${textNegativeActive};
                 ${tokens.linkUnderlineBorder}: 0.063rem;
                 ${tokens.linkUnderlineOffset}: 0.25rem;
             `,
             clear: css`
-                ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family);
+                ${tokens.linkFontFamily}: ${textM.fontFamily};
                 ${tokens.linkColor}:inherit;
                 ${tokens.linkColorHover}: inherit;
                 ${tokens.linkColorActive}: inherit;
@@ -113,7 +114,7 @@ export const config = {
         },
         focused: {
             true: css`
-                ${tokens.linkColorFocus}: var(--text-primary);
+                ${tokens.linkColorFocus}: ${textPrimary};
             `
         }
     }