@cloud-ru/ds-popup-private 1.1.3-preview-d50a3da1.0 → 1.1.3-preview-e30f4f90.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 (14) hide show
  1. package/dist/cjs/components/PopupBody/styles.module.css +2 -2
  2. package/dist/cjs/components/PopupCloseButton/styles.module.css +4 -4
  3. package/dist/cjs/components/PopupFooter/styles.module.css +5 -5
  4. package/dist/cjs/components/PopupHeader/styles.module.css +28 -29
  5. package/dist/cjs/style.css +39 -40
  6. package/dist/esm/components/PopupBody/styles.module.css +2 -2
  7. package/dist/esm/components/PopupCloseButton/styles.module.css +4 -4
  8. package/dist/esm/components/PopupFooter/styles.module.css +5 -5
  9. package/dist/esm/components/PopupHeader/styles.module.css +28 -29
  10. package/dist/esm/style.css +39 -40
  11. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  12. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  13. package/package.json +5 -5
  14. package/src/components/PopupHeader/styles.module.scss +2 -4
package/dist/cjs/components/PopupBody/styles.module.css CHANGED
@@ -5,8 +5,8 @@
5
5
  flex:1 1 auto;
6
6
  box-sizing:border-box;
7
7
  min-height:0;
8
- padding:var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingTop, var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px)))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
9
- color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
8
+ padding:var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingTop, var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
9
+ color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
10
10
  }
11
11
 
12
12
  .root[data-no-padding]{
package/dist/cjs/components/PopupCloseButton/styles.module.css CHANGED
@@ -13,7 +13,7 @@
13
13
  margin:var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-paddingTop, var(--sn-brand-anatomy-spacing-window-badgeButtonClosed-paddingTop, var(--sn-primitive-dimension-48, 48px))) var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-paddingRight, var(--sn-brand-anatomy-spacing-window-badgeButtonClosed-paddingRight, var(--sn-primitive-dimension-48, 48px))) var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-paddingBottom, var(--sn-brand-anatomy-spacing-window-badgeButtonClosed-paddingBottom, var(--sn-primitive-dimension-0, 0px))) var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-paddingLeft, var(--sn-brand-anatomy-spacing-window-badgeButtonClosed-paddingLeft, var(--sn-primitive-dimension-0, 0px)));
14
14
  padding:0;
15
15
  border:0 solid transparent;
16
- color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
16
+ color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
17
17
  background:transparent;
18
18
  outline:0;
19
19
  min-width:var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-buttonClosed-minWidth, var(--sn-primitive-dimension-32, 32px));
@@ -34,7 +34,7 @@
34
34
  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)));
35
35
  }
36
36
  .root .stateLayer[data-state=activatedOnBackground]{
37
- background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
37
+ 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))));
38
38
  }
39
39
  .root .stateLayer[data-state=versionOnColor]{
40
40
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -59,7 +59,7 @@
59
59
  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)));
60
60
  }
61
61
  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
62
- background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
62
+ 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))));
63
63
  }
64
64
  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
65
65
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -86,7 +86,7 @@
86
86
  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)));
87
87
  }
88
88
  .root[data-loading] .stateLayer[data-state=activatedOnBackground], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
89
- background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
89
+ 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))));
90
90
  }
91
91
  .root[data-loading] .stateLayer[data-state=versionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
92
92
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
package/dist/cjs/components/PopupFooter/styles.module.css CHANGED
@@ -8,14 +8,14 @@
8
8
  flex-direction:column;
9
9
  align-items:stretch;
10
10
  justify-content:center;
11
- padding:var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))) var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))) var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))) var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
11
+ padding:var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
12
12
  }
