@cloud-ru/ds-uikit-product-header-legacy 0.1.18 → 0.1.19-preview-a2208aeb.0

package/dist/cjs/components/HeaderLayout/HeaderLayout.js

@@ -6,9 +6,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeaderLayout = HeaderLayout;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const divider_1 = require("@cloud-ru/ds-divider");
+const theme_1 = require("@cloud-ru/ds-theme");
 const utils_1 = require("@cloud-ru/ds-utils");
 const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function HeaderLayout({ menu, logo, select, breadcrumbs, toolbar, className, isMobile = false, ...rest }) {
-    return ((0, jsx_runtime_1.jsxs)("header", { className: (0, classnames_1.default)(styles_module_scss_1.default.header, className), ...(0, utils_1.extractSupportProps)(rest), children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.top, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.left, children: [menu, logo, !isMobile && select && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), select] })), !isMobile && breadcrumbs && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), breadcrumbs] }))] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.right, children: toolbar })] }), (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal' }), isMobile && Boolean(breadcrumbs) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.bottom, children: breadcrumbs }), (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal' })] }))] }));
+    const headerRef = (0, react_1.useRef)(null);
+    const header = ((0, jsx_runtime_1.jsxs)("header", { ref: headerRef, className: (0, classnames_1.default)(styles_module_scss_1.default.header, className), ...(0, utils_1.extractSupportProps)(rest), children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.top, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.left, children: [menu, logo, !isMobile && select && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), select] })), !isMobile && breadcrumbs && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), breadcrumbs] }))] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.right, children: toolbar })] }), (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal' }), isMobile && Boolean(breadcrumbs) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.bottom, children: breadcrumbs }), (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal' })] }))] }));
+    // Временная фиксация: на mobile прикладная тема переключилась на compact, а шапка сверстана
+    // под comfort и на compact ещё не переехала. Провайдер (а не класс на `<header>`) нужен потому,
+    // что поверхности шапки — порталы: они переэмитят набор `sn-*` из контекста на своём корне,
+    // и класс, поставленный поверх, проиграл бы их собственному.
+    if (isMobile) {
+        return ((0, jsx_runtime_1.jsx)(theme_1.ChildThemeProvider, { value: { density: theme_1.DENSITY.Comfort }, rootRef: headerRef, children: header }));
+    }
+    return header;
 }

package/dist/cjs/components/HeaderLayout/styles.module.css

@@ -1,6 +1,6 @@
 .header{
   box-sizing:border-box;
-  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
 }
 
 .top{

package/dist/cjs/components/Logo/styles.module.css

@@ -11,5 +11,5 @@
   flex-shrink:0;
   align-items:center;
   justify-content:center;
-  color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
 }

package/dist/cjs/components/MainMenu/helperComponents/MenuDesktop/styles.module.css

@@ -8,7 +8,7 @@
   width:100%;
   height:100%;
   min-height:0;
