@cloud-ru/ds-dropzone 1.0.1 → 1.0.2-preview-a2208aeb.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/cjs/components/PrivateDropZone/styles.module.css +90 -90
  2. package/dist/cjs/style.css +90 -90
  3. package/dist/esm/components/PrivateDropZone/styles.module.css +90 -90
  4. package/dist/esm/style.css +90 -90
  5. package/package.json +3 -3
package/dist/cjs/style.css CHANGED
@@ -41,7 +41,7 @@
41
41
  inset:0;
42
42
  border-radius:inherit;
43
43
  visibility:hidden;
44
- background-color: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))));
44
+ background-color:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
45
45
  }
46
46
 
47
47
  .borderLayer{
@@ -71,208 +71,208 @@
71
71
  font-family:inherit;
72
72
  text-decoration:none;
73
73
  background:transparent;
74
- background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
74
+ background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
75
75
  outline:0;
76
76
  outline-offset:0;
77
77
  }
78
78
  .container[data-acrylic-appearance=primary][data-acrylic-level=default]{
79
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
79
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
80
80
  }
81
81
  .container[data-acrylic-appearance=primary][data-acrylic-level=default] .acrylic{
82
82
  opacity:var(--sn-acrylic-opacityBackground, 1);
83
- 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))));
83
+ background:var(--sn-theme-color-primary-background, var(--sn-brand-color-primary-90, #edf7f1));
84
84
  }
85
85
  .container[data-acrylic-appearance=primary][data-acrylic-level="1Level"]{
86
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
86
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
87
87
  }
88
88
  .container[data-acrylic-appearance=primary][data-acrylic-level="1Level"] .acrylic{
89
89
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
90
- 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))));
90
+ background:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, #f5fdf8));
91
91
  }
92
92
  .container[data-acrylic-appearance=primary][data-acrylic-level="2Level"]{
93
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
93
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
94
94
  }
95
95
  .container[data-acrylic-appearance=primary][data-acrylic-level="2Level"] .acrylic{
96
96
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
97
- 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))));
97
+ background:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, #fbfffc));
98
98
  }
99
99
  .container[data-acrylic-appearance=neutral][data-acrylic-level=default]{
100
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
100
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
101
101
  }
102
102
  .container[data-acrylic-appearance=neutral][data-acrylic-level=default] .acrylic{
103
103
  opacity:var(--sn-acrylic-opacityBackground, 1);
104
- background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
104
+ background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
105
105
  }
106
106
  .container[data-acrylic-appearance=neutral][data-acrylic-level="1Level"]{
107
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
107
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
108
108
  }
109
109
  .container[data-acrylic-appearance=neutral][data-acrylic-level="1Level"] .acrylic{
110
110
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
111
- background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
111
+ background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
112
112
  }
113
113
  .container[data-acrylic-appearance=neutral][data-acrylic-level="2Level"]{
114
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
114
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
115
115
  }
116
116
  .container[data-acrylic-appearance=neutral][data-acrylic-level="2Level"] .acrylic{
117
117
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
118
- background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
118
+ background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
119
119
  }
120
120
  .container[data-acrylic-appearance=red][data-acrylic-level=default]{
121
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
121
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
122
122
  }
