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

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

@@ -1,3 +1,4 @@
+import { bodyM, bodyMBold, onDarkTextPrimary, onLightTextAccentMinor, surfaceAccent, surfaceAccentActive, surfaceAccentHover, surfaceClear, surfaceSolidSecondary, surfaceSolidSecondaryActive, surfaceSolidSecondaryHover, surfaceTransparentAccent, surfaceTransparentAccentActive, textAccent, textAccentActive, textAccentMinor, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { css, buttonTokens } from '@salutejs/plasma-new-hope/emotion';
 export const config = {
     defaults: {
@@ -8,36 +9,36 @@ export const config = {
     variations: {
         view: {
             accent: css`
-                ${buttonTokens.buttonColor}: var(--on-dark-text-primary);
-                ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary);
-                ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary);
-                ${buttonTokens.buttonValueColor}: var(--on-light-text-accent-minor);
-                ${buttonTokens.buttonBackgroundColor}: var(--surface-accent);
+                ${buttonTokens.buttonColor}: ${onDarkTextPrimary};
+                ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary};
+                ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary};
+                ${buttonTokens.buttonValueColor}: ${onLightTextAccentMinor};
+                ${buttonTokens.buttonBackgroundColor}: ${surfaceAccent};
                 ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor});
-                ${buttonTokens.buttonBackgroundColorHover}: var(--surface-accent-hover);
-                ${buttonTokens.buttonBackgroundColorActive}: var(--surface-accent-active);
+                ${buttonTokens.buttonBackgroundColorHover}: ${surfaceAccentHover};
+                ${buttonTokens.buttonBackgroundColorActive}: ${surfaceAccentActive};
             `,
             secondary: css`
-                ${buttonTokens.buttonColor}: var(--text-accent);
-                ${buttonTokens.buttonColorHover}: var(--text-accent-minor);
-                ${buttonTokens.buttonColorActive}: var(--text-accent-active);
-                ${buttonTokens.buttonTextColor}: var(--text-accent);
-                ${buttonTokens.buttonIconColor}: var(--text-accent);
-                ${buttonTokens.buttonValueColor}: var(--text-secondary);
-                ${buttonTokens.buttonBackgroundColor}: var(--surface-solid-secondary);
+                ${buttonTokens.buttonColor}: ${textAccent};
+                ${buttonTokens.buttonColorHover}: ${textAccentMinor};
+                ${buttonTokens.buttonColorActive}: ${textAccentActive};
+                ${buttonTokens.buttonTextColor}: ${textAccent};
+                ${buttonTokens.buttonIconColor}: ${textAccent};
+                ${buttonTokens.buttonValueColor}: ${textSecondary};
+                ${buttonTokens.buttonBackgroundColor}: ${surfaceSolidSecondary};
                 ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor});
-                ${buttonTokens.buttonBackgroundColorHover}: var(--surface-solid-secondary-hover);
-                ${buttonTokens.buttonBackgroundColorActive}: var(--surface-solid-secondary-active);
+                ${buttonTokens.buttonBackgroundColorHover}: ${surfaceSolidSecondaryHover};
+                ${buttonTokens.buttonBackgroundColorActive}: ${surfaceSolidSecondaryActive};
             `,
             clear: css`
-                ${buttonTokens.buttonColor}: var(--text-accent);
-                ${buttonTokens.buttonTextColor}: var(--text-accent);
-                ${buttonTokens.buttonIconColor}: var(--text-accent);
-                ${buttonTokens.buttonValueColor}: var(--text-accent-minor);
-                ${buttonTokens.buttonBackgroundColor}: var(--surface-clear);
-                ${buttonTokens.buttonLoadingBackgroundColor}: var(--surface-transparent-accent);
-                ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-accent);
-                ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-accent-active);
+                ${buttonTokens.buttonColor}: ${textAccent};
+                ${buttonTokens.buttonTextColor}: ${textAccent};
+                ${buttonTokens.buttonIconColor}: ${textAccent};
+                ${buttonTokens.buttonValueColor}: ${textAccentMinor};
+                ${buttonTokens.buttonBackgroundColor}: ${surfaceClear};
+                ${buttonTokens.buttonLoadingBackgroundColor}: ${surfaceTransparentAccent};
+                ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentAccent};
+                ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentAccentActive};
             `
         },
         size: {
@@ -46,12 +47,12 @@ export const config = {
                 ${buttonTokens.buttonWidth}: 11.25rem;
                 ${buttonTokens.buttonPadding}: 1rem;
                 ${buttonTokens.buttonRadius}: 0.75rem;
-                ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size);
-                ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
-                ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${buttonTokens.buttonFontFamily}: ${bodyM.fontFamily};
+                ${buttonTokens.buttonFontSize}: ${bodyM.fontSize};
+                ${buttonTokens.buttonFontStyle}: ${bodyM.fontStyle};
+                ${buttonTokens.buttonFontWeight}: ${bodyMBold.fontWeight};
+                ${buttonTokens.buttonLetterSpacing}: ${bodyM.letterSpacing};
+                ${buttonTokens.buttonLineHeight}: ${bodyM.lineHeight};
 
                 ${buttonTokens.buttonSpinnerSize}: 1.375rem;
                 ${buttonTokens.buttonSpinnerColor}: inherit;
@@ -65,12 +66,12 @@ export const config = {
                 ${buttonTokens.buttonWidth}: 11.25rem;
                 ${buttonTokens.buttonPadding}: 1rem;
                 ${buttonTokens.buttonRadius}: 0.75rem;
-                ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size);
-                ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
-                ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${buttonTokens.buttonFontFamily}: ${bodyM.fontFamily};
+                ${buttonTokens.buttonFontSize}: ${bodyM.fontSize};
+                ${buttonTokens.buttonFontStyle}: ${bodyM.fontStyle};
+                ${buttonTokens.buttonFontWeight}: ${bodyMBold.fontWeight};
+                ${buttonTokens.buttonLetterSpacing}: ${bodyM.letterSpacing};
+                ${buttonTokens.buttonLineHeight}: ${bodyM.lineHeight};
 
                 ${buttonTokens.buttonSpinnerSize}: 1.375rem;
                 ${buttonTokens.buttonSpinnerColor}: inherit;
@@ -82,12 +83,12 @@ export const config = {
             sr: css`
                 ${buttonTokens.buttonHeight}: 2.5rem;
                 ${buttonTokens.buttonWidth}: 11.25rem;
-                ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size);
-                ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
-                ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${buttonTokens.buttonFontFamily}: ${bodyM.fontFamily};
+                ${buttonTokens.buttonFontSize}: ${bodyM.fontSize};
+                ${buttonTokens.buttonFontStyle}: ${bodyM.fontStyle};
+                ${buttonTokens.buttonFontWeight}: ${bodyMBold.fontWeight};
+                ${buttonTokens.buttonLetterSpacing}: ${bodyM.letterSpacing};
+                ${buttonTokens.buttonLineHeight}: ${bodyM.lineHeight};
 
                 ${buttonTokens.buttonSpinnerSize}: 1.375rem;
                 ${buttonTokens.buttonSpinnerColor}: inherit;
@@ -101,7 +102,7 @@ export const config = {
         },
         focused: {
             true: css`
-                ${buttonTokens.buttonFocusColor}: var(--surface-accent);
+                ${buttonTokens.buttonFocusColor}: ${surfaceAccent};
             `
         },
         stretching: {

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

@@ -5,11 +5,11 @@ import styled from '@emotion/styled';
 import { config } from './Button.config';
 const mergedConfig = mergeConfig(buttonConfig, config);
 const ButtonComponent = component(mergedConfig);
-// INFO: Данное поведение запрошено продуктом/командой `sdds-cs`
+// INFO: Данное поведение запрошено продуктом
 const StyledButton = /*#__PURE__*/ styled(ButtonComponent, {
-    target: "e19yzswk0",
+    target: "e1owdhnp0",
     label: "StyledButton"
-})("&&.", String(buttonClasses.buttonLoading), "{color:var(", buttonTokens.buttonColorActive, ",var(", buttonTokens.buttonColor, "));background:var(", buttonTokens.buttonBackgroundColorActive, ",var(", buttonTokens.buttonBackgroundColor, "));pointer-events:none;}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvQnV0dG9uL0J1dHRvbi50c3giLCJzb3VyY2VzIjpbInNyYy9jb21wb25lbnRzL0J1dHRvbi9CdXR0b24udHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBDb21wb25lbnRQcm9wcywgdXNlQ2FsbGJhY2ssIE1vdXNlRXZlbnQsIGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBidXR0b25Db25maWcsIGNvbXBvbmVudCwgbWVyZ2VDb25maWcsIGJ1dHRvbkNsYXNzZXMsIGJ1dHRvblRva2VucyB9IGZyb20gJ0BzYWx1dGVqcy9wbGFzbWEtbmV3LWhvcGUvZW1vdGlvbic7XG5pbXBvcnQgeyBtYWtlUG9seW1vcnBoaWMgfSBmcm9tICdAc2FsdXRlanMvcGxhc21hLW5ldy1ob3BlJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgY29uZmlnIH0gZnJvbSAnLi9CdXR0b24uY29uZmlnJztcblxuY29uc3QgbWVyZ2VkQ29uZmlnID0gbWVyZ2VDb25maWcoYnV0dG9uQ29uZmlnLCBjb25maWcpO1xuY29uc3QgQnV0dG9uQ29tcG9uZW50ID0gY29tcG9uZW50KG1lcmdlZENvbmZpZyk7XG5cbmV4cG9ydCB0eXBlIEJ1dHRvblByb3BzID0gQ29tcG9uZW50UHJvcHM8dHlwZW9mIEJ1dHRvbkNvbXBvbmVudD47XG5cbi8vIElORk86INCU0LDQvdC90L7QtSDQv9C+0LLQtdC00LXQvdC40LUg0LfQsNC/0YDQvtGI0LXQvdC+INC/0YDQvtC00YPQutGC0L7QvC/QutC+0LzQsNC90LTQvtC5IGBzZGRzLWNzYFxuY29uc3QgU3R5bGVkQnV0dG9uID0gc3R5bGVkKEJ1dHRvbkNvbXBvbmVudClgXG4gICAgJiYuJHtTdHJpbmcoYnV0dG9uQ2xhc3Nlcy5idXR0b25Mb2FkaW5nKX0ge1xuICAgICAgICBjb2xvcjogdmFyKCR7YnV0dG9uVG9rZW5zLmJ1dHRvbkNvbG9yQWN0aXZlfSwgdmFyKCR7YnV0dG9uVG9rZW5zLmJ1dHRvbkNvbG9yfSkpO1xuICAgICAgICBiYWNrZ3JvdW5kOiB2YXIoJHtidXR0b25Ub2tlbnMuYnV0dG9uQmFja2dyb3VuZENvbG9yQWN0aXZlfSwgdmFyKCR7YnV0dG9uVG9rZW5zLmJ1dHRvbkJhY2tncm91bmRDb2xvcn0pKTtcblxuICAgICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgICB9XG5gO1xuXG4vKipcbiAqINCa0L3QvtC/0LrQsC5cbiAqL1xuZXhwb3J0IGNvbnN0IEJ1dHRvbiA9IG1ha2VQb2x5bW9ycGhpYyhcbiAgICBmb3J3YXJkUmVmPE9taXQ8SFRNTEJ1dHRvbkVsZW1lbnQsICd2YWx1ZSc+LCBCdXR0b25Qcm9wcz4oKHsgb25DbGljaywgaXNMb2FkaW5nLCB2YWx1ZSwgLi4ucHJvcHMgfSwgcmVmKSA9PiB7XG4gICAgICAgIGNvbnN0IGhhbmRsZUNsaWNrID0gdXNlQ2FsbGJhY2soXG4gICAgICAgICAgICAoZXZlbnQ6IE1vdXNlRXZlbnQ8SFRNTEJ1dHRvbkVsZW1lbnQ+KSA9PiB7XG4gICAgICAgICAgICAgICAgaWYgKCFpc0xvYWRpbmcpIHtcbiAgICAgICAgICAgICAgICAgICAgb25DbGljaz8uKGV2ZW50KTtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9LFxuICAgICAgICAgICAgW2lzTG9hZGluZywgb25DbGlja10sXG4gICAgICAgICk7XG5cbiAgICAgICAgLy8gQHRzLWlnbm9yZVxuICAgICAgICByZXR1cm4gPFN0eWxlZEJ1dHRvbiB2YWx1ZT17dmFsdWV9IHJlZj17cmVmfSBvbkNsaWNrPXtoYW5kbGVDbGlja30gaXNMb2FkaW5nPXtpc0xvYWRpbmd9IHsuLi5wcm9wc30gLz47XG4gICAgfSksXG4gICAgJ2J1dHRvbicsXG4pO1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWFxQiJ9 */");
+})("&&.", String(buttonClasses.buttonLoading), "{color:var(", buttonTokens.buttonColorActive, ",var(", buttonTokens.buttonColor, "));background:var(", buttonTokens.buttonBackgroundColorActive, ",var(", buttonTokens.buttonBackgroundColor, "));pointer-events:none;}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvQnV0dG9uL0J1dHRvbi50c3giLCJzb3VyY2VzIjpbInNyYy9jb21wb25lbnRzL0J1dHRvbi9CdXR0b24udHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBDb21wb25lbnRQcm9wcywgdXNlQ2FsbGJhY2ssIE1vdXNlRXZlbnQsIGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBidXR0b25Db25maWcsIGNvbXBvbmVudCwgbWVyZ2VDb25maWcsIGJ1dHRvbkNsYXNzZXMsIGJ1dHRvblRva2VucyB9IGZyb20gJ0BzYWx1dGVqcy9wbGFzbWEtbmV3LWhvcGUvZW1vdGlvbic7XG5pbXBvcnQgeyBtYWtlUG9seW1vcnBoaWMgfSBmcm9tICdAc2FsdXRlanMvcGxhc21hLW5ldy1ob3BlJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgY29uZmlnIH0gZnJvbSAnLi9CdXR0b24uY29uZmlnJztcblxuY29uc3QgbWVyZ2VkQ29uZmlnID0gbWVyZ2VDb25maWcoYnV0dG9uQ29uZmlnLCBjb25maWcpO1xuY29uc3QgQnV0dG9uQ29tcG9uZW50ID0gY29tcG9uZW50KG1lcmdlZENvbmZpZyk7XG5cbmV4cG9ydCB0eXBlIEJ1dHRvblByb3BzID0gQ29tcG9uZW50UHJvcHM8dHlwZW9mIEJ1dHRvbkNvbXBvbmVudD47XG5cbi8vIElORk86INCU0LDQvdC90L7QtSDQv9C+0LLQtdC00LXQvdC40LUg0LfQsNC/0YDQvtGI0LXQvdC+INC/0YDQvtC00YPQutGC0L7QvFxuY29uc3QgU3R5bGVkQnV0dG9uID0gc3R5bGVkKEJ1dHRvbkNvbXBvbmVudClgXG4gICAgJiYuJHtTdHJpbmcoYnV0dG9uQ2xhc3Nlcy5idXR0b25Mb2FkaW5nKX0ge1xuICAgICAgICBjb2xvcjogdmFyKCR7YnV0dG9uVG9rZW5zLmJ1dHRvbkNvbG9yQWN0aXZlfSwgdmFyKCR7YnV0dG9uVG9rZW5zLmJ1dHRvbkNvbG9yfSkpO1xuICAgICAgICBiYWNrZ3JvdW5kOiB2YXIoJHtidXR0b25Ub2tlbnMuYnV0dG9uQmFja2dyb3VuZENvbG9yQWN0aXZlfSwgdmFyKCR7YnV0dG9uVG9rZW5zLmJ1dHRvbkJhY2tncm91bmRDb2xvcn0pKTtcblxuICAgICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgICB9XG5gO1xuXG4vKipcbiAqINCa0L3QvtC/0LrQsC5cbiAqL1xuZXhwb3J0IGNvbnN0IEJ1dHRvbiA9IG1ha2VQb2x5bW9ycGhpYyhcbiAgICBmb3J3YXJkUmVmPE9taXQ8SFRNTEJ1dHRvbkVsZW1lbnQsICd2YWx1ZSc+LCBCdXR0b25Qcm9wcz4oKHsgb25DbGljaywgaXNMb2FkaW5nLCB2YWx1ZSwgLi4ucHJvcHMgfSwgcmVmKSA9PiB7XG4gICAgICAgIGNvbnN0IGhhbmRsZUNsaWNrID0gdXNlQ2FsbGJhY2soXG4gICAgICAgICAgICAoZXZlbnQ6IE1vdXNlRXZlbnQ8SFRNTEJ1dHRvbkVsZW1lbnQ+KSA9PiB7XG4gICAgICAgICAgICAgICAgaWYgKCFpc0xvYWRpbmcpIHtcbiAgICAgICAgICAgICAgICAgICAgb25DbGljaz8uKGV2ZW50KTtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9LFxuICAgICAgICAgICAgW2lzTG9hZGluZywgb25DbGlja10sXG4gICAgICAgICk7XG5cbiAgICAgICAgLy8gQHRzLWlnbm9yZVxuICAgICAgICByZXR1cm4gPFN0eWxlZEJ1dHRvbiB2YWx1ZT17dmFsdWV9IHJlZj17cmVmfSBvbkNsaWNrPXtoYW5kbGVDbGlja30gaXNMb2FkaW5nPXtpc0xvYWRpbmd9IHsuLi5wcm9wc30gLz47XG4gICAgfSksXG4gICAgJ2J1dHRvbicsXG4pO1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWFxQiJ9 */");
 /**
  * Кнопка.
  */ export const Button = makePolymorphic(/*#__PURE__*/ forwardRef(({ onClick, isLoading, value, ...props }, ref)=>{

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

@@ -1,3 +1,4 @@
+import { bodyS, bodySBold, onDarkTextPrimary, onLightTextAccentMinor, surfaceAccent, surfaceAccentActive, surfaceAccentHover, surfaceClear, surfaceSolidPrimary, surfaceSolidPrimaryActive, surfaceSolidPrimaryHover, surfaceTransparentAccent, textAccent, textAccentActive, textAccentMinor, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { css, buttonGroupTokens } from '@salutejs/plasma-new-hope/emotion';
 export const config = {
     defaults: {
@@ -7,38 +8,38 @@ export const config = {
     variations: {
         view: {
             accent: css`
-                ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary);
-                ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary);
-                ${buttonGroupTokens.buttonValueColor}: var(--on-light-text-accent-minor);
-                ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-accent);
+                ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonValueColor}: ${onLightTextAccentMinor};
+                ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceAccent};
                 ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor});
