@cloud-ru/ds-uikit-product-header 1.5.0 → 1.5.1-preview-a2208aeb.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/dist/cjs/components/HeaderLayout/HeaderLayout.js +12 -1
  2. package/dist/cjs/components/HeaderLayout/styles.module.css +1 -1
  3. package/dist/cjs/components/Logo/Logo.js +3 -3
  4. package/dist/cjs/components/Logo/styles.module.css +1 -1
  5. package/dist/cjs/components/MainMenu/helperComponents/Banners/styles.module.css +1 -1
  6. package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/styles.module.css +1 -1
  7. package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SubCategory/styles.module.css +1 -1
  8. package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.css +13 -13
  9. package/dist/cjs/components/MainMenu/helperComponents/Favorites/components/EmptyState/styles.module.css +2 -2
  10. package/dist/cjs/components/MainMenu/helperComponents/Favorites/styles.module.css +5 -5
  11. package/dist/cjs/components/MainMenu/helperComponents/MenuDesktop/styles.module.css +3 -3
  12. package/dist/cjs/components/MainMenu/helperComponents/MenuHeaderBrand/styles.module.css +1 -1
  13. package/dist/cjs/components/MainMenu/helperComponents/MenuMobile/MenuMobile.js +6 -1
  14. package/dist/cjs/components/MainMenu/helperComponents/MenuMobile/styles.module.css +5 -1
  15. package/dist/cjs/components/MainMenu/helperComponents/ServiceCard/styles.module.css +1 -1
  16. package/dist/cjs/components/PlatformLogo/styles.module.css +2 -2
  17. package/dist/cjs/style.css +37 -33
  18. package/dist/esm/components/HeaderLayout/HeaderLayout.js +12 -1
  19. package/dist/esm/components/HeaderLayout/styles.module.css +1 -1
  20. package/dist/esm/components/Logo/Logo.js +3 -3
  21. package/dist/esm/components/Logo/styles.module.css +1 -1
  22. package/dist/esm/components/MainMenu/helperComponents/Banners/styles.module.css +1 -1
  23. package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/styles.module.css +1 -1
  24. package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SubCategory/styles.module.css +1 -1
  25. package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.css +13 -13
  26. package/dist/esm/components/MainMenu/helperComponents/Favorites/components/EmptyState/styles.module.css +2 -2
  27. package/dist/esm/components/MainMenu/helperComponents/Favorites/styles.module.css +5 -5
  28. package/dist/esm/components/MainMenu/helperComponents/MenuDesktop/styles.module.css +3 -3
  29. package/dist/esm/components/MainMenu/helperComponents/MenuHeaderBrand/styles.module.css +1 -1
  30. package/dist/esm/components/MainMenu/helperComponents/MenuMobile/MenuMobile.js +6 -1
  31. package/dist/esm/components/MainMenu/helperComponents/MenuMobile/styles.module.css +5 -1
  32. package/dist/esm/components/MainMenu/helperComponents/ServiceCard/styles.module.css +1 -1
  33. package/dist/esm/components/PlatformLogo/styles.module.css +2 -2
  34. package/dist/esm/style.css +37 -33
  35. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  36. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  37. package/package.json +28 -28
  38. package/src/components/HeaderLayout/HeaderLayout.tsx +19 -2
  39. package/src/components/Logo/Logo.tsx +4 -4
  40. package/src/components/MainMenu/helperComponents/MenuMobile/MenuMobile.tsx +52 -46
  41. package/src/components/MainMenu/helperComponents/MenuMobile/styles.module.scss +6 -0
package/dist/cjs/components/HeaderLayout/HeaderLayout.js CHANGED
@@ -6,12 +6,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.HeaderLayout = HeaderLayout;
7
7
  const jsx_runtime_1 = require("react/jsx-runtime");
8
8
  const divider_1 = require("@cloud-ru/ds-divider");
9
+ const theme_1 = require("@cloud-ru/ds-theme");
9
10
  const utils_1 = require("@cloud-ru/ds-utils");
10
11
  const classnames_1 = __importDefault(require("classnames"));
12
+ const react_1 = require("react");
11
13
  const constants_1 = require("../../constants");
12
14
  const useMobileLayout_1 = require("../../hooks/useMobileLayout");
13
15
  const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
14
16
  function HeaderLayout({ menu, logo, select, breadcrumbs, toolbar, className, ...rest }) {
15
17
  const isMobile = (0, useMobileLayout_1.useMobileLayout)();
16
- return ((0, jsx_runtime_1.jsxs)("header", { className: (0, classnames_1.default)(styles_module_scss_1.default.header, className), ...(0, utils_1.extractSupportProps)({ 'data-test-id': constants_1.TEST_IDS.headerLayout.root, ...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: [logo && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: logo }), menu && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), menu] })), !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.jsx)("div", { className: styles_module_scss_1.default.bottom, children: breadcrumbs })] }));
18
+ const headerRef = (0, react_1.useRef)(null);
19
+ 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)({ 'data-test-id': constants_1.TEST_IDS.headerLayout.root, ...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: [logo && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: logo }), menu && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'vertical' }), menu] })), !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.jsx)("div", { className: styles_module_scss_1.default.bottom, children: breadcrumbs })] }));
20
+ // Временная фиксация: на mobile прикладная тема переключилась на compact, а шапка сверстана
21
+ // под comfort и на compact ещё не переехала. Провайдер (а не класс на `<header>`) нужен потому,
22
+ // что поверхности шапки — порталы: они переэмитят набор `sn-*` из контекста на своём корне,
23
+ // и класс, поставленный поверх, проиграл бы их собственному.
24
+ if (isMobile) {
25
+ return ((0, jsx_runtime_1.jsx)(theme_1.ChildThemeProvider, { value: { density: theme_1.DENSITY.Comfort }, rootRef: headerRef, children: header }));
26
+ }
27
+ return header;
17
28
  }