13
13
  .root[data-surface=window]{
14
14
  align-items:center;
15
15
  align-self:stretch;
16
- padding-left:var(--sn-popupPrivate-anatomy-window-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
17
- padding-right:var(--sn-popupPrivate-anatomy-window-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
18
- padding-bottom:var(--sn-popupPrivate-anatomy-window-footer-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
16
+ padding-left:var(--sn-popupPrivate-anatomy-window-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
17
+ padding-right:var(--sn-popupPrivate-anatomy-window-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
18
+ padding-bottom:var(--sn-popupPrivate-anatomy-window-footer-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
19
19
  }
20
20
 
21
21
  .contentWrapper{
@@ -23,7 +23,7 @@
23
23
  flex-direction:column;
24
24
  }
25
25
  [data-surface=bottomSheet] .contentWrapper{
26
- gap:var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px)));
26
+ gap:var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px));
27
27
  }
28
28
  [data-surface=window] .contentWrapper{
29
29
  flex:1 0 0;
package/dist/cjs/components/PopupHeader/styles.module.css CHANGED
@@ -5,16 +5,16 @@
5
5
  box-sizing:border-box;
6
6
  }
7
7
  .root[data-surface=bottomSheet]{
8
- gap:var(--sn-popupPrivate-anatomy-bottomSheet-header-gap, var(--sn-density-spacing-interval-xs, var(--sn-platform-comfort-spacing-interval-xs, var(--sn-primitive-dimension-8, 8px))));
9
- padding-top:var(--sn-popupPrivate-anatomy-bottomSheet-header-paddingTop, var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px))));
10
- padding-bottom:var(--sn-popupPrivate-anatomy-bottomSheet-header-paddingBottom, var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px))));
8
+ gap:var(--sn-popupPrivate-anatomy-bottomSheet-header-gap, var(--sn-density-spacing-interval-xs, var(--sn-primitive-dimension-4, 4px)));
9
+ padding-top:var(--sn-popupPrivate-anatomy-bottomSheet-header-paddingTop, var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px)));
10
+ padding-bottom:var(--sn-popupPrivate-anatomy-bottomSheet-header-paddingBottom, var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px)));
11
11
  }
12
12
  .root[data-surface=window]{
13
13
  align-items:flex-start;
14
14
  align-self:stretch;
15
15
  justify-content:center;
16
- gap:var(--sn-popupPrivate-anatomy-window-header-gap, var(--sn-density-spacing-interval-xs, var(--sn-platform-comfort-spacing-interval-xs, var(--sn-primitive-dimension-8, 8px))));
17
- padding-bottom:var(--sn-popupPrivate-anatomy-window-header-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
16
+ gap:var(--sn-popupPrivate-anatomy-window-header-gap, var(--sn-density-spacing-interval-xs, var(--sn-primitive-dimension-4, 4px)));
17
+ padding-bottom:var(--sn-popupPrivate-anatomy-window-header-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
18
18
  }
19
19
 
20
20
  .headlineWrapper{
@@ -26,22 +26,20 @@
26
26
  gap:0;
27
27
  }
28
28
  [data-surface=bottomSheet] .headlineWrapper[data-with-before], [data-surface=bottomSheet] .headlineWrapper[data-with-after]{
29
- gap:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-gap, var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px))));
29
+ gap:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
30
30
  }
31
31
  [data-surface=bottomSheet] .headlineWrapper[data-with-before]{
32
- padding-left:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-paddingLeft, var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px))));
32
+ padding-left:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-paddingLeft, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
33
33
  }
34
34
  [data-surface=bottomSheet] .headlineWrapper[data-with-after]{
35
- padding-right:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-paddingRight, var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px))));
35
+ padding-right:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-paddingRight, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
36
36
  }
