@cloud-ru/ds-drag-and-drop 1.1.3 → 1.1.4

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 (12) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/dist/cjs/components/DragPreview/styles.module.css +7 -7
  3. package/dist/cjs/components/DropIndicator/styles.module.css +1 -1
  4. package/dist/cjs/components/DropTarget/styles.module.css +2 -2
  5. package/dist/cjs/style.css +10 -10
  6. package/dist/esm/components/DragPreview/styles.module.css +7 -7
  7. package/dist/esm/components/DropIndicator/styles.module.css +1 -1
  8. package/dist/esm/components/DropTarget/styles.module.css +2 -2
  9. package/dist/esm/style.css +10 -10
  10. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  11. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  12. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,10 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 1.1.4 (2026-10-17)
7
+
8
+ **Note:** Version bump only for package @ds/drag-and-drop
9
+
6
10
  ## 1.1.3 (2026-09-28)
7
11
 
8
12
  **Note:** Version bump only for package @ds/drag-and-drop
package/dist/cjs/components/DragPreview/styles.module.css CHANGED
@@ -5,42 +5,42 @@
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-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)));
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(34, 34, 34, 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(34, 34, 34, 0.0784313725)));
9
9
  }
10
10
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level=default]{
11
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, #edf7f1));
15
+ background:var(--sn-theme-color-primary-background, var(--sn-brand-color-primary-90, #f2f2f2));
16
16
  }
17
17
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level="1Level"]{
18
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, #f5fdf8));
22
+ background:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, #f8f8f8));
23
23
  }
24
24
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level="2Level"]{
25
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, #fbfffc));
29
+ background:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, #ffffff));
30
30
  }
31
31
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level=default]{
32
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-brand-palette-gray-90, #eeeff3)));
36
+ background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #f4f4f4)));
37
37
  }
38
38
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level="1Level"]{
39
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-brand-palette-gray-95, #fdfdfd)));
43
+ background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #ffffff)));
44
44
  }
45
45
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level="2Level"]{
46
46
  backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
@@ -208,7 +208,7 @@
208
208
  }
209
209
  .dragPreview[data-acrylic-appearance=decorTransparent] .acrylic{
210
210
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
211
- background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
211
+ background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(136, 146, 170, 0.0784313725)));
212
212
  }
213
213
 
214
214
  .acrylic{
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-50, #389f74));
4
+ border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
5
5
  border-style:dashed;
6
6
  }
7
7
  .dropIndicator[data-orientation=horizontal]{
package/dist/cjs/components/DropTarget/styles.module.css CHANGED
@@ -4,7 +4,7 @@
4
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, 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));
7
+ background:var(--sn-theme-color-primary-decorTransparent, var(--sn-brand-color-primary-transparent, rgba(128, 128, 128, 0.1411764706)));
8
+ outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
9
9
  outline-offset:calc(-1 * var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
10
10
  }
package/dist/cjs/style.css CHANGED
@@ -18,42 +18,42 @@
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-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)));
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(34, 34, 34, 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(34, 34, 34, 0.0784313725)));
22
22
  }
23
23
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level=default]{
24
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, #edf7f1));
28
+ background:var(--sn-theme-color-primary-background, var(--sn-brand-color-primary-90, #f2f2f2));
29
29
  }
30
30
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level="1Level"]{
31
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, #f5fdf8));
35
+ background:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, #f8f8f8));
36
36
  }
37
37
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level="2Level"]{
38
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, #fbfffc));
42
+ background:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, #ffffff));
43
43
  }
44
44
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level=default]{
45
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-brand-palette-gray-90, #eeeff3)));
49
+ background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #f4f4f4)));
50
50
  }
51
51
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level="1Level"]{
52
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-brand-palette-gray-95, #fdfdfd)));
56
+ background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #ffffff)));
57
57
  }
58
58
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level="2Level"]{
59
59
  backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
@@ -221,7 +221,7 @@
221
221
  }
222
222
  .dragPreview[data-acrylic-appearance=decorTransparent] .acrylic{
223
223
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
224
- background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
224
+ background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(136, 146, 170, 0.0784313725)));
225
225
  }
226
226
 
227
227
  .acrylic{
@@ -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-50, #389f74));
244
+ border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
245
245
  border-style:dashed;
246
246
  }
