@cloud-ru/ds-dropzone 1.0.1-preview-95bfb925.0 → 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 (6) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/dist/cjs/components/PrivateDropZone/styles.module.css +90 -90
  3. package/dist/cjs/style.css +90 -90
  4. package/dist/esm/components/PrivateDropZone/styles.module.css +90 -90
  5. package/dist/esm/style.css +90 -90
  6. package/package.json +3 -3
package/dist/esm/components/PrivateDropZone/styles.module.css CHANGED
@@ -18,7 +18,7 @@
18
18
  inset:0;
19
19
  border-radius:inherit;
20
20
  visibility:hidden;
21
- 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))));
21
+ 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)));
22
22
  }
23
23
 
24
24
  .borderLayer{
@@ -48,208 +48,208 @@
48
48
  font-family:inherit;
49
49
  text-decoration:none;
50
50
  background:transparent;
51
- background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
51
+ background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
52
52
  outline:0;
53
53
  outline-offset:0;
54
54
  }
55
55
  .container[data-acrylic-appearance=primary][data-acrylic-level=default]{
56
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
56
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
57
57
  }
58
58
  .container[data-acrylic-appearance=primary][data-acrylic-level=default] .acrylic{
59
59
  opacity:var(--sn-acrylic-opacityBackground, 1);
60
- 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))));
60
+ background:var(--sn-theme-color-primary-background, var(--sn-brand-color-primary-90, #edf7f1));
61
61
  }
62
62
  .container[data-acrylic-appearance=primary][data-acrylic-level="1Level"]{
63
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
63
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
64
64
  }
65
65
  .container[data-acrylic-appearance=primary][data-acrylic-level="1Level"] .acrylic{
66
66
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
67
- 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))));
67
+ background:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, #f5fdf8));
68
68
  }
69
69
  .container[data-acrylic-appearance=primary][data-acrylic-level="2Level"]{
70
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
70
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
71
71
  }
72
72
  .container[data-acrylic-appearance=primary][data-acrylic-level="2Level"] .acrylic{
73
73
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
74
- 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))));
74
+ background:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, #fbfffc));
75
75
  }
76
76
  .container[data-acrylic-appearance=neutral][data-acrylic-level=default]{
77
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
77
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
78
78
  }
79
79
  .container[data-acrylic-appearance=neutral][data-acrylic-level=default] .acrylic{
80
80
  opacity:var(--sn-acrylic-opacityBackground, 1);
81
- background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
81
+ background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
82
82
  }
83
83
  .container[data-acrylic-appearance=neutral][data-acrylic-level="1Level"]{
84
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
84
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
85
85
  }
86
86
  .container[data-acrylic-appearance=neutral][data-acrylic-level="1Level"] .acrylic{
87
87
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
88
- background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
88
+ background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
89
89
  }
90
90
  .container[data-acrylic-appearance=neutral][data-acrylic-level="2Level"]{
91
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
91
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
92
92
  }
93
93
  .container[data-acrylic-appearance=neutral][data-acrylic-level="2Level"] .acrylic{
94
94
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
95
- background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
95
+ background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
96
96
  }
97
97
  .container[data-acrylic-appearance=red][data-acrylic-level=default]{
98
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
98
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
99
99
  }