37
37
  [data-surface=window] .headlineWrapper{
38
38
  align-self:stretch;
39
- gap:var(--sn-popupPrivate-anatomy-window-header-headline-gap, var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px))));
40
- height:var(--sn-popupPrivate-anatomy-window-header-headline-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)))));
41
- padding-left:var(--sn-popupPrivate-anatomy-window-header-headline-paddingHorizontal, var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px))));
42
- padding-right:var(--sn-popupPrivate-anatomy-window-header-headline-paddingHorizontal, var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px))));
43
- height:auto;
44
- min-height:var(--sn-popupPrivate-anatomy-window-header-headline-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)))));
39
+ gap:var(--sn-popupPrivate-anatomy-window-header-headline-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
40
+ height:var(--sn-popupPrivate-anatomy-window-header-headline-height, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
41
+ padding-left:var(--sn-popupPrivate-anatomy-window-header-headline-paddingHorizontal, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
42
+ padding-right:var(--sn-popupPrivate-anatomy-window-header-headline-paddingHorizontal, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
45
43
  padding-right:0;
46
44
  }
47
45
  [data-surface=window] .headlineWrapper:not([data-with-before]){
@@ -56,22 +54,23 @@
56
54
  }
57
55
  [data-surface=bottomSheet] .headline{
58
56
  flex:1 1 auto;
59
- gap:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px))));
60
- min-height:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-minHeight, var(--sn-density-size-m, var(--sn-density-scale-100-m, var(--sn-platform-comfort-scale-100-m, var(--sn-primitive-dimension-40, 40px)))));
57
+ gap:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
58
+ padding-top:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-paddingVertical, var(--sn-primitive-dimension-10, 10px));
59
+ padding-bottom:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-paddingVertical, var(--sn-primitive-dimension-10, 10px));
61
60
  }
62
61
  [data-surface=window] .headline{
63
62
  flex:1 0 0;
64
- gap:var(--sn-popupPrivate-anatomy-window-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px))));
65
- padding-left:var(--sn-popupPrivate-anatomy-window-header-headline-headlineWrapper-paddingLeft, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
66
- padding-right:var(--sn-popupPrivate-anatomy-window-header-headline-headlineWrapper-paddingRight, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
63
+ gap:var(--sn-popupPrivate-anatomy-window-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
64
+ padding-left:var(--sn-popupPrivate-anatomy-window-header-headline-headlineWrapper-paddingLeft, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
65
+ padding-right:var(--sn-popupPrivate-anatomy-window-header-headline-headlineWrapper-paddingRight, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
67
66
  }
68
67
 
69
68
  [data-surface=bottomSheet] .headlineWrapper:not([data-with-before]) .headline{
70
- padding-left:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-paddingLeft, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
69
+ padding-left:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-paddingLeft, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
71
70
  }
72
71
 
73
72
  [data-surface=bottomSheet] .headlineWrapper:not([data-with-after]) .headline{
74
- padding-right:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-paddingRight, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
73
+ padding-right:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-paddingRight, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
75
74
  }
76
75
 
77
76
  [data-surface=window] .headlineWrapper[data-with-before] .headline{
@@ -104,13 +103,13 @@
104
103
  box-sizing:border-box;
105
104
  }
106
105
  [data-surface=bottomSheet] .subtitleWrapper{
107
- padding-right:var(--sn-popupPrivate-anatomy-bottomSheet-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
108
- padding-left:var(--sn-popupPrivate-anatomy-bottomSheet-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
106
+ padding-right:var(--sn-popupPrivate-anatomy-bottomSheet-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
107
+ padding-left:var(--sn-popupPrivate-anatomy-bottomSheet-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
109
108
  }
110
109
  [data-surface=window] .subtitleWrapper{
111
110
  align-self:stretch;
112
- padding-left:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
113
- padding-right:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
111
+ padding-left:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
112
+ padding-right:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
114
113
  }
115
114
 
116
115
  .subtitle{
@@ -121,11 +120,11 @@
121
120
  box-sizing:border-box;
122
121
  }
123
122
  [data-surface=bottomSheet] .secondWrapper{
124
- padding-left:var(--sn-popupPrivate-anatomy-bottomSheet-header-secondWrapper-paddingHorizontal, var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px)))));
125
- padding-right:var(--sn-popupPrivate-anatomy-bottomSheet-header-secondWrapper-paddingHorizontal, var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px)))));
123
+ padding-left:var(--sn-popupPrivate-anatomy-bottomSheet-header-secondWrapper-paddingHorizontal, var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px))));
124
+ padding-right:var(--sn-popupPrivate-anatomy-bottomSheet-header-secondWrapper-paddingHorizontal, var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px))));
126
125
  }
