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

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

@@ -19,7 +19,7 @@
 .icon{
   transform-origin:50% center;
   transform-box:fill-box;
-  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));
   transition:opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 }
 

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

@@ -21,7 +21,7 @@
 .contentRow{
   position:relative;
   display:flex;
-  gap:var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px));
+  gap:var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px)));
   align-items:center;
   box-sizing:border-box;
   width:100%;

package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/styles.module.css

@@ -16,7 +16,7 @@
   display:flex;
   flex-shrink:0;
   width:264px;
-  height:var(--sn-segmentControl-anatomy-size-m-segment-container-height, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
+  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)))));
 }
 .segmentControlSkeleton[data-mobile]{
   width:100%;

package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SubCategory/styles.module.css

@@ -12,7 +12,7 @@
 .subcategory:has([data-subcategory-body]), .subcategory[data-title-only]{
   grid-column:1/-1;
   padding:0 var(--sn-primitive-dimension-4, 4px);
-  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+  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-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
 }
 .subcategory[data-title-only]{

package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.css

@@ -19,7 +19,7 @@
   min-width:0;
   min-height:var(--sn-primitive-dimension-40, 40px);
   padding-inline:var(--sn-primitive-dimension-8, 8px);
-  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+  border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
 }
 .header:focus-visible .headerActions, .header:has(:focus-visible) .headerActions{
   pointer-events:auto;
@@ -53,8 +53,8 @@
   width:100%;
   min-width:0;
   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);
-  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)));
 }
 .group[data-drag-preview]{
   cursor:grabbing;
@@ -71,7 +71,7 @@
 .groupDragPreview{
   cursor:grabbing;
   container-type:inline-size;
-  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+  border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
 }
 
 .groupDragPreviewHeader{
@@ -168,7 +168,7 @@
 }
 [data-is-highlighted] .decorationBackground{
   inset:var(--highlight-border-width) var(--highlight-border-width) var(--highlight-border-width) var(--highlight-border-width);
-  border-radius:calc(var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px)) - var(--highlight-border-width));
+  border-radius:calc(var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px))) - var(--highlight-border-width));
   background:linear-gradient(90deg, var(--highlight-background-color-from) 2.29%, var(--highlight-background-color-to) 97.84%), var(--highlight-background-color);
 }
 
