@skbkontur/side-menu 0.9.5 → 0.10.0

package/src/internal/ItemContent/Caption.styles.d.ts

@@ -1,15 +1,18 @@
+import { SideMenuTheme } from '../../../lib/theming/ThemeTypes';
+export declare const sideMenuMultilineCaptionPaddingTop = "4px";
+export declare const sideMenuCaptionMarginRight = "8px";
 export declare const jsStyles: {
     root(): string;
     rootBeingTransitioned(): string;
     rootMultiline(): string;
-    caption(): string;
-    captionForTouchScreens(): string;
-    captionSubItem(): string;
-    captionSubItemForTouchScreens(): string;
+    caption(t: SideMenuTheme): string;
+    captionForTouchScreens(t: SideMenuTheme): string;
+    captionSubItem(t: SideMenuTheme): string;
+    captionSubItemForTouchScreens(t: SideMenuTheme): string;
     captionSubItemSeparatedMenuTopLevel(): string;
     captionNestedItemSeparatedMenu(): string;
     captionWithoutItemIcon(): string;
     captionSubItemWithoutColumnIcons(): string;
-    captionLarge(): string;
-    captionInBackButton(): string;
+    captionLarge(t: SideMenuTheme): string;
+    captionInBackButton(t: SideMenuTheme): string;
 };

package/src/internal/ItemContent/Caption.styles.js

@@ -1,5 +1,8 @@
 import { __makeTemplateObject } from "tslib";