100
100
  .container[data-acrylic-appearance=red][data-acrylic-level=default] .acrylic{
101
101
  opacity:var(--sn-acrylic-opacityBackground, 1);
102
- background:var(--sn-theme-color-red-background, var(--sn-primitive-color-red-90, #fee8e5));
102
+ background:var(--sn-theme-color-red-background, var(--sn-brand-palette-red-90, #fee8e5));
103
103
  }
104
104
  .container[data-acrylic-appearance=red][data-acrylic-level="1Level"]{
105
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
105
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
106
106
  }
107
107
  .container[data-acrylic-appearance=red][data-acrylic-level="1Level"] .acrylic{
108
108
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
109
- background:var(--sn-theme-color-red-background1Level, var(--sn-primitive-color-red-95, #fef5f1));
109
+ background:var(--sn-theme-color-red-background1Level, var(--sn-brand-palette-red-95, #fef5f1));
110
110
  }
111
111
  .container[data-acrylic-appearance=red][data-acrylic-level="2Level"]{
112
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
112
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
113
113
  }
114
114
  .container[data-acrylic-appearance=red][data-acrylic-level="2Level"] .acrylic{
115
115
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
116
- background:var(--sn-theme-color-red-background2Level, var(--sn-primitive-color-red-99, #fffaf7));
116
+ background:var(--sn-theme-color-red-background2Level, var(--sn-brand-palette-red-99, #fffaf7));
117
117
  }
118
118
  .container[data-acrylic-appearance=orange][data-acrylic-level=default]{
119
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
119
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
120
120
  }
121
121
  .container[data-acrylic-appearance=orange][data-acrylic-level=default] .acrylic{
122
122
  opacity:var(--sn-acrylic-opacityBackground, 1);
123
- background:var(--sn-theme-color-orange-background, var(--sn-primitive-color-orange-90, #ffedcf));
123
+ background:var(--sn-theme-color-orange-background, var(--sn-brand-palette-orange-90, #ffedcf));
124
124
  }
125
125
  .container[data-acrylic-appearance=orange][data-acrylic-level="1Level"]{
126
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
126
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
127
127
  }
128
128
  .container[data-acrylic-appearance=orange][data-acrylic-level="1Level"] .acrylic{
129
129
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
130
- background:var(--sn-theme-color-orange-background1Level, var(--sn-primitive-color-orange-95, #fff6e5));
130
+ background:var(--sn-theme-color-orange-background1Level, var(--sn-brand-palette-orange-95, #fff6e5));
131
131
  }
132
132
  .container[data-acrylic-appearance=orange][data-acrylic-level="2Level"]{
133
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
133
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
134
134
  }
135
135
  .container[data-acrylic-appearance=orange][data-acrylic-level="2Level"] .acrylic{
136
136
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
137
- background:var(--sn-theme-color-orange-background2Level, var(--sn-primitive-color-orange-99, #fffcf4));
137
+ background:var(--sn-theme-color-orange-background2Level, var(--sn-brand-palette-orange-99, #fffcf4));
138
138
  }
139
139
  .container[data-acrylic-appearance=yellow][data-acrylic-level=default]{
140
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
140
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
141
141
  }
142
142
  .container[data-acrylic-appearance=yellow][data-acrylic-level=default] .acrylic{
143
143
  opacity:var(--sn-acrylic-opacityBackground, 1);
144
- background:var(--sn-theme-color-yellow-background, var(--sn-primitive-color-yellow-90, #fdf4cc));
144
+ background:var(--sn-theme-color-yellow-background, var(--sn-brand-palette-yellow-90, #fdf4cc));
145
145
  }
146
146
  .container[data-acrylic-appearance=yellow][data-acrylic-level="1Level"]{
147
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
147
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
148
148
  }
149
149
  .container[data-acrylic-appearance=yellow][data-acrylic-level="1Level"] .acrylic{
150
150
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
151
- background:var(--sn-theme-color-yellow-background1Level, var(--sn-primitive-color-yellow-95, #fffbe6));
151
+ background:var(--sn-theme-color-yellow-background1Level, var(--sn-brand-palette-yellow-95, #fffbe6));
152
152
  }
153
153
  .container[data-acrylic-appearance=yellow][data-acrylic-level="2Level"]{
154
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
154
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
155
155
  }
156
156
  .container[data-acrylic-appearance=yellow][data-acrylic-level="2Level"] .acrylic{
157
157
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
158
- background:var(--sn-theme-color-yellow-background2Level, var(--sn-primitive-color-yellow-99, #fffef6));
158
+ background:var(--sn-theme-color-yellow-background2Level, var(--sn-brand-palette-yellow-99, #fffef6));
159
159
  }
160
160
  .container[data-acrylic-appearance=green][data-acrylic-level=default]{
161
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
161
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
162
162
  }
163
163
  .container[data-acrylic-appearance=green][data-acrylic-level=default] .acrylic{
164
164
  opacity:var(--sn-acrylic-opacityBackground, 1);
165
- background:var(--sn-theme-color-green-background, var(--sn-primitive-color-green-90, #e4f5df));
165
+ background:var(--sn-theme-color-green-background, var(--sn-brand-palette-green-90, #e4f5df));
166
166
  }
167
167
  .container[data-acrylic-appearance=green][data-acrylic-level="1Level"]{
168
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
168
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
169
169
  }
170
170
  .container[data-acrylic-appearance=green][data-acrylic-level="1Level"] .acrylic{
171
171
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
172
- background:var(--sn-theme-color-green-background1Level, var(--sn-primitive-color-green-95, #f1faed));
172
+ background:var(--sn-theme-color-green-background1Level, var(--sn-brand-palette-green-95, #f1faed));
173
173
  }
174
174
  .container[data-acrylic-appearance=green][data-acrylic-level="2Level"]{
175
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
175
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
176
176
  }
177
177
  .container[data-acrylic-appearance=green][data-acrylic-level="2Level"] .acrylic{
178
178
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
179
- background:var(--sn-theme-color-green-background2Level, var(--sn-primitive-color-green-99, #fcfefa));
179
+ background:var(--sn-theme-color-green-background2Level, var(--sn-brand-palette-green-99, #fcfefa));
180
180
  }
181
181
  .container[data-acrylic-appearance=blue][data-acrylic-level=default]{
182
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
182
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
183
183
  }
184
184
  .container[data-acrylic-appearance=blue][data-acrylic-level=default] .acrylic{
185
185
  opacity:var(--sn-acrylic-opacityBackground, 1);
186
- background:var(--sn-theme-color-blue-background, var(--sn-primitive-color-blue-90, #e6f4fd));
186
+ background:var(--sn-theme-color-blue-background, var(--sn-brand-palette-blue-90, #e6f4fd));
187
187
  }
188
188
  .container[data-acrylic-appearance=blue][data-acrylic-level="1Level"]{
189
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
189
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
190
190
  }
191
191
  .container[data-acrylic-appearance=blue][data-acrylic-level="1Level"] .acrylic{
192
192
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
193
- background:var(--sn-theme-color-blue-background1Level, var(--sn-primitive-color-blue-95, #f2f9ff));
193
+ background:var(--sn-theme-color-blue-background1Level, var(--sn-brand-palette-blue-95, #f2f9ff));
194
194
  }
195
195
  .container[data-acrylic-appearance=blue][data-acrylic-level="2Level"]{
196
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
196
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
197
197
  }
198
198
  .container[data-acrylic-appearance=blue][data-acrylic-level="2Level"] .acrylic{
199
199
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
200
- background:var(--sn-theme-color-blue-background2Level, var(--sn-primitive-color-blue-99, #fdfeff));
200
+ background:var(--sn-theme-color-blue-background2Level, var(--sn-brand-palette-blue-99, #fdfeff));
201
201
  }
202
202
  .container[data-acrylic-appearance=violet][data-acrylic-level=default]{
203
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
203
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
204
204
  }
205
205
  .container[data-acrylic-appearance=violet][data-acrylic-level=default] .acrylic{
206
206
  opacity:var(--sn-acrylic-opacityBackground, 1);
207
- background:var(--sn-theme-color-violet-background, var(--sn-primitive-color-violet-90, #f3edfc));
207
+ background:var(--sn-theme-color-violet-background, var(--sn-brand-palette-violet-90, #f3edfc));
208
208
  }
209
209
  .container[data-acrylic-appearance=violet][data-acrylic-level="1Level"]{
210
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
210
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
211
211
  }
212
212
  .container[data-acrylic-appearance=violet][data-acrylic-level="1Level"] .acrylic{
213
213
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
214
- background:var(--sn-theme-color-violet-background1Level, var(--sn-primitive-color-violet-95, #f9f5ff));
214
+ background:var(--sn-theme-color-violet-background1Level, var(--sn-brand-palette-violet-95, #f9f5ff));
215
215
  }
216
216
  .container[data-acrylic-appearance=violet][data-acrylic-level="2Level"]{
217
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
217
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
218
218
  }
219
219
  .container[data-acrylic-appearance=violet][data-acrylic-level="2Level"] .acrylic{
220
220
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
221
- background:var(--sn-theme-color-violet-background2Level, var(--sn-primitive-color-violet-99, #fdfdfd));
221
+ background:var(--sn-theme-color-violet-background2Level, var(--sn-brand-palette-violet-99, #fdfdfd));
222
222
  }
223
223
  .container[data-acrylic-appearance=pink][data-acrylic-level=default]{
224
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
224
+ backdrop-filter:var(--sn-acrylic-backdropFilter, none);
225
225
  }
226
226
  .container[data-acrylic-appearance=pink][data-acrylic-level=default] .acrylic{
227
227
  opacity:var(--sn-acrylic-opacityBackground, 1);
228
- background:var(--sn-theme-color-pink-background, var(--sn-primitive-color-pink-90, #fceaf0));
228
+ background:var(--sn-theme-color-pink-background, var(--sn-brand-palette-pink-90, #fceaf0));
229
229
  }
230
230
  .container[data-acrylic-appearance=pink][data-acrylic-level="1Level"]{
231
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
231
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
232
232
  }
233
233
  .container[data-acrylic-appearance=pink][data-acrylic-level="1Level"] .acrylic{
234
234
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
235
- background:var(--sn-theme-color-pink-background1Level, var(--sn-primitive-color-pink-95, #fff5f7));
235
+ background:var(--sn-theme-color-pink-background1Level, var(--sn-brand-palette-pink-95, #fff5f7));
236
236
  }
237
237
  .container[data-acrylic-appearance=pink][data-acrylic-level="2Level"]{
238
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
238
+ backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
239
239
  }
240
240
  .container[data-acrylic-appearance=pink][data-acrylic-level="2Level"] .acrylic{
241
241
  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
242
- background:var(--sn-theme-color-pink-background2Level, var(--sn-primitive-color-pink-99, #fdfcfc));
242
+ background:var(--sn-theme-color-pink-background2Level, var(--sn-brand-palette-pink-99, #fdfcfc));
243
243
  }
244
244
  .container[data-acrylic-appearance=transparent]{
245
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
245
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
246
246
  }
247
247
  .container[data-acrylic-appearance=transparent] .acrylic{
248
248
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
249
249
  background:transparent;
250
250
  }
251
251
  .container[data-acrylic-appearance=decorTransparent]{
252
- backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
252
+ backdrop-filter:var(--sn-acrylic-backdropFilter1Level, none);
253
253
  }
254
254
  .container[data-acrylic-appearance=decorTransparent] .acrylic{
255
255
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
@@ -259,7 +259,7 @@
259
259
  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
260
260
  }
261
261
  .container:focus-visible{
262
- 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))));
262
+ 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));
263
263
  outline-offset:0;
264
264
  }
265
265
  .container[data-over] .overLayer{
@@ -267,52 +267,52 @@
267
267
  }
268
268
  .container[data-size=s]{
269
269
  border-radius:var(--sn-dropzone-anatomy-size-s-borderRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px)));
270
- min-height:var(--sn-dropzone-anatomy-size-s-minHeight, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
270
+ 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)))));
271
271
  border-width:var(--sn-dropzone-anatomy-size-s-borderWidth, var(--sn-brand-anatomy-line-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px)));
272
- padding-left:var(--sn-dropzone-anatomy-size-s-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
273
- padding-right:var(--sn-dropzone-anatomy-size-s-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
274
- padding-top:var(--sn-dropzone-anatomy-size-s-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
275
- padding-bottom:var(--sn-dropzone-anatomy-size-s-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
272
+ 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)))));
273
+ 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)))));
274
+ 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)))));
275
+ 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)))));
276
276
  }
277
277
  .container[data-size=s] .content{
278
- padding-left:var(--sn-dropzone-anatomy-size-s-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
279
- padding-right:var(--sn-dropzone-anatomy-size-s-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
280
- padding-top:var(--sn-dropzone-anatomy-size-s-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px)));
281
- padding-bottom:var(--sn-dropzone-anatomy-size-s-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px)));
278
+ 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))))));
279
+ 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))))));
280
+ 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)))));
281
+ 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)))));
282
282
  }
283
283
  .container[data-size=m]{
284
284
  border-radius:var(--sn-dropzone-anatomy-size-m-borderRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px)));
285
- padding-left:var(--sn-dropzone-anatomy-size-m-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
286
- padding-right:var(--sn-dropzone-anatomy-size-m-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
287
- padding-top:var(--sn-dropzone-anatomy-size-m-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
288
- padding-bottom:var(--sn-dropzone-anatomy-size-m-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
289
- min-height:var(--sn-dropzone-anatomy-size-m-minHeight, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
285
+ 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)))));
286
+ 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)))));
287
+ 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)))));
288
+ 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)))));
289
+ 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)))));
290
290
  border-width:var(--sn-dropzone-anatomy-size-m-borderWidth, var(--sn-brand-anatomy-line-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px)));
291
291
  }
292
292
  .container[data-size=m] .content{
293
- padding-left:var(--sn-dropzone-anatomy-size-m-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
294
- padding-right:var(--sn-dropzone-anatomy-size-m-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
295
- padding-top:var(--sn-dropzone-anatomy-size-m-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px)));
296
- padding-bottom:var(--sn-dropzone-anatomy-size-m-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px)));
293
+ 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))))));
294
+ 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))))));
295
+ 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)))));
296
+ 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)))));
297
297
  }