-  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
 }
 
 .left{
@@ -75,7 +75,7 @@
 
 .leftBottomDivider{
   width:100%;
-  padding:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px))) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+  padding:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px))))) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px)))));
 }
 
 .leftBottomItems{
@@ -108,7 +108,7 @@
   flex-shrink:0;
   box-sizing:border-box;
   padding:var(--sn-primitive-dimension-16, 16px) var(--sn-primitive-dimension-16, 16px) 0 var(--sn-primitive-dimension-12, 12px);
-  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
 }
 
 .scroll{

package/dist/cjs/components/MainMenu/helperComponents/MenuMobile/MenuMobile.js

@@ -8,8 +8,10 @@ const react_1 = require("react");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const adaptive_1 = require("@cloud-ru/ds-adaptive");
 const divider_1 = require("@cloud-ru/ds-divider");
+const theme_1 = require("@cloud-ru/ds-theme");
 const uikit_product_card_predefined_1 = require("@cloud-ru/ds-uikit-product-card-predefined");
 const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
 const react_2 = require("react");
 const locale_1 = require("../../../../locale");
 const shouldBeOpenedInNewTab_1 = require("../../../../utils/shouldBeOpenedInNewTab");
@@ -50,5 +52,13 @@ function MenuMobile({ open: openProp, setOpen: setOpenProp, settingItems, platfo
     const searchValue = search?.searchValue;
     const showSearch = Boolean(search) && !isInitialEmptyCards && (resultItems.length > 0 || Boolean(searchValue));
     const hasBottomItems = Boolean(settingItems?.items.length);
-    return ((0, jsx_runtime_1.jsx)(desktopDrawer_1.DesktopDrawerCustom, { open: open, onClose: handleCloseDrawer, position: 'left', width: 's', className: styles_module_scss_1.default.drawerMobile, closeOnPopstate: true, "data-test-id": constants_1.TEST_IDS.drawerMobile, children: (0, jsx_runtime_1.jsxs)(adaptive_1.AdaptiveProvider, { layoutType: layoutType, children: [(0, jsx_runtime_1.jsx)(desktopDrawer_1.DesktopDrawerCustom.Header, { title: t('mainMenu.navigation'), className: styles_module_scss_1.default.header }), (0, jsx_runtime_1.jsx)(desktopDrawer_1.DesktopDrawerCustom.Body, { bodyPadding: false, className: styles_module_scss_1.default.scrollBody, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.scrollMobile, children: [leftTop ? (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.leftTop, children: leftTop }) : null, !isInitialEmptyCards ? ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.main, children: [showSearch && search ? ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.searchItem, "data-test-id": constants_1.TEST_IDS.search, children: (0, jsx_runtime_1.jsx)(NavigationSearch_1.NavigationSearch, { ref: searchRef, value: search.searchValue, onChange: search.onSearchValueChange, onBlur: search.onBlur, onFocus: search.onFocus, options: search.searchFunctions.map(fn => ({ id: fn.id, label: fn.label })), selectedOption: search.searchFn ?? search.searchFunctions[0]?.id ?? 'fuzzy', onSelectedOptionChange: search.onChangeSearchFn }) })) : null, (0, jsx_runtime_1.jsx)(Content_1.Content, { isMobile: true, onClose: handleCloseDrawer, onLinkChange: onLinkChange, className: styles_module_scss_1.default.content, searchValue: searchValue, banners: rightTop, favorite: favorite, serviceGroups: resultItems })] })) : null, isInitialEmptyCards && rightTop ? (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.bannersWrap, children: rightTop }) : null, hasBottomItems ? ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.bottom, "data-test-id": constants_1.TEST_IDS.leftBottom, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.bottomDivider, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, {}) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.bottomItems, "data-test-id": constants_1.TEST_IDS.leftBottomItems, children: settingItems?.items.map(item => ((0, react_1.createElement)(uikit_product_card_predefined_1.CardServiceLight, { ...(item.href ? { href: item.href, as: 'a' } : { as: 'button', type: 'button' }), key: item.id, title: item.label, icon: (0, utils_2.getLinkEmblem)(item), onClick: wrappedSettingClick(item), disabled: item.disabled, className: styles_module_scss_1.default.bottomCard, "data-test-id": constants_1.TEST_IDS.setting(item.id) }))) })] })) : null] }) })] }) }));
+    // Временная фиксация comfort (см. `HeaderLayout`): `MainMenu` используется и отдельно от
+    // `HeaderLayout`, поэтому объявляем плотность здесь же. Провайдер задаёт контекст (его читают
+    // вложенные поверхности, которые переэмитят тему на своём корне), класс — сам дровер: он тему
+    // из контекста не переэмитит и иначе остался бы с плотностью приложения.
+    const comfortThemeClassName = (0, theme_1.useThemeClassnames)({ density: theme_1.DENSITY.Comfort });
+    return (
+    // Обёртка провайдера layout-прозрачная (`display: contents`) — меню рендерится порталом,
+    // лишний бокс в строке шапки не нужен.
+    (0, jsx_runtime_1.jsx)(theme_1.ChildThemeProvider, { value: { density: theme_1.DENSITY.Comfort }, className: styles_module_scss_1.default.densityScope, children: (0, jsx_runtime_1.jsx)(desktopDrawer_1.DesktopDrawerCustom, { open: open, onClose: handleCloseDrawer, position: 'left', width: 's', className: (0, classnames_1.default)(styles_module_scss_1.default.drawerMobile, comfortThemeClassName), closeOnPopstate: true, "data-test-id": constants_1.TEST_IDS.drawerMobile, children: (0, jsx_runtime_1.jsxs)(adaptive_1.AdaptiveProvider, { layoutType: layoutType, children: [(0, jsx_runtime_1.jsx)(desktopDrawer_1.DesktopDrawerCustom.Header, { title: t('mainMenu.navigation'), className: styles_module_scss_1.default.header }), (0, jsx_runtime_1.jsx)(desktopDrawer_1.DesktopDrawerCustom.Body, { bodyPadding: false, className: styles_module_scss_1.default.scrollBody, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.scrollMobile, children: [leftTop ? (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.leftTop, children: leftTop }) : null, !isInitialEmptyCards ? ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.main, children: [showSearch && search ? ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.searchItem, "data-test-id": constants_1.TEST_IDS.search, children: (0, jsx_runtime_1.jsx)(NavigationSearch_1.NavigationSearch, { ref: searchRef, value: search.searchValue, onChange: search.onSearchValueChange, onBlur: search.onBlur, onFocus: search.onFocus, options: search.searchFunctions.map(fn => ({ id: fn.id, label: fn.label })), selectedOption: search.searchFn ?? search.searchFunctions[0]?.id ?? 'fuzzy', onSelectedOptionChange: search.onChangeSearchFn }) })) : null, (0, jsx_runtime_1.jsx)(Content_1.Content, { isMobile: true, onClose: handleCloseDrawer, onLinkChange: onLinkChange, className: styles_module_scss_1.default.content, searchValue: searchValue, banners: rightTop, favorite: favorite, serviceGroups: resultItems })] })) : null, isInitialEmptyCards && rightTop ? (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.bannersWrap, children: rightTop }) : null, hasBottomItems ? ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.bottom, "data-test-id": constants_1.TEST_IDS.leftBottom, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.bottomDivider, children: (0, jsx_runtime_1.jsx)(divider_1.Divider, {}) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.bottomItems, "data-test-id": constants_1.TEST_IDS.leftBottomItems, children: settingItems?.items.map(item => ((0, react_1.createElement)(uikit_product_card_predefined_1.CardServiceLight, { ...(item.href ? { href: item.href, as: 'a' } : { as: 'button', type: 'button' }), key: item.id, title: item.label, icon: (0, utils_2.getLinkEmblem)(item), onClick: wrappedSettingClick(item), disabled: item.disabled, className: styles_module_scss_1.default.bottomCard, "data-test-id": constants_1.TEST_IDS.setting(item.id) }))) })] })) : null] }) })] }) }) }));
 }

