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

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

@@ -1,4 +1,5 @@
 import { css, chipGroupTokens as tokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyM, bodyXXS, inverseTextPrimary, onDarkTextPrimary, surfaceAccent, surfaceAccentActive, surfaceAccentHover, surfaceSolidDefault, surfaceSolidDefaultActive, surfaceSolidDefaultHover, surfaceTransparentSecondary, surfaceTransparentSecondaryActive, surfaceTransparentSecondaryHover, textPrimary } from '@salutejs/sdds-themes/tokens/sdds_platform_ai';
 export const config = {
     defaults: {
         view: 'default',
@@ -7,31 +8,31 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${tokens.chipFocusColor}: var(--surface-accent);
-                ${tokens.chipColor}: var(--inverse-text-primary);
-                ${tokens.chipBackground}: var(--surface-solid-default);
-                ${tokens.chipColorHover}: var(--inverse-text-primary);
-                ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover);
-                ${tokens.chipColorActive}: var(--inverse-text-primary);
-                ${tokens.chipBackgroundActive}: var(--surface-solid-default-active);
+                ${tokens.chipFocusColor}: ${surfaceAccent};
+                ${tokens.chipColor}: ${inverseTextPrimary};
+                ${tokens.chipBackground}: ${surfaceSolidDefault};
+                ${tokens.chipColorHover}: ${inverseTextPrimary};
+                ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover};
+                ${tokens.chipColorActive}: ${inverseTextPrimary};
+                ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive};
             `,
             secondary: css`
-                ${tokens.chipFocusColor}: var(--surface-accent);
-                ${tokens.chipColor}: var(--text-primary);
-                ${tokens.chipBackground}: var(--surface-transparent-secondary);
-                ${tokens.chipColorHover}: var(--text-primary);
-                ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover);
-                ${tokens.chipColorActive}: var(--text-primary);
-                ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active);
+                ${tokens.chipFocusColor}: ${surfaceAccent};
+                ${tokens.chipColor}: ${textPrimary};
+                ${tokens.chipBackground}: ${surfaceTransparentSecondary};
+                ${tokens.chipColorHover}: ${textPrimary};
+                ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover};
+                ${tokens.chipColorActive}: ${textPrimary};
+                ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive};
             `,
             accent: css`