298
298
  .container[data-size=l]{
299
299
  border-radius:var(--sn-dropzone-anatomy-size-l-borderRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px)));
300
- padding-left:var(--sn-dropzone-anatomy-size-l-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
301
- padding-right:var(--sn-dropzone-anatomy-size-l-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
302
- padding-top:var(--sn-dropzone-anatomy-size-l-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
303
- padding-bottom:var(--sn-dropzone-anatomy-size-l-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
304
- min-height:var(--sn-dropzone-anatomy-size-l-minHeight, var(--sn-density-size-l, var(--sn-primitive-dimension-64, 64px)));
300
+ 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)))));
301
+ 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)))));
302
+ 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)))));
303
+ 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)))));
304
+ 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)))));
305
305
  border-width:var(--sn-dropzone-anatomy-size-l-borderWidth, var(--sn-brand-anatomy-line-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px)));
306
306
  }
307
307
  .container[data-size=l] .content{
308
- padding-left:var(--sn-dropzone-anatomy-size-l-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
309
- padding-right:var(--sn-dropzone-anatomy-size-l-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
310
- padding-top:var(--sn-dropzone-anatomy-size-l-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px)));
311
- padding-bottom:var(--sn-dropzone-anatomy-size-l-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px)));
308
+ 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))))));
309
+ 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))))));
310
+ 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)))));
311
+ 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)))));
312
312
  }
313
313
  .container[data-disabled]{
314
314
  cursor:not-allowed;
315
- background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
315
+ background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
316
316
  }
317
317
  .container[data-disabled] .content{
318
318
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
@@ -331,7 +331,7 @@
331
331
  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)));
332
332
  }
333
333
  .container .borderLayer[data-state=activatedOnBackground]{
334
- 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))));
334
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
335
335
  }
336
336
  .container .borderLayer[data-state=versionOnColor]{
337
337
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -356,7 +356,7 @@
356
356
  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)));
357
357
  }
358
358
  .container:hover:not([data-disabled], [data-loading]) .borderLayer[data-state=activatedOnBackground]{
359
- 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))));
359
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
360
360
  }
361
361
  .container:hover:not([data-disabled], [data-loading]) .borderLayer[data-state=versionOnColor]{
362
362
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -383,7 +383,7 @@
383
383
  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)));
384
384
  }
385
385
  .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]{
386
- 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))));
386
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
387
387
  }
388
388
  .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]{
389
389
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));