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

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

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

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

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "config", {
     }
 });
 const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const _sdds_platform_ai = require("@salutejs/sdds-themes/tokens/sdds_platform_ai");
 const config = {
     defaults: {
         view: 'default',
@@ -18,21 +19,21 @@ const config = {
         view: {
             default: (0, _styledcomponents.css)`
                 ${_styledcomponents.codeAreaTokens.wrapperBackgroundColor}: transparent;
-                ${_styledcomponents.codeAreaTokens.fieldBackgroundColor}: var(--surface-transparent-primary);
+                ${_styledcomponents.codeAreaTokens.fieldBackgroundColor}: ${_sdds_platform_ai.surfaceTransparentPrimary};
 
-                ${_styledcomponents.codeAreaTokens.codeColor}: var(--text-primary);
-                ${_styledcomponents.codeAreaTokens.lineNumberColor}: var(--text-tertiary);
-                ${_styledcomponents.codeAreaTokens.dividerColor}: var(--surface-transparent-tertiary);
+                ${_styledcomponents.codeAreaTokens.codeColor}: ${_sdds_platform_ai.textPrimary};
+                ${_styledcomponents.codeAreaTokens.lineNumberColor}: ${_sdds_platform_ai.textTertiary};
+                ${_styledcomponents.codeAreaTokens.dividerColor}: ${_sdds_platform_ai.surfaceTransparentTertiary};
 
-                ${_styledcomponents.codeAreaTokens.scrollTrackColor}: var(--surface-transparent-primary);
-                ${_styledcomponents.codeAreaTokens.scrollThumbColor}: var(--surface-transparent-tertiary);
+                ${_styledcomponents.codeAreaTokens.scrollTrackColor}: ${_sdds_platform_ai.surfaceTransparentPrimary};
+                ${_styledcomponents.codeAreaTokens.scrollThumbColor}: ${_sdds_platform_ai.surfaceTransparentTertiary};
 
-                ${_styledcomponents.codeAreaTokens.syntaxYellow}: var(--syntax-yellow);
-                ${_styledcomponents.codeAreaTokens.syntaxOrange}: var(--syntax-orange);
-                ${_styledcomponents.codeAreaTokens.syntaxPink}: var(--syntax-pink);
-                ${_styledcomponents.codeAreaTokens.syntaxSpring}: var(--syntax-spring);
-                ${_styledcomponents.codeAreaTokens.syntaxSkyBlue}: var(--syntax-sky-blue);
-                ${_styledcomponents.codeAreaTokens.syntaxRed}: var(--syntax-red);
+                ${_styledcomponents.codeAreaTokens.syntaxYellow}: ${_sdds_platform_ai.syntaxYellow};
+                ${_styledcomponents.codeAreaTokens.syntaxOrange}: ${_sdds_platform_ai.syntaxOrange};
+                ${_styledcomponents.codeAreaTokens.syntaxPink}: ${_sdds_platform_ai.syntaxPink};
+                ${_styledcomponents.codeAreaTokens.syntaxSpring}: ${_sdds_platform_ai.syntaxSpring};
+                ${_styledcomponents.codeAreaTokens.syntaxSkyBlue}: ${_sdds_platform_ai.syntaxSkyBlue};
+                ${_styledcomponents.codeAreaTokens.syntaxRed}: ${_sdds_platform_ai.syntaxRed};
             `
         },
         size: {
@@ -52,11 +53,11 @@ const config = {
                 ${_styledcomponents.codeAreaTokens.codePaddingRight}: 2.875rem;
 
                 ${_styledcomponents.codeAreaTokens.fontFamily}: 'SB Sans Text Mono', sans-serif;
-                ${_styledcomponents.codeAreaTokens.fontSize}: var(--plasma-typo-body-l-font-size);
-                ${_styledcomponents.codeAreaTokens.fontStyle}: var(--plasma-typo-body-l-font-style);
-                ${_styledcomponents.codeAreaTokens.fontWeight}: var(--plasma-typo-body-l-font-weight);
-                ${_styledcomponents.codeAreaTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${_styledcomponents.codeAreaTokens.lineHeight}: var(--plasma-typo-body-l-line-height);
+                ${_styledcomponents.codeAreaTokens.fontSize}: ${_sdds_platform_ai.bodyL.fontSize};
+                ${_styledcomponents.codeAreaTokens.fontStyle}: ${_sdds_platform_ai.bodyL.fontStyle};
+                ${_styledcomponents.codeAreaTokens.fontWeight}: ${_sdds_platform_ai.bodyL.fontWeight};
+                ${_styledcomponents.codeAreaTokens.letterSpacing}: ${_sdds_platform_ai.bodyL.letterSpacing};
+                ${_styledcomponents.codeAreaTokens.lineHeight}: ${_sdds_platform_ai.bodyL.lineHeight};
 
                 ${_styledcomponents.codeAreaTokens.scrollWidth}: 0.125rem;
             `,
@@ -76,11 +77,11 @@ const config = {
                 ${_styledcomponents.codeAreaTokens.codePaddingRight}: 2.75rem;
 
                 ${_styledcomponents.codeAreaTokens.fontFamily}: 'SB Sans Text Mono', sans-serif;
-                ${_styledcomponents.codeAreaTokens.fontSize}: var(--plasma-typo-body-l-font-size);
-                ${_styledcomponents.codeAreaTokens.fontStyle}: var(--plasma-typo-body-l-font-style);
-                ${_styledcomponents.codeAreaTokens.fontWeight}: var(--plasma-typo-body-l-font-weight);
-                ${_styledcomponents.codeAreaTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${_styledcomponents.codeAreaTokens.lineHeight}: var(--plasma-typo-body-l-line-height);
+                ${_styledcomponents.codeAreaTokens.fontSize}: ${_sdds_platform_ai.bodyL.fontSize};
+                ${_styledcomponents.codeAreaTokens.fontStyle}: ${_sdds_platform_ai.bodyL.fontStyle};
+                ${_styledcomponents.codeAreaTokens.fontWeight}: ${_sdds_platform_ai.bodyL.fontWeight};
+                ${_styledcomponents.codeAreaTokens.letterSpacing}: ${_sdds_platform_ai.bodyL.letterSpacing};
+                ${_styledcomponents.codeAreaTokens.lineHeight}: ${_sdds_platform_ai.bodyL.lineHeight};
 
                 ${_styledcomponents.codeAreaTokens.scrollWidth}: 0.125rem;
             `,
@@ -100,11 +101,11 @@ const config = {
                 ${_styledcomponents.codeAreaTokens.codePaddingRight}: 2.5rem;
 
                 ${_styledcomponents.codeAreaTokens.fontFamily}: 'SB Sans Text Mono', sans-serif;
-                ${_styledcomponents.codeAreaTokens.fontSize}: var(--plasma-typo-body-m-font-size);
-                ${_styledcomponents.codeAreaTokens.fontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_styledcomponents.codeAreaTokens.fontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${_styledcomponents.codeAreaTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_styledcomponents.codeAreaTokens.lineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_styledcomponents.codeAreaTokens.fontSize}: ${_sdds_platform_ai.bodyM.fontSize};
+                ${_styledcomponents.codeAreaTokens.fontStyle}: ${_sdds_platform_ai.bodyM.fontStyle};
+                ${_styledcomponents.codeAreaTokens.fontWeight}: ${_sdds_platform_ai.bodyM.fontWeight};
+                ${_styledcomponents.codeAreaTokens.letterSpacing}: ${_sdds_platform_ai.bodyM.letterSpacing};
+                ${_styledcomponents.codeAreaTokens.lineHeight}: ${_sdds_platform_ai.bodyM.lineHeight};
 
                 ${_styledcomponents.codeAreaTokens.scrollWidth}: 0.125rem;
             `,
@@ -124,11 +125,11 @@ const config = {
                 ${_styledcomponents.codeAreaTokens.codePaddingRight}: 2.375rem;
 
                 ${_styledcomponents.codeAreaTokens.fontFamily}: 'SB Sans Text Mono', sans-serif;
-                ${_styledcomponents.codeAreaTokens.fontSize}: var(--plasma-typo-body-s-font-size);
-                ${_styledcomponents.codeAreaTokens.fontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_styledcomponents.codeAreaTokens.fontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_styledcomponents.codeAreaTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_styledcomponents.codeAreaTokens.lineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_styledcomponents.codeAreaTokens.fontSize}: ${_sdds_platform_ai.bodyS.fontSize};
+                ${_styledcomponents.codeAreaTokens.fontStyle}: ${_sdds_platform_ai.bodyS.fontStyle};
+                ${_styledcomponents.codeAreaTokens.fontWeight}: ${_sdds_platform_ai.bodyS.fontWeight};
+                ${_styledcomponents.codeAreaTokens.letterSpacing}: ${_sdds_platform_ai.bodyS.letterSpacing};
+                ${_styledcomponents.codeAreaTokens.lineHeight}: ${_sdds_platform_ai.bodyS.lineHeight};
 
                 ${_styledcomponents.codeAreaTokens.scrollWidth}: 0.125rem;
             `,
@@ -148,11 +149,11 @@ const config = {
                 ${_styledcomponents.codeAreaTokens.codePaddingRight}: 1.5rem;
 
                 ${_styledcomponents.codeAreaTokens.fontFamily}: 'SB Sans Text Mono', sans-serif;
-                ${_styledcomponents.codeAreaTokens.fontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_styledcomponents.codeAreaTokens.fontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_styledcomponents.codeAreaTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_styledcomponents.codeAreaTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_styledcomponents.codeAreaTokens.lineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_styledcomponents.codeAreaTokens.fontSize}: ${_sdds_platform_ai.bodyXS.fontSize};
+                ${_styledcomponents.codeAreaTokens.fontStyle}: ${_sdds_platform_ai.bodyXS.fontStyle};
+                ${_styledcomponents.codeAreaTokens.fontWeight}: ${_sdds_platform_ai.bodyXS.fontWeight};
+                ${_styledcomponents.codeAreaTokens.letterSpacing}: ${_sdds_platform_ai.bodyXS.letterSpacing};
+                ${_styledcomponents.codeAreaTokens.lineHeight}: ${_sdds_platform_ai.bodyXS.lineHeight};
 
                 ${_styledcomponents.codeAreaTokens.scrollWidth}: 0.125rem;
             `

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

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "config", {
     }
 });
 const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const _sdds_platform_ai = require("@salutejs/sdds-themes/tokens/sdds_platform_ai");
 const config = {
     defaults: {
         view: 'default',
@@ -17,22 +18,22 @@ const config = {
     variations: {
         view: {
             default: (0, _styledcomponents.css)`
-                ${_styledcomponents.codeAreaTokens.wrapperBackgroundColor}: var(--surface-transparent-primary);
-                ${_styledcomponents.codeAreaTokens.fieldBackgroundColor}: var(--surface-solid-card);
-
-                ${_styledcomponents.codeAreaTokens.codeColor}: var(--text-primary);
-                ${_styledcomponents.codeAreaTokens.lineNumberColor}: var(--text-tertiary);
-                ${_styledcomponents.codeAreaTokens.dividerColor}: var(--surface-transparent-tertiary);
-
-                ${_styledcomponents.codeAreaTokens.scrollTrackColor}: var(--surface-transparent-primary);
-                ${_styledcomponents.codeAreaTokens.scrollThumbColor}: var(--surface-transparent-tertiary);
-
-                ${_styledcomponents.codeAreaTokens.syntaxYellow}: var(--syntax-yellow);
-                ${_styledcomponents.codeAreaTokens.syntaxOrange}: var(--syntax-orange);
-                ${_styledcomponents.codeAreaTokens.syntaxPink}: var(--syntax-pink);
-                ${_styledcomponents.codeAreaTokens.syntaxSpring}: var(--syntax-spring);
-                ${_styledcomponents.codeAreaTokens.syntaxSkyBlue}: var(--syntax-sky-blue);
-                ${_styledcomponents.codeAreaTokens.syntaxRed}: var(--syntax-red);
+                ${_styledcomponents.codeAreaTokens.wrapperBackgroundColor}: ${_sdds_platform_ai.surfaceTransparentPrimary};
+                ${_styledcomponents.codeAreaTokens.fieldBackgroundColor}: ${_sdds_platform_ai.surfaceSolidCard};
+
+                ${_styledcomponents.codeAreaTokens.codeColor}: ${_sdds_platform_ai.textPrimary};
+                ${_styledcomponents.codeAreaTokens.lineNumberColor}: ${_sdds_platform_ai.textTertiary};
+                ${_styledcomponents.codeAreaTokens.dividerColor}: ${_sdds_platform_ai.surfaceTransparentTertiary};
+
+                ${_styledcomponents.codeAreaTokens.scrollTrackColor}: ${_sdds_platform_ai.surfaceTransparentPrimary};
+                ${_styledcomponents.codeAreaTokens.scrollThumbColor}: ${_sdds_platform_ai.surfaceTransparentTertiary};
+
+                ${_styledcomponents.codeAreaTokens.syntaxYellow}: ${_sdds_platform_ai.syntaxYellow};
+                ${_styledcomponents.codeAreaTokens.syntaxOrange}: ${_sdds_platform_ai.syntaxOrange};
+                ${_styledcomponents.codeAreaTokens.syntaxPink}: ${_sdds_platform_ai.syntaxPink};
+                ${_styledcomponents.codeAreaTokens.syntaxSpring}: ${_sdds_platform_ai.syntaxSpring};
+                ${_styledcomponents.codeAreaTokens.syntaxSkyBlue}: ${_sdds_platform_ai.syntaxSkyBlue};
+                ${_styledcomponents.codeAreaTokens.syntaxRed}: ${_sdds_platform_ai.syntaxRed};
             `
         },
         size: {
@@ -52,11 +53,11 @@ const config = {
                 ${_styledcomponents.codeAreaTokens.codePaddingRight}: 2.875rem;
 
                 ${_styledcomponents.codeAreaTokens.fontFamily}: 'SB Sans Text Mono', sans-serif;
-                ${_styledcomponents.codeAreaTokens.fontSize}: var(--plasma-typo-body-l-font-size);
-                ${_styledcomponents.codeAreaTokens.fontStyle}: var(--plasma-typo-body-l-font-style);
-                ${_styledcomponents.codeAreaTokens.fontWeight}: var(--plasma-typo-body-l-font-weight);
-                ${_styledcomponents.codeAreaTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${_styledcomponents.codeAreaTokens.lineHeight}: var(--plasma-typo-body-l-line-height);
+                ${_styledcomponents.codeAreaTokens.fontSize}: ${_sdds_platform_ai.bodyL.fontSize};
+                ${_styledcomponents.codeAreaTokens.fontStyle}: ${_sdds_platform_ai.bodyL.fontStyle};
+                ${_styledcomponents.codeAreaTokens.fontWeight}: ${_sdds_platform_ai.bodyL.fontWeight};
+                ${_styledcomponents.codeAreaTokens.letterSpacing}: ${_sdds_platform_ai.bodyL.letterSpacing};
+                ${_styledcomponents.codeAreaTokens.lineHeight}: ${_sdds_platform_ai.bodyL.lineHeight};
 
                 ${_styledcomponents.codeAreaTokens.scrollWidth}: 0.125rem;
             `,
@@ -76,11 +77,11 @@ const config = {
                 ${_styledcomponents.codeAreaTokens.codePaddingRight}: 2.75rem;
 
                 ${_styledcomponents.codeAreaTokens.fontFamily}: 'SB Sans Text Mono', sans-serif;
-                ${_styledcomponents.codeAreaTokens.fontSize}: var(--plasma-typo-body-l-font-size);
-                ${_styledcomponents.codeAreaTokens.fontStyle}: var(--plasma-typo-body-l-font-style);
-                ${_styledcomponents.codeAreaTokens.fontWeight}: var(--plasma-typo-body-l-font-weight);
-                ${_styledcomponents.codeAreaTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${_styledcomponents.codeAreaTokens.lineHeight}: var(--plasma-typo-body-l-line-height);
+                ${_styledcomponents.codeAreaTokens.fontSize}: ${_sdds_platform_ai.bodyL.fontSize};
+                ${_styledcomponents.codeAreaTokens.fontStyle}: ${_sdds_platform_ai.bodyL.fontStyle};
+                ${_styledcomponents.codeAreaTokens.fontWeight}: ${_sdds_platform_ai.bodyL.fontWeight};
+                ${_styledcomponents.codeAreaTokens.letterSpacing}: ${_sdds_platform_ai.bodyL.letterSpacing};
+                ${_styledcomponents.codeAreaTokens.lineHeight}: ${_sdds_platform_ai.bodyL.lineHeight};
 
                 ${_styledcomponents.codeAreaTokens.scrollWidth}: 0.125rem;
             `,
@@ -100,11 +101,11 @@ const config = {
                 ${_styledcomponents.codeAreaTokens.codePaddingRight}: 2.5rem;
 
                 ${_styledcomponents.codeAreaTokens.fontFamily}: 'SB Sans Text Mono', sans-serif;
-                ${_styledcomponents.codeAreaTokens.fontSize}: var(--plasma-typo-body-m-font-size);
-                ${_styledcomponents.codeAreaTokens.fontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_styledcomponents.codeAreaTokens.fontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${_styledcomponents.codeAreaTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_styledcomponents.codeAreaTokens.lineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_styledcomponents.codeAreaTokens.fontSize}: ${_sdds_platform_ai.bodyM.fontSize};
+                ${_styledcomponents.codeAreaTokens.fontStyle}: ${_sdds_platform_ai.bodyM.fontStyle};
+                ${_styledcomponents.codeAreaTokens.fontWeight}: ${_sdds_platform_ai.bodyM.fontWeight};
+                ${_styledcomponents.codeAreaTokens.letterSpacing}: ${_sdds_platform_ai.bodyM.letterSpacing};
+                ${_styledcomponents.codeAreaTokens.lineHeight}: ${_sdds_platform_ai.bodyM.lineHeight};
 
                 ${_styledcomponents.codeAreaTokens.scrollWidth}: 0.125rem;
             `,
@@ -124,11 +125,11 @@ const config = {
                 ${_styledcomponents.codeAreaTokens.codePaddingRight}: 2.375rem;
 
                 ${_styledcomponents.codeAreaTokens.fontFamily}: 'SB Sans Text Mono', sans-serif;
-                ${_styledcomponents.codeAreaTokens.fontSize}: var(--plasma-typo-body-s-font-size);
-                ${_styledcomponents.codeAreaTokens.fontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_styledcomponents.codeAreaTokens.fontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_styledcomponents.codeAreaTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_styledcomponents.codeAreaTokens.lineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_styledcomponents.codeAreaTokens.fontSize}: ${_sdds_platform_ai.bodyS.fontSize};
+                ${_styledcomponents.codeAreaTokens.fontStyle}: ${_sdds_platform_ai.bodyS.fontStyle};
+                ${_styledcomponents.codeAreaTokens.fontWeight}: ${_sdds_platform_ai.bodyS.fontWeight};
+                ${_styledcomponents.codeAreaTokens.letterSpacing}: ${_sdds_platform_ai.bodyS.letterSpacing};
+                ${_styledcomponents.codeAreaTokens.lineHeight}: ${_sdds_platform_ai.bodyS.lineHeight};
 
                 ${_styledcomponents.codeAreaTokens.scrollWidth}: 0.125rem;
             `,
@@ -148,11 +149,11 @@ const config = {
                 ${_styledcomponents.codeAreaTokens.codePaddingRight}: 1.5rem;
 
                 ${_styledcomponents.codeAreaTokens.fontFamily}: 'SB Sans Text Mono', sans-serif;
-                ${_styledcomponents.codeAreaTokens.fontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_styledcomponents.codeAreaTokens.fontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_styledcomponents.codeAreaTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_styledcomponents.codeAreaTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_styledcomponents.codeAreaTokens.lineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_styledcomponents.codeAreaTokens.fontSize}: ${_sdds_platform_ai.bodyXS.fontSize};
+                ${_styledcomponents.codeAreaTokens.fontStyle}: ${_sdds_platform_ai.bodyXS.fontStyle};
+                ${_styledcomponents.codeAreaTokens.fontWeight}: ${_sdds_platform_ai.bodyXS.fontWeight};
+                ${_styledcomponents.codeAreaTokens.letterSpacing}: ${_sdds_platform_ai.bodyXS.letterSpacing};
+                ${_styledcomponents.codeAreaTokens.lineHeight}: ${_sdds_platform_ai.bodyXS.lineHeight};
 
                 ${_styledcomponents.codeAreaTokens.scrollWidth}: 0.125rem;
             `

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

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "config", {
     }
 });
 const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const _sdds_platform_ai = require("@salutejs/sdds-themes/tokens/sdds_platform_ai");
 const config = {
     defaults: {
         view: 'default',
@@ -18,19 +19,19 @@ const config = {
     variations: {
         view: {
             default: (0, _styledcomponents.css)`
-                ${_styledcomponents.codeFieldTokens.caretColor}: var(--surface-accent);
+                ${_styledcomponents.codeFieldTokens.caretColor}: ${_sdds_platform_ai.surfaceAccent};
 
-                ${_styledcomponents.codeFieldTokens.captionColor}: var(--text-secondary);
-                ${_styledcomponents.codeFieldTokens.captionColorError}: var(--text-negative);
+                ${_styledcomponents.codeFieldTokens.captionColor}: ${_sdds_platform_ai.textSecondary};
+                ${_styledcomponents.codeFieldTokens.captionColorError}: ${_sdds_platform_ai.textNegative};
 
-                ${_styledcomponents.codeFieldTokens.codeColor}: var(--text-primary);
-                ${_styledcomponents.codeFieldTokens.codeColorError}: var(--text-negative);
-                ${_styledcomponents.codeFieldTokens.borderColorFocus}: var(--outline-accent);
+                ${_styledcomponents.codeFieldTokens.codeColor}: ${_sdds_platform_ai.textPrimary};
+                ${_styledcomponents.codeFieldTokens.codeColorError}: ${_sdds_platform_ai.textNegative};
+                ${_styledcomponents.codeFieldTokens.borderColorFocus}: ${_sdds_platform_ai.outlineAccent};
 
-                ${_styledcomponents.codeFieldTokens.backgroundColor}: var(--surface-transparent-primary);
-                ${_styledcomponents.codeFieldTokens.backgroundColorHover}: var(--surface-transparent-primary-hover);
-                ${_styledcomponents.codeFieldTokens.backgroundColorFocus}: var(--surface-transparent-secondary);
-                ${_styledcomponents.codeFieldTokens.backgroundErrorColor}: var(--surface-transparent-negative);
+                ${_styledcomponents.codeFieldTokens.backgroundColor}: ${_sdds_platform_ai.surfaceTransparentPrimary};
+                ${_styledcomponents.codeFieldTokens.backgroundColorHover}: ${_sdds_platform_ai.surfaceTransparentPrimaryHover};
+                ${_styledcomponents.codeFieldTokens.backgroundColorFocus}: ${_sdds_platform_ai.surfaceTransparentSecondary};
+                ${_styledcomponents.codeFieldTokens.backgroundErrorColor}: ${_sdds_platform_ai.surfaceTransparentNegative};
             `
         },
         size: {
@@ -43,19 +44,19 @@ const config = {
                 ${_styledcomponents.codeFieldTokens.codeItemWidth}: 2.75rem;
                 ${_styledcomponents.codeFieldTokens.codeItemHeight}: 3.5rem;
 
-                ${_styledcomponents.codeFieldTokens.fontFamily}: var(--plasma-typo-body-l-font-family);
-                ${_styledcomponents.codeFieldTokens.fontSize}: var(--plasma-typo-body-l-font-size);
-                ${_styledcomponents.codeFieldTokens.fontStyle}: var(--plasma-typo-body-l-font-style);
-                ${_styledcomponents.codeFieldTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight);
-                ${_styledcomponents.codeFieldTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${_styledcomponents.codeFieldTokens.lineHeight}: var(--plasma-typo-body-l-line-height);
+                ${_styledcomponents.codeFieldTokens.fontFamily}: ${_sdds_platform_ai.bodyL.fontFamily};
+                ${_styledcomponents.codeFieldTokens.fontSize}: ${_sdds_platform_ai.bodyL.fontSize};
+                ${_styledcomponents.codeFieldTokens.fontStyle}: ${_sdds_platform_ai.bodyL.fontStyle};
+                ${_styledcomponents.codeFieldTokens.fontWeight}: ${_sdds_platform_ai.bodyLBold.fontWeight};
+                ${_styledcomponents.codeFieldTokens.letterSpacing}: ${_sdds_platform_ai.bodyL.letterSpacing};
+                ${_styledcomponents.codeFieldTokens.lineHeight}: ${_sdds_platform_ai.bodyL.lineHeight};
 
-                ${_styledcomponents.codeFieldTokens.captionFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_styledcomponents.codeFieldTokens.captionFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_styledcomponents.codeFieldTokens.captionFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_styledcomponents.codeFieldTokens.captionFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_styledcomponents.codeFieldTokens.captionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_styledcomponents.codeFieldTokens.captionLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_styledcomponents.codeFieldTokens.captionFontFamily}: ${_sdds_platform_ai.bodyS.fontFamily};
+                ${_styledcomponents.codeFieldTokens.captionFontSize}: ${_sdds_platform_ai.bodyS.fontSize};
+                ${_styledcomponents.codeFieldTokens.captionFontStyle}: ${_sdds_platform_ai.bodyS.fontStyle};
+                ${_styledcomponents.codeFieldTokens.captionFontWeight}: ${_sdds_platform_ai.bodyS.fontWeight};
+                ${_styledcomponents.codeFieldTokens.captionLetterSpacing}: ${_sdds_platform_ai.bodyS.letterSpacing};
+                ${_styledcomponents.codeFieldTokens.captionLineHeight}: ${_sdds_platform_ai.bodyS.lineHeight};
 
                 ${_styledcomponents.codeFieldTokens.borderRadius}: 0.875rem;
                 ${_styledcomponents.codeFieldTokens.borderRadiusSegmented}: 0.375rem;
@@ -70,19 +71,19 @@ const config = {
                 ${_styledcomponents.codeFieldTokens.codeItemWidth}: 2.375rem;
                 ${_styledcomponents.codeFieldTokens.codeItemHeight}: 3rem;
 
-                ${_styledcomponents.codeFieldTokens.fontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_styledcomponents.codeFieldTokens.fontSize}: var(--plasma-typo-body-m-font-size);
-                ${_styledcomponents.codeFieldTokens.fontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_styledcomponents.codeFieldTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight);
-                ${_styledcomponents.codeFieldTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_styledcomponents.codeFieldTokens.lineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_styledcomponents.codeFieldTokens.fontFamily}: ${_sdds_platform_ai.bodyM.fontFamily};
+                ${_styledcomponents.codeFieldTokens.fontSize}: ${_sdds_platform_ai.bodyM.fontSize};
+                ${_styledcomponents.codeFieldTokens.fontStyle}: ${_sdds_platform_ai.bodyM.fontStyle};
+                ${_styledcomponents.codeFieldTokens.fontWeight}: ${_sdds_platform_ai.bodyMBold.fontWeight};
+                ${_styledcomponents.codeFieldTokens.letterSpacing}: ${_sdds_platform_ai.bodyM.letterSpacing};
+                ${_styledcomponents.codeFieldTokens.lineHeight}: ${_sdds_platform_ai.bodyM.lineHeight};
 
-                ${_styledcomponents.codeFieldTokens.captionFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_styledcomponents.codeFieldTokens.captionFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_styledcomponents.codeFieldTokens.captionFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_styledcomponents.codeFieldTokens.captionFontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_styledcomponents.codeFieldTokens.captionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_styledcomponents.codeFieldTokens.captionLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_styledcomponents.codeFieldTokens.captionFontFamily}: ${_sdds_platform_ai.bodyXS.fontFamily};
+                ${_styledcomponents.codeFieldTokens.captionFontSize}: ${_sdds_platform_ai.bodyXS.fontSize};
+                ${_styledcomponents.codeFieldTokens.captionFontStyle}: ${_sdds_platform_ai.bodyXS.fontStyle};
+                ${_styledcomponents.codeFieldTokens.captionFontWeight}: ${_sdds_platform_ai.bodyXS.fontWeight};
+                ${_styledcomponents.codeFieldTokens.captionLetterSpacing}: ${_sdds_platform_ai.bodyXS.letterSpacing};
+                ${_styledcomponents.codeFieldTokens.captionLineHeight}: ${_sdds_platform_ai.bodyXS.lineHeight};
 
                 ${_styledcomponents.codeFieldTokens.borderRadius}: 0.75rem;
                 ${_styledcomponents.codeFieldTokens.borderRadiusSegmented}: 0.25rem;

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

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "config", {
     }
 });
 const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const _sdds_platform_ai = require("@salutejs/sdds-themes/tokens/sdds_platform_ai");
 const config = {
     defaults: {
         view: 'default',
@@ -17,12 +18,12 @@ const config = {
     variations: {
         view: {
             default: (0, _styledcomponents.css)`
-                ${_styledcomponents.codeInputTokens.captionColor}: var(--text-secondary);
-                ${_styledcomponents.codeInputTokens.captionColorError}: var(--text-negative);
+                ${_styledcomponents.codeInputTokens.captionColor}: ${_sdds_platform_ai.textSecondary};
+                ${_styledcomponents.codeInputTokens.captionColorError}: ${_sdds_platform_ai.textNegative};
 
-                ${_styledcomponents.codeInputTokens.codeColor}: var(--text-primary);
-                ${_styledcomponents.codeInputTokens.codeColorError}: var(--text-negative);
-                ${_styledcomponents.codeInputTokens.borderColorFocus}: var(--outline-accent);
+                ${_styledcomponents.codeInputTokens.codeColor}: ${_sdds_platform_ai.textPrimary};
+                ${_styledcomponents.codeInputTokens.codeColorError}: ${_sdds_platform_ai.textNegative};
+                ${_styledcomponents.codeInputTokens.borderColorFocus}: ${_sdds_platform_ai.outlineAccent};
             `
         },
         size: {
@@ -32,10 +33,10 @@ const config = {
 
                 ${_styledcomponents.codeInputTokens.separatorWidth}: 0.75rem;
 
-                ${_styledcomponents.codeInputTokens.fontFamily}: var(--plasma-typo-dspl-l-font-family);
-                ${_styledcomponents.codeInputTokens.fontStyle}: var(--plasma-typo-dspl-l-font-style);
-                ${_styledcomponents.codeInputTokens.fontWeight}: var(--plasma-typo-dspl-l-bold-font-weight);
-                ${_styledcomponents.codeInputTokens.letterSpacing}: var(--plasma-typo-dspl-l-letter-spacing);
+                ${_styledcomponents.codeInputTokens.fontFamily}: ${_sdds_platform_ai.dsplL.fontFamily};
+                ${_styledcomponents.codeInputTokens.fontStyle}: ${_sdds_platform_ai.dsplL.fontStyle};
+                ${_styledcomponents.codeInputTokens.fontWeight}: ${_sdds_platform_ai.dsplLBold.fontWeight};
+                ${_styledcomponents.codeInputTokens.letterSpacing}: ${_sdds_platform_ai.dsplL.letterSpacing};
 
                 ${_styledcomponents.codeInputTokens.largeFontSize}: 8rem;
                 ${_styledcomponents.codeInputTokens.largeLineHeight}: 8rem;
@@ -46,12 +47,12 @@ const config = {
                 ${_styledcomponents.codeInputTokens.smallFontSize}: 5.5rem;
                 ${_styledcomponents.codeInputTokens.smallLineHeight}: 5.75rem;
 
-                ${_styledcomponents.codeInputTokens.captionFontFamily}: var(--plasma-typo-h3-font-family);
-                ${_styledcomponents.codeInputTokens.captionFontSize}: var(--plasma-typo-h3-font-size);
-                ${_styledcomponents.codeInputTokens.captionFontStyle}: var(--plasma-typo-h3-font-style);
-                ${_styledcomponents.codeInputTokens.captionFontWeight}: var(--plasma-typo-h3-font-weight);
-                ${_styledcomponents.codeInputTokens.captionLetterSpacing}: var(--plasma-typo-h3-letter-spacing);
-                ${_styledcomponents.codeInputTokens.captionLineHeight}: var(--plasma-typo-h3-line-height);
+                ${_styledcomponents.codeInputTokens.captionFontFamily}: ${_sdds_platform_ai.h3.fontFamily};
+                ${_styledcomponents.codeInputTokens.captionFontSize}: ${_sdds_platform_ai.h3.fontSize};
+                ${_styledcomponents.codeInputTokens.captionFontStyle}: ${_sdds_platform_ai.h3.fontStyle};
+                ${_styledcomponents.codeInputTokens.captionFontWeight}: ${_sdds_platform_ai.h3.fontWeight};
+                ${_styledcomponents.codeInputTokens.captionLetterSpacing}: ${_sdds_platform_ai.h3.letterSpacing};
+                ${_styledcomponents.codeInputTokens.captionLineHeight}: ${_sdds_platform_ai.h3.lineHeight};
 
                 ${_styledcomponents.codeInputTokens.largeCodeItemWidth}: 5rem;
                 ${_styledcomponents.codeInputTokens.largeCodeItemHeight}: 8rem;
@@ -71,10 +72,10 @@ const config = {
 
                 ${_styledcomponents.codeInputTokens.separatorWidth}: 0.75rem;
 
-                ${_styledcomponents.codeInputTokens.fontFamily}: var(--plasma-typo-dspl-m-font-family);
-                ${_styledcomponents.codeInputTokens.fontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_styledcomponents.codeInputTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight);
-                ${_styledcomponents.codeInputTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing);
+                ${_styledcomponents.codeInputTokens.fontFamily}: ${_sdds_platform_ai.dsplM.fontFamily};
+                ${_styledcomponents.codeInputTokens.fontStyle}: ${_sdds_platform_ai.bodyM.fontStyle};
+                ${_styledcomponents.codeInputTokens.fontWeight}: ${_sdds_platform_ai.bodyMBold.fontWeight};
+                ${_styledcomponents.codeInputTokens.letterSpacing}: ${_sdds_platform_ai.bodyM.letterSpacing};
 
                 ${_styledcomponents.codeInputTokens.largeFontSize}: 5.5rem;
                 ${_styledcomponents.codeInputTokens.largeLineHeight}: 5.75rem;
@@ -85,12 +86,12 @@ const config = {
                 ${_styledcomponents.codeInputTokens.smallFontSize}: 3.5rem;
                 ${_styledcomponents.codeInputTokens.smallLineHeight}: 3.75rem;
 
-                ${_styledcomponents.codeInputTokens.captionFontFamily}: var(--plasma-typo-h4-font-family);
-                ${_styledcomponents.codeInputTokens.captionFontSize}: var(--plasma-typo-h4-font-size);
-                ${_styledcomponents.codeInputTokens.captionFontStyle}: var(--plasma-typo-h4-font-style);
-                ${_styledcomponents.codeInputTokens.captionFontWeight}: var(--plasma-typo-h4-font-weight);
-                ${_styledcomponents.codeInputTokens.captionLetterSpacing}: var(--plasma-typo-h4-letter-spacing);
-                ${_styledcomponents.codeInputTokens.captionLineHeight}: var(--plasma-typo-h4-line-height);
+                ${_styledcomponents.codeInputTokens.captionFontFamily}: ${_sdds_platform_ai.h4.fontFamily};
+                ${_styledcomponents.codeInputTokens.captionFontSize}: ${_sdds_platform_ai.h4.fontSize};
+                ${_styledcomponents.codeInputTokens.captionFontStyle}: ${_sdds_platform_ai.h4.fontStyle};
+                ${_styledcomponents.codeInputTokens.captionFontWeight}: ${_sdds_platform_ai.h4.fontWeight};
+                ${_styledcomponents.codeInputTokens.captionLetterSpacing}: ${_sdds_platform_ai.h4.letterSpacing};
+                ${_styledcomponents.codeInputTokens.captionLineHeight}: ${_sdds_platform_ai.h4.lineHeight};
 
                 ${_styledcomponents.codeInputTokens.largeCodeItemWidth}: 3.5rem;
                 ${_styledcomponents.codeInputTokens.largeCodeItemHeight}: 5.75rem;
@@ -110,10 +111,10 @@ const config = {
 
                 ${_styledcomponents.codeInputTokens.separatorWidth}: 0.5rem;
 
-                ${_styledcomponents.codeInputTokens.fontFamily}: var(--plasma-typo-dspl-s-font-family);
-                ${_styledcomponents.codeInputTokens.fontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_styledcomponents.codeInputTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${_styledcomponents.codeInputTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing);
+                ${_styledcomponents.codeInputTokens.fontFamily}: ${_sdds_platform_ai.dsplS.fontFamily};
+                ${_styledcomponents.codeInputTokens.fontStyle}: ${_sdds_platform_ai.bodyS.fontStyle};
+                ${_styledcomponents.codeInputTokens.fontWeight}: ${_sdds_platform_ai.bodySBold.fontWeight};
+                ${_styledcomponents.codeInputTokens.letterSpacing}: ${_sdds_platform_ai.bodyS.letterSpacing};
 
                 ${_styledcomponents.codeInputTokens.largeFontSize}: 4rem;
                 ${_styledcomponents.codeInputTokens.largeLineHeight}: 4.25rem;
@@ -124,12 +125,12 @@ const config = {
                 ${_styledcomponents.codeInputTokens.smallFontSize}: 2.5rem;
                 ${_styledcomponents.codeInputTokens.smallLineHeight}: 2.75rem;
 
-                ${_styledcomponents.codeInputTokens.captionFontFamily}: var(--plasma-typo-h5-font-family);
-                ${_styledcomponents.codeInputTokens.captionFontSize}: var(--plasma-typo-h5-font-size);
-                ${_styledcomponents.codeInputTokens.captionFontStyle}: var(--plasma-typo-h5-font-style);
-                ${_styledcomponents.codeInputTokens.captionFontWeight}: var(--plasma-typo-h5-font-weight);
-                ${_styledcomponents.codeInputTokens.captionLetterSpacing}: var(--plasma-typo-h5-letter-spacing);
-                ${_styledcomponents.codeInputTokens.captionLineHeight}: var(--plasma-typo-h5-line-height);
+                ${_styledcomponents.codeInputTokens.captionFontFamily}: ${_sdds_platform_ai.h5.fontFamily};
+                ${_styledcomponents.codeInputTokens.captionFontSize}: ${_sdds_platform_ai.h5.fontSize};
+                ${_styledcomponents.codeInputTokens.captionFontStyle}: ${_sdds_platform_ai.h5.fontStyle};
+                ${_styledcomponents.codeInputTokens.captionFontWeight}: ${_sdds_platform_ai.h5.fontWeight};
+                ${_styledcomponents.codeInputTokens.captionLetterSpacing}: ${_sdds_platform_ai.h5.letterSpacing};
+                ${_styledcomponents.codeInputTokens.captionLineHeight}: ${_sdds_platform_ai.h5.lineHeight};
 
                 ${_styledcomponents.codeInputTokens.largeCodeItemWidth}: 2.5rem;
                 ${_styledcomponents.codeInputTokens.largeCodeItemHeight}: 4.25rem;