-                ${tokens.chipFocusColor}: var(--surface-accent);
-                ${tokens.chipColor}: var(--on-dark-text-primary);
-                ${tokens.chipBackground}: var(--surface-accent);
-                ${tokens.chipColorHover}: var(--on-dark-text-primary);
-                ${tokens.chipBackgroundHover}: var(--surface-accent-hover);
-                ${tokens.chipColorActive}: var(--on-dark-text-primary);
-                ${tokens.chipBackgroundActive}: var(--surface-accent-active);
+                ${tokens.chipFocusColor}: ${surfaceAccent};
+                ${tokens.chipColor}: ${onDarkTextPrimary};
+                ${tokens.chipBackground}: ${surfaceAccent};
+                ${tokens.chipColorHover}: ${onDarkTextPrimary};
+                ${tokens.chipBackgroundHover}: ${surfaceAccentHover};
+                ${tokens.chipColorActive}: ${onDarkTextPrimary};
+                ${tokens.chipBackgroundActive}: ${surfaceAccentActive};
             `
         },
         size: {
@@ -41,12 +42,12 @@ export const config = {
                 ${tokens.chipHeight}: 2.5rem;
                 ${tokens.chipPadding}: 0 0.875rem;
 
-                ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size);
-                ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${tokens.chipFontFamily}: ${bodyM.fontFamily};
+                ${tokens.chipFontSize}: ${bodyM.fontSize};
+                ${tokens.chipFontStyle}: ${bodyM.fontStyle};
+                ${tokens.chipFontWeight}: ${bodyM.fontWeight};
+                ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing};
+                ${tokens.chipLineHeight}: ${bodyM.lineHeight};
 
                 ${tokens.chipLeftContentMarginLeft}: -0.125rem;
                 ${tokens.chipLeftContentMarginRight}: 0.375rem;
@@ -62,12 +63,12 @@ export const config = {
                 ${tokens.chipHeight}: 1.25rem;
                 ${tokens.chipPadding}: 0 0.5rem;
 
-                ${tokens.chipFontFamily}: var(--plasma-typo-body-xxs-font-family);
-                ${tokens.chipFontSize}: var(--plasma-typo-body-xxs-font-size);
-                ${tokens.chipFontStyle}: var(--plasma-typo-body-xxs-font-style);
-                ${tokens.chipFontWeight}: var(--plasma-typo-body-xxs-font-weight);
-                ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing);
-                ${tokens.chipLineHeight}: var(--plasma-typo-body-xxs-line-height);
+                ${tokens.chipFontFamily}: ${bodyXXS.fontFamily};
+                ${tokens.chipFontSize}: ${bodyXXS.fontSize};
+                ${tokens.chipFontStyle}: ${bodyXXS.fontStyle};
+                ${tokens.chipFontWeight}: ${bodyXXS.fontWeight};
+                ${tokens.chipLetterSpacing}: ${bodyXXS.letterSpacing};
+                ${tokens.chipLineHeight}: ${bodyXXS.lineHeight};
 
                 ${tokens.chipLeftContentMarginLeft}: -0.125rem;
                 ${tokens.chipLeftContentMarginRight}: 0.125rem;

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

@@ -1,4 +1,5 @@
 import { css, codeAreaTokens as tokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyL, bodyM, bodyS, bodyXS, surfaceTransparentPrimary, surfaceTransparentTertiary, syntaxOrange, syntaxPink, syntaxRed, syntaxSkyBlue, syntaxSpring, syntaxYellow, textPrimary, textTertiary } from '@salutejs/sdds-themes/tokens/sdds_platform_ai';
 export const config = {
     defaults: {
         view: 'default',
@@ -8,21 +9,21 @@ export const config = {
         view: {
             default: css`
                 ${tokens.wrapperBackgroundColor}: transparent;
-                ${tokens.fieldBackgroundColor}: var(--surface-transparent-primary);
+                ${tokens.fieldBackgroundColor}: ${surfaceTransparentPrimary};
 
-                ${tokens.codeColor}: var(--text-primary);
-                ${tokens.lineNumberColor}: var(--text-tertiary);
-                ${tokens.dividerColor}: var(--surface-transparent-tertiary);
+                ${tokens.codeColor}: ${textPrimary};
+                ${tokens.lineNumberColor}: ${textTertiary};
+                ${tokens.dividerColor}: ${surfaceTransparentTertiary};
 
-                ${tokens.scrollTrackColor}: var(--surface-transparent-primary);
-                ${tokens.scrollThumbColor}: var(--surface-transparent-tertiary);
+                ${tokens.scrollTrackColor}: ${surfaceTransparentPrimary};
+                ${tokens.scrollThumbColor}: ${surfaceTransparentTertiary};
 
-                ${tokens.syntaxYellow}: var(--syntax-yellow);
-                ${tokens.syntaxOrange}: var(--syntax-orange);
-                ${tokens.syntaxPink}: var(--syntax-pink);
-                ${tokens.syntaxSpring}: var(--syntax-spring);
-                ${tokens.syntaxSkyBlue}: var(--syntax-sky-blue);
-                ${tokens.syntaxRed}: var(--syntax-red);
+                ${tokens.syntaxYellow}: ${syntaxYellow};
+                ${tokens.syntaxOrange}: ${syntaxOrange};
+                ${tokens.syntaxPink}: ${syntaxPink};
+                ${tokens.syntaxSpring}: ${syntaxSpring};
+                ${tokens.syntaxSkyBlue}: ${syntaxSkyBlue};
+                ${tokens.syntaxRed}: ${syntaxRed};
             `
         },
         size: {
@@ -42,11 +43,11 @@ export const config = {
                 ${tokens.codePaddingRight}: 2.875rem;
 
                 ${tokens.fontFamily}: 'SB Sans Text Mono', sans-serif;
-                ${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-font-weight);
-                ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height);
+                ${tokens.fontSize}: ${bodyL.fontSize};
+                ${tokens.fontStyle}: ${bodyL.fontStyle};
+                ${tokens.fontWeight}: ${bodyL.fontWeight};
+                ${tokens.letterSpacing}: ${bodyL.letterSpacing};
+                ${tokens.lineHeight}: ${bodyL.lineHeight};
 
                 ${tokens.scrollWidth}: 0.125rem;
             `,