123
123
  .container[data-acrylic-appearance=red][data-acrylic-level=default] .acrylic{
124
124
  opacity:var(--sn-acrylic-opacityBackground, 1);
125
- background:var(--sn-theme-color-red-background, var(--sn-primitive-color-red-90, #fee8e5));
125
+ background:var(--sn-theme-color-red-background, var(--sn-brand-palette-red-90, #fee8e5));
126
126
  }
127
127
  .container[data-acrylic-appearance=red][data-acrylic-level="1Level"]{
128
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
128
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
129
129
  }
130
130
  .container[data-acrylic-appearance=red][data-acrylic-level="1Level"] .acrylic{
131
131
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
132
- background:var(--sn-theme-color-red-background1Level, var(--sn-primitive-color-red-95, #fef5f1));
132
+ background:var(--sn-theme-color-red-background1Level, var(--sn-brand-palette-red-95, #fef5f1));
133
133
  }
134
134
  .container[data-acrylic-appearance=red][data-acrylic-level="2Level"]{
135
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
135
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
136
136
  }
137
137
  .container[data-acrylic-appearance=red][data-acrylic-level="2Level"] .acrylic{
138
138
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
139
- background:var(--sn-theme-color-red-background2Level, var(--sn-primitive-color-red-99, #fffaf7));
139
+ background:var(--sn-theme-color-red-background2Level, var(--sn-brand-palette-red-99, #fffaf7));
140
140
  }
141
141
  .container[data-acrylic-appearance=orange][data-acrylic-level=default]{
142
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
142
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
143
143
  }
144
144
  .container[data-acrylic-appearance=orange][data-acrylic-level=default] .acrylic{
145
145
  opacity:var(--sn-acrylic-opacityBackground, 1);
146
- background:var(--sn-theme-color-orange-background, var(--sn-primitive-color-orange-90, #ffedcf));
146
+ background:var(--sn-theme-color-orange-background, var(--sn-brand-palette-orange-90, #ffedcf));
147
147
  }
148
148
  .container[data-acrylic-appearance=orange][data-acrylic-level="1Level"]{
149
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
149
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
150
150
  }
151
151
  .container[data-acrylic-appearance=orange][data-acrylic-level="1Level"] .acrylic{
152
152
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
153
- background:var(--sn-theme-color-orange-background1Level, var(--sn-primitive-color-orange-95, #fff6e5));
153
+ background:var(--sn-theme-color-orange-background1Level, var(--sn-brand-palette-orange-95, #fff6e5));
154
154
  }
155
155
  .container[data-acrylic-appearance=orange][data-acrylic-level="2Level"]{
156
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
156
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
157
157
  }
158
158
  .container[data-acrylic-appearance=orange][data-acrylic-level="2Level"] .acrylic{
159
159
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
160
- background:var(--sn-theme-color-orange-background2Level, var(--sn-primitive-color-orange-99, #fffcf4));
160
+ background:var(--sn-theme-color-orange-background2Level, var(--sn-brand-palette-orange-99, #fffcf4));
161
161
  }
162
162
  .container[data-acrylic-appearance=yellow][data-acrylic-level=default]{
163
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
163
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
164
164
  }
165
165
  .container[data-acrylic-appearance=yellow][data-acrylic-level=default] .acrylic{
166
166
  opacity:var(--sn-acrylic-opacityBackground, 1);
167
- background:var(--sn-theme-color-yellow-background, var(--sn-primitive-color-yellow-90, #fdf4cc));
167
+ background:var(--sn-theme-color-yellow-background, var(--sn-brand-palette-yellow-90, #fdf4cc));
168
168
  }
169
169
  .container[data-acrylic-appearance=yellow][data-acrylic-level="1Level"]{
170
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
170
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
171
171
  }
172
172
  .container[data-acrylic-appearance=yellow][data-acrylic-level="1Level"] .acrylic{
173
173
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
174
- background:var(--sn-theme-color-yellow-background1Level, var(--sn-primitive-color-yellow-95, #fffbe6));
174
+ background:var(--sn-theme-color-yellow-background1Level, var(--sn-brand-palette-yellow-95, #fffbe6));
175
175
  }
176
176
  .container[data-acrylic-appearance=yellow][data-acrylic-level="2Level"]{
177
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
177
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
178
178
  }
179
179
  .container[data-acrylic-appearance=yellow][data-acrylic-level="2Level"] .acrylic{
180
180
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
181
- background:var(--sn-theme-color-yellow-background2Level, var(--sn-primitive-color-yellow-99, #fffef6));
181
+ background:var(--sn-theme-color-yellow-background2Level, var(--sn-brand-palette-yellow-99, #fffef6));
182
182
  }
183
183
  .container[data-acrylic-appearance=green][data-acrylic-level=default]{
184
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
184
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
185
185
  }
186
186
  .container[data-acrylic-appearance=green][data-acrylic-level=default] .acrylic{
187
187
  opacity:var(--sn-acrylic-opacityBackground, 1);
188
- background:var(--sn-theme-color-green-background, var(--sn-primitive-color-green-90, #e4f5df));
188
+ background:var(--sn-theme-color-green-background, var(--sn-brand-palette-green-90, #e4f5df));
189
189
  }
190
190
  .container[data-acrylic-appearance=green][data-acrylic-level="1Level"]{
191
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
191
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
192
192
  }
193
193
  .container[data-acrylic-appearance=green][data-acrylic-level="1Level"] .acrylic{
194
194
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
195
- background:var(--sn-theme-color-green-background1Level, var(--sn-primitive-color-green-95, #f1faed));
195
+ background:var(--sn-theme-color-green-background1Level, var(--sn-brand-palette-green-95, #f1faed));
196
196
  }
197
197
  .container[data-acrylic-appearance=green][data-acrylic-level="2Level"]{
198
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
198
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
199
199
  }
200
200
  .container[data-acrylic-appearance=green][data-acrylic-level="2Level"] .acrylic{
201
201
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
202
- background:var(--sn-theme-color-green-background2Level, var(--sn-primitive-color-green-99, #fcfefa));
202
+ background:var(--sn-theme-color-green-background2Level, var(--sn-brand-palette-green-99, #fcfefa));
203
203
  }
204
204
  .container[data-acrylic-appearance=blue][data-acrylic-level=default]{
205
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
205
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
206
206
  }
207
207
  .container[data-acrylic-appearance=blue][data-acrylic-level=default] .acrylic{
208
208
  opacity:var(--sn-acrylic-opacityBackground, 1);
209
- background:var(--sn-theme-color-blue-background, var(--sn-primitive-color-blue-90, #e6f4fd));
209
+ background:var(--sn-theme-color-blue-background, var(--sn-brand-palette-blue-90, #e6f4fd));
210
210
  }
211
211
  .container[data-acrylic-appearance=blue][data-acrylic-level="1Level"]{
212
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
212
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
213
213
  }
214
214
  .container[data-acrylic-appearance=blue][data-acrylic-level="1Level"] .acrylic{
215
215
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
216
- background:var(--sn-theme-color-blue-background1Level, var(--sn-primitive-color-blue-95, #f2f9ff));
216
+ background:var(--sn-theme-color-blue-background1Level, var(--sn-brand-palette-blue-95, #f2f9ff));
217
217
  }
218
218
  .container[data-acrylic-appearance=blue][data-acrylic-level="2Level"]{
219
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
219
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
220
220
  }
221
221
  .container[data-acrylic-appearance=blue][data-acrylic-level="2Level"] .acrylic{
222
222
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
223
- background:var(--sn-theme-color-blue-background2Level, var(--sn-primitive-color-blue-99, #fdfeff));
223
+ background:var(--sn-theme-color-blue-background2Level, var(--sn-brand-palette-blue-99, #fdfeff));
224
224
  }
225
225
  .container[data-acrylic-appearance=violet][data-acrylic-level=default]{
226
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
226
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
227
227
  }
228
228
  .container[data-acrylic-appearance=violet][data-acrylic-level=default] .acrylic{
229
229
  opacity:var(--sn-acrylic-opacityBackground, 1);
230
- background:var(--sn-theme-color-violet-background, var(--sn-primitive-color-violet-90, #f3edfc));
230
+ background:var(--sn-theme-color-violet-background, var(--sn-brand-palette-violet-90, #f3edfc));
231
231
  }
232
232
  .container[data-acrylic-appearance=violet][data-acrylic-level="1Level"]{
233
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
233
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
234
234
  }
235
235
  .container[data-acrylic-appearance=violet][data-acrylic-level="1Level"] .acrylic{
236
236
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
237
- background:var(--sn-theme-color-violet-background1Level, var(--sn-primitive-color-violet-95, #f9f5ff));
237
+ background:var(--sn-theme-color-violet-background1Level, var(--sn-brand-palette-violet-95, #f9f5ff));
238
238
  }
239
239
  .container[data-acrylic-appearance=violet][data-acrylic-level="2Level"]{
240
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
240
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
241
241
  }
242
242
  .container[data-acrylic-appearance=violet][data-acrylic-level="2Level"] .acrylic{
243
243
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
244
- background:var(--sn-theme-color-violet-background2Level, var(--sn-primitive-color-violet-99, #fdfdfd));
244
+ background:var(--sn-theme-color-violet-background2Level, var(--sn-brand-palette-violet-99, #fdfdfd));
245
245
  }
246
246
  .container[data-acrylic-appearance=pink][data-acrylic-level=default]{
247
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
247
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
248
248
  }
249
249
  .container[data-acrylic-appearance=pink][data-acrylic-level=default] .acrylic{
250
250
  opacity:var(--sn-acrylic-opacityBackground, 1);
251
- background:var(--sn-theme-color-pink-background, var(--sn-primitive-color-pink-90, #fceaf0));
251
+ background:var(--sn-theme-color-pink-background, var(--sn-brand-palette-pink-90, #fceaf0));
252
252
  }
253
253
  .container[data-acrylic-appearance=pink][data-acrylic-level="1Level"]{
254
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
254
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
255
255
  }
256
256
  .container[data-acrylic-appearance=pink][data-acrylic-level="1Level"] .acrylic{
257
257
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
258
- background:var(--sn-theme-color-pink-background1Level, var(--sn-primitive-color-pink-95, #fff5f7));
258
+ background:var(--sn-theme-color-pink-background1Level, var(--sn-brand-palette-pink-95, #fff5f7));
259
259
  }
260
260
  .container[data-acrylic-appearance=pink][data-acrylic-level="2Level"]{
261
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
261
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
262
262
  }
263
263
  .container[data-acrylic-appearance=pink][data-acrylic-level="2Level"] .acrylic{
264
264
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
265
- background:var(--sn-theme-color-pink-background2Level, var(--sn-primitive-color-pink-99, #fdfcfc));
265
+ background:var(--sn-theme-color-pink-background2Level, var(--sn-brand-palette-pink-99, #fdfcfc));
266
266
  }
267
267
  .container[data-acrylic-appearance=transparent]{
268
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
268
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
269
269
  }
270
270
  .container[data-acrylic-appearance=transparent] .acrylic{
271
271
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
272
272
  background:transparent;
273
273
  }
274
274
  .container[data-acrylic-appearance=decorTransparent]{
275
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
275
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
276
276
  }
277
277
  .container[data-acrylic-appearance=decorTransparent] .acrylic{
278
278
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
@@ -282,7 +282,7 @@
282
282
  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
283
283
  }
284
284
  .container:focus-visible{
285
- outline:var(--sn-brand-anatomy-focusLine-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeBold, 3px)) 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))));
285
+ outline:var(--sn-brand-anatomy-focusLine-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeBold, 3px)) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
286
286
  outline-offset:0;
287
287
  }
288
288
  .container[data-over] .overLayer{
@@ -290,52 +290,52 @@
290
290
  }
291
291
  .container[data-size=s]{
292
292
  border-radius:var(--sn-dropzone-anatomy-size-s-borderRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px)));
293
- min-height:var(--sn-dropzone-anatomy-size-s-minHeight, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
293
+ min-height:var(--sn-dropzone-anatomy-size-s-minHeight, var(--sn-density-size-s, var(--sn-density-scale-100-s, var(--sn-platform-comfort-scale-100-s, var(--sn-primitive-dimension-32, 32px)))));
294
294
  border-width:var(--sn-dropzone-anatomy-size-s-borderWidth, var(--sn-brand-anatomy-line-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px)));
295
- padding-left:var(--sn-dropzone-anatomy-size-s-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
296
- padding-right:var(--sn-dropzone-anatomy-size-s-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
297
- padding-top:var(--sn-dropzone-anatomy-size-s-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
298
- padding-bottom:var(--sn-dropzone-anatomy-size-s-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
295
+ padding-left:var(--sn-dropzone-anatomy-size-s-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px)))));
296
+ padding-right:var(--sn-dropzone-anatomy-size-s-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-platform-comfort-spacing-control-container-horizontal-s, var(--sn-platform-comfort-scale-050-2xs, var(--sn-primitive-dimension-4, 4px)))));
297
+ padding-top:var(--sn-dropzone-anatomy-size-s-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px)))));
298
+ padding-bottom:var(--sn-dropzone-anatomy-size-s-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-platform-comfort-spacing-control-container-vertical-s, var(--sn-platform-comfort-scale-025-2xs, var(--sn-primitive-dimension-2, 2px)))));
299
299
  }
300
300
  .container[data-size=s] .content{
301
- padding-left:var(--sn-dropzone-anatomy-size-s-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
302
- padding-right:var(--sn-dropzone-anatomy-size-s-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
303
- padding-top:var(--sn-dropzone-anatomy-size-s-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px)));
304
- padding-bottom:var(--sn-dropzone-anatomy-size-s-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px)));
301
+ padding-left:var(--sn-dropzone-anatomy-size-s-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
302
+ padding-right:var(--sn-dropzone-anatomy-size-s-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
303
+ padding-top:var(--sn-dropzone-anatomy-size-s-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px)))));
304
+ padding-bottom:var(--sn-dropzone-anatomy-size-s-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-spacing-control-wrapper-vertical-s, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px)))));
305
305
  }
306
306
  .container[data-size=m]{
307
307
  border-radius:var(--sn-dropzone-anatomy-size-m-borderRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px)));
308
- padding-left:var(--sn-dropzone-anatomy-size-m-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
309
- padding-right:var(--sn-dropzone-anatomy-size-m-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
310
- padding-top:var(--sn-dropzone-anatomy-size-m-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
311
- padding-bottom:var(--sn-dropzone-anatomy-size-m-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
312
- min-height:var(--sn-dropzone-anatomy-size-m-minHeight, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
308
+ padding-left:var(--sn-dropzone-anatomy-size-m-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-platform-comfort-spacing-control-container-horizontal-m, var(--sn-platform-comfort-scale-050-xs, var(--sn-primitive-dimension-8, 8px)))));
309
+ padding-right:var(--sn-dropzone-anatomy-size-m-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-platform-comfort-spacing-control-container-horizontal-m, var(--sn-platform-comfort-scale-050-xs, var(--sn-primitive-dimension-8, 8px)))));
310
+ padding-top:var(--sn-dropzone-anatomy-size-m-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-platform-comfort-spacing-control-container-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px)))));
311
+ padding-bottom:var(--sn-dropzone-anatomy-size-m-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-platform-comfort-spacing-control-container-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px)))));
312
+ min-height:var(--sn-dropzone-anatomy-size-m-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)))));
313
313
  border-width:var(--sn-dropzone-anatomy-size-m-borderWidth, var(--sn-brand-anatomy-line-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px)));
314
314
  }
315
315
  .container[data-size=m] .content{
316
- padding-left:var(--sn-dropzone-anatomy-size-m-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
317
- padding-right:var(--sn-dropzone-anatomy-size-m-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
318
- padding-top:var(--sn-dropzone-anatomy-size-m-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px)));
319
- padding-bottom:var(--sn-dropzone-anatomy-size-m-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px)));
316
+ padding-left:var(--sn-dropzone-anatomy-size-m-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
317
+ padding-right:var(--sn-dropzone-anatomy-size-m-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-m, var(--sn-platform-comfort-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
318
+ padding-top:var(--sn-dropzone-anatomy-size-m-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px)))));
319
+ padding-bottom:var(--sn-dropzone-anatomy-size-m-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-spacing-control-wrapper-vertical-m, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px)))));
320
320
  }
321
321
  .container[data-size=l]{
322
322
  border-radius:var(--sn-dropzone-anatomy-size-l-borderRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px)));
323
- padding-left:var(--sn-dropzone-anatomy-size-l-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
324
- padding-right:var(--sn-dropzone-anatomy-size-l-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
325
- padding-top:var(--sn-dropzone-anatomy-size-l-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
326
- padding-bottom:var(--sn-dropzone-anatomy-size-l-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
327
- min-height:var(--sn-dropzone-anatomy-size-l-minHeight, var(--sn-density-size-l, var(--sn-primitive-dimension-64, 64px)));
323
+ padding-left:var(--sn-dropzone-anatomy-size-l-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-platform-comfort-spacing-control-container-horizontal-l, var(--sn-platform-comfort-scale-050-s, var(--sn-primitive-dimension-12, 12px)))));
324
+ padding-right:var(--sn-dropzone-anatomy-size-l-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-platform-comfort-spacing-control-container-horizontal-l, var(--sn-platform-comfort-scale-050-s, var(--sn-primitive-dimension-12, 12px)))));
325
+ padding-top:var(--sn-dropzone-anatomy-size-l-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-platform-comfort-spacing-control-container-vertical-l, var(--sn-platform-comfort-scale-025-s, var(--sn-primitive-dimension-6, 6px)))));
326
+ padding-bottom:var(--sn-dropzone-anatomy-size-l-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-platform-comfort-spacing-control-container-vertical-l, var(--sn-platform-comfort-scale-025-s, var(--sn-primitive-dimension-6, 6px)))));
327
+ min-height:var(--sn-dropzone-anatomy-size-l-minHeight, var(--sn-density-size-l, var(--sn-density-scale-100-l, var(--sn-platform-comfort-scale-100-l, var(--sn-primitive-dimension-48, 48px)))));
328
328
  border-width:var(--sn-dropzone-anatomy-size-l-borderWidth, var(--sn-brand-anatomy-line-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px)));
329
329
  }
330
330
  .container[data-size=l] .content{
331
- padding-left:var(--sn-dropzone-anatomy-size-l-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
332
- padding-right:var(--sn-dropzone-anatomy-size-l-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
333
- padding-top:var(--sn-dropzone-anatomy-size-l-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px)));
334
- padding-bottom:var(--sn-dropzone-anatomy-size-l-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px)));
331
+ padding-left:var(--sn-dropzone-anatomy-size-l-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-vertical-l, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
332
+ padding-right:var(--sn-dropzone-anatomy-size-l-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-horizontal-l, var(--sn-platform-comfort-spacing-control-wrapper-vertical-l, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px))))));
333
+ padding-top:var(--sn-dropzone-anatomy-size-l-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-platform-comfort-spacing-control-wrapper-vertical-l, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px)))));
334
+ padding-bottom:var(--sn-dropzone-anatomy-size-l-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-platform-comfort-spacing-control-wrapper-vertical-l, var(--sn-platform-comfort-scale-025-xs, var(--sn-primitive-dimension-4, 4px)))));
335
335
  }
336
336
  .container[data-disabled]{
337
337
  cursor:not-allowed;
338
- background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
338
+ background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
339
339
  }
340
340
  .container[data-disabled] .content{
341
341
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
@@ -354,7 +354,7 @@
354
354
  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)));
355
355
  }
356
356
  .container .borderLayer[data-state=activatedOnBackground]{
357
- 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))));
357
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
358
358
  }
359
359
  .container .borderLayer[data-state=versionOnColor]{
360
360
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -379,7 +379,7 @@
379
379
  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)));
380
380
  }
381
381
  .container:hover:not([data-disabled], [data-loading]) .borderLayer[data-state=activatedOnBackground]{
382
- 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))));
382
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
383
383
  }
384
384
  .container:hover:not([data-disabled], [data-loading]) .borderLayer[data-state=versionOnColor]{
385
385
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -406,7 +406,7 @@
406
406
  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)));
407
407
  }
408
408
  .container[data-loading] .borderLayer[data-state=activatedOnBackground], .container:active:not([data-disabled], [data-loading]) .borderLayer[data-state=activatedOnBackground], .container[data-pressed=true]:not([data-disabled], [data-loading]) .borderLayer[data-state=activatedOnBackground]{
409
- 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))));
409
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
410
410
  }
411
411
  .container[data-loading] .borderLayer[data-state=versionOnColor], .container:active:not([data-disabled], [data-loading]) .borderLayer[data-state=versionOnColor], .container[data-pressed=true]:not([data-disabled], [data-loading]) .borderLayer[data-state=versionOnColor]{
412
412
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));