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

package/dist/styled-components/cjs/components/NumberInput/NumberInput.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',
@@ -19,26 +20,26 @@ const config = {
     variations: {
         view: {
             default: (0, _styledcomponents.css)`
-                ${_styledcomponents.numberInputTokens.caretColor}: var(--text-accent);
-                ${_styledcomponents.numberInputTokens.errorColor}: var(--text-negative);
-                ${_styledcomponents.numberInputTokens.backgroundErrorColor}: var(--surface-transparent-negative);
-
-                ${_styledcomponents.numberInputTokens.color}: var(--text-primary);
-                ${_styledcomponents.numberInputTokens.colorSolid}: var(--inverse-text-primary);
-                ${_styledcomponents.numberInputTokens.additionalTextColor}: var(--text-tertiary);
-                ${_styledcomponents.numberInputTokens.additionalTextColorSolid}: var(--inverse-text-tertiary);
-                ${_styledcomponents.numberInputTokens.backgroundColorFocus}: var(--surface-transparent-secondary);
-                ${_styledcomponents.numberInputTokens.backgroundColorSolidFocus}: var(--inverse-surface-transparent-secondary);
-                ${_styledcomponents.numberInputTokens.backgroundColorSolid}: var(--surface-solid-default);
-
-                ${_styledcomponents.numberInputTokens.iconButtonColor}: var(--inverse-text-primary);
-                ${_styledcomponents.numberInputTokens.iconButtonBackgroundColor}: var(--surface-solid-default);
-                ${_styledcomponents.numberInputTokens.iconButtonColorHover}: var(--inverse-text-primary);
-                ${_styledcomponents.numberInputTokens.iconButtonColorSolidHover}: var(--inverse-text-primary-hover);
-                ${_styledcomponents.numberInputTokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover);
-                ${_styledcomponents.numberInputTokens.iconButtonColorActive}: var(--inverse-text-primary);
-                ${_styledcomponents.numberInputTokens.iconButtonColorSolidActive}: var(--inverse-text-primary-active);
-                ${_styledcomponents.numberInputTokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active);
+                ${_styledcomponents.numberInputTokens.caretColor}: ${_sdds_platform_ai.textAccent};
+                ${_styledcomponents.numberInputTokens.errorColor}: ${_sdds_platform_ai.textNegative};
+                ${_styledcomponents.numberInputTokens.backgroundErrorColor}: ${_sdds_platform_ai.surfaceTransparentNegative};
+
+                ${_styledcomponents.numberInputTokens.color}: ${_sdds_platform_ai.textPrimary};
+                ${_styledcomponents.numberInputTokens.colorSolid}: ${_sdds_platform_ai.inverseTextPrimary};
+                ${_styledcomponents.numberInputTokens.additionalTextColor}: ${_sdds_platform_ai.textTertiary};
+                ${_styledcomponents.numberInputTokens.additionalTextColorSolid}: ${_sdds_platform_ai.inverseTextTertiary};
+                ${_styledcomponents.numberInputTokens.backgroundColorFocus}: ${_sdds_platform_ai.surfaceTransparentSecondary};
+                ${_styledcomponents.numberInputTokens.backgroundColorSolidFocus}: ${_sdds_platform_ai.inverseSurfaceTransparentSecondary};
+                ${_styledcomponents.numberInputTokens.backgroundColorSolid}: ${_sdds_platform_ai.surfaceSolidDefault};
+
+                ${_styledcomponents.numberInputTokens.iconButtonColor}: ${_sdds_platform_ai.inverseTextPrimary};
+                ${_styledcomponents.numberInputTokens.iconButtonBackgroundColor}: ${_sdds_platform_ai.surfaceSolidDefault};
+                ${_styledcomponents.numberInputTokens.iconButtonColorHover}: ${_sdds_platform_ai.inverseTextPrimary};
+                ${_styledcomponents.numberInputTokens.iconButtonColorSolidHover}: ${_sdds_platform_ai.inverseTextPrimaryHover};
+                ${_styledcomponents.numberInputTokens.iconButtonBackgroundColorHover}: ${_sdds_platform_ai.surfaceSolidDefaultHover};
+                ${_styledcomponents.numberInputTokens.iconButtonColorActive}: ${_sdds_platform_ai.inverseTextPrimary};
+                ${_styledcomponents.numberInputTokens.iconButtonColorSolidActive}: ${_sdds_platform_ai.inverseTextPrimaryActive};
+                ${_styledcomponents.numberInputTokens.iconButtonBackgroundColorActive}: ${_sdds_platform_ai.surfaceSolidDefaultActive};
 
                 ${_styledcomponents.numberInputTokens.actionButtonDisabledOpacity}: 0.4;
 
@@ -46,26 +47,26 @@ const config = {
                 ${_styledcomponents.numberInputTokens.loaderSpinnerColorSolid}: inherit;
             `,
             secondary: (0, _styledcomponents.css)`
-                ${_styledcomponents.numberInputTokens.caretColor}: var(--text-accent);
-                ${_styledcomponents.numberInputTokens.errorColor}: var(--text-negative);
-                ${_styledcomponents.numberInputTokens.backgroundErrorColor}: var(--surface-transparent-negative);
-
-                ${_styledcomponents.numberInputTokens.color}: var(--text-primary);
-                ${_styledcomponents.numberInputTokens.colorSolid}: var(--text-primary);
-                ${_styledcomponents.numberInputTokens.additionalTextColor}: var(--text-tertiary);
-                ${_styledcomponents.numberInputTokens.additionalTextColorSolid}: var(--text-tertiary);
-                ${_styledcomponents.numberInputTokens.backgroundColorFocus}: var(--surface-transparent-secondary);
-                ${_styledcomponents.numberInputTokens.backgroundColorSolidFocus}: var(--surface-transparent-secondary);
-                ${_styledcomponents.numberInputTokens.backgroundColorSolid}: var(--surface-transparent-secondary);
-
-                ${_styledcomponents.numberInputTokens.iconButtonColor}: var(--text-primary);
-                ${_styledcomponents.numberInputTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary);
-                ${_styledcomponents.numberInputTokens.iconButtonColorHover}: var(--text-primary);
-                ${_styledcomponents.numberInputTokens.iconButtonColorSolidHover}: var(--text-primary-hover);
-                ${_styledcomponents.numberInputTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover);
-                ${_styledcomponents.numberInputTokens.iconButtonColorActive}: var(--text-primary);
-                ${_styledcomponents.numberInputTokens.iconButtonColorSolidActive}: var(--text-primary-active);
-                ${_styledcomponents.numberInputTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active);
+                ${_styledcomponents.numberInputTokens.caretColor}: ${_sdds_platform_ai.textAccent};
+                ${_styledcomponents.numberInputTokens.errorColor}: ${_sdds_platform_ai.textNegative};
+                ${_styledcomponents.numberInputTokens.backgroundErrorColor}: ${_sdds_platform_ai.surfaceTransparentNegative};
+
+                ${_styledcomponents.numberInputTokens.color}: ${_sdds_platform_ai.textPrimary};
+                ${_styledcomponents.numberInputTokens.colorSolid}: ${_sdds_platform_ai.textPrimary};
+                ${_styledcomponents.numberInputTokens.additionalTextColor}: ${_sdds_platform_ai.textTertiary};
+                ${_styledcomponents.numberInputTokens.additionalTextColorSolid}: ${_sdds_platform_ai.textTertiary};
+                ${_styledcomponents.numberInputTokens.backgroundColorFocus}: ${_sdds_platform_ai.surfaceTransparentSecondary};
+                ${_styledcomponents.numberInputTokens.backgroundColorSolidFocus}: ${_sdds_platform_ai.surfaceTransparentSecondary};
+                ${_styledcomponents.numberInputTokens.backgroundColorSolid}: ${_sdds_platform_ai.surfaceTransparentSecondary};
+
+                ${_styledcomponents.numberInputTokens.iconButtonColor}: ${_sdds_platform_ai.textPrimary};
+                ${_styledcomponents.numberInputTokens.iconButtonBackgroundColor}: ${_sdds_platform_ai.surfaceTransparentSecondary};
+                ${_styledcomponents.numberInputTokens.iconButtonColorHover}: ${_sdds_platform_ai.textPrimary};
+                ${_styledcomponents.numberInputTokens.iconButtonColorSolidHover}: ${_sdds_platform_ai.textPrimaryHover};
+                ${_styledcomponents.numberInputTokens.iconButtonBackgroundColorHover}: ${_sdds_platform_ai.surfaceTransparentSecondaryHover};
+                ${_styledcomponents.numberInputTokens.iconButtonColorActive}: ${_sdds_platform_ai.textPrimary};
+                ${_styledcomponents.numberInputTokens.iconButtonColorSolidActive}: ${_sdds_platform_ai.textPrimaryActive};
+                ${_styledcomponents.numberInputTokens.iconButtonBackgroundColorActive}: ${_sdds_platform_ai.surfaceTransparentSecondaryActive};
 
                 ${_styledcomponents.numberInputTokens.actionButtonDisabledOpacity}: 0.4;
 
@@ -73,27 +74,27 @@ const config = {
                 ${_styledcomponents.numberInputTokens.loaderSpinnerColorSolid}: inherit;
             `,
             accent: (0, _styledcomponents.css)`
-                ${_styledcomponents.numberInputTokens.caretColor}: var(--text-accent);
-                ${_styledcomponents.numberInputTokens.caretColorSolid}: var(--inverse-text-primary);
-                ${_styledcomponents.numberInputTokens.errorColor}: var(--text-negative);
-                ${_styledcomponents.numberInputTokens.backgroundErrorColor}: var(--surface-transparent-negative);
-
-                ${_styledcomponents.numberInputTokens.color}: var(--text-primary);
-                ${_styledcomponents.numberInputTokens.colorSolid}: var(--on-dark-text-primary);
-                ${_styledcomponents.numberInputTokens.additionalTextColor}: var(--text-tertiary);
-                ${_styledcomponents.numberInputTokens.additionalTextColorSolid}: var(--on-dark-text-tertiary);
-                ${_styledcomponents.numberInputTokens.backgroundColorFocus}: var(--surface-transparent-secondary);
-                ${_styledcomponents.numberInputTokens.backgroundColorSolidFocus}: var(--on-dark-surface-transparent-secondary);
-                ${_styledcomponents.numberInputTokens.backgroundColorSolid}: var(--surface-accent);
-
-                ${_styledcomponents.numberInputTokens.iconButtonColor}: var(--on-dark-text-primary);
-                ${_styledcomponents.numberInputTokens.iconButtonBackgroundColor}: var(--surface-accent);
-                ${_styledcomponents.numberInputTokens.iconButtonColorHover}: var(--inverse-text-primary);
-                ${_styledcomponents.numberInputTokens.iconButtonColorSolidHover}: var(--on-dark-text-primary-hover);
-                ${_styledcomponents.numberInputTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover);
-                ${_styledcomponents.numberInputTokens.iconButtonColorActive}: var(--inverse-text-primary);
-                ${_styledcomponents.numberInputTokens.iconButtonColorSolidActive}: var(--on-dark-text-primary-active);
-                ${_styledcomponents.numberInputTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active);
+                ${_styledcomponents.numberInputTokens.caretColor}: ${_sdds_platform_ai.textAccent};
+                ${_styledcomponents.numberInputTokens.caretColorSolid}: ${_sdds_platform_ai.inverseTextPrimary};
+                ${_styledcomponents.numberInputTokens.errorColor}: ${_sdds_platform_ai.textNegative};
+                ${_styledcomponents.numberInputTokens.backgroundErrorColor}: ${_sdds_platform_ai.surfaceTransparentNegative};
+
+                ${_styledcomponents.numberInputTokens.color}: ${_sdds_platform_ai.textPrimary};
+                ${_styledcomponents.numberInputTokens.colorSolid}: ${_sdds_platform_ai.onDarkTextPrimary};
+                ${_styledcomponents.numberInputTokens.additionalTextColor}: ${_sdds_platform_ai.textTertiary};
+                ${_styledcomponents.numberInputTokens.additionalTextColorSolid}: ${_sdds_platform_ai.onDarkTextTertiary};
+                ${_styledcomponents.numberInputTokens.backgroundColorFocus}: ${_sdds_platform_ai.surfaceTransparentSecondary};
+                ${_styledcomponents.numberInputTokens.backgroundColorSolidFocus}: ${_sdds_platform_ai.onDarkSurfaceTransparentSecondary};
+                ${_styledcomponents.numberInputTokens.backgroundColorSolid}: ${_sdds_platform_ai.surfaceAccent};
+
+                ${_styledcomponents.numberInputTokens.iconButtonColor}: ${_sdds_platform_ai.onDarkTextPrimary};
+                ${_styledcomponents.numberInputTokens.iconButtonBackgroundColor}: ${_sdds_platform_ai.surfaceAccent};
+                ${_styledcomponents.numberInputTokens.iconButtonColorHover}: ${_sdds_platform_ai.inverseTextPrimary};
+                ${_styledcomponents.numberInputTokens.iconButtonColorSolidHover}: ${_sdds_platform_ai.onDarkTextPrimaryHover};
+                ${_styledcomponents.numberInputTokens.iconButtonBackgroundColorHover}: ${_sdds_platform_ai.surfaceAccentHover};
+                ${_styledcomponents.numberInputTokens.iconButtonColorActive}: ${_sdds_platform_ai.inverseTextPrimary};
+                ${_styledcomponents.numberInputTokens.iconButtonColorSolidActive}: ${_sdds_platform_ai.onDarkTextPrimaryActive};
+                ${_styledcomponents.numberInputTokens.iconButtonBackgroundColorActive}: ${_sdds_platform_ai.surfaceAccentActive};
 
                 ${_styledcomponents.numberInputTokens.actionButtonDisabledOpacity}: 0.4;
 
@@ -101,25 +102,25 @@ const config = {
                 ${_styledcomponents.numberInputTokens.loaderSpinnerColorSolid}: inherit;
             `,
             clear: (0, _styledcomponents.css)`
-                ${_styledcomponents.numberInputTokens.caretColor}: var(--text-accent);
-                ${_styledcomponents.numberInputTokens.caretColorSolid}: var(--text-accent);
-                ${_styledcomponents.numberInputTokens.errorColor}: var(--text-negative);
-                ${_styledcomponents.numberInputTokens.backgroundErrorColor}: var(--surface-transparent-negative);
-
-                ${_styledcomponents.numberInputTokens.color}: var(--text-primary);
-                ${_styledcomponents.numberInputTokens.colorSolid}: var(--text-primary);
-                ${_styledcomponents.numberInputTokens.iconButtonColorSolidHover}: var(--text-primary-hover);
-                ${_styledcomponents.numberInputTokens.additionalTextColor}: var(--text-tertiary);
-                ${_styledcomponents.numberInputTokens.additionalTextColorSolid}: var(--text-tertiary);
-                ${_styledcomponents.numberInputTokens.backgroundColorFocus}: var(--surface-transparent-secondary);
-                ${_styledcomponents.numberInputTokens.backgroundColorSolidFocus}: var(--surface-transparent-secondary);
+                ${_styledcomponents.numberInputTokens.caretColor}: ${_sdds_platform_ai.textAccent};
+                ${_styledcomponents.numberInputTokens.caretColorSolid}: ${_sdds_platform_ai.textAccent};
+                ${_styledcomponents.numberInputTokens.errorColor}: ${_sdds_platform_ai.textNegative};
+                ${_styledcomponents.numberInputTokens.backgroundErrorColor}: ${_sdds_platform_ai.surfaceTransparentNegative};
+
+                ${_styledcomponents.numberInputTokens.color}: ${_sdds_platform_ai.textPrimary};
+                ${_styledcomponents.numberInputTokens.colorSolid}: ${_sdds_platform_ai.textPrimary};
+                ${_styledcomponents.numberInputTokens.iconButtonColorSolidHover}: ${_sdds_platform_ai.textPrimaryHover};
+                ${_styledcomponents.numberInputTokens.additionalTextColor}: ${_sdds_platform_ai.textTertiary};
+                ${_styledcomponents.numberInputTokens.additionalTextColorSolid}: ${_sdds_platform_ai.textTertiary};
+                ${_styledcomponents.numberInputTokens.backgroundColorFocus}: ${_sdds_platform_ai.surfaceTransparentSecondary};
+                ${_styledcomponents.numberInputTokens.backgroundColorSolidFocus}: ${_sdds_platform_ai.surfaceTransparentSecondary};
                 ${_styledcomponents.numberInputTokens.backgroundColorSolid}: transparent;
 
-                ${_styledcomponents.numberInputTokens.iconButtonColor}: var(--text-primary);
+                ${_styledcomponents.numberInputTokens.iconButtonColor}: ${_sdds_platform_ai.textPrimary};
                 ${_styledcomponents.numberInputTokens.iconButtonBackgroundColor}: transparent;
-                ${_styledcomponents.numberInputTokens.iconButtonColorHover}: var(--text-primary-hover);
+                ${_styledcomponents.numberInputTokens.iconButtonColorHover}: ${_sdds_platform_ai.textPrimaryHover};
                 ${_styledcomponents.numberInputTokens.iconButtonBackgroundColorHover}: transparent;
-                ${_styledcomponents.numberInputTokens.iconButtonColorActive}: var(--text-primary-active);
+                ${_styledcomponents.numberInputTokens.iconButtonColorActive}: ${_sdds_platform_ai.textPrimaryActive};
                 ${_styledcomponents.numberInputTokens.iconButtonBackgroundColorActive}: transparent;
 
                 ${_styledcomponents.numberInputTokens.actionButtonDisabledOpacity}: 0.4;
@@ -134,12 +135,12 @@ const config = {
                 ${_styledcomponents.numberInputTokens.iconButtonHeight}: 3.5rem;
                 ${_styledcomponents.numberInputTokens.iconButtonWidth}: 3.5rem;
                 ${_styledcomponents.numberInputTokens.iconButtonPadding}: 1.5rem;
-                ${_styledcomponents.numberInputTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family);
-                ${_styledcomponents.numberInputTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size);
-                ${_styledcomponents.numberInputTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style);
-                ${_styledcomponents.numberInputTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight);
-                ${_styledcomponents.numberInputTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${_styledcomponents.numberInputTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height);
+                ${_styledcomponents.numberInputTokens.iconButtonFontFamily}: ${_sdds_platform_ai.bodyL.fontFamily};
+                ${_styledcomponents.numberInputTokens.iconButtonFontSize}: ${_sdds_platform_ai.bodyL.fontSize};
+                ${_styledcomponents.numberInputTokens.iconButtonFontStyle}: ${_sdds_platform_ai.bodyL.fontStyle};
+                ${_styledcomponents.numberInputTokens.iconButtonFontWeight}: ${_sdds_platform_ai.bodyLBold.fontWeight};
+                ${_styledcomponents.numberInputTokens.iconButtonLetterSpacing}: ${_sdds_platform_ai.bodyL.letterSpacing};
+                ${_styledcomponents.numberInputTokens.iconButtonLineHeight}: ${_sdds_platform_ai.bodyL.lineHeight};
 
                 ${_styledcomponents.numberInputTokens.iconButtonRadius}: 0.875rem;
                 ${_styledcomponents.numberInputTokens.iconButtonSegmentationRadius}: 0.375rem;
@@ -149,12 +150,12 @@ const config = {
                 ${_styledcomponents.numberInputTokens.textWrapperHeight}: 3.5rem;
                 ${_styledcomponents.numberInputTokens.textWrapperPadding}: 1.063rem 1.125rem;
 
-                ${_styledcomponents.numberInputTokens.fontFamily}: var(--plasma-typo-body-l-font-family);
-                ${_styledcomponents.numberInputTokens.fontSize}: var(--plasma-typo-body-l-font-size);
-                ${_styledcomponents.numberInputTokens.fontStyle}: var(--plasma-typo-body-l-font-style);
-                ${_styledcomponents.numberInputTokens.fontWeight}: var(--plasma-typo-body-l-font-weight);
-                ${_styledcomponents.numberInputTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing);
-                ${_styledcomponents.numberInputTokens.lineHeight}: var(--plasma-typo-body-l-line-height);
+                ${_styledcomponents.numberInputTokens.fontFamily}: ${_sdds_platform_ai.bodyL.fontFamily};
+                ${_styledcomponents.numberInputTokens.fontSize}: ${_sdds_platform_ai.bodyL.fontSize};
+                ${_styledcomponents.numberInputTokens.fontStyle}: ${_sdds_platform_ai.bodyL.fontStyle};
+                ${_styledcomponents.numberInputTokens.fontWeight}: ${_sdds_platform_ai.bodyL.fontWeight};
+                ${_styledcomponents.numberInputTokens.letterSpacing}: ${_sdds_platform_ai.bodyL.letterSpacing};
+                ${_styledcomponents.numberInputTokens.lineHeight}: ${_sdds_platform_ai.bodyL.lineHeight};
 
                 ${_styledcomponents.numberInputTokens.textBeforeMarginRight}: 0.25rem;
                 ${_styledcomponents.numberInputTokens.textAfterMarginLeft}: 0.25rem;
@@ -166,12 +167,12 @@ const config = {
                 ${_styledcomponents.numberInputTokens.iconButtonHeight}: 3rem;
                 ${_styledcomponents.numberInputTokens.iconButtonWidth}: 3rem;
                 ${_styledcomponents.numberInputTokens.iconButtonPadding}: 1.25rem;
-                ${_styledcomponents.numberInputTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_styledcomponents.numberInputTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size);
-                ${_styledcomponents.numberInputTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_styledcomponents.numberInputTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
-                ${_styledcomponents.numberInputTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_styledcomponents.numberInputTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_styledcomponents.numberInputTokens.iconButtonFontFamily}: ${_sdds_platform_ai.bodyM.fontFamily};
+                ${_styledcomponents.numberInputTokens.iconButtonFontSize}: ${_sdds_platform_ai.bodyM.fontSize};
+                ${_styledcomponents.numberInputTokens.iconButtonFontStyle}: ${_sdds_platform_ai.bodyM.fontStyle};
+                ${_styledcomponents.numberInputTokens.iconButtonFontWeight}: ${_sdds_platform_ai.bodyMBold.fontWeight};
+                ${_styledcomponents.numberInputTokens.iconButtonLetterSpacing}: ${_sdds_platform_ai.bodyM.letterSpacing};
+                ${_styledcomponents.numberInputTokens.iconButtonLineHeight}: ${_sdds_platform_ai.bodyM.lineHeight};
 
                 ${_styledcomponents.numberInputTokens.iconButtonRadius}: 0.75rem;
                 ${_styledcomponents.numberInputTokens.iconButtonSegmentationRadius}: 0.25rem;
@@ -181,12 +182,12 @@ const config = {
                 ${_styledcomponents.numberInputTokens.textWrapperHeight}: 3rem;
                 ${_styledcomponents.numberInputTokens.textWrapperPadding}: 0.875rem 1rem;
 
-                ${_styledcomponents.numberInputTokens.fontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_styledcomponents.numberInputTokens.fontSize}: var(--plasma-typo-body-m-font-size);
-                ${_styledcomponents.numberInputTokens.fontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_styledcomponents.numberInputTokens.fontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${_styledcomponents.numberInputTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_styledcomponents.numberInputTokens.lineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_styledcomponents.numberInputTokens.fontFamily}: ${_sdds_platform_ai.bodyM.fontFamily};
+                ${_styledcomponents.numberInputTokens.fontSize}: ${_sdds_platform_ai.bodyM.fontSize};
+                ${_styledcomponents.numberInputTokens.fontStyle}: ${_sdds_platform_ai.bodyM.fontStyle};
+                ${_styledcomponents.numberInputTokens.fontWeight}: ${_sdds_platform_ai.bodyM.fontWeight};
+                ${_styledcomponents.numberInputTokens.letterSpacing}: ${_sdds_platform_ai.bodyM.letterSpacing};
+                ${_styledcomponents.numberInputTokens.lineHeight}: ${_sdds_platform_ai.bodyM.lineHeight};
 
                 ${_styledcomponents.numberInputTokens.textBeforeMarginRight}: 0.25rem;
                 ${_styledcomponents.numberInputTokens.textAfterMarginLeft}: 0.25rem;
@@ -198,12 +199,12 @@ const config = {
                 ${_styledcomponents.numberInputTokens.iconButtonHeight}: 2.5rem;
                 ${_styledcomponents.numberInputTokens.iconButtonWidth}: 2.5rem;
                 ${_styledcomponents.numberInputTokens.iconButtonPadding}: 1rem;
-                ${_styledcomponents.numberInputTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_styledcomponents.numberInputTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size);
-                ${_styledcomponents.numberInputTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_styledcomponents.numberInputTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${_styledcomponents.numberInputTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_styledcomponents.numberInputTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_styledcomponents.numberInputTokens.iconButtonFontFamily}: ${_sdds_platform_ai.bodyS.fontFamily};
+                ${_styledcomponents.numberInputTokens.iconButtonFontSize}: ${_sdds_platform_ai.bodyS.fontSize};
+                ${_styledcomponents.numberInputTokens.iconButtonFontStyle}: ${_sdds_platform_ai.bodyS.fontStyle};
+                ${_styledcomponents.numberInputTokens.iconButtonFontWeight}: ${_sdds_platform_ai.bodySBold.fontWeight};
+                ${_styledcomponents.numberInputTokens.iconButtonLetterSpacing}: ${_sdds_platform_ai.bodyS.letterSpacing};
+                ${_styledcomponents.numberInputTokens.iconButtonLineHeight}: ${_sdds_platform_ai.bodyS.lineHeight};
 
                 ${_styledcomponents.numberInputTokens.iconButtonRadius}: 0.625rem;
                 ${_styledcomponents.numberInputTokens.iconButtonSegmentationRadius}: 0.25rem;
@@ -213,12 +214,12 @@ const config = {
                 ${_styledcomponents.numberInputTokens.textWrapperHeight}: 2.5rem;
                 ${_styledcomponents.numberInputTokens.textWrapperPadding}: 0.688rem 0.875rem;
 
-                ${_styledcomponents.numberInputTokens.fontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_styledcomponents.numberInputTokens.fontSize}: var(--plasma-typo-body-s-font-size);
-                ${_styledcomponents.numberInputTokens.fontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_styledcomponents.numberInputTokens.fontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_styledcomponents.numberInputTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_styledcomponents.numberInputTokens.lineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_styledcomponents.numberInputTokens.fontFamily}: ${_sdds_platform_ai.bodyS.fontFamily};
+                ${_styledcomponents.numberInputTokens.fontSize}: ${_sdds_platform_ai.bodyS.fontSize};
+                ${_styledcomponents.numberInputTokens.fontStyle}: ${_sdds_platform_ai.bodyS.fontStyle};
+                ${_styledcomponents.numberInputTokens.fontWeight}: ${_sdds_platform_ai.bodyS.fontWeight};
+                ${_styledcomponents.numberInputTokens.letterSpacing}: ${_sdds_platform_ai.bodyS.letterSpacing};
+                ${_styledcomponents.numberInputTokens.lineHeight}: ${_sdds_platform_ai.bodyS.lineHeight};
 
                 ${_styledcomponents.numberInputTokens.textBeforeMarginRight}: 0.25rem;
                 ${_styledcomponents.numberInputTokens.textAfterMarginLeft}: 0.25rem;
@@ -230,12 +231,12 @@ const config = {
                 ${_styledcomponents.numberInputTokens.iconButtonHeight}: 2rem;
                 ${_styledcomponents.numberInputTokens.iconButtonWidth}: 2rem;
                 ${_styledcomponents.numberInputTokens.iconButtonPadding}: 0.75rem;
-                ${_styledcomponents.numberInputTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_styledcomponents.numberInputTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_styledcomponents.numberInputTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_styledcomponents.numberInputTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight);
-                ${_styledcomponents.numberInputTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_styledcomponents.numberInputTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_styledcomponents.numberInputTokens.iconButtonFontFamily}: ${_sdds_platform_ai.bodyXS.fontFamily};
+                ${_styledcomponents.numberInputTokens.iconButtonFontSize}: ${_sdds_platform_ai.bodyXS.fontSize};
+                ${_styledcomponents.numberInputTokens.iconButtonFontStyle}: ${_sdds_platform_ai.bodyXS.fontStyle};
+                ${_styledcomponents.numberInputTokens.iconButtonFontWeight}: ${_sdds_platform_ai.bodyXSBold.fontWeight};
+                ${_styledcomponents.numberInputTokens.iconButtonLetterSpacing}: ${_sdds_platform_ai.bodyXS.letterSpacing};
+                ${_styledcomponents.numberInputTokens.iconButtonLineHeight}: ${_sdds_platform_ai.bodyXS.lineHeight};
 
                 ${_styledcomponents.numberInputTokens.iconButtonRadius}: 0.5rem;
                 ${_styledcomponents.numberInputTokens.iconButtonSegmentationRadius}: 0.125rem;
@@ -245,12 +246,12 @@ const config = {
                 ${_styledcomponents.numberInputTokens.textWrapperHeight}: 2rem;
                 ${_styledcomponents.numberInputTokens.textWrapperPadding}: 0.563rem 0.625rem;
 
-                ${_styledcomponents.numberInputTokens.fontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_styledcomponents.numberInputTokens.fontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_styledcomponents.numberInputTokens.fontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_styledcomponents.numberInputTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_styledcomponents.numberInputTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_styledcomponents.numberInputTokens.lineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_styledcomponents.numberInputTokens.fontFamily}: ${_sdds_platform_ai.bodyXS.fontFamily};
+                ${_styledcomponents.numberInputTokens.fontSize}: ${_sdds_platform_ai.bodyXS.fontSize};
+                ${_styledcomponents.numberInputTokens.fontStyle}: ${_sdds_platform_ai.bodyXS.fontStyle};
+                ${_styledcomponents.numberInputTokens.fontWeight}: ${_sdds_platform_ai.bodyXS.fontWeight};
+                ${_styledcomponents.numberInputTokens.letterSpacing}: ${_sdds_platform_ai.bodyXS.letterSpacing};
+                ${_styledcomponents.numberInputTokens.lineHeight}: ${_sdds_platform_ai.bodyXS.lineHeight};
 
                 ${_styledcomponents.numberInputTokens.textBeforeMarginRight}: 0.25rem;
                 ${_styledcomponents.numberInputTokens.textAfterMarginLeft}: 0.25rem;
@@ -266,8 +267,8 @@ const config = {
         },
         inputBackgroundType: {
             fill: (0, _styledcomponents.css)`
-                ${_styledcomponents.numberInputTokens.backgroundColor}: var(--surface-transparent-primary);
-                ${_styledcomponents.numberInputTokens.backgroundColorHover}: var(--surface-transparent-primary);
+                ${_styledcomponents.numberInputTokens.backgroundColor}: ${_sdds_platform_ai.surfaceTransparentPrimary};
+                ${_styledcomponents.numberInputTokens.backgroundColorHover}: ${_sdds_platform_ai.surfaceTransparentPrimary};
             `,
             clear: (0, _styledcomponents.css)`
                 ${_styledcomponents.numberInputTokens.backgroundColor}: transparent;

package/dist/styled-components/cjs/components/Pagination/Pagination.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: 'clear',
@@ -18,79 +19,79 @@ const config = {
     variations: {
         view: {
             clear: (0, _styledcomponents.css)`
-                ${_styledcomponents.paginationTokens.buttonColor}: var(--text-primary);
-                ${_styledcomponents.paginationTokens.buttonColorHover}: var(--text-primary-hover);
-                ${_styledcomponents.paginationTokens.buttonColorActive}: var(--text-primary-active);
-                ${_styledcomponents.paginationTokens.buttonBackgroundColor}: var(--surface-clear);
-                ${_styledcomponents.paginationTokens.buttonBackgroundColorHover}: var(--surface-clear);
-                ${_styledcomponents.paginationTokens.buttonBackgroundColorActive}: var(--surface-clear);
-                ${_styledcomponents.paginationTokens.buttonHoverColor}: var(--text-primary);
-                ${_styledcomponents.paginationTokens.buttonActiveColor}: var(--text-primary);
-                ${_styledcomponents.paginationTokens.buttonArrowColor}: var(--text-secondary);
-                ${_styledcomponents.paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover);
-                ${_styledcomponents.paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover);
+                ${_styledcomponents.paginationTokens.buttonColor}: ${_sdds_platform_ai.textPrimary};
+                ${_styledcomponents.paginationTokens.buttonColorHover}: ${_sdds_platform_ai.textPrimaryHover};
+                ${_styledcomponents.paginationTokens.buttonColorActive}: ${_sdds_platform_ai.textPrimaryActive};
+                ${_styledcomponents.paginationTokens.buttonBackgroundColor}: ${_sdds_platform_ai.surfaceClear};
+                ${_styledcomponents.paginationTokens.buttonBackgroundColorHover}: ${_sdds_platform_ai.surfaceClear};
+                ${_styledcomponents.paginationTokens.buttonBackgroundColorActive}: ${_sdds_platform_ai.surfaceClear};
+                ${_styledcomponents.paginationTokens.buttonHoverColor}: ${_sdds_platform_ai.textPrimary};
+                ${_styledcomponents.paginationTokens.buttonActiveColor}: ${_sdds_platform_ai.textPrimary};
+                ${_styledcomponents.paginationTokens.buttonArrowColor}: ${_sdds_platform_ai.textSecondary};
+                ${_styledcomponents.paginationTokens.buttonArrowColorHover}: ${_sdds_platform_ai.textSecondaryHover};
+                ${_styledcomponents.paginationTokens.buttonArrowColorActive}: ${_sdds_platform_ai.textSecondaryHover};
 
                 ${_styledcomponents.paginationTokens.buttonDisabledOpacity}: 0.4;
 
-                ${_styledcomponents.paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary);
-                ${_styledcomponents.paginationTokens.selectBackgroundColor}: var(--surface-solid-card);
+                ${_styledcomponents.paginationTokens.inputBackgroundColor}: ${_sdds_platform_ai.surfaceTransparentSecondary};
+                ${_styledcomponents.paginationTokens.selectBackgroundColor}: ${_sdds_platform_ai.surfaceSolidCard};
                 ${_styledcomponents.paginationTokens.inputBorderColor}: transparent;
 
-                ${_styledcomponents.paginationTokens.paginationColor}: var(--text-primary);
-                ${_styledcomponents.paginationTokens.paginationHelperTextColor}: var(--text-secondary);
-                ${_styledcomponents.paginationTokens.buttonFocusColor}: var(--surface-accent);
+                ${_styledcomponents.paginationTokens.paginationColor}: ${_sdds_platform_ai.textPrimary};
+                ${_styledcomponents.paginationTokens.paginationHelperTextColor}: ${_sdds_platform_ai.textSecondary};
+                ${_styledcomponents.paginationTokens.buttonFocusColor}: ${_sdds_platform_ai.surfaceAccent};
             `
         },
         viewCurrentPage: {
             default: (0, _styledcomponents.css)`
-                ${_styledcomponents.paginationTokens.paginationCurrentButtonColor}: var(--inverse-text-primary);
-                ${_styledcomponents.paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-solid-default);
-                ${_styledcomponents.paginationTokens.paginationCurrentButtonHoverColor}: var(--inverse-text-primary);
+                ${_styledcomponents.paginationTokens.paginationCurrentButtonColor}: ${_sdds_platform_ai.inverseTextPrimary};
+                ${_styledcomponents.paginationTokens.paginationCurrentButtonBackgroundColor}: ${_sdds_platform_ai.surfaceSolidDefault};
+                ${_styledcomponents.paginationTokens.paginationCurrentButtonHoverColor}: ${_sdds_platform_ai.inverseTextPrimary};
                 ${_styledcomponents.paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(
                     in srgb,
-                    var(--inverse-text-primary),
-                    var(--surface-solid-default) 85%
+                    ${_sdds_platform_ai.inverseTextPrimary},
+                    ${_sdds_platform_ai.surfaceSolidDefault} 85%
                 );
-                ${_styledcomponents.paginationTokens.paginationCurrentButtonActiveColor}: var(--inverse-text-primary);
+                ${_styledcomponents.paginationTokens.paginationCurrentButtonActiveColor}: ${_sdds_platform_ai.inverseTextPrimary};
                 ${_styledcomponents.paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(
                     in srgb,
-                    var(--inverse-text-primary),
-                    var(--surface-solid-default) 80%
+                    ${_sdds_platform_ai.inverseTextPrimary},
+                    ${_sdds_platform_ai.surfaceSolidDefault} 80%
                 );
             `,
             secondary: (0, _styledcomponents.css)`
-                ${_styledcomponents.paginationTokens.paginationCurrentButtonColor}: var(--text-primary);
-                ${_styledcomponents.paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-transparent-secondary);
-                ${_styledcomponents.paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary);
+                ${_styledcomponents.paginationTokens.paginationCurrentButtonColor}: ${_sdds_platform_ai.textPrimary};
+                ${_styledcomponents.paginationTokens.paginationCurrentButtonBackgroundColor}: ${_sdds_platform_ai.surfaceTransparentSecondary};
+                ${_styledcomponents.paginationTokens.paginationCurrentButtonHoverColor}: ${_sdds_platform_ai.textPrimary};
                 ${_styledcomponents.paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(
                     in srgb,
-                    var(--inverse-text-primary),
-                    var(--surface-transparent-secondary) 85%
+                    ${_sdds_platform_ai.inverseTextPrimary},
+                    ${_sdds_platform_ai.surfaceTransparentSecondary} 85%
                 );
-                ${_styledcomponents.paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary);
+                ${_styledcomponents.paginationTokens.paginationCurrentButtonActiveColor}: ${_sdds_platform_ai.textPrimary};
                 ${_styledcomponents.paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(
                     in srgb,
-                    var(--inverse-text-primary),
-                    var(--surface-transparent-secondary) 80%
+                    ${_sdds_platform_ai.inverseTextPrimary},
+                    ${_sdds_platform_ai.surfaceTransparentSecondary} 80%
                 );
             `,
             clear: (0, _styledcomponents.css)`
-                ${_styledcomponents.paginationTokens.paginationCurrentButtonColor}: var(--text-primary);
-                ${_styledcomponents.paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-clear);
-                ${_styledcomponents.paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary);
-                ${_styledcomponents.paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 95%);
-                ${_styledcomponents.paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary);
-                ${_styledcomponents.paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 90%);
+                ${_styledcomponents.paginationTokens.paginationCurrentButtonColor}: ${_sdds_platform_ai.textPrimary};
+                ${_styledcomponents.paginationTokens.paginationCurrentButtonBackgroundColor}: ${_sdds_platform_ai.surfaceClear};
+                ${_styledcomponents.paginationTokens.paginationCurrentButtonHoverColor}: ${_sdds_platform_ai.textPrimary};
+                ${_styledcomponents.paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, ${_sdds_platform_ai.textPrimary}, ${_sdds_platform_ai.surfaceClear} 95%);
+                ${_styledcomponents.paginationTokens.paginationCurrentButtonActiveColor}: ${_sdds_platform_ai.textPrimary};
+                ${_styledcomponents.paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, ${_sdds_platform_ai.textPrimary}, ${_sdds_platform_ai.surfaceClear} 90%);
             `
         },
         size: {
             m: (0, _styledcomponents.css)`
-                ${_styledcomponents.paginationTokens.paginationFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_styledcomponents.paginationTokens.paginationFontSize}: var(--plasma-typo-body-m-font-size);
-                ${_styledcomponents.paginationTokens.paginationFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_styledcomponents.paginationTokens.paginationFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
-                ${_styledcomponents.paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_styledcomponents.paginationTokens.paginationLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_styledcomponents.paginationTokens.paginationFontFamily}: ${_sdds_platform_ai.bodyM.fontFamily};
+                ${_styledcomponents.paginationTokens.paginationFontSize}: ${_sdds_platform_ai.bodyM.fontSize};
+                ${_styledcomponents.paginationTokens.paginationFontStyle}: ${_sdds_platform_ai.bodyM.fontStyle};
+                ${_styledcomponents.paginationTokens.paginationFontWeight}: ${_sdds_platform_ai.bodyMBold.fontWeight};
+                ${_styledcomponents.paginationTokens.paginationLetterSpacing}: ${_sdds_platform_ai.bodyM.letterSpacing};
+                ${_styledcomponents.paginationTokens.paginationLineHeight}: ${_sdds_platform_ai.bodyM.lineHeight};
 
                 ${_styledcomponents.paginationTokens.buttonHeight}: 3rem;
                 ${_styledcomponents.paginationTokens.buttonWidth}: 3rem;

package/dist/styled-components/cjs/components/Popover/Popover.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'
@@ -16,14 +17,14 @@ const config = {
     variations: {
         view: {
             default: (0, _styledcomponents.css)`
-                ${_styledcomponents.popoverTokens.boxShadow}: var(--shadow-down-hard-m);
+                ${_styledcomponents.popoverTokens.boxShadow}: ${_sdds_platform_ai.shadowDownHardM};
 
                 ${_styledcomponents.popoverTokens.arrowMaskWidth}: 1rem;
                 ${_styledcomponents.popoverTokens.arrowMaskHeight}: 1rem;
                 ${_styledcomponents.popoverTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+");
                 ${_styledcomponents.popoverTokens.arrowHeight}: 0.375rem;
                 ${_styledcomponents.popoverTokens.arrowEdgeMargin}: 0.5625rem;
-                ${_styledcomponents.popoverTokens.arrowBackground}: var(--surface-solid-tertiary);
+                ${_styledcomponents.popoverTokens.arrowBackground}: ${_sdds_platform_ai.surfaceSolidTertiary};
             `
         }
     }