127
126
  [data-surface=window] .secondWrapper{
128
127
  align-self:stretch;
129
- padding-left:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
130
- padding-right:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
128
+ padding-left:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
129
+ padding-right:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
131
130
  }
package/dist/cjs/style.css CHANGED
@@ -25,8 +25,8 @@
25
25
  flex:1 1 auto;
26
26
  box-sizing:border-box;
27
27
  min-height:0;
28
- padding:var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingTop, var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px)))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
29
- color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
28
+ padding:var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingTop, var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
29
+ color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
30
30
  }
31
31
 
32
32
  .root[data-no-padding]{
@@ -49,7 +49,7 @@
49
49
  margin:var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-paddingTop, var(--sn-brand-anatomy-spacing-window-badgeButtonClosed-paddingTop, var(--sn-primitive-dimension-48, 48px))) var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-paddingRight, var(--sn-brand-anatomy-spacing-window-badgeButtonClosed-paddingRight, var(--sn-primitive-dimension-48, 48px))) var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-paddingBottom, var(--sn-brand-anatomy-spacing-window-badgeButtonClosed-paddingBottom, var(--sn-primitive-dimension-0, 0px))) var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-paddingLeft, var(--sn-brand-anatomy-spacing-window-badgeButtonClosed-paddingLeft, var(--sn-primitive-dimension-0, 0px)));
50
50
  padding:0;
51
51
  border:0 solid transparent;
52
- color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
52
+ color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
53
53
  background:transparent;
54
54
  outline:0;
55
55
  min-width:var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-buttonClosed-minWidth, var(--sn-primitive-dimension-32, 32px));
@@ -70,7 +70,7 @@
70
70
  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)));
71
71
  }
72
72
  .root .stateLayer[data-state=activatedOnBackground]{
73
- background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
73
+ 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))));
74
74
  }
75
75
  .root .stateLayer[data-state=versionOnColor]{
76
76
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -95,7 +95,7 @@
95
95
  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)));
96
96
  }
97
97
  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
98
- background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
98
+ 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))));
99
99
  }
100
100
  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
101
101
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -122,7 +122,7 @@
122
122
  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)));
123
123
  }
124
124
  .root[data-loading] .stateLayer[data-state=activatedOnBackground], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
125
- background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
125
+ 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))));
126
126
  }
127
127
  .root[data-loading] .stateLayer[data-state=versionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
128
128
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -153,14 +153,14 @@
153
153
  flex-direction:column;
154
154
  align-items:stretch;
155
155
  justify-content:center;
156
- padding:var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))) var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))) var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))) var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
156
+ padding:var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
157
157
  }