@@ -66,11 +67,11 @@ export const config = {
                 ${tokens.codePaddingRight}: 2.75rem;
 
                 ${tokens.fontFamily}: 'SB Sans Text Mono', sans-serif;
-                ${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-font-weight);
-                ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height);
+                ${tokens.fontSize}: ${bodyL.fontSize};
+                ${tokens.fontStyle}: ${bodyL.fontStyle};
+                ${tokens.fontWeight}: ${bodyL.fontWeight};
+                ${tokens.letterSpacing}: ${bodyL.letterSpacing};
+                ${tokens.lineHeight}: ${bodyL.lineHeight};
 
                 ${tokens.scrollWidth}: 0.125rem;
             `,
@@ -90,11 +91,11 @@ export const config = {
                 ${tokens.codePaddingRight}: 2.5rem;
 
                 ${tokens.fontFamily}: 'SB Sans Text Mono', sans-serif;
-                ${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-font-weight);
-                ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height);
+                ${tokens.fontSize}: ${bodyM.fontSize};
+                ${tokens.fontStyle}: ${bodyM.fontStyle};
+                ${tokens.fontWeight}: ${bodyM.fontWeight};
+                ${tokens.letterSpacing}: ${bodyM.letterSpacing};
+                ${tokens.lineHeight}: ${bodyM.lineHeight};
 
                 ${tokens.scrollWidth}: 0.125rem;
             `,
@@ -114,11 +115,11 @@ export const config = {
                 ${tokens.codePaddingRight}: 2.375rem;
 
                 ${tokens.fontFamily}: 'SB Sans Text Mono', sans-serif;
-                ${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-font-weight);
-                ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tokens.fontSize}: ${bodyS.fontSize};
+                ${tokens.fontStyle}: ${bodyS.fontStyle};
+                ${tokens.fontWeight}: ${bodyS.fontWeight};
+                ${tokens.letterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.lineHeight}: ${bodyS.lineHeight};
 
                 ${tokens.scrollWidth}: 0.125rem;
             `,
@@ -138,11 +139,11 @@ export const config = {
                 ${tokens.codePaddingRight}: 1.5rem;
 
                 ${tokens.fontFamily}: 'SB Sans Text Mono', sans-serif;
-                ${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-font-weight);
-                ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.fontSize}: ${bodyXS.fontSize};
+                ${tokens.fontStyle}: ${bodyXS.fontStyle};
+                ${tokens.fontWeight}: ${bodyXS.fontWeight};
+                ${tokens.letterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.lineHeight}: ${bodyXS.lineHeight};
 
                 ${tokens.scrollWidth}: 0.125rem;
             `

package/dist/styled-components/es/components/CodeArea/CodeArea.hasWrapper.config.js

