@cloud-ru/ds-drag-and-drop 1.1.1 → 1.1.2-preview-d50a3da1.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 (9) hide show
  1. package/dist/cjs/components/DragPreview/styles.module.css +57 -57
  2. package/dist/cjs/components/DropIndicator/styles.module.css +1 -1
  3. package/dist/cjs/components/DropTarget/styles.module.css +3 -3
  4. package/dist/cjs/style.css +61 -61
  5. package/dist/esm/components/DragPreview/styles.module.css +57 -57
  6. package/dist/esm/components/DropIndicator/styles.module.css +1 -1
  7. package/dist/esm/components/DropTarget/styles.module.css +3 -3
  8. package/dist/esm/style.css +61 -61
  9. package/package.json +3 -3
package/dist/cjs/components/DragPreview/styles.module.css CHANGED
@@ -5,206 +5,206 @@
5
5
  position:relative;
6
6
  box-sizing:border-box;
7
7
  border-radius:inherit;
8
- 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)));
8
+ 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)));
9
9
  }
10
10
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level=default]{
11
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
11
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
12
12
  }
13
13
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level=default] .acrylic{
14
14
  opacity:var(--sn-acrylic-opacityBackground, 1);
15
- 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))));
15
+ background:var(--sn-theme-color-primary-background, var(--sn-brand-color-primary-90, #edf7f1));
16
16
  }
17
17
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level="1Level"]{
18
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
18
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
19
19
  }
20
20
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level="1Level"] .acrylic{
21
21
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
22
- 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))));
22
+ background:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, #f5fdf8));
23
23
  }
24
24
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level="2Level"]{
25
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
25
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
26
26
  }
27
27
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level="2Level"] .acrylic{
28
28
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
29
- 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))));
29
+ background:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, #fbfffc));
30
30
  }
31
31
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level=default]{
32
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
32
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
33
33
  }
34
34
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level=default] .acrylic{
35
35
  opacity:var(--sn-acrylic-opacityBackground, 1);
36
- background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
36
+ background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
37
37
  }
38
38
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level="1Level"]{
39
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
39
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
40
40
  }
41
41
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level="1Level"] .acrylic{
42
42
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
43
- background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
43
+ background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
44
44
  }
45
45
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level="2Level"]{
46
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
46
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
47
47
  }
48
48
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level="2Level"] .acrylic{
49
49
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
50
- background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
50
+ background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
51
51
  }
52
52
  .dragPreview[data-acrylic-appearance=red][data-acrylic-level=default]{
53
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
53
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
54
54
  }