package/dist/cjs/components/MainMenu/helperComponents/MenuMobile/styles.module.css

@@ -1,7 +1,11 @@
+.densityScope{
+  display:contents;
+}
+
 .drawerMobile{
   height:100%;
   min-height:0;
-  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3))) !important;
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3))) !important;
 }
 
 .scrollBody{
@@ -50,7 +54,7 @@
   flex-direction:column;
   gap:var(--sn-primitive-dimension-4, 4px);
   padding-bottom:var(--sn-primitive-dimension-4, 4px);
-  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
 }
 
 .bannersWrap{
@@ -72,7 +76,7 @@
 
 .bottomDivider{
   width:100%;
-  padding:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px))) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+  padding:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px))))) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px)))));
 }
 
 .bottomItems{

package/dist/cjs/components/MainMenu/helperComponents/NavigationSearch/styles.module.css

@@ -10,8 +10,8 @@
   display:flex;
   flex:1 0 0;
   flex-direction:column;
-  min-height:var(--sn-field-anatomy-size-m-fieldContainer-minHeight, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
-  padding:var(--sn-field-anatomy-size-m-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px))) var(--sn-field-anatomy-size-m-fieldContainer-paddingRight, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px))) var(--sn-field-anatomy-size-m-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px))) var(--sn-field-anatomy-size-m-fieldContainer-paddingLeft, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+  min-height:var(--sn-field-anatomy-size-m-fieldContainer-minHeight, var(--sn-density-size-m, var(--sn-density-scale-100-m, var(--sn-platform-comfort-scale-100-m, var(--sn-primitive-dimension-40, 40px)))));
+  padding:var(--sn-field-anatomy-size-m-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-platform-comfort-spacing-control-container-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))) var(--sn-field-anatomy-size-m-fieldContainer-paddingRight, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-platform-comfort-spacing-control-container-horizontal-m, var(--sn-platform-comfort-scale-050-xs, var(--sn-primitive-dimension-8, 8px))))) var(--sn-field-anatomy-size-m-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-platform-comfort-spacing-control-container-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))) var(--sn-field-anatomy-size-m-fieldContainer-paddingLeft, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-platform-comfort-spacing-control-container-horizontal-m, var(--sn-platform-comfort-scale-050-xs, var(--sn-primitive-dimension-8, 8px)))));
 }
 
 .search{
@@ -28,7 +28,7 @@
   opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
 }
 .search[data-size=m]{
-  padding:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px))) 0;
+  padding:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))) 0;
 }
 
 .root{
@@ -37,8 +37,8 @@
   align-items:stretch;
   box-sizing:border-box;
   width:100%;
-  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
-  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+  border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
 }
 .root[data-mobile]{
   flex-direction:row;
@@ -47,7 +47,7 @@
   background-color:transparent;
 }
 .root[data-mobile][data-open-search]{
-  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
 }
 .root[data-mobile] .searchWrapper{
   padding:0;
@@ -70,6 +70,6 @@
 }
 
 .mobileSearchButton[data-size=m]{
-  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
-  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+  border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
 }