package/dist/cjs/components/HeaderLayout/styles.module.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .header{
2
2
  box-sizing:border-box;
3
- background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
3
+ background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
4
4
  }
5
5
 
6
6
  .top{
package/dist/cjs/components/Logo/Logo.js CHANGED
@@ -17,7 +17,7 @@ const constants_1 = require("./constants");
17
17
  const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
18
18
  function Logo({ path, loading, mode, href, onClick, className, tooltip, ...rest }) {
19
19
  const [error, setError] = (0, react_1.useState)(false);
20
- const brandCThemeClassName = (0, theme_1.useThemeClassnames)({ brand: 'brandC' });
20
+ const logoThemeClassName = (0, theme_1.useThemeClassnames)({ brand: 'hrGreen' });
21
21
  (0, react_1.useEffect)(() => {
22
22
  setError(false);
23
23
  }, [path, loading]);
@@ -29,7 +29,7 @@ function Logo({ path, loading, mode, href, onClick, className, tooltip, ...rest
29
29
  setError(true);
30
30
  } }));
31
31
  }
32
- return ((0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.logoWrap, children: [(0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.iconStack, children: [(0, jsx_runtime_1.jsx)(logos_1.CloudLogo, { size: 24, className: (0, classnames_1.default)(styles_module_scss_1.default.icon, brandCThemeClassName, styles_module_scss_1.default.iconDefault) }), (0, jsx_runtime_1.jsx)(product_1.HomeFilledSVG, { size: 24, className: (0, classnames_1.default)(styles_module_scss_1.default.icon, brandCThemeClassName, styles_module_scss_1.default.iconHover) })] }), mode && mode !== constants_1.HEADER_LOGO_MODE.Prod && ((0, jsx_runtime_1.jsx)(promo_tag_1.PromoTag, { as: 'span', label: mode, size: 'xs', appearance: constants_1.MAP_LOGO_MODE_TO_APPEARANCE[mode] }))] }));
33
- }, [error, mode, path, brandCThemeClassName]);
32
+ return ((0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.logoWrap, children: [(0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.iconStack, children: [(0, jsx_runtime_1.jsx)(logos_1.CloudLogo, { size: 24, className: (0, classnames_1.default)(styles_module_scss_1.default.icon, logoThemeClassName, styles_module_scss_1.default.iconDefault) }), (0, jsx_runtime_1.jsx)(product_1.HomeFilledSVG, { size: 24, className: (0, classnames_1.default)(styles_module_scss_1.default.icon, logoThemeClassName, styles_module_scss_1.default.iconHover) })] }), mode && mode !== constants_1.HEADER_LOGO_MODE.Prod && ((0, jsx_runtime_1.jsx)(promo_tag_1.PromoTag, { as: 'span', label: mode, size: 'xs', appearance: constants_1.MAP_LOGO_MODE_TO_APPEARANCE[mode] }))] }));
33
+ }, [error, mode, path, logoThemeClassName]);
34
34
  return ((0, jsx_runtime_1.jsx)(HeaderButton_1.HeaderButton, { as: 'a', tooltip: tooltip, className: (0, classnames_1.default)(styles_module_scss_1.default.logo, className), href: href, tabIndex: 0, onClick: onClick, loading: loading, icon: logo, ...(0, utils_1.extractDataTestProps)(rest) }));
35
35
  }
package/dist/cjs/components/Logo/styles.module.css CHANGED
@@ -19,7 +19,7 @@
19
19
  .icon{
20
20
  transform-origin:50% center;
21
21
  transform-box:fill-box;
22
- 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))));
22
+ color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
23
23
  transition:opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
24
24
  }
25
25
 
package/dist/cjs/components/MainMenu/helperComponents/Banners/styles.module.css CHANGED
@@ -21,7 +21,7 @@
21
21
  .contentRow{
22
22
  position:relative;
23
23
  display:flex;
24
- gap:var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px));
24
+ gap:var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px)));
25
25
  align-items:center;
26
26
  box-sizing:border-box;
27
27
  width:100%;
package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/styles.module.css CHANGED
@@ -16,7 +16,7 @@
16
16
  display:flex;
17
17
  flex-shrink:0;
18
18
  width:264px;
19
- height:var(--sn-segmentControl-anatomy-size-m-segment-container-height, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
19
+ height:var(--sn-segmentControl-anatomy-size-m-segment-container-height, var(--sn-density-size-m, var(--sn-density-scale-100-m, var(--sn-platform-comfort-scale-100-m, var(--sn-primitive-dimension-40, 40px)))));
20
20
  }