55
55
  .dragPreview[data-acrylic-appearance=red][data-acrylic-level=default] .acrylic{
56
56
  opacity:var(--sn-acrylic-opacityBackground, 1);
57
- background:var(--sn-theme-color-red-background, var(--sn-primitive-color-red-90, #fee8e5));
57
+ background:var(--sn-theme-color-red-background, var(--sn-brand-palette-red-90, #fee8e5));
58
58
  }
59
59
  .dragPreview[data-acrylic-appearance=red][data-acrylic-level="1Level"]{
60
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
60
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
61
61
  }
62
62
  .dragPreview[data-acrylic-appearance=red][data-acrylic-level="1Level"] .acrylic{
63
63
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
64
- background:var(--sn-theme-color-red-background1Level, var(--sn-primitive-color-red-95, #fef5f1));
64
+ background:var(--sn-theme-color-red-background1Level, var(--sn-brand-palette-red-95, #fef5f1));
65
65
  }
66
66
  .dragPreview[data-acrylic-appearance=red][data-acrylic-level="2Level"]{
67
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
67
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
68
68
  }
69
69
  .dragPreview[data-acrylic-appearance=red][data-acrylic-level="2Level"] .acrylic{
70
70
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
71
- background:var(--sn-theme-color-red-background2Level, var(--sn-primitive-color-red-99, #fffaf7));
71
+ background:var(--sn-theme-color-red-background2Level, var(--sn-brand-palette-red-99, #fffaf7));
72
72
  }
73
73
  .dragPreview[data-acrylic-appearance=orange][data-acrylic-level=default]{
74
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
74
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
75
75
  }
76
76
  .dragPreview[data-acrylic-appearance=orange][data-acrylic-level=default] .acrylic{
77
77
  opacity:var(--sn-acrylic-opacityBackground, 1);
78
- background:var(--sn-theme-color-orange-background, var(--sn-primitive-color-orange-90, #ffedcf));
78
+ background:var(--sn-theme-color-orange-background, var(--sn-brand-palette-orange-90, #ffedcf));
79
79
  }
80
80
  .dragPreview[data-acrylic-appearance=orange][data-acrylic-level="1Level"]{
81
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
81
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
82
82
  }
83
83
  .dragPreview[data-acrylic-appearance=orange][data-acrylic-level="1Level"] .acrylic{
84
84
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
85
- background:var(--sn-theme-color-orange-background1Level, var(--sn-primitive-color-orange-95, #fff6e5));
85
+ background:var(--sn-theme-color-orange-background1Level, var(--sn-brand-palette-orange-95, #fff6e5));
86
86
  }
87
87
  .dragPreview[data-acrylic-appearance=orange][data-acrylic-level="2Level"]{
88
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
88
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
89
89
  }
90
90
  .dragPreview[data-acrylic-appearance=orange][data-acrylic-level="2Level"] .acrylic{
91
91
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
92
- background:var(--sn-theme-color-orange-background2Level, var(--sn-primitive-color-orange-99, #fffcf4));
92
+ background:var(--sn-theme-color-orange-background2Level, var(--sn-brand-palette-orange-99, #fffcf4));
93
93
  }
94
94
  .dragPreview[data-acrylic-appearance=yellow][data-acrylic-level=default]{
95
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
95
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
96
96
  }
97
97
  .dragPreview[data-acrylic-appearance=yellow][data-acrylic-level=default] .acrylic{
98
98
  opacity:var(--sn-acrylic-opacityBackground, 1);
99
- background:var(--sn-theme-color-yellow-background, var(--sn-primitive-color-yellow-90, #fdf4cc));
99
+ background:var(--sn-theme-color-yellow-background, var(--sn-brand-palette-yellow-90, #fdf4cc));
100
100
  }
101
101
  .dragPreview[data-acrylic-appearance=yellow][data-acrylic-level="1Level"]{
102
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
102
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
103
103
  }
104
104
  .dragPreview[data-acrylic-appearance=yellow][data-acrylic-level="1Level"] .acrylic{
105
105
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
106
- background:var(--sn-theme-color-yellow-background1Level, var(--sn-primitive-color-yellow-95, #fffbe6));
106
+ background:var(--sn-theme-color-yellow-background1Level, var(--sn-brand-palette-yellow-95, #fffbe6));
107
107
  }
108
108
  .dragPreview[data-acrylic-appearance=yellow][data-acrylic-level="2Level"]{
109
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
109
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
110
110
  }
111
111
  .dragPreview[data-acrylic-appearance=yellow][data-acrylic-level="2Level"] .acrylic{
112
112
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
113
- background:var(--sn-theme-color-yellow-background2Level, var(--sn-primitive-color-yellow-99, #fffef6));
113
+ background:var(--sn-theme-color-yellow-background2Level, var(--sn-brand-palette-yellow-99, #fffef6));
114
114
  }
115
115
  .dragPreview[data-acrylic-appearance=green][data-acrylic-level=default]{
116
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
116
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
117
117
  }
118
118
  .dragPreview[data-acrylic-appearance=green][data-acrylic-level=default] .acrylic{
119
119
  opacity:var(--sn-acrylic-opacityBackground, 1);
120
- background:var(--sn-theme-color-green-background, var(--sn-primitive-color-green-90, #e4f5df));
120
+ background:var(--sn-theme-color-green-background, var(--sn-brand-palette-green-90, #e4f5df));
121
121
  }
122
122
  .dragPreview[data-acrylic-appearance=green][data-acrylic-level="1Level"]{
123
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
123
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
124
124
  }
125
125
  .dragPreview[data-acrylic-appearance=green][data-acrylic-level="1Level"] .acrylic{
126
126
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
127
- background:var(--sn-theme-color-green-background1Level, var(--sn-primitive-color-green-95, #f1faed));
127
+ background:var(--sn-theme-color-green-background1Level, var(--sn-brand-palette-green-95, #f1faed));
128
128
  }
129
129
  .dragPreview[data-acrylic-appearance=green][data-acrylic-level="2Level"]{
130
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
130
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
131
131
  }
132
132
  .dragPreview[data-acrylic-appearance=green][data-acrylic-level="2Level"] .acrylic{
133
133
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
134
- background:var(--sn-theme-color-green-background2Level, var(--sn-primitive-color-green-99, #fcfefa));
134
+ background:var(--sn-theme-color-green-background2Level, var(--sn-brand-palette-green-99, #fcfefa));
135
135
  }
136
136
  .dragPreview[data-acrylic-appearance=blue][data-acrylic-level=default]{
137
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
137
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
138
138
  }
139
139
  .dragPreview[data-acrylic-appearance=blue][data-acrylic-level=default] .acrylic{
140
140
  opacity:var(--sn-acrylic-opacityBackground, 1);
141
- background:var(--sn-theme-color-blue-background, var(--sn-primitive-color-blue-90, #e6f4fd));
141
+ background:var(--sn-theme-color-blue-background, var(--sn-brand-palette-blue-90, #e6f4fd));
142
142
  }
143
143
  .dragPreview[data-acrylic-appearance=blue][data-acrylic-level="1Level"]{
144
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
144
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
145
145
  }
146
146
  .dragPreview[data-acrylic-appearance=blue][data-acrylic-level="1Level"] .acrylic{
147
147
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
148
- background:var(--sn-theme-color-blue-background1Level, var(--sn-primitive-color-blue-95, #f2f9ff));
148
+ background:var(--sn-theme-color-blue-background1Level, var(--sn-brand-palette-blue-95, #f2f9ff));
149
149
  }
150
150
  .dragPreview[data-acrylic-appearance=blue][data-acrylic-level="2Level"]{
151
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
151
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
152
152
  }
153
153
  .dragPreview[data-acrylic-appearance=blue][data-acrylic-level="2Level"] .acrylic{
154
154
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
155
- background:var(--sn-theme-color-blue-background2Level, var(--sn-primitive-color-blue-99, #fdfeff));
155
+ background:var(--sn-theme-color-blue-background2Level, var(--sn-brand-palette-blue-99, #fdfeff));
156
156
  }
157
157
  .dragPreview[data-acrylic-appearance=violet][data-acrylic-level=default]{
158
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
158
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
159
159
  }
160
160
  .dragPreview[data-acrylic-appearance=violet][data-acrylic-level=default] .acrylic{
161
161
  opacity:var(--sn-acrylic-opacityBackground, 1);
162
- background:var(--sn-theme-color-violet-background, var(--sn-primitive-color-violet-90, #f3edfc));
162
+ background:var(--sn-theme-color-violet-background, var(--sn-brand-palette-violet-90, #f3edfc));
163
163
  }
164
164
  .dragPreview[data-acrylic-appearance=violet][data-acrylic-level="1Level"]{
165
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
165
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
166
166
  }
167
167
  .dragPreview[data-acrylic-appearance=violet][data-acrylic-level="1Level"] .acrylic{
168
168
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
169
- background:var(--sn-theme-color-violet-background1Level, var(--sn-primitive-color-violet-95, #f9f5ff));
169
+ background:var(--sn-theme-color-violet-background1Level, var(--sn-brand-palette-violet-95, #f9f5ff));
170
170
  }
171
171
  .dragPreview[data-acrylic-appearance=violet][data-acrylic-level="2Level"]{
172
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
172
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
173
173
  }
174
174
  .dragPreview[data-acrylic-appearance=violet][data-acrylic-level="2Level"] .acrylic{
175
175
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
176
- background:var(--sn-theme-color-violet-background2Level, var(--sn-primitive-color-violet-99, #fdfdfd));
176
+ background:var(--sn-theme-color-violet-background2Level, var(--sn-brand-palette-violet-99, #fdfdfd));
177
177
  }
178
178
  .dragPreview[data-acrylic-appearance=pink][data-acrylic-level=default]{
179
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
179
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
180
180
  }
181
181
  .dragPreview[data-acrylic-appearance=pink][data-acrylic-level=default] .acrylic{
182
182
  opacity:var(--sn-acrylic-opacityBackground, 1);
183
- background:var(--sn-theme-color-pink-background, var(--sn-primitive-color-pink-90, #fceaf0));
183
+ background:var(--sn-theme-color-pink-background, var(--sn-brand-palette-pink-90, #fceaf0));
184
184
  }
185
185
  .dragPreview[data-acrylic-appearance=pink][data-acrylic-level="1Level"]{
186
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
186
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
187
187
  }
188
188
  .dragPreview[data-acrylic-appearance=pink][data-acrylic-level="1Level"] .acrylic{
189
189
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
190
- background:var(--sn-theme-color-pink-background1Level, var(--sn-primitive-color-pink-95, #fff5f7));
190
+ background:var(--sn-theme-color-pink-background1Level, var(--sn-brand-palette-pink-95, #fff5f7));
191
191
  }
192
192
  .dragPreview[data-acrylic-appearance=pink][data-acrylic-level="2Level"]{
193
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
193
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
194
194
  }
195
195
  .dragPreview[data-acrylic-appearance=pink][data-acrylic-level="2Level"] .acrylic{
196
196
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
197
- background:var(--sn-theme-color-pink-background2Level, var(--sn-primitive-color-pink-99, #fdfcfc));
197
+ background:var(--sn-theme-color-pink-background2Level, var(--sn-brand-palette-pink-99, #fdfcfc));
198
198
  }
199
199
  .dragPreview[data-acrylic-appearance=transparent]{
200
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
200
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
201
201
  }
202
202
  .dragPreview[data-acrylic-appearance=transparent] .acrylic{
203
203
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
204
204
  background:transparent;
205
205
  }
206
206
  .dragPreview[data-acrylic-appearance=decorTransparent]{
207
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
207
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
208
208
  }
209
209
  .dragPreview[data-acrylic-appearance=decorTransparent] .acrylic{
210
210
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
package/dist/cjs/components/DropIndicator/styles.module.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .dropIndicator{
2
2
  flex-shrink:0;
3
3
  box-sizing:border-box;
4
- border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
4
+ border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
5
5
  border-style:dashed;
6
6
  }
7
7
  .dropIndicator[data-orientation=horizontal]{
package/dist/cjs/components/DropTarget/styles.module.css CHANGED
@@ -1,10 +1,10 @@
1
1
  @charset "UTF-8";
2
2
  .dropTarget{
3
3
  box-sizing:border-box;
4
- border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
4
+ border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
5
5
  }
6
6
  .dropTarget[data-active]{
7
- background:var(--sn-theme-color-primary-decorTransparent, var(--sn-brand-color-primary-transparent, var(--sn-brandRole-color-brandA-transparent, rgba(56, 159, 116, 0.1411764706))));
8
- outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
7
+ background:var(--sn-theme-color-primary-decorTransparent, var(--sn-brand-color-primary-transparent, rgba(56, 159, 116, 0.1019607843)));
8
+ outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
9
9
  outline-offset:calc(-1 * var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
10
10
  }
package/dist/cjs/style.css CHANGED
@@ -18,206 +18,206 @@
18
18
  position:relative;
19
19
  box-sizing:border-box;
20
20
  border-radius:inherit;
21
- 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)));
21
+ 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)));
22
22
  }
23
23
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level=default]{
24
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
24
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
25
25
  }
26
26
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level=default] .acrylic{
27
27
  opacity:var(--sn-acrylic-opacityBackground, 1);
28
- 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))));
28
+ background:var(--sn-theme-color-primary-background, var(--sn-brand-color-primary-90, #edf7f1));
29
29
  }
30
30
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level="1Level"]{
31
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
31
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
32
32
  }
33
33
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level="1Level"] .acrylic{
34
34
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
35
- 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))));
35
+ background:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, #f5fdf8));
36
36
  }
37
37
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level="2Level"]{
38
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
38
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
39
39
  }
40
40
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level="2Level"] .acrylic{
41
41
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
42
- 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))));
42
+ background:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, #fbfffc));
43
43
  }
44
44
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level=default]{
45
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
45
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
46
46
  }
47
47
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level=default] .acrylic{
48
48
  opacity:var(--sn-acrylic-opacityBackground, 1);
49
- background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
49
+ background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
50
50
  }
51
51
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level="1Level"]{
52
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
52
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
53
53
  }
54
54
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level="1Level"] .acrylic{
55
55
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
56
- background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
56
+ background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
57
57
  }
58
58
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level="2Level"]{
59
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
59
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
60
60
  }
61
61
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level="2Level"] .acrylic{
62
62
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
63
- background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
63
+ background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
64
64
  }
65
65
  .dragPreview[data-acrylic-appearance=red][data-acrylic-level=default]{
66
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
66
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
67
67
  }
68
68
  .dragPreview[data-acrylic-appearance=red][data-acrylic-level=default] .acrylic{
69
69
  opacity:var(--sn-acrylic-opacityBackground, 1);
70
- background:var(--sn-theme-color-red-background, var(--sn-primitive-color-red-90, #fee8e5));
70
+ background:var(--sn-theme-color-red-background, var(--sn-brand-palette-red-90, #fee8e5));
71
71
  }
72
72
  .dragPreview[data-acrylic-appearance=red][data-acrylic-level="1Level"]{
73
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
73
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
74
74
  }
75
75
  .dragPreview[data-acrylic-appearance=red][data-acrylic-level="1Level"] .acrylic{
76
76
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
77
- background:var(--sn-theme-color-red-background1Level, var(--sn-primitive-color-red-95, #fef5f1));
77
+ background:var(--sn-theme-color-red-background1Level, var(--sn-brand-palette-red-95, #fef5f1));
78
78
  }
79
79
  .dragPreview[data-acrylic-appearance=red][data-acrylic-level="2Level"]{
80
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
80
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
81
81
  }
82
82
  .dragPreview[data-acrylic-appearance=red][data-acrylic-level="2Level"] .acrylic{
83
83
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
84
- background:var(--sn-theme-color-red-background2Level, var(--sn-primitive-color-red-99, #fffaf7));
84
+ background:var(--sn-theme-color-red-background2Level, var(--sn-brand-palette-red-99, #fffaf7));
85
85
  }
86
86
  .dragPreview[data-acrylic-appearance=orange][data-acrylic-level=default]{
87
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
87
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
88
88
  }
89
89
  .dragPreview[data-acrylic-appearance=orange][data-acrylic-level=default] .acrylic{
90
90
  opacity:var(--sn-acrylic-opacityBackground, 1);
91
- background:var(--sn-theme-color-orange-background, var(--sn-primitive-color-orange-90, #ffedcf));
91
+ background:var(--sn-theme-color-orange-background, var(--sn-brand-palette-orange-90, #ffedcf));
92
92
  }
93
93
  .dragPreview[data-acrylic-appearance=orange][data-acrylic-level="1Level"]{
94
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
94
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
95
95
  }
96
96
  .dragPreview[data-acrylic-appearance=orange][data-acrylic-level="1Level"] .acrylic{
97
97
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
98
- background:var(--sn-theme-color-orange-background1Level, var(--sn-primitive-color-orange-95, #fff6e5));
98
+ background:var(--sn-theme-color-orange-background1Level, var(--sn-brand-palette-orange-95, #fff6e5));
99
99
  }
100
100
  .dragPreview[data-acrylic-appearance=orange][data-acrylic-level="2Level"]{
101
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
101
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
102
102
  }
103
103
  .dragPreview[data-acrylic-appearance=orange][data-acrylic-level="2Level"] .acrylic{
104
104
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
105
- background:var(--sn-theme-color-orange-background2Level, var(--sn-primitive-color-orange-99, #fffcf4));
105
+ background:var(--sn-theme-color-orange-background2Level, var(--sn-brand-palette-orange-99, #fffcf4));
106
106
  }
107
107
  .dragPreview[data-acrylic-appearance=yellow][data-acrylic-level=default]{
108
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
108
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
109
109
  }
110
110
  .dragPreview[data-acrylic-appearance=yellow][data-acrylic-level=default] .acrylic{
111
111
  opacity:var(--sn-acrylic-opacityBackground, 1);
112
- background:var(--sn-theme-color-yellow-background, var(--sn-primitive-color-yellow-90, #fdf4cc));
112
+ background:var(--sn-theme-color-yellow-background, var(--sn-brand-palette-yellow-90, #fdf4cc));
113
113
  }
114
114
  .dragPreview[data-acrylic-appearance=yellow][data-acrylic-level="1Level"]{
115
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
115
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
116
116
  }
117
117
  .dragPreview[data-acrylic-appearance=yellow][data-acrylic-level="1Level"] .acrylic{
118
118
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
119
- background:var(--sn-theme-color-yellow-background1Level, var(--sn-primitive-color-yellow-95, #fffbe6));
119
+ background:var(--sn-theme-color-yellow-background1Level, var(--sn-brand-palette-yellow-95, #fffbe6));
120
120
  }
121
121
  .dragPreview[data-acrylic-appearance=yellow][data-acrylic-level="2Level"]{
122
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
122
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
123
123
  }
124
124
  .dragPreview[data-acrylic-appearance=yellow][data-acrylic-level="2Level"] .acrylic{
125
125
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
126
- background:var(--sn-theme-color-yellow-background2Level, var(--sn-primitive-color-yellow-99, #fffef6));
126
+ background:var(--sn-theme-color-yellow-background2Level, var(--sn-brand-palette-yellow-99, #fffef6));
127
127
  }
128
128
  .dragPreview[data-acrylic-appearance=green][data-acrylic-level=default]{
129
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
129
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
130
130
  }
131
131
  .dragPreview[data-acrylic-appearance=green][data-acrylic-level=default] .acrylic{
132
132
  opacity:var(--sn-acrylic-opacityBackground, 1);
133
- background:var(--sn-theme-color-green-background, var(--sn-primitive-color-green-90, #e4f5df));
133
+ background:var(--sn-theme-color-green-background, var(--sn-brand-palette-green-90, #e4f5df));
134
134
  }
135
135
  .dragPreview[data-acrylic-appearance=green][data-acrylic-level="1Level"]{
136
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
136
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
137
137
  }
138
138
  .dragPreview[data-acrylic-appearance=green][data-acrylic-level="1Level"] .acrylic{
139
139
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
140
- background:var(--sn-theme-color-green-background1Level, var(--sn-primitive-color-green-95, #f1faed));
140
+ background:var(--sn-theme-color-green-background1Level, var(--sn-brand-palette-green-95, #f1faed));
141
141
  }
142
142
  .dragPreview[data-acrylic-appearance=green][data-acrylic-level="2Level"]{
143
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
143
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
144
144
  }
145
145
  .dragPreview[data-acrylic-appearance=green][data-acrylic-level="2Level"] .acrylic{
146
146
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
147
- background:var(--sn-theme-color-green-background2Level, var(--sn-primitive-color-green-99, #fcfefa));
147
+ background:var(--sn-theme-color-green-background2Level, var(--sn-brand-palette-green-99, #fcfefa));
148
148
  }
149
149
  .dragPreview[data-acrylic-appearance=blue][data-acrylic-level=default]{
150
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
150
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
151
151
  }
152
152
  .dragPreview[data-acrylic-appearance=blue][data-acrylic-level=default] .acrylic{
153
153
  opacity:var(--sn-acrylic-opacityBackground, 1);
154
- background:var(--sn-theme-color-blue-background, var(--sn-primitive-color-blue-90, #e6f4fd));
154
+ background:var(--sn-theme-color-blue-background, var(--sn-brand-palette-blue-90, #e6f4fd));
155
155
  }
156
156
  .dragPreview[data-acrylic-appearance=blue][data-acrylic-level="1Level"]{
157
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
157
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
158
158
  }
159
159
  .dragPreview[data-acrylic-appearance=blue][data-acrylic-level="1Level"] .acrylic{
160
160
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
161
- background:var(--sn-theme-color-blue-background1Level, var(--sn-primitive-color-blue-95, #f2f9ff));
161
+ background:var(--sn-theme-color-blue-background1Level, var(--sn-brand-palette-blue-95, #f2f9ff));
162
162
  }
163
163
  .dragPreview[data-acrylic-appearance=blue][data-acrylic-level="2Level"]{
164
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
164
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
165
165
  }
166
166
  .dragPreview[data-acrylic-appearance=blue][data-acrylic-level="2Level"] .acrylic{
167
167
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
168
- background:var(--sn-theme-color-blue-background2Level, var(--sn-primitive-color-blue-99, #fdfeff));
168
+ background:var(--sn-theme-color-blue-background2Level, var(--sn-brand-palette-blue-99, #fdfeff));
169
169
  }
170
170
  .dragPreview[data-acrylic-appearance=violet][data-acrylic-level=default]{
171
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
171
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
172
172
  }
173
173
  .dragPreview[data-acrylic-appearance=violet][data-acrylic-level=default] .acrylic{
174
174
  opacity:var(--sn-acrylic-opacityBackground, 1);
175
- background:var(--sn-theme-color-violet-background, var(--sn-primitive-color-violet-90, #f3edfc));
175
+ background:var(--sn-theme-color-violet-background, var(--sn-brand-palette-violet-90, #f3edfc));
176
176
  }
177
177
  .dragPreview[data-acrylic-appearance=violet][data-acrylic-level="1Level"]{
178
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
178
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
179
179
  }
180
180
  .dragPreview[data-acrylic-appearance=violet][data-acrylic-level="1Level"] .acrylic{
181
181
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
182
- background:var(--sn-theme-color-violet-background1Level, var(--sn-primitive-color-violet-95, #f9f5ff));
182
+ background:var(--sn-theme-color-violet-background1Level, var(--sn-brand-palette-violet-95, #f9f5ff));
183
183
  }
184
184
  .dragPreview[data-acrylic-appearance=violet][data-acrylic-level="2Level"]{
185
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
185
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
186
186
  }
187
187
  .dragPreview[data-acrylic-appearance=violet][data-acrylic-level="2Level"] .acrylic{
188
188
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
189
- background:var(--sn-theme-color-violet-background2Level, var(--sn-primitive-color-violet-99, #fdfdfd));
189
+ background:var(--sn-theme-color-violet-background2Level, var(--sn-brand-palette-violet-99, #fdfdfd));
190
190
  }
191
191
  .dragPreview[data-acrylic-appearance=pink][data-acrylic-level=default]{
192
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
192
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
193
193
  }
194
194
  .dragPreview[data-acrylic-appearance=pink][data-acrylic-level=default] .acrylic{
195
195
  opacity:var(--sn-acrylic-opacityBackground, 1);
196
- background:var(--sn-theme-color-pink-background, var(--sn-primitive-color-pink-90, #fceaf0));
196
+ background:var(--sn-theme-color-pink-background, var(--sn-brand-palette-pink-90, #fceaf0));
197
197
  }
198
198
  .dragPreview[data-acrylic-appearance=pink][data-acrylic-level="1Level"]{
199
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
199
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
200
200
  }
201
201
  .dragPreview[data-acrylic-appearance=pink][data-acrylic-level="1Level"] .acrylic{
202
202
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
203
- background:var(--sn-theme-color-pink-background1Level, var(--sn-primitive-color-pink-95, #fff5f7));
203
+ background:var(--sn-theme-color-pink-background1Level, var(--sn-brand-palette-pink-95, #fff5f7));
204
204
  }
205
205
  .dragPreview[data-acrylic-appearance=pink][data-acrylic-level="2Level"]{
206
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
206
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
207
207
  }
208
208
  .dragPreview[data-acrylic-appearance=pink][data-acrylic-level="2Level"] .acrylic{
209
209
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
210
- background:var(--sn-theme-color-pink-background2Level, var(--sn-primitive-color-pink-99, #fdfcfc));
210
+ background:var(--sn-theme-color-pink-background2Level, var(--sn-brand-palette-pink-99, #fdfcfc));
211
211
  }
212
212
  .dragPreview[data-acrylic-appearance=transparent]{
213
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
213
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
214
214
  }
215
215
  .dragPreview[data-acrylic-appearance=transparent] .acrylic{
216
216
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
217
217
  background:transparent;
218
218
  }
219
219
  .dragPreview[data-acrylic-appearance=decorTransparent]{
220
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
220
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
221
221
  }
222
222
  .dragPreview[data-acrylic-appearance=decorTransparent] .acrylic{
223
223
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
@@ -241,7 +241,7 @@
241
241
  .dropIndicator{
242
242
  flex-shrink:0;
243
243
  box-sizing:border-box;
244
- border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
244
+ border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
245
245
  border-style:dashed;
246
246
  }
247
247
  .dropIndicator[data-orientation=horizontal]{
@@ -300,10 +300,10 @@
300
300
  @charset "UTF-8";
301
301
  .dropTarget{
302
302
  box-sizing:border-box;
303
- border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
303
+ border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
304
304
  }
305
305
  .dropTarget[data-active]{
306
- background:var(--sn-theme-color-primary-decorTransparent, var(--sn-brand-color-primary-transparent, var(--sn-brandRole-color-brandA-transparent, rgba(56, 159, 116, 0.1411764706))));
307
- outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
306
+ background:var(--sn-theme-color-primary-decorTransparent, var(--sn-brand-color-primary-transparent, rgba(56, 159, 116, 0.1019607843)));
307
+ outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
308
308
  outline-offset:calc(-1 * var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
309
309
  }
package/dist/esm/components/DragPreview/styles.module.css CHANGED
@@ -5,206 +5,206 @@
5
5
  position:relative;
6
6
  box-sizing:border-box;
7
7
  border-radius:inherit;
8
- 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)));
8
+ 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)));
9
9
  }
10
10
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level=default]{
11
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
11
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
12
12
  }
13
13
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level=default] .acrylic{
14
14
  opacity:var(--sn-acrylic-opacityBackground, 1);
15
- 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))));
15
+ background:var(--sn-theme-color-primary-background, var(--sn-brand-color-primary-90, #edf7f1));
16
16
  }
17
17
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level="1Level"]{
18
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
18
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
19
19
  }
20
20
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level="1Level"] .acrylic{
21
21
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
22
- 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))));
22
+ background:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, #f5fdf8));
23
23
  }
24
24
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level="2Level"]{
25
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
25
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
26
26
  }
27
27
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level="2Level"] .acrylic{
28
28
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
29
- 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))));
29
+ background:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, #fbfffc));
30
30
  }
31
31
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level=default]{
32
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
32
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
33
33
  }
34
34
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level=default] .acrylic{
35
35
  opacity:var(--sn-acrylic-opacityBackground, 1);
36
- background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
36
+ background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
37
37
  }
38
38
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level="1Level"]{
39
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
39
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
40
40
  }
41
41
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level="1Level"] .acrylic{
42
42
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
43
- background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
43
+ background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
44
44
  }
45
45
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level="2Level"]{
46
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
46
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
47
47
  }
48
48
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level="2Level"] .acrylic{
49
49
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
50
- background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
50
+ background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
51
51
  }
52
52
  .dragPreview[data-acrylic-appearance=red][data-acrylic-level=default]{
53
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
53
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
54
54
  }
55
55
  .dragPreview[data-acrylic-appearance=red][data-acrylic-level=default] .acrylic{
56
56
  opacity:var(--sn-acrylic-opacityBackground, 1);
57
- background:var(--sn-theme-color-red-background, var(--sn-primitive-color-red-90, #fee8e5));
57
+ background:var(--sn-theme-color-red-background, var(--sn-brand-palette-red-90, #fee8e5));
58
58
  }
59
59
  .dragPreview[data-acrylic-appearance=red][data-acrylic-level="1Level"]{
60
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
60
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
61
61
  }
62
62
  .dragPreview[data-acrylic-appearance=red][data-acrylic-level="1Level"] .acrylic{
63
63
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
64
- background:var(--sn-theme-color-red-background1Level, var(--sn-primitive-color-red-95, #fef5f1));
64
+ background:var(--sn-theme-color-red-background1Level, var(--sn-brand-palette-red-95, #fef5f1));
65
65
  }
66
66
  .dragPreview[data-acrylic-appearance=red][data-acrylic-level="2Level"]{
67
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
67
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
68
68
  }
69
69
  .dragPreview[data-acrylic-appearance=red][data-acrylic-level="2Level"] .acrylic{
70
70
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
71
- background:var(--sn-theme-color-red-background2Level, var(--sn-primitive-color-red-99, #fffaf7));
71
+ background:var(--sn-theme-color-red-background2Level, var(--sn-brand-palette-red-99, #fffaf7));
72
72
  }
73
73
  .dragPreview[data-acrylic-appearance=orange][data-acrylic-level=default]{
74
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
74
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
75
75
  }
76
76
  .dragPreview[data-acrylic-appearance=orange][data-acrylic-level=default] .acrylic{
77
77
  opacity:var(--sn-acrylic-opacityBackground, 1);
78
- background:var(--sn-theme-color-orange-background, var(--sn-primitive-color-orange-90, #ffedcf));
78
+ background:var(--sn-theme-color-orange-background, var(--sn-brand-palette-orange-90, #ffedcf));
79
79
  }
80
80
  .dragPreview[data-acrylic-appearance=orange][data-acrylic-level="1Level"]{
81
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
81
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
82
82
  }
83
83
  .dragPreview[data-acrylic-appearance=orange][data-acrylic-level="1Level"] .acrylic{
84
84
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
85
- background:var(--sn-theme-color-orange-background1Level, var(--sn-primitive-color-orange-95, #fff6e5));
85
+ background:var(--sn-theme-color-orange-background1Level, var(--sn-brand-palette-orange-95, #fff6e5));
86
86
  }
87
87
  .dragPreview[data-acrylic-appearance=orange][data-acrylic-level="2Level"]{
88
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
88
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
89
89
  }
90
90
  .dragPreview[data-acrylic-appearance=orange][data-acrylic-level="2Level"] .acrylic{
91
91
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
92
- background:var(--sn-theme-color-orange-background2Level, var(--sn-primitive-color-orange-99, #fffcf4));
92
+ background:var(--sn-theme-color-orange-background2Level, var(--sn-brand-palette-orange-99, #fffcf4));
93
93
  }
94
94
  .dragPreview[data-acrylic-appearance=yellow][data-acrylic-level=default]{
95
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
95
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
96
96
  }
97
97
  .dragPreview[data-acrylic-appearance=yellow][data-acrylic-level=default] .acrylic{
98
98
  opacity:var(--sn-acrylic-opacityBackground, 1);
99
- background:var(--sn-theme-color-yellow-background, var(--sn-primitive-color-yellow-90, #fdf4cc));
99
+ background:var(--sn-theme-color-yellow-background, var(--sn-brand-palette-yellow-90, #fdf4cc));
100
100
  }
101
101
  .dragPreview[data-acrylic-appearance=yellow][data-acrylic-level="1Level"]{
102
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
102
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
103
103
  }
104
104
  .dragPreview[data-acrylic-appearance=yellow][data-acrylic-level="1Level"] .acrylic{
105
105
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
106
- background:var(--sn-theme-color-yellow-background1Level, var(--sn-primitive-color-yellow-95, #fffbe6));
106
+ background:var(--sn-theme-color-yellow-background1Level, var(--sn-brand-palette-yellow-95, #fffbe6));
107
107
  }
108
108
  .dragPreview[data-acrylic-appearance=yellow][data-acrylic-level="2Level"]{
109
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
109
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
110
110
  }
111
111
  .dragPreview[data-acrylic-appearance=yellow][data-acrylic-level="2Level"] .acrylic{
112
112
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
113
- background:var(--sn-theme-color-yellow-background2Level, var(--sn-primitive-color-yellow-99, #fffef6));
113
+ background:var(--sn-theme-color-yellow-background2Level, var(--sn-brand-palette-yellow-99, #fffef6));
114
114
  }
115
115
  .dragPreview[data-acrylic-appearance=green][data-acrylic-level=default]{
116
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
116
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
117
117
  }
118
118
  .dragPreview[data-acrylic-appearance=green][data-acrylic-level=default] .acrylic{
119
119
  opacity:var(--sn-acrylic-opacityBackground, 1);
120
- background:var(--sn-theme-color-green-background, var(--sn-primitive-color-green-90, #e4f5df));
120
+ background:var(--sn-theme-color-green-background, var(--sn-brand-palette-green-90, #e4f5df));
121
121
  }
122
122
  .dragPreview[data-acrylic-appearance=green][data-acrylic-level="1Level"]{
123
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
123
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
124
124
  }
125
125
  .dragPreview[data-acrylic-appearance=green][data-acrylic-level="1Level"] .acrylic{
126
126
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
127
- background:var(--sn-theme-color-green-background1Level, var(--sn-primitive-color-green-95, #f1faed));
127
+ background:var(--sn-theme-color-green-background1Level, var(--sn-brand-palette-green-95, #f1faed));
128
128
  }
129
129
  .dragPreview[data-acrylic-appearance=green][data-acrylic-level="2Level"]{
130
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
130
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
131
131
  }
132
132
  .dragPreview[data-acrylic-appearance=green][data-acrylic-level="2Level"] .acrylic{
133
133
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
134
- background:var(--sn-theme-color-green-background2Level, var(--sn-primitive-color-green-99, #fcfefa));
134
+ background:var(--sn-theme-color-green-background2Level, var(--sn-brand-palette-green-99, #fcfefa));
135
135
  }
136
136
  .dragPreview[data-acrylic-appearance=blue][data-acrylic-level=default]{
137
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
137
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
138
138
  }
139
139
  .dragPreview[data-acrylic-appearance=blue][data-acrylic-level=default] .acrylic{
140
140
  opacity:var(--sn-acrylic-opacityBackground, 1);
141
- background:var(--sn-theme-color-blue-background, var(--sn-primitive-color-blue-90, #e6f4fd));
141
+ background:var(--sn-theme-color-blue-background, var(--sn-brand-palette-blue-90, #e6f4fd));
142
142
  }
143
143
  .dragPreview[data-acrylic-appearance=blue][data-acrylic-level="1Level"]{
144
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
144
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
145
145
  }
146
146
  .dragPreview[data-acrylic-appearance=blue][data-acrylic-level="1Level"] .acrylic{
147
147
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
148
- background:var(--sn-theme-color-blue-background1Level, var(--sn-primitive-color-blue-95, #f2f9ff));
148
+ background:var(--sn-theme-color-blue-background1Level, var(--sn-brand-palette-blue-95, #f2f9ff));
149
149
  }
150
150
  .dragPreview[data-acrylic-appearance=blue][data-acrylic-level="2Level"]{
151
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
151
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
152
152
  }
153
153
  .dragPreview[data-acrylic-appearance=blue][data-acrylic-level="2Level"] .acrylic{
154
154
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
155
- background:var(--sn-theme-color-blue-background2Level, var(--sn-primitive-color-blue-99, #fdfeff));
155
+ background:var(--sn-theme-color-blue-background2Level, var(--sn-brand-palette-blue-99, #fdfeff));
156
156
  }
157
157
  .dragPreview[data-acrylic-appearance=violet][data-acrylic-level=default]{
158
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
158
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
159
159
  }
160
160
  .dragPreview[data-acrylic-appearance=violet][data-acrylic-level=default] .acrylic{
161
161
  opacity:var(--sn-acrylic-opacityBackground, 1);
162
- background:var(--sn-theme-color-violet-background, var(--sn-primitive-color-violet-90, #f3edfc));
162
+ background:var(--sn-theme-color-violet-background, var(--sn-brand-palette-violet-90, #f3edfc));
163
163
  }
164
164
  .dragPreview[data-acrylic-appearance=violet][data-acrylic-level="1Level"]{
165
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
165
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
166
166
  }
167
167
  .dragPreview[data-acrylic-appearance=violet][data-acrylic-level="1Level"] .acrylic{
168
168
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
169
- background:var(--sn-theme-color-violet-background1Level, var(--sn-primitive-color-violet-95, #f9f5ff));
169
+ background:var(--sn-theme-color-violet-background1Level, var(--sn-brand-palette-violet-95, #f9f5ff));
170
170
  }
171
171
  .dragPreview[data-acrylic-appearance=violet][data-acrylic-level="2Level"]{
172
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
172
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
173
173
  }
174
174
  .dragPreview[data-acrylic-appearance=violet][data-acrylic-level="2Level"] .acrylic{
175
175
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
176
- background:var(--sn-theme-color-violet-background2Level, var(--sn-primitive-color-violet-99, #fdfdfd));
176
+ background:var(--sn-theme-color-violet-background2Level, var(--sn-brand-palette-violet-99, #fdfdfd));
177
177
  }
178
178
  .dragPreview[data-acrylic-appearance=pink][data-acrylic-level=default]{
179
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
179
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
180
180
  }
181
181
  .dragPreview[data-acrylic-appearance=pink][data-acrylic-level=default] .acrylic{
182
182
  opacity:var(--sn-acrylic-opacityBackground, 1);
183
- background:var(--sn-theme-color-pink-background, var(--sn-primitive-color-pink-90, #fceaf0));
183
+ background:var(--sn-theme-color-pink-background, var(--sn-brand-palette-pink-90, #fceaf0));
184
184
  }
185
185
  .dragPreview[data-acrylic-appearance=pink][data-acrylic-level="1Level"]{
186
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
186
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
187
187
  }
188
188
  .dragPreview[data-acrylic-appearance=pink][data-acrylic-level="1Level"] .acrylic{
189
189
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
190
- background:var(--sn-theme-color-pink-background1Level, var(--sn-primitive-color-pink-95, #fff5f7));
190
+ background:var(--sn-theme-color-pink-background1Level, var(--sn-brand-palette-pink-95, #fff5f7));
191
191
  }
192
192
  .dragPreview[data-acrylic-appearance=pink][data-acrylic-level="2Level"]{
193
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
193
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
194
194
  }
195
195
  .dragPreview[data-acrylic-appearance=pink][data-acrylic-level="2Level"] .acrylic{
196
196
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
197
- background:var(--sn-theme-color-pink-background2Level, var(--sn-primitive-color-pink-99, #fdfcfc));
197
+ background:var(--sn-theme-color-pink-background2Level, var(--sn-brand-palette-pink-99, #fdfcfc));
198
198
  }
199
199
  .dragPreview[data-acrylic-appearance=transparent]{
200
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
200
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
201
201
  }
202
202
  .dragPreview[data-acrylic-appearance=transparent] .acrylic{
203
203
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
204
204
  background:transparent;
205
205
  }
206
206
  .dragPreview[data-acrylic-appearance=decorTransparent]{
207
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
207
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
208
208
  }
209
209
  .dragPreview[data-acrylic-appearance=decorTransparent] .acrylic{
210
210
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
package/dist/esm/components/DropIndicator/styles.module.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .dropIndicator{
2
2
  flex-shrink:0;
3
3
  box-sizing:border-box;
4
- border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
4
+ border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
5
5
  border-style:dashed;
6
6
  }
7
7
  .dropIndicator[data-orientation=horizontal]{
package/dist/esm/components/DropTarget/styles.module.css CHANGED
@@ -1,10 +1,10 @@
1
1
  @charset "UTF-8";
2
2
  .dropTarget{
3
3
  box-sizing:border-box;
4
- border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
4
+ border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
5
5
  }
6
6
  .dropTarget[data-active]{
7
- background:var(--sn-theme-color-primary-decorTransparent, var(--sn-brand-color-primary-transparent, var(--sn-brandRole-color-brandA-transparent, rgba(56, 159, 116, 0.1411764706))));
8
- outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
7
+ background:var(--sn-theme-color-primary-decorTransparent, var(--sn-brand-color-primary-transparent, rgba(56, 159, 116, 0.1019607843)));
8
+ outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
9
9
  outline-offset:calc(-1 * var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
10
10
  }
package/dist/esm/style.css CHANGED
@@ -18,206 +18,206 @@
18
18
  position:relative;
19
19
  box-sizing:border-box;
20
20
  border-radius:inherit;
21
- 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)));
21
+ 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)));
22
22
  }
23
23
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level=default]{
24
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
24
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
25
25
  }
26
26
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level=default] .acrylic{
27
27
  opacity:var(--sn-acrylic-opacityBackground, 1);
28
- 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))));
28
+ background:var(--sn-theme-color-primary-background, var(--sn-brand-color-primary-90, #edf7f1));
29
29
  }
30
30
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level="1Level"]{
31
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
31
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
32
32
  }
33
33
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level="1Level"] .acrylic{
34
34
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
35
- 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))));
35
+ background:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, #f5fdf8));
36
36
  }
37
37
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level="2Level"]{
38
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
38
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
39
39
  }
40
40
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level="2Level"] .acrylic{
41
41
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
42
- 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))));
42
+ background:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, #fbfffc));
43
43
  }
44
44
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level=default]{
45
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
45
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
46
46
  }
47
47
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level=default] .acrylic{
48
48
  opacity:var(--sn-acrylic-opacityBackground, 1);
49
- background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
49
+ background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
50
50
  }
51
51
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level="1Level"]{
52
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
52
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
53
53
  }
54
54
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level="1Level"] .acrylic{
55
55
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
56
- background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
56
+ background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
57
57
  }
58
58
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level="2Level"]{
59
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
59
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
60
60
  }
61
61
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level="2Level"] .acrylic{
62
62
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
63
- background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
63
+ background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
64
64
  }
65
65
  .dragPreview[data-acrylic-appearance=red][data-acrylic-level=default]{
66
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
66
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
67
67
  }
68
68
  .dragPreview[data-acrylic-appearance=red][data-acrylic-level=default] .acrylic{
69
69
  opacity:var(--sn-acrylic-opacityBackground, 1);
70
- background:var(--sn-theme-color-red-background, var(--sn-primitive-color-red-90, #fee8e5));
70
+ background:var(--sn-theme-color-red-background, var(--sn-brand-palette-red-90, #fee8e5));
71
71
  }
72
72
  .dragPreview[data-acrylic-appearance=red][data-acrylic-level="1Level"]{
73
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
73
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
74
74
  }
75
75
  .dragPreview[data-acrylic-appearance=red][data-acrylic-level="1Level"] .acrylic{
76
76
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
77
- background:var(--sn-theme-color-red-background1Level, var(--sn-primitive-color-red-95, #fef5f1));
77
+ background:var(--sn-theme-color-red-background1Level, var(--sn-brand-palette-red-95, #fef5f1));
78
78
  }
79
79
  .dragPreview[data-acrylic-appearance=red][data-acrylic-level="2Level"]{
80
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
80
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
81
81
  }
82
82
  .dragPreview[data-acrylic-appearance=red][data-acrylic-level="2Level"] .acrylic{
83
83
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
84
- background:var(--sn-theme-color-red-background2Level, var(--sn-primitive-color-red-99, #fffaf7));
84
+ background:var(--sn-theme-color-red-background2Level, var(--sn-brand-palette-red-99, #fffaf7));
85
85
  }
86
86
  .dragPreview[data-acrylic-appearance=orange][data-acrylic-level=default]{
87
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
87
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
88
88
  }
89
89
  .dragPreview[data-acrylic-appearance=orange][data-acrylic-level=default] .acrylic{
90
90
  opacity:var(--sn-acrylic-opacityBackground, 1);
91
- background:var(--sn-theme-color-orange-background, var(--sn-primitive-color-orange-90, #ffedcf));
91
+ background:var(--sn-theme-color-orange-background, var(--sn-brand-palette-orange-90, #ffedcf));
92
92
  }
93
93
  .dragPreview[data-acrylic-appearance=orange][data-acrylic-level="1Level"]{
94
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
94
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
95
95
  }
96
96
  .dragPreview[data-acrylic-appearance=orange][data-acrylic-level="1Level"] .acrylic{
97
97
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
98
- background:var(--sn-theme-color-orange-background1Level, var(--sn-primitive-color-orange-95, #fff6e5));
98
+ background:var(--sn-theme-color-orange-background1Level, var(--sn-brand-palette-orange-95, #fff6e5));
99
99
  }
100
100
  .dragPreview[data-acrylic-appearance=orange][data-acrylic-level="2Level"]{
101
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
101
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
102
102
  }
103
103
  .dragPreview[data-acrylic-appearance=orange][data-acrylic-level="2Level"] .acrylic{
104
104
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
105
- background:var(--sn-theme-color-orange-background2Level, var(--sn-primitive-color-orange-99, #fffcf4));
105
+ background:var(--sn-theme-color-orange-background2Level, var(--sn-brand-palette-orange-99, #fffcf4));
106
106
  }
107
107
  .dragPreview[data-acrylic-appearance=yellow][data-acrylic-level=default]{
108
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
108
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
109
109
  }
110
110
  .dragPreview[data-acrylic-appearance=yellow][data-acrylic-level=default] .acrylic{
111
111
  opacity:var(--sn-acrylic-opacityBackground, 1);
112
- background:var(--sn-theme-color-yellow-background, var(--sn-primitive-color-yellow-90, #fdf4cc));
112
+ background:var(--sn-theme-color-yellow-background, var(--sn-brand-palette-yellow-90, #fdf4cc));
113
113
  }
114
114
  .dragPreview[data-acrylic-appearance=yellow][data-acrylic-level="1Level"]{
115
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
115
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
116
116
  }
117
117
  .dragPreview[data-acrylic-appearance=yellow][data-acrylic-level="1Level"] .acrylic{
118
118
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
119
- background:var(--sn-theme-color-yellow-background1Level, var(--sn-primitive-color-yellow-95, #fffbe6));
119
+ background:var(--sn-theme-color-yellow-background1Level, var(--sn-brand-palette-yellow-95, #fffbe6));
120
120
  }
121
121
  .dragPreview[data-acrylic-appearance=yellow][data-acrylic-level="2Level"]{
122
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
122
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
123
123
  }
124
124
  .dragPreview[data-acrylic-appearance=yellow][data-acrylic-level="2Level"] .acrylic{
125
125
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
126
- background:var(--sn-theme-color-yellow-background2Level, var(--sn-primitive-color-yellow-99, #fffef6));
126
+ background:var(--sn-theme-color-yellow-background2Level, var(--sn-brand-palette-yellow-99, #fffef6));
127
127
  }
128
128
  .dragPreview[data-acrylic-appearance=green][data-acrylic-level=default]{
129
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
129
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
130
130
  }
131
131
  .dragPreview[data-acrylic-appearance=green][data-acrylic-level=default] .acrylic{
132
132
  opacity:var(--sn-acrylic-opacityBackground, 1);
133
- background:var(--sn-theme-color-green-background, var(--sn-primitive-color-green-90, #e4f5df));
133
+ background:var(--sn-theme-color-green-background, var(--sn-brand-palette-green-90, #e4f5df));
134
134
  }
135
135
  .dragPreview[data-acrylic-appearance=green][data-acrylic-level="1Level"]{
136
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
136
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
137
137
  }
138
138
  .dragPreview[data-acrylic-appearance=green][data-acrylic-level="1Level"] .acrylic{
139
139
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
140
- background:var(--sn-theme-color-green-background1Level, var(--sn-primitive-color-green-95, #f1faed));
140
+ background:var(--sn-theme-color-green-background1Level, var(--sn-brand-palette-green-95, #f1faed));
141
141
  }
142
142
  .dragPreview[data-acrylic-appearance=green][data-acrylic-level="2Level"]{
143
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
143
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
144
144
  }
145
145
  .dragPreview[data-acrylic-appearance=green][data-acrylic-level="2Level"] .acrylic{
146
146
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
147
- background:var(--sn-theme-color-green-background2Level, var(--sn-primitive-color-green-99, #fcfefa));
147
+ background:var(--sn-theme-color-green-background2Level, var(--sn-brand-palette-green-99, #fcfefa));
148
148
  }
149
149
  .dragPreview[data-acrylic-appearance=blue][data-acrylic-level=default]{
150
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
150
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
151
151
  }
152
152
  .dragPreview[data-acrylic-appearance=blue][data-acrylic-level=default] .acrylic{
153
153
  opacity:var(--sn-acrylic-opacityBackground, 1);
154
- background:var(--sn-theme-color-blue-background, var(--sn-primitive-color-blue-90, #e6f4fd));
154
+ background:var(--sn-theme-color-blue-background, var(--sn-brand-palette-blue-90, #e6f4fd));
155
155
  }
156
156
  .dragPreview[data-acrylic-appearance=blue][data-acrylic-level="1Level"]{
157
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
157
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
158
158
  }
159
159
  .dragPreview[data-acrylic-appearance=blue][data-acrylic-level="1Level"] .acrylic{
160
160
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
161
- background:var(--sn-theme-color-blue-background1Level, var(--sn-primitive-color-blue-95, #f2f9ff));
161
+ background:var(--sn-theme-color-blue-background1Level, var(--sn-brand-palette-blue-95, #f2f9ff));
162
162
  }
163
163
  .dragPreview[data-acrylic-appearance=blue][data-acrylic-level="2Level"]{
164
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
164
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
165
165
  }
166
166
  .dragPreview[data-acrylic-appearance=blue][data-acrylic-level="2Level"] .acrylic{
167
167
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
168
- background:var(--sn-theme-color-blue-background2Level, var(--sn-primitive-color-blue-99, #fdfeff));
168
+ background:var(--sn-theme-color-blue-background2Level, var(--sn-brand-palette-blue-99, #fdfeff));
169
169
  }
170
170
  .dragPreview[data-acrylic-appearance=violet][data-acrylic-level=default]{
171
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
171
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
172
172
  }
173
173
  .dragPreview[data-acrylic-appearance=violet][data-acrylic-level=default] .acrylic{
174
174
  opacity:var(--sn-acrylic-opacityBackground, 1);
175
- background:var(--sn-theme-color-violet-background, var(--sn-primitive-color-violet-90, #f3edfc));
175
+ background:var(--sn-theme-color-violet-background, var(--sn-brand-palette-violet-90, #f3edfc));
176
176
  }
177
177
  .dragPreview[data-acrylic-appearance=violet][data-acrylic-level="1Level"]{
178
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
178
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
179
179
  }
180
180
  .dragPreview[data-acrylic-appearance=violet][data-acrylic-level="1Level"] .acrylic{
181
181
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
182
- background:var(--sn-theme-color-violet-background1Level, var(--sn-primitive-color-violet-95, #f9f5ff));
182
+ background:var(--sn-theme-color-violet-background1Level, var(--sn-brand-palette-violet-95, #f9f5ff));
183
183
  }
184
184
  .dragPreview[data-acrylic-appearance=violet][data-acrylic-level="2Level"]{
185
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
185
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
186
186
  }
187
187
  .dragPreview[data-acrylic-appearance=violet][data-acrylic-level="2Level"] .acrylic{
188
188
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
189
- background:var(--sn-theme-color-violet-background2Level, var(--sn-primitive-color-violet-99, #fdfdfd));
189
+ background:var(--sn-theme-color-violet-background2Level, var(--sn-brand-palette-violet-99, #fdfdfd));
190
190
  }
191
191
  .dragPreview[data-acrylic-appearance=pink][data-acrylic-level=default]{
192
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
192
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
193
193
  }
194
194
  .dragPreview[data-acrylic-appearance=pink][data-acrylic-level=default] .acrylic{
195
195
  opacity:var(--sn-acrylic-opacityBackground, 1);
196
- background:var(--sn-theme-color-pink-background, var(--sn-primitive-color-pink-90, #fceaf0));
196
+ background:var(--sn-theme-color-pink-background, var(--sn-brand-palette-pink-90, #fceaf0));
197
197
  }
198
198
  .dragPreview[data-acrylic-appearance=pink][data-acrylic-level="1Level"]{
199
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
199
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
200
200
  }
201
201
  .dragPreview[data-acrylic-appearance=pink][data-acrylic-level="1Level"] .acrylic{
202
202
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
203
- background:var(--sn-theme-color-pink-background1Level, var(--sn-primitive-color-pink-95, #fff5f7));
203
+ background:var(--sn-theme-color-pink-background1Level, var(--sn-brand-palette-pink-95, #fff5f7));
204
204
  }
205
205
  .dragPreview[data-acrylic-appearance=pink][data-acrylic-level="2Level"]{
206
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
206
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
207
207
  }
208
208
  .dragPreview[data-acrylic-appearance=pink][data-acrylic-level="2Level"] .acrylic{
209
209
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
210
- background:var(--sn-theme-color-pink-background2Level, var(--sn-primitive-color-pink-99, #fdfcfc));
210
+ background:var(--sn-theme-color-pink-background2Level, var(--sn-brand-palette-pink-99, #fdfcfc));
211
211
  }
212
212
  .dragPreview[data-acrylic-appearance=transparent]{
213
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
213
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
214
214
  }
215
215
  .dragPreview[data-acrylic-appearance=transparent] .acrylic{
216
216
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
217
217
  background:transparent;
218
218
  }
219
219
  .dragPreview[data-acrylic-appearance=decorTransparent]{
220
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
220
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
221
221
  }
222
222
  .dragPreview[data-acrylic-appearance=decorTransparent] .acrylic{
223
223
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
@@ -241,7 +241,7 @@
241
241
  .dropIndicator{
242
242
  flex-shrink:0;
243
243
  box-sizing:border-box;
244
- border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
244
+ border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
245
245
  border-style:dashed;
246
246
  }
247
247
  .dropIndicator[data-orientation=horizontal]{
@@ -300,10 +300,10 @@
300
300
  @charset "UTF-8";
301
301
  .dropTarget{
302
302
  box-sizing:border-box;
303
- border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
303
+ border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
304
304
  }
305
305
  .dropTarget[data-active]{
306
- background:var(--sn-theme-color-primary-decorTransparent, var(--sn-brand-color-primary-transparent, var(--sn-brandRole-color-brandA-transparent, rgba(56, 159, 116, 0.1411764706))));
307
- outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
306
+ background:var(--sn-theme-color-primary-decorTransparent, var(--sn-brand-color-primary-transparent, rgba(56, 159, 116, 0.1019607843)));
307
+ outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
308
308
  outline-offset:calc(-1 * var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
309
309
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cloud-ru/ds-drag-and-drop",
3
- "version": "1.1.1",
3
+ "version": "1.1.2-preview-d50a3da1.0",
4
4
  "description": "Визуальные примитивы перетаскивания — поверхность копии, линия вставки и зона приёма.",
5
5
  "repository": {
6
6
  "type": "git",
@@ -34,8 +34,8 @@
34
34
  ],
35
35
  "dependencies": {
36
36
  "classnames": "^2.5.1",
37
- "@cloud-ru/ds-materials": "^1.0.1",
38
- "@cloud-ru/ds-utils": "^1.1.0"
37
+ "@cloud-ru/ds-materials": "1.0.2-preview-d50a3da1.0",
38
+ "@cloud-ru/ds-utils": "1.1.0"
39
39
  },
40
40
  "devDependencies": {
41
41
  "@dnd-kit/core": "^6.3.1",