158
158
  .root[data-surface=window]{
159
159
  align-items:center;
160
160
  align-self:stretch;
161
- padding-left:var(--sn-popupPrivate-anatomy-window-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
162
- padding-right:var(--sn-popupPrivate-anatomy-window-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
163
- padding-bottom:var(--sn-popupPrivate-anatomy-window-footer-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
161
+ padding-left:var(--sn-popupPrivate-anatomy-window-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
162
+ padding-right:var(--sn-popupPrivate-anatomy-window-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
163
+ padding-bottom:var(--sn-popupPrivate-anatomy-window-footer-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
164
164
  }
165
165
 
166
166
  .contentWrapper{
@@ -168,7 +168,7 @@
168
168
  flex-direction:column;
169
169
  }
170
170
  [data-surface=bottomSheet] .contentWrapper{
171
- gap:var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px)));
171
+ gap:var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px));
172
172
  }
173
173
  [data-surface=window] .contentWrapper{
174
174
  flex:1 0 0;
@@ -182,16 +182,16 @@
182
182
  box-sizing:border-box;
183
183
  }
184
184
  .root[data-surface=bottomSheet]{
185
- gap:var(--sn-popupPrivate-anatomy-bottomSheet-header-gap, var(--sn-density-spacing-interval-xs, var(--sn-platform-comfort-spacing-interval-xs, var(--sn-primitive-dimension-8, 8px))));
186
- padding-top:var(--sn-popupPrivate-anatomy-bottomSheet-header-paddingTop, var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px))));
187
- padding-bottom:var(--sn-popupPrivate-anatomy-bottomSheet-header-paddingBottom, var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px))));
185
+ gap:var(--sn-popupPrivate-anatomy-bottomSheet-header-gap, var(--sn-density-spacing-interval-xs, var(--sn-primitive-dimension-4, 4px)));
186
+ padding-top:var(--sn-popupPrivate-anatomy-bottomSheet-header-paddingTop, var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px)));
187
+ padding-bottom:var(--sn-popupPrivate-anatomy-bottomSheet-header-paddingBottom, var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px)));
188
188
  }
189
189
  .root[data-surface=window]{
190
190
  align-items:flex-start;
191
191
  align-self:stretch;
192
192
  justify-content:center;
193
- gap:var(--sn-popupPrivate-anatomy-window-header-gap, var(--sn-density-spacing-interval-xs, var(--sn-platform-comfort-spacing-interval-xs, var(--sn-primitive-dimension-8, 8px))));
194
- padding-bottom:var(--sn-popupPrivate-anatomy-window-header-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
193
+ gap:var(--sn-popupPrivate-anatomy-window-header-gap, var(--sn-density-spacing-interval-xs, var(--sn-primitive-dimension-4, 4px)));
194
+ padding-bottom:var(--sn-popupPrivate-anatomy-window-header-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
195
195
  }
196
196
 
197
197
  .headlineWrapper{
@@ -203,22 +203,20 @@
203
203
  gap:0;
204
204
  }
205
205
  [data-surface=bottomSheet] .headlineWrapper[data-with-before], [data-surface=bottomSheet] .headlineWrapper[data-with-after]{
206
- gap:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-gap, var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px))));
206
+ gap:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
207
207
  }
208
208
  [data-surface=bottomSheet] .headlineWrapper[data-with-before]{
209
- padding-left:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-paddingLeft, var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px))));
209
+ padding-left:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-paddingLeft, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
210
210
  }
211
211
  [data-surface=bottomSheet] .headlineWrapper[data-with-after]{
212
- padding-right:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-paddingRight, var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px))));
212
+ padding-right:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-paddingRight, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
213
213
  }
214
214
  [data-surface=window] .headlineWrapper{
215
215
  align-self:stretch;
216
- gap:var(--sn-popupPrivate-anatomy-window-header-headline-gap, var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px))));
217
- height:var(--sn-popupPrivate-anatomy-window-header-headline-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)))));
218
- padding-left:var(--sn-popupPrivate-anatomy-window-header-headline-paddingHorizontal, var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px))));
219
- padding-right:var(--sn-popupPrivate-anatomy-window-header-headline-paddingHorizontal, var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px))));
220
- height:auto;
221
- min-height:var(--sn-popupPrivate-anatomy-window-header-headline-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)))));
216
+ gap:var(--sn-popupPrivate-anatomy-window-header-headline-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
217
+ height:var(--sn-popupPrivate-anatomy-window-header-headline-height, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
218
+ padding-left:var(--sn-popupPrivate-anatomy-window-header-headline-paddingHorizontal, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
219
+ padding-right:var(--sn-popupPrivate-anatomy-window-header-headline-paddingHorizontal, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
222
220
  padding-right:0;
223
221
  }
224
222
  [data-surface=window] .headlineWrapper:not([data-with-before]){
@@ -233,22 +231,23 @@
233
231
  }
234
232
  [data-surface=bottomSheet] .headline{
235
233
  flex:1 1 auto;
236
- gap:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px))));
237
- min-height:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-minHeight, var(--sn-density-size-m, var(--sn-density-scale-100-m, var(--sn-platform-comfort-scale-100-m, var(--sn-primitive-dimension-40, 40px)))));
234
+ gap:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
235
+ padding-top:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-paddingVertical, var(--sn-primitive-dimension-10, 10px));
236
+ padding-bottom:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-paddingVertical, var(--sn-primitive-dimension-10, 10px));
238
237
  }