-import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { memoizeStyle } from '../../../lib/theming/ThemeHelpers';
+export var sideMenuMultilineCaptionPaddingTop = '4px';
+export var sideMenuCaptionMarginRight = '8px';
 var styles = {
     root: function () {
         return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n      flex-direction: column;\n      max-width: 100%;\n    "], ["\n      display: flex;\n      flex-direction: column;\n      max-width: 100%;\n    "])));
@@ -8,19 +11,19 @@ var styles = {
         return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      white-space: nowrap;\n      overflow-x: hidden;\n      text-overflow: ellipsis;\n    "], ["\n      white-space: nowrap;\n      overflow-x: hidden;\n      text-overflow: ellipsis;\n    "])));
     },
     rootMultiline: function () {
-        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      padding-top: 4px;\n      align-self: flex-start;\n    "], ["\n      padding-top: 4px;\n      align-self: flex-start;\n    "])));
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      padding-top: ", ";\n      align-self: flex-start;\n    "], ["\n      padding-top: ", ";\n      align-self: flex-start;\n    "])), sideMenuMultilineCaptionPaddingTop);
     },
-    caption: function () {
-        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      font-size: 14px;\n      line-height: 20px;\n      margin: 0 8px 0 0;\n    "], ["\n      font-size: 14px;\n      line-height: 20px;\n      margin: 0 8px 0 0;\n    "])));
+    caption: function (t) {
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n      margin: 0 ", " 0 0;\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n      margin: 0 ", " 0 0;\n    "])), t.sideMenuCaptionFontSize, t.sideMenuCaptionLineHeight, sideMenuCaptionMarginRight);
     },
-    captionForTouchScreens: function () {
-        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      font-size: 18px;\n      line-height: 24px;\n    "], ["\n      font-size: 18px;\n      line-height: 24px;\n    "])));
+    captionForTouchScreens: function (t) {
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.sideMenuCaptionFontSizeForTouchScreens, t.sideMenuCaptionLineHeightForTouchScreens);
     },
-    captionSubItem: function () {
-        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      margin-left: 4px;\n    "], ["\n      margin-left: 4px;\n    "])));
+    captionSubItem: function (t) {
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      margin-left: ", ";\n    "], ["\n      margin-left: ", ";\n    "])), t.sideMenuCaptionSubItemMarginLeft);
     },
-    captionSubItemForTouchScreens: function () {
-        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      font-size: 16px;\n      line-height: 22px;\n    "], ["\n      font-size: 16px;\n      line-height: 22px;\n    "])));
+    captionSubItemForTouchScreens: function (t) {
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.sideMenuCaptionSubItemFontSizeForTouchScreens, t.sideMenuCaptionSubItemLineHeightForTouchScreens);
     },
     captionSubItemSeparatedMenuTopLevel: function () {
         return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      margin: 0 8px;\n    "], ["\n      margin: 0 8px;\n    "])));
@@ -34,11 +37,11 @@ var styles = {
     captionSubItemWithoutColumnIcons: function () {
         return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      margin-left: 8px;\n    "], ["\n      margin-left: 8px;\n    "])));
     },
-    captionLarge: function () {
-        return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      font-size: 16px !important;\n      line-height: 22px !important;\n    "], ["\n      font-size: 16px !important;\n      line-height: 22px !important;\n    "])));
+    captionLarge: function (t) {
+        return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      font-size: ", " !important;\n      line-height: ", " !important;\n    "], ["\n      font-size: ", " !important;\n      line-height: ", " !important;\n    "])), t.sideMenuCaptionLargeFontSize, t.sideMenuCaptionLargeLineHeight);
     },
-    captionInBackButton: function () {
-        return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      font-weight: 700;\n      font-size: 20px;\n      line-height: 28px;\n      padding-top: 5px;\n      padding-bottom: 5px;\n    "], ["\n      font-weight: 700;\n      font-size: 20px;\n      line-height: 28px;\n      padding-top: 5px;\n      padding-bottom: 5px;\n    "])));
+    captionInBackButton: function (t) {
+        return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      font-weight: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "], ["\n      font-weight: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "])), t.sideMenuBackButtonCaptionFontWeight, t.sideMenuBackButtonCaptionFontSize, t.sideMenuBackButtonCaptionLineHeight, t.sideMenuBackButtonCaptionPaddingY, t.sideMenuBackButtonCaptionPaddingY);
     },
 };
 export var jsStyles = memoizeStyle(styles);

package/src/internal/ItemContent/Icon.js

@@ -1,25 +1,35 @@
 import React, { useContext } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
 import { jsStyles } from './Icon.styles';
 import { SideMenuContext } from '../../SideMenuContext';
-import { getIconSize } from '../../../utils/scripts';
+import { getSideMenuTheme } from '../../../lib/theming/ThemeHelpers';
+var getIconSize = function (theme, _isSubMenu, _isBackButton) {
+    if (!_isSubMenu) {
+        return parseInt(theme.sideMenuIconSize);
+    }
+    if (!_isBackButton) {
+        return parseInt(theme.sideMenuIconSubItemSize);
+    }
+};
 export var Icon = function (_a) {
     var _b;
     var icon = _a.icon, _isSubMenu = _a._isSubMenu, isMultiline = _a.isMultiline, _c = _a._isBackButton, _isBackButton = _c === void 0 ? false : _c;
     var context = useContext(SideMenuContext);
     var isSeparatedMenu = context.isSeparatedMenu, size = context.size;
+    var theme = getSideMenuTheme(useContext(ThemeContext));
     return React.cloneElement(icon, {
-        size: getIconSize(_isSubMenu, _isBackButton),
-        color: _isSubMenu ? '#858585' : undefined,
+        size: getIconSize(theme, _isSubMenu, _isBackButton),
+        color: _isSubMenu ? theme.sideMenuIconSubItemColor : undefined,
         disableCompensation: !_isBackButton,
         className: cx((_b = {},
-            _b[jsStyles.root()] = true,
+            _b[jsStyles.root(theme)] = true,
             _b[jsStyles.rootMultiline()] = isMultiline && (!context.isMinimized || _isSubMenu),
-            _b[jsStyles.rootLarge()] = size === 'large',
-            _b[jsStyles.rootSubItem()] = _isSubMenu,
-            _b[jsStyles.rootSubItemSeparatedMenu()] = isSeparatedMenu && _isSubMenu,
-            _b[jsStyles.rootSubItemLarge()] = _isSubMenu && size === 'large',
-            _b[jsStyles.rootBackButton()] = _isBackButton,
+            _b[jsStyles.rootLarge(theme)] = size === 'large',
+            _b[jsStyles.rootSubItem(theme)] = _isSubMenu,
+            _b[jsStyles.rootSubItemSeparatedMenu(theme)] = isSeparatedMenu && _isSubMenu,
+            _b[jsStyles.rootSubItemLarge(theme)] = _isSubMenu && size === 'large',
+            _b[jsStyles.rootBackButton(theme)] = _isBackButton,
             _b)),
     });
 };

package/src/internal/ItemContent/Icon.styles.d.ts

@@ -1,9 +1,10 @@
+import { SideMenuTheme } from '../../../lib/theming/ThemeTypes';
 export declare const jsStyles: {
-    root(): string;
+    root(t: SideMenuTheme): string;
     rootMultiline(): string;
-    rootLarge(): string;
-    rootSubItemLarge(): string;
-    rootSubItem(): string;
-    rootSubItemSeparatedMenu(): string;
-    rootBackButton(): string;
+    rootLarge(t: SideMenuTheme): string;
+    rootSubItemLarge(t: SideMenuTheme): string;
+    rootSubItem(t: SideMenuTheme): string;
+    rootSubItemSeparatedMenu(t: SideMenuTheme): string;
+    rootBackButton(t: SideMenuTheme): string;
 };

package/src/internal/ItemContent/Icon.styles.js

@@ -1,26 +1,27 @@
 import { __makeTemplateObject } from "tslib";
-import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { memoizeStyle } from '../../../lib/theming/ThemeHelpers';
 var styles = {
-    root: function () {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      padding: 0 8px;\n      min-height: 32px;\n      line-height: 20px;\n      flex-shrink: 0;\n      box-sizing: content-box;\n    "], ["\n      display: flex;\n      align-items: center;\n      padding: 0 8px;\n      min-height: 32px;\n      line-height: 20px;\n      flex-shrink: 0;\n      box-sizing: content-box;\n    "])));
+    root: function (t) {
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      padding: ", " ", ";\n      min-height: ", ";\n      line-height: ", ";\n      flex-shrink: 0;\n      box-sizing: content-box;\n    "], ["\n      display: flex;\n      align-items: center;\n      padding: ", " ", ";\n      min-height: ", ";\n      line-height: ", ";\n      flex-shrink: 0;\n      box-sizing: content-box;\n    "])), t.sideMenuIconPaddingY, t.sideMenuIconPaddingX, t.sideMenuIconMinHeight, t.sideMenuIconLineHeight);
     },
     rootMultiline: function () {
         return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      align-self: flex-start;\n      align-items: flex-start;\n    "], ["\n      align-self: flex-start;\n      align-items: flex-start;\n    "])));
     },
-    rootLarge: function () {
-        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      min-height: 30px;\n      line-height: 22px;\n    "], ["\n      min-height: 30px;\n      line-height: 22px;\n    "])));
+    rootLarge: function (t) {
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      min-height: ", ";\n      line-height: ", ";\n    "], ["\n      min-height: ", ";\n      line-height: ", ";\n    "])), t.sideMenuIconLargeMinHeight, t.sideMenuIconLargeLineHeight);
     },
-    rootSubItemLarge: function () {
-        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      min-height: 22px;\n    "], ["\n      min-height: 22px;\n    "])));
+    rootSubItemLarge: function (t) {
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      min-height: ", ";\n    "], ["\n      min-height: ", ";\n    "])), t.sideMenuIconLargeSubItemMinHeight);
     },
-    rootSubItem: function () {
-        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      padding-left: 20px;\n      padding-right: 0;\n      min-height: 20px;\n      line-height: 16px;\n    "], ["\n      padding-left: 20px;\n      padding-right: 0;\n      min-height: 20px;\n      line-height: 16px;\n    "])));
+    rootSubItem: function (t) {
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      padding-left: ", ";\n      padding-right: ", ";\n      min-height: ", ";\n      line-height: ", ";\n    "], ["\n      padding-left: ", ";\n      padding-right: ", ";\n      min-height: ", ";\n      line-height: ", ";\n    "])), t.sideMenuIconSubItemPaddingLeft, t.sideMenuIconSubItemPaddingRight, t.sideMenuIconSubItemMinHeight, t.sideMenuIconSubItemLineHeight);
     },
-    rootSubItemSeparatedMenu: function () {
-        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      padding-left: 4px;\n    "], ["\n      padding-left: 4px;\n    "])));
+    rootSubItemSeparatedMenu: function (t) {
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      padding-left: ", ";\n    "], ["\n      padding-left: ", ";\n    "])), t.sideMenuIconWithSeparatedSubMenuSubItemPaddingLeft);
     },
-    rootBackButton: function () {
-        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding-left: 10px;\n      padding-right: 6px;\n    "], ["\n      padding-left: 10px;\n      padding-right: 6px;\n    "])));
+    rootBackButton: function (t) {
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding-left: ", ";\n      padding-right: ", ";\n    "], ["\n      padding-left: ", ";\n      padding-right: ", ";\n    "])), t.sideMenuBackButtonIconPaddingLeft, t.sideMenuBackButtonIconPaddingRight);
     },
 };
 export var jsStyles = memoizeStyle(styles);

package/src/internal/ItemContent/ItemContent.js

@@ -8,6 +8,13 @@ import { Icon } from './Icon';
 import { Caption } from './Caption';
 import { Marker } from './Marker';
 import { Avatar } from './Avatar';
+import { getSideMenuTheme } from '../../../lib/theming/ThemeHelpers';
+import { ThemeContext } from '@skbkontur/react-ui';
+import { sideMenuMultilineCaptionPaddingTop } from './Caption.styles';
+var getItemContentHeight = function (theme, linesNumber, size) {
+    var lineHeight = size === 'large' ? parseInt(theme.sideMenuLargeLineHeight) : parseInt(theme.sideMenuLineHeight);
+    return linesNumber * lineHeight + parseInt(sideMenuMultilineCaptionPaddingTop);
+};
 /**
  * Контент для SideMenuItem или SideMenuLink
  */
@@ -15,40 +22,57 @@ var ItemContent = forwardRef(function (_a, ref) {
     var _b, _c;
     var _isSubMenu = _a._isSubMenu, icon = _a.icon, _isNestedSubMenu = _a._isNestedSubMenu, caption = _a.caption, subCaption = _a.subCaption, marker = _a.marker, _avatar = _a._avatar, _isBackButton = _a._isBackButton;
     var context = useContext(SideMenuContext);
+    var size = context.size, isTouchScreen = context.isTouchScreen;
     var textRef = useRef(null);
     var _d = useState(1), linesNumber = _d[0], setLinesNumber = _d[1];
     var _e = useState(false), isMultilineSubItem = _e[0], setMultilineSubItem = _e[1];
     var isMultiline = (!_isSubMenu && linesNumber > 1) || (!!_isSubMenu && isMultilineSubItem) || !!subCaption;
+    var theme = getSideMenuTheme(useContext(ThemeContext));
     useEffect(function () {
         if (!_isBackButton && !_isSubMenu) {
-            useNumberOfTextLinesInItem(textRef, setLinesNumber, caption, marker, context.size);
+            useNumberOfTextLinesInItem({
+                textRef: textRef,
+                setLinesNumber: setLinesNumber,
+                theme: theme,
+                caption: caption,
+                marker: marker,
+                size: size,
+                isTouchScreen: isTouchScreen,
+            });
         }
         if (!_isBackButton && _isSubMenu) {
-            useNumberOfTextLinesInSubItem(textRef, setMultilineSubItem, context.size);
+            useNumberOfTextLinesInSubItem(textRef, setMultilineSubItem, size, theme);
         }
     }, []);
     useEffect(function () {
         if (!_isBackButton) {
-            useNumberOfTextLinesInItem(textRef, setLinesNumber, caption, marker, context.size);
+            useNumberOfTextLinesInItem({
+                textRef: textRef,
+                setLinesNumber: setLinesNumber,
+                theme: theme,
+                caption: caption,
+                marker: marker,
+                size: size,
+                isTouchScreen: isTouchScreen,
+            });
         }
     }, [textRef.current, context.isBeingTransitioned]);
     var hasShortcutImage = !!icon || !!_avatar;
     var isSeparatedSubMenuInNarrowDesktopWithoutOverlay = _isSubMenu && context.separatedMenuWithoutOverlay && context.isNarrowDesktop;
     return (React.createElement("div", { className: cx((_b = {},
-            _b[jsStyles.root()] = true,
-            _b[jsStyles.subItemRoot()] = _isSubMenu,
-            _b[jsStyles.largeRoot()] = context.size === 'large',
-            _b[jsStyles.subItemLargeRoot()] = context.size === 'large' && _isSubMenu,
-            _b[jsStyles.largeMultilineRoot()] = isMultiline && context.size === 'large',
-            _b[jsStyles.rootForTouchScreens()] = context.isTouchScreen,
-            _b[jsStyles.subItemRootForTouchScreens()] = context.isTouchScreen && _isSubMenu,
+            _b[jsStyles.root(theme)] = true,
+            _b[jsStyles.subItemRoot(theme)] = _isSubMenu,
+            _b[jsStyles.largeRoot(theme)] = size === 'large',
+            _b[jsStyles.subItemLargeRoot(theme)] = size === 'large' && _isSubMenu,
+            _b[jsStyles.largeMultilineRoot(theme)] = isMultiline && size === 'large',
+            _b[jsStyles.rootForTouchScreens(theme)] = isTouchScreen,
+            _b[jsStyles.subItemRootForTouchScreens(theme)] = isTouchScreen && _isSubMenu,
             _b)), ref: ref },
         icon && React.createElement(Icon, { icon: icon, _isSubMenu: _isSubMenu, isMultiline: isMultiline, _isBackButton: _isBackButton }),
         _avatar && React.createElement(Avatar, { _avatar: _avatar }),
         (!context.isMinimized || (context.isMinimized && _isSubMenu)) && (React.createElement("div", { className: cx((_c = {},
                 _c[jsStyles.textAndMarkerWrapper()] = true,
-                _c[customStyles.textAndMarkerWrapperMultiline(linesNumber)] = isMultiline && !_isSubMenu,
-                _c[customStyles.largeTextAndMarkerWrapperMultiline(linesNumber)] = isMultiline && context.size === 'large' && !_isSubMenu,
+                _c[customStyles.textAndMarkerWrapperMultiline(getItemContentHeight(theme, linesNumber, size))] = isMultiline && !_isSubMenu,
                 _c)) },
             React.createElement(Caption, { _isSubMenu: _isSubMenu, _isNestedSubMenu: _isNestedSubMenu, hasShortcutImage: hasShortcutImage, isMultiline: isMultiline, caption: caption, subCaption: subCaption, _isBackButton: _isBackButton, ref: textRef }),
             marker && (!context.isMinimized || isSeparatedSubMenuInNarrowDesktopWithoutOverlay) && (React.createElement(Marker, { isMultiline: isMultiline, marker: marker }))))));

package/src/internal/ItemContent/ItemContent.styles.d.ts

@@ -1,14 +1,14 @@
+import { SideMenuTheme } from '../../../lib/theming/ThemeTypes';
 export declare const customStyles: {
-    textAndMarkerWrapperMultiline(linesNumber: number): string;
-    largeTextAndMarkerWrapperMultiline(linesNumber: number): string;
+    textAndMarkerWrapperMultiline(height: number): string;
 };
 export declare const jsStyles: {
-    root(): string;
-    largeRoot(): string;
-    subItemLargeRoot(): string;
-    largeMultilineRoot(): string;
-    rootForTouchScreens(): string;
-    subItemRootForTouchScreens(): string;
-    subItemRoot(): string;
+    root(t: SideMenuTheme): string;
+    largeRoot(t: SideMenuTheme): string;
+    subItemLargeRoot(t: SideMenuTheme): string;
+    largeMultilineRoot(t: SideMenuTheme): string;
+    rootForTouchScreens(t: SideMenuTheme): string;
+    subItemRootForTouchScreens(t: SideMenuTheme): string;
+    subItemRoot(t: SideMenuTheme): string;
     textAndMarkerWrapper(): string;
 };

package/src/internal/ItemContent/ItemContent.styles.js

@@ -1,40 +1,36 @@
 import { __makeTemplateObject } from "tslib";
-import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { memoizeStyle } from '../../../lib/theming/ThemeHelpers';
 var styles = {
-    root: function () {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      padding-top: 4px;\n      padding-bottom: 4px;\n    "], ["\n      display: flex;\n      align-items: center;\n      padding-top: 4px;\n      padding-bottom: 4px;\n    "])));
+    root: function (t) {
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      display: flex;\n      align-items: center;\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "], ["\n      display: flex;\n      align-items: center;\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "])), t.sideMenuItemContentPaddingY, t.sideMenuItemContentPaddingY);
     },
-    largeRoot: function () {
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding-top: 9px !important;\n      padding-bottom: 9px !important;\n    "], ["\n      padding-top: 9px !important;\n      padding-bottom: 9px !important;\n    "])));
+    largeRoot: function (t) {
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      padding-top: ", " !important;\n      padding-bottom: ", " !important;\n    "], ["\n      padding-top: ", " !important;\n      padding-bottom: ", " !important;\n    "])), t.sideMenuItemContentLargePaddingY, t.sideMenuItemContentLargePaddingY);
     },
-    subItemLargeRoot: function () {
-        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      padding-top: 5px !important;\n      padding-bottom: 5px !important;\n    "], ["\n      padding-top: 5px !important;\n      padding-bottom: 5px !important;\n    "])));
+    subItemLargeRoot: function (t) {
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      padding-top: ", " !important;\n      padding-bottom: ", " !important;\n    "], ["\n      padding-top: ", " !important;\n      padding-bottom: ", " !important;\n    "])), t.sideMenuSubItemContentLargePaddingY, t.sideMenuSubItemContentLargePaddingY);
     },
-    largeMultilineRoot: function () {
-        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      padding-top: 8px;\n      padding-bottom: 8px;\n    "], ["\n      padding-top: 8px;\n      padding-bottom: 8px;\n    "])));
+    largeMultilineRoot: function (t) {
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "])), t.sideMenuItemContentLargeMultilinePaddingY, t.sideMenuItemContentLargeMultilinePaddingY);
     },
-    rootForTouchScreens: function () {
-        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      padding-top: 8px;\n      padding-bottom: 8px;\n    "], ["\n      padding-top: 8px;\n      padding-bottom: 8px;\n    "])));
+    rootForTouchScreens: function (t) {
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "])), t.sideMenuItemContentPaddingYForTouchScreens, t.sideMenuItemContentPaddingYForTouchScreens);
     },
-    subItemRootForTouchScreens: function () {
-        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      padding-top: 9px;\n      padding-bottom: 9px;\n    "], ["\n      padding-top: 9px;\n      padding-bottom: 9px;\n    "])));
+    subItemRootForTouchScreens: function (t) {
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "])), t.sideMenuSubItemContentPaddingYForTouchScreens, t.sideMenuSubItemContentPaddingYForTouchScreens);
     },
-    subItemRoot: function () {
-        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding-top: 4px;\n      padding-bottom: 4px;\n    "], ["\n      padding-top: 4px;\n      padding-bottom: 4px;\n    "])));
+    subItemRoot: function (t) {
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n    "])), t.sideMenuSubItemContentPaddingY, t.sideMenuSubItemContentPaddingY);
     },
     textAndMarkerWrapper: function () {
         return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      display: flex;\n      flex-grow: 1;\n      align-items: center;\n      min-width: 0;\n    "], ["\n      display: flex;\n      flex-grow: 1;\n      align-items: center;\n      min-width: 0;\n    "])));
     },
 };
 export var customStyles = {
-    textAndMarkerWrapperMultiline: function (linesNumber) {
-        var height = linesNumber * 20 + 4; // TODO: после перехода на переменные темы заменить на формулу: linesNumber*line-height + caption-multiline-padding-top
+    textAndMarkerWrapperMultiline: function (height) {
         return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      min-height: ", "px;\n    "], ["\n      min-height: ", "px;\n    "])), height);
     },
-    largeTextAndMarkerWrapperMultiline: function (linesNumber) {
-        var height = linesNumber * 22 + 4; // TODO: после перехода на переменные темы заменить на формулу: linesNumber*line-height-large + caption-multiline-padding-top
-        return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      min-height: ", "px;\n    "], ["\n      min-height: ", "px;\n    "])), height);
-    },
 };
 export var jsStyles = memoizeStyle(styles);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/src/internal/ItemContent/Marker.js

@@ -1,11 +1,14 @@
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
 import { jsStyles } from './Marker.styles';
-import React from 'react';
+import React, { useContext } from 'react';
+import { getSideMenuTheme } from '../../../lib/theming/ThemeHelpers';
+import { ThemeContext } from '@skbkontur/react-ui';
 export var Marker = function (_a) {
     var _b;
     var isMultiline = _a.isMultiline, marker = _a.marker;
+    var theme = getSideMenuTheme(useContext(ThemeContext));
     return (React.createElement("span", { className: cx((_b = {},
-            _b[jsStyles.root()] = true,
-            _b[jsStyles.rootMultiline()] = isMultiline,
+            _b[jsStyles.root(theme)] = true,
+            _b[jsStyles.rootMultiline(theme)] = isMultiline,
             _b)) }, marker));
 };

package/src/internal/ItemContent/Marker.styles.d.ts

@@ -1,4 +1,5 @@
+import { SideMenuTheme } from '../../../lib/theming/ThemeTypes';
 export declare const jsStyles: {
-    root(): string;
-    rootMultiline(): string;
+    root(t: SideMenuTheme): string;
+    rootMultiline(t: SideMenuTheme): string;
 };

package/src/internal/ItemContent/Marker.styles.js

@@ -1,11 +1,12 @@
 import { __makeTemplateObject } from "tslib";
-import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { memoizeStyle } from '../../../lib/theming/ThemeHelpers';
 var styles = {
-    root: function () {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding-right: 6px;\n      padding-left: 6px;\n      background: #2291ff;\n      border-radius: 9999px;\n      margin-left: auto;\n      margin-right: 8px;\n      color: #fff;\n      line-height: 20px;\n      font-weight: 700;\n    "], ["\n      padding-right: 6px;\n      padding-left: 6px;\n      background: #2291ff;\n      border-radius: 9999px;\n      margin-left: auto;\n      margin-right: 8px;\n      color: #fff;\n      line-height: 20px;\n      font-weight: 700;\n    "])));
+    root: function (t) {
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding-right: ", ";\n      padding-left: ", ";\n      background: ", ";\n      border-radius: 9999px;\n      margin-left: auto;\n      margin-right: ", ";\n      color: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n    "], ["\n      padding-right: ", ";\n      padding-left: ", ";\n      background: ", ";\n      border-radius: 9999px;\n      margin-left: auto;\n      margin-right: ", ";\n      color: ", ";\n      line-height: ", ";\n      font-weight: ", ";\n    "])), t.sideMenuMarkerPaddingX, t.sideMenuMarkerPaddingX, t.sideMenuMarkerBg, t.sideMenuMarkerMarginRight, t.sideMenuMarkerColor, t.sideMenuLineHeight, t.sideMenuMarkerFontWeight);
     },
-    rootMultiline: function () {
-        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      align-self: flex-start;\n      margin-top: 4px;\n    "], ["\n      align-self: flex-start;\n      margin-top: 4px;\n    "])));
+    rootMultiline: function (t) {
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      align-self: flex-start;\n      margin-top: ", ";\n    "], ["\n      align-self: flex-start;\n      margin-top: ", ";\n    "])), t.sideMenuMarkerMultilineMarginTop);
     },
 };
 export var jsStyles = memoizeStyle(styles);

package/src/internal/NestedMenu.js

@@ -1,6 +1,8 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import { jsStyles } from './NestedMenu.styles';
-import { isClickableSubElement } from '../../utils/scripts';
+import { isClickableSubElement } from '../../lib/utils/scripts';
+import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
+import { ThemeContext } from '@skbkontur/react-ui';
 /**
  * Вложенное подменю
  *
@@ -8,8 +10,9 @@ import { isClickableSubElement } from '../../utils/scripts';
  */
 var NestedMenu = forwardRef(function (_a, ref) {
     var _generatedId = _a._generatedId, children = _a.children;
+    var theme = getSideMenuTheme(useContext(ThemeContext));
     var levelIndex = 0;
-    return (React.createElement("div", { className: jsStyles.root() }, React.Children.map(children, function (child) {
+    return (React.createElement("div", { className: jsStyles.root(theme) }, React.Children.map(children, function (child) {
         if (React.isValidElement(child) &&
             // @ts-expect-error: accessing private property
             isClickableSubElement(child.type.__KONTUR_REACT_UI__)) {

package/src/internal/NestedMenu.styles.d.ts

@@ -1,3 +1,4 @@
+import { SideMenuTheme } from '../../lib/theming/ThemeTypes';
 export declare const jsStyles: {
-    root(): string;
+    root(t: SideMenuTheme): string;
 };

package/src/internal/NestedMenu.styles.js

@@ -1,8 +1,9 @@
 import { __makeTemplateObject } from "tslib";
-import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
 var styles = {
-    root: function () {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding-left: 16px;\n    "], ["\n      padding-left: 16px;\n    "])));
+    root: function (t) {
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding-left: ", ";\n    "], ["\n      padding-left: ", ";\n    "])), t.sideMenuNestedMenuPaddingLeft);
     },
 };
 export var jsStyles = memoizeStyle(styles);

package/src/internal/RightBorder.js

@@ -1,7 +1,8 @@
 import React, { forwardRef, useContext, useEffect, useRef, useState } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
-import { customStyles, jsStyles } from './RightBorder.styles';
-import { SideMenuContext } from '../SideMenuContext';
+import { jsStyles } from './RightBorder.styles';
+import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
+import { ThemeContext } from '@skbkontur/react-ui';
 /**
  * Элемент интерактивной правой границы
  *
@@ -10,18 +11,18 @@ import { SideMenuContext } from '../SideMenuContext';
 var RightBorder = forwardRef(function (_a, ref) {
     var _b;
     var setIsMinimized = _a.setIsMinimized;
-    var context = useContext(SideMenuContext);
-    var resizeTimer = null;
+    var theme = getSideMenuTheme(useContext(ThemeContext));
+    var resizeTimer = useRef(null);
     var _c = useState(false), isAbleToResize = _c[0], setIsAbleToResize = _c[1];
     var rightBorderRef = useRef(null);
     var handleMouseEnter = function () {
-        resizeTimer = setTimeout(function () {
+        resizeTimer.current = setTimeout(function () {
             setIsAbleToResize(true);
         }, 500);
     };
     var handleMouseLeave = function () {
-        if (resizeTimer) {
-            clearTimeout(resizeTimer);
+        if (resizeTimer.current) {
+            clearTimeout(resizeTimer.current);
         }
         setIsAbleToResize(false);
     };
@@ -62,9 +63,9 @@ var RightBorder = forwardRef(function (_a, ref) {
         };
     });
     return (React.createElement("div", { className: cx((_b = {},
-            _b[jsStyles.root()] = true,
+            _b[jsStyles.root(theme)] = true,
             _b[jsStyles.resizableRoot()] = isAbleToResize,
-            _b)), ref: rightBorderRef || ref, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, isAbleToResize && React.createElement("div", { className: customStyles.rootHovered(context.productColor) })));
+            _b)), ref: rightBorderRef || ref, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, isAbleToResize && React.createElement("div", { className: jsStyles.rootHovered(theme) })));
 });
 RightBorder.displayName = 'RightBorder';
 var RightBorderWithStaticFields = Object.assign(RightBorder, { __KONTUR_REACT_UI__: 'RightBorder' });

package/src/internal/RightBorder.styles.d.ts

@@ -1,7 +1,6 @@
-export declare const customStyles: {
-    rootHovered(color?: string | undefined): string;
-};
+import { SideMenuTheme } from '../../lib/theming/ThemeTypes';
 export declare const jsStyles: {
-    root(): string;
+    root(t: SideMenuTheme): string;
     resizableRoot(): string;
+    rootHovered(t: SideMenuTheme): string;
 };

package/src/internal/RightBorder.styles.js

@@ -1,16 +1,16 @@
 import { __makeTemplateObject } from "tslib";
-import { css, memoizeStyle } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { memoizeStyle } from '../../lib/theming/ThemeHelpers';
 var styles = {
-    root: function () {
-        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: absolute;\n      width: 20px;\n      height: 100%;\n      right: -10px;\n      background: transparent;\n    "], ["\n      position: absolute;\n      width: 20px;\n      height: 100%;\n      right: -10px;\n      background: transparent;\n    "])));
+    root: function (t) {
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: absolute;\n      width: ", ";\n      height: 100%;\n      right: -", "px;\n      background: transparent;\n    "], ["\n      position: absolute;\n      width: ", ";\n      height: 100%;\n      right: -", "px;\n      background: transparent;\n    "])), t.sideMenuRightBorderWidth, parseInt(t.sideMenuRightBorderWidth) / 2);
     },
     resizableRoot: function () {
         return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      cursor: col-resize;\n    "], ["\n      cursor: col-resize;\n    "])));
     },
-};
-export var customStyles = {
-    rootHovered: function (color) {
-        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: absolute;\n      width: 2px;\n      background: ", ";\n      height: 100%;\n      left: 9px;\n    "], ["\n      position: absolute;\n      width: 2px;\n      background: ", ";\n      height: 100%;\n      left: 9px;\n    "])), color);
+    rootHovered: function (t) {
+        var left = parseInt(t.sideMenuRightBorderWidth) / 2 - parseInt(t.sideMenuRightBorderHoverWidth) / 2; //левое положение подсвеченной границы: вычисляется как половина активной ширины (`10`) минус половина ширины подсвеченной границы (`1`)
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      position: absolute;\n      width: ", ";\n      background: ", ";\n      height: 100%;\n      left: ", "px;\n    "], ["\n      position: absolute;\n      width: ", ";\n      background: ", ";\n      height: 100%;\n      left: ", "px;\n    "])), t.sideMenuRightBorderHoverWidth, t.sideMenuRightBorderColor, left);
     },
 };
 export var jsStyles = memoizeStyle(styles);

package/src/internal/SeparatedSubMenu.js

@@ -1,13 +1,15 @@
 import { __assign } from "tslib";
 import React, { forwardRef, useContext } from 'react';
 import { cx } from '@skbkontur/react-ui/lib/theming/Emotion';
+import { ThemeContext } from '@skbkontur/react-ui/lib/theming/ThemeContext';
 import { jsStyles } from '../SideMenu/SideMenu.styles';
-import { jsStylesForSeparatedSubMenu } from './SeparatedSubMenu.styles';
+import { customStyles, jsStylesForSeparatedSubMenu } from './SeparatedSubMenu.styles';
 import { SideMenuContext } from '../SideMenuContext';
-import { isClickableSubElement } from '../../utils/scripts';
+import { isClickableSubElement } from '../../lib/utils/scripts';
 import { BackButton } from './BackButton';
 import { SideMenuDataTids } from '../../SideMenuDataTids';
 import { ScrollContainer } from '@skbkontur/react-ui';
+import { getSideMenuTheme } from '../../lib/theming/ThemeHelpers';
 import { isIE11 } from '@skbkontur/react-ui/lib/client';
 import { ZIndex } from '@skbkontur/react-ui/internal/ZIndex';
 /**
@@ -19,6 +21,7 @@ var SeparatedSubMenu = forwardRef(function (_a, ref) {
     var _b, _c;
     var children = _a.children, generatedId = _a.generatedId, id = _a.id, href = _a.href, caption = _a.caption;
     var context = useContext(SideMenuContext);
+    var theme = getSideMenuTheme(useContext(ThemeContext));
     var isSubItemWithChildren = function (child) {
         // @ts-expect-error: accessing private property
         return isClickableSubElement(child.type.__KONTUR_REACT_UI__) && child.props.children;
@@ -35,20 +38,20 @@ var SeparatedSubMenu = forwardRef(function (_a, ref) {
     var isDesktopOverlayMenu = (context.isDesktop || context.isNarrowDesktop) && !context.separatedMenuWithoutOverlay;
     var isSeparatedSubMenuOverContent = (context.isTablet || isDesktopOverlayMenu) && !isIE11;
     return (React.createElement(ZIndex, { priority: context.separatedMenuWithoutOverlay ? 8 : 0, className: cx((_b = {},
-            _b[jsStyles.container()] = true,
-            _b[jsStyles.containerForTouchScreens()] = context.isTouchScreen,
-            _b[jsStylesForSeparatedSubMenu.root()] = true,
-            _b[jsStylesForSeparatedSubMenu.rootForMobiles()] = context.isMobile,
-            _b[jsStylesForSeparatedSubMenu.rootWithoutOverlay()] = context.separatedMenuWithoutOverlay && context.isDesktop,
-            _b[jsStylesForSeparatedSubMenu.rootWithoutOverlayForNarrowDesktop()] = context.separatedMenuWithoutOverlay && context.isNarrowDesktop,
-            _b[jsStylesForSeparatedSubMenu.rootWithShadow()] = isSeparatedSubMenuOverContent,
+            _b[jsStyles.container(theme)] = true,
+            _b[jsStyles.containerForTouchScreens(theme)] = context.isTouchScreen,
+            _b[jsStylesForSeparatedSubMenu.root(theme)] = true,
+            _b[customStyles.rootForMobiles(context.headerHeight)] = context.isMobile,
+            _b[jsStylesForSeparatedSubMenu.rootWithoutOverlay(theme)] = context.separatedMenuWithoutOverlay && context.isDesktop,
+            _b[jsStylesForSeparatedSubMenu.rootWithoutOverlayForNarrowDesktop(theme)] = context.separatedMenuWithoutOverlay && context.isNarrowDesktop,
+            _b[jsStylesForSeparatedSubMenu.rootWithShadow(theme)] = isSeparatedSubMenuOverContent,
             _b)), ref: ref, "data-tid": SideMenuDataTids.separatedSubMenu },
         React.createElement(ScrollContainer, { onScrollStateChangeY: function (state) {
                 var _a;
                 (_a = context.setScrollState) === null || _a === void 0 ? void 0 : _a.call(context, state);
             }, hideScrollBar: true },
             React.createElement("div", { className: cx((_c = {},
-                    _c[jsStylesForSeparatedSubMenu.contentWrapper()] = true,
+                    _c[jsStylesForSeparatedSubMenu.contentWrapper(theme)] = true,
                     _c[jsStylesForSeparatedSubMenu.contentWrapperForMobiles()] = context.isMobile,
                     _c)) },
                 context.isMobile && React.createElement(BackButton, { caption: caption, id: id, href: href, generatedId: generatedId }),