@@ -1,4 +1,5 @@
 import { css, codeAreaTokens as tokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyL, bodyM, bodyS, bodyXS, surfaceSolidCard, surfaceTransparentPrimary, surfaceTransparentTertiary, syntaxOrange, syntaxPink, syntaxRed, syntaxSkyBlue, syntaxSpring, syntaxYellow, textPrimary, textTertiary } from '@salutejs/sdds-themes/tokens/sdds_platform_ai';
 export const config = {
     defaults: {
         view: 'default',
@@ -7,22 +8,22 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${tokens.wrapperBackgroundColor}: var(--surface-transparent-primary);
-                ${tokens.fieldBackgroundColor}: var(--surface-solid-card);
-
-                ${tokens.codeColor}: var(--text-primary);
-                ${tokens.lineNumberColor}: var(--text-tertiary);
-                ${tokens.dividerColor}: var(--surface-transparent-tertiary);
-
-                ${tokens.scrollTrackColor}: var(--surface-transparent-primary);
-                ${tokens.scrollThumbColor}: var(--surface-transparent-tertiary);
-
-                ${tokens.syntaxYellow}: var(--syntax-yellow);
-                ${tokens.syntaxOrange}: var(--syntax-orange);
-                ${tokens.syntaxPink}: var(--syntax-pink);
-                ${tokens.syntaxSpring}: var(--syntax-spring);
-                ${tokens.syntaxSkyBlue}: var(--syntax-sky-blue);
-                ${tokens.syntaxRed}: var(--syntax-red);
+                ${tokens.wrapperBackgroundColor}: ${surfaceTransparentPrimary};
+                ${tokens.fieldBackgroundColor}: ${surfaceSolidCard};
+
+                ${tokens.codeColor}: ${textPrimary};
+                ${tokens.lineNumberColor}: ${textTertiary};
+                ${tokens.dividerColor}: ${surfaceTransparentTertiary};
+
+                ${tokens.scrollTrackColor}: ${surfaceTransparentPrimary};
+                ${tokens.scrollThumbColor}: ${surfaceTransparentTertiary};
+
+                ${tokens.syntaxYellow}: ${syntaxYellow};
+                ${tokens.syntaxOrange}: ${syntaxOrange};
+                ${tokens.syntaxPink}: ${syntaxPink};
+                ${tokens.syntaxSpring}: ${syntaxSpring};
+                ${tokens.syntaxSkyBlue}: ${syntaxSkyBlue};
+                ${tokens.syntaxRed}: ${syntaxRed};
             `
         },
         size: {
@@ -42,11 +43,11 @@ export const config = {
                 ${tokens.codePaddingRight}: 2.875rem;
 
                 ${tokens.fontFamily}: 'SB Sans Text Mono', sans-serif;
-                ${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-font-weight);
-                ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height);
+                ${tokens.fontSize}: ${bodyL.fontSize};
+                ${tokens.fontStyle}: ${bodyL.fontStyle};
+                ${tokens.fontWeight}: ${bodyL.fontWeight};
+                ${tokens.letterSpacing}: ${bodyL.letterSpacing};
+                ${tokens.lineHeight}: ${bodyL.lineHeight};
 
                 ${tokens.scrollWidth}: 0.125rem;
             `,
@@ -66,11 +67,11 @@ export const config = {
                 ${tokens.codePaddingRight}: 2.75rem;
 
                 ${tokens.fontFamily}: 'SB Sans Text Mono', sans-serif;
-                ${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-font-weight);
-                ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height);
+                ${tokens.fontSize}: ${bodyL.fontSize};
+                ${tokens.fontStyle}: ${bodyL.fontStyle};
+                ${tokens.fontWeight}: ${bodyL.fontWeight};
+                ${tokens.letterSpacing}: ${bodyL.letterSpacing};
+                ${tokens.lineHeight}: ${bodyL.lineHeight};
 
                 ${tokens.scrollWidth}: 0.125rem;
             `,
@@ -90,11 +91,11 @@ export const config = {
                 ${tokens.codePaddingRight}: 2.5rem;
 
                 ${tokens.fontFamily}: 'SB Sans Text Mono', sans-serif;
-                ${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-font-weight);
-                ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height);
+                ${tokens.fontSize}: ${bodyM.fontSize};
+                ${tokens.fontStyle}: ${bodyM.fontStyle};
+                ${tokens.fontWeight}: ${bodyM.fontWeight};
+                ${tokens.letterSpacing}: ${bodyM.letterSpacing};
+                ${tokens.lineHeight}: ${bodyM.lineHeight};
 
                 ${tokens.scrollWidth}: 0.125rem;
             `,
@@ -114,11 +115,11 @@ export const config = {
                 ${tokens.codePaddingRight}: 2.375rem;
 
                 ${tokens.fontFamily}: 'SB Sans Text Mono', sans-serif;
-                ${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-font-weight);
-                ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tokens.fontSize}: ${bodyS.fontSize};
+                ${tokens.fontStyle}: ${bodyS.fontStyle};
+                ${tokens.fontWeight}: ${bodyS.fontWeight};
+                ${tokens.letterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.lineHeight}: ${bodyS.lineHeight};
 
                 ${tokens.scrollWidth}: 0.125rem;
             `,
@@ -138,11 +139,11 @@ export const config = {
                 ${tokens.codePaddingRight}: 1.5rem;
 
                 ${tokens.fontFamily}: 'SB Sans Text Mono', sans-serif;
-                ${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-font-weight);
-                ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.fontSize}: ${bodyXS.fontSize};
+                ${tokens.fontStyle}: ${bodyXS.fontStyle};
+                ${tokens.fontWeight}: ${bodyXS.fontWeight};
+                ${tokens.letterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.lineHeight}: ${bodyXS.lineHeight};
 
                 ${tokens.scrollWidth}: 0.125rem;
             `

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

@@ -1,4 +1,5 @@
 import { css, codeFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyL, bodyLBold, bodyM, bodyMBold, bodyS, bodyXS, outlineAccent, surfaceAccent, surfaceTransparentNegative, surfaceTransparentPrimary, surfaceTransparentPrimaryHover, surfaceTransparentSecondary, textNegative, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_platform_ai';
 export const config = {
     defaults: {
         view: 'default',
@@ -8,19 +9,19 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${tokens.caretColor}: var(--surface-accent);
+                ${tokens.caretColor}: ${surfaceAccent};
 
-                ${tokens.captionColor}: var(--text-secondary);
-                ${tokens.captionColorError}: var(--text-negative);
+                ${tokens.captionColor}: ${textSecondary};
+                ${tokens.captionColorError}: ${textNegative};
 
-                ${tokens.codeColor}: var(--text-primary);
-                ${tokens.codeColorError}: var(--text-negative);
-                ${tokens.borderColorFocus}: var(--outline-accent);
+                ${tokens.codeColor}: ${textPrimary};
+                ${tokens.codeColorError}: ${textNegative};
+                ${tokens.borderColorFocus}: ${outlineAccent};
 
-                ${tokens.backgroundColor}: var(--surface-transparent-primary);
-                ${tokens.backgroundColorHover}: var(--surface-transparent-primary-hover);
-                ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary);
-                ${tokens.backgroundErrorColor}: var(--surface-transparent-negative);
+                ${tokens.backgroundColor}: ${surfaceTransparentPrimary};
+                ${tokens.backgroundColorHover}: ${surfaceTransparentPrimaryHover};
+                ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary};
+                ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative};
             `
         },
         size: {
@@ -33,19 +34,19 @@ export const config = {
                 ${tokens.codeItemWidth}: 2.75rem;
                 ${tokens.codeItemHeight}: 3.5rem;
 
-                ${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.captionFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${tokens.captionFontSize}: var(--plasma-typo-body-s-font-size);
-                ${tokens.captionFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${tokens.captionFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${tokens.captionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tokens.captionLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tokens.captionFontFamily}: ${bodyS.fontFamily};
+                ${tokens.captionFontSize}: ${bodyS.fontSize};
+                ${tokens.captionFontStyle}: ${bodyS.fontStyle};
+                ${tokens.captionFontWeight}: ${bodyS.fontWeight};
+                ${tokens.captionLetterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.captionLineHeight}: ${bodyS.lineHeight};
 
                 ${tokens.borderRadius}: 0.875rem;
                 ${tokens.borderRadiusSegmented}: 0.375rem;
@@ -60,19 +61,19 @@ export const config = {
                 ${tokens.codeItemWidth}: 2.375rem;
                 ${tokens.codeItemHeight}: 3rem;
 
-                ${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.captionFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.captionFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.captionFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.captionFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.captionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.captionLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.captionFontFamily}: ${bodyXS.fontFamily};
+                ${tokens.captionFontSize}: ${bodyXS.fontSize};
+                ${tokens.captionFontStyle}: ${bodyXS.fontStyle};
+                ${tokens.captionFontWeight}: ${bodyXS.fontWeight};
+                ${tokens.captionLetterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.captionLineHeight}: ${bodyXS.lineHeight};
 
                 ${tokens.borderRadius}: 0.75rem;
                 ${tokens.borderRadiusSegmented}: 0.25rem;

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

@@ -1,4 +1,5 @@
 import { css, codeInputTokens as tokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyM, bodyMBold, bodyS, bodySBold, dsplL, dsplLBold, dsplM, dsplS, h3, h4, h5, outlineAccent, textNegative, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_platform_ai';
 export const config = {
     defaults: {
         view: 'default',
@@ -7,12 +8,12 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${tokens.captionColor}: var(--text-secondary);
-                ${tokens.captionColorError}: var(--text-negative);
+                ${tokens.captionColor}: ${textSecondary};
+                ${tokens.captionColorError}: ${textNegative};
 
-                ${tokens.codeColor}: var(--text-primary);
-                ${tokens.codeColorError}: var(--text-negative);
-                ${tokens.borderColorFocus}: var(--outline-accent);
+                ${tokens.codeColor}: ${textPrimary};
+                ${tokens.codeColorError}: ${textNegative};
+                ${tokens.borderColorFocus}: ${outlineAccent};
             `
         },
         size: {
@@ -22,10 +23,10 @@ export const config = {
 
                 ${tokens.separatorWidth}: 0.75rem;
 
-                ${tokens.fontFamily}: var(--plasma-typo-dspl-l-font-family);
-                ${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.fontFamily}: ${dsplL.fontFamily};
+                ${tokens.fontStyle}: ${dsplL.fontStyle};
+                ${tokens.fontWeight}: ${dsplLBold.fontWeight};
+                ${tokens.letterSpacing}: ${dsplL.letterSpacing};
 
                 ${tokens.largeFontSize}: 8rem;
                 ${tokens.largeLineHeight}: 8rem;
@@ -36,12 +37,12 @@ export const config = {
                 ${tokens.smallFontSize}: 5.5rem;
                 ${tokens.smallLineHeight}: 5.75rem;
 
-                ${tokens.captionFontFamily}: var(--plasma-typo-h3-font-family);
-                ${tokens.captionFontSize}: var(--plasma-typo-h3-font-size);
-                ${tokens.captionFontStyle}: var(--plasma-typo-h3-font-style);
-                ${tokens.captionFontWeight}: var(--plasma-typo-h3-font-weight);
-                ${tokens.captionLetterSpacing}: var(--plasma-typo-h3-letter-spacing);
-                ${tokens.captionLineHeight}: var(--plasma-typo-h3-line-height);
+                ${tokens.captionFontFamily}: ${h3.fontFamily};
+                ${tokens.captionFontSize}: ${h3.fontSize};
+                ${tokens.captionFontStyle}: ${h3.fontStyle};
+                ${tokens.captionFontWeight}: ${h3.fontWeight};
+                ${tokens.captionLetterSpacing}: ${h3.letterSpacing};
+                ${tokens.captionLineHeight}: ${h3.lineHeight};
 
                 ${tokens.largeCodeItemWidth}: 5rem;
                 ${tokens.largeCodeItemHeight}: 8rem;
@@ -61,10 +62,10 @@ export const config = {
 
                 ${tokens.separatorWidth}: 0.75rem;
 
-                ${tokens.fontFamily}: var(--plasma-typo-dspl-m-font-family);
-                ${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.fontFamily}: ${dsplM.fontFamily};
+                ${tokens.fontStyle}: ${bodyM.fontStyle};
+                ${tokens.fontWeight}: ${bodyMBold.fontWeight};
+                ${tokens.letterSpacing}: ${bodyM.letterSpacing};
 
                 ${tokens.largeFontSize}: 5.5rem;
                 ${tokens.largeLineHeight}: 5.75rem;
@@ -75,12 +76,12 @@ export const config = {
                 ${tokens.smallFontSize}: 3.5rem;
                 ${tokens.smallLineHeight}: 3.75rem;
 
-                ${tokens.captionFontFamily}: var(--plasma-typo-h4-font-family);
-                ${tokens.captionFontSize}: var(--plasma-typo-h4-font-size);
-                ${tokens.captionFontStyle}: var(--plasma-typo-h4-font-style);
-                ${tokens.captionFontWeight}: var(--plasma-typo-h4-font-weight);
-                ${tokens.captionLetterSpacing}: var(--plasma-typo-h4-letter-spacing);
-                ${tokens.captionLineHeight}: var(--plasma-typo-h4-line-height);
+                ${tokens.captionFontFamily}: ${h4.fontFamily};
+                ${tokens.captionFontSize}: ${h4.fontSize};
+                ${tokens.captionFontStyle}: ${h4.fontStyle};
+                ${tokens.captionFontWeight}: ${h4.fontWeight};
+                ${tokens.captionLetterSpacing}: ${h4.letterSpacing};
+                ${tokens.captionLineHeight}: ${h4.lineHeight};
 
                 ${tokens.largeCodeItemWidth}: 3.5rem;
                 ${tokens.largeCodeItemHeight}: 5.75rem;
@@ -100,10 +101,10 @@ export const config = {
 
                 ${tokens.separatorWidth}: 0.5rem;
 
-                ${tokens.fontFamily}: var(--plasma-typo-dspl-s-font-family);
-                ${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.fontFamily}: ${dsplS.fontFamily};
+                ${tokens.fontStyle}: ${bodyS.fontStyle};
+                ${tokens.fontWeight}: ${bodySBold.fontWeight};
+                ${tokens.letterSpacing}: ${bodyS.letterSpacing};
 
                 ${tokens.largeFontSize}: 4rem;
                 ${tokens.largeLineHeight}: 4.25rem;
@@ -114,12 +115,12 @@ export const config = {
                 ${tokens.smallFontSize}: 2.5rem;
                 ${tokens.smallLineHeight}: 2.75rem;
 
-                ${tokens.captionFontFamily}: var(--plasma-typo-h5-font-family);
-                ${tokens.captionFontSize}: var(--plasma-typo-h5-font-size);
-                ${tokens.captionFontStyle}: var(--plasma-typo-h5-font-style);
-                ${tokens.captionFontWeight}: var(--plasma-typo-h5-font-weight);
-                ${tokens.captionLetterSpacing}: var(--plasma-typo-h5-letter-spacing);
-                ${tokens.captionLineHeight}: var(--plasma-typo-h5-line-height);
+                ${tokens.captionFontFamily}: ${h5.fontFamily};
+                ${tokens.captionFontSize}: ${h5.fontSize};
+                ${tokens.captionFontStyle}: ${h5.fontStyle};
+                ${tokens.captionFontWeight}: ${h5.fontWeight};
+                ${tokens.captionLetterSpacing}: ${h5.letterSpacing};
+                ${tokens.captionLineHeight}: ${h5.lineHeight};
 
                 ${tokens.largeCodeItemWidth}: 2.5rem;
                 ${tokens.largeCodeItemHeight}: 4.25rem;