21
21
  .segmentControlSkeleton[data-mobile]{
22
22
  width:100%;
package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SubCategory/styles.module.css CHANGED
@@ -12,7 +12,7 @@
12
12
  .subcategory:has([data-subcategory-body]), .subcategory[data-title-only]{
13
13
  grid-column:1/-1;
14
14
  padding:0 var(--sn-primitive-dimension-4, 4px);
15
- border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
15
+ border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
16
16
  background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
17
17
  }
18
18
  .subcategory[data-title-only]{
package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.css CHANGED
@@ -19,7 +19,7 @@
19
19
  min-width:0;
20
20
  min-height:var(--sn-primitive-dimension-40, 40px);
21
21
  padding-inline:var(--sn-primitive-dimension-8, 8px);
22
- border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
22
+ border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
23
23
  }
24
24
  .header:focus-visible .headerActions, .header:has(:focus-visible) .headerActions{
25
25
  pointer-events:auto;
@@ -53,8 +53,8 @@
53
53
  width:100%;
54
54
  min-width:0;
55
55
  padding:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-12, 12px);
56
- border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
57
- background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
56
+ border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
57
+ background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
58
58
  }
59
59
  .group[data-drag-preview]{
60
60
  cursor:grabbing;
@@ -71,7 +71,7 @@
71
71
  .groupDragPreview{
72
72
  cursor:grabbing;
73
73
  container-type:inline-size;
74
- border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
74
+ border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
75
75
  }
76
76
 
77
77
  .groupDragPreviewHeader{
@@ -168,7 +168,7 @@
168
168
  }
169
169
  [data-is-highlighted] .decorationBackground{
170
170
  inset:var(--highlight-border-width) var(--highlight-border-width) var(--highlight-border-width) var(--highlight-border-width);
171
- border-radius:calc(var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px)) - var(--highlight-border-width));
171
+ border-radius:calc(var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px))) - var(--highlight-border-width));
172
172
  background:linear-gradient(90deg, var(--highlight-background-color-from) 2.29%, var(--highlight-background-color-to) 97.84%), var(--highlight-background-color);
173
173
  }
174
174
 
@@ -187,35 +187,35 @@
187
187
  }
188
188
  .colorMarker[data-block-color=neutral]{
189
189
  visibility:visible;
190
- background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
190
+ background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
191
191
  }
192
192
  .colorMarker[data-block-color=primary]{
193
193
  visibility:visible;
194
- background-color: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))));
194
+ background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #caeadb));
195
195
  }