-                ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary);
-                ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-accent-hover);
-                ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary);
-                ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-accent-active);
+                ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceAccentHover};
+                ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary};
+                ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceAccentActive};
             `,
             secondary: css`
-                ${buttonGroupTokens.buttonColor}:  var(--text-accent);
-                ${buttonGroupTokens.buttonTextColor}: var(--text-accent);
-                ${buttonGroupTokens.buttonIconColor}: var(--text-accent);
-                ${buttonGroupTokens.buttonValueColor}: var(--text-secondary);
-                ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-solid-primary);
+                ${buttonGroupTokens.buttonColor}:  ${textAccent};
+                ${buttonGroupTokens.buttonTextColor}: ${textAccent};
+                ${buttonGroupTokens.buttonIconColor}: ${textAccent};
+                ${buttonGroupTokens.buttonValueColor}: ${textSecondary};
+                ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceSolidPrimary};
                 ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor});
-                ${buttonGroupTokens.buttonColorHover}: var(--text-accent-minor);
-                ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-solid-primary-hover);
-                ${buttonGroupTokens.buttonColorActive}: var(--text-accent-active);
-                ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-solid-primary-active);
+                ${buttonGroupTokens.buttonColorHover}: ${textAccentMinor};
+                ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceSolidPrimaryHover};
+                ${buttonGroupTokens.buttonColorActive}: ${textAccentActive};
+                ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceSolidPrimaryActive};
             `,
             clear: css`
