@salutejs/sdds-cs 0.361.0-next-sbcom.0 → 0.362.0-dev.0

package/dist/emotion/es/components/IconButton/IconButton.config.js

@@ -1,3 +1,4 @@
+import { bodyM, bodyMBold, bodyS, bodySBold, onDarkTextPrimary, surfaceAccent, surfaceAccentActive, surfaceAccentHover, surfaceClear, surfaceSolidSecondary, surfaceSolidSecondaryActive, surfaceSolidSecondaryHover, surfaceTransparentAccent, surfaceTransparentAccentActive, textAccent, textAccentActive, textAccentMinor } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { css, iconButtonTokens } from '@salutejs/plasma-new-hope/emotion';
 export const config = {
     defaults: {
@@ -8,29 +9,29 @@ export const config = {
     variations: {
         view: {
             accent: css`
-                ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary);
-                ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-accent);
+                ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary};
+                ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceAccent};
                 ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor});
-                ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover);
-                ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active);
+                ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover};
+                ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive};
             `,
             secondary: css`
-                ${iconButtonTokens.iconButtonColor}: var(--text-accent);
-                ${iconButtonTokens.iconButtonColorHover}: var(--text-accent-minor);
+                ${iconButtonTokens.iconButtonColor}: ${textAccent};
+                ${iconButtonTokens.iconButtonColorHover}: ${textAccentMinor};
 
-                ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-solid-secondary);
-                ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-solid-secondary-hover);
-                ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-solid-secondary-active);
+                ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceSolidSecondary};
+                ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceSolidSecondaryHover};
+                ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceSolidSecondaryActive};
                 ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor});
 
-                ${iconButtonTokens.iconButtonColorActive}: var(--text-accent-active);
+                ${iconButtonTokens.iconButtonColorActive}: ${textAccentActive};
             `,
             clear: css`
-                ${iconButtonTokens.iconButtonColor}: var(--text-accent);
-                ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-clear);
-                ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(--surface-transparent-accent);
-                ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-accent);
-                ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-accent-active);
+                ${iconButtonTokens.iconButtonColor}: ${textAccent};
+                ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceClear};
+                ${iconButtonTokens.iconButtonLoadingBackgroundColor}: ${surfaceTransparentAccent};
+                ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentAccent};
+                ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentAccentActive};
             `
         },
         size: {
@@ -39,12 +40,12 @@ export const config = {
                 ${iconButtonTokens.iconButtonWidth}: 3rem;
                 ${iconButtonTokens.iconButtonPadding}: 0.75rem;
                 ${iconButtonTokens.iconButtonRadius}: 0.75rem;
-                ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size);
-                ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
-                ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${iconButtonTokens.iconButtonFontFamily}: ${bodyM.fontFamily};
+                ${iconButtonTokens.iconButtonFontSize}: ${bodyM.fontSize};
+                ${iconButtonTokens.iconButtonFontStyle}: ${bodyM.fontStyle};
+                ${iconButtonTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight};
+                ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing};
+                ${iconButtonTokens.iconButtonLineHeight}: ${bodyM.lineHeight};
 
                 ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem;
                 ${iconButtonTokens.iconButtonSpinnerColor}: inherit;
@@ -54,12 +55,12 @@ export const config = {
                 ${iconButtonTokens.iconButtonWidth}: 2.5rem;
                 ${iconButtonTokens.iconButtonPadding}: 1rem;
                 ${iconButtonTokens.iconButtonRadius}: 0.75rem;
-                ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size);
-                ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${iconButtonTokens.iconButtonFontFamily}: ${bodyS.fontFamily};
+                ${iconButtonTokens.iconButtonFontSize}: ${bodyS.fontSize};
+                ${iconButtonTokens.iconButtonFontStyle}: ${bodyS.fontStyle};
+                ${iconButtonTokens.iconButtonFontWeight}: ${bodySBold.fontWeight};
+                ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing};
+                ${iconButtonTokens.iconButtonLineHeight}: ${bodyS.lineHeight};
 
                 ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem;
                 ${iconButtonTokens.iconButtonSpinnerColor}: inherit;
@@ -72,7 +73,7 @@ export const config = {
         },
         focused: {
             true: css`
-                ${iconButtonTokens.iconButtonFocusColor}: var(--surface-accent);
+                ${iconButtonTokens.iconButtonFocusColor}: ${surfaceAccent};
             `
         }
     }

package/dist/emotion/es/components/IconButton/IconButton.js

@@ -1,7 +1,30 @@
-import { iconButtonConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/emotion';
+import React, { useCallback, forwardRef } from 'react';
+import { iconButtonConfig, component, mergeConfig, buttonClasses, iconButtonTokens } from '@salutejs/plasma-new-hope/emotion';
+import styled from '@emotion/styled';
 import { config } from './IconButton.config';
 const mergedConfig = mergeConfig(iconButtonConfig, config);
 const IconButtonComponent = component(mergedConfig);
+const { iconButtonBackgroundColorActive, iconButtonBackgroundColor, iconButtonColor, iconButtonColorActive } = iconButtonTokens;
+// INFO: Данное поведение запрошено продуктом
+const StyledIconButton = /*#__PURE__*/ styled(IconButtonComponent, {
+    target: "ez9pxld0",
+    label: "StyledIconButton"
+})("&&.", String(buttonClasses.buttonLoading), "{color:var(", iconButtonColorActive, ",var(", iconButtonColor, "));background:var(", iconButtonBackgroundColorActive, ",var(", iconButtonBackgroundColor, "));pointer-events:none;}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvSWNvbkJ1dHRvbi9JY29uQnV0dG9uLnRzeCIsInNvdXJjZXMiOlsic3JjL2NvbXBvbmVudHMvSWNvbkJ1dHRvbi9JY29uQnV0dG9uLnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHsgQ29tcG9uZW50UHJvcHMsIHVzZUNhbGxiYWNrLCBNb3VzZUV2ZW50LCBmb3J3YXJkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHtcbiAgICBpY29uQnV0dG9uQ29uZmlnLFxuICAgIGNvbXBvbmVudCxcbiAgICBtZXJnZUNvbmZpZyxcbiAgICBidXR0b25DbGFzc2VzLFxuICAgIGljb25CdXR0b25Ub2tlbnMsXG59IGZyb20gJ0BzYWx1dGVqcy9wbGFzbWEtbmV3LWhvcGUvZW1vdGlvbic7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCB7IGNvbmZpZyB9IGZyb20gJy4vSWNvbkJ1dHRvbi5jb25maWcnO1xuXG5jb25zdCBtZXJnZWRDb25maWcgPSBtZXJnZUNvbmZpZyhpY29uQnV0dG9uQ29uZmlnLCBjb25maWcpO1xuY29uc3QgSWNvbkJ1dHRvbkNvbXBvbmVudCA9IGNvbXBvbmVudChtZXJnZWRDb25maWcpO1xuXG50eXBlIEljb25CdXR0b25Qcm9wcyA9IENvbXBvbmVudFByb3BzPHR5cGVvZiBJY29uQnV0dG9uQ29tcG9uZW50PjtcblxuY29uc3Qge1xuICAgIGljb25CdXR0b25CYWNrZ3JvdW5kQ29sb3JBY3RpdmUsXG4gICAgaWNvbkJ1dHRvbkJhY2tncm91bmRDb2xvcixcbiAgICBpY29uQnV0dG9uQ29sb3IsXG4gICAgaWNvbkJ1dHRvbkNvbG9yQWN0aXZlLFxufSA9IGljb25CdXR0b25Ub2tlbnM7XG5cbi8vIElORk86INCU0LDQvdC90L7QtSDQv9C+0LLQtdC00LXQvdC40LUg0LfQsNC/0YDQvtGI0LXQvdC+INC/0YDQvtC00YPQutGC0L7QvFxuY29uc3QgU3R5bGVkSWNvbkJ1dHRvbiA9IHN0eWxlZChJY29uQnV0dG9uQ29tcG9uZW50KWBcbiAgICAmJi4ke1N0cmluZyhidXR0b25DbGFzc2VzLmJ1dHRvbkxvYWRpbmcpfSB7XG4gICAgICAgIGNvbG9yOiB2YXIoJHtpY29uQnV0dG9uQ29sb3JBY3RpdmV9LCB2YXIoJHtpY29uQnV0dG9uQ29sb3J9KSk7XG4gICAgICAgIGJhY2tncm91bmQ6IHZhcigke2ljb25CdXR0b25CYWNrZ3JvdW5kQ29sb3JBY3RpdmV9LCB2YXIoJHtpY29uQnV0dG9uQmFja2dyb3VuZENvbG9yfSkpO1xuXG4gICAgICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICAgIH1cbmA7XG5cbi8qKlxuICog0JrQvdC+0L/QutCwINGBINC40LrQvtC90LrQvtC5LlxuICovXG5leHBvcnQgY29uc3QgSWNvbkJ1dHRvbiA9IGZvcndhcmRSZWY8SFRNTEJ1dHRvbkVsZW1lbnQsIEljb25CdXR0b25Qcm9wcz4oKHsgb25DbGljaywgaXNMb2FkaW5nLCAuLi5wcm9wcyB9LCByZWYpID0+IHtcbiAgICBjb25zdCBoYW5kbGVDbGljayA9IHVzZUNhbGxiYWNrKFxuICAgICAgICAoZXZlbnQ6IE1vdXNlRXZlbnQ8SFRNTEJ1dHRvbkVsZW1lbnQ+KSA9PiB7XG4gICAgICAgICAgICBpZiAoIWlzTG9hZGluZykge1xuICAgICAgICAgICAgICAgIG9uQ2xpY2s/LihldmVudCk7XG4gICAgICAgICAgICB9XG4gICAgICAgIH0sXG4gICAgICAgIFtpc0xvYWRpbmcsIG9uQ2xpY2tdLFxuICAgICk7XG5cbiAgICByZXR1cm4gPFN0eWxlZEljb25CdXR0b24gcmVmPXtyZWZ9IG9uQ2xpY2s9e2hhbmRsZUNsaWNrfSBpc0xvYWRpbmc9e2lzTG9hZGluZ30gey4uLnByb3BzfSAvPjtcbn0pO1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlCeUIifQ== */");
 /**
  * Кнопка с иконкой.
- */ export const IconButton = IconButtonComponent;
+ */ export const IconButton = /*#__PURE__*/ forwardRef(({ onClick, isLoading, ...props }, ref)=>{
+    const handleClick = useCallback((event)=>{
+        if (!isLoading) {
+            onClick?.(event);
+        }
+    }, [
+        isLoading,
+        onClick
+    ]);
+    return /*#__PURE__*/ React.createElement(StyledIconButton, {
+        ref: ref,
+        onClick: handleClick,
+        isLoading: isLoading,
+        ...props
+    });
+});

package/dist/emotion/es/components/Indicator/Indicator.config.js

@@ -1,3 +1,4 @@
+import { onLightSurfaceSolidPrimary, surfaceAccent, surfaceNegative, surfacePositive, surfaceSolidDefault, surfaceWarning, textPrimary } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { css, indicatorTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
 export const config = {
     defaults: {
@@ -7,25 +8,25 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${tokens.color}: var(--surface-solid-default);
+                ${tokens.color}: ${surfaceSolidDefault};
             `,
             accent: css`
-                ${tokens.color}: var(--surface-accent);
+                ${tokens.color}: ${surfaceAccent};
             `,
             inactive: css`
-                ${tokens.color}: var(--on-light-surface-solid-primary);
+                ${tokens.color}: ${onLightSurfaceSolidPrimary};
             `,
             positive: css`
-                ${tokens.color}: var(--surface-positive);
+                ${tokens.color}: ${surfacePositive};
             `,
             negative: css`
-                ${tokens.color}: var(--surface-negative);
+                ${tokens.color}: ${surfaceNegative};
             `,
             warning: css`
-                ${tokens.color}: var(--surface-warning);
+                ${tokens.color}: ${surfaceWarning};
             `,
             black: css`
-                ${tokens.color}: var(--text-primary);
+                ${tokens.color}: ${textPrimary};
             `
         },
         size: {

package/dist/emotion/es/components/Link/Link.config.js

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

package/dist/emotion/es/components/Modal/Modal.config.js

@@ -1,3 +1,4 @@
+import { surfaceAccent, surfaceSolidCard, textAccent, textAccentActive, textAccentMinor } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { css, modalTokens } from '@salutejs/plasma-new-hope/emotion';
 export const config = {
     defaults: {
@@ -8,15 +9,15 @@ export const config = {
             default: css`
                 ${modalTokens.modalOverlayWithBlurColor}: rgba(35, 35, 35, 0.2);
                 ${modalTokens.modalOverlayColor}: var(--overlay-soft);
-                ${modalTokens.modalBodyBackground}: var(--surface-solid-card);
+                ${modalTokens.modalBodyBackground}: ${surfaceSolidCard};
                 ${modalTokens.modalBodyBorderRadius}: 1.25rem;
                 ${modalTokens.modalBodyPadding}: 2rem;
                 ${modalTokens.modalContentPadding}: 0.625rem;
                 ${modalTokens.modalCloseButtonRadius}: 0.375rem;
-                ${modalTokens.modalCloseButtonColor}: var(--text-accent);
-                ${modalTokens.modalCloseButtonHoverColor}: var(--text-accent-minor);
-                ${modalTokens.modalCloseButtonActiveColor}: var(--text-accent-active);
-                ${modalTokens.modalOutlineFocusColor}: var(--surface-accent);
+                ${modalTokens.modalCloseButtonColor}: ${textAccent};
+                ${modalTokens.modalCloseButtonHoverColor}: ${textAccentMinor};
+                ${modalTokens.modalCloseButtonActiveColor}: ${textAccentActive};
+                ${modalTokens.modalOutlineFocusColor}: ${surfaceAccent};
             `
         }
     }

package/dist/emotion/es/components/Notification/Notification.config.js

@@ -1,3 +1,4 @@
+import { bodyM, bodyMBold, bodyS, outlineSolidPrimary, surfaceSolidCard, textAccent, textAccentMinor, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { css, notificationTokens } from '@salutejs/plasma-new-hope/emotion';
 export const config = {
     defaults: {
@@ -7,13 +8,13 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${notificationTokens.titleColor}: var(--text-primary);
-                ${notificationTokens.contentLeftIconColor}: var(--text-primary);
-                ${notificationTokens.contentColor}: var(--text-secondary);
-                ${notificationTokens.background}: var(--surface-solid-card);
+                ${notificationTokens.titleColor}: ${textPrimary};
+                ${notificationTokens.contentLeftIconColor}: ${textPrimary};
+                ${notificationTokens.contentColor}: ${textSecondary};
+                ${notificationTokens.background}: ${surfaceSolidCard};
                 ${notificationTokens.borderRadius}: 0.75rem;
                 ${notificationTokens.padding}: 0.75rem;
-                ${notificationTokens.borderColor}: var(--outline-solid-primary);
+                ${notificationTokens.borderColor}: ${outlineSolidPrimary};
 
                 ${notificationTokens.contentPaddingTop}: 0.125rem;
                 ${notificationTokens.contentPaddingRight}: 0.25rem;
@@ -40,22 +41,22 @@ export const config = {
                 ${notificationTokens.contentLeftIconMargin}: 0.25rem;
                 ${notificationTokens.contentTopIconMargin}: 0.25rem;
 
-                ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size);
-                ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height);
-
-                ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${notificationTokens.titleFontSize}: var(--plasma-typo-body-m-font-size);
-                ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
-                ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-m-line-height);
-
-                ${notificationTokens.closeIconColor}: var(--text-accent);
-                ${notificationTokens.closeIconColorOnHover}:var(--text-accent-minor);
+                ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily};
+                ${notificationTokens.contentFontSize}: ${bodyS.fontSize};
+                ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle};
+                ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight};
+                ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight};
+
+                ${notificationTokens.titleFontFamily}: ${bodyM.fontFamily};
+                ${notificationTokens.titleFontSize}: ${bodyM.fontSize};
+                ${notificationTokens.titleFontStyle}: ${bodyM.fontStyle};
+                ${notificationTokens.titleFontWeight}: ${bodyMBold.fontWeight};
+                ${notificationTokens.titleFontLetterSpacing}: ${bodyM.letterSpacing};
+                ${notificationTokens.titleFontLineHeight}: ${bodyM.lineHeight};
+
+                ${notificationTokens.closeIconColor}: ${textAccent};
+                ${notificationTokens.closeIconColorOnHover}:${textAccentMinor};
 
                 ${notificationTokens.horizontalLayoutGap}: 0.5rem;
                 ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem;

package/dist/emotion/es/components/NumberInput/NumberInput.config.js

@@ -1,3 +1,4 @@
+import { bodyM, bodyS, bodySBold, outlineAccent, outlineSolidPrimary, surfaceSolidCard, textAccent, textAccentActive, textAccentMinor, textNegative, textPrimary, textTertiary } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { css, numberInputTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
 export const config = {
     defaults: {
@@ -10,19 +11,19 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${tokens.caretColor}: var(--text-accent);
-                ${tokens.errorColor}: var(--text-negative);
+                ${tokens.caretColor}: ${textAccent};
+                ${tokens.errorColor}: ${textNegative};
 
-                ${tokens.colorSolid}: var(--text-primary);
-                ${tokens.additionalTextColorSolid}: var(--text-tertiary);
-                ${tokens.backgroundColorSolid}: var(--surface-solid-card);
-                ${tokens.wrapperBorderColor}: var(--outline-solid-primary);
-                ${tokens.wrapperBorderColorFocus}: var(--outline-accent);
+                ${tokens.colorSolid}: ${textPrimary};
+                ${tokens.additionalTextColorSolid}: ${textTertiary};
+                ${tokens.backgroundColorSolid}: ${surfaceSolidCard};
+                ${tokens.wrapperBorderColor}: ${outlineSolidPrimary};
+                ${tokens.wrapperBorderColorFocus}: ${outlineAccent};
 
-                ${tokens.iconButtonColor}: var(--text-accent);
-                ${tokens.iconButtonBackgroundColor}: var(--surface-solid-card);
-                ${tokens.iconButtonColorSolidHover}: var(--text-accent-minor);
-                ${tokens.iconButtonColorSolidActive}: var(--text-accent-active);
+                ${tokens.iconButtonColor}: ${textAccent};
+                ${tokens.iconButtonBackgroundColor}: ${surfaceSolidCard};
+                ${tokens.iconButtonColorSolidHover}: ${textAccentMinor};
+                ${tokens.iconButtonColorSolidActive}: ${textAccentActive};
 
                 ${tokens.actionButtonDisabledOpacity}: 0;
                 ${tokens.actionButtonDisabledCursor}: default;
@@ -37,12 +38,12 @@ export const config = {
                 ${tokens.iconButtonHeight}: 2.5rem;
                 ${tokens.iconButtonWidth}: 2.5rem;
                 ${tokens.iconButtonPadding}: 0.5rem;
-                ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${tokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size);
-                ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tokens.iconButtonFontFamily}: ${bodyS.fontFamily};
+                ${tokens.iconButtonFontSize}: ${bodyS.fontSize};
+                ${tokens.iconButtonFontStyle}: ${bodyS.fontStyle};
+                ${tokens.iconButtonFontWeight}: ${bodySBold.fontWeight};
+                ${tokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.iconButtonLineHeight}: ${bodyS.lineHeight};
 
                 ${tokens.iconButtonRadius}: 0.75rem;
                 ${tokens.iconButtonSegmentationRadius}: 0.25rem;
@@ -53,19 +54,19 @@ export const config = {
                 ${tokens.textWrapperPadding}: 0.5rem 0.375rem;
                 ${tokens.rootBorderWidth}: 0.125rem;
 
-                ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family);
-                ${tokens.fontSize}: var(--plasma-typo-body-m-font-size);
-                ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style);
-                ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height);
+                ${tokens.fontFamily}: ${bodyM.fontFamily};
+                ${tokens.fontSize}: ${bodyM.fontSize};
+                ${tokens.fontStyle}: ${bodyM.fontStyle};
+                ${tokens.fontWeight}: ${bodyM.fontWeight};
+                ${tokens.letterSpacing}: ${bodyM.letterSpacing};
+                ${tokens.lineHeight}: ${bodyM.lineHeight};
 
-                ${tokens.additionalTextFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${tokens.additionalTextFontSize}: var(--plasma-typo-body-s-font-size);
-                ${tokens.additionalTextFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${tokens.additionalTextFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${tokens.additionalTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tokens.additionalTextLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tokens.additionalTextFontFamily}: ${bodyS.fontFamily};
+                ${tokens.additionalTextFontSize}: ${bodyS.fontSize};
+                ${tokens.additionalTextFontStyle}: ${bodyS.fontStyle};
+                ${tokens.additionalTextFontWeight}: ${bodyS.fontWeight};
+                ${tokens.additionalTextLetterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.additionalTextLineHeight}: ${bodyS.lineHeight};
 
                 ${tokens.textBeforeMarginRight}: 0.25rem;
                 ${tokens.textAfterMarginLeft}: 0.25rem;

package/dist/emotion/es/components/Pagination/Pagination.config.js

@@ -1,3 +1,4 @@
+import { bodyM, outlineSolidPrimary, surfaceAccent, surfaceClear, surfaceSolidCard, surfaceSolidPrimary, textAccent, textAccentActive, textAccentMinor, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { css, paginationTokens } from '@salutejs/plasma-new-hope/emotion';
 export const config = {
     defaults: {
@@ -8,47 +9,47 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${paginationTokens.buttonColor}: var(--text-accent);
-                ${paginationTokens.buttonColorHover}: var(--text-accent-minor);
-                ${paginationTokens.buttonColorActive}: var(--text-accent-active);
-                ${paginationTokens.buttonBackgroundColor}: var(--surface-clear);
-                ${paginationTokens.buttonBackgroundColorHover}: var(--surface-clear);
-                ${paginationTokens.buttonBackgroundColorActive}: var(--surface-clear);
-                ${paginationTokens.buttonHoverColor}: var(--text-accent-minor);
-                ${paginationTokens.buttonActiveColor}: var(--text-accent-active);
-                ${paginationTokens.buttonArrowColor}: var(--text-accent);
-                ${paginationTokens.buttonArrowColorHover}: var(--text-accent-minor);
-                ${paginationTokens.buttonArrowColorActive}: var(--text-accent-active);
+                ${paginationTokens.buttonColor}: ${textAccent};
+                ${paginationTokens.buttonColorHover}: ${textAccentMinor};
+                ${paginationTokens.buttonColorActive}: ${textAccentActive};
+                ${paginationTokens.buttonBackgroundColor}: ${surfaceClear};
+                ${paginationTokens.buttonBackgroundColorHover}: ${surfaceClear};
+                ${paginationTokens.buttonBackgroundColorActive}: ${surfaceClear};
+                ${paginationTokens.buttonHoverColor}: ${textAccentMinor};
+                ${paginationTokens.buttonActiveColor}: ${textAccentActive};
+                ${paginationTokens.buttonArrowColor}: ${textAccent};
+                ${paginationTokens.buttonArrowColorHover}: ${textAccentMinor};
+                ${paginationTokens.buttonArrowColorActive}: ${textAccentActive};
 
-                ${paginationTokens.inputBackgroundColor}: var(--surface-solid-card);
-                ${paginationTokens.selectBackgroundColor}: var(--surface-solid-card);
-                ${paginationTokens.inputBorderColor}: var(--outline-solid-primary);
+                ${paginationTokens.inputBackgroundColor}: ${surfaceSolidCard};
+                ${paginationTokens.selectBackgroundColor}: ${surfaceSolidCard};
+                ${paginationTokens.inputBorderColor}: ${outlineSolidPrimary};
 
-                ${paginationTokens.paginationColor}: var(--text-primary);
-                ${paginationTokens.paginationHelperTextColor}: var(--text-secondary);
-                ${paginationTokens.buttonFocusColor}: var(--surface-accent);
-                ${paginationTokens.paginationDisabledButtonColor}: var(--text-secondary);
-                ${paginationTokens.paginationDisabledButtonBackgroundColor}: var(--surface-clear);
+                ${paginationTokens.paginationColor}: ${textPrimary};
+                ${paginationTokens.paginationHelperTextColor}: ${textSecondary};
+                ${paginationTokens.buttonFocusColor}: ${surfaceAccent};
+                ${paginationTokens.paginationDisabledButtonColor}: ${textSecondary};
+                ${paginationTokens.paginationDisabledButtonBackgroundColor}: ${surfaceClear};
             `
         },
         viewCurrentPage: {
             default: css`
-                ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary);
-                ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-solid-primary);
-                ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary);
-                ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: var(--surface-solid-primary);
-                ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary);
-                ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: var(--surface-solid-primary);
+                ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary};
+                ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceSolidPrimary};
+                ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary};
+                ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: ${surfaceSolidPrimary};
+                ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary};
+                ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: ${surfaceSolidPrimary};
             `
         },
         size: {
             s: css`
-                ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-m-font-size);
-                ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${paginationTokens.paginationFontFamily}: ${bodyM.fontFamily};
+                ${paginationTokens.paginationFontSize}: ${bodyM.fontSize};
+                ${paginationTokens.paginationFontStyle}: ${bodyM.fontStyle};
+                ${paginationTokens.paginationFontWeight}: ${bodyM.fontWeight};
+                ${paginationTokens.paginationLetterSpacing}: ${bodyM.letterSpacing};
+                ${paginationTokens.paginationLineHeight}: ${bodyM.lineHeight};
 
                 ${paginationTokens.buttonHeight}: 2.5rem;
                 ${paginationTokens.buttonWidth}: 2.5rem;

package/dist/emotion/es/components/Popover/Popover.config.js

@@ -1,3 +1,4 @@
+import { shadowDownHardM, surfaceSolidCard } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { css, popoverTokens } from '@salutejs/plasma-new-hope/emotion';
 export const config = {
     defaults: {
@@ -6,14 +7,14 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${popoverTokens.boxShadow}: var(--shadow-down-hard-m);
+                ${popoverTokens.boxShadow}: ${shadowDownHardM};
 
                 ${popoverTokens.arrowMaskWidth}: 1rem;
                 ${popoverTokens.arrowMaskHeight}: 1rem;
                 ${popoverTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+");
                 ${popoverTokens.arrowHeight}: 0.375rem;
                 ${popoverTokens.arrowEdgeMargin}: 0.5625rem;
-                ${popoverTokens.arrowBackground}: var(--surface-solid-card);
+                ${popoverTokens.arrowBackground}: ${surfaceSolidCard};
             `
         }
     }