196
196
  .colorMarker[data-block-color=orange]{
197
197
  visibility:visible;
198
- background-color:var(--sn-theme-color-orange-decor, var(--sn-primitive-color-orange-80, #fbdeb6));
198
+ background-color:var(--sn-theme-color-orange-decor, var(--sn-brand-palette-orange-80, #fbdeb6));
199
199
  }
200
200
  .colorMarker[data-block-color=yellow]{
201
201
  visibility:visible;
202
- background-color:var(--sn-theme-color-yellow-decor, var(--sn-primitive-color-yellow-80, #f0dfb1));
202
+ background-color:var(--sn-theme-color-yellow-decor, var(--sn-brand-palette-yellow-80, #f0dfb1));
203
203
  }
204
204
  .colorMarker[data-block-color=green]{
205
205
  visibility:visible;
206
- background-color:var(--sn-theme-color-green-decor, var(--sn-primitive-color-green-80, #d2ead0));
206
+ background-color:var(--sn-theme-color-green-decor, var(--sn-brand-palette-green-80, #d2ead0));
207
207
  }
208
208
  .colorMarker[data-block-color=blue]{
209
209
  visibility:visible;
210
- background-color:var(--sn-theme-color-blue-decor, var(--sn-primitive-color-blue-80, #d6e2f4));
210
+ background-color:var(--sn-theme-color-blue-decor, var(--sn-brand-palette-blue-80, #d6e2f4));
211
211
  }
212
212
  .colorMarker[data-block-color=violet]{
213
213
  visibility:visible;
214
- background-color:var(--sn-theme-color-violet-decor, var(--sn-primitive-color-violet-80, #e6dcf3));
214
+ background-color:var(--sn-theme-color-violet-decor, var(--sn-brand-palette-violet-80, #e6dcf3));
215
215
  }
216
216
  .colorMarker[data-block-color=pink]{
217
217
  visibility:visible;
218
- background-color:var(--sn-theme-color-pink-decor, var(--sn-primitive-color-pink-80, #f5d9e1));
218
+ background-color:var(--sn-theme-color-pink-decor, var(--sn-brand-palette-pink-80, #f5d9e1));
219
219
  }
220
220
 
221
221
  .skeletonTitle{
package/dist/cjs/components/MainMenu/helperComponents/Favorites/components/EmptyState/styles.module.css CHANGED
@@ -2,8 +2,8 @@
2
2
  flex-shrink:0;
3
3
  width:var(--sn-primitive-dimension-40, 40px);
4
4
  height:var(--sn-primitive-dimension-40, 40px);
5
- fill:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
6
- stroke:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
5
+ fill:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
6
+ stroke:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
7
7
  }
8
8
 
9
9
  .emptyState{
package/dist/cjs/components/MainMenu/helperComponents/Favorites/styles.module.css CHANGED
@@ -7,8 +7,8 @@
7
7
  width:100%;
8
8
  min-height:var(--sn-primitive-dimension-88, 88px);
9
9
  padding:var(--sn-primitive-dimension-8, 8px) 0 0;
10
- border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
11
- background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
10
+ border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
11
+ background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
12
12
  }
13
13
 
14
14
  .header{
@@ -35,8 +35,8 @@
35
35
  min-height:var(--sn-primitive-dimension-44, 44px);
36
36
  }
37
37
  .listScroll[data-insert-new] [data-favorite]{
38
- fill: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))));
39
- stroke:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-45, var(--sn-brandRole-color-brandA-45, var(--sn-primitive-color-brandA-45, #22775b))));
38
+ fill:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
39
+ stroke:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-40, #22775b));
40
40
  }
41
41
 
42
42
  .dropTarget{
@@ -89,5 +89,5 @@
89
89
  .skeletonItem{
90
90
  width:100%;
91
91
  height:var(--sn-primitive-dimension-24, 24px);
92
- border-radius:var(--sn-density-radius-3xs, var(--sn-primitive-dimension-2, 2px));
92
+ border-radius:var(--sn-density-radius-3xs, var(--sn-platform-comfort-radius-3xs, var(--sn-primitive-dimension-2, 2px)));
93
93
  }
package/dist/cjs/components/MainMenu/helperComponents/MenuDesktop/styles.module.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .drawer{
2
- border-radius:var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderTopLeftRadius, var(--sn-primitive-dimension-0, 0)) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderTopRightRadius, var(--sn-brand-anatomy-radius-window-m, var(--sn-primitive-dimension-4, 4px))) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderBottomRightRadius, var(--sn-brand-anatomy-radius-window-m, var(--sn-primitive-dimension-4, 4px))) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderBottomLeftRadius, var(--sn-primitive-dimension-0, 0));
2
+ border-radius:var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderTopLeftRadius, var(--sn-primitive-dimension-0, 0px)) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderTopRightRadius, var(--sn-brand-anatomy-radius-window-m, var(--sn-primitive-dimension-4, 4px))) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderBottomRightRadius, var(--sn-brand-anatomy-radius-window-m, var(--sn-primitive-dimension-4, 4px))) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderBottomLeftRadius, var(--sn-primitive-dimension-0, 0px));
3
3
  }
4
4
 
5
5
  .scroll{
@@ -27,7 +27,7 @@
27
27
  .drawerRoot [data-test-id=header__drawer-menu][data-small][data-position][data-width]{
28
28
  box-sizing:border-box;
29
29
  width:100%;
30
- max-width:calc(263px + var(--sn-drawer-anatomy-container-vertical-positionLeft-paddingRight, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))));
30
+ max-width:calc(263px + var(--sn-drawer-anatomy-container-vertical-positionLeft-paddingRight, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))));
31
31
  }
32
32
  .drawerRoot [data-test-id=header__drawer-menu][data-small][data-position][data-width] .left{
33
33
  width:100%;
@@ -66,7 +66,7 @@
66
66
  --snack-menu-left-width:263px;
67
67
  position:relative;
68
68
  height:100vh;
69
- background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
69
+ background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
70
70
  }
71
71
 
72
72
  .menuBody{
package/dist/cjs/components/MainMenu/helperComponents/MenuHeaderBrand/styles.module.css CHANGED
@@ -3,7 +3,7 @@
3
3
  gap:var(--sn-primitive-dimension-4, 4px);
4
4
  align-items:center;
5
5
  box-sizing:border-box;
6
- background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
6
+ background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
7
7
  }
8
8
 
9
9
  .closeButton{
package/dist/cjs/components/MainMenu/helperComponents/MenuMobile/MenuMobile.js CHANGED
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.MenuMobile = MenuMobile;
7
7
  const jsx_runtime_1 = require("react/jsx-runtime");
8
8
  const divider_1 = require("@cloud-ru/ds-divider");
9
+ const theme_1 = require("@cloud-ru/ds-theme");
9
10
  const utils_1 = require("@cloud-ru/ds-utils");
10
11
  const react_1 = require("react");
11
12
  const constants_1 = require("../../../../constants");
@@ -39,5 +40,9 @@ function MenuMobile({ open: openProp, setOpen: setOpenProp, settingItems, platfo
39
40
  const handleClose = (0, react_1.useCallback)(() => {
40
41
  setOpen(false);
41
42
  }, [setOpen]);
42
- return ((0, jsx_runtime_1.jsx)(mobileOverlays_1.MobileDrawerCustom, { open: open, onClose: handleClose, position: 'bottom', className: styles_module_scss_1.default.drawerMobile, swipeEnabled: false, "data-test-id": constants_1.TEST_IDS.mainMenu.drawerMobile, closeOnPopstate: true, snapPoints: constants_1.BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, disableMotions: true, children: (0, jsx_runtime_1.jsx)(ScrollWithAnimatedStickyPanel_1.ScrollWithAnimatedStickyPanel, { panel: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MenuHeaderBrand_1.MenuHeaderBrand, { logo: logo, onClose: handleClose, className: styles_module_scss_1.default.menuHeader }), (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal' })] }), children: (0, jsx_runtime_1.jsxs)(MountAnimation_1.MountAnimation, { className: styles_module_scss_1.default.scrollMobile, type: 'fade-slide-up', children: [leftTop && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.rightContent, children: leftTop }), search && (0, jsx_runtime_1.jsx)(Search_1.Search, { ...search, ref: searchRef, isMobile: true }), !isSearching && favorite && (0, jsx_runtime_1.jsx)(Favorites_1.Favorites, { favorite: favorite, allServiceGroups: allServiceGroups, isMobile: true }), hasSegments && ((0, jsx_runtime_1.jsx)(useMainMenuDnd_1.MainMenuDndContext, { children: (0, jsx_runtime_1.jsx)(Content_1.Content, { isMobile: true, className: styles_module_scss_1.default.rightContent, searchValue: search && search.value, rightTop: rightTop, favorite: favorite, segments: segments, searchGroups: resultItems, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, onSegmentServiceClick: onSegmentServiceClick, loading: loading }) })), !isSearching && hasBottomItems && (0, jsx_runtime_1.jsx)(MenuBottom_1.MenuBottom, { settingItems: settingItems, leftBottom: leftBottom })] }) }) }));
43
+ return (
44
+ // Временная фиксация comfort (см. `HeaderLayout`): `MainMenu` используется и отдельно от
45
+ // `HeaderLayout`, поэтому объявляем плотность здесь же. Обёртка провайдера layout-прозрачная
46
+ // (`display: contents`) — меню рендерится порталом, лишний бокс в строке шапки не нужен.
47
+ (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)(mobileOverlays_1.MobileDrawerCustom, { open: open, onClose: handleClose, position: 'bottom', className: styles_module_scss_1.default.drawerMobile, swipeEnabled: false, "data-test-id": constants_1.TEST_IDS.mainMenu.drawerMobile, closeOnPopstate: true, snapPoints: constants_1.BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, disableMotions: true, children: (0, jsx_runtime_1.jsx)(ScrollWithAnimatedStickyPanel_1.ScrollWithAnimatedStickyPanel, { panel: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MenuHeaderBrand_1.MenuHeaderBrand, { logo: logo, onClose: handleClose, className: styles_module_scss_1.default.menuHeader }), (0, jsx_runtime_1.jsx)(divider_1.Divider, { orientation: 'horizontal' })] }), children: (0, jsx_runtime_1.jsxs)(MountAnimation_1.MountAnimation, { className: styles_module_scss_1.default.scrollMobile, type: 'fade-slide-up', children: [leftTop && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.rightContent, children: leftTop }), search && (0, jsx_runtime_1.jsx)(Search_1.Search, { ...search, ref: searchRef, isMobile: true }), !isSearching && favorite && (0, jsx_runtime_1.jsx)(Favorites_1.Favorites, { favorite: favorite, allServiceGroups: allServiceGroups, isMobile: true }), hasSegments && ((0, jsx_runtime_1.jsx)(useMainMenuDnd_1.MainMenuDndContext, { children: (0, jsx_runtime_1.jsx)(Content_1.Content, { isMobile: true, className: styles_module_scss_1.default.rightContent, searchValue: search && search.value, rightTop: rightTop, favorite: favorite, segments: segments, searchGroups: resultItems, segmentPrefs: segmentPrefs, activeSegmentId: activeSegmentId, onActiveSegmentChange: onActiveSegmentChange, onSegmentOrderChange: onSegmentOrderChange, onSegmentExpandedChange: onSegmentExpandedChange, onSegmentServiceClick: onSegmentServiceClick, loading: loading }) })), !isSearching && hasBottomItems && (0, jsx_runtime_1.jsx)(MenuBottom_1.MenuBottom, { settingItems: settingItems, leftBottom: leftBottom })] }) }) }) }));
43
48
  }
package/dist/cjs/components/MainMenu/helperComponents/MenuMobile/styles.module.css CHANGED
@@ -1,3 +1,7 @@
1
+ .densityScope{
2
+ display:contents;
3
+ }
4
+
1
5
  .menuHeader{
2
6
  height:var(--sn-primitive-dimension-40, 40px);
3
7
  padding:0 var(--sn-primitive-dimension-4, 4px);
@@ -11,7 +15,7 @@
11
15
  }
12
16
 
13
17
  .drawerMobile{
14
- background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3))) !important;
18
+ background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3))) !important;
15
19
  }
16
20
 
17
21
  .scrollMobile{
package/dist/cjs/components/MainMenu/helperComponents/ServiceCard/styles.module.css CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  .dragCardPreview{
6
6
  cursor:grabbing;
7
- border-radius:var(--sn-density-radius-3xs, var(--sn-primitive-dimension-2, 2px));
7
+ border-radius:var(--sn-density-radius-3xs, var(--sn-platform-comfort-radius-3xs, var(--sn-primitive-dimension-2, 2px)));
8
8
  }
9
9
 
10
10
  .draggableCard{
package/dist/cjs/components/PlatformLogo/styles.module.css CHANGED
@@ -4,6 +4,6 @@
4
4
  justify-content:center;
5
5
  width:var(--sn-primitive-dimension-24, 24px);
6
6
  height:var(--sn-primitive-dimension-24, 24px);
7
- border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
8
- background:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
7
+ border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
8
+ background:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
9
9
  }
package/dist/cjs/style.css CHANGED
@@ -3,7 +3,7 @@
3
3
  }
4
4
  .header{
5
5
  box-sizing:border-box;
6
- background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
6
+ background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
7
7
  }
8
8
 
9
9
  .top{
@@ -59,7 +59,7 @@
59
59
  .icon{
60
60
  transform-origin:50% center;
61
61
  transform-box:fill-box;
62
- 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))));
62
+ color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
63
63
  transition:opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
64
64
  }
65
65
 
@@ -114,7 +114,7 @@
114
114
  .contentRow{
115
115
  position:relative;
116
116
  display:flex;
117
- gap:var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px));
117
+ gap:var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px)));
118
118
  align-items:center;