-                ${buttonGroupTokens.buttonColor}: var(--text-accent);
-                ${buttonGroupTokens.buttonTextColor}: var(--text-accent);
-                ${buttonGroupTokens.buttonValueColor}: var(--text-accent);
-                ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-clear);
-                ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(--surface-transparent-accent);
-                ${buttonGroupTokens.buttonColorHover}: var(--text-accent-minor);
-                ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-transparent-accent);
-                ${buttonGroupTokens.buttonColorActive}: var(--text-accent-active);
-                ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-clear);
+                ${buttonGroupTokens.buttonColor}: ${textAccent};
+                ${buttonGroupTokens.buttonTextColor}: ${textAccent};
+                ${buttonGroupTokens.buttonValueColor}: ${textAccent};
+                ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceClear};
+                ${buttonGroupTokens.buttonLoadingBackgroundColor}: ${surfaceTransparentAccent};
+                ${buttonGroupTokens.buttonColorHover}: ${textAccentMinor};
+                ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceTransparentAccent};
+                ${buttonGroupTokens.buttonColorActive}: ${textAccentActive};
+                ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceClear};
             `
         },
         size: {
@@ -49,12 +50,12 @@ export const config = {
 
                 ${buttonGroupTokens.buttonHeight}: 2.5rem;
                 ${buttonGroupTokens.buttonPadding}: 1rem;
-                ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size);
-                ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${buttonGroupTokens.buttonFontFamily}: ${bodyS.fontFamily};
+                ${buttonGroupTokens.buttonFontSize}: ${bodyS.fontSize};
+                ${buttonGroupTokens.buttonFontStyle}: ${bodyS.fontStyle};
+                ${buttonGroupTokens.buttonFontWeight}: ${bodySBold.fontWeight};
+                ${buttonGroupTokens.buttonLetterSpacing}: ${bodyS.letterSpacing};
+                ${buttonGroupTokens.buttonLineHeight}: ${bodyS.lineHeight};
             `,
             sr: css`
                 ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem;
@@ -62,12 +63,12 @@ export const config = {
                 ${buttonGroupTokens.buttonSideRadius}: 0.75rem;
 
                 ${buttonGroupTokens.buttonHeight}: 2.5rem;
-                ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size);
-                ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
-                ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height);
+                ${buttonGroupTokens.buttonFontFamily}: ${bodyS.fontFamily};
+                ${buttonGroupTokens.buttonFontSize}: ${bodyS.fontSize};
+                ${buttonGroupTokens.buttonFontStyle}: ${bodyS.fontStyle};
+                ${buttonGroupTokens.buttonFontWeight}: ${bodySBold.fontWeight};
+                ${buttonGroupTokens.buttonLetterSpacing}: ${bodyS.letterSpacing};
+                ${buttonGroupTokens.buttonLineHeight}: ${bodyS.lineHeight};
             `
         },
         orientation: {

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

@@ -1,3 +1,4 @@
+import { bodyM, bodyMBold, bodyS, bodySBold, inverseOutlineSolidSecondary, inverseTextPrimary, surfaceAccent, surfaceClear, surfaceTransparentAccent, textAccent, textAccentActive, textAccentMinor, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { css, calendarBaseTokens } from '@salutejs/plasma-new-hope/emotion';
 export const config = {
     defaults: {
@@ -7,34 +8,34 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${calendarBaseTokens.calendarSelectedItemBackground}: var(--surface-accent);
-                ${calendarBaseTokens.calendarSelectedItemColor}: var(--inverse-text-primary);
-                ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-accent);
-                ${calendarBaseTokens.calendarCurrentItemBorderColor}: var(--inverse-outline-solid-secondary);
+                ${calendarBaseTokens.calendarSelectedItemBackground}: ${surfaceAccent};
+                ${calendarBaseTokens.calendarSelectedItemColor}: ${inverseTextPrimary};
+                ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentAccent};
+                ${calendarBaseTokens.calendarCurrentItemBorderColor}: ${inverseOutlineSolidSecondary};
                 ${calendarBaseTokens.calendarCurrentItemBackgroundHover}: transparent;
-                ${calendarBaseTokens.calendarCurrentItemColorHover}: var(--text-primary);
-                ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-accent);
-                ${calendarBaseTokens.calendarActiveItemBackground}: var(--surface-accent);
-                ${calendarBaseTokens.calendarActiveItemColor}: var(--inverse-text-primary);
-                ${calendarBaseTokens.calendarHoveredItemBackground}: var(--surface-transparent-accent);
-                ${calendarBaseTokens.calendarHoveredItemColor}: var(--text-primary);
-                ${calendarBaseTokens.calendarRangeBackground}: var(--surface-transparent-accent);
-                ${calendarBaseTokens.calendarOutlineFocusColor}: var(--surface-accent);
+                ${calendarBaseTokens.calendarCurrentItemColorHover}: ${textPrimary};
+                ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentAccent};
+                ${calendarBaseTokens.calendarActiveItemBackground}: ${surfaceAccent};
+                ${calendarBaseTokens.calendarActiveItemColor}: ${inverseTextPrimary};
+                ${calendarBaseTokens.calendarHoveredItemBackground}: ${surfaceTransparentAccent};
+                ${calendarBaseTokens.calendarHoveredItemColor}: ${textPrimary};
+                ${calendarBaseTokens.calendarRangeBackground}: ${surfaceTransparentAccent};
+                ${calendarBaseTokens.calendarOutlineFocusColor}: ${surfaceAccent};
                 ${calendarBaseTokens.calendarContentPrimaryColor}: var(--surface-primary);