@@ -187,35 +187,35 @@
 }
 .colorMarker[data-block-color=neutral]{
   visibility:visible;
-  background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+  background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
 }
 .colorMarker[data-block-color=primary]{
   visibility:visible;
-  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))));
+  background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #caeadb));
 }
 .colorMarker[data-block-color=orange]{
   visibility:visible;
-  background-color:var(--sn-theme-color-orange-decor, var(--sn-primitive-color-orange-80, #fbdeb6));
+  background-color:var(--sn-theme-color-orange-decor, var(--sn-brand-palette-orange-80, #fbdeb6));
 }
 .colorMarker[data-block-color=yellow]{
   visibility:visible;
-  background-color:var(--sn-theme-color-yellow-decor, var(--sn-primitive-color-yellow-80, #f0dfb1));
+  background-color:var(--sn-theme-color-yellow-decor, var(--sn-brand-palette-yellow-80, #f0dfb1));
 }
 .colorMarker[data-block-color=green]{
   visibility:visible;
-  background-color:var(--sn-theme-color-green-decor, var(--sn-primitive-color-green-80, #d2ead0));
+  background-color:var(--sn-theme-color-green-decor, var(--sn-brand-palette-green-80, #d2ead0));
 }
 .colorMarker[data-block-color=blue]{
   visibility:visible;
-  background-color:var(--sn-theme-color-blue-decor, var(--sn-primitive-color-blue-80, #d6e2f4));
+  background-color:var(--sn-theme-color-blue-decor, var(--sn-brand-palette-blue-80, #d6e2f4));
 }
 .colorMarker[data-block-color=violet]{
   visibility:visible;
-  background-color:var(--sn-theme-color-violet-decor, var(--sn-primitive-color-violet-80, #e6dcf3));
+  background-color:var(--sn-theme-color-violet-decor, var(--sn-brand-palette-violet-80, #e6dcf3));
 }
 .colorMarker[data-block-color=pink]{
   visibility:visible;
-  background-color:var(--sn-theme-color-pink-decor, var(--sn-primitive-color-pink-80, #f5d9e1));
+  background-color:var(--sn-theme-color-pink-decor, var(--sn-brand-palette-pink-80, #f5d9e1));
 }
 
 .skeletonTitle{

package/dist/esm/components/MainMenu/helperComponents/Favorites/components/EmptyState/styles.module.css

@@ -2,8 +2,8 @@
   flex-shrink:0;
   width:var(--sn-primitive-dimension-40, 40px);
   height:var(--sn-primitive-dimension-40, 40px);
-  fill:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
-  stroke:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
+  fill:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
+  stroke:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
 }
 
 .emptyState{

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

@@ -7,8 +7,8 @@
   width:100%;
   min-height:var(--sn-primitive-dimension-88, 88px);
   padding:var(--sn-primitive-dimension-8, 8px) 0 0;
-  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
-  background: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:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
 }
 
 .header{
@@ -35,8 +35,8 @@
   min-height:var(--sn-primitive-dimension-44, 44px);
 }
 .listScroll[data-insert-new] [data-favorite]{
-  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))));
-  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))));
+  fill:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
+  stroke:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-40, #22775b));
 }
 
 .dropTarget{
@@ -89,5 +89,5 @@
 .skeletonItem{
   width:100%;
   height:var(--sn-primitive-dimension-24, 24px);
-  border-radius:var(--sn-density-radius-3xs, var(--sn-primitive-dimension-2, 2px));
+  border-radius:var(--sn-density-radius-3xs, var(--sn-platform-comfort-radius-3xs, var(--sn-primitive-dimension-2, 2px)));
 }

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

@@ -1,5 +1,5 @@
 .drawer{
-  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));
+  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));
 }
 
 .scroll{
@@ -27,7 +27,7 @@
 .drawerRoot [data-test-id=header__drawer-menu][data-small][data-position][data-width]{
   box-sizing:border-box;
   width:100%;
-  max-width:calc(263px + var(--sn-drawer-anatomy-container-vertical-positionLeft-paddingRight, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))));
+  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)))));
 }
 .drawerRoot [data-test-id=header__drawer-menu][data-small][data-position][data-width] .left{
   width:100%;
@@ -66,7 +66,7 @@
   --snack-menu-left-width:263px;
   position:relative;
   height:100vh;
-  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)));
 }
 
 .menuBody{

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

@@ -3,7 +3,7 @@
   gap:var(--sn-primitive-dimension-4, 4px);
   align-items:center;
   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)));
 }
 
 .closeButton{

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

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Divider } from '@cloud-ru/ds-divider';
+import { ChildThemeProvider, DENSITY } from '@cloud-ru/ds-theme';
 import { useValueControl } from '@cloud-ru/ds-utils';
 import { useCallback, useMemo } from 'react';
 import { BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, TEST_IDS } from '../../../../constants.js';
@@ -33,5 +34,9 @@ export function MenuMobile({ open: openProp, setOpen: setOpenProp, settingItems,
     const handleClose = useCallback(() => {
         setOpen(false);
     }, [setOpen]);
-    return (_jsx(MobileDrawerCustom, { open: open, onClose: handleClose, position: 'bottom', className: styles.drawerMobile, swipeEnabled: false, "data-test-id": TEST_IDS.mainMenu.drawerMobile, closeOnPopstate: true, snapPoints: BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, disableMotions: true, children: _jsx(ScrollWithAnimatedStickyPanel, { panel: _jsxs(_Fragment, { children: [_jsx(MenuHeaderBrand, { logo: logo, onClose: handleClose, className: styles.menuHeader }), _jsx(Divider, { orientation: 'horizontal' })] }), children: _jsxs(MountAnimation, { className: styles.scrollMobile, type: 'fade-slide-up', children: [leftTop && _jsx("div", { className: styles.rightContent, children: leftTop }), search && _jsx(Search, { ...search, ref: searchRef, isMobile: true }), !isSearching && favorite && _jsx(Favorites, { favorite: favorite, allServiceGroups: allServiceGroups, isMobile: true }), hasSegments && (_jsx(MainMenuDndContext, { children: _jsx(Content, { isMobile: true, className: styles.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 && _jsx(MenuBottom, { settingItems: settingItems, leftBottom: leftBottom })] }) }) }));
+    return (
+    // Временная фиксация comfort (см. `HeaderLayout`): `MainMenu` используется и отдельно от
+    // `HeaderLayout`, поэтому объявляем плотность здесь же. Обёртка провайдера layout-прозрачная
+    // (`display: contents`) — меню рендерится порталом, лишний бокс в строке шапки не нужен.
+    _jsx(ChildThemeProvider, { value: { density: DENSITY.Comfort }, className: styles.densityScope, children: _jsx(MobileDrawerCustom, { open: open, onClose: handleClose, position: 'bottom', className: styles.drawerMobile, swipeEnabled: false, "data-test-id": TEST_IDS.mainMenu.drawerMobile, closeOnPopstate: true, snapPoints: BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, disableMotions: true, children: _jsx(ScrollWithAnimatedStickyPanel, { panel: _jsxs(_Fragment, { children: [_jsx(MenuHeaderBrand, { logo: logo, onClose: handleClose, className: styles.menuHeader }), _jsx(Divider, { orientation: 'horizontal' })] }), children: _jsxs(MountAnimation, { className: styles.scrollMobile, type: 'fade-slide-up', children: [leftTop && _jsx("div", { className: styles.rightContent, children: leftTop }), search && _jsx(Search, { ...search, ref: searchRef, isMobile: true }), !isSearching && favorite && _jsx(Favorites, { favorite: favorite, allServiceGroups: allServiceGroups, isMobile: true }), hasSegments && (_jsx(MainMenuDndContext, { children: _jsx(Content, { isMobile: true, className: styles.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 && _jsx(MenuBottom, { settingItems: settingItems, leftBottom: leftBottom })] }) }) }) }));
 }

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

@@ -1,3 +1,7 @@
+.densityScope{
+  display:contents;
+}
+
 .menuHeader{
   height:var(--sn-primitive-dimension-40, 40px);
   padding:0 var(--sn-primitive-dimension-4, 4px);
@@ -11,7 +15,7 @@
 }
 
 .drawerMobile{
-  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;
 }
 
 .scrollMobile{

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

@@ -4,7 +4,7 @@
 
 .dragCardPreview{
   cursor:grabbing;
-  border-radius:var(--sn-density-radius-3xs, var(--sn-primitive-dimension-2, 2px));
+  border-radius:var(--sn-density-radius-3xs, var(--sn-platform-comfort-radius-3xs, var(--sn-primitive-dimension-2, 2px)));
 }
 
 .draggableCard{

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

@@ -4,6 +4,6 @@
   justify-content:center;
   width:var(--sn-primitive-dimension-24, 24px);
   height:var(--sn-primitive-dimension-24, 24px);
-  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
-  background:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+  border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
+  background:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
 }

package/dist/esm/style.css

@@ -3,7 +3,7 @@
 }
 .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{
@@ -59,7 +59,7 @@
 .icon{
   transform-origin:50% center;
   transform-box:fill-box;
-  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));
   transition:opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
@@ -114,7 +114,7 @@
 .contentRow{
   position:relative;
   display:flex;
-  gap:var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px));
+  gap:var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px)));
   align-items:center;
   box-sizing:border-box;
   width:100%;
@@ -171,7 +171,7 @@
   display:flex;
   flex-shrink:0;
   width:264px;
-  height:var(--sn-segmentControl-anatomy-size-m-segment-container-height, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
+  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)))));
 }
 .segmentControlSkeleton[data-mobile]{
   width:100%;
@@ -211,7 +211,7 @@
 .subcategory:has([data-subcategory-body]), .subcategory[data-title-only]{
   grid-column:1/-1;
   padding:0 var(--sn-primitive-dimension-4, 4px);
-  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+  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-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
 }
 .subcategory[data-title-only]{
@@ -293,7 +293,7 @@
   min-width:0;
   min-height:var(--sn-primitive-dimension-40, 40px);
   padding-inline:var(--sn-primitive-dimension-8, 8px);
-  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+  border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
 }
 .header:focus-visible .headerActions, .header:has(:focus-visible) .headerActions{
   pointer-events:auto;
@@ -327,8 +327,8 @@
   width:100%;
   min-width:0;
   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);
-  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)));
 }
 .group[data-drag-preview]{
   cursor:grabbing;
@@ -345,7 +345,7 @@
 .groupDragPreview{
   cursor:grabbing;
   container-type:inline-size;
-  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+  border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
 }
 
 .groupDragPreviewHeader{
@@ -442,7 +442,7 @@
 }
 [data-is-highlighted] .decorationBackground{
   inset:var(--highlight-border-width) var(--highlight-border-width) var(--highlight-border-width) var(--highlight-border-width);
-  border-radius:calc(var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px)) - var(--highlight-border-width));
+  border-radius:calc(var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px))) - var(--highlight-border-width));
   background:linear-gradient(90deg, var(--highlight-background-color-from) 2.29%, var(--highlight-background-color-to) 97.84%), var(--highlight-background-color);
 }
 