119
119
  box-sizing:border-box;
120
120
  width:100%;
@@ -171,7 +171,7 @@
171
171
  display:flex;
172
172
  flex-shrink:0;
173
173
  width:264px;
174
- height:var(--sn-segmentControl-anatomy-size-m-segment-container-height, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
174
+ height:var(--sn-segmentControl-anatomy-size-m-segment-container-height, var(--sn-density-size-m, var(--sn-density-scale-100-m, var(--sn-platform-comfort-scale-100-m, var(--sn-primitive-dimension-40, 40px)))));
175
175
  }
176
176
  .segmentControlSkeleton[data-mobile]{
177
177
  width:100%;
@@ -211,7 +211,7 @@
211
211
  .subcategory:has([data-subcategory-body]), .subcategory[data-title-only]{
212
212
  grid-column:1/-1;
213
213
  padding:0 var(--sn-primitive-dimension-4, 4px);
214
- border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
214
+ border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
215
215
  background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
216
216
  }
217
217
  .subcategory[data-title-only]{
@@ -293,7 +293,7 @@
293
293
  min-width:0;
294
294
  min-height:var(--sn-primitive-dimension-40, 40px);
295
295
  padding-inline:var(--sn-primitive-dimension-8, 8px);
296
- border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
296
+ border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
297
297
  }
298
298
  .header:focus-visible .headerActions, .header:has(:focus-visible) .headerActions{
299
299
  pointer-events:auto;
@@ -327,8 +327,8 @@
327
327
  width:100%;
328
328
  min-width:0;
329
329
  padding:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-12, 12px);
330
- border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
331
- background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
330
+ border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
331
+ background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
332
332
  }