package/dist/cjs/components/MainMenu/helperComponents/ServicesCategory/styles.module.css

@@ -12,20 +12,20 @@
   min-width:0;
   max-width:100%;
   padding:var(--sn-primitive-dimension-12, 12px);
-  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
-  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+  border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
 }
 .root[data-highlight]{
   background-color:transparent;
-  background-image:linear-gradient(90deg, color-mix(in srgb, var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd))) 20%, transparent) 2.29%, color-mix(in srgb, var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, var(--sn-brandRole-color-brandA-80, var(--sn-primitive-color-brandA-80, #caeadb)))) 12%, transparent) 97.84%), linear-gradient(var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd))), var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd))));
-  box-shadow:inset 0 0 0 var(--sn-primitive-strokeWeight-strokeRegular, 1px) var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  background-image:linear-gradient(90deg, color-mix(in srgb, var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd))) 20%, transparent) 2.29%, color-mix(in srgb, var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #caeadb)) 12%, transparent) 97.84%), linear-gradient(var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd))), var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd))));
+  box-shadow:inset 0 0 0 var(--sn-primitive-strokeWeight-strokeRegular, 1px) var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
 }
 
 .title{
-  font-family:var(--sn-regular-title-m-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-family:var(--sn-regular-title-m-fontFamily, var(--sn-brand-font-fontFamily-regular-title, SB Sans Interface));
   font-weight:var(--sn-regular-title-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-m, var(--sn-brand-font-fontWeight-light-regular-title-m, var(--sn-primitive-font-fontWeightValue-600, 600))));
-  line-height:var(--sn-regular-title-m-lineHeight, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
-  font-size:var(--sn-regular-title-m-fontSize, var(--sn-density-typography-roleTitle-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  line-height:var(--sn-regular-title-m-lineHeight, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-platform-comfort-typography-roleTitle-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
+  font-size:var(--sn-regular-title-m-fontSize, var(--sn-density-typography-roleTitle-fontSizeM, var(--sn-platform-comfort-typography-roleTitle-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
   letter-spacing:var(--sn-regular-title-m-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
   paragraph-spacing:var(--sn-regular-title-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
   margin:0;

package/dist/cjs/components/PlatformLogo/styles.module.css

@@ -5,9 +5,9 @@
   justify-content:center;
   box-sizing:border-box;
   padding:var(--sn-primitive-dimension-4, 4px);
-  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
-  color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
-  background:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+  border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
+  color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
+  background:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
 }
 .root[data-compact]{
   padding:0;

package/dist/cjs/style.css

@@ -1,6 +1,6 @@
 .header{
   box-sizing:border-box;
-  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
 }
 
 .top{
@@ -50,7 +50,7 @@
   flex-shrink:0;
   align-items:center;
   justify-content:center;
-  color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
 }
 .root{
   display:flex;
@@ -111,7 +111,7 @@
   width:100%;
   height:100%;
   min-height:0;
-  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
 }
 
 .left{
@@ -178,7 +178,7 @@
 
 .leftBottomDivider{
   width:100%;
-  padding:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px))) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+  padding:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px))))) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px)))));
 }
 
 .leftBottomItems{
@@ -211,7 +211,7 @@
   flex-shrink:0;
   box-sizing:border-box;
   padding:var(--sn-primitive-dimension-16, 16px) var(--sn-primitive-dimension-16, 16px) 0 var(--sn-primitive-dimension-12, 12px);
-  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
 }
 
 .scroll{
@@ -246,10 +246,14 @@
 .bannersWrap{
   padding:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-8, 8px);
 }
