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

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "config", {
         return config;
     }
 });
+const _sdds_cs = require("@salutejs/sdds-themes/tokens/sdds_cs");
 const _emotion = require("@salutejs/plasma-new-hope/emotion");
 const config = {
     defaults: {
@@ -18,36 +19,36 @@ const config = {
     variations: {
         view: {
             accent: (0, _emotion.css)`
-                ${_emotion.buttonTokens.buttonColor}: var(--on-dark-text-primary);
-                ${_emotion.buttonTokens.buttonTextColor}: var(--on-dark-text-primary);
-                ${_emotion.buttonTokens.buttonIconColor}: var(--on-dark-text-primary);
-                ${_emotion.buttonTokens.buttonValueColor}: var(--on-light-text-accent-minor);
-                ${_emotion.buttonTokens.buttonBackgroundColor}: var(--surface-accent);
+                ${_emotion.buttonTokens.buttonColor}: ${_sdds_cs.onDarkTextPrimary};
+                ${_emotion.buttonTokens.buttonTextColor}: ${_sdds_cs.onDarkTextPrimary};
+                ${_emotion.buttonTokens.buttonIconColor}: ${_sdds_cs.onDarkTextPrimary};
+                ${_emotion.buttonTokens.buttonValueColor}: ${_sdds_cs.onLightTextAccentMinor};
+                ${_emotion.buttonTokens.buttonBackgroundColor}: ${_sdds_cs.surfaceAccent};
                 ${_emotion.buttonTokens.buttonLoadingBackgroundColor}: var(${_emotion.buttonTokens.buttonBackgroundColor});
-                ${_emotion.buttonTokens.buttonBackgroundColorHover}: var(--surface-accent-hover);
-                ${_emotion.buttonTokens.buttonBackgroundColorActive}: var(--surface-accent-active);
+                ${_emotion.buttonTokens.buttonBackgroundColorHover}: ${_sdds_cs.surfaceAccentHover};
+                ${_emotion.buttonTokens.buttonBackgroundColorActive}: ${_sdds_cs.surfaceAccentActive};
             `,
             secondary: (0, _emotion.css)`
-                ${_emotion.buttonTokens.buttonColor}: var(--text-accent);
-                ${_emotion.buttonTokens.buttonColorHover}: var(--text-accent-minor);
-                ${_emotion.buttonTokens.buttonColorActive}: var(--text-accent-active);
-                ${_emotion.buttonTokens.buttonTextColor}: var(--text-accent);
-                ${_emotion.buttonTokens.buttonIconColor}: var(--text-accent);
-                ${_emotion.buttonTokens.buttonValueColor}: var(--text-secondary);
-                ${_emotion.buttonTokens.buttonBackgroundColor}: var(--surface-solid-secondary);
+                ${_emotion.buttonTokens.buttonColor}: ${_sdds_cs.textAccent};
+                ${_emotion.buttonTokens.buttonColorHover}: ${_sdds_cs.textAccentMinor};
+                ${_emotion.buttonTokens.buttonColorActive}: ${_sdds_cs.textAccentActive};
+                ${_emotion.buttonTokens.buttonTextColor}: ${_sdds_cs.textAccent};
+                ${_emotion.buttonTokens.buttonIconColor}: ${_sdds_cs.textAccent};
+                ${_emotion.buttonTokens.buttonValueColor}: ${_sdds_cs.textSecondary};
+                ${_emotion.buttonTokens.buttonBackgroundColor}: ${_sdds_cs.surfaceSolidSecondary};
                 ${_emotion.buttonTokens.buttonLoadingBackgroundColor}: var(${_emotion.buttonTokens.buttonBackgroundColor});
-                ${_emotion.buttonTokens.buttonBackgroundColorHover}: var(--surface-solid-secondary-hover);
-                ${_emotion.buttonTokens.buttonBackgroundColorActive}: var(--surface-solid-secondary-active);
+                ${_emotion.buttonTokens.buttonBackgroundColorHover}: ${_sdds_cs.surfaceSolidSecondaryHover};
+                ${_emotion.buttonTokens.buttonBackgroundColorActive}: ${_sdds_cs.surfaceSolidSecondaryActive};
             `,
             clear: (0, _emotion.css)`
-                ${_emotion.buttonTokens.buttonColor}: var(--text-accent);
-                ${_emotion.buttonTokens.buttonTextColor}: var(--text-accent);
-                ${_emotion.buttonTokens.buttonIconColor}: var(--text-accent);
-                ${_emotion.buttonTokens.buttonValueColor}: var(--text-accent-minor);
-                ${_emotion.buttonTokens.buttonBackgroundColor}: var(--surface-clear);
-                ${_emotion.buttonTokens.buttonLoadingBackgroundColor}: var(--surface-transparent-accent);
-                ${_emotion.buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-accent);
-                ${_emotion.buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-accent-active);
+                ${_emotion.buttonTokens.buttonColor}: ${_sdds_cs.textAccent};
+                ${_emotion.buttonTokens.buttonTextColor}: ${_sdds_cs.textAccent};
+                ${_emotion.buttonTokens.buttonIconColor}: ${_sdds_cs.textAccent};
+                ${_emotion.buttonTokens.buttonValueColor}: ${_sdds_cs.textAccentMinor};
+                ${_emotion.buttonTokens.buttonBackgroundColor}: ${_sdds_cs.surfaceClear};
+                ${_emotion.buttonTokens.buttonLoadingBackgroundColor}: ${_sdds_cs.surfaceTransparentAccent};
+                ${_emotion.buttonTokens.buttonBackgroundColorHover}: ${_sdds_cs.surfaceTransparentAccent};
+                ${_emotion.buttonTokens.buttonBackgroundColorActive}: ${_sdds_cs.surfaceTransparentAccentActive};
             `
         },
         size: {
@@ -56,12 +57,12 @@ const config = {
                 ${_emotion.buttonTokens.buttonWidth}: 11.25rem;
                 ${_emotion.buttonTokens.buttonPadding}: 1rem;
                 ${_emotion.buttonTokens.buttonRadius}: 0.75rem;
-                ${_emotion.buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_emotion.buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size);
-                ${_emotion.buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_emotion.buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
-                ${_emotion.buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_emotion.buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_emotion.buttonTokens.buttonFontFamily}: ${_sdds_cs.bodyM.fontFamily};
+                ${_emotion.buttonTokens.buttonFontSize}: ${_sdds_cs.bodyM.fontSize};
+                ${_emotion.buttonTokens.buttonFontStyle}: ${_sdds_cs.bodyM.fontStyle};
+                ${_emotion.buttonTokens.buttonFontWeight}: ${_sdds_cs.bodyMBold.fontWeight};
+                ${_emotion.buttonTokens.buttonLetterSpacing}: ${_sdds_cs.bodyM.letterSpacing};
+                ${_emotion.buttonTokens.buttonLineHeight}: ${_sdds_cs.bodyM.lineHeight};
 
                 ${_emotion.buttonTokens.buttonSpinnerSize}: 1.375rem;
                 ${_emotion.buttonTokens.buttonSpinnerColor}: inherit;
@@ -75,12 +76,12 @@ const config = {
                 ${_emotion.buttonTokens.buttonWidth}: 11.25rem;
                 ${_emotion.buttonTokens.buttonPadding}: 1rem;
                 ${_emotion.buttonTokens.buttonRadius}: 0.75rem;
-                ${_emotion.buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_emotion.buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size);
-                ${_emotion.buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_emotion.buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
-                ${_emotion.buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_emotion.buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_emotion.buttonTokens.buttonFontFamily}: ${_sdds_cs.bodyM.fontFamily};
+                ${_emotion.buttonTokens.buttonFontSize}: ${_sdds_cs.bodyM.fontSize};
+                ${_emotion.buttonTokens.buttonFontStyle}: ${_sdds_cs.bodyM.fontStyle};
+                ${_emotion.buttonTokens.buttonFontWeight}: ${_sdds_cs.bodyMBold.fontWeight};
+                ${_emotion.buttonTokens.buttonLetterSpacing}: ${_sdds_cs.bodyM.letterSpacing};
+                ${_emotion.buttonTokens.buttonLineHeight}: ${_sdds_cs.bodyM.lineHeight};
 
                 ${_emotion.buttonTokens.buttonSpinnerSize}: 1.375rem;
                 ${_emotion.buttonTokens.buttonSpinnerColor}: inherit;
@@ -92,12 +93,12 @@ const config = {
             sr: (0, _emotion.css)`
                 ${_emotion.buttonTokens.buttonHeight}: 2.5rem;
                 ${_emotion.buttonTokens.buttonWidth}: 11.25rem;
-                ${_emotion.buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family);
-                ${_emotion.buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size);
-                ${_emotion.buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style);
-                ${_emotion.buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
-                ${_emotion.buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
-                ${_emotion.buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height);
+                ${_emotion.buttonTokens.buttonFontFamily}: ${_sdds_cs.bodyM.fontFamily};
+                ${_emotion.buttonTokens.buttonFontSize}: ${_sdds_cs.bodyM.fontSize};
+                ${_emotion.buttonTokens.buttonFontStyle}: ${_sdds_cs.bodyM.fontStyle};
+                ${_emotion.buttonTokens.buttonFontWeight}: ${_sdds_cs.bodyMBold.fontWeight};
+                ${_emotion.buttonTokens.buttonLetterSpacing}: ${_sdds_cs.bodyM.letterSpacing};
+                ${_emotion.buttonTokens.buttonLineHeight}: ${_sdds_cs.bodyM.lineHeight};
 
                 ${_emotion.buttonTokens.buttonSpinnerSize}: 1.375rem;
                 ${_emotion.buttonTokens.buttonSpinnerColor}: inherit;
@@ -111,7 +112,7 @@ const config = {
         },
         focused: {
             true: (0, _emotion.css)`
-                ${_emotion.buttonTokens.buttonFocusColor}: var(--surface-accent);
+                ${_emotion.buttonTokens.buttonFocusColor}: ${_sdds_cs.surfaceAccent};
             `
         },
         stretching: {

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

@@ -61,11 +61,11 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 const mergedConfig = (0, _emotion.mergeConfig)(_emotion.buttonConfig, _Buttonconfig.config);
 const ButtonComponent = (0, _emotion.component)(mergedConfig);
-// INFO: Данное поведение запрошено продуктом/командой `sdds-cs`
+// INFO: Данное поведение запрошено продуктом
 const StyledButton = /*#__PURE__*/ (0, _styled.default)(ButtonComponent, {
-    target: "e19yzswk0",
+    target: "e1owdhnp0",
     label: "StyledButton"
-})("&&.", String(_emotion.buttonClasses.buttonLoading), "{color:var(", _emotion.buttonTokens.buttonColorActive, ",var(", _emotion.buttonTokens.buttonColor, "));background:var(", _emotion.buttonTokens.buttonBackgroundColorActive, ",var(", _emotion.buttonTokens.buttonBackgroundColor, "));pointer-events:none;}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvQnV0dG9uL0J1dHRvbi50c3giLCJzb3VyY2VzIjpbInNyYy9jb21wb25lbnRzL0J1dHRvbi9CdXR0b24udHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBDb21wb25lbnRQcm9wcywgdXNlQ2FsbGJhY2ssIE1vdXNlRXZlbnQsIGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBidXR0b25Db25maWcsIGNvbXBvbmVudCwgbWVyZ2VDb25maWcsIGJ1dHRvbkNsYXNzZXMsIGJ1dHRvblRva2VucyB9IGZyb20gJ0BzYWx1dGVqcy9wbGFzbWEtbmV3LWhvcGUvZW1vdGlvbic7XG5pbXBvcnQgeyBtYWtlUG9seW1vcnBoaWMgfSBmcm9tICdAc2FsdXRlanMvcGxhc21hLW5ldy1ob3BlJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgY29uZmlnIH0gZnJvbSAnLi9CdXR0b24uY29uZmlnJztcblxuY29uc3QgbWVyZ2VkQ29uZmlnID0gbWVyZ2VDb25maWcoYnV0dG9uQ29uZmlnLCBjb25maWcpO1xuY29uc3QgQnV0dG9uQ29tcG9uZW50ID0gY29tcG9uZW50KG1lcmdlZENvbmZpZyk7XG5cbmV4cG9ydCB0eXBlIEJ1dHRvblByb3BzID0gQ29tcG9uZW50UHJvcHM8dHlwZW9mIEJ1dHRvbkNvbXBvbmVudD47XG5cbi8vIElORk86INCU0LDQvdC90L7QtSDQv9C+0LLQtdC00LXQvdC40LUg0LfQsNC/0YDQvtGI0LXQvdC+INC/0YDQvtC00YPQutGC0L7QvC/QutC+0LzQsNC90LTQvtC5IGBzZGRzLWNzYFxuY29uc3QgU3R5bGVkQnV0dG9uID0gc3R5bGVkKEJ1dHRvbkNvbXBvbmVudClgXG4gICAgJiYuJHtTdHJpbmcoYnV0dG9uQ2xhc3Nlcy5idXR0b25Mb2FkaW5nKX0ge1xuICAgICAgICBjb2xvcjogdmFyKCR7YnV0dG9uVG9rZW5zLmJ1dHRvbkNvbG9yQWN0aXZlfSwgdmFyKCR7YnV0dG9uVG9rZW5zLmJ1dHRvbkNvbG9yfSkpO1xuICAgICAgICBiYWNrZ3JvdW5kOiB2YXIoJHtidXR0b25Ub2tlbnMuYnV0dG9uQmFja2dyb3VuZENvbG9yQWN0aXZlfSwgdmFyKCR7YnV0dG9uVG9rZW5zLmJ1dHRvbkJhY2tncm91bmRDb2xvcn0pKTtcblxuICAgICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgICB9XG5gO1xuXG4vKipcbiAqINCa0L3QvtC/0LrQsC5cbiAqL1xuZXhwb3J0IGNvbnN0IEJ1dHRvbiA9IG1ha2VQb2x5bW9ycGhpYyhcbiAgICBmb3J3YXJkUmVmPE9taXQ8SFRNTEJ1dHRvbkVsZW1lbnQsICd2YWx1ZSc+LCBCdXR0b25Qcm9wcz4oKHsgb25DbGljaywgaXNMb2FkaW5nLCB2YWx1ZSwgLi4ucHJvcHMgfSwgcmVmKSA9PiB7XG4gICAgICAgIGNvbnN0IGhhbmRsZUNsaWNrID0gdXNlQ2FsbGJhY2soXG4gICAgICAgICAgICAoZXZlbnQ6IE1vdXNlRXZlbnQ8SFRNTEJ1dHRvbkVsZW1lbnQ+KSA9PiB7XG4gICAgICAgICAgICAgICAgaWYgKCFpc0xvYWRpbmcpIHtcbiAgICAgICAgICAgICAgICAgICAgb25DbGljaz8uKGV2ZW50KTtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9LFxuICAgICAgICAgICAgW2lzTG9hZGluZywgb25DbGlja10sXG4gICAgICAgICk7XG5cbiAgICAgICAgLy8gQHRzLWlnbm9yZVxuICAgICAgICByZXR1cm4gPFN0eWxlZEJ1dHRvbiB2YWx1ZT17dmFsdWV9IHJlZj17cmVmfSBvbkNsaWNrPXtoYW5kbGVDbGlja30gaXNMb2FkaW5nPXtpc0xvYWRpbmd9IHsuLi5wcm9wc30gLz47XG4gICAgfSksXG4gICAgJ2J1dHRvbicsXG4pO1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWFxQiJ9 */");
+})("&&.", String(_emotion.buttonClasses.buttonLoading), "{color:var(", _emotion.buttonTokens.buttonColorActive, ",var(", _emotion.buttonTokens.buttonColor, "));background:var(", _emotion.buttonTokens.buttonBackgroundColorActive, ",var(", _emotion.buttonTokens.buttonBackgroundColor, "));pointer-events:none;}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjL2NvbXBvbmVudHMvQnV0dG9uL0J1dHRvbi50c3giLCJzb3VyY2VzIjpbInNyYy9jb21wb25lbnRzL0J1dHRvbi9CdXR0b24udHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBDb21wb25lbnRQcm9wcywgdXNlQ2FsbGJhY2ssIE1vdXNlRXZlbnQsIGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBidXR0b25Db25maWcsIGNvbXBvbmVudCwgbWVyZ2VDb25maWcsIGJ1dHRvbkNsYXNzZXMsIGJ1dHRvblRva2VucyB9IGZyb20gJ0BzYWx1dGVqcy9wbGFzbWEtbmV3LWhvcGUvZW1vdGlvbic7XG5pbXBvcnQgeyBtYWtlUG9seW1vcnBoaWMgfSBmcm9tICdAc2FsdXRlanMvcGxhc21hLW5ldy1ob3BlJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuaW1wb3J0IHsgY29uZmlnIH0gZnJvbSAnLi9CdXR0b24uY29uZmlnJztcblxuY29uc3QgbWVyZ2VkQ29uZmlnID0gbWVyZ2VDb25maWcoYnV0dG9uQ29uZmlnLCBjb25maWcpO1xuY29uc3QgQnV0dG9uQ29tcG9uZW50ID0gY29tcG9uZW50KG1lcmdlZENvbmZpZyk7XG5cbmV4cG9ydCB0eXBlIEJ1dHRvblByb3BzID0gQ29tcG9uZW50UHJvcHM8dHlwZW9mIEJ1dHRvbkNvbXBvbmVudD47XG5cbi8vIElORk86INCU0LDQvdC90L7QtSDQv9C+0LLQtdC00LXQvdC40LUg0LfQsNC/0YDQvtGI0LXQvdC+INC/0YDQvtC00YPQutGC0L7QvFxuY29uc3QgU3R5bGVkQnV0dG9uID0gc3R5bGVkKEJ1dHRvbkNvbXBvbmVudClgXG4gICAgJiYuJHtTdHJpbmcoYnV0dG9uQ2xhc3Nlcy5idXR0b25Mb2FkaW5nKX0ge1xuICAgICAgICBjb2xvcjogdmFyKCR7YnV0dG9uVG9rZW5zLmJ1dHRvbkNvbG9yQWN0aXZlfSwgdmFyKCR7YnV0dG9uVG9rZW5zLmJ1dHRvbkNvbG9yfSkpO1xuICAgICAgICBiYWNrZ3JvdW5kOiB2YXIoJHtidXR0b25Ub2tlbnMuYnV0dG9uQmFja2dyb3VuZENvbG9yQWN0aXZlfSwgdmFyKCR7YnV0dG9uVG9rZW5zLmJ1dHRvbkJhY2tncm91bmRDb2xvcn0pKTtcblxuICAgICAgICBwb2ludGVyLWV2ZW50czogbm9uZTtcbiAgICB9XG5gO1xuXG4vKipcbiAqINCa0L3QvtC/0LrQsC5cbiAqL1xuZXhwb3J0IGNvbnN0IEJ1dHRvbiA9IG1ha2VQb2x5bW9ycGhpYyhcbiAgICBmb3J3YXJkUmVmPE9taXQ8SFRNTEJ1dHRvbkVsZW1lbnQsICd2YWx1ZSc+LCBCdXR0b25Qcm9wcz4oKHsgb25DbGljaywgaXNMb2FkaW5nLCB2YWx1ZSwgLi4ucHJvcHMgfSwgcmVmKSA9PiB7XG4gICAgICAgIGNvbnN0IGhhbmRsZUNsaWNrID0gdXNlQ2FsbGJhY2soXG4gICAgICAgICAgICAoZXZlbnQ6IE1vdXNlRXZlbnQ8SFRNTEJ1dHRvbkVsZW1lbnQ+KSA9PiB7XG4gICAgICAgICAgICAgICAgaWYgKCFpc0xvYWRpbmcpIHtcbiAgICAgICAgICAgICAgICAgICAgb25DbGljaz8uKGV2ZW50KTtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9LFxuICAgICAgICAgICAgW2lzTG9hZGluZywgb25DbGlja10sXG4gICAgICAgICk7XG5cbiAgICAgICAgLy8gQHRzLWlnbm9yZVxuICAgICAgICByZXR1cm4gPFN0eWxlZEJ1dHRvbiB2YWx1ZT17dmFsdWV9IHJlZj17cmVmfSBvbkNsaWNrPXtoYW5kbGVDbGlja30gaXNMb2FkaW5nPXtpc0xvYWRpbmd9IHsuLi5wcm9wc30gLz47XG4gICAgfSksXG4gICAgJ2J1dHRvbicsXG4pO1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWFxQiJ9 */");
 const Button = (0, _plasmanewhope.makePolymorphic)(/*#__PURE__*/ (0, _react.forwardRef)(({ onClick, isLoading, value, ...props }, ref)=>{
     const handleClick = (0, _react.useCallback)((event)=>{
         if (!isLoading) {

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

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

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

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