333
333
  .group[data-drag-preview]{
334
334
  cursor:grabbing;
@@ -345,7 +345,7 @@
345
345
  .groupDragPreview{
346
346
  cursor:grabbing;
347
347
  container-type:inline-size;
348
- border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
348
+ border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
349
349
  }
350
350
 
351
351
  .groupDragPreviewHeader{
@@ -442,7 +442,7 @@
442
442
  }
443
443
  [data-is-highlighted] .decorationBackground{
444
444
  inset:var(--highlight-border-width) var(--highlight-border-width) var(--highlight-border-width) var(--highlight-border-width);
445
- border-radius:calc(var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px)) - var(--highlight-border-width));
445
+ border-radius:calc(var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px))) - var(--highlight-border-width));
446
446
  background:linear-gradient(90deg, var(--highlight-background-color-from) 2.29%, var(--highlight-background-color-to) 97.84%), var(--highlight-background-color);
447
447
  }
448
448
 
@@ -461,35 +461,35 @@
461
461
  }
462
462
  .colorMarker[data-block-color=neutral]{
463
463
  visibility:visible;
464
- background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
464
+ background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
465
465
  }
466
466
  .colorMarker[data-block-color=primary]{
467
467
  visibility:visible;
468
- background-color: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))));
468
+ background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #caeadb));
469
469
  }