+.densityScope{
+  display:contents;
+}
+
 .drawerMobile{
   height:100%;
   min-height:0;
-  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3))) !important;
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3))) !important;
 }
 
 .scrollBody{
@@ -298,7 +302,7 @@
   flex-direction:column;
   gap:var(--sn-primitive-dimension-4, 4px);
   padding-bottom:var(--sn-primitive-dimension-4, 4px);
-  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
 }
 
 .bannersWrap{
@@ -320,7 +324,7 @@
 
 .bottomDivider{
   width:100%;
-  padding:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px))) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+  padding:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px))))) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px)))));
 }
 
 .bottomItems{
@@ -344,8 +348,8 @@
   display:flex;
   flex:1 0 0;
   flex-direction:column;
-  min-height:var(--sn-field-anatomy-size-m-fieldContainer-minHeight, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
-  padding:var(--sn-field-anatomy-size-m-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px))) var(--sn-field-anatomy-size-m-fieldContainer-paddingRight, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px))) var(--sn-field-anatomy-size-m-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px))) var(--sn-field-anatomy-size-m-fieldContainer-paddingLeft, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+  min-height:var(--sn-field-anatomy-size-m-fieldContainer-minHeight, var(--sn-density-size-m, var(--sn-density-scale-100-m, var(--sn-platform-comfort-scale-100-m, var(--sn-primitive-dimension-40, 40px)))));
+  padding:var(--sn-field-anatomy-size-m-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-platform-comfort-spacing-control-container-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))) var(--sn-field-anatomy-size-m-fieldContainer-paddingRight, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-platform-comfort-spacing-control-container-horizontal-m, var(--sn-platform-comfort-scale-050-xs, var(--sn-primitive-dimension-8, 8px))))) var(--sn-field-anatomy-size-m-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-platform-comfort-spacing-control-container-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))) var(--sn-field-anatomy-size-m-fieldContainer-paddingLeft, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-platform-comfort-spacing-control-container-horizontal-m, var(--sn-platform-comfort-scale-050-xs, var(--sn-primitive-dimension-8, 8px)))));
 }
 
 .search{
@@ -362,7 +366,7 @@
   opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
 }
 .search[data-size=m]{
-  padding:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px))) 0;
+  padding:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))) 0;
 }
 
 .root{
@@ -371,8 +375,8 @@
   align-items:stretch;
   box-sizing:border-box;
   width:100%;
-  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
-  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+  border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
 }
 .root[data-mobile]{
   flex-direction:row;
@@ -381,7 +385,7 @@
   background-color:transparent;
 }
 .root[data-mobile][data-open-search]{
-  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
 }
 .root[data-mobile] .searchWrapper{
   padding:0;
@@ -404,8 +408,8 @@
 }
 
 .mobileSearchButton[data-size=m]{
-  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
-  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+  border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
 }
 @charset "UTF-8";
 .root{
@@ -421,20 +425,20 @@
   min-width:0;
   max-width:100%;
   padding:var(--sn-primitive-dimension-12, 12px);
-  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
-  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+  border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
 }
 .root[data-highlight]{
   background-color:transparent;
-  background-image:linear-gradient(90deg, color-mix(in srgb, var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd))) 20%, transparent) 2.29%, color-mix(in srgb, var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, var(--sn-brandRole-color-brandA-80, var(--sn-primitive-color-brandA-80, #caeadb)))) 12%, transparent) 97.84%), linear-gradient(var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd))), var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd))));
-  box-shadow:inset 0 0 0 var(--sn-primitive-strokeWeight-strokeRegular, 1px) var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  background-image:linear-gradient(90deg, color-mix(in srgb, var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd))) 20%, transparent) 2.29%, color-mix(in srgb, var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #caeadb)) 12%, transparent) 97.84%), linear-gradient(var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd))), var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd))));
+  box-shadow:inset 0 0 0 var(--sn-primitive-strokeWeight-strokeRegular, 1px) var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
 }
 
 .title{
-  font-family:var(--sn-regular-title-m-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-family:var(--sn-regular-title-m-fontFamily, var(--sn-brand-font-fontFamily-regular-title, SB Sans Interface));
   font-weight:var(--sn-regular-title-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-m, var(--sn-brand-font-fontWeight-light-regular-title-m, var(--sn-primitive-font-fontWeightValue-600, 600))));
-  line-height:var(--sn-regular-title-m-lineHeight, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
-  font-size:var(--sn-regular-title-m-fontSize, var(--sn-density-typography-roleTitle-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  line-height:var(--sn-regular-title-m-lineHeight, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-platform-comfort-typography-roleTitle-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
+  font-size:var(--sn-regular-title-m-fontSize, var(--sn-density-typography-roleTitle-fontSizeM, var(--sn-platform-comfort-typography-roleTitle-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
   letter-spacing:var(--sn-regular-title-m-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
   paragraph-spacing:var(--sn-regular-title-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
   margin:0;
@@ -495,9 +499,9 @@
   justify-content:center;
   box-sizing:border-box;
   padding:var(--sn-primitive-dimension-4, 4px);
-  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
-  color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
-  background:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
+  border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
+  color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
+  background:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
 }
 .root[data-compact]{
   padding:0;

package/dist/esm/components/HeaderLayout/HeaderLayout.js

@@ -1,8 +1,19 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Divider } from '@cloud-ru/ds-divider';
+import { ChildThemeProvider, DENSITY } from '@cloud-ru/ds-theme';
 import { extractSupportProps } from '@cloud-ru/ds-utils';
 import cn from 'classnames';
+import { useRef } from 'react';
 import styles from './styles.module.css';
 export function HeaderLayout({ menu, logo, select, breadcrumbs, toolbar, className, isMobile = false, ...rest }) {
-    return (_jsxs("header", { className: cn(styles.header, className), ...extractSupportProps(rest), children: [_jsxs("div", { className: styles.top, children: [_jsxs("div", { className: styles.left, children: [menu, logo, !isMobile && select && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical' }), select] })), !isMobile && breadcrumbs && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical' }), breadcrumbs] }))] }), _jsx("div", { className: styles.right, children: toolbar })] }), _jsx(Divider, { orientation: 'horizontal' }), isMobile && Boolean(breadcrumbs) && (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.bottom, children: breadcrumbs }), _jsx(Divider, { orientation: 'horizontal' })] }))] }));
+    const headerRef = useRef(null);
+    const header = (_jsxs("header", { ref: headerRef, className: cn(styles.header, className), ...extractSupportProps(rest), children: [_jsxs("div", { className: styles.top, children: [_jsxs("div", { className: styles.left, children: [menu, logo, !isMobile && select && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical' }), select] })), !isMobile && breadcrumbs && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical' }), breadcrumbs] }))] }), _jsx("div", { className: styles.right, children: toolbar })] }), _jsx(Divider, { orientation: 'horizontal' }), isMobile && Boolean(breadcrumbs) && (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.bottom, children: breadcrumbs }), _jsx(Divider, { orientation: 'horizontal' })] }))] }));
+    // Временная фиксация: на mobile прикладная тема переключилась на compact, а шапка сверстана
+    // под comfort и на compact ещё не переехала. Провайдер (а не класс на `<header>`) нужен потому,
+    // что поверхности шапки — порталы: они переэмитят набор `sn-*` из контекста на своём корне,
+    // и класс, поставленный поверх, проиграл бы их собственному.
+    if (isMobile) {
+        return (_jsx(ChildThemeProvider, { value: { density: DENSITY.Comfort }, rootRef: headerRef, children: header }));
+    }
+    return header;
 }