239
238
  [data-surface=window] .headline{
240
239
  flex:1 0 0;
241
- gap:var(--sn-popupPrivate-anatomy-window-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px))));
242
- padding-left:var(--sn-popupPrivate-anatomy-window-header-headline-headlineWrapper-paddingLeft, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
243
- padding-right:var(--sn-popupPrivate-anatomy-window-header-headline-headlineWrapper-paddingRight, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
240
+ gap:var(--sn-popupPrivate-anatomy-window-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
241
+ padding-left:var(--sn-popupPrivate-anatomy-window-header-headline-headlineWrapper-paddingLeft, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
242
+ padding-right:var(--sn-popupPrivate-anatomy-window-header-headline-headlineWrapper-paddingRight, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
244
243
  }
245
244
 
246
245
  [data-surface=bottomSheet] .headlineWrapper:not([data-with-before]) .headline{
247
- padding-left:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-paddingLeft, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
246
+ padding-left:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-paddingLeft, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
248
247
  }
249
248
 
250
249
  [data-surface=bottomSheet] .headlineWrapper:not([data-with-after]) .headline{
251
- padding-right:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-paddingRight, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
250
+ padding-right:var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-paddingRight, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
252
251
  }
253
252
 
254
253
  [data-surface=window] .headlineWrapper[data-with-before] .headline{
@@ -281,13 +280,13 @@
281
280
  box-sizing:border-box;
282
281
  }
283
282
  [data-surface=bottomSheet] .subtitleWrapper{
284
- padding-right:var(--sn-popupPrivate-anatomy-bottomSheet-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
285
- padding-left:var(--sn-popupPrivate-anatomy-bottomSheet-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
283
+ padding-right:var(--sn-popupPrivate-anatomy-bottomSheet-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
284
+ padding-left:var(--sn-popupPrivate-anatomy-bottomSheet-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
286
285
  }
287
286
  [data-surface=window] .subtitleWrapper{
288
287
  align-self:stretch;
289
- padding-left:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
290
- padding-right:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
288
+ padding-left:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
289
+ padding-right:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
291
290
  }
292
291
 
293
292
  .subtitle{
@@ -298,13 +297,13 @@
298
297
  box-sizing:border-box;
299
298
  }
300
299
  [data-surface=bottomSheet] .secondWrapper{
301
- padding-left:var(--sn-popupPrivate-anatomy-bottomSheet-header-secondWrapper-paddingHorizontal, var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px)))));
302
- padding-right:var(--sn-popupPrivate-anatomy-bottomSheet-header-secondWrapper-paddingHorizontal, var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px)))));
300
+ padding-left:var(--sn-popupPrivate-anatomy-bottomSheet-header-secondWrapper-paddingHorizontal, var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px))));
301
+ padding-right:var(--sn-popupPrivate-anatomy-bottomSheet-header-secondWrapper-paddingHorizontal, var(--sn-popupPrivate-anatomy-bottomSheet-header-headline-headlineWrapper-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px))));
303
302
  }