470
470
  .colorMarker[data-block-color=orange]{
471
471
  visibility:visible;
472
- background-color:var(--sn-theme-color-orange-decor, var(--sn-primitive-color-orange-80, #fbdeb6));
472
+ background-color:var(--sn-theme-color-orange-decor, var(--sn-brand-palette-orange-80, #fbdeb6));
473
473
  }
474
474
  .colorMarker[data-block-color=yellow]{
475
475
  visibility:visible;
476
- background-color:var(--sn-theme-color-yellow-decor, var(--sn-primitive-color-yellow-80, #f0dfb1));
476
+ background-color:var(--sn-theme-color-yellow-decor, var(--sn-brand-palette-yellow-80, #f0dfb1));
477
477
  }
478
478
  .colorMarker[data-block-color=green]{
479
479
  visibility:visible;
480
- background-color:var(--sn-theme-color-green-decor, var(--sn-primitive-color-green-80, #d2ead0));
480
+ background-color:var(--sn-theme-color-green-decor, var(--sn-brand-palette-green-80, #d2ead0));
481
481
  }
482
482
  .colorMarker[data-block-color=blue]{
483
483
  visibility:visible;
484
- background-color:var(--sn-theme-color-blue-decor, var(--sn-primitive-color-blue-80, #d6e2f4));
484
+ background-color:var(--sn-theme-color-blue-decor, var(--sn-brand-palette-blue-80, #d6e2f4));
485
485
  }
486
486
  .colorMarker[data-block-color=violet]{
487
487
  visibility:visible;
488
- background-color:var(--sn-theme-color-violet-decor, var(--sn-primitive-color-violet-80, #e6dcf3));
488
+ background-color:var(--sn-theme-color-violet-decor, var(--sn-brand-palette-violet-80, #e6dcf3));
489
489
  }
490
490
  .colorMarker[data-block-color=pink]{
491
491
  visibility:visible;
492
- background-color:var(--sn-theme-color-pink-decor, var(--sn-primitive-color-pink-80, #f5d9e1));
492
+ background-color:var(--sn-theme-color-pink-decor, var(--sn-brand-palette-pink-80, #f5d9e1));
493
493
  }
494
494
 
495
495
  .skeletonTitle{
@@ -524,8 +524,8 @@
524
524
  flex-shrink:0;
525
525
  width:var(--sn-primitive-dimension-40, 40px);
526
526
  height:var(--sn-primitive-dimension-40, 40px);
527
- fill:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
528
- stroke:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
527
+ fill:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
528
+ stroke:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
529
529
  }
530
530
 
531
531
  .emptyState{
@@ -550,8 +550,8 @@
550
550
  width:100%;
551
551
  min-height:var(--sn-primitive-dimension-88, 88px);
552
552
  padding:var(--sn-primitive-dimension-8, 8px) 0 0;
553
- border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
554
- background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
553
+ border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
554
+ background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
555
555
  }
556
556
 
557
557
  .header{
@@ -578,8 +578,8 @@
578
578
  min-height:var(--sn-primitive-dimension-44, 44px);
579
579
  }
580
580
  .listScroll[data-insert-new] [data-favorite]{
581
- fill: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))));
582
- stroke:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-45, var(--sn-brandRole-color-brandA-45, var(--sn-primitive-color-brandA-45, #22775b))));
581
+ fill:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
582
+ stroke:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-40, #22775b));
583
583
  }
584
584
 
585
585
  .dropTarget{
@@ -632,7 +632,7 @@
632
632
  .skeletonItem{
633
633
  width:100%;
634
634
  height:var(--sn-primitive-dimension-24, 24px);
635
- border-radius:var(--sn-density-radius-3xs, var(--sn-primitive-dimension-2, 2px));
635
+ border-radius:var(--sn-density-radius-3xs, var(--sn-platform-comfort-radius-3xs, var(--sn-primitive-dimension-2, 2px)));
636
636
  }
637
637
  .bottomItems{
638
638
  width:100%;
@@ -648,7 +648,7 @@
648
648
  margin:var(--sn-primitive-dimension-2, 2px) 0;
649
649
  }
650
650
  .drawer{
651
- border-radius:var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderTopLeftRadius, var(--sn-primitive-dimension-0, 0)) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderTopRightRadius, var(--sn-brand-anatomy-radius-window-m, var(--sn-primitive-dimension-4, 4px))) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderBottomRightRadius, var(--sn-brand-anatomy-radius-window-m, var(--sn-primitive-dimension-4, 4px))) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderBottomLeftRadius, var(--sn-primitive-dimension-0, 0));
651
+ border-radius:var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderTopLeftRadius, var(--sn-primitive-dimension-0, 0px)) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderTopRightRadius, var(--sn-brand-anatomy-radius-window-m, var(--sn-primitive-dimension-4, 4px))) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderBottomRightRadius, var(--sn-brand-anatomy-radius-window-m, var(--sn-primitive-dimension-4, 4px))) var(--sn-drawer-anatomy-container-vertical-positionLeft-container-borderBottomLeftRadius, var(--sn-primitive-dimension-0, 0px));
652
652
  }
653
653
 
654
654
  .scroll{
@@ -676,7 +676,7 @@
676
676
  .drawerRoot [data-test-id=header__drawer-menu][data-small][data-position][data-width]{
677
677
  box-sizing:border-box;
678
678
  width:100%;
679
- max-width:calc(263px + var(--sn-drawer-anatomy-container-vertical-positionLeft-paddingRight, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))));
679
+ max-width:calc(263px + var(--sn-drawer-anatomy-container-vertical-positionLeft-paddingRight, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))));
680
680
  }
681
681
  .drawerRoot [data-test-id=header__drawer-menu][data-small][data-position][data-width] .left{
682
682
  width:100%;
@@ -715,7 +715,7 @@
715
715
  --snack-menu-left-width:263px;
716
716
  position:relative;
717
717
  height:100vh;
718
- background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
718
+ background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
719
719
  }
720
720
 
721
721
  .menuBody{
@@ -741,7 +741,7 @@
741
741
  gap:var(--sn-primitive-dimension-4, 4px);
742
742
  align-items:center;
743
743
  box-sizing:border-box;
744
- background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
744
+ background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
745
745
  }
746
746
 
747
747
  .closeButton{
@@ -749,6 +749,10 @@
749
749
  flex-shrink:1;
750
750
  justify-content:flex-start;
751
751
  }
752
+ .densityScope{
753
+ display:contents;
754
+ }
755
+
752
756
  .menuHeader{
753
757
  height:var(--sn-primitive-dimension-40, 40px);
754
758
  padding:0 var(--sn-primitive-dimension-4, 4px);
@@ -762,7 +766,7 @@
762
766
  }
763
767
 
764
768
  .drawerMobile{
765
- background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3))) !important;
769
+ background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3))) !important;
766
770
  }
767
771
 
768
772
  .scrollMobile{
@@ -859,7 +863,7 @@
859
863
 
860
864
  .dragCardPreview{
861
865
  cursor:grabbing;
862
- border-radius:var(--sn-density-radius-3xs, var(--sn-primitive-dimension-2, 2px));
866
+ border-radius:var(--sn-density-radius-3xs, var(--sn-platform-comfort-radius-3xs, var(--sn-primitive-dimension-2, 2px)));
863
867
  }
864
868
 
865
869
  .draggableCard{
@@ -879,8 +883,8 @@
879
883
  justify-content:center;
880
884
  width:var(--sn-primitive-dimension-24, 24px);
881
885
  height:var(--sn-primitive-dimension-24, 24px);
882
- border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
883
- background:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
886
+ border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
887
+ background:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
884
888
  }
885
889
  .userMenuDroplist{
886
890
  width:272px;
package/dist/esm/components/HeaderLayout/HeaderLayout.js CHANGED
@@ -1,11 +1,22 @@
1
1
  import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Divider } from '@cloud-ru/ds-divider';
3
+ import { ChildThemeProvider, DENSITY } from '@cloud-ru/ds-theme';
3
4
  import { extractSupportProps } from '@cloud-ru/ds-utils';
4
5
  import cn from 'classnames';
6
+ import { useRef } from 'react';
5
7
  import { TEST_IDS } from '../../constants.js';
6
8
  import { useMobileLayout } from '../../hooks/useMobileLayout.js';
7
9
  import styles from './styles.module.css';
8
10
  export function HeaderLayout({ menu, logo, select, breadcrumbs, toolbar, className, ...rest }) {
9
11
  const isMobile = useMobileLayout();
10
- return (_jsxs("header", { className: cn(styles.header, className), ...extractSupportProps({ 'data-test-id': TEST_IDS.headerLayout.root, ...rest }), children: [_jsxs("div", { className: styles.top, children: [_jsxs("div", { className: styles.left, children: [logo && _jsx(_Fragment, { children: logo }), menu && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical' }), menu] })), !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) && _jsx("div", { className: styles.bottom, children: breadcrumbs })] }));
12
+ const headerRef = useRef(null);
13
+ const header = (_jsxs("header", { ref: headerRef, className: cn(styles.header, className), ...extractSupportProps({ 'data-test-id': TEST_IDS.headerLayout.root, ...rest }), children: [_jsxs("div", { className: styles.top, children: [_jsxs("div", { className: styles.left, children: [logo && _jsx(_Fragment, { children: logo }), menu && (_jsxs(_Fragment, { children: [_jsx(Divider, { orientation: 'vertical' }), menu] })), !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) && _jsx("div", { className: styles.bottom, children: breadcrumbs })] }));
14
+ // Временная фиксация: на mobile прикладная тема переключилась на compact, а шапка сверстана
15
+ // под comfort и на compact ещё не переехала. Провайдер (а не класс на `<header>`) нужен потому,
16
+ // что поверхности шапки — порталы: они переэмитят набор `sn-*` из контекста на своём корне,
17
+ // и класс, поставленный поверх, проиграл бы их собственному.
18
+ if (isMobile) {
19
+ return (_jsx(ChildThemeProvider, { value: { density: DENSITY.Comfort }, rootRef: headerRef, children: header }));
20
+ }
21
+ return header;
11
22
  }
package/dist/esm/components/HeaderLayout/styles.module.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .header{
2
2
  box-sizing:border-box;
3
- background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
3
+ background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
4
4
  }
5
5
 
6
6
  .top{
package/dist/esm/components/Logo/Logo.js CHANGED
@@ -11,7 +11,7 @@ import { HEADER_LOGO_MODE, MAP_LOGO_MODE_TO_APPEARANCE } from './constants.js';
11
11
  import styles from './styles.module.css';
12
12
  export function Logo({ path, loading, mode, href, onClick, className, tooltip, ...rest }) {
13
13
  const [error, setError] = useState(false);
14
- const brandCThemeClassName = useThemeClassnames({ brand: 'brandC' });
14
+ const logoThemeClassName = useThemeClassnames({ brand: 'hrGreen' });
15
15
  useEffect(() => {
16
16
  setError(false);
17
17
  }, [path, loading]);
@@ -23,7 +23,7 @@ export function Logo({ path, loading, mode, href, onClick, className, tooltip, .
23
23
  setError(true);
24
24
  } }));
25
25
  }
26
- return (_jsxs("span", { className: styles.logoWrap, children: [_jsxs("span", { className: styles.iconStack, children: [_jsx(CloudLogo, { size: 24, className: cn(styles.icon, brandCThemeClassName, styles.iconDefault) }), _jsx(HomeFilledSVG, { size: 24, className: cn(styles.icon, brandCThemeClassName, styles.iconHover) })] }), mode && mode !== HEADER_LOGO_MODE.Prod && (_jsx(PromoTag, { as: 'span', label: mode, size: 'xs', appearance: MAP_LOGO_MODE_TO_APPEARANCE[mode] }))] }));
27
- }, [error, mode, path, brandCThemeClassName]);
26
+ return (_jsxs("span", { className: styles.logoWrap, children: [_jsxs("span", { className: styles.iconStack, children: [_jsx(CloudLogo, { size: 24, className: cn(styles.icon, logoThemeClassName, styles.iconDefault) }), _jsx(HomeFilledSVG, { size: 24, className: cn(styles.icon, logoThemeClassName, styles.iconHover) })] }), mode && mode !== HEADER_LOGO_MODE.Prod && (_jsx(PromoTag, { as: 'span', label: mode, size: 'xs', appearance: MAP_LOGO_MODE_TO_APPEARANCE[mode] }))] }));
27
+ }, [error, mode, path, logoThemeClassName]);
28
28
  return (_jsx(HeaderButton, { as: 'a', tooltip: tooltip, className: cn(styles.logo, className), href: href, tabIndex: 0, onClick: onClick, loading: loading, icon: logo, ...extractDataTestProps(rest) }));
29
29
  }