package/dist/esm/components/HeaderLayout/styles.module.css

@@ -1,6 +1,6 @@
 .header{
   box-sizing:border-box;
-  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
 }
 
 .top{

package/dist/esm/components/Logo/styles.module.css

@@ -11,5 +11,5 @@
   flex-shrink:0;
   align-items:center;
   justify-content:center;
-  color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
 }

package/dist/esm/components/MainMenu/helperComponents/MenuDesktop/styles.module.css

@@ -8,7 +8,7 @@
   width:100%;
   height:100%;
   min-height:0;
-  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
 }
 
 .left{
@@ -75,7 +75,7 @@
 
 .leftBottomDivider{
   width:100%;
-  padding:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px))) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+  padding:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px))))) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px)))));
 }
 
 .leftBottomItems{
@@ -108,7 +108,7 @@
   flex-shrink:0;
   box-sizing:border-box;
   padding:var(--sn-primitive-dimension-16, 16px) var(--sn-primitive-dimension-16, 16px) 0 var(--sn-primitive-dimension-12, 12px);
-  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
 }
 
 .scroll{

package/dist/esm/components/MainMenu/helperComponents/MenuMobile/MenuMobile.js

@@ -2,8 +2,10 @@ import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AdaptiveProvider, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
 import { Divider } from '@cloud-ru/ds-divider';
+import { ChildThemeProvider, DENSITY, useThemeClassnames } from '@cloud-ru/ds-theme';
 import { CardServiceLight } from '@cloud-ru/ds-uikit-product-card-predefined';
 import { useValueControl } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
 import { useCallback } from 'react';
 import { headerLegacyLocale } from '../../../../locale/index.js';
 import { shouldBeOpenedInNewTab } from '../../../../utils/shouldBeOpenedInNewTab.js';
@@ -44,5 +46,13 @@ export function MenuMobile({ open: openProp, setOpen: setOpenProp, settingItems,
     const searchValue = search?.searchValue;
     const showSearch = Boolean(search) && !isInitialEmptyCards && (resultItems.length > 0 || Boolean(searchValue));
     const hasBottomItems = Boolean(settingItems?.items.length);
-    return (_jsx(DesktopDrawerCustom, { open: open, onClose: handleCloseDrawer, position: 'left', width: 's', className: styles.drawerMobile, closeOnPopstate: true, "data-test-id": TEST_IDS.drawerMobile, children: _jsxs(AdaptiveProvider, { layoutType: layoutType, children: [_jsx(DesktopDrawerCustom.Header, { title: t('mainMenu.navigation'), className: styles.header }), _jsx(DesktopDrawerCustom.Body, { bodyPadding: false, className: styles.scrollBody, children: _jsxs("div", { className: styles.scrollMobile, children: [leftTop ? _jsx("div", { className: styles.leftTop, children: leftTop }) : null, !isInitialEmptyCards ? (_jsxs("div", { className: styles.main, children: [showSearch && search ? (_jsx("div", { className: styles.searchItem, "data-test-id": TEST_IDS.search, children: _jsx(NavigationSearch, { ref: searchRef, value: search.searchValue, onChange: search.onSearchValueChange, onBlur: search.onBlur, onFocus: search.onFocus, options: search.searchFunctions.map(fn => ({ id: fn.id, label: fn.label })), selectedOption: search.searchFn ?? search.searchFunctions[0]?.id ?? 'fuzzy', onSelectedOptionChange: search.onChangeSearchFn }) })) : null, _jsx(Content, { isMobile: true, onClose: handleCloseDrawer, onLinkChange: onLinkChange, className: styles.content, searchValue: searchValue, banners: rightTop, favorite: favorite, serviceGroups: resultItems })] })) : null, isInitialEmptyCards && rightTop ? _jsx("div", { className: styles.bannersWrap, children: rightTop }) : null, hasBottomItems ? (_jsxs("div", { className: styles.bottom, "data-test-id": TEST_IDS.leftBottom, children: [_jsx("div", { className: styles.bottomDivider, children: _jsx(Divider, {}) }), _jsx("div", { className: styles.bottomItems, "data-test-id": TEST_IDS.leftBottomItems, children: settingItems?.items.map(item => (_createElement(CardServiceLight, { ...(item.href ? { href: item.href, as: 'a' } : { as: 'button', type: 'button' }), key: item.id, title: item.label, icon: getLinkEmblem(item), onClick: wrappedSettingClick(item), disabled: item.disabled, className: styles.bottomCard, "data-test-id": TEST_IDS.setting(item.id) }))) })] })) : null] }) })] }) }));
+    // Временная фиксация comfort (см. `HeaderLayout`): `MainMenu` используется и отдельно от
+    // `HeaderLayout`, поэтому объявляем плотность здесь же. Провайдер задаёт контекст (его читают
+    // вложенные поверхности, которые переэмитят тему на своём корне), класс — сам дровер: он тему
+    // из контекста не переэмитит и иначе остался бы с плотностью приложения.
+    const comfortThemeClassName = useThemeClassnames({ density: DENSITY.Comfort });
+    return (
+    // Обёртка провайдера layout-прозрачная (`display: contents`) — меню рендерится порталом,
+    // лишний бокс в строке шапки не нужен.
+    _jsx(ChildThemeProvider, { value: { density: DENSITY.Comfort }, className: styles.densityScope, children: _jsx(DesktopDrawerCustom, { open: open, onClose: handleCloseDrawer, position: 'left', width: 's', className: cn(styles.drawerMobile, comfortThemeClassName), closeOnPopstate: true, "data-test-id": TEST_IDS.drawerMobile, children: _jsxs(AdaptiveProvider, { layoutType: layoutType, children: [_jsx(DesktopDrawerCustom.Header, { title: t('mainMenu.navigation'), className: styles.header }), _jsx(DesktopDrawerCustom.Body, { bodyPadding: false, className: styles.scrollBody, children: _jsxs("div", { className: styles.scrollMobile, children: [leftTop ? _jsx("div", { className: styles.leftTop, children: leftTop }) : null, !isInitialEmptyCards ? (_jsxs("div", { className: styles.main, children: [showSearch && search ? (_jsx("div", { className: styles.searchItem, "data-test-id": TEST_IDS.search, children: _jsx(NavigationSearch, { ref: searchRef, value: search.searchValue, onChange: search.onSearchValueChange, onBlur: search.onBlur, onFocus: search.onFocus, options: search.searchFunctions.map(fn => ({ id: fn.id, label: fn.label })), selectedOption: search.searchFn ?? search.searchFunctions[0]?.id ?? 'fuzzy', onSelectedOptionChange: search.onChangeSearchFn }) })) : null, _jsx(Content, { isMobile: true, onClose: handleCloseDrawer, onLinkChange: onLinkChange, className: styles.content, searchValue: searchValue, banners: rightTop, favorite: favorite, serviceGroups: resultItems })] })) : null, isInitialEmptyCards && rightTop ? _jsx("div", { className: styles.bannersWrap, children: rightTop }) : null, hasBottomItems ? (_jsxs("div", { className: styles.bottom, "data-test-id": TEST_IDS.leftBottom, children: [_jsx("div", { className: styles.bottomDivider, children: _jsx(Divider, {}) }), _jsx("div", { className: styles.bottomItems, "data-test-id": TEST_IDS.leftBottomItems, children: settingItems?.items.map(item => (_createElement(CardServiceLight, { ...(item.href ? { href: item.href, as: 'a' } : { as: 'button', type: 'button' }), key: item.id, title: item.label, icon: getLinkEmblem(item), onClick: wrappedSettingClick(item), disabled: item.disabled, className: styles.bottomCard, "data-test-id": TEST_IDS.setting(item.id) }))) })] })) : null] }) })] }) }) }));
 }

package/dist/esm/components/MainMenu/helperComponents/MenuMobile/styles.module.css

@@ -1,7 +1,11 @@
+.densityScope{
+  display:contents;
+}
+
 .drawerMobile{
   height:100%;
   min-height:0;
-  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3))) !important;
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3))) !important;
 }
 
 .scrollBody{
@@ -50,7 +54,7 @@
   flex-direction:column;
   gap:var(--sn-primitive-dimension-4, 4px);
   padding-bottom:var(--sn-primitive-dimension-4, 4px);
-  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
 }
 
 .bannersWrap{
@@ -72,7 +76,7 @@
 
 .bottomDivider{
   width:100%;
-  padding:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px))) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+  padding:var(--sn-list-anatomy-size-s-listItem-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px))))) var(--sn-list-anatomy-size-s-listItem-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px)))));
 }
 
 .bottomItems{

package/dist/esm/components/MainMenu/helperComponents/NavigationSearch/styles.module.css

@@ -10,8 +10,8 @@
   display:flex;
   flex:1 0 0;
   flex-direction:column;
-  min-height:var(--sn-field-anatomy-size-m-fieldContainer-minHeight, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
-  padding:var(--sn-field-anatomy-size-m-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px))) var(--sn-field-anatomy-size-m-fieldContainer-paddingRight, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px))) var(--sn-field-anatomy-size-m-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px))) var(--sn-field-anatomy-size-m-fieldContainer-paddingLeft, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+  min-height:var(--sn-field-anatomy-size-m-fieldContainer-minHeight, var(--sn-density-size-m, var(--sn-density-scale-100-m, var(--sn-platform-comfort-scale-100-m, var(--sn-primitive-dimension-40, 40px)))));
+  padding:var(--sn-field-anatomy-size-m-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-platform-comfort-spacing-control-container-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))) var(--sn-field-anatomy-size-m-fieldContainer-paddingRight, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-platform-comfort-spacing-control-container-horizontal-m, var(--sn-platform-comfort-scale-050-xs, var(--sn-primitive-dimension-8, 8px))))) var(--sn-field-anatomy-size-m-fieldContainer-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-platform-comfort-spacing-control-container-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))) var(--sn-field-anatomy-size-m-fieldContainer-paddingLeft, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-platform-comfort-spacing-control-container-horizontal-m, var(--sn-platform-comfort-scale-050-xs, var(--sn-primitive-dimension-8, 8px)))));
 }
 
 .search{
@@ -28,7 +28,7 @@
   opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
 }
 .search[data-size=m]{
-  padding:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px))) 0;
+  padding:var(--sn-field-anatomy-size-m-fieldContainer-contentWrapper-verticalPadding, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))) 0;
 }
 
 .root{
@@ -37,8 +37,8 @@
   align-items:stretch;
   box-sizing:border-box;
   width:100%;
-  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
-  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+  border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
 }
 .root[data-mobile]{
   flex-direction:row;
@@ -47,7 +47,7 @@
   background-color:transparent;
 }
 .root[data-mobile][data-open-search]{
-  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
 }
 .root[data-mobile] .searchWrapper{
   padding:0;
@@ -70,6 +70,6 @@
 }
 
 .mobileSearchButton[data-size=m]{
-  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
-  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+  border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
 }