-                ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: var(--text-secondary);
-                ${calendarBaseTokens.calendarContentSecondaryColor}: var(--text-secondary);
-                ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary);
-                ${calendarBaseTokens.calendarDayOfWeekColor}: var(--text-secondary);
-                ${calendarBaseTokens.calendarHeaderArrowColor}: var(--text-accent);
+                ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: ${textSecondary};
+                ${calendarBaseTokens.calendarContentSecondaryColor}: ${textSecondary};
+                ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: ${textSecondary};
+                ${calendarBaseTokens.calendarDayOfWeekColor}: ${textSecondary};
+                ${calendarBaseTokens.calendarHeaderArrowColor}: ${textAccent};
                 ${calendarBaseTokens.calendarDisabledOpacity}: 1;
 
-                ${calendarBaseTokens.iconButtonColor}: var(--text-accent);
-                ${calendarBaseTokens.iconButtonBackgroundColor}: var(--surface-clear);
-                ${calendarBaseTokens.iconButtonColorHover}: var(--text-accent-minor);
-                ${calendarBaseTokens.iconButtonBackgroundColorHover}: var(--surface-clear);
-                ${calendarBaseTokens.iconButtonColorActive}: var(--text-accent-active);
-                ${calendarBaseTokens.iconButtonBackgroundColorActive}: var(--surface-clear);
-                ${calendarBaseTokens.iconButtonFocusColor}: var(--surface-accent);
+                ${calendarBaseTokens.iconButtonColor}: ${textAccent};
+                ${calendarBaseTokens.iconButtonBackgroundColor}: ${surfaceClear};
+                ${calendarBaseTokens.iconButtonColorHover}: ${textAccentMinor};
+                ${calendarBaseTokens.iconButtonBackgroundColorHover}: ${surfaceClear};
+                ${calendarBaseTokens.iconButtonColorActive}: ${textAccentActive};
+                ${calendarBaseTokens.iconButtonBackgroundColorActive}: ${surfaceClear};
+                ${calendarBaseTokens.iconButtonFocusColor}: ${surfaceAccent};
             `
         },
         size: {
@@ -45,46 +46,46 @@ export const config = {
                 ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.5rem 0 0.5rem;
                 ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem;
 
-                ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size);
-                ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height);
-                ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
+                ${calendarBaseTokens.calendarYearFontFamily}: ${bodyS.fontFamily};
+                ${calendarBaseTokens.calendarYearFontSize}: ${bodyS.fontSize};
+                ${calendarBaseTokens.calendarYearFontStyle}: ${bodyS.fontStyle};
+                ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight};
+                ${calendarBaseTokens.calendarYearFontWeight}: ${bodyS.fontWeight};
+                ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight};
 
                 ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem;
                 ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem;
 
-                ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size);
-                ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height);
-                ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
+                ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily};
+                ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyS.fontSize};
+                ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle};
+                ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight};
+                ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight};
+                ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight};
 
                 ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.5rem 0 0.5rem;
                 ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem;
 
-                ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size);
-                ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height);
-                ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
+                ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyS.fontFamily};
+                ${calendarBaseTokens.calendarMonthFontSize}: ${bodyS.fontSize};
+                ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyS.fontStyle};
+                ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight};
+                ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyS.fontWeight};
+                ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight};
 
                 ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0;
                 ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem;
 
-                ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size);
-                ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height);
-                ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
+                ${calendarBaseTokens.calendarDayFontFamily}: ${bodyS.fontFamily};
+                ${calendarBaseTokens.calendarDayFontSize}: ${bodyS.fontSize};
+                ${calendarBaseTokens.calendarDayFontStyle}: ${bodyS.fontStyle};
+                ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight};
+                ${calendarBaseTokens.calendarDayFontWeight}: ${bodyS.fontWeight};
+                ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight};
 
                 ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.125rem;
 
@@ -94,13 +95,13 @@ export const config = {
                 ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem;
                 ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem;
 
-                ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-body-m-bold-font-family);
-                ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-body-m-bold-font-size);
-                ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-body-m-bold-font-style);
-                ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-body-m-bold-letter-spacing);
-                ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-body-m-bold-line-height);
-                ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-body-m-bold-font-weight);
+                ${calendarBaseTokens.calendarHeaderFontFamily}: ${bodyMBold.fontFamily};
+                ${calendarBaseTokens.calendarHeaderFontSize}: ${bodyMBold.fontSize};
+                ${calendarBaseTokens.calendarHeaderFontStyle}: ${bodyMBold.fontStyle};
+                ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${bodyMBold.letterSpacing};
+                ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${bodyMBold.lineHeight};
+                ${calendarBaseTokens.calendarHeaderFontWeight}: ${bodyM.fontWeight};
+                ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${bodyMBold.fontWeight};
 
                 ${calendarBaseTokens.iconButtonHeight}: 2.5rem;
                 ${calendarBaseTokens.iconButtonWidth}: 2.5rem;

package/dist/emotion/es/components/Calendar/CalendarDouble.config.js

@@ -1,3 +1,4 @@
+import { bodyM, bodyMBold, bodyS, bodySBold, inverseOutlineSolidSecondary, inverseTextPrimary, surfaceAccent, surfaceClear, surfaceTransparentAccent, textAccent, textPrimary, textPrimaryHover, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { css, calendarDoubleTokens } from '@salutejs/plasma-new-hope/emotion';
 export const config = {
     defaults: {
@@ -7,34 +8,34 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${calendarDoubleTokens.calendarSelectedItemBackground}: var(--surface-accent);
-                ${calendarDoubleTokens.calendarSelectedItemColor}: var(--inverse-text-primary);
-                ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-accent);
-                ${calendarDoubleTokens.calendarCurrentItemBorderColor}: var(--inverse-outline-solid-secondary);
+                ${calendarDoubleTokens.calendarSelectedItemBackground}: ${surfaceAccent};
+                ${calendarDoubleTokens.calendarSelectedItemColor}: ${inverseTextPrimary};
+                ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentAccent};
+                ${calendarDoubleTokens.calendarCurrentItemBorderColor}: ${inverseOutlineSolidSecondary};
                 ${calendarDoubleTokens.calendarCurrentItemBackgroundHover}: transparent;
-                ${calendarDoubleTokens.calendarCurrentItemColorHover}: var(--text-primary);
-                ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-accent);
-                ${calendarDoubleTokens.calendarActiveItemBackground}: var(--surface-accent);
-                ${calendarDoubleTokens.calendarActiveItemColor}: var(--inverse-text-primary);
-                ${calendarDoubleTokens.calendarHoveredItemBackground}: var(--surface-transparent-accent);
-                ${calendarDoubleTokens.calendarHoveredItemColor}: var(--text-primary);
-                ${calendarDoubleTokens.calendarRangeBackground}: var(--surface-transparent-accent);
-                ${calendarDoubleTokens.calendarOutlineFocusColor}: var(--surface-accent);
+                ${calendarDoubleTokens.calendarCurrentItemColorHover}: ${textPrimary};
+                ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentAccent};
+                ${calendarDoubleTokens.calendarActiveItemBackground}: ${surfaceAccent};
+                ${calendarDoubleTokens.calendarActiveItemColor}: ${inverseTextPrimary};
+                ${calendarDoubleTokens.calendarHoveredItemBackground}: ${surfaceTransparentAccent};
+                ${calendarDoubleTokens.calendarHoveredItemColor}: ${textPrimary};
+                ${calendarDoubleTokens.calendarRangeBackground}: ${surfaceTransparentAccent};
+                ${calendarDoubleTokens.calendarOutlineFocusColor}: ${surfaceAccent};
                 ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--surface-primary);
-                ${calendarDoubleTokens.calendarContentPrimaryDisabledColor}: var(--text-secondary);
-                ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--text-secondary);
-                ${calendarDoubleTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary);
-                ${calendarDoubleTokens.calendarDayOfWeekColor}: var(--text-secondary);
-                ${calendarDoubleTokens.calendarHeaderArrowColor}: var(--text-accent);
+                ${calendarDoubleTokens.calendarContentPrimaryDisabledColor}: ${textSecondary};
+                ${calendarDoubleTokens.calendarContentSecondaryColor}: ${textSecondary};
+                ${calendarDoubleTokens.calendarContentSecondaryDisabledColor}: ${textSecondary};
+                ${calendarDoubleTokens.calendarDayOfWeekColor}: ${textSecondary};
+                ${calendarDoubleTokens.calendarHeaderArrowColor}: ${textAccent};
                 ${calendarDoubleTokens.calendarDisabledOpacity}: 1;
 
-                ${calendarDoubleTokens.iconButtonColor}: var(--text-primary);
-                ${calendarDoubleTokens.iconButtonBackgroundColor}: var(--surface-clear);
-                ${calendarDoubleTokens.iconButtonColorHover}: var(--text-primary-hover);
-                ${calendarDoubleTokens.iconButtonBackgroundColorHover}: var(--surface-clear);
-                ${calendarDoubleTokens.iconButtonColorActive}: var(--text-primary-hover);
-                ${calendarDoubleTokens.iconButtonBackgroundColorActive}: var(--surface-clear);
-                ${calendarDoubleTokens.iconButtonFocusColor}: var(--surface-accent);
+                ${calendarDoubleTokens.iconButtonColor}: ${textPrimary};
+                ${calendarDoubleTokens.iconButtonBackgroundColor}: ${surfaceClear};
+                ${calendarDoubleTokens.iconButtonColorHover}: ${textPrimaryHover};
+                ${calendarDoubleTokens.iconButtonBackgroundColorHover}: ${surfaceClear};
+                ${calendarDoubleTokens.iconButtonColorActive}: ${textPrimaryHover};
+                ${calendarDoubleTokens.iconButtonBackgroundColorActive}: ${surfaceClear};
+                ${calendarDoubleTokens.iconButtonFocusColor}: ${surfaceAccent};
             `
         },
         size: {
@@ -45,45 +46,45 @@ export const config = {
                 ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.5rem 0 0.5rem;
                 ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem;
 
-                ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size);
-                ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height);
-                ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
+                ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyS.fontFamily};
+                ${calendarDoubleTokens.calendarYearFontSize}: ${bodyS.fontSize};
+                ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyS.fontStyle};
+                ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight};
+                ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyS.fontWeight};
+                ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight};
 
                 ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem;
                 ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem;
 
