@cloud-ru/ds-accordion 1.0.7 → 1.0.8-preview-a2208aeb.0

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

@@ -12,11 +12,11 @@
 
 .wrapper[data-component=accordionPrimary]{
   border-radius:var(--sn-accordion-anatomy-accordionPrimary-container-borderRadius, var(--sn-brand-anatomy-radius-block-l, var(--sn-primitive-dimension-4, 4px)));
-  padding-bottom:var(--sn-accordion-anatomy-accordionPrimary-container-bodyContent-paddingVertical, var(--sn-density-spacing-block-l-padding, var(--sn-primitive-dimension-32, 32px)));
+  padding-bottom:var(--sn-accordion-anatomy-accordionPrimary-container-bodyContent-paddingVertical, var(--sn-density-spacing-block-l-padding, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))));
 }
 .wrapper[data-component=accordionSecondary]{
   border-radius:var(--sn-accordion-anatomy-accordionSecondary-container-borderRadius, var(--sn-brand-anatomy-radius-block-m, var(--sn-primitive-dimension-4, 4px)));
-  padding-bottom:var(--sn-accordion-anatomy-accordionSecondary-container-bodyContent-paddingVertical, var(--sn-density-spacing-block-m-padding, var(--sn-primitive-dimension-24, 24px)));
+  padding-bottom:var(--sn-accordion-anatomy-accordionSecondary-container-bodyContent-paddingVertical, var(--sn-density-spacing-block-m-padding, var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px)))));
 }
 .wrapper{
   position:relative;
@@ -25,213 +25,213 @@
   align-self:stretch;
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=primary][data-acrylic-level=default], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=primary][data-acrylic-level=default]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter, none);
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=primary][data-acrylic-level=default] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=primary][data-acrylic-level=default] .acrylic{
   opacity:var(--sn-acrylic-opacityBackground, 1);
-  background:var(--sn-theme-color-primary-background, var(--sn-brand-color-primary-90, var(--sn-brandRole-color-brandA-90, var(--sn-primitive-color-brandA-90, #edf7f1))));
+  background:var(--sn-theme-color-primary-background, var(--sn-brand-color-primary-90, #edf7f1));
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=primary][data-acrylic-level="1Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=primary][data-acrylic-level="1Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=primary][data-acrylic-level="1Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=primary][data-acrylic-level="1Level"] .acrylic{
   opacity:var(--sn-acrylic-opacityBackground1Level, 1);
-  background:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, var(--sn-brandRole-color-brandA-95, var(--sn-primitive-color-brandA-95, #f5fdf8))));
+  background:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, #f5fdf8));
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=primary][data-acrylic-level="2Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=primary][data-acrylic-level="2Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=primary][data-acrylic-level="2Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=primary][data-acrylic-level="2Level"] .acrylic{
   opacity:var(--sn-acrylic-opacityBackground2Level, 1);
-  background:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, var(--sn-brandRole-color-brandA-99, var(--sn-primitive-color-brandA-99, #fbfffc))));
+  background:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, #fbfffc));
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=neutral][data-acrylic-level=default], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=neutral][data-acrylic-level=default]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter, none);
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=neutral][data-acrylic-level=default] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=neutral][data-acrylic-level=default] .acrylic{
   opacity:var(--sn-acrylic-opacityBackground, 1);
-  background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+  background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=neutral][data-acrylic-level="1Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=neutral][data-acrylic-level="1Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=neutral][data-acrylic-level="1Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=neutral][data-acrylic-level="1Level"] .acrylic{
   opacity:var(--sn-acrylic-opacityBackground1Level, 1);
-  background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+  background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=neutral][data-acrylic-level="2Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=neutral][data-acrylic-level="2Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=neutral][data-acrylic-level="2Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=neutral][data-acrylic-level="2Level"] .acrylic{
   opacity:var(--sn-acrylic-opacityBackground2Level, 1);
-  background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
+  background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=red][data-acrylic-level=default], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=red][data-acrylic-level=default]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter, none);
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=red][data-acrylic-level=default] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=red][data-acrylic-level=default] .acrylic{
   opacity:var(--sn-acrylic-opacityBackground, 1);
-  background:var(--sn-theme-color-red-background, var(--sn-primitive-color-red-90, #fee8e5));
+  background:var(--sn-theme-color-red-background, var(--sn-brand-palette-red-90, #fee8e5));
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=red][data-acrylic-level="1Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=red][data-acrylic-level="1Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=red][data-acrylic-level="1Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=red][data-acrylic-level="1Level"] .acrylic{
   opacity:var(--sn-acrylic-opacityBackground1Level, 1);
-  background:var(--sn-theme-color-red-background1Level, var(--sn-primitive-color-red-95, #fef5f1));
+  background:var(--sn-theme-color-red-background1Level, var(--sn-brand-palette-red-95, #fef5f1));
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=red][data-acrylic-level="2Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=red][data-acrylic-level="2Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=red][data-acrylic-level="2Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=red][data-acrylic-level="2Level"] .acrylic{
   opacity:var(--sn-acrylic-opacityBackground2Level, 1);
-  background:var(--sn-theme-color-red-background2Level, var(--sn-primitive-color-red-99, #fffaf7));
+  background:var(--sn-theme-color-red-background2Level, var(--sn-brand-palette-red-99, #fffaf7));
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=orange][data-acrylic-level=default], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=orange][data-acrylic-level=default]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter, none);
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=orange][data-acrylic-level=default] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=orange][data-acrylic-level=default] .acrylic{
   opacity:var(--sn-acrylic-opacityBackground, 1);
-  background:var(--sn-theme-color-orange-background, var(--sn-primitive-color-orange-90, #ffedcf));
+  background:var(--sn-theme-color-orange-background, var(--sn-brand-palette-orange-90, #ffedcf));
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=orange][data-acrylic-level="1Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=orange][data-acrylic-level="1Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=orange][data-acrylic-level="1Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=orange][data-acrylic-level="1Level"] .acrylic{
   opacity:var(--sn-acrylic-opacityBackground1Level, 1);
-  background:var(--sn-theme-color-orange-background1Level, var(--sn-primitive-color-orange-95, #fff6e5));
+  background:var(--sn-theme-color-orange-background1Level, var(--sn-brand-palette-orange-95, #fff6e5));
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=orange][data-acrylic-level="2Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=orange][data-acrylic-level="2Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=orange][data-acrylic-level="2Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=orange][data-acrylic-level="2Level"] .acrylic{
   opacity:var(--sn-acrylic-opacityBackground2Level, 1);
-  background:var(--sn-theme-color-orange-background2Level, var(--sn-primitive-color-orange-99, #fffcf4));
+  background:var(--sn-theme-color-orange-background2Level, var(--sn-brand-palette-orange-99, #fffcf4));
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=yellow][data-acrylic-level=default], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=yellow][data-acrylic-level=default]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter, none);
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=yellow][data-acrylic-level=default] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=yellow][data-acrylic-level=default] .acrylic{
   opacity:var(--sn-acrylic-opacityBackground, 1);
-  background:var(--sn-theme-color-yellow-background, var(--sn-primitive-color-yellow-90, #fdf4cc));
+  background:var(--sn-theme-color-yellow-background, var(--sn-brand-palette-yellow-90, #fdf4cc));
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=yellow][data-acrylic-level="1Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=yellow][data-acrylic-level="1Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=yellow][data-acrylic-level="1Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=yellow][data-acrylic-level="1Level"] .acrylic{
   opacity:var(--sn-acrylic-opacityBackground1Level, 1);
-  background:var(--sn-theme-color-yellow-background1Level, var(--sn-primitive-color-yellow-95, #fffbe6));
+  background:var(--sn-theme-color-yellow-background1Level, var(--sn-brand-palette-yellow-95, #fffbe6));
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=yellow][data-acrylic-level="2Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=yellow][data-acrylic-level="2Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=yellow][data-acrylic-level="2Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=yellow][data-acrylic-level="2Level"] .acrylic{
   opacity:var(--sn-acrylic-opacityBackground2Level, 1);
-  background:var(--sn-theme-color-yellow-background2Level, var(--sn-primitive-color-yellow-99, #fffef6));
+  background:var(--sn-theme-color-yellow-background2Level, var(--sn-brand-palette-yellow-99, #fffef6));
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=green][data-acrylic-level=default], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=green][data-acrylic-level=default]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter, none);
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=green][data-acrylic-level=default] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=green][data-acrylic-level=default] .acrylic{
   opacity:var(--sn-acrylic-opacityBackground, 1);
-  background:var(--sn-theme-color-green-background, var(--sn-primitive-color-green-90, #e4f5df));
+  background:var(--sn-theme-color-green-background, var(--sn-brand-palette-green-90, #e4f5df));
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=green][data-acrylic-level="1Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=green][data-acrylic-level="1Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=green][data-acrylic-level="1Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=green][data-acrylic-level="1Level"] .acrylic{
   opacity:var(--sn-acrylic-opacityBackground1Level, 1);
-  background:var(--sn-theme-color-green-background1Level, var(--sn-primitive-color-green-95, #f1faed));
+  background:var(--sn-theme-color-green-background1Level, var(--sn-brand-palette-green-95, #f1faed));
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=green][data-acrylic-level="2Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=green][data-acrylic-level="2Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=green][data-acrylic-level="2Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=green][data-acrylic-level="2Level"] .acrylic{
   opacity:var(--sn-acrylic-opacityBackground2Level, 1);
-  background:var(--sn-theme-color-green-background2Level, var(--sn-primitive-color-green-99, #fcfefa));
+  background:var(--sn-theme-color-green-background2Level, var(--sn-brand-palette-green-99, #fcfefa));
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=blue][data-acrylic-level=default], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=blue][data-acrylic-level=default]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter, none);
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=blue][data-acrylic-level=default] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=blue][data-acrylic-level=default] .acrylic{
   opacity:var(--sn-acrylic-opacityBackground, 1);
-  background:var(--sn-theme-color-blue-background, var(--sn-primitive-color-blue-90, #e6f4fd));
+  background:var(--sn-theme-color-blue-background, var(--sn-brand-palette-blue-90, #e6f4fd));
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=blue][data-acrylic-level="1Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=blue][data-acrylic-level="1Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=blue][data-acrylic-level="1Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=blue][data-acrylic-level="1Level"] .acrylic{
   opacity:var(--sn-acrylic-opacityBackground1Level, 1);
-  background:var(--sn-theme-color-blue-background1Level, var(--sn-primitive-color-blue-95, #f2f9ff));
+  background:var(--sn-theme-color-blue-background1Level, var(--sn-brand-palette-blue-95, #f2f9ff));
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=blue][data-acrylic-level="2Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=blue][data-acrylic-level="2Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=blue][data-acrylic-level="2Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=blue][data-acrylic-level="2Level"] .acrylic{
   opacity:var(--sn-acrylic-opacityBackground2Level, 1);
-  background:var(--sn-theme-color-blue-background2Level, var(--sn-primitive-color-blue-99, #fdfeff));
+  background:var(--sn-theme-color-blue-background2Level, var(--sn-brand-palette-blue-99, #fdfeff));
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=violet][data-acrylic-level=default], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=violet][data-acrylic-level=default]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter, none);
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=violet][data-acrylic-level=default] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=violet][data-acrylic-level=default] .acrylic{
   opacity:var(--sn-acrylic-opacityBackground, 1);
-  background:var(--sn-theme-color-violet-background, var(--sn-primitive-color-violet-90, #f3edfc));
+  background:var(--sn-theme-color-violet-background, var(--sn-brand-palette-violet-90, #f3edfc));
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=violet][data-acrylic-level="1Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=violet][data-acrylic-level="1Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=violet][data-acrylic-level="1Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=violet][data-acrylic-level="1Level"] .acrylic{
   opacity:var(--sn-acrylic-opacityBackground1Level, 1);
-  background:var(--sn-theme-color-violet-background1Level, var(--sn-primitive-color-violet-95, #f9f5ff));
+  background:var(--sn-theme-color-violet-background1Level, var(--sn-brand-palette-violet-95, #f9f5ff));
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=violet][data-acrylic-level="2Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=violet][data-acrylic-level="2Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=violet][data-acrylic-level="2Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=violet][data-acrylic-level="2Level"] .acrylic{
   opacity:var(--sn-acrylic-opacityBackground2Level, 1);
-  background:var(--sn-theme-color-violet-background2Level, var(--sn-primitive-color-violet-99, #fdfdfd));
+  background:var(--sn-theme-color-violet-background2Level, var(--sn-brand-palette-violet-99, #fdfdfd));
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=pink][data-acrylic-level=default], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=pink][data-acrylic-level=default]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter, none);
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=pink][data-acrylic-level=default] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=pink][data-acrylic-level=default] .acrylic{
   opacity:var(--sn-acrylic-opacityBackground, 1);
-  background:var(--sn-theme-color-pink-background, var(--sn-primitive-color-pink-90, #fceaf0));
+  background:var(--sn-theme-color-pink-background, var(--sn-brand-palette-pink-90, #fceaf0));
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=pink][data-acrylic-level="1Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=pink][data-acrylic-level="1Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=pink][data-acrylic-level="1Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=pink][data-acrylic-level="1Level"] .acrylic{
   opacity:var(--sn-acrylic-opacityBackground1Level, 1);
-  background:var(--sn-theme-color-pink-background1Level, var(--sn-primitive-color-pink-95, #fff5f7));
+  background:var(--sn-theme-color-pink-background1Level, var(--sn-brand-palette-pink-95, #fff5f7));
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=pink][data-acrylic-level="2Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=pink][data-acrylic-level="2Level"]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=pink][data-acrylic-level="2Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=pink][data-acrylic-level="2Level"] .acrylic{
   opacity:var(--sn-acrylic-opacityBackground2Level, 1);
-  background:var(--sn-theme-color-pink-background2Level, var(--sn-primitive-color-pink-99, #fdfcfc));
+  background:var(--sn-theme-color-pink-background2Level, var(--sn-brand-palette-pink-99, #fdfcfc));
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=transparent], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=transparent]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=transparent] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=transparent] .acrylic{
   opacity:var(--sn-acrylic-opacityBackground1Level, 1);
   background:transparent;
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=decorTransparent], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=decorTransparent]{
-  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+  backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
 }
 .wrapper[data-component=accordionPrimary][data-acrylic-appearance=decorTransparent] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=decorTransparent] .acrylic{
   opacity:var(--sn-acrylic-opacityBackground1Level, 1);
   background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
 }
 .wrapper[data-component=accordionPrimary][data-view=elevated], .wrapper[data-component=accordionSecondary][data-view=elevated]{
-  box-shadow:var(--sn-boxShadow-elevation-level2, var(--sn-theme-effect-shadow-level2-layer1-positionX, 0) var(--sn-theme-effect-shadow-level2-layer1-positionY, 0) var(--sn-theme-effect-shadow-level2-layer1-blur, 4px) var(--sn-theme-effect-shadow-level2-layer1-speed, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level2-layer2-positionX, 0) var(--sn-theme-effect-shadow-level2-layer2-positionY, 4px) var(--sn-theme-effect-shadow-level2-layer2-blur, 8px) var(--sn-theme-effect-shadow-level2-layer2-speed, 2px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
+  box-shadow:var(--sn-boxShadow-elevation-level2, var(--sn-theme-effect-shadow-level2-layer1-positionX, 0) var(--sn-theme-effect-shadow-level2-layer1-positionY, 0) var(--sn-theme-effect-shadow-level2-layer1-blur, 4px) var(--sn-theme-effect-shadow-level2-layer1-spread, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level2-layer2-positionX, 0) var(--sn-theme-effect-shadow-level2-layer2-positionY, 4px) var(--sn-theme-effect-shadow-level2-layer2-blur, 8px) var(--sn-theme-effect-shadow-level2-layer2-spread, 2px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
 }
 .wrapper[data-component=accordionPrimary][data-view=simple]:hover, .wrapper[data-component=accordionPrimary][data-view=simple]:focus-within, .wrapper[data-component=accordionPrimary][data-view=elevated]:hover, .wrapper[data-component=accordionPrimary][data-view=elevated]:focus-within, .wrapper[data-component=accordionSecondary][data-view=simple]:hover, .wrapper[data-component=accordionSecondary][data-view=simple]:focus-within, .wrapper[data-component=accordionSecondary][data-view=elevated]:hover, .wrapper[data-component=accordionSecondary][data-view=elevated]:focus-within{
-  box-shadow:var(--sn-boxShadow-elevation-level3, var(--sn-theme-effect-shadow-level3-layer1-positionX, 0) var(--sn-theme-effect-shadow-level3-layer1-positionY, 0) var(--sn-theme-effect-shadow-level3-layer1-blur, 8px) var(--sn-theme-effect-shadow-level3-layer1-speed, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level3-layer2-positionX, 0) var(--sn-theme-effect-shadow-level3-layer2-positionY, 8px) var(--sn-theme-effect-shadow-level3-layer2-blur, 16px) var(--sn-theme-effect-shadow-level3-layer2-speed, 2px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
+  box-shadow:var(--sn-boxShadow-elevation-level3, var(--sn-theme-effect-shadow-level3-layer1-positionX, 0) var(--sn-theme-effect-shadow-level3-layer1-positionY, 0) var(--sn-theme-effect-shadow-level3-layer1-blur, 8px) var(--sn-theme-effect-shadow-level3-layer1-spread, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level3-layer2-positionX, 0) var(--sn-theme-effect-shadow-level3-layer2-positionY, 8px) var(--sn-theme-effect-shadow-level3-layer2-blur, 16px) var(--sn-theme-effect-shadow-level3-layer2-spread, 2px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
 }
 .wrapper[data-component=accordionPrimary][data-view=outline] .stateLayer, .wrapper[data-component=accordionSecondary][data-view=outline] .stateLayer{
   position:absolute;
@@ -247,7 +247,7 @@
   background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
 }
 .wrapper[data-component=accordionPrimary][data-view=outline] .stateLayer[data-state=activatedOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline] .stateLayer[data-state=activatedOnBackground]{
-  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
+  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
 }
 .wrapper[data-component=accordionPrimary][data-view=outline] .stateLayer[data-state=versionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline] .stateLayer[data-state=versionOnColor]{
   background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -272,7 +272,7 @@
     background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
   }
   .wrapper[data-component=accordionPrimary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
-    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
   }
   .wrapper[data-component=accordionPrimary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
     background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -299,7 +299,7 @@
   background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
 }
 .wrapper[data-component=accordionPrimary][data-view=outline][data-loading] .stateLayer[data-state=activatedOnBackground], .wrapper[data-component=accordionPrimary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .wrapper[data-component=accordionPrimary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline][data-loading] .stateLayer[data-state=activatedOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
-  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
 }
 .wrapper[data-component=accordionPrimary][data-view=outline][data-loading] .stateLayer[data-state=versionOnColor], .wrapper[data-component=accordionPrimary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .wrapper[data-component=accordionPrimary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline][data-loading] .stateLayer[data-state=versionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
   background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -330,36 +330,36 @@
 }
 
 .subTitle{
-  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
   font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
-  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
-  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-platform-comfort-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
   letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
   paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
   color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
 }
 
 [data-component=accordionPrimary] .titleContent{
-  padding-top:var(--sn-accordion-anatomy-accordionPrimary-container-titleContent-paddingTop, var(--sn-density-spacing-block-l-padding, var(--sn-primitive-dimension-32, 32px)));
-  padding-left:var(--sn-accordion-anatomy-accordionPrimary-container-titleContent-paddingHorizontal, var(--sn-density-spacing-block-l-padding, var(--sn-primitive-dimension-32, 32px)));
-  padding-right:var(--sn-accordion-anatomy-accordionPrimary-container-titleContent-paddingHorizontal, var(--sn-density-spacing-block-l-padding, var(--sn-primitive-dimension-32, 32px)));
-  gap:var(--sn-accordion-anatomy-accordionPrimary-container-titleContent-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
-  padding-bottom:var(--sn-accordion-anatomy-accordionPrimary-container-titleContent-paddingBottom, var(--sn-density-spacing-block-l-padding, var(--sn-primitive-dimension-32, 32px)));
+  padding-top:var(--sn-accordion-anatomy-accordionPrimary-container-titleContent-paddingTop, var(--sn-density-spacing-block-l-padding, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))));
+  padding-left:var(--sn-accordion-anatomy-accordionPrimary-container-titleContent-paddingHorizontal, var(--sn-density-spacing-block-l-padding, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))));
+  padding-right:var(--sn-accordion-anatomy-accordionPrimary-container-titleContent-paddingHorizontal, var(--sn-density-spacing-block-l-padding, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))));
+  gap:var(--sn-accordion-anatomy-accordionPrimary-container-titleContent-gap, var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px))));
+  padding-bottom:var(--sn-accordion-anatomy-accordionPrimary-container-titleContent-paddingBottom, var(--sn-density-spacing-block-l-padding, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))));
   padding-bottom:0;
 }
 [data-component=accordionSecondary] .titleContent{
-  padding-top:var(--sn-accordion-anatomy-accordionSecondary-container-titleContent-paddingTop, var(--sn-density-spacing-block-m-padding, var(--sn-primitive-dimension-24, 24px)));
-  padding-left:var(--sn-accordion-anatomy-accordionSecondary-container-titleContent-paddingHorizontal, var(--sn-density-spacing-block-m-padding, var(--sn-primitive-dimension-24, 24px)));
-  padding-right:var(--sn-accordion-anatomy-accordionSecondary-container-titleContent-paddingHorizontal, var(--sn-density-spacing-block-m-padding, var(--sn-primitive-dimension-24, 24px)));
-  gap:var(--sn-accordion-anatomy-accordionSecondary-container-titleContent-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
-  padding-bottom:var(--sn-accordion-anatomy-accordionSecondary-container-titleContent-paddingBottom, var(--sn-density-spacing-block-m-padding, var(--sn-primitive-dimension-24, 24px)));
+  padding-top:var(--sn-accordion-anatomy-accordionSecondary-container-titleContent-paddingTop, var(--sn-density-spacing-block-m-padding, var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px)))));
+  padding-left:var(--sn-accordion-anatomy-accordionSecondary-container-titleContent-paddingHorizontal, var(--sn-density-spacing-block-m-padding, var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px)))));
+  padding-right:var(--sn-accordion-anatomy-accordionSecondary-container-titleContent-paddingHorizontal, var(--sn-density-spacing-block-m-padding, var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px)))));
+  gap:var(--sn-accordion-anatomy-accordionSecondary-container-titleContent-gap, var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px))));
+  padding-bottom:var(--sn-accordion-anatomy-accordionSecondary-container-titleContent-paddingBottom, var(--sn-density-spacing-block-m-padding, var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px)))));
   padding-bottom:0;
 }
 [data-component=accordionTertiary] .titleContent{
-  gap:var(--sn-accordion-anatomy-accordionTertiary-container-titleContent-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+  gap:var(--sn-accordion-anatomy-accordionTertiary-container-titleContent-gap, var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px))));
   padding-top:var(--sn-accordion-anatomy-accordionTertiary-container-titleContent-paddingTop, var(--sn-primitive-dimension-4, 4px));
-  padding-left:var(--sn-accordion-anatomy-accordionTertiary-container-titleContent-paddingHorizontal, var(--sn-primitive-dimension-0, 0));
-  padding-right:var(--sn-accordion-anatomy-accordionTertiary-container-titleContent-paddingHorizontal, var(--sn-primitive-dimension-0, 0));
+  padding-left:var(--sn-accordion-anatomy-accordionTertiary-container-titleContent-paddingHorizontal, var(--sn-primitive-dimension-0, 0px));
+  padding-right:var(--sn-accordion-anatomy-accordionTertiary-container-titleContent-paddingHorizontal, var(--sn-primitive-dimension-0, 0px));
   padding-bottom:0;
 }
 .titleContent{
@@ -383,13 +383,13 @@
 }
 
 [data-component=accordionPrimary] .chevronWrapper{
-  height:var(--sn-accordion-anatomy-accordionPrimary-container-titleContent-chevronWrapper-height, var(--sn-density-typography-roleTitle-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  height:var(--sn-accordion-anatomy-accordionPrimary-container-titleContent-chevronWrapper-height, var(--sn-density-typography-roleTitle-lineHeightL, var(--sn-platform-comfort-typography-roleTitle-lineHeightL, var(--sn-primitive-font-lineHeight-28, 28px))));
 }
 [data-component=accordionSecondary] .chevronWrapper{
-  height:var(--sn-accordion-anatomy-accordionSecondary-container-titleContent-chevronWrapper-height, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  height:var(--sn-accordion-anatomy-accordionSecondary-container-titleContent-chevronWrapper-height, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-platform-comfort-typography-roleTitle-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
 }
 [data-component=accordionTertiary] .chevronWrapper{
-  height:var(--sn-accordion-anatomy-accordionTertiary-container-titleContent-chevronWrapper-height, var(--sn-density-typography-roleTitle-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  height:var(--sn-accordion-anatomy-accordionTertiary-container-titleContent-chevronWrapper-height, var(--sn-density-typography-roleTitle-lineHeightS, var(--sn-platform-comfort-typography-roleTitle-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
 }
 .chevronWrapper{
   display:flex;
@@ -424,44 +424,41 @@
 
 [data-component=accordionPrimary] .container{
   box-sizing:border-box;
-  padding-top:var(--sn-accordion-anatomy-accordionPrimary-container-bodyContent-paddingVertical, var(--sn-density-spacing-block-l-padding, var(--sn-primitive-dimension-32, 32px)));
-  padding-bottom:var(--sn-accordion-anatomy-accordionPrimary-container-bodyContent-paddingVertical, var(--sn-density-spacing-block-l-padding, var(--sn-primitive-dimension-32, 32px)));
-  padding-left:var(--sn-accordion-anatomy-accordionPrimary-container-bodyContent-paddingHorizontal, var(--sn-density-spacing-block-l-padding, var(--sn-primitive-dimension-32, 32px)));
-  padding-right:var(--sn-accordion-anatomy-accordionPrimary-container-bodyContent-paddingHorizontal, var(--sn-density-spacing-block-l-padding, var(--sn-primitive-dimension-32, 32px)));
+  padding-top:var(--sn-accordion-anatomy-accordionPrimary-container-bodyContent-paddingVertical, var(--sn-density-spacing-block-l-padding, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))));
+  padding-bottom:var(--sn-accordion-anatomy-accordionPrimary-container-bodyContent-paddingVertical, var(--sn-density-spacing-block-l-padding, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))));
+  padding-left:var(--sn-accordion-anatomy-accordionPrimary-container-bodyContent-paddingHorizontal, var(--sn-density-spacing-block-l-padding, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))));
+  padding-right:var(--sn-accordion-anatomy-accordionPrimary-container-bodyContent-paddingHorizontal, var(--sn-density-spacing-block-l-padding, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))));
 }
 [data-component=accordionPrimary] .container:not([data-expanded]){
   padding-top:0;
   padding-bottom:0;
 }
-[data-component=accordionPrimary] .container[data-expanded]{
-  padding-bottom:0;
-}
 [data-component=accordionSecondary] .container{
   box-sizing:border-box;
-  padding-top:var(--sn-accordion-anatomy-accordionSecondary-container-bodyContent-paddingVertical, var(--sn-density-spacing-block-m-padding, var(--sn-primitive-dimension-24, 24px)));
-  padding-bottom:var(--sn-accordion-anatomy-accordionSecondary-container-bodyContent-paddingVertical, var(--sn-density-spacing-block-m-padding, var(--sn-primitive-dimension-24, 24px)));
-  padding-left:var(--sn-accordion-anatomy-accordionSecondary-container-bodyContent-paddingHorizontal, var(--sn-density-spacing-block-m-padding, var(--sn-primitive-dimension-24, 24px)));
-  padding-right:var(--sn-accordion-anatomy-accordionSecondary-container-bodyContent-paddingHorizontal, var(--sn-density-spacing-block-m-padding, var(--sn-primitive-dimension-24, 24px)));
+  padding-top:var(--sn-accordion-anatomy-accordionSecondary-container-bodyContent-paddingVertical, var(--sn-density-spacing-block-m-padding, var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px)))));
+  padding-bottom:var(--sn-accordion-anatomy-accordionSecondary-container-bodyContent-paddingVertical, var(--sn-density-spacing-block-m-padding, var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px)))));
+  padding-left:var(--sn-accordion-anatomy-accordionSecondary-container-bodyContent-paddingHorizontal, var(--sn-density-spacing-block-m-padding, var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px)))));
+  padding-right:var(--sn-accordion-anatomy-accordionSecondary-container-bodyContent-paddingHorizontal, var(--sn-density-spacing-block-m-padding, var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px)))));
 }
 [data-component=accordionSecondary] .container:not([data-expanded]){
   padding-top:0;
   padding-bottom:0;
 }
-[data-component=accordionSecondary] .container[data-expanded]{
-  padding-bottom:0;
-}
 [data-component=accordionTertiary] .container{
   box-sizing:border-box;
   padding-top:var(--sn-accordion-anatomy-accordionTertiary-container-bodyContent-paddingVertical, var(--sn-primitive-dimension-4, 4px));
   padding-bottom:var(--sn-accordion-anatomy-accordionTertiary-container-bodyContent-paddingVertical, var(--sn-primitive-dimension-4, 4px));
-  padding-left:var(--sn-accordion-anatomy-accordionTertiary-container-bodyContent-paddingHorizontal, var(--sn-primitive-dimension-0, 0));
-  padding-right:var(--sn-accordion-anatomy-accordionTertiary-container-bodyContent-paddingHorizontal, var(--sn-primitive-dimension-0, 0));
+  padding-left:var(--sn-accordion-anatomy-accordionTertiary-container-bodyContent-paddingHorizontal, var(--sn-primitive-dimension-0, 0px));
+  padding-right:var(--sn-accordion-anatomy-accordionTertiary-container-bodyContent-paddingHorizontal, var(--sn-primitive-dimension-0, 0px));
 }
 [data-component=accordionTertiary] .container:not([data-expanded]){
   padding-top:0;
   padding-bottom:0;
 }
-[data-component=accordionTertiary] .container[data-expanded]{
+[data-component=accordionPrimary] > .collapse > .container[data-expanded]{
+  padding-bottom:0;
+}
+[data-component=accordionSecondary] > .collapse > .container[data-expanded]{
   padding-bottom:0;
 }
 .container{

package/dist/cjs/helperComponents/ChevronButton/ChevronButton.d.ts

@@ -0,0 +1,11 @@
+export type ChevronButtonProps = {
+    /** Раскрыт ли блок: шеврон вверх / вниз */
+    expanded: boolean;
+    /** id раскрываемой области */
+    contentId: string;
+    /** id элементов, из текста которых складывается имя кнопки (через пробел, как в `aria-labelledby`) */
+    labelledBy?: string;
+    'data-test-id'?: string;
+};
+/** Шеврон заголовка аккордеона — Figma `buttonAccordion`. Клик обрабатывает строка заголовка. */
+export declare function ChevronButton({ expanded, contentId, labelledBy, 'data-test-id': dataTestId }: ChevronButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/ChevronButton/ChevronButton.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChevronButton = ChevronButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+/** Шеврон заголовка аккордеона — Figma `buttonAccordion`. Клик обрабатывает строка заголовка. */
+function ChevronButton({ expanded, contentId, labelledBy, 'data-test-id': dataTestId }) {
+    return ((0, jsx_runtime_1.jsx)("button", { type: 'button', className: styles_module_scss_1.default.root, "aria-expanded": expanded, "aria-controls": contentId, "aria-labelledby": labelledBy, "data-expanded": expanded || undefined, "data-test-id": dataTestId, children: (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.icon, children: expanded ? (0, jsx_runtime_1.jsx)(system_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.ChevronDownSVG, {}) }) }));
+}

package/dist/cjs/helperComponents/ChevronButton/index.d.ts

@@ -0,0 +1 @@
+export * from './ChevronButton';

package/dist/cjs/helperComponents/ChevronButton/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ChevronButton"), exports);

package/dist/cjs/helperComponents/ChevronButton/styles.module.css

@@ -0,0 +1,33 @@
+.root{
+  cursor:pointer;
+  position:relative;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  margin:0;
+  padding:0;
+  border-color:transparent;
+  border-style:solid;
+  color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
+  background-color:transparent;
+  min-width:var(--sn-accordion-anatomy-buttonChevron-container-minWidth, var(--sn-primitive-dimension-32, 32px));
+  min-height:var(--sn-accordion-anatomy-buttonChevron-container-minHeight, var(--sn-primitive-dimension-32, 32px));
+  gap:var(--sn-accordion-anatomy-buttonChevron-container-gap, var(--sn-primitive-dimension-4, 4px));
+  border-radius:var(--sn-accordion-anatomy-buttonChevron-container-borderRadius, var(--sn-brand-anatomy-radius-button-m, var(--sn-primitive-dimension-2, 2px)));
+  border-width:var(--sn-accordion-anatomy-buttonChevron-container-borderWidth, var(--sn-brand-anatomy-line-button-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px)));
+}
+.root:focus-visible{
+  outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
+  outline-offset:calc(0px - var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
+}
+
+.icon{
+  display:inline-flex;
+  width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
+}
+.icon svg{
+  max-width:100%;
+  max-height:100%;
+}

package/dist/cjs/helperComponents/index.d.ts

@@ -0,0 +1 @@
+export * from './ChevronButton';

package/dist/cjs/helperComponents/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ChevronButton"), exports);