@salutejs/sdds-finai 0.348.0-next-sbcom.0 → 0.349.0-dev.0

package/dist/beta/cjs/EmbeddedButton/EmbeddedButton.config.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "config", {
     }
 });
 const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const _sdds_finai = require("@salutejs/sdds-themes/tokens/sdds_finai");
 const config = {
     defaults: {
         view: 'default',
@@ -17,66 +18,66 @@ const config = {
     variations: {
         view: {
             default: (0, _styledcomponents.css)`
-                ${_styledcomponents._beta_embeddedButtonTokens.color}: var(--text-primary);
-                ${_styledcomponents._beta_embeddedButtonTokens.colorHover}: var(--text-primary-hover);
-                ${_styledcomponents._beta_embeddedButtonTokens.colorActive}: var(--text-primary-active);
+                ${_styledcomponents._beta_embeddedButtonTokens.color}: ${_sdds_finai.textPrimary};
+                ${_styledcomponents._beta_embeddedButtonTokens.colorHover}: ${_sdds_finai.textPrimaryHover};
+                ${_styledcomponents._beta_embeddedButtonTokens.colorActive}: ${_sdds_finai.textPrimaryActive};
                 ${_styledcomponents._beta_embeddedButtonTokens.backgroundColor}: transparent;
-                ${_styledcomponents._beta_embeddedButtonTokens.spinnerColor}: var(--text-primary);
-                ${_styledcomponents._beta_embeddedButtonTokens.focusColor}: var(--surface-accent);
+                ${_styledcomponents._beta_embeddedButtonTokens.spinnerColor}: ${_sdds_finai.textPrimary};
+                ${_styledcomponents._beta_embeddedButtonTokens.focusColor}: ${_sdds_finai.surfaceAccent};
                 ${_styledcomponents._beta_embeddedButtonTokens.loadingIconOpacity}: 0.06;
             `,
             secondary: (0, _styledcomponents.css)`
-                ${_styledcomponents._beta_embeddedButtonTokens.color}: var(--text-secondary);
-                ${_styledcomponents._beta_embeddedButtonTokens.colorHover}: var(--text-secondary-hover);
-                ${_styledcomponents._beta_embeddedButtonTokens.colorActive}: var(--text-secondary-active);
+                ${_styledcomponents._beta_embeddedButtonTokens.color}: ${_sdds_finai.textSecondary};
+                ${_styledcomponents._beta_embeddedButtonTokens.colorHover}: ${_sdds_finai.textSecondaryHover};
+                ${_styledcomponents._beta_embeddedButtonTokens.colorActive}: ${_sdds_finai.textSecondaryActive};
                 ${_styledcomponents._beta_embeddedButtonTokens.backgroundColor}: transparent;
-                ${_styledcomponents._beta_embeddedButtonTokens.spinnerColor}: var(--text-secondary);
-                ${_styledcomponents._beta_embeddedButtonTokens.focusColor}: var(--surface-accent);
+                ${_styledcomponents._beta_embeddedButtonTokens.spinnerColor}: ${_sdds_finai.textSecondary};
+                ${_styledcomponents._beta_embeddedButtonTokens.focusColor}: ${_sdds_finai.surfaceAccent};
                 ${_styledcomponents._beta_embeddedButtonTokens.loadingIconOpacity}: 0.06;
             `,
             accent: (0, _styledcomponents.css)`
-                ${_styledcomponents._beta_embeddedButtonTokens.color}: var(--text-accent);
-                ${_styledcomponents._beta_embeddedButtonTokens.colorHover}: var(--text-accent-hover);
-                ${_styledcomponents._beta_embeddedButtonTokens.colorActive}: var(--text-accent-active);
+                ${_styledcomponents._beta_embeddedButtonTokens.color}: ${_sdds_finai.textAccent};
+                ${_styledcomponents._beta_embeddedButtonTokens.colorHover}: ${_sdds_finai.textAccentHover};
+                ${_styledcomponents._beta_embeddedButtonTokens.colorActive}: ${_sdds_finai.textAccentActive};
                 ${_styledcomponents._beta_embeddedButtonTokens.backgroundColor}: transparent;
-                ${_styledcomponents._beta_embeddedButtonTokens.spinnerColor}: var(--text-accent);
-                ${_styledcomponents._beta_embeddedButtonTokens.focusColor}: var(--surface-accent);
+                ${_styledcomponents._beta_embeddedButtonTokens.spinnerColor}: ${_sdds_finai.textAccent};
+                ${_styledcomponents._beta_embeddedButtonTokens.focusColor}: ${_sdds_finai.surfaceAccent};
                 ${_styledcomponents._beta_embeddedButtonTokens.loadingIconOpacity}: 0.06;
             `,
             positive: (0, _styledcomponents.css)`
-                ${_styledcomponents._beta_embeddedButtonTokens.color}: var(--text-positive);
-                ${_styledcomponents._beta_embeddedButtonTokens.colorHover}: var(--text-positive-hover);
-                ${_styledcomponents._beta_embeddedButtonTokens.colorActive}: var(--text-positive-active);
+                ${_styledcomponents._beta_embeddedButtonTokens.color}: ${_sdds_finai.textPositive};
+                ${_styledcomponents._beta_embeddedButtonTokens.colorHover}: ${_sdds_finai.textPositiveHover};
+                ${_styledcomponents._beta_embeddedButtonTokens.colorActive}: ${_sdds_finai.textPositiveActive};
                 ${_styledcomponents._beta_embeddedButtonTokens.backgroundColor}: transparent;
-                ${_styledcomponents._beta_embeddedButtonTokens.spinnerColor}: var(--text-positive);
-                ${_styledcomponents._beta_embeddedButtonTokens.focusColor}: var(--surface-accent);
+                ${_styledcomponents._beta_embeddedButtonTokens.spinnerColor}: ${_sdds_finai.textPositive};
+                ${_styledcomponents._beta_embeddedButtonTokens.focusColor}: ${_sdds_finai.surfaceAccent};
                 ${_styledcomponents._beta_embeddedButtonTokens.loadingIconOpacity}: 0.06;
             `,
             warning: (0, _styledcomponents.css)`
-                ${_styledcomponents._beta_embeddedButtonTokens.color}: var(--text-warning);
-                ${_styledcomponents._beta_embeddedButtonTokens.colorHover}: var(--text-warning-hover);
-                ${_styledcomponents._beta_embeddedButtonTokens.colorActive}: var(--text-warning-active);
+                ${_styledcomponents._beta_embeddedButtonTokens.color}: ${_sdds_finai.textWarning};
+                ${_styledcomponents._beta_embeddedButtonTokens.colorHover}: ${_sdds_finai.textWarningHover};
+                ${_styledcomponents._beta_embeddedButtonTokens.colorActive}: ${_sdds_finai.textWarningActive};
                 ${_styledcomponents._beta_embeddedButtonTokens.backgroundColor}: transparent;
-                ${_styledcomponents._beta_embeddedButtonTokens.spinnerColor}: var(--text-warning);
-                ${_styledcomponents._beta_embeddedButtonTokens.focusColor}: var(--surface-accent);
+                ${_styledcomponents._beta_embeddedButtonTokens.spinnerColor}: ${_sdds_finai.textWarning};
+                ${_styledcomponents._beta_embeddedButtonTokens.focusColor}: ${_sdds_finai.surfaceAccent};
                 ${_styledcomponents._beta_embeddedButtonTokens.loadingIconOpacity}: 0.06;
             `,
             negative: (0, _styledcomponents.css)`
-                ${_styledcomponents._beta_embeddedButtonTokens.color}: var(--text-negative);
-                ${_styledcomponents._beta_embeddedButtonTokens.colorHover}: var(--text-negative-hover);
-                ${_styledcomponents._beta_embeddedButtonTokens.colorActive}: var(--text-negative-active);
+                ${_styledcomponents._beta_embeddedButtonTokens.color}: ${_sdds_finai.textNegative};
+                ${_styledcomponents._beta_embeddedButtonTokens.colorHover}: ${_sdds_finai.textNegativeHover};
+                ${_styledcomponents._beta_embeddedButtonTokens.colorActive}: ${_sdds_finai.textNegativeActive};
                 ${_styledcomponents._beta_embeddedButtonTokens.backgroundColor}: transparent;
-                ${_styledcomponents._beta_embeddedButtonTokens.spinnerColor}: var(--text-negative);
-                ${_styledcomponents._beta_embeddedButtonTokens.focusColor}: var(--surface-accent);
+                ${_styledcomponents._beta_embeddedButtonTokens.spinnerColor}: ${_sdds_finai.textNegative};
+                ${_styledcomponents._beta_embeddedButtonTokens.focusColor}: ${_sdds_finai.surfaceAccent};
                 ${_styledcomponents._beta_embeddedButtonTokens.loadingIconOpacity}: 0.06;
             `,
             info: (0, _styledcomponents.css)`
-                ${_styledcomponents._beta_embeddedButtonTokens.color}: var(--text-info);
-                ${_styledcomponents._beta_embeddedButtonTokens.colorHover}: var(--text-info-hover);
-                ${_styledcomponents._beta_embeddedButtonTokens.colorActive}: var(--text-info-active);
+                ${_styledcomponents._beta_embeddedButtonTokens.color}: ${_sdds_finai.textInfo};
+                ${_styledcomponents._beta_embeddedButtonTokens.colorHover}: ${_sdds_finai.textInfoHover};
+                ${_styledcomponents._beta_embeddedButtonTokens.colorActive}: ${_sdds_finai.textInfoActive};
                 ${_styledcomponents._beta_embeddedButtonTokens.backgroundColor}: transparent;
-                ${_styledcomponents._beta_embeddedButtonTokens.spinnerColor}: var(--text-info);
-                ${_styledcomponents._beta_embeddedButtonTokens.focusColor}: var(--surface-accent);
+                ${_styledcomponents._beta_embeddedButtonTokens.spinnerColor}: ${_sdds_finai.textInfo};
+                ${_styledcomponents._beta_embeddedButtonTokens.focusColor}: ${_sdds_finai.surfaceAccent};
                 ${_styledcomponents._beta_embeddedButtonTokens.loadingIconOpacity}: 0.06;
             `
         },

package/dist/beta/cjs/Popover/Popover.closeInner.config.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "config", {
     }
 });
 const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const _sdds_finai = require("@salutejs/sdds-themes/tokens/sdds_finai");
 const config = {
     defaults: {
         view: 'action',
@@ -17,18 +18,18 @@ const config = {
     variations: {
         view: {
             action: (0, _styledcomponents.css)`
-                ${_styledcomponents._beta_popoverTokens.backgroundColor}: var(--surface-solid-card);
-                ${_styledcomponents._beta_popoverTokens.boxShadow}: var(--shadow-down-hard-m);
-                ${_styledcomponents._beta_popoverTokens.iconColor}: var(--text-secondary);
-                ${_styledcomponents._beta_popoverTokens.iconColorHover}: var(--text-secondary-hover);
-                ${_styledcomponents._beta_popoverTokens.iconColorActive}: var(--text-secondary-active);
+                ${_styledcomponents._beta_popoverTokens.backgroundColor}: ${_sdds_finai.surfaceSolidCard};
+                ${_styledcomponents._beta_popoverTokens.boxShadow}: ${_sdds_finai.shadowDownHardM};
+                ${_styledcomponents._beta_popoverTokens.iconColor}: ${_sdds_finai.textSecondary};
+                ${_styledcomponents._beta_popoverTokens.iconColorHover}: ${_sdds_finai.textSecondaryHover};
+                ${_styledcomponents._beta_popoverTokens.iconColorActive}: ${_sdds_finai.textSecondaryActive};
             `,
             info: (0, _styledcomponents.css)`
-                ${_styledcomponents._beta_popoverTokens.backgroundColor}: var(--surface-accent);
-                ${_styledcomponents._beta_popoverTokens.boxShadow}: var(--shadow-down-hard-m);
-                ${_styledcomponents._beta_popoverTokens.iconColor}: var(--on-dark-text-secondary);
-                ${_styledcomponents._beta_popoverTokens.iconColorHover}: var(--on-dark-text-secondary-hover);
-                ${_styledcomponents._beta_popoverTokens.iconColorActive}: var(--on-dark-text-secondary-active);
+                ${_styledcomponents._beta_popoverTokens.backgroundColor}: ${_sdds_finai.surfaceAccent};
+                ${_styledcomponents._beta_popoverTokens.boxShadow}: ${_sdds_finai.shadowDownHardM};
+                ${_styledcomponents._beta_popoverTokens.iconColor}: ${_sdds_finai.onDarkTextSecondary};
+                ${_styledcomponents._beta_popoverTokens.iconColorHover}: ${_sdds_finai.onDarkTextSecondaryHover};
+                ${_styledcomponents._beta_popoverTokens.iconColorActive}: ${_sdds_finai.onDarkTextSecondaryActive};
             `
         },
         size: {

package/dist/beta/cjs/Popover/Popover.closeNone.config.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "config", {
     }
 });
 const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const _sdds_finai = require("@salutejs/sdds-themes/tokens/sdds_finai");
 const config = {
     defaults: {
         view: 'action',
@@ -17,12 +18,12 @@ const config = {
     variations: {
         view: {
             action: (0, _styledcomponents.css)`
-                ${_styledcomponents._beta_popoverTokens.backgroundColor}: var(--surface-solid-card);
-                ${_styledcomponents._beta_popoverTokens.boxShadow}: var(--shadow-down-hard-m);
+                ${_styledcomponents._beta_popoverTokens.backgroundColor}: ${_sdds_finai.surfaceSolidCard};
+                ${_styledcomponents._beta_popoverTokens.boxShadow}: ${_sdds_finai.shadowDownHardM};
             `,
             info: (0, _styledcomponents.css)`
-                ${_styledcomponents._beta_popoverTokens.backgroundColor}: var(--surface-accent);
-                ${_styledcomponents._beta_popoverTokens.boxShadow}: var(--shadow-down-hard-m);
+                ${_styledcomponents._beta_popoverTokens.backgroundColor}: ${_sdds_finai.surfaceAccent};
+                ${_styledcomponents._beta_popoverTokens.boxShadow}: ${_sdds_finai.shadowDownHardM};
             `
         },
         size: {

package/dist/beta/cjs/Tooltip/Tooltip.config.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "config", {
     }
 });
 const _styledcomponents = require("@salutejs/plasma-new-hope/styled-components");
+const _sdds_finai = require("@salutejs/sdds-themes/tokens/sdds_finai");
 const config = {
     defaults: {
         view: 'default',
@@ -17,9 +18,9 @@ const config = {
     variations: {
         view: {
             default: (0, _styledcomponents.css)`
-                ${_styledcomponents._beta_tooltipTokens.backgroundColor}: var(--inverse-surface-solid-card-brightness);
-                ${_styledcomponents._beta_tooltipTokens.boxShadow}: var(--shadow-down-hard-m);
-                ${_styledcomponents._beta_tooltipTokens.color}: var(--inverse-text-primary);
+                ${_styledcomponents._beta_tooltipTokens.backgroundColor}: ${_sdds_finai.inverseSurfaceSolidCardBrightness};
+                ${_styledcomponents._beta_tooltipTokens.boxShadow}: ${_sdds_finai.shadowDownHardM};
+                ${_styledcomponents._beta_tooltipTokens.color}: ${_sdds_finai.inverseTextPrimary};
             `
         },
         size: {
@@ -27,23 +28,23 @@ const config = {
                 ${_styledcomponents._beta_tooltipTokens.borderRadius}: 0.625rem;
                 ${_styledcomponents._beta_tooltipTokens.padding}: 0.75rem 0.875rem;
                 ${_styledcomponents._beta_tooltipTokens.gap}: 0.375rem;
-                ${_styledcomponents._beta_tooltipTokens.fontFamily}: var(--plasma-typo-body-s-font-family);
-                ${_styledcomponents._beta_tooltipTokens.fontSize}: var(--plasma-typo-body-s-font-size);
-                ${_styledcomponents._beta_tooltipTokens.fontStyle}: var(--plasma-typo-body-s-font-style);
-                ${_styledcomponents._beta_tooltipTokens.fontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${_styledcomponents._beta_tooltipTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${_styledcomponents._beta_tooltipTokens.lineHeight}: var(--plasma-typo-body-s-line-height);
+                ${_styledcomponents._beta_tooltipTokens.fontFamily}: ${_sdds_finai.bodyS.fontFamily};
+                ${_styledcomponents._beta_tooltipTokens.fontSize}: ${_sdds_finai.bodyS.fontSize};
+                ${_styledcomponents._beta_tooltipTokens.fontStyle}: ${_sdds_finai.bodyS.fontStyle};
+                ${_styledcomponents._beta_tooltipTokens.fontWeight}: ${_sdds_finai.bodyS.fontWeight};
+                ${_styledcomponents._beta_tooltipTokens.letterSpacing}: ${_sdds_finai.bodyS.letterSpacing};
+                ${_styledcomponents._beta_tooltipTokens.lineHeight}: ${_sdds_finai.bodyS.lineHeight};
             `,
             s: (0, _styledcomponents.css)`
                 ${_styledcomponents._beta_tooltipTokens.borderRadius}: 0.5rem;
                 ${_styledcomponents._beta_tooltipTokens.padding}: 0.5rem 0.75rem;
                 ${_styledcomponents._beta_tooltipTokens.gap}: 0.25rem;
-                ${_styledcomponents._beta_tooltipTokens.fontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${_styledcomponents._beta_tooltipTokens.fontSize}: var(--plasma-typo-body-xs-font-size);
-                ${_styledcomponents._beta_tooltipTokens.fontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${_styledcomponents._beta_tooltipTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${_styledcomponents._beta_tooltipTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${_styledcomponents._beta_tooltipTokens.lineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${_styledcomponents._beta_tooltipTokens.fontFamily}: ${_sdds_finai.bodyXS.fontFamily};
+                ${_styledcomponents._beta_tooltipTokens.fontSize}: ${_sdds_finai.bodyXS.fontSize};
+                ${_styledcomponents._beta_tooltipTokens.fontStyle}: ${_sdds_finai.bodyXS.fontStyle};
+                ${_styledcomponents._beta_tooltipTokens.fontWeight}: ${_sdds_finai.bodyXS.fontWeight};
+                ${_styledcomponents._beta_tooltipTokens.letterSpacing}: ${_sdds_finai.bodyXS.letterSpacing};
+                ${_styledcomponents._beta_tooltipTokens.lineHeight}: ${_sdds_finai.bodyXS.lineHeight};
             `
         }
     }

package/dist/beta/es/EmbeddedButton/EmbeddedButton.config.js

@@ -1,4 +1,5 @@
 import { css, _beta_embeddedButtonTokens as tokens } from '@salutejs/plasma-new-hope/styled-components';
+import { surfaceAccent, textAccent, textAccentActive, textAccentHover, textInfo, textInfoActive, textInfoHover, textNegative, textNegativeActive, textNegativeHover, textPositive, textPositiveActive, textPositiveHover, textPrimary, textPrimaryActive, textPrimaryHover, textSecondary, textSecondaryActive, textSecondaryHover, textWarning, textWarningActive, textWarningHover } from '@salutejs/sdds-themes/tokens/sdds_finai';
 export const config = {
     defaults: {
         view: 'default',
@@ -7,66 +8,66 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${tokens.color}: var(--text-primary);
-                ${tokens.colorHover}: var(--text-primary-hover);
-                ${tokens.colorActive}: var(--text-primary-active);
+                ${tokens.color}: ${textPrimary};
+                ${tokens.colorHover}: ${textPrimaryHover};
+                ${tokens.colorActive}: ${textPrimaryActive};
                 ${tokens.backgroundColor}: transparent;
-                ${tokens.spinnerColor}: var(--text-primary);
-                ${tokens.focusColor}: var(--surface-accent);
+                ${tokens.spinnerColor}: ${textPrimary};
+                ${tokens.focusColor}: ${surfaceAccent};
                 ${tokens.loadingIconOpacity}: 0.06;
             `,
             secondary: css`
-                ${tokens.color}: var(--text-secondary);
-                ${tokens.colorHover}: var(--text-secondary-hover);
-                ${tokens.colorActive}: var(--text-secondary-active);
+                ${tokens.color}: ${textSecondary};
+                ${tokens.colorHover}: ${textSecondaryHover};
+                ${tokens.colorActive}: ${textSecondaryActive};
                 ${tokens.backgroundColor}: transparent;
-                ${tokens.spinnerColor}: var(--text-secondary);
-                ${tokens.focusColor}: var(--surface-accent);
+                ${tokens.spinnerColor}: ${textSecondary};
+                ${tokens.focusColor}: ${surfaceAccent};
                 ${tokens.loadingIconOpacity}: 0.06;
             `,
             accent: css`
-                ${tokens.color}: var(--text-accent);
-                ${tokens.colorHover}: var(--text-accent-hover);
-                ${tokens.colorActive}: var(--text-accent-active);
+                ${tokens.color}: ${textAccent};
+                ${tokens.colorHover}: ${textAccentHover};
+                ${tokens.colorActive}: ${textAccentActive};
                 ${tokens.backgroundColor}: transparent;
-                ${tokens.spinnerColor}: var(--text-accent);
-                ${tokens.focusColor}: var(--surface-accent);
+                ${tokens.spinnerColor}: ${textAccent};
+                ${tokens.focusColor}: ${surfaceAccent};
                 ${tokens.loadingIconOpacity}: 0.06;
             `,
             positive: css`
-                ${tokens.color}: var(--text-positive);
-                ${tokens.colorHover}: var(--text-positive-hover);
-                ${tokens.colorActive}: var(--text-positive-active);
+                ${tokens.color}: ${textPositive};
+                ${tokens.colorHover}: ${textPositiveHover};
+                ${tokens.colorActive}: ${textPositiveActive};
                 ${tokens.backgroundColor}: transparent;
-                ${tokens.spinnerColor}: var(--text-positive);
-                ${tokens.focusColor}: var(--surface-accent);
+                ${tokens.spinnerColor}: ${textPositive};
+                ${tokens.focusColor}: ${surfaceAccent};
                 ${tokens.loadingIconOpacity}: 0.06;
             `,
             warning: css`
-                ${tokens.color}: var(--text-warning);
-                ${tokens.colorHover}: var(--text-warning-hover);
-                ${tokens.colorActive}: var(--text-warning-active);
+                ${tokens.color}: ${textWarning};
+                ${tokens.colorHover}: ${textWarningHover};
+                ${tokens.colorActive}: ${textWarningActive};
                 ${tokens.backgroundColor}: transparent;
-                ${tokens.spinnerColor}: var(--text-warning);
-                ${tokens.focusColor}: var(--surface-accent);
+                ${tokens.spinnerColor}: ${textWarning};
+                ${tokens.focusColor}: ${surfaceAccent};
                 ${tokens.loadingIconOpacity}: 0.06;
             `,
             negative: css`
-                ${tokens.color}: var(--text-negative);
-                ${tokens.colorHover}: var(--text-negative-hover);
-                ${tokens.colorActive}: var(--text-negative-active);
+                ${tokens.color}: ${textNegative};
+                ${tokens.colorHover}: ${textNegativeHover};
+                ${tokens.colorActive}: ${textNegativeActive};
                 ${tokens.backgroundColor}: transparent;
-                ${tokens.spinnerColor}: var(--text-negative);
-                ${tokens.focusColor}: var(--surface-accent);
+                ${tokens.spinnerColor}: ${textNegative};
+                ${tokens.focusColor}: ${surfaceAccent};
                 ${tokens.loadingIconOpacity}: 0.06;
             `,
             info: css`
-                ${tokens.color}: var(--text-info);
-                ${tokens.colorHover}: var(--text-info-hover);
-                ${tokens.colorActive}: var(--text-info-active);
+                ${tokens.color}: ${textInfo};
+                ${tokens.colorHover}: ${textInfoHover};
+                ${tokens.colorActive}: ${textInfoActive};
                 ${tokens.backgroundColor}: transparent;
-                ${tokens.spinnerColor}: var(--text-info);
-                ${tokens.focusColor}: var(--surface-accent);
+                ${tokens.spinnerColor}: ${textInfo};
+                ${tokens.focusColor}: ${surfaceAccent};
                 ${tokens.loadingIconOpacity}: 0.06;
             `
         },

package/dist/beta/es/Popover/Popover.closeInner.config.js

@@ -1,4 +1,5 @@
 import { css, _beta_popoverTokens as tokens } from '@salutejs/plasma-new-hope/styled-components';
+import { onDarkTextSecondary, onDarkTextSecondaryActive, onDarkTextSecondaryHover, shadowDownHardM, surfaceAccent, surfaceSolidCard, textSecondary, textSecondaryActive, textSecondaryHover } from '@salutejs/sdds-themes/tokens/sdds_finai';
 export const config = {
     defaults: {
         view: 'action',
@@ -7,18 +8,18 @@ export const config = {
     variations: {
         view: {
             action: css`
-                ${tokens.backgroundColor}: var(--surface-solid-card);
-                ${tokens.boxShadow}: var(--shadow-down-hard-m);
-                ${tokens.iconColor}: var(--text-secondary);
-                ${tokens.iconColorHover}: var(--text-secondary-hover);
-                ${tokens.iconColorActive}: var(--text-secondary-active);
+                ${tokens.backgroundColor}: ${surfaceSolidCard};
+                ${tokens.boxShadow}: ${shadowDownHardM};
+                ${tokens.iconColor}: ${textSecondary};
+                ${tokens.iconColorHover}: ${textSecondaryHover};
+                ${tokens.iconColorActive}: ${textSecondaryActive};
             `,
             info: css`
-                ${tokens.backgroundColor}: var(--surface-accent);
-                ${tokens.boxShadow}: var(--shadow-down-hard-m);
-                ${tokens.iconColor}: var(--on-dark-text-secondary);
-                ${tokens.iconColorHover}: var(--on-dark-text-secondary-hover);
-                ${tokens.iconColorActive}: var(--on-dark-text-secondary-active);
+                ${tokens.backgroundColor}: ${surfaceAccent};
+                ${tokens.boxShadow}: ${shadowDownHardM};
+                ${tokens.iconColor}: ${onDarkTextSecondary};
+                ${tokens.iconColorHover}: ${onDarkTextSecondaryHover};
+                ${tokens.iconColorActive}: ${onDarkTextSecondaryActive};
             `
         },
         size: {

package/dist/beta/es/Popover/Popover.closeNone.config.js

@@ -1,4 +1,5 @@
 import { css, _beta_popoverTokens as tokens } from '@salutejs/plasma-new-hope/styled-components';
+import { shadowDownHardM, surfaceAccent, surfaceSolidCard } from '@salutejs/sdds-themes/tokens/sdds_finai';
 export const config = {
     defaults: {
         view: 'action',
@@ -7,12 +8,12 @@ export const config = {
     variations: {
         view: {
             action: css`
-                ${tokens.backgroundColor}: var(--surface-solid-card);
-                ${tokens.boxShadow}: var(--shadow-down-hard-m);
+                ${tokens.backgroundColor}: ${surfaceSolidCard};
+                ${tokens.boxShadow}: ${shadowDownHardM};
             `,
             info: css`
-                ${tokens.backgroundColor}: var(--surface-accent);
-                ${tokens.boxShadow}: var(--shadow-down-hard-m);
+                ${tokens.backgroundColor}: ${surfaceAccent};
+                ${tokens.boxShadow}: ${shadowDownHardM};
             `
         },
         size: {

package/dist/beta/es/Tooltip/Tooltip.config.js

@@ -1,4 +1,5 @@
 import { css, _beta_tooltipTokens as tokens } from '@salutejs/plasma-new-hope/styled-components';
+import { bodyS, bodyXS, inverseSurfaceSolidCardBrightness, inverseTextPrimary, shadowDownHardM } from '@salutejs/sdds-themes/tokens/sdds_finai';
 export const config = {
     defaults: {
         view: 'default',
@@ -7,9 +8,9 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${tokens.backgroundColor}: var(--inverse-surface-solid-card-brightness);
-                ${tokens.boxShadow}: var(--shadow-down-hard-m);
-                ${tokens.color}: var(--inverse-text-primary);
+                ${tokens.backgroundColor}: ${inverseSurfaceSolidCardBrightness};
+                ${tokens.boxShadow}: ${shadowDownHardM};
+                ${tokens.color}: ${inverseTextPrimary};
             `
         },
         size: {
@@ -17,23 +18,23 @@ export const config = {
                 ${tokens.borderRadius}: 0.625rem;
                 ${tokens.padding}: 0.75rem 0.875rem;
                 ${tokens.gap}: 0.375rem;
-                ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family);
-                ${tokens.fontSize}: var(--plasma-typo-body-s-font-size);
-                ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style);
-                ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height);
+                ${tokens.fontFamily}: ${bodyS.fontFamily};
+                ${tokens.fontSize}: ${bodyS.fontSize};
+                ${tokens.fontStyle}: ${bodyS.fontStyle};
+                ${tokens.fontWeight}: ${bodyS.fontWeight};
+                ${tokens.letterSpacing}: ${bodyS.letterSpacing};
+                ${tokens.lineHeight}: ${bodyS.lineHeight};
             `,
             s: css`
                 ${tokens.borderRadius}: 0.5rem;
                 ${tokens.padding}: 0.5rem 0.75rem;
                 ${tokens.gap}: 0.25rem;
-                ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family);
-                ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size);
-                ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style);
-                ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight);
-                ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
-                ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height);
+                ${tokens.fontFamily}: ${bodyXS.fontFamily};
+                ${tokens.fontSize}: ${bodyXS.fontSize};
+                ${tokens.fontStyle}: ${bodyXS.fontStyle};
+                ${tokens.fontWeight}: ${bodyXS.fontWeight};
+                ${tokens.letterSpacing}: ${bodyXS.letterSpacing};
+                ${tokens.lineHeight}: ${bodyXS.lineHeight};
             `
         }
     }