-                ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size);
-                ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height);
-                ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
+                ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily};
+                ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyS.fontSize};
+                ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle};
+                ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight};
+                ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight};
+                ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight};
 
                 ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.5rem 0 0.5rem;
                 ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem;
 
-                ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size);
-                ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height);
-                ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
+                ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyS.fontFamily};
+                ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyS.fontSize};
+                ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyS.fontStyle};
+                ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight};
+                ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyS.fontWeight};
+                ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight};
 
                 ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem;
 
-                ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family);
-                ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size);
-                ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style);
-                ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
-                ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height);
-                ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight);
-                ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
+                ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyS.fontFamily};
+                ${calendarDoubleTokens.calendarDayFontSize}: ${bodyS.fontSize};
+                ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyS.fontStyle};
+                ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing};
+                ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight};
+                ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyS.fontWeight};
+                ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight};
 
                 ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.125rem;
 
@@ -94,13 +95,13 @@ export const config = {
                 ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem;
                 ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem;
 
-                ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-body-m-bold-font-family);
-                ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-body-m-bold-font-size);
-                ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-body-m-bold-font-style);
-                ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-body-m-bold-letter-spacing);
-                ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-body-m-bold-line-height);
-                ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-body-m-font-weight);
-                ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-body-m-bold-font-weight);
+                ${calendarDoubleTokens.calendarHeaderFontFamily}: ${bodyMBold.fontFamily};
+                ${calendarDoubleTokens.calendarHeaderFontSize}: ${bodyMBold.fontSize};
+                ${calendarDoubleTokens.calendarHeaderFontStyle}: ${bodyMBold.fontStyle};
+                ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${bodyMBold.letterSpacing};
+                ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${bodyMBold.lineHeight};
+                ${calendarDoubleTokens.calendarHeaderFontWeight}: ${bodyM.fontWeight};
+                ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${bodyMBold.fontWeight};
 
                 ${calendarDoubleTokens.iconButtonHeight}: 2.5rem;
                 ${calendarDoubleTokens.iconButtonWidth}: 2.5rem;

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

@@ -1,3 +1,4 @@
+import { surfaceSolidCard } from '@salutejs/sdds-themes/tokens/sdds_cs';
 import { css, cardTokens as tokens } from '@salutejs/plasma-new-hope/emotion';
 export const config = {
     defaults: {
@@ -7,7 +8,7 @@ export const config = {
     variations: {
         view: {
             default: css`
-                ${tokens.solidBackground}: var(--surface-solid-card);
+                ${tokens.solidBackground}: ${surfaceSolidCard};
             `
         },
         size: {