247
247
  .dropIndicator[data-orientation=horizontal]{
@@ -303,7 +303,7 @@
303
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, 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));
306
+ background:var(--sn-theme-color-primary-decorTransparent, var(--sn-brand-color-primary-transparent, rgba(128, 128, 128, 0.1411764706)));
307
+ outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
308
308
  outline-offset:calc(-1 * var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
309
309
  }
package/dist/esm/components/DragPreview/styles.module.css CHANGED
@@ -5,42 +5,42 @@
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-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)));
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(34, 34, 34, 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(34, 34, 34, 0.0784313725)));
9
9
  }
10
10
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level=default]{
11
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, #edf7f1));
15
+ background:var(--sn-theme-color-primary-background, var(--sn-brand-color-primary-90, #f2f2f2));
16
16
  }
17
17
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level="1Level"]{
18
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, #f5fdf8));
22
+ background:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, #f8f8f8));
23
23
  }
24
24
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level="2Level"]{
25
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, #fbfffc));
29
+ background:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, #ffffff));
30
30
  }
31
31
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level=default]{
32
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-brand-palette-gray-90, #eeeff3)));
36
+ background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #f4f4f4)));
37
37
  }
38
38
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level="1Level"]{
39
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-brand-palette-gray-95, #fdfdfd)));
43
+ background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #ffffff)));
44
44
  }
45
45
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level="2Level"]{
46
46
  backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
@@ -208,7 +208,7 @@
208
208
  }
209
209
  .dragPreview[data-acrylic-appearance=decorTransparent] .acrylic{
210
210
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
211
- background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
211
+ background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(136, 146, 170, 0.0784313725)));
212
212
  }
213
213
 
214
214
  .acrylic{
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-50, #389f74));
4
+ border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
5
5
  border-style:dashed;
6
6
  }
7
7
  .dropIndicator[data-orientation=horizontal]{
package/dist/esm/components/DropTarget/styles.module.css CHANGED
@@ -4,7 +4,7 @@
4
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, 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));
7
+ background:var(--sn-theme-color-primary-decorTransparent, var(--sn-brand-color-primary-transparent, rgba(128, 128, 128, 0.1411764706)));
8
+ outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
9
9
  outline-offset:calc(-1 * var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
10
10
  }
package/dist/esm/style.css CHANGED
@@ -18,42 +18,42 @@
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-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)));
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(34, 34, 34, 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(34, 34, 34, 0.0784313725)));
22
22
  }
23
23
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level=default]{
24
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, #edf7f1));
28
+ background:var(--sn-theme-color-primary-background, var(--sn-brand-color-primary-90, #f2f2f2));
29
29
  }
30
30
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level="1Level"]{
31
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, #f5fdf8));
35
+ background:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, #f8f8f8));
36
36
  }
37
37
  .dragPreview[data-acrylic-appearance=primary][data-acrylic-level="2Level"]{
38
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, #fbfffc));
42
+ background:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, #ffffff));
43
43
  }
44
44
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level=default]{
45
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-brand-palette-gray-90, #eeeff3)));
49
+ background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #f4f4f4)));
50
50
  }
51
51
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level="1Level"]{
52
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-brand-palette-gray-95, #fdfdfd)));
56
+ background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #ffffff)));
57
57
  }
58
58
  .dragPreview[data-acrylic-appearance=neutral][data-acrylic-level="2Level"]{
59
59
  backdrop-filter:var(--sn-acrylic-backdropFilter2Level, none);
@@ -221,7 +221,7 @@
221
221
  }
222
222
  .dragPreview[data-acrylic-appearance=decorTransparent] .acrylic{
223
223
  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
224
- background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
224
+ background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(136, 146, 170, 0.0784313725)));
225
225
  }
226
226
 
227
227
  .acrylic{
@@ -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-50, #389f74));
244
+ border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
245
245
  border-style:dashed;
246
246
  }
247
247
  .dropIndicator[data-orientation=horizontal]{
@@ -303,7 +303,7 @@
303
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, 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));
306
+ background:var(--sn-theme-color-primary-decorTransparent, var(--sn-brand-color-primary-transparent, rgba(128, 128, 128, 0.1411764706)));
307
+ outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
308
308
  outline-offset:calc(-1 * var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
309
309
  }