304
303
  [data-surface=window] .secondWrapper{
305
304
  align-self:stretch;
306
- padding-left:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
307
- padding-right:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
305
+ padding-left:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
306
+ padding-right:var(--sn-popupPrivate-anatomy-window-header-subHeadlineWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
308
307
  }
309
308
  .wrapper{
310
309
  touch-action:none;
package/dist/esm/components/PopupBody/styles.module.css CHANGED
@@ -5,8 +5,8 @@
5
5
  flex:1 1 auto;
6
6
  box-sizing:border-box;
7
7
  min-height:0;
8
- padding:var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingTop, var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px)))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
9
- color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
8
+ padding:var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingTop, var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-bottomSheet-anatomy-container-content-bodyWrapper-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
9
+ color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
10
10
  }
11
11
 
12
12
  .root[data-no-padding]{
package/dist/esm/components/PopupCloseButton/styles.module.css CHANGED
@@ -13,7 +13,7 @@
13
13
  margin:var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-paddingTop, var(--sn-brand-anatomy-spacing-window-badgeButtonClosed-paddingTop, var(--sn-primitive-dimension-48, 48px))) var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-paddingRight, var(--sn-brand-anatomy-spacing-window-badgeButtonClosed-paddingRight, var(--sn-primitive-dimension-48, 48px))) var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-paddingBottom, var(--sn-brand-anatomy-spacing-window-badgeButtonClosed-paddingBottom, var(--sn-primitive-dimension-0, 0px))) var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-paddingLeft, var(--sn-brand-anatomy-spacing-window-badgeButtonClosed-paddingLeft, var(--sn-primitive-dimension-0, 0px)));
14
14
  padding:0;
15
15
  border:0 solid transparent;
16
- color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
16
+ color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
17
17
  background:transparent;
18
18
  outline:0;
19
19
  min-width:var(--sn-popupPrivate-anatomy-window-badgeButtonClosed-buttonClosed-minWidth, var(--sn-primitive-dimension-32, 32px));
@@ -34,7 +34,7 @@
34
34
  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)));
35
35
  }
36
36
  .root .stateLayer[data-state=activatedOnBackground]{
37
- background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
37
+ 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))));
38
38
  }
39
39
  .root .stateLayer[data-state=versionOnColor]{
40
40
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -59,7 +59,7 @@
59
59
  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)));
60
60
  }
61
61
  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
62
- background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
62
+ 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))));
63
63
  }
64
64
  .root:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
65
65
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -86,7 +86,7 @@
86
86
  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)));
87
87
  }
88
88
  .root[data-loading] .stateLayer[data-state=activatedOnBackground], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
89
- background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
89
+ 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))));
90
90
  }
91
91
  .root[data-loading] .stateLayer[data-state=versionOnColor], .root:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .root[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
92
92
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
package/dist/esm/components/PopupFooter/styles.module.css CHANGED
@@ -8,14 +8,14 @@
8
8
  flex-direction:column;
9
9
  align-items:stretch;
10
10
  justify-content:center;
11
- padding:var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))) var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))) var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)))) var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
11
+ padding:var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px))) var(--sn-popupPrivate-anatomy-bottomSheet-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
12
12
  }
13
13
  .root[data-surface=window]{
14
14
  align-items:center;
15
15
  align-self:stretch;
16
- padding-left:var(--sn-popupPrivate-anatomy-window-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
17
- padding-right:var(--sn-popupPrivate-anatomy-window-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
18
- padding-bottom:var(--sn-popupPrivate-anatomy-window-footer-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px))));
16
+ padding-left:var(--sn-popupPrivate-anatomy-window-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
17
+ padding-right:var(--sn-popupPrivate-anatomy-window-footer-paddingHorizontal, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
18
+ padding-bottom:var(--sn-popupPrivate-anatomy-window-footer-paddingBottom, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
19
19
  }
20
20
 
21
21
  .contentWrapper{
@@ -23,7 +23,7 @@
23
23
  flex-direction:column;
24
24
  }
25
25
  [data-surface=bottomSheet] .contentWrapper{
26
- gap:var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px)));
26
+ gap:var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px));
27
27
  }
28
28
  [data-surface=window] .contentWrapper{
29
29
  flex:1 0 0;