@@ -461,35 +461,35 @@
 }
 .colorMarker[data-block-color=neutral]{
   visibility:visible;
-  background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+  background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
 }
 .colorMarker[data-block-color=primary]{
   visibility:visible;
-  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))));
+  background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #caeadb));
 }
 .colorMarker[data-block-color=orange]{
   visibility:visible;
-  background-color:var(--sn-theme-color-orange-decor, var(--sn-primitive-color-orange-80, #fbdeb6));
+  background-color:var(--sn-theme-color-orange-decor, var(--sn-brand-palette-orange-80, #fbdeb6));
 }
 .colorMarker[data-block-color=yellow]{
   visibility:visible;
-  background-color:var(--sn-theme-color-yellow-decor, var(--sn-primitive-color-yellow-80, #f0dfb1));
+  background-color:var(--sn-theme-color-yellow-decor, var(--sn-brand-palette-yellow-80, #f0dfb1));
 }
 .colorMarker[data-block-color=green]{
   visibility:visible;
-  background-color:var(--sn-theme-color-green-decor, var(--sn-primitive-color-green-80, #d2ead0));
+  background-color:var(--sn-theme-color-green-decor, var(--sn-brand-palette-green-80, #d2ead0));
 }
 .colorMarker[data-block-color=blue]{
   visibility:visible;
-  background-color:var(--sn-theme-color-blue-decor, var(--sn-primitive-color-blue-80, #d6e2f4));
+  background-color:var(--sn-theme-color-blue-decor, var(--sn-brand-palette-blue-80, #d6e2f4));
 }
 .colorMarker[data-block-color=violet]{
   visibility:visible;
-  background-color:var(--sn-theme-color-violet-decor, var(--sn-primitive-color-violet-80, #e6dcf3));
+  background-color:var(--sn-theme-color-violet-decor, var(--sn-brand-palette-violet-80, #e6dcf3));
 }
 .colorMarker[data-block-color=pink]{
   visibility:visible;
-  background-color:var(--sn-theme-color-pink-decor, var(--sn-primitive-color-pink-80, #f5d9e1));
+  background-color:var(--sn-theme-color-pink-decor, var(--sn-brand-palette-pink-80, #f5d9e1));
 }
 
 .skeletonTitle{
@@ -524,8 +524,8 @@
   flex-shrink:0;
   width:var(--sn-primitive-dimension-40, 40px);
   height:var(--sn-primitive-dimension-40, 40px);
-  fill:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
-  stroke:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
+  fill:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
+  stroke:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
 }
 
 .emptyState{
@@ -550,8 +550,8 @@
   width:100%;
   min-height:var(--sn-primitive-dimension-88, 88px);
   padding:var(--sn-primitive-dimension-8, 8px) 0 0;
-  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
-  background: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:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
 }
 
 .header{
@@ -578,8 +578,8 @@
   min-height:var(--sn-primitive-dimension-44, 44px);
 }
 .listScroll[data-insert-new] [data-favorite]{
-  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))));
-  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))));
+  fill:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
+  stroke:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-40, #22775b));
 }
 
 .dropTarget{
@@ -632,7 +632,7 @@
 .skeletonItem{
   width:100%;
   height:var(--sn-primitive-dimension-24, 24px);
-  border-radius:var(--sn-density-radius-3xs, var(--sn-primitive-dimension-2, 2px));
+  border-radius:var(--sn-density-radius-3xs, var(--sn-platform-comfort-radius-3xs, var(--sn-primitive-dimension-2, 2px)));
 }
 .bottomItems{
   width:100%;
@@ -648,7 +648,7 @@
   margin:var(--sn-primitive-dimension-2, 2px) 0;
 }
 .drawer{
-  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));
+  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));
 }
 
 .scroll{
@@ -676,7 +676,7 @@
 .drawerRoot [data-test-id=header__drawer-menu][data-small][data-position][data-width]{
   box-sizing:border-box;
   width:100%;
-  max-width:calc(263px + var(--sn-drawer-anatomy-container-vertical-positionLeft-paddingRight, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))));
+  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)))));
 }
 .drawerRoot [data-test-id=header__drawer-menu][data-small][data-position][data-width] .left{
   width:100%;
@@ -715,7 +715,7 @@
   --snack-menu-left-width:263px;
   position:relative;
   height:100vh;
-  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)));
 }
 
 .menuBody{
@@ -741,7 +741,7 @@
   gap:var(--sn-primitive-dimension-4, 4px);
   align-items:center;
   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)));
 }
 
 .closeButton{
@@ -749,6 +749,10 @@
   flex-shrink:1;
   justify-content:flex-start;
 }
+.densityScope{
+  display:contents;
+}
+
 .menuHeader{
   height:var(--sn-primitive-dimension-40, 40px);
   padding:0 var(--sn-primitive-dimension-4, 4px);
@@ -762,7 +766,7 @@
 }
 
 .drawerMobile{
-  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;
 }
 
 .scrollMobile{
@@ -859,7 +863,7 @@
 
 .dragCardPreview{
   cursor:grabbing;
-  border-radius:var(--sn-density-radius-3xs, var(--sn-primitive-dimension-2, 2px));
+  border-radius:var(--sn-density-radius-3xs, var(--sn-platform-comfort-radius-3xs, var(--sn-primitive-dimension-2, 2px)));
 }
 
 .draggableCard{
@@ -879,8 +883,8 @@
   justify-content:center;
   width:var(--sn-primitive-dimension-24, 24px);
   height:var(--sn-primitive-dimension-24, 24px);
-  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
-  background:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+  border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
+  background:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
 }
 .userMenuDroplist{
   width:272px;